Laboratorio 1 JavaScript
Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente para añadir contenido dinámico a las páginas Web. El contenido dinámico es, básicamente, aquel contenido de una página Web (gráficos, textos y demás) que puede cambiar en el tiempo, según las interacciones que realiza el usuario a lo largo de su ejecución
Diferencias con Java Java necesita un kit de desarrollo y un compilador Se pueden hacer sistemas independientes Java es mucho más potente que JS Fuerte, robusto y seguro Javascript es interpretado por el navegador cuando lee la página Solo se pueden hacer programas que se ejecuten en web No necesitamos declarar el tipo
Usos de JavaScript Crear efectos especiales Validar datos de un formulario Crear rollovers (cambia la imagen cuando se pasa el mouse). Crear navegadores desplegables. Apertura de ventanas secundarias. ¿Sabias que ? Los autores inicialmente tuvieron en mente el nombre (un tanto ridículo) de Mocha y más tarde LiveScript para ser posteriormente rebautizado como JavaScript, en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.
Qué necesitamos Editor de textos - bloc de notas o notepad++ Navegador compatible con javascript. Tags de Javascript: <script>.....</script> <script language=“JavaScript”>....</script> <script type="text/javascript">.....</script>
Nuestro primer JavaScript <html><body> <script type="text/javascript"> Document.write(“Bienvenido a Laboratorio 1 – Aplicaciones para Internet!") </script> </body></html> Nota: usamos alert o window.alert Ver Ejemplo
Lenguaje javascript La programación de javascript se realiza en un documento HTML Se pueden introducir varios script en una misma página con etiquetas script diferentes
Maneras de ejecutar un javascript Directa: se incorpora el script de modo que el navegador interprete cada linea, se puede incorporar en el body o en el head. Respuesta a un evento: Evento: acción que realiza el usuario, como movimiento del mouse o pulsar un botón o la selección de un texto.
Ocultar scripts en navegadores antiguos El cliente interpreta las instrucciones <script> <!— Código javascript // </script> Se puede indicar un texto alternativo si el navegador no permite código javascript: <NOSCRIPT>El navegador no comprende los scripts </NOSCRIPT>
Archivos externos Cuando existen varias funciones probadas y que pueden servir a mas de un programa se puede realizar un archivo externo. El archivo externo normalmente tiene la extensión .js y se lo incluye de la siguiente manera: <script src=“externo.js”> </script>
Elementos básicos Se respetan las mayúsculas y las minúsculas Separación de instrucciones Las instrucciones se separan con punto y coma, si se escriben dos instrucciones en la misma línea. La otra forma de separarlas es mediante un salto de línea Se recomienda usar siempre el punto y coma después de cada instrucción.
Sintaxis Javascript Comentarios: <script> //comentario de una línea /*Comentario que puede abarcar Más de una línea*/ </script>
Textos Los textos deben estar entre comillas dobles o simples <HTML><BODY> <SCRIPT> document.write(‘texto’) document.write(“que se verá en el documento”) </SCRIPT></BODY></HTML>
Efectos rápidos
Alert Muestra una ventana de alerta <HTML><BODY> <SCRIPT> alert(‘Bienvenido a Laboratorio 1...’) </SCRIPT> </BODY></HTML>
Confirm <html><body> <script type="text/javascript"> v = confirm("Carrera de Programador?"); alert(v) </script> </body></html> Ver ejemplo
Prompt <html><body> <script type="text/javascript"> v = prompt("Ingrese su nombre", "") alert(v) </script> </body></html> Ver ejemplo
Uso de document <html><body> <script type="text/javascript"> document.write("Bienvenido a Laboratorio 1 - Carrera de Programador!") </script> </body></html> Ver ejemplo
Ver fecha actual <html><body> <script type="text/javascript"> document.write(new Date()) </script> </body></html> Ver ejemplo
Volver Se usa código javascript embebido en html: <input type= button value=Volver onclick=“history.go(-1)> <A HREF= "history.go(-1)"><b>Inicio de página</b></A> Ver ejemplo
Otros Ejemplos Impresión de una pagina
Abrir una ventana pop-up cada cierto tiempo
Crear un correo electrónico Ejemplo que construye un correo electrónico para ser mandado
Crear una galería de imágenes
Variables Es un espacio en memoria en donde se almacena un dato Ejemplo: A=14 B=13 Suma = A + B En este ejemplo tenemos tres variables: A, B y suma.
Características de las variables Se forman con caracteres alfanuméricos o guión bajo. ejemplos: sumando_1, A, B, sumando2, _A, etc. DEBEN comenzar con un carácter alfabético o guión bajo Prohibidos: +, $ o espacio palabras reservadas como for, return, while, if, etc.
Declaración de variables No es obligatorio, pero es conveniente. Se usa la palabra reservada var Var suma1 Var suma2, suma3 varias variables separadas por coma. Se le puede asignar un valor Var suma1 = 14
Tipos Números Cadenas de caracteres: texto que puede estar compuesto de letras y números, encerrado en comillas dobles o simples. Valores booleanos: true o false
Operadores Aritméticos Suma: + Resta: - Multiplicación: * División: / Resto de la división: % Unarios: Incremento en una unidad: ++, (A++) Decremento en una unidad: -- (A--)
Operadores de Asignación += Asignación con suma -= Asignación con resta *= Asignación con multiplicación /= Asignación con división %= Obtiene el resto y asigna Ver ejemplo
Operadores lógicos ! : operador de negación && : operador AND (si los dos valores son verdaderos, el resultado es verdadero) || : Operador OR ( si uno de los valores es verdadero, devuelve un valor verdadero. Ver ejemplo función AND
<!– Practica de JavaScript de Fher Jim --> <html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> Nombre = "Gabriela" document.write("Hola " + Nombre +"." ); </script> </body> </html>
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; c = 3; document.write( (a == b) && (c > b) );document.write("<br>"); document.write( (a == b) || (b == c) );document.write("<br>"); document.write( !(b <= c) );document.write("<br>"); </script> </body> </html>
<title>Ejemplo de JavaScript</title> </head> <html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; a += 3; document.write(a);document.write("<br>"); a -= 2; b *= 2; document.write(b); </script> </body> </html>
ACTIVIDADES practica 2 : Realiza los ejercicios de Aplicación (12 scripts de ejm ) que se adjuntan en la presentación para mirar el resultado de los mismos. Cambiar datos como siempre en <head> …colocar su nombre completo. Y donde vayan nombres u otros datos. . Guardarlos en un solo ARCHIVO y presentar en la próxima clase OCT 20.