Introducción a JavaScript para principiantes

Primer contacto

Como ya sabemos para ejecutar Javascript sólo necesitamos un navegador. Chrome por ejemplo integra un entorno de ejecución en tiempo real donde podemos hacer algunas pruebas.

Para abrirlo tenemos que acceder a la Consola de las Herramientas para desarrolladores, o haciendo clic derecho Inspeccionar en medio de una página.

Probad lo siguiente:

console.log('Hola mundo');

Con esa instrucción podemos mostrar un mensaje en la consola, es el típico print de todos los lenguajes.

También podemos sumar dos números, como si fuera una calculadora:

2 + 2

O interactuar con el navegador introduciendo este comando:

alert('Hola mundo')

Como bien comentamos en la lección anterior, Javascript se creó para añadir interactividad en las páginas web, ¿pero esto qué significa?

Si conocéis HTML sabréis que este lenguaje describe una estructura utilizando marcas. Estas marcas crean jerarquías que el navegador transforma en una estructura dinámica y viva con la que podemos interactuar, esa estructura se denomina DOM, Document Object Model o árbol de componentes.

Vamos a experimentar un poco con algunas instrucciones que nos permiten interactuar con el DOM del documento actual:

document.title = "Nuevo título"

No siempre es tan fácil modificar los componentes del documento…

document.body = "Algo" // Esto no funcionará

Eso es debido a que la estructura del body es más compleja que el título:

document.body.innerHTML = "Que tal"

Obviamente podemos poner contenido en lenguaje HTML:

document.body.innerHTML = "<h1>Cabecera de primer nivel</h1>"
document.body.innerHTML += "<p>Esto es un parágrafo...</p>"

Vamos a dejarlo por ahora porque tampoco quiero abrumaros, además estoy seguro de que con esto ya empezáis a haceros una idea de lo que JavaScript nos permite hacer.