JavaScript (abreviado comúnmente como «JS») es una manera muy fácil de añadir todo tipo de elementos dinámicos a nuestro sitio web. Para aquellos que vengan de HTML, pero no tengan experiencia en programación, éste será un nuevo concepto, bastante complicado al principio. Para dar inicio a los tutoriales básicos sobre JavaScript, en este articulo, comenzaremos hablando sobre qué es JavaScript, cómo funciona y cómo se implementa.
JavaScript es un lenguaje del lado del cliente, es decir, que toda la acción se produce en el lado del cliente (del lector), se diseñó con una sintaxis similar al lenguaje C, aunque adopta nombres y convenciones del lenguaje de programación Java; sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.
El DOM
JavaScript es un lenguaje de programación orientado a objetos; El DOM es la estructura de objetos que genera el navegador cuando se carga un documento, a través del DOM, JavaScript pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML.
Pensemos en todos los elementos de nuestra página como objetos. El documento en sí es un objeto, compuesto por otros objetos como formularios, enlaces, imágenes y tablas, etc; todos estos objetos tienen propiedades, con valores que definen su color, tamaño, entre otras cosas, como es el caso de los atributos en los elementos html. JavaScript puede leer estas propiedades y modificarlas, o reaccionar a los eventos que suceden a los objetos, como por ejemplo: al dar clic en un objeto, al pasar el mouse, etc.
Implementación de JavaScript
JavaScrip puede ser implementado de manera interna, es decir, en el documento html, y de manera externa; mediante una url donde se encuentra el archivo con extensión .js (archivo que contiene el script).
Script interno
<script type="text/javascript">
//Aquí el script
</script>
Script externo
<script type='text/javascript' src='http://paginaweb/script.js'></script>
JavaScript puede ser incrustado tanto dentro de la cabecera (<header>), como en el cuerpo de la página (<body>) ¿por qué en ambos lugares? simple, al colocarlo en el cuerpo de la página se puede obtener un resultado diferente que al colocarlo en la cabecera; por ejemplo, supongamos que hay un objeto con el contenido «Desarrollo Geek», y queremos modificarlo y cambiarlo por algún otro valor….si colocamos el script en la cabecera, al actualizar la página, nos tiraría un error ¿por qué? porque no encuentra el elemento, el script se ejecutó cuando el navegador aún no cargaba el objeto que queríamos modificar….el resultado sería diferente si colocamos el script debajo del objeto, en ese caso, cargaría primero el objeto y después el script, de esa manera el script se ejecutaría satisfactoriamente.
Claramente, hablamos de un ejemplo, podemos colocar el script en la cabecera y dar ordenes para que no se ejecute hasta que la página haya sido completamente cargada, de esa manera no habría problemas.
Un simple script
Sintaxis:<!-- ingresamos un objeto -->
<a style="cursor: pointer;" id="demo">clic para ver la demo</a>
<!-- y después el script -->
<script type="text/javascript">
//obtenemos la url actual
var PostUrl = location.href;
//obtenemos el titulo actual
var TituloPost = document.title;
//Las mostramos a dar clic en el objeto "demo"
document.getElementById("demo").onclick = function(){ alert(TituloPost + ":" + PostUrl); }
</script>
Resultado:
clic para ver la demo
La etiqueta <noscript>
La etiqueta noscript, es una etiqueta HTML y se utiliza, tal y como dice su nombre indica, para mostrar un mensaje en caso de que el navegador no soporte JavaScript o lo tenga desactivado. Ejemplo:
<noscript>
<p>Lo sentimos, su navegador no soporta JavaScript.</p>
</noscript>
La consola de las herramientas de desarrollo
La mayoría de los navegadores traen consigo herramientas cuya finalidad es ayudar a los desarrolladores web, de entre ellas la consola javascript, herramienta que usaremos en los próximos tutoriales de JavaScript básico.
Abrir las herramientas de desarrollo en chromium y derivados
En los navegadores basados en chromium: opera, chrome, coolnovo, comodo dragon, etc…las herramientas de desarrollo se pueden abrir mediante la combinación de teclas control+alt+i, al hacerlo nos dirigimos a la pestaña console.
Abrir las herramientas de desarrollo en firefox y derivados
En Firefox y basados en el, las herramientas de desarrollo se muestran de la misma manera, utilizando la combinación de teclas control+alt+i, seguido de eso nos dirigimos a la pestaña consola.
Abrir las herramientas de desarrollo en internet explorer/spartan
En los navegadores de Microsoft las herramientas para desarrolladores se muestran con la tecla F12, al abrir sólo queda ir a la pestaña consola.
Con eso terminamos con la introducción a este increíblemente útil lenguaje.
