javascript continuación
DESCRIPTION
Continuación JSTRANSCRIPT
![Page 1: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/1.jpg)
JavaScript
![Page 2: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/2.jpg)
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.
![Page 3: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/3.jpg)
JavaScript
• JavaScript:
Es un lenguaje imperativo, estructurado e interpretado con capacidad de implementar objetos (Orientado a Objetos).
![Page 4: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/4.jpg)
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.
![Page 5: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/5.jpg)
JavaScript - Actores
![Page 6: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/6.jpg)
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.
![Page 7: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/7.jpg)
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()
![Page 8: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/8.jpg)
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.
![Page 9: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/9.jpg)
Repasando
• Separar instrucciones: punto y coma.
Opcional pero la siguiente instrucción debe seguir en la siguiente línea (salto línea obligatorio)
![Page 10: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/10.jpg)
Repasando
• Comentarios
// comentario para una sola línea
/* Comentario * para
** varias líneas*/
![Page 11: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/11.jpg)
Repasando
• Literal: un valor
12 // número doce1.2 // número“hola” //string‘hola’ //stringtrue // booleano/javascript/gi //expresión regularnull // objeto ausencia
![Page 12: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/12.jpg)
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.
![Page 13: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/13.jpg)
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.
![Page 14: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/14.jpg)
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.
![Page 15: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/15.jpg)
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”
![Page 16: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/16.jpg)
Variable Scope
Se puede omitir var y definir una variable globalemente:
scope = “global”;
Pero las variables locales deben definirse siempre con var
![Page 17: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/17.jpg)
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”
![Page 18: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/18.jpg)
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.
![Page 19: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/19.jpg)
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();
![Page 20: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/20.jpg)
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
}
![Page 21: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/21.jpg)
Variable Scope
var scope = “global”;
function f() {alert(scope); // undefinedvar scope = “local”;alert(scope); // local
}
f();
![Page 22: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/22.jpg)
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
![Page 23: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/23.jpg)
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”.
![Page 24: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/24.jpg)
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
![Page 25: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/25.jpg)
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
![Page 26: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/26.jpg)
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.
![Page 27: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/27.jpg)
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.
![Page 28: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/28.jpg)
Continuará…
• Void. • Try Catch Finally. • With. • Arreglos & Objetos.• Manejo HTML DOM.• Manejo HTML input.• Manejo HTML Eventos.• Manejo HTML Objetos.
![Page 29: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/29.jpg)
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>
![Page 30: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/30.jpg)
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…’);
![Page 31: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/31.jpg)
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
}
![Page 32: Javascript continuación](https://reader034.vdocuments.net/reader034/viewer/2022042607/557ae4f6d8b42a590b8b521e/html5/thumbnails/32.jpg)
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;
}