Resumen Mod 03

Módulo 3 Introducción a JavaScript

Introducción a AJAX

JavaScript surgió como necesidad de encontrar un lenguaje intermedio entre la sencillez de HTML y la complejidad de JAVA, es decir, ampliar la funcionalidad existente. Fue creado por NETSCAPE (LiveScript) y junto con SUN se desarrolló una sintaxis muy similar a la de JAVA pero nada que ver con ella. El javascript se introduce en páginas HTML y utiliza guiones de Cliente (Operaciones realizadas dentro del cliente) Las ventajas que proporciona Javascript son: Reduce el tráfico en la red y comunicaciones Operaciones realizadas en el propio Navegador Cliente Obtención de la información del navegador Disponemos de varias versiones de JavaScript: JavaScript 1.1, 1.2, 1.3, 1.4 Las cuales han sido finalmente integradas en un estándar denominado ECMAScript_262.

No debemos de confundir Java y JavaScript, las diferencias son muchas, aunque también tienen cosas en común, por ejemplo su sintaxis y algunas órdenes. Uno de los aspectos importantes a tener en cuenta es la Seguridad en JavaScript, fue pensado para ser un lenguaje seguro, por lo que no permite muchos elementos que otros lenguajes sí permiten. En Javascript no se permiten cosas como Punteros o incorporación de códigos grabados en Disco Duro Al ser un lenguaje interpretado, ni existen problemas de tiempo de compilación ni de memoria, el código siempre viaja dentro de la página HTML. Los programas JavaScript están incrustados dentro de los propios documentos HTML y deben encontrarse entre los TAG <Script>…. exceptuando los eventos. Un ejemplo de ellos puede ser: <script ....>

Se pueden poner en cualquier parte del código, aunque existen una serie de recomendaciones generales, según este orden Funciones generales, variables globales ….. Eventos y funciones concretas …. Funciones generales Vaiables Globales Eventos y funciones concretas

2

Introducción a AJAX

Sintaxis de JavaScript La sintaxis es la siguiente: < Script LANGUAGE=“Version de JavaScript”> “JavaScript” “JavaScript “JavaScript “JavaScript “JavaScript

1.1” 1.2” 1.3” 1.4”

para para para para para

Nestcape Nestcape Nestcape Nestcape Nestcape

2.0 y IE 3.0 3.0 4.0 y IE 4.0 4.6 y IE 5.0 6

Si el navegador es menor, no se leen las sentencias JavaScript Ejemplo Mi primer programa
Este es un mensaje normal de HTML
<script language=“JavaScript”> Document.write (“Hola mundo JavaScript”);
En HTML otra vez

Elementos Básicos Variables Son posiciones de memoria destinadas a almacenar valores. 1. Sintáxis var nombre_variable [ = valor ]; Ejemplos var nombre = “Jose”; var numero = 14; var bien = true; var ns = null; var incognito; 2. Tipos de datos En la declaración de variable no se indica el tipo de dato que va a contener, sólo se asigna el tipo de dato cuando una variable recibe contenido. Los posibles tipos son: Cadena Conjunto de caracteres alfanuméricos. Numéricas Números. Boolean valor de TRUE o FALSE.

3

Introducción a AJAX

Ejemplos var nombre = “Pepe”; var x = ’22’; var entero = 22; var num_octal = 024; var num_hex = 0x24; var num_flotante = 1.24; var ok = true; var ko = false;

3. Ámbitos Las variables definidas pueden ser globales o locales. - Globales: se definen fuera de cualquier función JavaScript y se pueden usar en todas ellas. - Locales: se definen dentro de una función y sólo se puede acceder a ella desde dentro de la función. Ejemplos <script language=“JavaScript”> var nombre_global=“hola”; : function peticion() { var nombre_local=12; : Operadores a) Aritméticos: son utilizados para realizar operaciones matemáticas. Ejemplos var num1 = 12; var num2 = 14; var resultado; resultado = num1 + num2; resultado = num2 * num1; b) Lógicos: se utilizan para combinar expresiones de comparación. …… ( num1 == num2 ) && (num1 == num3 ) ……. ( num1 <= num2 ) || (num1 > num3 )

- Comparación: compara varios operandos y devuelve el valor lógico (true o false) correspondiente. - Asignación: permiten asignar valores a una variable o realizar incrementos y decrementos sobre la variable. num3 += 7; ( num3 = num3 + 7 ) num3 -= num1 ( num3 = num3 – num1) - Binarios: son utilizados para realizar operaciones a nivel de bits. var numero = 8; numero>>1 ( numero tiene valor 4) numero<<2 ( numero tiene valor 32)

4

Introducción a AJAX

Varios typeof Devuelve una cadena con el tipo de la variable pasada como parámetro. Condición ? Parte_True : Parte_False Evalúa la condición y ejecuta la parte true o false en función del resultado. void Descarta el operador y no de devuelve nada. new Crea un nuevo objeto. delete Elimina un objeto previamente creado.

FUNCIONES USUALES JavaScript dispone de unas funciones adicionales de muy común. Estas funciones suelen ser utilizadas muy a menudo para visualización de información dentro del documento. alert ( texto ) Muestra una ventana modal en el navegador con un texto indicado prompt (cadena, valor ) Aparece una petición en el navegador y nos devuelve el dato pasado. confirm (cadena ) Aparecen 2 botones y nos da la opción de confirmar o no. Nos devuelve TRUE o FALSE.

Condicional y Bucles En JavaScript disponemos de la posibilidad de realizar sentencias condicionales y utilización de bucles. IF…ELSE Evalúa la condición y si es verdades ejecuta la parte trae, si no realiza la parte false (si existe). If (condición ) { Parte verdadera } else { Parte falsa } SWITCH Se trata de una bifurcación múltiple. Se ejecutan las instrucciones en cascada hasta que se acabe el bucle o hasta que encuentre la orden break. Se pueden anidar indefinidamente. La parte DEFAULT debe de aparecer siempre al final del todo. Switch (condición ) { case valor1: Sentencias;

5

Introducción a AJAX

break; case valor2: Sentencias; break; : default: Sentencias; }

FOR Realizar las sentencias mientras la condición sea verdadera. for ( inicio ; condición ; iteración ) { Sentencias; } Pasos de ejecución: 1. Se realiza la orden inicial 2. Se evalúa la condición 3. Si es verdadera, se realizan todas las sentencias 4. Se hace la iteración 5. Se pasa al punto 2 6. Si es falsa el for acaba

WHILE Se ejecuta una serie de sentencias mientras la condición sea verdadera. Se puede ejecutar de 0 a N veces while ( condición ) { sentencias; } DO...WHILE Se ejecuta una serie de sentencias mientras la condición sea verdadera. Se puede ejecutar de 1 a N veces. do { sentencias; } while ( condición )

Ejemplo <script language=“Javascript”> var numero=0; do { Document.write(numero+“
”); } while (numero < 10)

Funciones Permiten la agrupación de un código para ser ejecutado de forma conjunta y cuando sea requerido. Son utilizadas normalmente para diferentes usos entre ellos:

-

Creación de objetos Especificación de un conjunto de instrucciones que se van a ejecutar muchas veces

6

Introducción a AJAX

function nombre_funcion (parametros) { Sentencias; [ return valor_devuelto ] } Los parámetros son valores pasados a la función para realizar operaciones internas. La cláusula return es opcional y se utiliza para devolver un valor por parte de la función.

Ejemplo <script language=“Javascript”> function saludo() { document.write(“Hola, que tal?”); return true; } : : <script language=“Javascript”> saludo()

Funciones disponibles en JavaScript eval(string) Esta función recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de Javascript. parseInt(cadena,base) Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en un número en la base indicada. parseFloat(cadena) Convierte la cadena en un número y lo devuelve. escape(carácter) Devuelve el carácter que recibe por parámetro en una codificación ISO Latín 1. unescape(carácter) Hace exactamente lo opuesto a la función escape. isNaN(número) Devuelve un booleano dependiendo de lo que recibe por parámetro. Si no es un número devuelve un true, si es un número devuelve false. Otro Ejemplo más <script language=“Javascript”> function redondeo( valor, decimales) { aux = Math.round(valor); switch (decimales) { case 0: return aux; break;

7

Introducción a AJAX

case 1: return aux/10; break; case 2: return aux/100; break; : } } : <script language=“Javascript”> numero=redondeo(3.14,1);

Clases y Objetos Las clases en JavaScript permiten la creación de nuevos tipos de datos, su implementación es muy peculiar y se realiza mediante las denominadas funciones objetos, no acepta herencia y todos los miembros son públicos. La clase se define como una función, dicha función declara los atributos (propiedades) y métodos de la clase. Opcionalmente, permite la inicialización de uno o varios atributos, actuando de constructor. Los métodos se implementan fuera de la función objeto, aunque se enlazan en dicha función. Se utiliza la palabra reservada this para hacer referencia a los miembros del objeto. Se utiliza la palabra reservada new para crear las instancias de los nuevos objetos. Creación de Objetos El objeto es una definición genérica, no es posible su utilización directa y deberemos hacer una “instanciación” del mismo. Dentro de Javascript podemos crear objetos o usar los objetos predefinidos que existen dentro del lenguaje. Para hacer referencia a los objetos, seguiremos la notación habitual, utilización del punto ( . ) objeto.propiedad objeto.método Para poder trabajar con ellos, deberemos seguir siempre las mismas pautas de actuación: - Definición del Objeto. - Creación de una instancia de ese objeto. - Uso y gestión del objeto. Para crear un objeto necesitamos hacerlo a través de una función, dentro de la cual definiremos sus atributos y sus métodos (Creación del objeto). Una vez creado el objeto, tenemos que hacer una instancia de ese objeto mediante el operador new; “instanciar” un objeto. Ejemplo ---- Creación del Objeto function Caja ( ancho, alto ) { this.ancho = ancho; this.alto = alto; }

8

Introducción a AJAX

--- Instanciación del Objeto var miCaja = new Caja ( 10, 10 ); --- Utilización del objeto miCaja.ancho = 12; var volumen = miCaja.ancho * miCaja.alto; NOTAS El nombre de los parámetros tiene que ser igual a los atributos definidos. No se pueden declarar atributos dentro del método, no son accesibles por el código. Métodos Los métodos son funciones normales que se asocian a objetos determinados y concretos. Estos métodos no se definen en la creación del objeto, sino fuera de él. Para la definición de un método a un objeto seguimos la misma notación que con los atributos. (.) objeto.MetodoObjeto = función; objetoMetodoObjeto ( parámetro)

-- definición -- utilización

Ejemplo ---- Creación del Objeto function Caja ( ancho, alto ) { this.ancho = ancho; this.alto = alto; } ----- Creación de la función para el método function ver ( Obj ) { return obj.ancho; } --- Instanciación del Objeto var miCaja = new Caja ( 10, 10 ); --- Utilización del objeto miCaja.ancho = 12; var volumen = miCaja.ancho * miCaja.alto; --- Utilización del método miCaja.verAncho = ver; miCaja.verAncho( miCaja );

9

Introducción a AJAX

Clases y Objetos predefinidos STRING Objeto que es creado cada vez que se manejen cadenas. Cuando asignamos una cadena ya tenemos un objeto String creado. Métodos Length blink() bold() charAt(n) fontcolor(“color) fontsize(n) indexOf(subcadena, inicio) Italics() substring(x,y) toLowerCase()

Longitud de la cadena Cadena parpadeante Cadena en negrita Muestra carácter posición (n) Color de la cadena Tamaño de la fuente Busca la subcadena a partir del inicio. Fuente en itálica Devuelve la subcadena indicada Devuelve la cadena en minúsculas

MATH La clase Math proporciona los mecanismos para realizar operaciones matemáticas en JAvascript y es utilizada para realizar cálculos complejos Métodos

round(a) sqrt(n)

Valor absoluto de (n) Devuelve el valor entero superior (N) Devuelve el valor entero inferior (N) Valor mayor entre X e Y Valor menor entre X e Y X elevado a Y Generación de número aleatorio entre 0..1 Redondeo de un número decimal Raíz cuadrada de (n)

Constantes PI SQRT2 E

Número PI Raíz cuadrada de 2 Número E

abs(n) ceil(n) floor(n) max(x,y) min(x,y) pow(x,y) random()

DATE Permite trabajar con horas y fechas. Cuando definimos un objeto de este tipo, se le asigna la fecha y hora actuales Métodos getDate() getDay() getHours() getMinutes() getSeconds()

Obtiene el día del mes (1..31) Obtiene el día de la semana(0..6) Obtiene la hora (0..23) Obtiene los minutos (0..59) Obtiene los segundos (0..59)

10

Introducción a AJAX

Obtiene el

getMonth() mes (0..11) getYear()

Obtiene el año

ARRAYS Objeto que permite almacenar datos del mismo tipo de una forma continua. No se indica el tamaño del array, se crea y se utiliza. Se pueden añadir elementos cuando queramos y algo a tener en cuenta es que no se pueden borrar elementos, aunque sí asignar el valor nulo. Ejemplo V1=new Array(); V1[0]=Valor1; V1[1]=Valor2; : Estaciones = new Array() Estaciones[0]=“Primavera”; Estaciones[1]=“Verano”; Estaciones[2]=“Otoño”; Estaciones[3]=“Invierno”; Métodos Length join() reverse() sort()

Número de elementos del array Devuelve una cadena con todos los componentes del array separados por comas Invierte el orden de los componentes en el array Ordena los elementos del array por orden alfabético

Función EVAL Esa función toma un String como argumento y evalúa su resultado. Su utilización principal es para evaluar expresiones matemáticas o formularios. El argumento puede ser:

-

Expresión en JavaScript Una sentencia Secuencia de sentencias

Ejemplos function ponerValor(objeto, valor) { eval(“document.forms[0]”+objeto+”.value”)=valor; }

Funcion SetTimeout Se utiliza para evaluar una expresión pasado un tiempo en milisegundos, indefinidamente. Nos devuelve una variable que podemos usar para borrar el bucle de evaluación (clearTimeout)

11

Introducción a AJAX

variable = setTimeout (“expresión”, tiempo) expresión: Puede ser varias órdenes separadas por punto y coma. tiempo: Tiempo expresado en milisegundos

Eventos Los eventos son acciones de usuarios ante las cuales se pueden realizar acciones internas determinadas. Mediante estos eventos se le da más importancia al cliente y menos al servidor. Todos los eventos comienzan con ON y se sitúan como si fuese una propiedad más de los tags de HTML.

Evento

Aplicación

Dónde se aplica

onAbort

Se aborta una carga de imagen

Imágenes

onBlur

El usuario sale del objeto

Forms, frame, ventanas

onClick

Se hace click en el objeto. Sólo el botón izquierdo El usuario cambia el valor de un elemento

Botones, links, forms

1. Generales

onChange

Form y listas Select

onFocus

La carga de un documento o imagen causa error Se lleva el foco al objeto indicado

Ventanas, frame y Form

onLoad

Cuando se carga la página del documento

Body

onReset

Al pulsar el botón de RESET

Forms

onSelect

Se selecciona texto en un FORM

Campo texto form

onSubmit

Se pulsa el botón SUBMIT

Botones de Form

onunLoad

Salimos de la página activa

BODY

Onmouseover

El ratón pasa por encima

Cualquier objeto

onmouseOut

Al abandonar el ratón el enlace

Cualquier objeto

Onmousedown

Se pulsa un botón del ratón

Botones y body

Onmousemove

El usuario mueve el ratón

Documento o elemento

Onmouseup

Se deja de pulsar el ratón

Botones y body

Onmove

Movemos la ventana del navegador

Ventana o Frame

Onresize

Modificamos la ventana del navegador

Ventana o Frame

onError

Ventanas e imágenes

2. Ratón

ESPECIALES

12

Introducción a AJAX

Arquitectura de Objetos Cuando una página es cargada por un navegador, automáticamente se crean una serie de objetos predefinidos que nos permiten obtener información de ella. Todos estos objetos se encuadran dentro de una estructura jerárquica de árbol invertida bajo el objeto principal llamado WINDOWS. Esta jerarquía de objetos, actualmente también es denominada DOM, aunque no está totalmente estandarizada, es de uso muy común con los lenguajes de programación web. WINDOWS Windows es el objeto que está en la Cima del árbol jerárquico de objetos. Es el objeto padre de todos los demás objetos dentro del documento HTML. Desde este objeto podemos controlar toda la página cargada. windows.open (…. Nueva_ventana ….. ) Propiedades .closed .defaultStatus .frames .length .name .self .top .status

Determina si una ventana se ha cerrado o no Mensaje estándar de la barra de estado Array de frames Número de frames dentro de la ventana Nombre de la ventana Ventana Activa Ventana Padre Mensaje en barra de estado

Métodos .back ( ) Ir a la página anterior .blur ( ) Retira el foco de la ventana actual y lo pasa a la siguiente .close ( ) Cierra la ventana actual .forward ( ) Ir a la página siguiente .home ( ) Ir a la página por defecto para el navegador .open ( URL,nombre, características ) Abre la URL en una nueva ventana SCREEN Permite obtener información sobre la pantalla que está usando el navegador, como: - Número de colores - Alto y ancho de la pantalla Propiedades .colorDepth .height .width

Devuelve el número de colores que permite la pantalla Devuelve el alto de la pantalla Devuelve el ancho de la pantalla

13

Introducción a AJAX

NAVIGATOR Permiten obtener información referente al navegador que está usando el cliente. Propiedades .appCodeName .appNAme .appVersion .language .platform

Nombre del Código del Navegador Nombre del Navegador usado Versión del Navegador usado Lenguaje del Navegador usado Sistema Operativo para el que fue compilado el Navegador

Métodos .javaEnabled ( )

Determina si está activo el Jscript en el Navegador

HISTORY Contiene información acerca de los enlaces visitados por el usuario dentro la una ventana. Propiedades .length .next .previuos

Devuelve el número de entradas que tiene el histórico Devuelve un string con la siguiente entrada en el histórico Devuelve un string con la anterior entrada en el histórico

Métodos .back ( ) .forward ( ) .go ( n )

Va a la anterior entrada del histórico Va a la siguiente entrada del histórico Va a la entrada N del histórico

LOCATION Contiene información completa del URL (Uniform Resource Locator) actual. Propiedades .hash .host .hostname .href .port .protocol

Nombre de la URL Nombre del Servidor Dirección IP del servidor Dirección completa Puerto de comunicaciones Protocolo usado para las comunicaciones

Métodos .reLoad ( ) .rePlace ( )

El documento es releído El documento es reemplazado por una nueva página

FRAMES Los frames se utilizan para poder dividir la ventana en partes e introducir dentro de cada una un documento diferente.

14

Introducción a AJAX

Cada uno de estos frames, pueden ser controlados y gestionados de forma diferente sin que afecte al resto de los documentos. Se podría decir que cada frame representa una nueva ventana dentro de la ventana principal. DOCUMENT Este objeto, hace referencia a todo el contenido del documento, incluye texto, imágenes, formularios, links, etc. Proporciona una forma fácil de hacer cambios dentro del documento. Merece especial referencia el Objeto FORMS, pues es el encargado de gestionar los formularios existentes dentro del documento. Propiedades .alinkColor .applets .bgcolor .cookie .fgcolor .forms .images .linkcolor .location .title .referrer

Indica el color de los enlaces visitados Indica los applets que están en el documento Indica el color del fondo del documento Cadena con los valores de las cookies existentes en el documento Indica el color del texto Array con todos los Formularios del Documento Array con todas las imágenes del documento Indica el color de los enlaces por visitar Indica el URL del documento Título del Documento Cadena con el documento que llamó al actual

Métodos .clear ( ) .write .writeln

Limpia la ventana del documento Escribe texto en el documento Escribe texto en el documento y añade fin de línea

FORMS Este objeto nos informa acerca de un formulario del documento y de sus elementos. Cada elemento se puede representar por su nombre o por un índice dentro del formulario correspondiente, enumerándolos de 0 a N. Para realizar el tratamiento de un elemento dentro del formulario la sintaxis es: document.nombre_form.nombre_elem.propiedad

Propiedades .action .elements .encoding .method .length .elemento.value

Devuelve el URL de destino del botón SUBMIT Array de elementos del formulario Cadena que indica la especificación MIME del formulario Método de envío de los datos ( GET / POST ) Número de elementos dentro del formulario Valor del elemento dentro del formulario

Métodos

15

Introducción a AJAX

.reset ( ) .submit ( )

Emula la pulsación del botón RESET del formulario Emula la pulsación del botón SUBMIT del formulario

Dentro de los FORMS podemos encontrar los siguientes elementos: FORMS. TEXT’s Representan los campos de texto dentro de un formulario. Tienen idénticas propiedades y métodos los elementos TEXTAREA y PASSWORD FORMS. BUTTON Representan los botones del formulario. Pueden aparecer 3 tipos: RESET, SUBMIT, BUTTON. FORMS. CHECKBOX Elemento que nos permite seleccionar varias opciones dentro del elemento. Si está seleccionado TRUE, si no lo está FALSE. FORMS. RADIO Nos permite elegir una sola opción de un conjunto dado por el elemento. FORMS. SELECT Lista de opciones dentro de un elemento del formulario. Es una lista desplegable. FORMS. HIDDEN Proporciona la posibilidad de guardar información administrativa necesaria para el documento. No será visible en ningún campo. Similar a los campos de texto pero sin visualización ni edición

Eventos Los eventos son acciones de usuarios ante los cuales se pueden realizar acciones internas determinadas, están basados en DHTML. Todos los eventos comienzan con ON y se sitúan como si fuese una propiedad más de los tags de HTML. Mediante estos eventos se le da más importancia al cliente y menos al servidor A continuación se presenta una relación de eventos

16

Introducción a AJAX

Eventos

Aplicación

Se produce cuando

onAbort

Imágenes

Se aborta una carga de imagen

onBlur

Forms, frame, ventanas

El usuario sale del objeto

onClick

Botones, links, forms

Se hace click en el objeto. Sólo el botón izquierdo

onChange

Form y listas Select

El usuario cambia el valor de un elemento

onError

Ventanas e imágenes

La carga de un documento o imagen causa error

onFocus

Ventanas, frame y Form

Se lleva el foco al objeto indicado

onLoad

Body

Cuando se carga la página del documento

onReset

Forms

Al pulsar el botón de RESET

onSelect

Campo texto form

Se selecciona texto en un FORM

onSubmit

Botones de Form

Se pulsa el botón SUBMIT

onunLoad

BODY

Salimos de la página activa

Eventos

Aplicación

Se produce cuando…

1. Generales

2. Ratón Onmouseover Cualquier objeto

El ratón pasa por encima

onmouseOut Cualquier objeto

Al abandonar el ratón el enlace

Onmousedown Botones y body

Se pulsa un botón del ratón

Onmousemove Documento o elemento

El usuario mueve el ratón

Botones y body

Se deja de pulsar el ratón

Onmove

Ventana o Frame

Movemos la ventana del navegador

Onresize

Ventana o Frame

Modificamos la ventana del navegador

Onmouseup

3. Especiales

17