 2004 Prentice Hall, Inc. All rights reserved. Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object.

Presentación del tema: " 2004 Prentice Hall, Inc. All rights reserved. Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object."— Transcripción de la presentación:

1  2004 Prentice Hall, Inc. All rights reserved. Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object 12.4 String Object 12.4.1 Fundamentals of Characters and Strings 12.4.2 Methods of the String Object 12.4.3 Character-Processing Methods 12.4.4 Searching Methods 12.4.5 Splitting Strings and Obtaining Substrings 12.4.6 XHTML Markup Methods 12.5 Date Object 12.6 Boolean and Number Objects 12.7 document Object 12.8 window Object 12.9 Using Cookies 12.10 Final JavaScript Example 12.11 Web Resources

2  2004 Prentice Hall, Inc. All rights reserved. 12.1 Introduction Utilizar JavaScript para manipular cada elemento de un documento XHTML dentro de un script. Hacer referencia de varios de los objetos built-in de JavaScript Demostrar las capacidades de estos objetos

3  2004 Prentice Hall, Inc. All rights reserved. 12.2 Thinking About Objects Objetos –Attributes –Conducta (Behaviors) –Encapsulate date and methods –Propiedades de la información se mantiene oculto –Los detalles se esconden dentro de los objetos mismos

4  2004 Prentice Hall, Inc. All rights reserved. 12.3 Math Object El Objeto math permite al programador ejecutar varios cálculos (métodos) matemáticos comunes.

5  2004 Prentice Hall, Inc. All rights reserved. 12.3 Math Object Fig. 12.1 Math object methods.

6  2004 Prentice Hall, Inc. All rights reserved. 12.3 Math Object

7  2004 Prentice Hall, Inc. All rights reserved. 12.3 Math Object

8  2004 Prentice Hall, Inc. All rights reserved. 12.4 String Object Este objeto permite a JavaScript el manejo de los caracteres dentro de un string Esto es apropiado para procesar nombres, direcciones, información de tarjetas de crédito, etc.

9  2004 Prentice Hall, Inc. All rights reserved. 12.4.1 Fundamentals of Characters and Strings Caracteres –Bloques fundamentales de los programas de Javascript String –Serie de caracteres que son tratados como una sola unidad. –Cadena de caracteres. –Arreglo de caracteres.

10  2004 Prentice Hall, Inc. All rights reserved. 12.4.2 Methods of the String Object Fig. 12.3 String object methods.

11  2004 Prentice Hall, Inc. All rights reserved. 12.4.2 Methods of the String Object Fig. 12.3 String object methods.

12  2004 Prentice Hall, Inc. All rights reserved. 12.4.2 Methods of the String Object

13  2004 Prentice Hall, Inc. All rights reserved. 12.4.3 Character Processing Methods charAt –Devuelve el caracter de una posición en específico charCodeAt –Devuelve el valor Unicode del caracter de una posición en particular. fromCharCode –Devuelve un string creado de una serie de valores de tipo unicode. toLowerCase –Devuele la versión en minúsculas de un string. toUpperCase –Devuele la versión en mayúsculas de un string.

14  2004 Prentice Hall, Inc. All rights reserved. Outline CharacterProcessing. html 1 of 2 Muestra el carácter que se encuentra en la posición cero (0) del string s. El método fromCharCode cambia de unicode a letras. Muestra el código del carácter que se encuentra en la posición cero (0) del string s.

15  2004 Prentice Hall, Inc. All rights reserved. Outline CharacterProcessing. html 2 of 2 Convierte el string s2 en minúsculas Convierte el string s2 en mayúsculas

16  2004 Prentice Hall, Inc. All rights reserved. 12.4.4 Searching Methods indexOf y lastIndexOf –Busca un substring dentro de un string

17  2004 Prentice Hall, Inc. All rights reserved. Outline SearchingStrings.html 1 of 3 Muestra la primera ocurrencia del string Muestra la última ocurrencia del string Muestra la primera ocurrencia del string a partir de la posición 12.

18  2004 Prentice Hall, Inc. All rights reserved. Outline SearchingStrings.html 2 of 3 Muestra la última ocurrencia del string a partir de la posición 12.

19  2004 Prentice Hall, Inc. All rights reserved. Outline SearchingStrings.html 3 of 3

20  2004 Prentice Hall, Inc. All rights reserved.

21 12.4.5 Splitting Strings and Obtaining Substrings Tokenization –Es el proceso de romper un string en tokens Tokens –Palabras individuales –Separadas por delimitadores

22  2004 Prentice Hall, Inc. All rights reserved. Outline SplitAndSubString.html 1 of 2 Captura los primeros 10 caracteres del string. Separa el string en palabras utilizando de delimitador el espacio en blanco. Crea un arreglo de palabras (tokens). A cada palabra le une el return (\n)

23  2004 Prentice Hall, Inc. All rights reserved. Outline SplitAndSubString.html 2 of 2

24  2004 Prentice Hall, Inc. All rights reserved.

25 12.4.6 XHTML Markup Methods Anchor – Anchor Blink – blinking text Fixed – monospaced text Strike – strike out text Subscript – subscript Superscript – superscript

26  2004 Prentice Hall, Inc. All rights reserved. Outline MarkupMethods.html 1 of 2 Guarda en forma de string los textos a los que les va a aplicar distintos efectos.

27  2004 Prentice Hall, Inc. All rights reserved. Outline MarkupMethods.html 2 of 2

28  2004 Prentice Hall, Inc. All rights reserved. 12.5 Date Object El objeto Date provee métodos para manipular fechas y horas.

29  2004 Prentice Hall, Inc. All rights reserved. 12.5 Date Object

30  2004 Prentice Hall, Inc. All rights reserved. 12.5 Date Object

31  2004 Prentice Hall, Inc. All rights reserved. 12.5 Date Object

32  2004 Prentice Hall, Inc. All rights reserved. Outline DateTime.html 1 of 3 Muestra diferentes formatos de fecha/hora

33  2004 Prentice Hall, Inc. All rights reserved. Outline DateTime.html 2 of 3 Muestra diferentes formatos de fecha/hora

34  2004 Prentice Hall, Inc. All rights reserved. Outline DateTime.html 3 of 3

35  2004 Prentice Hall, Inc. All rights reserved. 12.6 Boolean and Number Objects Los Objetos utilizan mucho los valores booleanos true / false y los números

36  2004 Prentice Hall, Inc. All rights reserved. 12.6 Boolean and Number Objects

37  2004 Prentice Hall, Inc. All rights reserved. 12.6 Boolean and Number Objects

38  2004 Prentice Hall, Inc. All rights reserved. 12.7 document Object Manipula el documento (página web) que se muestra en el Browser.

39  2004 Prentice Hall, Inc. All rights reserved. 12.7 document Object

40  2004 Prentice Hall, Inc. All rights reserved. 12.8 window Object Provee métodos para manipular la ventana del Browser.

41  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 1 of 7

42  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 2 of 7 Verifica si las opciones de la forma (check box) están activadas o no para establecer los parámetros que van a crear la ventana.

43  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 3 of 7 Creación de una ventana child con las opciones que el usuario indicó. Desactivar botones de la forma

44  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 4 of 7 Modifica el contenido de la ventana child. Cierra la ventana child. Activar botones de la forma

45  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 5 of 7 Obtener URL de la ventana child. Poner el URL a la ventana child.

46  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 6 of 7 Forma con la que interactúa el usuario.

47  2004 Prentice Hall, Inc. All rights reserved. Outline window.html 7 of 7

48  2004 Prentice Hall, Inc. All rights reserved.

49

50 12.8 window Object

51  2004 Prentice Hall, Inc. All rights reserved. 12.9 Using Cookies Cookie –Representa datos almacenados en la computadora del usuario para mantener información sobre el cliente durante y entre las sesiones del Browser. –Se puede acceder utilizando la propiedad llamada cookie –Se le puede poner fecha de expiración utilizando la propiedad expires –Se puede utilizar la función escape para convertir caracteres no alfanuméricos a secuencias hexadecimal (escape sequences) –unescape - hace lo contrario de la función escape

52  2004 Prentice Hall, Inc. All rights reserved. Outline cookie.html 1 of 4

53  2004 Prentice Hall, Inc. All rights reserved. Outline cookie.html 2 of 4 Coteja si hay una cookie creada para esta pagina. Parte los datos en tokens y obtiene los datos.

54  2004 Prentice Hall, Inc. All rights reserved. Outline cookie.html 3 of 4 Activar botones de la forma Expirar el cookie si no es el usuario verdadero. Ejecuta el modulo wrongPerson() si el usuario da clic a este enlace

55  2004 Prentice Hall, Inc. All rights reserved. Outline cookie.html 4 of 4

56  2004 Prentice Hall, Inc. All rights reserved. 12.10 Final JavaScript Example Combina los conceptos discutidos previamente

57  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 1 of 6 Nombre de las imágenes que se presentan al azar en la página. Frases que se presentan al azar en la página.

58  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 2 of 6 Escribir la fecha en la página. Enviar saludo dependiendo de la hora. Cotejar si hay cookie para buscar el nombre.

59  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 3 of 6 Cambiar información de la cookie si no era el usuario correcto. Poner el enlace que permite cambiar la información del cookie.

60  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 4 of 6 Calcula al azar la foto y el mensaje que se quieren poner en la pantalla. Crea una ventana child para poner los mensajes Pone los mensajes en la ventana child.

61  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 5 of 6 Dentro de la ventana child pone un enlace que permite cerrarla Cambiar la información de la cookie si es otro usuario. Abre una ventana y le asigna un código html previamente creado.

62  2004 Prentice Hall, Inc. All rights reserved. Outline final.html 6 of 6 Pone el resto de la información en la forma con su respectivo módulo asignado.

63  2004 Prentice Hall, Inc. All rights reserved.

64 Outline quiz2.html 1 of 3 Este es el código que se va a insertar en la ventana child.

65  2004 Prentice Hall, Inc. All rights reserved. Outline quiz2.html 2 of 3

66  2004 Prentice Hall, Inc. All rights reserved. Outline quiz2.html 3 of 3

67  2004 Prentice Hall, Inc. All rights reserved.

68 12.11 Web Resources www.javascript.com www.iboost.com/build/programming/js/tutorial/885.htm www.javascriptsearch.com www.a1javascripts.com