Introducción a JavaScript

¿Por qué estudiar JavaScript?

JavaScript es uno de los 3 lenguajes que todos los desarrolladores web deben aprender:

  1. HTML para definir el contenido de las páginas web.
  2. CSS para especificar el diseño de las páginas web.
  3. JavaScript para programar el comportamiento de las páginas web.

En las páginas web no es el único lugar en donde se usa JavaScript. Muchos programas de escritorio y servidor utilizan JavaScript. Node.js es el más conocido. Algunas Bases de Datos como MongoDB y CouchDB, también utilizan JavaScript como sus lenguajes de programación.

Lo que debes saber de JavaScript

JavaScript y Java son lenguajes completamente diferentes, tanto en concepto y diseño.

JavaScript fue inventado por Brendan Eich en 1995 y se convirtió en un estándar en 1997. ECMA-262 es el nombre oficial del estándar. ECMAScript es el nombre oficial del lenguaje.

Cambiar el contenido HTML

Uno de muchos métodos HTML de JavaScript es getElementId(). En siguiente ejemplo se usa el método para encontrar un elemento HTML (con id="demo") y cambia su contenido (innerHTML) a "Hola mundo.":

document.getElementById("demo").innerHTML = "Hola mundo";

JavaScript acepta tanto las doble comillas como las comillas simples:

document.getElementById('demo').innerHTML = 'Hola mundo';

Cambiar el valor de un atributo de una etiquetas HTML

En el siguiente ejemplo un elemento <button> cambia el valor de un atributo src de una etiqueta <img>:

<button onclick="document.getElementById('mi-imagen').src='imagen.jpg'">
  Cambiar Imagen
</button>

Cambiar el estilo CSS

Cambiar el estilo de un elemento HTML, es una variante de cambiar el atributo HTML:

document.getElementById("demo").style.fontsize = "35px";

Ocultar elementos HTML

Para ocultar elementos HTML, podemos hacerlo cambiando el estilo de la propiedad display del CSS:

document.getElementById("demo").style.display = "none";

Mostrar elementos HTML

Para mostrar elementos HTML ocultos, podemos hacerlo cambiando el estilo de la propiedad display del CSS:

document.getElementById("demo").style.display = "block";