Javascript CI-2413 Desarrollo de aplicaciones para Internet.

35
Javascript CI-2413 Desarrollo de aplicaciones para Internet

Transcript of Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Page 1: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Javascript

CI-2413 Desarrollo de aplicaciones para Internet

Page 2: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Versiones de Javascript

NN 2.0 / IE 3.0 (Con errores y poco confiable) Javascript 1.0

NN 3.0 Javascript 1.1

NN 4.0 / IE 4.0 Javascript 1.2 (En IE conocido como JScript)

NN 6.0 / IE 6.0 Javascript 1.5

Page 3: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Agregando el código al HTML

Ejemplo: <script language="Javascript">

<!--document.write("¡Hola mundo!");// --></script>

Ejemplo: <script language="Javascript1.2">

Page 4: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Agregando el código al HTML

Ejemplo: <script language="JavaScript"

src="functions.js"></script> La última norma de HTML disponible en

http://www.w3.org/TR/html401/interact/scripts.html recomiendo utilizar: <script type="text/javascript"></script>

Page 5: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Agregando el código al XHTML

Ejemplo: <script type="text/javascript">

//<![CDATA[

alert("<Esto es compatible con XHTML>");

//]]></script>

Page 6: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Gramática

Elementos: Variables Operadores Expresiones Declaraciones Objetos

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

Page 7: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Variables y tipos de datos

Se crea una variable global nueva simplemente asignando un valor: nuevaVariable = 5;

Sin embargo, dentro de las funciones si se desea una variable con alcance local se utiliza var: function nuevaFuncion()

{var ciclo=1;total=0;}

Page 8: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Variables y tipos de datos

Javascript no tiene chequeo fuerte de tipo. Tipos

Números Booleanos Hileras Objetos Nulo Indefinido

Los operadores pueden comportarse diferente dependiendo del tipo.

Page 9: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Operadores

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

Page 10: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Operadores

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

Page 11: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Operadores

Booleanos && Y || O ! No

Hileras + Concatenación

Page 12: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Operadores

Asignación = +=,-=,*=,/= &=,|=

Especiales (condición) ? valorSi : valorNo typeof Devuelve el tipo.

Expresiones regulares (JavaScript 1.2)

Page 13: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

if ... else if (condición)

{

declaraciones1;

}

else

{

declaraciones2;

}

Page 14: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

switch switch (expresión) {

case valor : declaración;break;

case valor : declaración;break;

...default : declaración;

}

Page 15: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

for for (declaraciónInicial; prueba; incremento)

{

declaraciones;

}

Page 16: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

do ... while do

{

declaraciones;

}

while (condición);

Page 17: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

while while (condición)

{

declaraciones;

}

Page 18: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

break y continue funcionan para JavaScript como en otros lenguajes.

for in for (variable in objeto)

{declaraciones;

}

Page 19: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Estructuras de control

with with (objeto)

{

declaraciones;

}

Page 20: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Comentarios

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

escribir en varias

líneas */

Page 21: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Funciones

Sintaxis function nombre(arg1,arg2,...)

{

statements;

}

Se recomienda escribir las funciones en el encabezado HTML (<head></head>), ya que este se carga antes del resto del documento.

Page 22: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Objetos

Document Object Model Es un modelo de objetos predefinidos. Esta

jerarquía de objetos depende del navegador.

Page 23: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Objetos

Propiedades: carro.fabricante = "Toyota"

carro.modelo = "Camry"

carro.anyo = "1990"

document.write(carro.anyo);

O: carro['fabricante'] = "Toyota"

carro['modelo'] = "Camry"

carro['anyo'] = "1990"

document.write(carro['anyo']);

Page 24: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Objetos

Métodos: window.close();

Creación: miPerro = new Object();

miPerro.nombre = "Scooby Doo"; Asignación de métodos:

miPerro.Huir = Huir;

Page 25: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Objetos

Constructor: function Perro(nombre) {

this.nombre = nombre;

}

miPerro = new Perro("Scooby Doo");

Page 26: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Eventos

Para ver los posibles eventos de cada etiqueta HTML ver http://w3.org/TR/html401.

Para cada navegador en el sitio web del fabricante se pueden encontrar los eventos disponibles.

Sintaxis básica: <etiqueta atributo1 atributo2

onNombreEvento="código javascript;">

Page 27: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones

Page 28: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones

Ejemplo: try {

ejecute este bloque}catch (error) { ejecute este bloque si hay error}

Page 29: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones

Ejemplo: try {

colores[2] = "rojo";}catch (e) { if (e instanceof TypeError) { alert(“Variable errónea o indefinida…"); }}

Page 30: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones Tipos de excepciones:

EvalError – Se alcanza cuando la función eval() es utilizada en una manera incorrecta;

RangeError – Se alcanza cuando una variable numérica sobrepasa su valor máximo;

ReferenceError – Se alcanza cuando se utiliza una referencia inválida;

SyntaxError – Se alcanza cuando un error de sintáxis ocurre mientras se parsea código JavaScript;

TypeError – Se alcanza cuando el tipo de una variable no es el que se esperaba;

URIError – Se alcanza cuando las funciones encodeURI() o decodeURI() son utilizadas de una manera incorrecta;

Page 31: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones

Ejemplo: try {

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

Page 32: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones (finally)

Ejemplo: try {

ejecute este bloque}catch (error) { ejecute este bloque si hay error}finally { ejecute este bloque siempre}

Page 33: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones (throw)

Ejemplo: if (document.forms[0].edad.valor > 99)

{ throw RangeError;}

Page 34: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Excepciones: (Error)

Ejemplo: ErrorNombre = new Error (“El nombre de usuario

del sistema no empareja con el usuario real.");

throw ErrorNombre;

Page 35: Javascript CI-2413 Desarrollo de aplicaciones para Internet.

Lecturas recomendadas

Norma ECMA Script Netscape's JavaScript Guide Netscape's JavaScript Documentation Library Microsoft JScript Documentation Microsoft Scripting TechnologiesM Microsoft DHTML References Microsoft DHTML Object Model