Notas del curso: Técnicas para la enseñanza de D esarrollo W eb Liliana G utiérrez Flores Enero de 2016 JavaScript D H TM L se refiere a Dynamic HTML, no es un lenguaje o estándar de la Web. De acuerdo con la W3C, es el término utilizado por algunos vendedores para describir el uso de HTML, hojas de estilo y scripts (procesados en el cliente) para la creación de documentos animados. JavaScript es el lenguaje de scripts más popular en Internet soportado por la mayoría de los navegadores. Un navegador con soporte para sitios con contenido dinámico con JavaScript incluye soporte para el Document Object Model (DOM) y el manejo de eventos. D OM es un estándar de la W3C que describe el modelo de objetos del documento. El código JavaScript se puede insertar en el propio elementos HTML, en el body o en el head entre las etiquetas <script> ... </script>, o bien en un archivo externo que ya no incluya ninguna etiqueta <script>. El objeto document representa la página cargada por el navegador. Podemos acceder a sus propiedades o cambiarlas así como a sus métodos. Ejercicio 1. Vamos a utilizar el método write() del objeto document. En un documento nuevo llamado ejemplosjs.html, agregue el siguiente código y pruebe. <!DOCTYPE html> <html> <body> <script> document.write('<h1>Hola JavaScript.</h1>’); </script> </body> </html> La salida de JavaScrit puede ser en ventanas utilizando window.alert(), en el propio documento con document.write(), en los elementos HTML con el atributo innerHTML o en la consola con console.log(). Ejercicio 2. Vamos a utilizar window.alert() para enviar un mensaje al usuario antes de que se termine de cargar el documento. Agregue la línea resaltada a su documento. <!DOCTYPE html> <html> <body> <script> document.write('<h1>Hola JavaScript.</h1>’); window.alert("Me encanta que estes en el curso."); </script> </body> </html> El método getElementById() del objeto document, me permite acceder a los elementos HTML mediante su atributo id. Por ejemplo document.getElementById('p1') accede al objeto que representa al elemento p identificado con p1. Ejercicio 3. Vamos a utilizar innerHTML para desplegar un texto en el elemento p identificado con p1. Agregue el código resaltado a su documento. <!DOCTYPE html> <html> <body> <script> document.write("<h1>Hola JavaScript.</h1>"); window.alert("Me encanta que estes en el curso."); </script> <p id="p1">.</p> <script> document.getElementById('p1').innerHTML = Date(); document.getElementById('p1').innerHTML = 'Me gusto CSS'; </script </body> </html> Los eventos HTML se asocian a sucesos que les ocurren a los elementos HTML. JavaScript puede responder a esos eventos. Por ejemplo se le puede dar click a un botón, ocurre el evento onclick. Ejercicio 4. Agregue un botón que cambié el contenido del elemento p identificado con p1 como respuesta al evento onclick. Utilice el siguiente código. <button type="button" Onclick = "document.getElementById('p1').innerHTML = 'JavaScript tambi&eacute;n.'">OK </button> Se pueden utilizar variables para almacenar valores. Por ejemplo en var x = 5; la variable x almacena el valor 5. Una función es un bloque de código que se ejecuta cuando ocurre un evento. Se define con function seguida del nombre de la función, los argumentos entre paréntesis y el bloque de código entre llaves. Ejercicio 5. Agregue una función para cambiar el estilo del estilo del texto. Coloque el siguiente código en el encabezado. <script> function alegrar() { var x = document.getElementById("p1"); x.style.fontSize = "25px"; x.style.color = "red"; } </script> Agregue un botón para alegrar su texto. <button type="button" onclick="alegrar()">Alegrar.</button> Ejercicio 6. Vamos a agregar una función para cambiar el src de una elemento im g. Agregue la siguiente imagen a su documento. <img id="escudo" width="100px" high="100px" src="escudito.jpg" Agregue el atributo onclick para que la función colorear() responda al evento. <img id="escudo" width="100px" high="100px" src="escudito.jpg" onclick="colorear()"> Agregue la función colorear() en el encabezado. <script> function colorear() { var imagen = document.getElementById('escudo'); if (imagen.src.match("escudi")) { imagen.src = "escudoUNAM.jpg"; } else { imagen.src = "escudito.jpg"; } }</script> Para agregar código JavaScript en un archive externo, hay que agregar la siguiente línea al documento. <script src="funciones.js"></script>, en este caso estamos indicando que el archivo funciones.js contiene código JavaScript. Ejercicio 7. Vamos a solicitar un número al usuario y vamos a validar si es pequeño. Mediante un cuadro de texto solicita un número al usuario. <p>Teclea un n&uacute;mero peque&ntilde;o:</p> <input type="text" id="numero"> Agrega un botón que cuando se oprima se invoque la función validar() <button type="button" onclick="validar()">validar</button> Agrega un párrafo sin contenido e identificado con “mensaje”. <p id="mensaje"></p> Inserte la siguiente línea al encabezado de su documento. <script src="funciones.js"></script> Cree el archivo funciones.js con un el siguiente código: function validar() { var valor, text; valor = document.getElementById("numero").value; if (isNaN(valor) || valor < 1 || valor > 10) { text = "No es peque&ntilde;o!"; } else { text = "Muy bien!"; } document.getElementById("mensaje").innerHTML = text; } Prueba tu trabajo. http://www.w3schools.com/js/js_htmldom.asp http://w w w .w 3schools.com /js/js_ htm ldom _ docum ent.asp Ejercicio 8. Agregue elemento de entrada para preguntar por el color favorito. Ejercicio 9. Cambie el color del fondo del documento al color favorito del usuario. Ejercicio 10. Si el color es rojo, envía un mensaje de alerta ¡Lo sabía! R eferencias: http://www.w3.org/DOM/ http://www.w3schools.com/js/ Tutorial de JavaScript. http://www.w3schools.com/jsref Referencia JavaScript.