Escribiendo un Código en JavaScript
El archivo del Código 1 debe tener una extensión .html para que el explorador web lo ejecute correctamente y se ejecuta con localhost más el nombre de archivo con extensión .html por ejemplo:
localhost/js_ajax_jquery/codigo001.html
En el Código 1, está la codificación del mensaje “¡Hola Mundo!” y el Mensaje “¡Hola a Todos!”.
En el Código 1, en la etiqueta <div> de id="capa_mensaje", al cargar la página, se muestra el menaje ¡Hola Mundo!. En la etiqueta <button>, invoca la función miFuncion() que cambia el mensaje de Hola Mundo por ¡Hola a Todos! con la propiedad innerHTML que lo escribe en la capa <div> de id="capa_mensaje".
Descargar archivo codigo001.html
<!-- Archivo: codigo001.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- La etiqueta div donde se muestra el mensaje -->
<div id="capa_mensaje"> ¡Hola Mundo! </div>
<!-- El botón donde cambia el mensaje -->
<button type="button" onclick="miFuncion()"> Cambiar Mensaje </button>
<!-- Códigos de JavaScript -->
<script>
// La función que invoca el botón para cambiar el mensaje
function miFuncion() {
// Propiedad innerHTML
document.getElementById("capa_mensaje").innerHTML =
"¡Hola a Todos!";
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo001.html
En la Figura 6, si se hace clic en el botón Cambiar Mensaje, en la Figura 7 aparece el mensaje ¡Hola a Todos!.
Código 1: Hola Mundo
En el Código2, los códigos de JavaScript están dentro de las etiquetas <script> </script> y la codificación en JavaScript, se recomienda colocarlo antes de la etiqueta </body>.
Descargar archivo codigo002.html
Código 2: Codigo JavaScript
<!-- Archivo: codigo002.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<script>
// Aquí se escriben códigos de JavaScript
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Comentarios
Publicar un comentario