jueves, 9 de enero de 2014

Tutorial Javascript parte 1 - Introducción y primera ejecución de código JS




Bienvenid@s al primer capítulo del tutorial de Javascript, el objetivo de este tutorial es enseñaros los conceptos básicos de la programación Javascript, así como el manejo del DOM HTML.

Primeramente decir que Javascript es un lenguaje de programación ampliamente extendido, sobre todo en el desarrollo web y especialmente trabajando del lado del cliente (navegador), también hay que recalcar que otras librerías ampliamente conocidas como Jquery o Mootools, entre otras, están escritas en lenguaje Javascript, también hay que decir que Javascript amplia sus posibilidades de uso y ya también es posible trabajas con él a través del lado del servidor gracias a la tecnología node.js.

Una vez vista una breve introducción es momento de tener la primera experiencia con el lenguajes para ello vamos a ver dos formas de incluir código Javascript, una es escribiendo código en el interior de las etiquetas <script></script> en un documento HTML y otras forma es embebiendo un archivo Javascript con extensión .js.

Para el tutorial crea una carpeta, por ejemplo en el escritorio y llámala tutorial-javascript

Abre un editor de código, uno muy recomendable es notepad++ y guarda un archivo como index.html en la carpeta que acabas de crear.

En este ejemplo vamos a ver como escribir código Javascript en un documento HTML. Copia y pega el siguiente código en el archivo index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script>
document.write("Hola Mundo");
alert("Hola Mundo");
</script>
</head>
<body>
</body>
</html>


Ahora guarda index.html y ábrelo en el navegador, verás un resultado como el siguiente ...




Bien, vamos a explicar el código, con document.write estamos realizando una salida de datos en el documento HTML, en este caso nos muestra el texto que hemos incluído "Hola mundo" y con alert también nos muestra una salida de datos con el texto que le hemos incluído pero en este caso a través de una alerta.

Ahora vamos a ver otra forma de ejecutar código javascript y para ello vamos a crear una carpeta llamada javascript en el interior de la carpeta tutorial-javascript, crea un nuevo archivo y guárdalo como prueba.js en la carpeta que acabas de crear javascript, copia y pégale el siguiente código y lo guardas ...

document.write("Hola Mundo");
alert("Hola Mundo");


Cuando embebamos el archivo prueba.js en nuestro documento index.html vamos a obtener el mismo resultado que con el código que escribimos en las etiquetas script, para ver lo que sucede modifica el archivo index.html dejándolo de la siguiente forma ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/prueba.js"></script>
<script>
/*document.write("Hola Mundo");*/
//alert("Hola Mundo");
</script>
</head>
<body>
</body>
</html>


Bien, si observas el código, con la siguiente etiqueta script estamos incluyendo el código javascript que se encuentra en prueba.js, para ello en el atributo src indicamos la ruta ...

<script type="text/javascript" src="javascript/prueba.js"></script>


Y si observas el código que se encuentra entre las etiquetas script, el código ahora se encuentra comentado, es decir, para realizar comentarios utiliza la siguiente forma ...

/* Comentarios */ 
// Comentarios


Ahora refresca la página de index.html en el navegador, verás como estás ejecutando código Javascript de un archivo externo, por supuesto el código comentado ahora no se va a ejecutar, ya que es considerado un comentario.