Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las...
37
Laboratorio 1 JavaScript
-
Upload
eberardo-villarrubia -
Category
Documents
-
view
222 -
download
0
Transcript of Laboratorio 1 JavaScript. Introducción al JavaScript El navegador del cliente interpreta las...
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.alertVer 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ónicoEjemplo 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 += 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>
<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>
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.
