laboratorio 1 javascript. introducción al javascript el navegador del cliente interpreta las...
TRANSCRIPT
![Page 1: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/1.jpg)
Laboratorio 1
JavaScript
![Page 2: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/2.jpg)
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
![Page 3: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/3.jpg)
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
![Page 4: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/4.jpg)
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.
![Page 5: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/5.jpg)
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>
![Page 6: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/6.jpg)
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.alertVer Ejemplo
![Page 7: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/7.jpg)
![Page 8: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/8.jpg)
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
![Page 9: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/9.jpg)
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.
![Page 10: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/10.jpg)
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>
![Page 11: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/11.jpg)
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>
![Page 12: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/12.jpg)
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.
![Page 13: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/13.jpg)
Sintaxis Javascript
Comentarios:
<script>
//comentario de una línea
/*Comentario que puede abarcar
Más de una línea*/
</script>
![Page 14: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/14.jpg)
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>
![Page 15: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/15.jpg)
Efectos rápidos
![Page 16: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/16.jpg)
Alert
Muestra una ventana de alerta
<HTML><BODY>
<SCRIPT>
alert(‘Bienvenido a Laboratorio 1...’)
</SCRIPT>
</BODY></HTML>
![Page 17: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/17.jpg)
Confirm
<html><body>
<script type="text/javascript">
v = confirm("Carrera de Programador?");
alert(v)
</script>
</body></html>
Ver ejemplo
![Page 18: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/18.jpg)
![Page 19: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/19.jpg)
Prompt
<html><body>
<script type="text/javascript">
v = prompt("Ingrese su nombre", "")
alert(v)
</script>
</body></html>
Ver ejemplo
![Page 20: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/20.jpg)
Uso de document
<html><body>
<script type="text/javascript">
document.write("Bienvenido a Laboratorio 1 - Carrera de Programador!")
</script>
</body></html>
Ver ejemplo
![Page 21: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/21.jpg)
Ver fecha actual
<html><body>
<script type="text/javascript">
document.write(new Date())
</script>
</body></html>
Ver ejemplo
![Page 22: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/22.jpg)
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
![Page 23: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/23.jpg)
Otros Ejemplos
Impresión de una pagina
![Page 24: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/24.jpg)
Abrir una ventana pop-up cada cierto tiempo
![Page 25: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/25.jpg)
Crear un correo electrónicoEjemplo que construye un correo electrónico para ser mandado
![Page 26: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/26.jpg)
Crear una galería de imágenes
![Page 27: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/27.jpg)
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.
![Page 28: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/28.jpg)
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.
![Page 29: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/29.jpg)
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
![Page 30: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/30.jpg)
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
![Page 31: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/31.jpg)
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--)
![Page 32: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/32.jpg)
Operadores de Asignación
= 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
![Page 33: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/33.jpg)
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
![Page 34: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/34.jpg)
<!– 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>
![Page 35: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/35.jpg)
<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>
![Page 36: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/36.jpg)
<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;
document.write(a);document.write("<br>");
b *= 2;
document.write(b);
</script>
</body>
</html>
![Page 37: Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las instrucciones Los lenguajes Script sirven principalmente](https://reader037.vdocuments.mx/reader037/viewer/2022110103/5665b4361a28abb57c90044b/html5/thumbnails/37.jpg)
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.