JavaScript

Contenido

• Versiones. • Repaso: Case Sensitivity. WhiteSpace & LineBreaks.

Optional semicolons. Comments. Literales. Identificadores Variables. Variable Scope. Palabras reservadas. Operadores. Void. Try Catch Finally. With. Objects. Arrays. Eventos, Input, Objects: DOM.

• Ejercicios-ejemplos.

JavaScript

• JavaScript:

Es un lenguaje imperativo, estructurado e interpretado con capacidad de implementar objetos (Orientado a Objetos).

JavaScript – Historia

• Creado (1995) como Mocha por NetScape (Brendan Eich).

• Mocha -> LiveScript -> JavaScript.• 1995 Netscape 2.0 incorpora soporte Java y renombra

LiveScript a JavaScript (objetivo comercial).• Microsoft JScript. IE 1996. IE 3.0.• W3C: DOM – Especificación JavaScript.• IE 6.0 – NetScape – Opera v7 – Mozilla v1.• 1997 JavaScript como standard de ECMA: ECMAScript.• JavaScript: marca registrada por Oracle.

JavaScript - Actores

JavaScript Versiones

• JavaScript se encuentra oficialmente bajo la organización Mozilla Foundation

• El último standard de ECMA es el ECMA-262 de Junio de 2011.

• La última versión del lenguaje JavaScript 1.8.5 del año 2011.

• Nuevas características del lenguaje son añadidas periódicamente.

Repasando

• Case Sensitive

Palabras reservadas en minúsculas siempre.

Online ONLINE online onLine 4 variables distintas

HTML no es CS valores atributos pueden confundirnos: onClick()

Repasando

• Espacios y saltos de línea

JavaScript ignora espacios, tabulaciones y saltos de línea entre tokens del lenguaje.

Una sola restricción: punto y coma.

Repasando

• Separar instrucciones: punto y coma.

Opcional pero la siguiente instrucción debe seguir en la siguiente línea (salto línea obligatorio)

Repasando

• Comentarios

// comentario para una sola línea

/* Comentario * para

** varias líneas*/

Repasando

• Literal: un valor

12 // número doce1.2 // número“hola” //string‘hola’ //stringtrue // booleano/javascript/gi //expresión regularnull // objeto ausencia

Repasando

• Identificadores para variables/funciones/label

Los identificadores se utilizan para dar nombre a variables, funciones y etiquetas.

El primer carácter debe ser una letra, un guión bajo o el signo $ y a continuación cualquier combinación de estos más números.

No pueden ser palabras reservadas.

Repasando

• VariablesSe declaran con varMúltiple declaración en una misma línea separar

con comas: var a, b=0, c=1;

Scope: alcance de definición de la variable.

Variables Scope

• Las variables son válidas dentro del módulo donde se las declara.

• Una variable global tiene scope global, puede estar definida en cualquier lugar dentro del script.

• Las variables locales son las definidas dentro de funciones. Tienen scope (local) dentro de la misma función.

Variable Scope

var scope = “global”; //Define una variable global

function checkscope() {var scope = “local”; //Define una local

document.write(scope); //Usa la variable local

}

checkscope(); //Imprime “local”

Variable Scope

Se puede omitir var y definir una variable globalemente:

scope = “global”;

Pero las variables locales deben definirse siempre con var

Variable Scope

scope = “global”; //Define una variable globalfunction checkscope() {

scope = “local”; //Cambia el valor de la globaldocument.write(scope); //Utiliza la variable globalmyscope = “local”; //Define variable globaldocument.write(myscope); //Usa la variable global

}checkscope(); //Imprime “locallocal”document.write(scope); //Imprime “local”document.write(myscope); //Imprime “local”

Variable Scope

• Los parámetros de funciones son variables locales.

• Las funciones no saben que variables están definidas como globales: definir todas con var

• Precedencia de Variables:– Las variables locales preceden a las globales.

Variable Scope

var scope = “global”; // variable globalfunction checkscope() {

var scope = “local”; // variable localfunction nested() {

var scope = “nested”; // variable local (otra)document.write(scope); // “nested”

}nested();

}checkscope();

Variable Scope

No hay scope en bloque: todas las variables definidasdentro de una función, no importa donde esténdeclaradas, tienen alcance dentro de la función.

function test(o) {var i=0;if (typeof o == ‘object’) {

var j=0;for (var k=0; k<10; k++) { document.write(k); // 0,1,…,9}document.write(k); // 10

}document.write(j); // 0 o undefined

}

Variable Scope

var scope = “global”;

function f() {alert(scope); // undefinedvar scope = “local”;alert(scope); // local

}

f();

Undefined

Existen 2 tipos de variables “undefined”

Undefined porque no tienen valor asignado

Undefined porque no han sido aún definidas, estas incurren en runtime error

var x; // está definida pero sin valoralert(x); // undefinedalert(u); // Uncaught ReferenceError: u is not defined

Null

• Null es un valor especial que indica “sin valor”.

Cuando una variable contiene el valor “null” significa que la misma no contiene un valor válido para un objeto, array, número, cadena o lógico.

En un contexto boolean, null se trata como false. En un contexto numérico, null se trata como 0. En un contexto string, null se trata como “null”.

Conversión de TiposContexto String Number Boolean Object

Valor

undefined “undefined” NaN false Error

null “null” 0 false Error

Cadena Cadena “numero” / NaN true Objeto cadena

Cadena vacía Cadena 0 false Objeto cadena

0 “0” Número false Objeto número

NaN “NaN” NaN false Objeto número

Palabras Reservadasbreak do if switch typeof

case else in this var

catch false instanceof throw void

continue finally new true while

default for null try with

delete function return

Operadores typeof

• typeof: es un operador unario que determina el tipo de operando.– Evalúa a: number, string y boolean.– Evalúa a object para arreglos, objetos y null.– Evalúa a function para funciones.– Evalúa a undefined operandos indefinidos.

Operadores instanceof

• instanceof: determina si un objeto es una instancia de una clase.– d instanceof Date(); // true si d tipo Date.– a instanceof Array; // true si a es un arreglo.– a instanceof Object; // true si a es un arreglo.

Continuará…

• Void. • Try Catch Finally. • With. • Arreglos & Objetos.• Manejo HTML DOM.• Manejo HTML input.• Manejo HTML Eventos.• Manejo HTML Objetos.

Void

• Operador unario• Descarta el tipo de su operando y devuelve

undefined.

Usos- forzar el valor undefined- <a href="javascript:void window.open();">Open window</a>

throw

Se utiliza para lanzar un error.Un error que deba ser atrapado

específicamente.

Es una señal de que una condición excepcional ha ocurrido.

throw new Error(‘Houston we have…’);

try catch finallyTry {

// sentencias [1]

}

catch(e){

// si error en [1]

}

finally{

// ejecución normal [1]

// break/continue/return [1]

// error capturado en catch

// error no capturado en [1]

// error no capturado en catch

}

With

• Se utiliza para alterar la cadena del scope en variables:– document.images[0].src = “imagen_1.jpg”;– document.images[0].width = 110;– document.images[0].height = 230;

with (document.images[0]) {

src = “imagen_1.jpg”;

width = 110;

height = 230;

}