Introducción a JavaScript

Tabla de contenido

Esta página contiene algunos ejemplos de lo que JavaScript puede hacer.

JavaScript puede cambiar el contenido HTML

Uno de los muchos métodos HTML de JavaScript es getElementById().

El siguiente ejemplo "encuentra" un elemento HTML (con id="demo"), y cambia el contenido del elemento (innerHTML) a "Hola JavaScript":

Ejemplo

document.getElementById("demo").innerHTML = "Hello JavaScript";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript acepta comillas simples y dobles:

Ejemplo

document.getElementById('demo').innerHTML = 'Hello JavaScript';

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript puede cambiar los valores de los atributos HTML

En este ejemplo, JavaScript cambia el valor del atributo src (fuente) de una etiqueta <img>:

La bombilla

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

JavaScript puede cambiar los estilos HTML (CSS)

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

JavaScript puede ocultar elementos HTML

Se pueden ocultar elementos HTML cambiando el estilo display:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

JavaScript puede mostrar elementos HTML

También se pueden mostrar elementos HTML ocultos cambiando el estilo display:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

¿Sabías?

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

JavaScript fue inventado por Brendan Eich en 1995 y se convirtió en un estándar ECMA. en 1997.

ECMA-262 es el nombre oficial del estándar. ECMAScript es el nombre oficial del idioma.