JavaScript: Introducción Francisco J. Martı́n Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Metodologı́a de la Programación JavaScript: Introducción ¿Qué es JavaScript? JavaScript es un lenguaje de programación interpretado utilizado en páginas Web Fué desarrollado para el navegador Netscape Navigator 2.0 Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas Web Metodologı́a de la Programación JavaScript: Introducción ¿Para qué sirve JavaScript? El código JavaScript se ejecuta en el navegador al tiempo que las sentencias van descargándose junto con el código HTML Aplicaciones: Generar partes de un documento de forma dinámica Insertar aplicaciones en documentos HTML que no necesitan de comunicación con el servidor Modificar un documento HTML en función de la interacción del usuario Metodologı́a de la Programación JavaScript: Introducción ¿Qué se puede hacer con JavaScript? Calculadora simple Calculadora compleja: http://www.motionnet.com/calculator/ Texto que se desliza Reloj digital Degradado de color Mini juegos Se pueden encontrar múltiples aplicaciones en Internet Metodologı́a de la Programación JavaScript: Introducción ¿Dónde y cómo incluir JavaScript en un documento? JavaScript se puede incluir en cualquier punto de un documento HTML, o todo aquel que termine traduciéndose en HTML en el navegador del cliente (PHP, ASP) El código JavaScript se puede incluir tanto en la cabecera como en el cuerpo del documento Formas de incluir código JavaScript: JavaScript en lı́nea en el documento HTML JavaScript en lı́nea desde un fichero externo JavaScript en respuesta a un evento El resultado de la evaluación de código JavaScript no aparece nunca en el documento HTML, salvo que se incluya de forma explı́cita Metodologı́a de la Programación JavaScript: Introducción JavaScript en lı́nea en el documento HTML El código JavaScript en lı́nea va inscrito entre las etiquetas HTML <SCRIPT> y </SCRIPT> Este código se ejecuta en el momento en que el navegador procesa la parte del documento HTML donde se encuentra el código No conviene utilizar JavaScript en lı́nea con referencias a elementos del documento posteriores al propio código JavaScript, ya que cuando éste se procesa dichos elementos no existen JavaScript en lı́nea <SCRIPT> document.write("Hola a todos") </SCRIPT> Inclusión explı́cita de texto en un documento HTML: document.write Metodologı́a de la Programación JavaScript: Introducción JavaScript en lı́nea desde un fichero externo Se comporta como el JavaScript en lı́nea en el documento HTML salvo que el código se encuentra en un fichero externo El URI del fichero que contiene el código se indica como valor del atributo src de la etiqueta <SCRIPT> A pesar de no contener código, es necesario incluir la etiqueta final </SCRIPT> El fichero referenciado no debe contener las etiquetas <SCRIPT> ni </SCRIPT> JavaScript desde un fichero <SCRIPT src="saludo.js"></SCRIPT> Metodologı́a de la Programación JavaScript: Introducción JavaScript en respuesta a un evento Ciertos elementos HTML son sensibles a eventos: movimientos del ratón, pulsaciones sobre botones, ... Se puede incluir código JavaScript que actúe en respuesta a dichos eventos Este código se ejecuta cuando se genera el evento y no en el momento de cargar la página HTML Esta forma de incluir código JavaScript permite modificar un documento HTML en función de la interacción del usuario JavaScript en respuesta a un evento <BODY onLoad="window.alert(’Hola una vez más’)"> Ventana de avisos: window.alert Metodologı́a de la Programación JavaScript: Introducción