En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar.
Este lenguaje de script nos permite modificar la estructura, el contenido, los estilos de las etiquetas html de un documento web y añadir dinamismo a una página.
Existen varios métodos para acoplar el javascript en un proyecto web:
- En el <head> dentro de las etiquetas <script></script>
- En el <body> dentro de las etiquetas <script></script>
- En la consola del navegador mediante la instrucción console.log(«mensaje») o escribiendo el código javascript directamente dentro de la consola.
- En una hoja .js externa llamada mediante la instrucción <script src=»aquí la url de la hoja .js»></script>
- Como atributo de una etiqueta html. Por ejemplo un <button>
[vc_raw_html]JTNDYnV0dG9uJTIwY2xhc3MlM0QlMjJxYnV0dG9uJTIyJTIwb25jbGljayUzRCUyMndpbmRvdy5hbGVydCUyOCUyN2VqZW1wbG8lMjBkZSUyMHRleHRvJTIwZW4lMjB2ZW50YW5hJTIwZW1lcmdlbnRlJTI3JTI5JTIyJTNFJUMyJUExY2xpY2ElMjBhcXUlQzMlQUQlMjBwYXJhJTIwdmVyJTIwdW5hJTIwdmVudGFuYSUyMGVtZXJnZW50ZSUyMSUzQyUyRmJ1dHRvbiUzRQ==[/vc_raw_html][vc_raw_html]JTNDYnV0dG9uJTIwY2xhc3MlM0QlMjJxYnV0dG9uJTIyJTIwb25jbGljayUzRCUyMmNvbnNvbGUuY2xlYXIlMjglMjklM0Jjb25zb2xlLmxvZyUyOCUyN2VqZW1wbG8lMjBkZSUyMHRleHRvJTIwZXNjcml0byUyMHBvciUyMEZyYW5jZXNjJTIwUmljYXJ0JTIwZW4lMjBsYSUyMGNvbnNvbGElMjBkZWwlMjBuYXZlZ2Fkb3IlMjclMjklMjIlM0UlQzIlQTFjbGljYSUyMGFxdSVDMyVBRCUyMHBhcmElMjB2ZXIlMjB1biUyMHRleHRvJTIwcG9yJTIwbGElMjBjb25zb2xhJTIwZGVsJTIwbmF2ZWdhZG9yJTIxJTNDJTJGYnV0dG9uJTNF[/vc_raw_html]Atención: Si lo estás mirando desde un teléfono, algunos navegadores como Opera mini no tienen soporte para Javascript o incluso en Chrome podemos encontrar la opción deshabilitada la opción por defecto. Para habilitarlo te recomiendo este enlace explicativo.
Para ver el texto por la consola del navegador, tras hacer click en el botón tienes que ir a «más herramientas > herramientas para desarrolladores > consola«.No escribiremos HTML ni Javacript entre:
- La etiqueta de cierre </head> y la apertura del <body>
- La etiqueta de cierre </body> y </html>
- Dentro de <script src=»llamada a una hoja .js»> aquí no escribiríamos </script> cuando la etiqueta <script> hace una llamada a una hoja externa en el atributo
[vc_text_separator title=»Actualización 25 de enero» border=»no»]
Escribir todo el JS en una misma hoja externa
Ayer nos quedó este ejercicio un poco incompleto… vamos a ver si hoy le ponemos el lazo al concepto de acoplamiento en Javascript.
El siguiente paso sería dejar la hoja un poco bonita. No tiene ningún sentido declarar varios scripts en una misma hoja. Y además a los programadores les gusta ser muy ordenados. El html en el documento web, el css en una hoja separada y para el JS también un lugar a parte.
Para hacerlo bien reuniremos todo el código en la hoja que hemos nombrado funciones.js (dentro de la carpeta js). A excepción del botón, claro. Tener en cuenta que en este caso se trata de un atributo de una etiqueta html y que no lo podemos quitar así como así. En realidad si se puede, pero asignando una propiedad al botón durante la fase de carga del documento y interactuando con el DOM. Es pronto para esto…. llegaré de aquí a bastantes días.
El ejercicio a realizar sería pues «acoplar» todo el javascript posible fuera del documento html y dejar la hoja lo más limpia posible.
Si lo hacéis… el resultado será algo similar a la captura que se muestra. Os dejo que os esforcéis un poco y ya me diréis 😉
¡Y hasta aquí el resumen de hoy y de una parte día siguiente 😉
¡Espero que os sea útil y vuestro feedback en los comentarios!
Deja una respuesta