Lo primero que necesitaremos es crear nuestra página web que contendrá nuestro JavaScript. Nosotros vamos a crear una página web muy simple, la más simple, ya que solo la usaremos para probar nuestros programas en JavaScript. Si no tienes conocimientos de HTML y quieres ampliar los que aquí damos, te recomendamos que busques en la red tutoriales para trabajar con HTML.
Creamos nuestra web y nuestro JavaScript
Lo primero que tenemos que hacer es crear nuestra web y decirle que cuando la abrimos con el navegador vaya a buscar el programa en JavaScript a la ruta donde lo tengamos y lo ejecute en la web. Recomendamos para hacer prácticas guardar el archivo de la pagina web y el del código de JavaScript en la misma carpeta, así no tendremos problemas para que la web encuentre el archivo JavaScript.
El archivo de la página hay que guardarlo con la extensión .html (extensión de las webs) y el archivo con el código JavaScript de nuestro programa con la extensión .js
Vamos a crear nuestra web básica. Abre notepad y escribe:
<html>
<head>
<title>Esta es mi página web sin Javascript</title>
</head>
<body>
"Hola Mundo"
</body>
</html>
Guádalo con el nombre web.html
Explicación del código web:
<html> </html> Etiqueta de apertura y cierre donde decimos que es un archivo escrito en html, código usado en las páginas web. Todo lo que hay entre estas dos etiquetas es la página web. Ahora el navegador lo interpreta como una página web.
<head> </head> Etiquetas de apertura y cierre de la cabecera. Aquí se pone el título (<title> </title>) de la web que aparecerá en la pestaña del navegador y algunas cosas más.
<body> </body> Entre estas dos etiquetas se pone el contenido de la página web. En nuestro caso el texto "Hola Mundo" solamente.
Ahora crea, si no la tienes ya, una carpeta con el nombre JavaScript y guarda dentro el archivo creado con el nombre web.html. Recuerda esta es la web, no el javascript.
OJO con algunos editores de texto. A veces la extensión html no la guarda como extensión, solo como parte del nombre del archivo. Fíjate en el tipo de archivo antes de guardar, si tienes archivo de texto te guardará el archivo así: web.html.txt. Lo que quiere decir que no es un archivo con extensión html, sino de texto con extensión .txt. Esto mismo puede pasarnos más adelante cuando guardemos nuestro archivo .js. Repito OJO con esto, si no lo hacemos bien no conseguiremos nada.
Ahora abre el archivo (botón derecho abrir con...) con tu navegador. Verás una web que pone "Hola Mundo". No necesitamos más. ¡Ya tenemos nuestra web sobre la que actuará nuestro programa en javascript. Esta web no tiene JavaScript, por eso solo muestra el texto dentro de la etiqueta <body>. Vamos a poner nuestro primer código JavaScript dentro de la web.
Introducir JavaScript dentro de la Web
Para meter código Javascript dentro de una web se puede hacer de 2 formas diferentes.
alert("Esto es JavaScript"); ¿Qué hace? Pues muy simple; muestra una alerta con el texto que hay entre las comillas en el navegador.
Si usamos el primer método en nuestra web sería (modifica la página web creada antes):
<html>
<head>
<title>Esta es mi página web con Javascript Interno</title>
alert("Esto es JavaScript");
</head>
<body>
"Hola Mundo"
</body>
</html>
Ahora abre la web y verás el texto de alerta que has creado tú solito.
Si usamos el segundo método, método que usaremos a partir de ahora, primero crearemos nuestro archivo .js con la instrucción.
Abre el editor de textos y escribe:
alert("Esto es JavaScript");
Guárdalo con el nombre y la extensión nuestrojavascript.js dentro de la carpeta que creamos antes llamada JavaScript.
OJO en el archivo externo las instrucciones no van dentro de las etiquetas y . Solo se ponen las instrucciones separadas por ; y nada más.
Ahora vamos a decirle a nuestra web (web.html) anterior que nos lea el archivo nuestrojavascript.js que estará en la misma carpeta (los dos en el mismo sitio). Esta es la forma de hacerlo, escribiendo dentro del head de nuestra web lo siguiente:
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
Esta etiqueta es muy sencilla, primero dice que es un programa escrito en JavaScript y luego dentro de src y entre comillas, le dice donde tiene que ir a leerlo, en nuestro caso al archivo nuestrojavascript.js, que estará dentro de la misma carpeta que la web. Veamos como quedaría nuestra web:
<html>
<head>
<title>Esta es mi página web con Javascript Externo</title>
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
</head>
<body>
"Hola Mundo"
</body>
</html>
¿Por qué recomendamos esta método? Vamos a verlo con ejemplo muy sencillo.
Imagina que tienes un sitio web con 1.000 páginas web. Incrusta en cada página el código
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
y posteriormente creo al archivo .js. Pasado un tiempo quieres añadir más JavaScript en tus páginas. Solo tendrás que ampliar el archivo .js y automáticamente el nuevo JavaScript aparecerá en todas las páginas.
Si uso el método de escribir directamente el código en la página tendría que ir copiando de una en una en cada web el nuevo código, es decir 1.000 veces. Nuevo código... otras 1.000 veces a copiarlo y así sucesivamente.
Definitivamente mucho mejor el método de archivo externo.
Creamos nuestra web y nuestro JavaScript
Lo primero que tenemos que hacer es crear nuestra web y decirle que cuando la abrimos con el navegador vaya a buscar el programa en JavaScript a la ruta donde lo tengamos y lo ejecute en la web. Recomendamos para hacer prácticas guardar el archivo de la pagina web y el del código de JavaScript en la misma carpeta, así no tendremos problemas para que la web encuentre el archivo JavaScript.
El archivo de la página hay que guardarlo con la extensión .html (extensión de las webs) y el archivo con el código JavaScript de nuestro programa con la extensión .js
Vamos a crear nuestra web básica. Abre notepad y escribe:
<html>
<head>
<title>Esta es mi página web sin Javascript</title>
</head>
<body>
"Hola Mundo"
</body>
</html>
Guádalo con el nombre web.html
Explicación del código web:
<html> </html> Etiqueta de apertura y cierre donde decimos que es un archivo escrito en html, código usado en las páginas web. Todo lo que hay entre estas dos etiquetas es la página web. Ahora el navegador lo interpreta como una página web.
<head> </head> Etiquetas de apertura y cierre de la cabecera. Aquí se pone el título (<title> </title>) de la web que aparecerá en la pestaña del navegador y algunas cosas más.
<body> </body> Entre estas dos etiquetas se pone el contenido de la página web. En nuestro caso el texto "Hola Mundo" solamente.
Ahora crea, si no la tienes ya, una carpeta con el nombre JavaScript y guarda dentro el archivo creado con el nombre web.html. Recuerda esta es la web, no el javascript.
OJO con algunos editores de texto. A veces la extensión html no la guarda como extensión, solo como parte del nombre del archivo. Fíjate en el tipo de archivo antes de guardar, si tienes archivo de texto te guardará el archivo así: web.html.txt. Lo que quiere decir que no es un archivo con extensión html, sino de texto con extensión .txt. Esto mismo puede pasarnos más adelante cuando guardemos nuestro archivo .js. Repito OJO con esto, si no lo hacemos bien no conseguiremos nada.
Ahora abre el archivo (botón derecho abrir con...) con tu navegador. Verás una web que pone "Hola Mundo". No necesitamos más. ¡Ya tenemos nuestra web sobre la que actuará nuestro programa en javascript. Esta web no tiene JavaScript, por eso solo muestra el texto dentro de la etiqueta <body>. Vamos a poner nuestro primer código JavaScript dentro de la web.
Introducir JavaScript dentro de la Web
Para meter código Javascript dentro de una web se puede hacer de 2 formas diferentes.
- Poniendo el código directamente entre dos etiquetas llamadas y (marcan el inicio y el fin del código JavaScript) y entre las etiquetas <head> y </head> del código de la página web. No es el más recomendable.
- Creando un archivo .js y crear un enlace desde la página web en html, para que vaya a leerlo cuando se visualice la página web en un navegador. Método que recomendamos.La primera instrucción que vamos aprender es la siguiente:
alert("Esto es JavaScript"); ¿Qué hace? Pues muy simple; muestra una alerta con el texto que hay entre las comillas en el navegador.
Si usamos el primer método en nuestra web sería (modifica la página web creada antes):
<html>
<head>
<title>Esta es mi página web con Javascript Interno</title>
alert("Esto es JavaScript");
</head>
<body>
"Hola Mundo"
</body>
</html>
Ahora abre la web y verás el texto de alerta que has creado tú solito.
Si usamos el segundo método, método que usaremos a partir de ahora, primero crearemos nuestro archivo .js con la instrucción.
Abre el editor de textos y escribe:
alert("Esto es JavaScript");
Guárdalo con el nombre y la extensión nuestrojavascript.js dentro de la carpeta que creamos antes llamada JavaScript.
OJO en el archivo externo las instrucciones no van dentro de las etiquetas y . Solo se ponen las instrucciones separadas por ; y nada más.
Ahora vamos a decirle a nuestra web (web.html) anterior que nos lea el archivo nuestrojavascript.js que estará en la misma carpeta (los dos en el mismo sitio). Esta es la forma de hacerlo, escribiendo dentro del head de nuestra web lo siguiente:
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
Esta etiqueta es muy sencilla, primero dice que es un programa escrito en JavaScript y luego dentro de src y entre comillas, le dice donde tiene que ir a leerlo, en nuestro caso al archivo nuestrojavascript.js, que estará dentro de la misma carpeta que la web. Veamos como quedaría nuestra web:
<html>
<head>
<title>Esta es mi página web con Javascript Externo</title>
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
</head>
<body>
"Hola Mundo"
</body>
</html>
¿Por qué recomendamos esta método? Vamos a verlo con ejemplo muy sencillo.
Imagina que tienes un sitio web con 1.000 páginas web. Incrusta en cada página el código
< script type = "text / JavaScript" src = "nuestrojavascript.js"> </script >
y posteriormente creo al archivo .js. Pasado un tiempo quieres añadir más JavaScript en tus páginas. Solo tendrás que ampliar el archivo .js y automáticamente el nuevo JavaScript aparecerá en todas las páginas.
Si uso el método de escribir directamente el código en la página tendría que ir copiando de una en una en cada web el nuevo código, es decir 1.000 veces. Nuevo código... otras 1.000 veces a copiarlo y así sucesivamente.
Definitivamente mucho mejor el método de archivo externo.
[…] Tutorial de JavaScript (I) […]
ResponderEliminar