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>


v = prompt("Ingrese su nombre", "")

alert(v)

</script>

</body></html>

Ver ejemplo

Uso de document

<html><body>


document.write("Bienvenido a Laboratorio 1 - Carrera de Programador!")

</script>

</body></html>

Ver ejemplo

Ver fecha actual

<html><body>


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>


</head>

<body>


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>


</head>

<body>


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.

laboratorio 1 javascript. introducción al javascript el navegador del cliente interpreta las...

Documents