Embed Size (px)
Citation preview
CONCEPTOS AVANZADOS
DE JAVASCRIPTPreparado por: Prof. Nelliud D. Torres
28/octubre/2004
AL FINAL DEL SEMINARIO EL ESTUDIANTE PODRÁ:
Entender brevemente como Javascript maneja los arreglos.
Conocer el concepto de eventos en Javascript.
Conocer algunos conceptos de programación orientada a objetos.
Integrar un formulario con código de JavaScript para ver un ejemplo de como se puede validar.
Ver ejemplos de códigos de Javascript. (Chulerías)
ARREGLOS
Javascript trabaja los arreglos base cero (0). Primero necesito declarar la variable que va
a tener el arreglo. Se hace con la intrucción var c; en donde la variable c es la que va a tener el arreglo.
Luego preparo el arreglo con la siguiente instrucción: c = new Array( 12 );
Crea el arreglo desde la posición: c[ 0 ] hasta c[ 11 ]
EJEMPLO DE CÓDIGO QUE MANEJA ARREGLOS
var n1 = new Array( 5 ); // Define arreglo de 5 elementos
:
:
for (i = 0; i < n1.length; ++i) // inicializando el arreglo
n1[ i ] = 0;
:
:
El operador new permite crear un objeto tipo arreglo de cinco elementos y llamarlo n1.
n1 pasa a ser un objeto.
length es una propiedad o atributo del objeto n1 cuyo valor es la cantidad de elementos que tiene el arreglo.
EVENTOS (“EVENTS”) Los eventos se utilizan para indicar a las funciones
cuando se van a ejecutar. El ejemplo más fácil es el botón que incluye las
palabras: onClick="run_my_function()". El evento “onClick” va a correr la función llamada:
run_my_function() cuando el usuario da un click en el botón.
Ejemplos de otros eventos son: “OnMouseOver”, “OnMouseOut”, “OnFocus”, “OnBlur”, “OnLoad”, y “OnUnload”.
A continuación se muestran los eventos del browser Netscape 3.0
The following table outlines all of the event handlers in NetScape version 3.0
(SOURCE: NETSCAPE'S JAVASCRIPT REFERENCE PAGE) Event Applies to Occurs when
Eventhandler
abort images User aborts the loading of an image (for example by clicking a link or clicking the Stop button)
onAbort
blur windows, frames,
and all form elements
User removes input focus from window, frame, or form element
onBlur
click
buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
User clicks form element or link onClick
change text fields, textareas,
select lists User changes value of element onChange
error images, windows The loading of a document or image causes
an error onError
focus windows, frames,
and all form elements
User gives input focus to window, frame, or form element
onFocus
load document body User loads the page in the Navigator onLoad
The following table outlines all of the event handlers in NetScape version 3.0
(SOURCE: NETSCAPE'S JAVASCRIPT REFERENCE PAGE)
Event Applies to Occurs whenEvent
handler
mouseout areas, links User moves mouse pointer out of an area (client-side image map) or link
onMouseout
mouseover links User moves mouse pointer over a link
onMouse- Over
reset forms User resets a form (clicks a Reset button)
onReset
select text fields,
textareas User selects form element's input field
onSelect
submit submit button User submits a form onSubmit
unload document body User exits the page onUnload
¿QUÉ ES PROGRAMACIÓN ORIENTADA A OBJETOS?
Es una técnica de programación.
No es una estructura de un lenguaje en particular.
Consiste de Objetos, métodos y atributos o propiedades.
OBJETOS Si miras a tu alrededor, todo lo que ves son
objetos. Por ejemplo: Personas, animales, plantas, carros, arboles, etc.
Los humanos pensamos en términos de objetos. Por ejemplo si vemos una foto, la dividimos por objetos y no por pixels. (abstracción)
Podemos pensar en un bosque en lugar de un arbol, en una playa en lugar de solo arena y así por el estilo.
Podríamos dividir los objetos entre animados y no animados.
OBJETOS – CONT.
Todos los objetos tienen atributos (“attributes”). Por ejemplo: Tamaño, forma, color, peso, etc.
Todos los objetos muestran conductas (“behaviours”). Ejemplo 1: Una bola rueda, rebota, se infla, se
desinfla, etc. Ejemplo 2: Un carro acelera, reduce, vira, toca
bocina, etc.
OBJETOS – CONT.
Aprendemos de los objetos estudiando sus atributos y observando sus comportamientos.
Diferentes objetos pueden tener atributos y comportamientos similares. Por ejemplo un carro, un camión y una patineta tienen muchas cosas en común.
Los objetos encapsulan (“encapsulate”) los datos (atributos) y los métodos (comportamientos) relacionandolos y escondiendo sus detalles. (abstracción)
OBJETOS – CONT.
Un ejemplo de abstracción es el carro. Tal vez no conocemos en detalle como funciona el motor, pero eso no nos impide poder guiarlo. Esto lo podemos llevar a la programación de objetos donde no tenemos que conocer como el objeto trabaja para poder utilizarlo.
Javascript utiliza objetos para poder realizar ciertas tareas, por lo tanto es importante entender este concepto.
OBJETOS Y ATRIBUTOS El documento de una página Web es un
objeto.
Cualquier tabla, forma, botón, imagen o enlace (“link”) se le considera un objeto.
Cada objeto tiene ciertos atributos o propiedades (información sobre el objeto).
OBJETOS Y ATRIBUTOS – CONT. Por ejemplo para cambiar el color de
fondo de una documento (página) a rojo, se efectúa con la siguiente instrucción: document.bgcolor = “red”
Otro ejemplo: El contenido o valor de una caja de texto llamada “password” en una forma llamada “entryform” se escribiría de la siguiente forma: document.entryform.password.value.
MÉTODOS (“METHODS”) Los objetos tienen una colección de cosas que pueden hacer.Diferentes objetos pueden hacer diferentes cosas. Por ejemplo una puerta se abre y cierra, una bombilla prende y apaga.Estas cosas las llamamos métodos.En Javascript un documento se puede abrir con el método document.open().Si queremos escribir la frase “Hello World” en una página, utilizamos el método write() y quedaría de la siguiente forma: document.write("Hello World")open() y write() son métodos del objeto: document.
MÉTODOS-CONT. Cuando necesitas hacer cosas como abrir una
ventana, escribir texto en una página, calcular el seno de un número, aislar la primera letra de una palabra, asignar la fecha de hoy a una variable, enviar al usuario de vuelta a la página anterior o enviar un mensaje de alerta, estas utilizando métodos para poder lograr las tareas mencionadas anteriormente.
Cuando cambias los detalles de algo que ya existe, estas cambiando sus propiedades. Por ejemplo: document.bgcolor="red“ es una propiedad porque estas cambiando detalles que ya existen.
Por otro lado alert("Hello There") es un método porque estas creando algo nuevo (“alert box”)
MÉTODOS-CONT. Ejemplos de algunos tipos de comandos para los
cuales los métodos son útiles. Date Methods –Maneja variables con valores de fecha y hora. Window Methods – Abre y cierra ventanas entre otras cosas.Document Methods – Genera nuevos documentos al momento. Form Methods – Selecciona items de una forma (“form”), envia el
cursor a un “text box”, somete la forma, etc. History Methods – Mantiene historial de páginas visitadas, uso del
botón “Back”. Text Methods – Aplica formato a las variables de texto antes de
mostrarlas. Math Methods – seno, coseno, redondeo, números al azar, valor
absoluto, etc. MessageBox Methods - Alertas, “Prompt”, confirmar, etc.
EJEMPLO DE ALGUNOS OBJETOS Y SUS MÉTODOS
SECCIÓN DE CHULERIAS
EXAMINAR EJEMPLOS DE CÓDIGOS HECHOS EN
JAVASCRIPT
Ahora procedemos a evaluar ejemplos de códigos creados en JavaScript hasta donde el tiempo nos permita.
Ejemplos de código - I
1. Ej-01-multiplica3Numeros Código HTML
Pide al usuario 3 números enteros y los multiplica.
2. Ej-02-suma2Numeros Código HTML
Pide al usuario 2 números enteros y los suma.
Ejemplos de código - II
3. Ej-03-mensajeBienvenidaVentanaAparte
Código HTML
Sale un mensaje de bienvenida en una ventana aparte.
4. Ej-04-mensajeBienvenidaPaginaBrowser
Código HTML
El mensaje sale pero en la misma página del “Browser”.
Ejemplos de código - III
5. Ej-05-CalculaPromedioClase Código HTML
Pide al usuarios las puntuaciones y calcula el promedio.
6. Ej-06-DoWhileTest Código HTML
Ejemplo del uso del do-while.
Ejemplos de código - IV
7. Ej-07-Script-Con-Funciones Código HTML
Este “Script” esta estructurado con el uso de funciones con variables globales.
8. Ej-08-FactorialTest Código HTML
Muestra en formato de tablas los primeros 10 números factoriales.
Ejemplos de código - V
9. Ej-09-ImpedirRightClick Código HTML
Impedir que el usuario presione el botón derecho del mouse.
10. Ej-10-ImpedirRightClick-version-2
Código HTML
Otro “Script” que hace lo mismo.
Ejemplos de código - VI
11. Ej-11-SeleccionarColordeFondoCódigo HTML
Permite seleccionar y ver colores de fondo (“Background”) .
12. Ej-12-SeleccionarColorYVerCodigo Código HTML
El usuario puede seleccionar y ver el código asociado al color indicado.
Ejemplos de código - VII
13. Ej-13-ScrollingDeTexto Código HTML
Hace “Scrolling”del texto que se indique en un “Text Box” de derecha a izquierda.
14. Ej-14-PoneTextoAnimado Código HTML
Escribe texto en un “Text Box” de izquierda a derecha.
Ejemplos de código - VIII
15. Ej-15-ReemplazarTextoAnimacion
Código HTML
Escribe el texto en un “Text Box” de izquierda a derecha y lo vuelve a reemplazar.
16. Ej-16-GeneraNumerosRandom
Código HTML
Genera números al azar.
Ejemplos de código - IX
17. Ej-17-GeneraDibujosRandom Código HTML
Cada vez que la página se carga, va a cargar una imagen selecionada al azar.
18. Ej-18-SimulacionTirarDados Código HTML
Indica cuantas veces sale cada número del dado.
Ejemplos de código - X
19. Ej-19-BusquedaDeTexto Código HTML
Te busca en un texto una palabra y te indica cuantas veces la encontró.
20. Ej-20-Cookies Código HTML
Guarda tu nombre en una cookie.
Ejemplos de código - XI
21. Ej-21-Calculadora Código HTML
Muestra una calculadora con las funciones básicas tales como suma, resta, multiplicación, división, más y menos (+/-), manejo de memoria entre otras cosas.
Ejemplos de código - XII
22. Ej-22-Juego-ElAhorcado Código HTML
EL juego de adivinar la palabra.
23. Ej-23-Juego-Puzzle Código HTML
Rompecabeza de una foto.
Ejemplos de código - XIII
24. Ej-24-Cronometro Código HTML
Muestra un cronómetro en pantalla .
25. Ej-25-EfectoDeNieve Código HTML
Crea la ilusión de que esta nevando.
Ejemplos de código - XIV
26. Ej-26-Password Código HTML
Solicita un password al usuario y no deja pasar si no se entra correctamente.
27. Ej-27-PonerFechaEnPagina Código HTML
Escribe la fecha actual en formato de texto en la página.
Ejemplos de código - XV
28. Ej-28-Reloj-24-Horas Código HTML
Muestra la hora en formato de 24 horas.
29. Ej-29-Reloj-12-Horas Código HTML
Muestra la hora en formato de 12 horas.
Ejemplos de código - XVI
30. Ej-30-CrearVentanaPopUpAlSubirPantalla
Código HTML
Cuano la pantalla sube, crea una ventana “Pop-up”.
31. Ej-31-CrearVentanaPopUpDeUnEnlace
Código HTML
Crea la ventana “Pop-up” cuando el usuario selecciona un enlace (“link”).
Ejemplos de código - XVII
32. Ej-32-DetectarResolucionYColores
Código HTML
Muestra la resolución y colores de la pantalla que está utilizando el usuario.
33. Ej-33-DetectarBrowserYMostrarloEnPantalla
Código HTML
Muestra en pantalla el nombre del “Browser” que está utilizando el usuario.
Ejemplos de código - XVIII
34. Ej-34-EditarFormulario Código HTML
Valida la nombre, fecha y teléfono.
35. Ej-35-EditarFormularioNombreYEmail
Código HTML
Te valida nombre y dirección de correo electrónico.
PACMAN
BONO: Ej-40-PacMan Código HTML
Gráfica del Pacman que persigue el cursor a donde quiera que lo mueva el usuario.
DOCUMENTOS EN WORD QUE HABLAN SOBRE TEMAS VARIADOS
DE JAVASCRIPT
DOCUMENTO-1 DOCUMENTO-2 DOCUMENTO-3 DOCUMENTO-4
DOCUMENTO-5 DOCUMENTO-6 DOCUMENTO-7 DOCUMENTO-8
DOCUMENTO-9 DOCUMENTO-10 DOCUMENTO-11 DOCUMENTO-12
DOCUMENTO-13 DOCUMENTO-14 DOCUMENTO-15 DOCUMENTO-16
BIBLIOGRAFÍA
Internet & World Wide Web (2004) - Deitel & Deitel
The Web Wizard’s Guide To JAVASCRIPT (2002) – Steven G. Estrella
Estudiante: Enrique Garrido-Lecca Risco - Universidad ALAS Peruanas S.A.
Iván Nieto Pérez - El Código: www.elcodigo.net
FIN
