Javascript CI2413 Desarrollo de aplicaciones para Internet Versiones

  • Slides: 35
Download presentation
Javascript CI-2413 Desarrollo de aplicaciones para Internet

Javascript CI-2413 Desarrollo de aplicaciones para Internet

Versiones de Javascript l NN 2. 0 / IE 3. 0 (Con errores y

Versiones de Javascript l NN 2. 0 / IE 3. 0 (Con errores y poco confiable) l l NN 3. 0 l l Javascript 1. 1 NN 4. 0 / IE 4. 0 l l Javascript 1. 0 Javascript 1. 2 (En IE conocido como JScript) NN 6. 0 / IE 6. 0 l Javascript 1. 5

Agregando el código al HTML l Ejemplo: l l <script language="Javascript"> <!-document. write("¡Hola mundo!");

Agregando el código al HTML l Ejemplo: l l <script language="Javascript"> <!-document. write("¡Hola mundo!"); // --> </script> Ejemplo: l <script language="Javascript 1. 2">

Agregando el código al HTML l Ejemplo: l l <script language="Java. Script" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="functions. js"></script>

Agregando el código al HTML l Ejemplo: l l <script language="Java. Script" src="functions. js"></script> La última norma de HTML disponible en http: //www. w 3. org/TR/html 401/interact/scripts. html recomiendo utilizar: l <script type="text/javascript"></script>

Agregando el código al XHTML l Ejemplo: l <script type="text/javascript"> //<![CDATA[ alert("<Esto es compatible

Agregando el código al XHTML l Ejemplo: l <script type="text/javascript"> //<![CDATA[ alert("<Esto es compatible con XHTML>"); //]]> </script>

Gramática l Elementos: l l l Variables Operadores Expresiones Declaraciones Objetos l Los objetos

Gramática l Elementos: l l l Variables Operadores Expresiones Declaraciones Objetos l Los objetos son muy importantes, porque gracias a unos objetos predefinidos del lenguaje podemos acceder a las diferentes características de una página HTML. Esto se llama "Document Object Model". Funciones y métodos

Variables y tipos de datos l Se crea una variable global nueva simplemente asignando

Variables y tipos de datos l Se crea una variable global nueva simplemente asignando un valor: l l nueva. Variable = 5; Sin embargo, dentro de las funciones si se desea una variable con alcance local se utiliza var: l function nueva. Funcion() { var ciclo=1; total=0; }

Variables y tipos de datos l l Javascript no tiene chequeo fuerte de tipo.

Variables y tipos de datos l l Javascript no tiene chequeo fuerte de tipo. Tipos l l l l Números Booleanos Hileras Objetos Nulo Indefinido Los operadores pueden comportarse diferente dependiendo del tipo.

Operadores l Aritméticos l l l l + Adición - Sustracción * Multiplicación %

Operadores l Aritméticos l l l l + Adición - Sustracción * Multiplicación % Módulo ++ Incremento unario -- Decremento unario - Negación unaria: devuelve la negación del operando.

Operadores l Comparación l l l == Igual a != Diferente > Mayor que

Operadores l Comparación l l l == Igual a != Diferente > Mayor que >= Mayor o igual que < Menor que <= Menor o igual que

Operadores l Booleanos l l && Y || O ! No Hileras l +

Operadores l Booleanos l l && Y || O ! No Hileras l + Concatenación

Operadores l Asignación l l Especiales l l l = +=, -=, *=, /=

Operadores l Asignación l l Especiales l l l = +=, -=, *=, /= &=, |= (condición) ? valor. Si : valor. No typeof Devuelve el tipo. Expresiones regulares (Java. Script 1. 2)

Estructuras de control l if. . . else l if (condición) { declaraciones 1;

Estructuras de control l if. . . else l if (condición) { declaraciones 1; } else { declaraciones 2; }

Estructuras de control l switch l } switch (expresión) { case valor : declaración;

Estructuras de control l switch l } switch (expresión) { case valor : declaración; break; . . . default : declaración;

Estructuras de control l for (declaración. Inicial; prueba; incremento) { declaraciones; }

Estructuras de control l for (declaración. Inicial; prueba; incremento) { declaraciones; }

Estructuras de control l do. . . while l do { declaraciones; } while

Estructuras de control l do. . . while l do { declaraciones; } while (condición);

Estructuras de control l while (condición) { declaraciones; }

Estructuras de control l while (condición) { declaraciones; }

Estructuras de control l break y continue funcionan para Java. Script como en otros

Estructuras de control l break y continue funcionan para Java. Script como en otros lenguajes. l for in l for (variable in objeto) { declaraciones; }

Estructuras de control l with (objeto) { declaraciones; }

Estructuras de control l with (objeto) { declaraciones; }

Comentarios l Se pueden utilizar comentarios de una línea o de varias: l l

Comentarios l Se pueden utilizar comentarios de una línea o de varias: l l // comentario de una línea /* comentario que permite escribir en varias líneas */

Funciones l Sintaxis l l function nombre(arg 1, arg 2, . . . )

Funciones l Sintaxis l l function nombre(arg 1, arg 2, . . . ) { statements; } Se recomienda escribir las funciones en el encabezado HTML (<head></head>), ya que este se carga antes del resto del documento.

Objetos l Document Object Model l Es un modelo de objetos predefinidos. Esta jerarquía

Objetos l Document Object Model l Es un modelo de objetos predefinidos. Esta jerarquía de objetos depende del navegador.

Objetos l Propiedades: l l carro. fabricante = "Toyota" carro. modelo = "Camry" carro.

Objetos l Propiedades: l l carro. fabricante = "Toyota" carro. modelo = "Camry" carro. anyo = "1990" document. write(carro. anyo); O: l carro['fabricante'] = "Toyota" carro['modelo'] = "Camry" carro['anyo'] = "1990" document. write(carro['anyo']);

Objetos l Métodos: l l Creación: l l window. close(); mi. Perro = new

Objetos l Métodos: l l Creación: l l window. close(); mi. Perro = new Object(); mi. Perro. nombre = "Scooby Doo"; Asignación de métodos: l mi. Perro. Huir = Huir;

Objetos l Constructor: l function Perro(nombre) { this. nombre = nombre; } mi. Perro

Objetos l Constructor: l function Perro(nombre) { this. nombre = nombre; } mi. Perro = new Perro("Scooby Doo");

Eventos l l l Para ver los posibles eventos de cada etiqueta HTML ver

Eventos l l l Para ver los posibles eventos de cada etiqueta HTML ver http: //w 3. org/TR/html 401. Para cada navegador en el sitio web del fabricante se pueden encontrar los eventos disponibles. Sintaxis básica: l <etiqueta atributo 1 atributo 2 on. Nombre. Evento="código javascript; ">

Excepciones

Excepciones

Excepciones l Ejemplo: l try { ejecute este bloque } catch (error) { ejecute

Excepciones l Ejemplo: l try { ejecute este bloque } catch (error) { ejecute este bloque si hay error }

Excepciones l Ejemplo: l try { colores[2] = "rojo"; } catch (e) { if

Excepciones l Ejemplo: l try { colores[2] = "rojo"; } catch (e) { if (e instanceof Type. Error) { alert(“Variable errónea o indefinida…"); } }

Excepciones l Tipos de excepciones: l l l Eval. Error – Se alcanza cuando

Excepciones l Tipos de excepciones: l l l Eval. Error – Se alcanza cuando la función eval() es utilizada en una manera incorrecta; Range. Error – Se alcanza cuando una variable numérica sobrepasa su valor máximo; Reference. Error – Se alcanza cuando se utiliza una referencia inválida; Syntax. Error – Se alcanza cuando un error de sintáxis ocurre mientras se parsea código Java. Script; Type. Error – Se alcanza cuando el tipo de una variable no es el que se esperaba; URIError – Se alcanza cuando las funciones encode. URI() o decode. URI() son utilizadas de una manera incorrecta;

Excepciones l Ejemplo: l try { colores[2] = "rojo"; } catch (e) { alert(“Ocurrió

Excepciones l Ejemplo: l try { colores[2] = "rojo"; } catch (e) { alert(“Ocurrió un error. Nombre: " + e. name + ". Mensaje: " + e. message); }

Excepciones (finally) l Ejemplo: l try { ejecute este bloque } catch (error) {

Excepciones (finally) l Ejemplo: l try { ejecute este bloque } catch (error) { ejecute este bloque si hay error } finally { ejecute este bloque siempre }

Excepciones (throw) l Ejemplo: l if (document. forms[0]. edad. valor > 99) { throw

Excepciones (throw) l Ejemplo: l if (document. forms[0]. edad. valor > 99) { throw Range. Error; }

Excepciones: (Error) l Ejemplo: l Error. Nombre = new Error (“El nombre de usuario

Excepciones: (Error) l Ejemplo: l Error. Nombre = new Error (“El nombre de usuario del sistema no empareja con el usuario real. "); l throw Error. Nombre;

Lecturas recomendadas l Norma ECMA Script l Netscape's Java. Script Guide l Netscape's Java.

Lecturas recomendadas l Norma ECMA Script l Netscape's Java. Script Guide l Netscape's Java. Script Documentation Library l Microsoft JScript Documentation l Microsoft Scripting Technologies. M l Microsoft DHTML References l Microsoft DHTML Object Model