Laboratorio 1 Java Script Introduccin al Java Script

  • Slides: 37
Download presentation
Laboratorio 1 Java. Script

Laboratorio 1 Java. Script

Introducción al Java. Script l l El navegador del cliente interpreta las instrucciones Los

Introducción al Java. Script l l 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 l l Java necesita un kit de desarrollo y un compilador

Diferencias con Java l l 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 l l l 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 Java. Script l Crear efectos especiales Validar datos de un formulario Crear

Usos de Java. Script l Crear efectos especiales Validar datos de un formulario Crear rollovers (cambia la imagen cuando se pasa el mouse). Crear navegadores desplegables. l Apertura de ventanas secundarias. l l l ¿Sabias que? � Los autores inicialmente tuvieron en mente el nombre (un tanto ridículo) de Mocha y más tarde Live. Script para ser posteriormente rebautizado como Java. Script, en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.

Qué necesitamos l l l Editor de textos - bloc de notas o notepad++

Qué necesitamos l l l Editor de textos - bloc de notas o notepad++ Navegador compatible con javascript. Tags de Javascript: <script>. . . </script> <script language=“Java. Script”>. . </script> <script type="text/javascript">. . . </script>

Nuestro primer Java. Script <html><body> <script type="text/javascript"> Document. write(“Bienvenido a Laboratorio 1 – Aplicaciones

Nuestro primer Java. Script <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 l l La programación de javascript se realiza en un documento HTML

Lenguaje javascript l l 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 l l Directa: se incorpora el script de modo

Maneras de ejecutar un javascript l l 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

Ocultar scripts en navegadores antiguos El cliente interpreta las instrucciones <script> <!— Código javascript // </script> l Se puede indicar un texto alternativo si el navegador no permite código javascript: <NOSCRIPT>El navegador no comprende los scripts </NOSCRIPT> l

Archivos externos Cuando existen varias funciones probadas y que pueden servir a mas de

Archivos externos Cuando existen varias funciones probadas y que pueden servir a mas de un programa se puede realizar un archivo externo. l El archivo externo normalmente tiene la extensión. js y se lo incluye de la siguiente manera: <script src=“externo. js”> </script> l

Elementos básicos l l Se respetan las mayúsculas y las minúsculas Separación de instrucciones

Elementos básicos l l 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

Sintaxis Javascript Comentarios: <script> //comentario de una línea /*Comentario que puede abarcar Más de una línea*/ </script> l

Textos Los textos deben estar entre comillas dobles o simples <HTML><BODY> <SCRIPT> document. write(‘texto’)

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> l

Efectos rápidos

Efectos rápidos

Alert Muestra una ventana de alerta <HTML><BODY> <SCRIPT> alert(‘Bienvenido a Laboratorio 1. . .

Alert Muestra una ventana de alerta <HTML><BODY> <SCRIPT> alert(‘Bienvenido a Laboratorio 1. . . ’) </SCRIPT> </BODY></HTML> l

Confirm <html><body> <script type="text/javascript"> v = confirm("Carrera de Programador? "); alert(v) </script> </body></html> Ver

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

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

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

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)>

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> l Ver ejemplo

Otros Ejemplos l Impresión de una pagina

Otros Ejemplos l Impresión de una pagina

Abrir una ventana pop-up cada cierto tiempo

Abrir una ventana pop-up cada cierto tiempo

Crear un correo electrónico Ejemplo que construye un correo electrónico para ser mandado

Crear un correo electrónico Ejemplo que construye un correo electrónico para ser mandado

Crear una galería de imágenes

Crear una galería de imágenes

Variables l l Es un espacio en memoria en donde se almacena un dato

Variables l l Es un espacio en memoria en donde se almacena un dato Ejemplo: – – – l A=14 B=13 Suma = A + B En este ejemplo tenemos tres variables: A, B y suma.

Características de las variables l Se forman con caracteres alfanuméricos o guión bajo. –

Características de las variables l Se forman con caracteres alfanuméricos o guión bajo. – l l ejemplos: sumando_1, A, B, sumando 2, _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 l l No es obligatorio, pero es conveniente. Se usa la

Declaración de variables l l No es obligatorio, pero es conveniente. Se usa la palabra reservada var – – l Var suma 1 Var suma 2, suma 3 varias variables separadas por coma. Se le puede asignar un valor – Var suma 1 = 14

Tipos l l l Números Cadenas de caracteres: texto que puede estar compuesto de

Tipos l l l 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 l l l Suma: + Resta: Multiplicación: * División: / Resto de

Operadores Aritméticos l l l 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 l += Asignación con suma l -= Asignación con

Operadores de Asignación = Asignación l += Asignación con suma l -= Asignación con resta l *= Asignación con multiplicación l /= Asignación con división l %= Obtiene el resto y asigna Ver ejemplo l

Operadores lógicos l l l ! : operador de negación && : operador AND

Operadores lógicos l l l ! : 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 Java. Script de Fher Jim --> <html> <head> <title>Ejemplo de Java.

<!– Practica de Java. Script de Fher Jim --> <html> <head> <title>Ejemplo de Java. Script</title> </head> <body> <script language="Java. Script"> Nombre = "Gabriela" document. write("Hola " + Nombre +". " ); </script> </body> </html>

<html> <head> <title>Ejemplo de Java. Script</title> </head> <body> <script language="Java. Script"> a = 8;

<html> <head> <title>Ejemplo de Java. Script</title> </head> <body> <script language="Java. Script"> a = 8; b = 3; c = 3; document. write( (a == b) && (c > b) ); document. write(" "); document. write( (a == b) || (b == c) ); document. write(" "); document. write( !(b <= c) ); document. write(" "); </script> </body> </html>

<html> <head> <title>Ejemplo de Java. Script</title> </head> <body> <script language="Java. Script"> a = 8;

<html> <head> <title>Ejemplo de Java. Script</title> </head> <body> <script language="Java. Script"> a = 8; b = 3; a += 3; document. write(a); document. write(" "); a -= 2; document. write(a); document. write(" "); b *= 2; document. write(b); </script> </body> </html>

ACTIVIDADES practica 2 : l l l Realiza los ejercicios de Aplicación (12 scripts

ACTIVIDADES practica 2 : l l l 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.