Introducción a JavaScript

Más allá del HTML y CSS, todo desarrollador web debe dominar JavaScript, a fin de establecer y controlar el comportamiento de las páginas web. Aprender que es JavaScript, donde colocar el código, como manipular los elementos HTML, como manipular los estilos CSS, realizar cálculos, y más.
¿Por qué estudiar JavaScript?
JavaScript es uno de los 3 lenguajes que todos los desarrolladores web deben aprender:
- HTML para definir el contenido de las páginas web.
- CSS para especificar el diseño de las páginas web.
- 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";