CONCEPTOS AVANZADOS DE JAVASCRIPT Preparado 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)NETSCAPE'S JAVASCRIPT REFERENCE PAGE) EventApplies toOccurs when Event handler 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 linkonClick change text fields, textareas, select lists User changes value of elementonChange 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 bodyUser loads the page in the NavigatoronLoad

The following table outlines all of the event handlers in NetScape version 3.0 (SOURCE: NETSCAPE'S JAVASCRIPT REFERENCE PAGE)NETSCAPE'S JAVASCRIPT REFERENCE PAGE) EventApplies toOccurs when Event 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 buttonUser submits a formonSubmit unload document bodyUser exits the pageonUnload

¿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 HTMLCódigoHTML Pide al usuario 3 números enteros y los multiplica. 2. Ej-02-suma2Numeros Código HTMLCódigoHTML Pide al usuario 2 números enteros y los suma.

Ejemplos de código - II 3. Ej-03-mensajeBienvenidaVentanaAparte Código HTMLCódigoHTML Sale un mensaje de bienvenida en una ventana aparte. 4. Ej-04-mensajeBienvenidaPaginaBrowser Código HTMLCódigoHTML El mensaje sale pero en la misma página del “Browser”.

Ejemplos de código - III 5. Ej-05-CalculaPromedioClase Código HTMLCódigoHTML Pide al usuarios las puntuaciones y calcula el promedio. 6. Ej-06-DoWhileTest Código HTMLCódigoHTML Ejemplo del uso del do-while.

Ejemplos de código - IV 7. Ej-07-Script-Con-Funciones Código HTMLCódigoHTML Este “Script” esta estructurado con el uso de funciones con variables globales. 8. Ej-08-FactorialTest Código HTMLCódigoHTML Muestra en formato de tablas los primeros 10 números factoriales.

Ejemplos de código - V 9. Ej-09-ImpedirRightClick Código HTMLCódigoHTML Impedir que el usuario presione el botón derecho del mouse. 10. Ej-10-ImpedirRightClick-version-2 Código HTMLCódigoHTML Otro “Script” que hace lo mismo.

Ejemplos de código - VI 11. Ej-11-SeleccionarColordeFondo CódigoCódigo HTMLHTML Permite seleccionar y ver colores de fondo (“Background”). 12. Ej-12-SeleccionarColorYVerCodigo Código HTMLCódigoHTML El usuario puede seleccionar y ver el código asociado al color indicado.

Ejemplos de código - VII 13. Ej-13-ScrollingDeTexto Código HTMLCódigoHTML Hace “Scrolling”del texto que se indique en un “Text Box” de derecha a izquierda. 14. Ej-14-PoneTextoAnimado Código HTMLCódigoHTML Escribe texto en un “Text Box” de izquierda a derecha.

Ejemplos de código - VIII 15. Ej-15-ReemplazarTextoAnimacion Código HTMLCódigoHTML Escribe el texto en un “Text Box” de izquierda a derecha y lo vuelve a reemplazar. 16. Ej-16-GeneraNumerosRandom CódigoCódigo HTMLHTML Genera números al azar.

Ejemplos de código - IX 17. Ej-17-GeneraDibujosRandom Código HTMLCódigoHTML Cada vez que la página se carga, va a cargar una imagen selecionada al azar. 18. Ej-18-SimulacionTirarDados Código HTMLCódigoHTML Indica cuantas veces sale cada número del dado.

Ejemplos de código - X 19. Ej-19-BusquedaDeTexto Código HTMLCódigoHTML Te busca en un texto una palabra y te indica cuantas veces la encontró. 20. Ej-20-Cookies Código HTMLCódigoHTML Guarda tu nombre en una cookie.

Ejemplos de código - XI 21. Ej-21-Calculadora Código HTMLCódigoHTML 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 HTMLCódigoHTML EL juego de adivinar la palabra. 23. Ej-23-Juego-Puzzle Código HTMLCódigoHTML Rompecabeza de una foto.

Ejemplos de código - XIII 24. Ej-24-Cronometro Código HTMLCódigoHTML Muestra un cronómetro en pantalla. 25. Ej-25-EfectoDeNieve Código HTMLCódigoHTML Crea la ilusión de que esta nevando.

Ejemplos de código - XIV 26. Ej-26-Password Código HTMLCódigoHTML Solicita un password al usuario y no deja pasar si no se entra correctamente. 27. Ej-27-PonerFechaEnPagina Código HTMLCódigoHTML 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 HTMLCódigoHTML Muestra la hora en formato de 24 horas. 29. Ej-29-Reloj-12-Horas Código HTMLCódigoHTML Muestra la hora en formato de 12 horas.

Ejemplos de código - XVI 30. Ej-30-CrearVentanaPopUpAlSubirPantalla Código HTMLCódigoHTML Cuano la pantalla sube, crea una ventana “Pop-up”. 31. Ej-31-CrearVentanaPopUpDeUnEnlace Código HTMLCódigoHTML Crea la ventana “Pop-up” cuando el usuario selecciona un enlace (“link”).

Ejemplos de código - XVII 32. Ej-32-DetectarResolucionYColores Código HTMLCódigoHTML Muestra la resolución y colores de la pantalla que está utilizando el usuario. 33. Ej-33-DetectarBrowserYMostrarloEnPantalla Código HTMLCódigoHTML Muestra en pantalla el nombre del “Browser” que está utilizando el usuario.

Ejemplos de código - XVIII 34. Ej-34-EditarFormulario Código HTMLCódigoHTML Valida la nombre, fecha y teléfono. 35. Ej-35-EditarFormularioNombreY Código HTMLCódigoHTML Te valida nombre y dirección de correo electrónico.

PACMAN BONO: Ej-40-PacMan Código HTMLCódigoHTML 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-1DOCUMENTO-2DOCUMENTO-3DOCUMENTO-4 DOCUMENTO-5DOCUMENTO-6DOCUMENTO-7DOCUMENTO-8 DOCUMENTO-9DOCUMENTO-10DOCUMENTO-11DOCUMENTO-12 DOCUMENTO-13DOCUMENTO-14DOCUMENTO-15DOCUMENTO-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:

FIN