DOCUMENTO PARA LOS ESTUDIANTES

Java Script Primera clase - 1 Maritzol Tenemaza

2009

PERSONAL

documento para los estudiantes 2 Java Script

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

documento para los estudiantes 3 Java Script

• 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

documento para los estudiantes 4 Java Script

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

documento para los estudiantes 5 Java Script Abreviando Código ............................................................................................................... 39 Eventos fundamentales en JavaScript ................................................................................. 40 Trabajo para la primera semana ............................................................................................ 51

documento para los estudiantes 6 Java Script

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



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 configurado.

de

tener

el

navegador

correctamente

documento para los estudiantes 7 Java Script

Sintaxis correcta para incluir código JavaScript <script language=”javascript”>
//-->

documento para los estudiantes 8 Java Script

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>



Se usa para especificar al usuario que su navegador no soporta javascript, y que por tanto su página no funcionará correctamente. <script language=”javascript”> <noscript> Por favor actualice su navegador, no soporta java script

documento para los estudiantes 9 Java Script

Nuestro Primer Script <script languaje = javascript">



documento para los estudiantes 10 Java Script

esto es el cuerpo de la página.



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

documento para los estudiantes 11 Java Script

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) <script src="saludo.js" languaje = "javascript" type="text/javascript">

documento para los estudiantes 12 Java Script

esto es el cuerpo de la página. 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) <script languaje = "javascript" > var v1=20,v2=40; //declaración explicita v3=50; //declaración implícita

documento para los estudiantes 13 Java Script

alert("Declaradas

implícitamente\nv1="+v1+"\n

V2="+v2+"\nDeclaradas implícitamente\nv3="+v3); esto es el cuerpo de la página.

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.

documento para los estudiantes 14 Java Script

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

\” \’ \n \f \r \t \b

Inserta comillas Inserta una comilla simple Salto de línea Salto de página Retorno de carro Inserta una tabulación 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

documento para los estudiantes 15 Java Script

+ * / %

suma resta multiplicación división Módulo (división devuelve l residuo incremento decremento

++ --

entera)

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: ++ - -

documento para los estudiantes 16 Java Script

* / % + 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. <script languaje="javascript">
documento para los estudiantes 17 Java Script

alert("Probando

divisiones

sucesivas:\n"+"\nv1="+v1+"\nv2="+v2+"\nv3="+v3+"\nResultados: "+v4); v1=10; v2=0; alert("Probando

incrementos

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

y

documento para los estudiantes 18 Java Script

Otras formas de expresar datos numéricos Datos numéricos

Ejemplo

Exponenciales Hexadecimal Octal

var datoExponencial=23E2; var datoHexadecimal=0xFF; Var datooctal 023;

Ejercicio: (quinto programa) Probando otras formas de representación de números.

documento para los estudiantes 19 Java Script

<script languaje="javascript">
datoexponencial=

12E2,

datohexadecimal=

0xFF,

datoexponencial+"\n

dato

datooctal=023; alert("Dato

exponencial="+

hexadecimal="+datohexadecimal+"\ndato Octal="+datooctal); //--> probando desde el body del html

documento para los estudiantes 20 Java Script

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

documento para los estudiantes 21 Java Script

// 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 <script languaje="javascript"> probando desde el body del html

documento para los estudiantes 25 Java Script

documento para los estudiantes 26 Java Script

Datos booleanos y lógicos var booleana1=true, booleana2=false; Variables indefinidas y nullas. Una variable es indefinida, cuando no se inicializa;

documento para los estudiantes 27 Java Script

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) <script languaje="javascript">
el

nombre

de

la

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

ciudad

donde

documento para los estudiantes 28 Java Script

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

//-->

probando desde el body del html

documento para los estudiantes 29 Java Script

Funciones de ingreso y despliegue aprendidas hasta aquí Alert(texto); prompt("mensaje","respuesta por defecto")

documento para los estudiantes 30 Java Script

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

documento para los estudiantes 31 Java Script

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

documento para los estudiantes 32 Java Script

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

documento para los estudiantes 33 Java Script

} 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.

documento para los estudiantes 34 Java Script

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.

documento para los estudiantes 35 Java Script

<script languaje="javascript">
Esto también "); //los caracteres\n no son

tomados en cuenta for(i=1;i<10;i++) {

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

document.write("

Uso de salto con tag html
"); for( i=0; i<10;i++) {

documento para los estudiantes 36 Java Script

document.write(i+"
");

//

el

tag




es

de

html

el

javascript lo reconoce y lo interpreta }

document.write("

Esto

es

negrita.


");

//uso de tags de html embebido en javascript document.write("Esto es cursiva.
"); document.write("Esto es subrayado.
"); document.write("

Esto es grande.

");

document.write("ALFA");

//bloque

para

observar

diferencia entre doccument.write y document.writeln

document.write("BETA
");

document.writeln("
ALFA"); document.write("BETA
");

la

documento para los estudiantes 37 Java Script

//-->

// vamos a probar un evento sobre un objeto HTML

(button) probando el evento onClicK pulse para cambiar los colores.

onClick=

documento para los estudiantes 38 Java Script

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

frames

history

forms

fields

location

documento para los estudiantes 39 Java Script

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("

Esto

es

negrita.

document.write("Esto es cursiva.
"); document.write("Esto es subrayado.
"); document.write("

Esto es grande.

"); Puede escribirse: with(document) { write("

Esto es negrita.
");


");

documento para los estudiantes 40 Java Script

write("Esto es cursiva.
"); write("Esto es subrayado.
"); write("

Esto es grande.

");

}

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 asociado a una página. El tag asociado a una imagen. El Evento onLoad Se dispara cuando la página se ha cargado Programa1 EventosJS <script languaje="javascript">

Esta página es muy pequeña
y no necesita este evento

documento para los estudiantes 42 Java Script

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 ,

,

usados como delimitadores de fragmentos de una página.

documento para los estudiantes 43 Java Script

Programa2EventosJS <script languaje="javascript">

Este texto detecta cuando se apoya el puntero

En cambio, este texto no detecta nada.

documento para los estudiantes 44 Java Script



El evento onMouseOut Detecta a que momento el puntero más se separa del objeto. Programa3EventosJS <script languaje="javascript">

Este texto detecta cuando se apoya el puntero

En cambio, este texto no detecta nada.

documento para los estudiantes 46 Java Script

El evento onUnload Se ejecuta cuando el usuario abandona la página que está cargando en ese momento. Programa4EventosJS

documento para los estudiantes 47 Java Script

<script languaje="javascript">

cierre ahora el navegador.

documento para los estudiantes 48 Java Script

Probando los dos eventos onLoad y unOnload Cambios sobre programa4EventosJS <script languaje="javascript">

cierre ahora el navegador.

documento para los estudiantes 50 Java Script

documento para los estudiantes 51 Java Script

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

documento para los estudiantes 52 Java Script

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

documento para los estudiantes 53 Java Script

Bibliografía: Domine Java Script, José lopez Quijado, AlfaOmega 2007 Apoyo de libros gratuitos bajados de Internet.