Java Script Primera Clase

DOCUMENTO PARA LOS ESTUDIANTES

2009

Java Script Primera clase - 1

Maritzol Tenemaza

P E R S O N A L

documento para los estudiantes Java Script

2

EVENTO EW-09: Programación en JavaScript (48h)

Objetivos:

Realizar aplicaciones cliente con JavaScript para la

interacción con el lado del servidor.

5 ESPECIALIZACIÓN EN DISEÑO Y ANIMACION WEB

Crear guiones o scripts que se incluyen en las páginas Web

y que sean ejecutados por el navegador que utiliza el

usuario.

Realizar tareas como la validación de los datos enviados por

el usuario en un formulario que deben ser llevadas a cabo

mediante la programación del lado cliente.

Contenidos:

• Introducción general a JavaScript.

• Estructuras de programación

• Funciones de control. Funciones y arrays

• Programación visual.

• Programación orientada a objetos.

• Asociación, agregación y composición

• Herencia frente a composición


3

• Sobre el uso de switch (frente al polimorfismo)

• Sobre el uso de instanteof

• Clases de utilidad

• Polimorfismo frente a genericidad

• Liberación de recursos

• Clonación de objetos

• Criterios de creación de clases

• JavaScript y Formularios

• JavaScript y la Web

• Proyecto de Aplicación del Evento


4

Tabla de contenido

Primera Clase .............................................................................................................................. 6

Introducción general de Java Script ..................................................................................... 6

Colocando código JavaScript ............................................................................................... 6

Sintaxis correcta para incluir código JavaScript ........................................................ 7

Otro tag : noscript ............................................................................................................ 8

Nuestro Primer Script .......................................................................................................... 9

Otra manera de Introducir JavaScript ........................................................................... 11

Variables y Tipos de Datos ................................................................................................. 12

Declaración explícita ....................................................................................................... 12

Declaración implícita ........................................................................................................ 12

Reglas para definir los nombres de las variables ........................................................ 13

Operaciones Numéricas................................................................................................... 14

Otras formas de expresar datos numéricos ................................................................ 18

Determinar el tipo de una variable ................................................................................ 20

Cambiar el tipo de una variable ...................................................................................... 20

Datos booleanos y lógicos ............................................................................................... 26

Variables indefinidas y nullas. ........................................................................................ 26

Reasignación dinámica de variables ............................................................................... 27

Funciones de ingreso y despliegue aprendidas hasta aquí ................................................ 29

Alert(texto); ............................................................................................................................. 29

Estructuras de Control ........................................................................................................... 30

Condicionales ......................................................................................................................... 30

Bucles ..................................................................................................................................... 32

La POO y el DOM ..................................................................................................................... 34

La POO ................................................................................................................................... 34

EL DOM DE JAVASCRIPT ..................................................................................................... 38

La Jerarquía de Objetos: ................................................................................................... 38


5

Abreviando Código ............................................................................................................... 39

Eventos fundamentales en JavaScript ................................................................................. 40

Trabajo para la primera semana ............................................................................................ 51


6

Primera Clase

Introducción general de Java Script

Browsers: Fox o Internet Explorer.

JavaScript al igual que HTML es un lenguaje interpretado;

una vez incluido en nuestra página un código en JavaScript, el

navegador se encarga de leer cada línea interpretarla sobre

la marcha y ejecutarla.

JavaScript define variables que pueden almacenar cualquier

tipo de datos. Es case sensitive, es decir debe escribirse

respetando mayúsculas y minúsculas.

A pesar de haber sido creado para el navegador de Nescape,

Hoy todos los navegadores lo soportan.

Colocando código JavaScript

Java Script se emplea en una página web para dotarla de

funcionalidades que el HTML no puede proporcionar por si

mismo.

JavaScript se lo integra en un documento HTML.

<script> código </script>

El tag <script> recibe, obligatoriamente el atributo language, para

especificarle al navegador el lenguaje Script a emplear, ya que además

de JavaScript hay VBscript, ActionScript etc.

Asegurarse de tener el navegador correctamente

configurado.


7

Sintaxis correcta para incluir código JavaScript

<html>

<head>

<title>

Página con JavaScript.

</title>

<script language=”javascript”>

<! - -

//-->

</script>

</head>

<body>

</body>

</html>


8

Los comentarios se definen <! - - //--> en el script se utiliza

para especificar al navegador que no soporta javaScript, se ignoren

las líneas de código de este lenguaje y no se produzca un error.

Otro tag : noscript

<noscript> </noscript>

Se usa para especificar al usuario que su navegador no soporta

javascript, y que por tanto su página no funcionará correctamente.

<html>

<head>

<title>


</title>

<script language=”javascript”>

<! - -

//-->

</script>

<noscript>

Por favor actualice su navegador, no soporta java

script

</noscript>

9

</head>

<body>

</body>

</html>

Nuestro Primer Script

<html>

<head>

<title>


</title>

<script languaje = javascript">



</script>

</head>

<body>


10

esto es el cuerpo de la página.

</body>

</html>

El aspecto del cuadro de aviso entre los do navegadores, varía un

poquito.


11

Los errores los puede ver por herramientas/consola de errores

Cada instrucción deberá ir en una línea física sin pulsar la tecla

enter. Caso contrario dará error.

Comentarios: // o /* */

Otra manera de Introducir JavaScript

Suponga que tiene un script muy grande (500 líneas), y el mismo

código lo tiene que incluir en 10 lugares, significarían 5000 líneas de

código JavaScript, con el fin de reducir el tamaño del código que

tiene que bajar del servidor al cliente, se debe hacer lo siguiente:

El código requerido ponerlo en un archivo con extensión .js

Para insertar el código añadir al tag <script> el atributo src=

“ ruta del script”, y el atributo type=”text/javascript”

Segundo script (segundo programa)

<html>

<head>

<title>


</title>

<script src="saludo.js"

languaje = "javascript" type="text/javascript">

</script>

</head>


12

<body>


</body>

</html>

Los resultados deben ser los mismos del ejercicio anterior.

Variables y Tipos de Datos

La declaración puede ser explícita e implícita

Declaración explícita

var nombrevariable;

Declaración implícita

Ejemplo: (tercer programa)

<html>

<head>

<title>

Página con JavaScript- definición de variables

</title>

<script languaje = "javascript" >

var v1=20,v2=40; //declaración explicita

v3=50; //declaración implícita


13

alert("Declaradas implícitamente\nv1="+v1+"\n

V2="+v2+"\nDeclaradas implícitamente\nv3="+v3);

</script>

</head>

<body>


</body>

</html>Los resultados serán:

Reglas para definir los nombres de las variables

No comenzar por número, solo por letra.

Podrán contener números, letras y guión bajo, pero ningún

otro signo.

No contendrán letras acentuadas ni ñ,

No contendrán espacios en blanco.

No usar palabras reservadas de javascript.

Sensibilidad entre mayúsculas y minúsculas.


14

Ejemplo usando tipos de variables:

var nombre=”Marisol Tenemaza”;

var numero=20;

Concatenar strings -> carácter +

Secuencias de escape: para definir strings y desplegarlos.

\\ Inserta un contraslash

\” Inserta comillas

\’ Inserta una comilla simple

\n Salto de línea

\f Salto de página

\r Retorno de carro

\t Inserta una tabulación

\b Retrocede un caracter

var saludo=”este aviso dice \”Hola\””;

var variable=”esto es el inicio del texto, \t y esto está tabulado”;

var variable2=’este es un texto delimitado por comillas simples.

Operaciones Numéricas

Operador acción


15

+ suma

- resta

* multiplicación

/ división

% Módulo (división entera)

devuelve l residuo

++ incremento

-- decremento

var numero1=10, numero2=20, suma;

suma=numero1+numero2;

suma+=numero2;

Los números fraccionarios se pueden usar con la misma

facilidad que los enteros.

Var numero3=2.5;

Los incrementos y decrementos, deben tenerse cuidado si son

pre decrementos o post incrementos.

var v1=10, v2;

v2=v1++; // post incremento v2=10, v1=11

v2=++v1; //pre increment v2= 11 y v1=11

Precedencia de operadores:

++ - -

16

* / %

+ -

La jerarquía se puede alterar con el uso de ( )

Si tienen igual jerarquía se ejecutan de izquierda a derecha

Ejercicio: (cuarto programa)

Calcular : b2-4ac, probas divisiones sucesivas, incrementos

y decrementos.

<html>

<head>

<title>

Programa para uso de operadores aritméticos

</title>

<script languaje="javascript">

<!--

var a=10, b=20, c=4, resultado;

resultado= b*b-(4*a*c);

alert("Datos\n

a="+a+"\nb="+b+"\nc="+c+"\nResultados:\n"+resultado);

var v1=1000, v2=20,v3=2;

v4=v1/v2/v3;


17

alert("Probando divisiones

sucesivas:\n"+"\nv1="+v1+"\nv2="+v2+"\nv3="+v3+"\nResultados:

"+v4);

v1=10;

v2=0;

alert("Probando incrementos y

decrementos\n"+"v1="+v1+"\nv2="+v2);

v2=v1++;

alert("Probando v2=v1++\n"+"v1="+v1+"\nv2="+v2);

v2=++v1;

alert("Probando v2=++v1\n"+"v1="+v1+"\nv2="+v2);

//-->

</script>

</head>

</html>


18

Otras formas de expresar datos numéricos

Datos numéricos Ejemplo

Exponenciales var datoExponencial=23E2;

Hexadecimal var datoHexadecimal=0xFF;

Octal Var datooctal 023;

Ejercicio: (quinto programa)

Probando otras formas de representación de números.

<html>

<head>

19

<title>

Página para probar otras definiciones de números

</title>




</script>

</head

<body>

probando desde el body del html

</body>

</html>


20

Determinar el tipo de una variable

Función typeof( )

Cambiar el tipo de una variable

El cambio de tipo de variable puede ser implícita o explícita.

Implícita:

Primera forma

var dato=” cadena”; el cambio será implícito, si se despliega el

dato=1234; tipo el primero será string y el segundo

será number

Segunda forma

var dato=”1234”; En este caso, también dato queda

automáticamente, cambiado a número.

dato*=1; En este caso hay que tener cuidado cuando el

texto tiene letras intermedias, convierte

pero el resultado es incorrecto

Por ejemplo si var dato=12a3; en este caso la conversión es

incorrecta.

Explícita:

var miVariable=”123.45”;

miVariable= parseFloat(miVariable);


21

// Tener cuidado si hay letras intermedias, en ese caso convierte

los primeros números y a partir de la letra

hacia delante es ignorado.

Ejemplo:

Var miVariable=”123ª345”;

miVariable=parseFloat(miVariable); //el resultado sería 123. Y el

tipo es number, a pesar de que fue definida

como string.

Funciones aquí aprendidas

typeof()

parseFloat(dato)

parseInt(string)

toString()

Para convertir de un numérico a un decimal usamos toString();

Ejercicio (sexto programa)

// aplicación de la función typeof(), cambio explícito de tipos

toString(), parsefloat(), cambio implícito de

tipos

<html>

<head>

<title>

22

Página para probar typeof,cambios implícitos y explícitos

de tipos.

</title>


<!--

// cambio implícito

var dato="cadena";

alert ("El contenido de 'dato' es: "+ dato+ " y su tipo es "+

typeof(dato));

dato=1234;

alert ("El contenido de 'dato' es: "+ dato+ " y su tipo es "+

typeof(dato));

//cambio implícito con cuidado

var dato1="12345";

alert ("El contenido de 'dato1' es: "+ dato1+ " y su tipo es "+

typeof(dato1));

dato1*=1;


23

alert ("El contenido de 'dato1'desplues de aplicar dato1*1 es: "+

dato1+ " y su tipo es "+ typeof(dato1));

// cambio explícito

var dato2="12.45";


typeof(dato2));

dato= parseFloat(dato2);

alert ("El contenido de 'dato2', despues de aplicar

parsefloat(dato2) es: "+ dato2+ " y su tipo es

"+ typeof(dato2));

//cambio explícito

var dato3=12.45;


typeof(dato3));

dato3=dato3.toString();

alert ("El contenido de 'dato3', después de aplicar dato3.toString()

es: "+ dato3+ " y su tipo es "+ typeof(dato3));


24

//cambio de bases

var dato4=1839;


typeof(dato4));

dato4=dato4.toString(16);

alert ("El contenido de 'dato4' luego de aplicar dato4.toString(16)

es: "+ dato4+ " y su tipo es "+ typeof(dato4));

//-->

</script>

</head

<body>


</body>

</html>


25


26

Datos booleanos y lógicos

var booleana1=true, booleana2=false;

Variables indefinidas y nullas.

Una variable es indefinida, cuando no se inicializa;

27

var dato;

alert(typeof(dato)); en este caso desplegará dato indefinido.

Reasignación dinámica de variables

Más adelante veremos como pasar variables desde el html hasta el

javascript y viceversa.

Ingreso de datos, mediante la función prompt.

prompt("mensaje","respuesta por defecto")

devuelve un string.

Ejercicio: (septimo ejercicio)

<html>

<head>

<title>

Página para probar entrada y salida.

</title>


<!--

var nombre,ciudad, sueldo;

nombre=prompt("Escriba su nombre", " ");

ciudad=prompt("Escriba el nombre de la ciudad donde

vive","Quito");

sueldo=parseFloat(prompt("Cuál es su sueldo:"," "));


28

alert(nombre + " usted vive en "+ ciudad+" y su sueldo es: "+sueldo);

//-->

</script>

</head

<body>


</body>

</html>


29

Funciones de ingreso y despliegue aprendidas hasta aquí

Alert(texto); prompt("mensaje","respuesta por defecto")


30

Estructuras de Control

Condicionales

Las condiciones pueden ser simples, o anidadas.

if(condición)

{

….

}

else

{

…

}

Operadores Condicionales

Operadores significado

> Mayor que

>= Mayor o igual que

< Menor que

<= Menor o igual que

== igual

!= Not igual

=== Exactamente igual

!== Not exactamente igual

&& And

|| OR


31

Aclaraciones a las condiciones:

El operador de igualdad estricta o exactamente igual, veamos

que significa “exactamente igual”, JavaScript no es un

absoluto, significa que ciertas comparaciones podrían dar

verdad aunque no lo sean, por tanto hay que convertir (usar

parseInt, parseFloat, ..) con igualdad estricta aseguro que

compare incluso los tipos.

En javaScript es posible comparar directamente cadenas, la

comparación es carácter a carácter y considerando la

representación ASCII. Por ejemplo: if(nombre==”Juanito”),

esto por ejemplo no puede hacerse en los lenguajes tipados,

que son los de alto nivel.

Si comparamos if(“abcd”>”ABCD”) la respuesta sería

verdadera puesto que el código ASCII de los caracteres

minúsculas es mayor, que el código ASCII de las mayúsculas.

Para comprobar valores, booleanos, no hace falta preguntar

por true o false, la siguiente pregunta es errónea

if (dato==true) esto en JavaScript es error, debe preguntar

if(dato) es lo mismo que preguntar si dato es igual a true, esta

es la forma correcta.

Operador ternario ?

(condición)? valor1:valor2;

Instrucción switch


32

switch(expresión)

{

case valor1:

break;

case valor2:

break;

.

case valor n:

break;

default:

}

Bucles

for

for(inicialización;condición;incremento/decremento)

{

}

while

while(condición)

{


33

}

do…while

do

{

.

}while(condición);

Explicación adicional:

Si se produce algún bucle infinito, y en el contexto del bucle no hay

interacción con el usuario el browser emite un mensaje. “Script sin

respuesta”, detener Script.

Instrucción adicional a usarse:

confirm(“mensaje);

Permite presentar un mensaje, con dos botones (aceptar y

cancelar), devuelve un true o false. Si devuelve true significa

que presionó aceptar, lo inverso para cancelar.

Ejercicio:

1. Escriba un script que le permita solicitar un número cada

vez y sumar los dígitos del número.


34

La POO y el DOM

La POO

En una página Web existen imágenes tablas, botones, formularios,

capas, cada uno de ellos lo veremos como un objeto.

Los objetos tienen identidad propia y se definen y se manejan

mediante tres aspectos:

Propiedades: características del objeto.

Métodos: funciones específicas que cada objeto puede llevar a

cabo.

Eventos: sucesos que pueden llegar a producirse o no. JavaScript

reconoce cuando tiene lugar un evento y se puede programar una

respuesta. Por ejemplo se puede detectar si el usuario apoya el

puntero sobre una imagen o si pulsa el botón derecho o si pulsa una

tecla.

Como usar:

Objeto.propiedad

Objeto.método( [argumentos]);

Ejercicio 1POO.

//Probando el uso de objetos, atributos y métodos, y un objeto

HTML, sobre un evento.

<html>

<head>

35

<title>

Página que demuestra la primera aplicacion de POO

</title>


<!--

alert("pulse aquí para ver su página en rojo");

//document.bgColor = "red";

//document.fgcolor="yellow";

document.write ("Esto está escrito en el documento");

document.write("\n Esto también "); //los caracteres\n no son

tomados en cuenta

for(i=1;i<10;i++)

{

document.write(i+"---");

}

document.write("<br><br>Uso de salto con tag html<br>");

for( i=0; i<10;i++)

{


36

document.write(i+"<br>"); // el tag <br> es de html el

javascript lo reconoce y lo interpreta

}

document.write("<br><br><b>Esto es negrita. </b><br>");

//uso de tags de html embebido en javascript

document.write("<i>Esto es cursiva. </i><br>");

document.write("<u>Esto es subrayado. </u><br>");

document.write("<h1>Esto es grande. </h1><br>");

document.write("<b>ALFA</b>"); //bloque para observar la

diferencia entre doccument.write y document.writeln

document.write("<b>BETA </b><br>");

document.writeln("<br><b>ALFA</b>");

document.write("<b>BETA</b><br>");


37

//-->

</script>

</head>

<body> // vamos a probar un evento sobre un objeto HTML

(button) probando el evento onClicK

<button onClick=

"document.bgColor='red';document.fgColor='skyblue';">

pulse para cambiar los colores.

</button>

</body>

</html>


38

EL DOM DE JAVASCRIPT

En el tema anterior revisamos que la POO es un concepto, una idea,

lo importante es como JavaScript hace uso de ella.Cada lenguaje

tiene su propio modelo de uso de los conceptos de la POO y a

nosotros lo que nos interesa realmente conocer es el DOM de

JavaScript.

DOM significa Document Object Model (Modelo de Objetos del

documento)

En este capítulo aprenderemos a conocer el DOM de la POO en

JavaScript.

La Jerarquía de Objetos:

En JavaScript, existe una organización jerárquica de objetos, por

lo que existen objetos con mayor nivel jerárquico que otros, así:

(este es un esquema básico, en realidad hay muchos objetos )

window

document

anchors layers images forms

fields

frames history location


39

Window es la ventana en la que está abierto el navegador y cargada

una página, este es el objeto más importante.

Document es el documento activo, la página que se está ejecutando

en ese momento.

javaScript permite omitir window, podría escribirse

window.document.bgColor=”red”;

document.bgColor=”red”;

Abreviando Código

Una de las metas de un buen webMaster es ecribir código eficiente

y compacto y por supuesto que funcione correctamente, y que sea

cómodo para el usuario.

Cuando se tiene varias líneas refiriendo al mismo objeto, se debe

usar la función with(), así:

document.write("<br><br><b>Esto es negrita. </b><br>");

document.write("<i>Esto es cursiva. </i><br>");

document.write("<u>Esto es subrayado. </u><br>");

document.write("<h1>Esto es grande. </h1><br>");

Puede escribirse:

with(document)

{

write("<br><br><b>Esto es negrita. </b><br>");


40

write("<i>Esto es cursiva. </i><br>");

write("<u>Esto es subrayado. </u><br>");

write("<h1>Esto es grande. </h1><br>");

}

Eventos fundamentales en JavaScript

En JavaScript la mayor parte de eventos que se manejan pueden ir

asociados a distintos tipos de objetos, por ejemplo el evento

onClick podría asociarse a una imagen, para detectar si el usuario

hace clic sobre la misma.

Así mismo hay eventos que solo pueden asociarse a ciertos objetos,

por ejemplo el evento onLoad, que detecta cuando ha terminado de

cargarse una imagen o una página, solo puede incluirse con:

El tag <body> asociado a una página.

El tag <img> asociado a una imagen.

El Evento onLoad

Se dispara cuando la página se ha cargado

Programa1 EventosJS

<html>

<head>

<title>

41

Página que demuestra la primera aplicacion de Eventos

</title>




</script>

</head>

<body onLoad="alert('La Página ya se ha cargado');">

<h1>

Esta página es muy pequeña

<br>

y no necesita este evento

</h1>

</body>

</html>


42

El evento onMouseover:

Permite detectar cuando se apoya el puntero del ratón sobre un

objeto determinado de la página (texto, imagen etc).

Para asociar el evento al texto, este debe estar delimitado por

tags de HTML </h1>, <p>, <Font> <div> </div> usados como

delimitadores de fragmentos de una página.

43

Programa2EventosJS

<html>

<head>

<title>

Página que demuestra la primera aplicación de Eventos

</title>




</script>

</head>

<body>

<h1 onMouseOver="alert ('El puntero se ha apoyado en el texto');">

Este texto detecta cuando se apoya el puntero

</h1>

<br><br><br><br>

<h1>

En cambio, este texto no detecta nada.

</h1>


44

</body>

</html>

El evento onMouseOut

Detecta a que momento el puntero más se separa del objeto.

Programa3EventosJS

<html>

<head>

<title>

45


</title>




</script>

</head>

<body>

<h1 onMouseOut="alert ('El puntero ha salido del texto');" >

Este texto detecta cuando se apoya el puntero

</h1>

<br><br><br><br>

<h1>

En cambio, este texto no detecta nada.

</h1>

</body>

</html>


46

El evento onUnload

Se ejecuta cuando el usuario abandona la página que está cargando

en ese momento.

Programa4EventosJS

<html>

<head>

<title>


</title>

47




</script>

</head>

<body onUnload="alert('Vuelva a visitarnos pronto');">

<br><br><br><br>

<h1>

cierre ahora el navegador.

</h1>

</body>

</html>

48

Probando los dos eventos onLoad y unOnload

Cambios sobre programa4EventosJS

<html>

<head>

<title>


</title>


<!--


49

//-->

</script>

</head>

<body onLoad="alert('bienvenidos a esta

página');",onUnload="alert('Vuelva a visitarnos pronto');">

<br><br><br><br>

<h1>

cierre ahora el navegador.

</h1>

</body>

</html>


50


51

Trabajo para la primera semana

Estimados estudiantes, el trabajo colaborativo es enriquecedor,

si ustedes pueden compartir conocimiento, lo deben hacer, los

procesos actuales de enseñanza aprendizaje requieren que el

estudiante aprenda a aprender, construya conocimiento e

interactué con sus compañeros de tal manera que se interiorice

el conocimiento.

La tarea debe hacerse en grupo de tres personas, consiste en

construir el siguiente java script:

1. Escriba una aplicación web, que solicite una cédula y la valide,

el proceso deberá desplegar los siguientes mensajes:

a. La cédula es correcta.

b. El dígito autoverificador de la cédula es incorrecto,

debe ser ……

El proyecto deberá ser presentado, en un archivo PDF, el archivo

contendrá el código del programa, una explicación de la lógica y los

resultados.

El grupo deberá crear un blog llamado Tareas JavaScript, esta

entrada se llamará Primera tarea, en ella deberá estar publicado


52

el trabajo, pueden publicarlo directamente o usar cualquier recurso

web 2.0.

El trabajo será brevemente expuesto en los primeros minutos de la

siguiente clase.

En la exposición los participantes deberán explicar que parte del

trabajo lo construyeron, es decir en que consistió el auto

aprendizaje y la construcción del conocimiento.

Buena suerte!!

53

Bibliografía:

Domine Java Script, José lopez Quijado, AlfaOmega 2007

Apoyo de libros gratuitos bajados de Internet.

Solución de ejercicio propuesto:

<html>

<head>

<title>

Página que demuestra la primera aplicacion de

estructuras de programación

</title>


<!--

var numero=0, residuo=0, suma=0, aux=0, opcion;

do

{

suma=0;

numero=parseInt(prompt("Ingrese un número entero","0"));

aux=numero;


54

while((aux/10)!=0)

{

residuo=(aux%10);

suma+=residuo;

aux/=10;

}

suma+=aux;

alert("La suma de los dígitos del número: " + numero +" es

"+suma);

opcion=confirm("Desea seguir probando con otros números?");

} while(opcion);

//-->

</script>

</head>

<body onLoad="alert('bienvenidos a esta

página');",onUnload="alert('Vuelva a visitarnos pronto');">


55

<br><br><br><br>

<h1>

Probando las estructuras de programación

</h1>

</body>

</html>

Java Script Primera Clase

Documents

Transcript of Java Script Primera Clase