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
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
5
Abreviando Código ............................................................................................................... 39
Eventos fundamentales en JavaScript ................................................................................. 40
Trabajo para la primera semana ............................................................................................ 51
documento para los estudiantes Java Script
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.
documento para los estudiantes Java Script
7
Sintaxis correcta para incluir código JavaScript
<html>
<head>
<title>
Página con JavaScript.
</title>
<script language=”javascript”>
<! - -
//-->
</script>
</head>
<body>
</body>
</html>
documento para los estudiantes Java Script
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>
Página con JavaScript.
</title>
<script language=”javascript”>
<! - -
//-->
</script>
<noscript>
Por favor actualice su navegador, no soporta java
script
</noscript>
documento para los estudiantes Java Script
9
</head>
<body>
</body>
</html>
Nuestro Primer Script
<html>
<head>
<title>
Página con JavaScript.
</title>
<script languaje = javascript">
<!--
alert ("Hola desde java script");
alert (1234); // da lo mismo si el número se representa entre
comillas o número
//-->
</script>
</head>
<body>
documento para los estudiantes Java Script
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.
documento para los estudiantes Java Script
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>
Página con JavaScript.
</title>
<script src="saludo.js"
languaje = "javascript" type="text/javascript">
</script>
</head>
documento para los estudiantes Java Script
12
<body>
esto es el cuerpo de la página.
</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
documento para los estudiantes Java Script
13
alert("Declaradas implícitamente\nv1="+v1+"\n
V2="+v2+"\nDeclaradas implícitamente\nv3="+v3);
</script>
</head>
<body>
esto es el cuerpo de la página.
</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.
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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:
++ - -
documento para los estudiantes Java Script
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;
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
19
<title>
Página para probar otras definiciones de números
</title>
<script languaje="javascript">
<!--
var datoexponencial= 12E2, datohexadecimal= 0xFF,
datooctal=023;
alert("Dato exponencial="+ datoexponencial+"\n dato
hexadecimal="+datohexadecimal+"\ndato Octal="+datooctal);
//-->
</script>
</head
<body>
probando desde el body del html
</body>
</html>
documento para los estudiantes Java Script
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);
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
22
Página para probar typeof,cambios implícitos y explícitos
de tipos.
</title>
<script languaje="javascript">
<!--
// 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;
documento para los estudiantes Java Script
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";
alert ("El contenido de 'dato2' es: "+ dato2+ " y su tipo es "+
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;
alert ("El contenido de 'dato3' es: "+ dato3+ " y su tipo es "+
typeof(dato3));
dato3=dato3.toString();
alert ("El contenido de 'dato3', después de aplicar dato3.toString()
es: "+ dato3+ " y su tipo es "+ typeof(dato3));
documento para los estudiantes Java Script
24
//cambio de bases
var dato4=1839;
alert ("El contenido de 'dato4' es: "+ dato4+ " y su tipo es "+
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>
probando desde el body del html
</body>
</html>
documento para los estudiantes Java Script
25
documento para los estudiantes Java Script
26
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 Java Script
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>
<script languaje="javascript">
<!--
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:"," "));
documento para los estudiantes Java Script
28
alert(nombre + " usted vive en "+ ciudad+" y su sueldo es: "+sueldo);
//-->
</script>
</head
<body>
probando desde el body del html
</body>
</html>
documento para los estudiantes Java Script
29
Funciones de ingreso y despliegue aprendidas hasta aquí
Alert(texto); prompt("mensaje","respuesta por defecto")
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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)
{
documento para los estudiantes Java Script
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.
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
35
<title>
Página que demuestra la primera aplicacion de POO
</title>
<script languaje="javascript">
<!--
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++)
{
documento para los estudiantes Java Script
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>");
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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>");
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
41
Página que demuestra la primera aplicacion de Eventos
</title>
<script languaje="javascript">
<!--
//-->
</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>
documento para los estudiantes Java Script
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.
documento para los estudiantes Java Script
43
Programa2EventosJS
<html>
<head>
<title>
Página que demuestra la primera aplicación de Eventos
</title>
<script languaje="javascript">
<!--
//-->
</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>
documento para los estudiantes Java Script
44
</body>
</html>
El evento onMouseOut
Detecta a que momento el puntero más se separa del objeto.
Programa3EventosJS
<html>
<head>
<title>
documento para los estudiantes Java Script
45
Página que demuestra la primera aplicacion de Eventos
</title>
<script languaje="javascript">
<!--
//-->
</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>
documento para los estudiantes Java Script
46
El evento onUnload
Se ejecuta cuando el usuario abandona la página que está cargando
en ese momento.
Programa4EventosJS
<html>
<head>
<title>
Página que demuestra la primera aplicacion de Eventos
</title>
documento para los estudiantes Java Script
47
<script languaje="javascript">
<!--
//-->
</script>
</head>
<body onUnload="alert('Vuelva a visitarnos pronto');">
<br><br><br><br>
<h1>
cierre ahora el navegador.
</h1>
</body>
</html>
documento para los estudiantes Java Script
48
Probando los dos eventos onLoad y unOnload
Cambios sobre programa4EventosJS
<html>
<head>
<title>
Página que demuestra la primera aplicacion de Eventos
</title>
<script languaje="javascript">
<!--
documento para los estudiantes Java Script
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>
documento para los estudiantes Java Script
50
documento para los estudiantes Java Script
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
documento para los estudiantes Java Script
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!!
documento para los estudiantes Java Script
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>
<script languaje="javascript">
<!--
var numero=0, residuo=0, suma=0, aux=0, opcion;
do
{
suma=0;
numero=parseInt(prompt("Ingrese un número entero","0"));
aux=numero;
documento para los estudiantes Java Script
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');">
documento para los estudiantes Java Script
55
<br><br><br><br>
<h1>
Probando las estructuras de programación
</h1>
</body>
</html>
Top Related