Este post ofrece una breve explicación de JavaScript y cómo incluir código JavaScript en un documento html. JavaScript es un lenguaje de programación para crear páginas web dinámicas.
Una página web dinámica es aquella que tiene «vida» y que al usuario le resulta atractivo interactuar ya que puede haber texto que aparece/desaparece, animaciones, acciones al pulsar un botón o mover el ratón, ventanas de aviso etc… Además, funciona en el lado del cliente por tanto no es preciso enviar peticiones al servidor para realizar alguna acción en concreto.
Este lenguaje es interpretado por tanto, no es preciso compilar el código, el navegador se encarga de ejecutarlo. También vale cualquier navegador, incluso los más antiguos aunque puede que haya alguna opción capada.
Aunque contenga la palabra Java, JavaScript no guarda ninguna relación con Java de hecho, JavaScript fue creado por Netscape (Brendan Eich), sí esa misma, la del navegador muy antiguo donde muchos dimos nuestros primeros pasos en internet.
Cómo incluir código javascript en html
Si queremos integrar nuestro código en nuestra página tenemos 3 opciones
Incluir JavaScript en el mismo documento XHTML
El código se encierra entre etiquetas <script> y se puede incluir en cualquier parte del documento. Sin embargo, es recomendable incluirlo al final, antes del cierre del <body>. Esto es por 2 razones, una es que la página no tardará tanto en mostrar algo ya que el html y css se carga pronto y al usuario no le dará una sensación de lentitud. La otra razón es que podemos manipular el DOM o algún elemento HTML y si el JavaScript se carga antes que el elemento que queremos manipular, no funcionará ya que pensará que el elemento no existe. Seguramente veas que se recomienda dentro del <head>, esto sólo está bien si tienes funciones y quieres usarlas a lo largo del documento.
Voy a incluir 2 porciones de código JavaScript, una dentro del <head> y otra en el <body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Introducción a JavaScript</title> <script> alert("Este mensaje viene desde head"); </script> </head> <body> <script> alert("Este mensaje viene desde del body"); </script> </body> </html> |
Esto debería de mostrar 2 ventanas de alerta. En este caso estoy empleando HTML5 y no es preciso incluir el atributo type dentro de <script>. Sin embargo, es muy probable que en otros sitios veas la etiqueta de apertura de script de la siguiente manera: <script type=»text/javascript»>.
Este forma de incluir código JavaScript está pensado para definir un pequeño bloque de código o incluir alguna instrucción específica en un determinado documento HTML completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.
Desventaja, que si tienes que hacer una modificación del bloque de código será preciso hacerlo en todas las páginas donde tengan el mismo bloque de código.
Definir el JavaScript en un archivo externo
El código JavaScript puede estar en un archivo de tipo .js que podemos llamar posteriormente en el documento HTML. Se puede crear y llamar tantos archivos JavaScript como sean necesarios.
Supongamos que tenemos el archivo llamar.js
|
1 |
alert("Hola mundo, estoy en un archivo externo"); |
Y en la misma carpeta donde está ese archivo, nuestro HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Introducción a JavaScript</title> <script src="llamar.js"></script> <!-- o <script type="text/javascript" src="llamar.js"></script> --> </head> <body> </body> </html> |
El atributo src incluye la ruta, relativa o absoluta, del archivo .js que queremos incluir. Si por ejemplo, nuestro archivo está en una carpeta llamada «js» la ruta del atributo src sería: /js/llamar.js
La ventaja de este método es que además de simplificar el código de la página, podemos reutilizar el mismo código en todas las páginas y realizar cualquier modificación sobre el archivo se ve reflejada en todas las páginas que enlacen el archivo. También pueden llamarse los archivos en cualquier parte del documento pero lo normal es que sea en el <head> o cerca del cierre del<body>.
Incluir JavaScript en los elementos HTML
Este método es el menos utilizado y tiene relación los eventos. Para incluir código JavaScript se realiza dentro de la misma etiqueta dentro de un atributo que hace referencia a un evento, en este caso «onclick» es en caso de clicar sobre el párrafo.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Introducción a JavaScript</title> </head> <body> <p onclick="alert('Me has clickado!')">Un párrafo corriente</p> </body> </html> |
Este manera ensucia bastante el código y hace más tedioso el mantenimiento del código JavaScript. Más adelante explicaré manejadores de eventos, donde podremos realizar acciones como este ejemplo pero mucho más limpio.
Y hata aquí la introducción a JavaScript y cómo incluir código JavaScript en el documento. A seguir picando 🙂