JavaScript puede mostrar información de cuatro formas distintas.
- Escribiendo en una ventana emergente con window.alert().
- Escribiendo en el propio documento HTML usando document.write().
- También en el propio documento HTML con innerHTML.
- O en la consola del navegador usando console.log().
Vamos a colocar en sendos iframes un ejemplo de cada caso para comprobar como funciona cada caso.
window.alert()
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de window.alert() en JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<head>
<body>
<h2>Ejemplo de window.alert() en JavaScript</h2>
<p>Esto es un párrafo.</p>
<script>
function f(){
window.alert(5 + 6);
}
</script>
<button type="button" onclick="f()">Inténtalo</button>
</body>
</html> |
document.write()
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de document.write() en JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<head>
<body>
<h2>Ejemplo de document.write() en JavaScript</h2>
<p>Esto es un párrafo.</p>
<script>
function f(){
document.write(5 + 6);
}
</script>
<button type="button" onclick="f()">Inténtalo</button>
</body>
</html> |
innerHTML
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de innerHTML en JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<head>
<body>
<h2>Ejemplo de innerHTML en JavaScript</h2>
<p>Esto es un párrafo.</p>
<p id="demo"></p>
<script>
function f(){
document.getElementById("demo").innerHTML = 5 + 6;
}
</script>
<button type="button" onclick="f()">Inténtalo</button>
</body>
</html> |
console.log()
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de console.log() en JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<head>
<body>
<h2>Ejemplo de console.log() en JavaScript</h2>
<p>Esto es un párrafo.</p>
<p>
Activar el depurador en el navegador (Chrome, IE, Firefox) con F12, y seleccionar "Consola" en el menú.
</p>
<script>
console.log(5 + 6);
</script>
</body>
</html> |
A partir del contenido del
capítulo JS Output del curso de JavaScript de W3Schools.
En el ejemplo de
document.write hemos creado una función con el código para asociarlo a la acción de un botón..
Sin embargo no es del todo necesario.
Tal como se muestra en W3Shools, se puede crear el botón y directamente asignarle la acción.
Por ejemplo, con esta línea de código:
<button type="button" onclick="document.write(5 + 6)">Inténtalo</button>
Verlo en este caso.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Segundo ejemplo de document.write() en JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<head>
<body>
<h2>Segundo ejemplo de document.write() en JavaScript</h2>
<p>Esto es un párrafo.</p>
<p id="demo"></p>
<button type="button" onclick="document.write(5 + 6)">Inténtalo</button>
</html> |
No hay comentarios:
Publicar un comentario