Javascript

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

Agregando el código al HTML • Ejemplo: • <script language="Javascript">  </script> • Ejemplo: • <script language="Javascript1.2">

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>

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

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

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; }

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.

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

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

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

Operadores • Asignación • = • +=,-=,*=,/= • &=,|= • Especiales • (condición) ? valorSi : valorNo • typeof Devuelve el tipo. • Expresiones regulares (JavaScript 1.2)

Estructuras de control • if ... else • if (condición) { declaraciones1; } else { declaraciones2; }

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

Estructuras de control • for • for (declaraciónInicial; prueba; incremento) { declaraciones; }

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

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

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

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

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 */

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.

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

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']);

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

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

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;">

Excepciones

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

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

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;

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

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

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

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

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

Javascript

Javascript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT