Ejemplos comunes de JavaScript

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

Nota:Si estos ejemplos utilizan métodos que aún no ha aprendido:Por favorNo se preocupe. Las conocerá en el siguiente capítulo.

JavaScript puede modificar el contenido HTML

El método getElementById() devuelve el elemento que coincide con el ID especificado.

Este ejemplo utiliza este método para encontrar elementos HTML (id="para") y cambiar su contenido (innerHTML) a "Hello world":

document.getElementById("para").innerHTML = "Hello world";

JavaScript puede cambiar el valor de las propiedades HTML

En este ejemplo, JavaScript cambió<img>del etiquetasrcEl valor de la propiedad:

JavaScript puede cambiar los estilos HTML (CSS)

JavaScript styleLas propiedades se pueden usar para establecer estilos en línea de los elementos.

document.getElementById("demo").style.color = "blue";

JavaScript puede ocultar elementos HTML

Ocultar elementos HTML también se puede lograr mediante la modificación del estilo de visualización.

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

JavaScript puede mostrar elementos HTML

Mostrar elementos HTML ocultos también se puede lograr mediante la modificación del estilo de visualización.

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

JavaScript puede crear ventanas emergentes de alerta

En este ejemplo, JavaScript crea un cuadro de diálogo de alerta.

alert("¡Hola mundo!");

JavaScript puede adjuntar un gestor de eventos al documento

En este ejemplo, JavaScript monitorea el evento de clic del ratón y responde a él.

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

JavaScript puede mostrar la hora

En este ejemplo, JavaScript muestra la hora actual.

var intervalID = setInterval(startTimer,　1000);
function startTimer() {
　　　　var date = new Date();
　　　　var x = document.getElementById("result");
　　　　x.innerHTML = date.getHours();　+　:　+　date.getMinutes();　+　:　+　date.getSeconds();
}