1 Técnicas de Programación en ClienteLenguaje JavaScript
2 Objetivos Conocer las características de los lenguajes de scripts en general y específicamente de JavaScript Conocer los Tipos de Páginas Web y cuando deben utilizarse. Conocer la sintaxis básica del lenguaje JavaScript
3 Objetivos Conocer el modelo de objetos de JavaScriptConocer el modelo de eventos de JavaScript Conocer técnicas de programación para generar páginas dinámicas en cliente e interactuar con el usuario.
4 Características de Lenguajes de ScriptsSon interpretados no compilados Los errores de sintaxis se detectan en tiempo de ejecución No requieren grandes cantidades de espacio al ser archivos de texto Pueden ser transportados a cualquier plataforma que los soporte Los cambios son más fáciles de hacer Se crean/modifican en cualquier editor de texto
5 Lenguajes de Scripts en Clientes WebLa forma más habitual para dotar de dinamismo(interacción con el usuario y páginas dinámicas) en cliente a una pagina web, es el uso de Scripts (guiones)
6 Características de Lenguajes de Scripts en ClienteLas instrucciones se ejecutan en el momento de la carga de la página web Se pueden incluir tantos scripts como se considere necesario ya sea en el como en cualquier parte del cuerpo Las funciones o scripts se pueden ejecutar como respuesta a un evento generado en el cliente
7 Características de Lenguajes de Scripts en ClienteLiberan al servidor de una gran carga de computo Disminuyen el trafico innecesario por la red Ofrece respuesta inmediata al usuario Permiten la creación dinámica de paginas en el cliente y la validación de datos en formularios Permiten utilizar recursos locales como CPU, RAM,etc.
8 Desventajas de Lenguajes de Scripts en ClienteNo funcionan en cualquier browser Son tecnologías propietarias Interpretados no compilados Restricciones de acceso a los recursos cliente Existen diferentes versiones Son difíciles de depurar
9 Lenguaje JavaScript Es un lenguaje de programación interpretado y basado en objetos que permite crear documentos web dinámicos y tiene la capacidad de capturar y responder a eventos o sucesos generados por el cliente
10 Características: JavaScriptSu sintaxis es similar a la de Java Débilmente tipado Es case sensitivo No existen las constantes Basado no orientado a objetos “Universalidad” de uso Seguridad de ejecución Páginas más ligeras de cargar
11 Sintaxis Básica: JavaScriptUn lenguaje de programación esta formado por palabras básicas denominadas tokens que tienen un significado especial. JavaScript clasifica los tokens en 5 grupos: identificadores, palabras reservadas, literales, operadores y separadores.
12 Sintaxis Básica: IdentificadoresSon nombres que representan una variable, un método o un objeto. Un identificador puede estar compuesto por: Letras (A..Z, a..z) Subguiones o guión bajo ( _ ) Números (0..9)
13 Sintaxis Básica: IdentificadoresRestricciones que deben cumplir: Los identificadores no pueden coincidir con las palabras reservadas del lenguaje. Los identificadores no pueden incluir separadores Deben iniciar con una letra o un subguión
14 Sintaxis Básica: IdentificadoresEjemplos Correctos: Variable1, V, v, Variable_n Incorrectos: 1Variable, buenos dias, false, true, otra;variable
15 Sintaxis Básica: Palabras ReservadasTodo lenguaje se reserva determinados identificadores para usos específicos a los cuales se les denomina palabras reservadas y no pueden ser usadas como identificadores
16 Sintaxis Básica: Palabras Reservadasabstract boolean break byte case cath char class const continue default delete do double else extends false final finally float for function goto if implements import in Instanceof int interface labeled long native new null package
17 Sintaxis Básica: Palabras Reservadasprivate protected public return short static super switch sinchronized this throw throws transient true by typeof var void while with
18 Sintaxis Básica: LiteralesUn literal se utiliza para representar valores fijos y está compuesto por combinaciones de números o de caracteres. Un literal representa un valor que no varía durante la ejecución de un Script.
19 Sintaxis Básica: LiteralesEn JavaScript existen 5 tipos de literales: Enteros Reales Booleanos Strings(cadenas de caracteres) Caracteres especiales
20 Sintaxis Básica: LiteralesEntero: representa un valor numérico entero expresado en base decimal, octal o hexadecimal. Literal decimal: combinación de números del 0 al 9 (el primer dígito no debe ser 0) Ejemplo: 10, 245, 3459, 898
21 Sintaxis Básica: LiteralesEntero: Literal octal: combinación de números del 0 al 7 (el primer dígito debe ser 0) Ejemplo: 07, 020, 0233
22 Sintaxis Básica: LiteralesEntero: Literal hexadecimal: combinación de números del 0 al 9 y letras a..f ó A..F (debe iniciar con los caracteres 0x) Ejemplo: 0xF,0Xf, 0X10, 0xf000
23 Sintaxis Básica: LiteralesReal: Representa un valor numérico real y puede expresarse tanto en notación científica como estándar. Ejemplo Notación Normal: var x=123.56; y = 0.234; var z = ;
24 Sintaxis Básica: LiteralesReal: Notación científica: se puede utilizar la letra e ó E para indicar el exponente y tanto la base como el exponente pueden ir precedidos por el signo + ó - Ejemplos: var numero1=+234E-3; var numero2=25E-2, numero3=-1e-6;
25 Sintaxis Básica: LiteralesBooleano: Son las palabras reservadas true y false(en minúsculas) estos literales tienen asignado el valor 1 y 0 respectivamente. Las expresiones lógicas devuelven uno de estos valores: true o false Ejemplos: var cierto=true, falso=false; return(true);
26 Sintaxis Básica: LiteralesString: Son combinaciones de caracteres (incluyendo la cadena vacía). Un literal de tipo string debe incluirse entre comillas dobles o simples Ejemplos var x1=”Ejemplo1”,x2=’ejemplo2’;
27 Sintaxis Básica: LiteralesCaracteres especiales: Son caracteres que tienen un significado especial para JavaScript. Si deseamos que estos no se interpreten debemos incluir un carácter de escape.
28 Sintaxis Básica: LiteralesCaracteres especiales: \b borra el último carácter \f genera alimentación de línea \n genera el carácter línea nueva \r genera el carácter retorno de carro \t genera un tabulador \\ carácter \ \’ carácter ’ \” carácter ”
29 Sintaxis Básica: OperadoresUn operador es un símbolo que expresa la operación a realizar con los operandos. Operadores: Aritméticos: *, /, +, - ,% Lógicos: &&, ||, ! Relacionales: <, >, <=, >=, ==,!=
30 Sintaxis Básica: SeparadoresLos separadores son caracteres que permiten separar tokens o combinaciones de estos, como por ejemplo expresiones. Separadores: espacio en blanco, la tabulación y el retorno de carro. *Estos no pueden formar parte de un identificador
31 Sintaxis Básica: SeparadoresEjemplos: var x, a, b, c; a = 1; b = 5; c = 6; x = a + b * c;
32 Sintaxis Básica: VARIABLESUna variable es una posición de memoria a la que se le asigna un nombre o identificador y a la que se puede acceder para obtener o modificar el valor almacenado
33 Sintaxis Básica: VARIABLESAmbito de una variable Global: si no esta dentro de ninguna de las funciones. Local: si se ha definido dentro de una función ó es un parámetro. * Cuando se utilizan variables no declaradas JavaScript las declara como globales.
34 Sintaxis Básica: VARIABLESTipos de Variables JavaScript: Tipo Ejemplo number boolean true false string ”abcd” ’cadena’ function typeof isNaN object document window
35 Sintaxis Básica: VARIABLESTipos de Variables JavaScript: Las variables de tipo number pueden contener enteros ó reales Las variables de tipo boolean pueden contener el valor true ó false Las variables de tipo string contienen cadenas de caracteres
36 Sintaxis Básica: VARIABLESTipos de Variables JavaScript: Las variables de tipo function pueden hacer referencia a funciones propias del lenguaje JavaScript o a funciones definidas por el usuario. Las variables de tipo object contienen objetos(propiedades y métodos)
37 Sintaxis Básica: CONSTANTESUna constante es una variable cuyo valor no sufre modificaciones durante la ejecución del programa JavaScript no soporta el concepto de constante Es responsabilidad del programador no modificar los valores constantes
38 Sintaxis Básica: EXPRESIONESUna expresión es una sentencia o conjunto de sentencias que devuelven un único valor. Una expresión puede devolver uno de los cinco tipos de datos que reconoce JavaScript.
39 Sintaxis Básica: EXPRESIONESEjemplos x = 110; fin = false; (x > 15) && (fin==false); document.lastModified;
40 Sintaxis Básica: COMENTARIOSCuando se desarrolla un programa es recomendable documentarlo por medio de comentarios para facilitar su comprensión. JavaScript permite insertar comentarios de una sola línea con el carácter // y de varias líneas iniciando con /* y finalizando con */
41 Sintaxis Básica: COMENTARIOSEjemplo: // Comentario de una sola línea /* Comentario que ocupa más de una línea*/
42 Sintaxis Básica: FUNCIONESUna función es una secuencia de instrucciones caracterizada por un nombre y que puede ejecutarse tantas veces como sea necesario simplemente llamando a la función por el nombre que la identifica
43 Sintaxis Básica: FUNCIONESObjetivos de las funciones JavaScript Estructurar el código de la aplicación Evitar repeticiones de segmentos de código. Permitir que un script se ejecute ante determinados eventos.
44 Sintaxis Básica: FUNCIONESEjemplo:
45 OPERADORES: JavaScriptEn JavaScript existe una variedad de operadores que actúan sobre los distintos tipos de datos. Estos operadores se clasifican en unarios y binarios Operador de asignación =, ejemplos: a = 3 * 4; b = b +1; c = a + b;
46 OPERADORES: JavaScriptOperadores Aritméticos Significado Ejemplo + Suma a + b - Resta a - b - Niega -a * Producto a * b / Cociente a / b % Módulo a % b
47 OPERADORES: JavaScriptOperadores Aritméticos abreviados += b += 3 b =b + 3 -= b -= 3 b =b - 3 *= b *= 3 b =b * 3 /= b /= 3 b =b / 3 %= b %= 3 b =b % 3 ++ ++b, b++ b=b + 1 b, b-- b=b - 1
48 OPERADORES: JavaScriptOperadores de Comparación == igual a == b != distinto a != b > mayor que a > b < menor que a < b >= mayor o igual que a >= b <= menor o igual que a <= b === estrictamente igual a===b !== estrictamente distinto a!==b
49 OPERADORES: JavaScriptOperadores Lógicos && AND ('y' lógica) (a>0) && (b>0) || OR ('o' lógica) (a>0) || (b>1) ! NOT ('no' lógica) !(a>0)
50 OPERADORES: JavaScriptOperadores para strings sign significado ejemplo + concatenar s1 + s2 == ¿son iguales? s1 == s2 != ¿son distintos? s1 != s2 > ¿s1 mayor que s2? s1 > s2 >= ¿s1 mayor o igual que s2? s1 >= s2 < ¿s1 menor que s2? s1 < s2 <= ¿s1 mayor que s2? s1 <= s2
51 OPERADORES: JavaScriptOperador typeof Se utiliza para conocer el tipo de dato con el que se está trabajando. Los distintos tipos de dato que puede devolver el operador typeof son las cadenas: ‘number’, ‘string’, ‘boolean’, ‘function’, ‘object’ y ‘undefined’ Sintaxis: tipo = typeof variable; Ejemplo: (typeof dato==‘number’)? ++dato:”no es número”;
52 OPERADORES: JavaScriptOperadores a nivel de bits & AND bit a bit 2 & 3 => 2 | OR bit a bit 2 | 3 => 3 ^ XOR bit a bit 2 ^ 3 => 1 ~ NOT bit a bit ~2 => 1 >> rotación a derecha 2 << 2 => 8 << rotación a izquierda 134>>2 =>33
53 Estructuras de ControlJavaScript cuenta con las siguientes estructuras de control Condicionales: if...else... Bucles: for, for...in, while, do...while, break y continue Sentencia etiquetada Sentencia with Sentencia switch
54 Estructuras de ControlSentencias condicionales Sintaxis: if (condición) { //instrucciones } [else { }]
55 Estructuras de ControlBucles: for Sintaxis: for ([valor_inicial];[condición];[incremento]) { //instrucciones }
56 Estructuras de ControlBucles: for...in Sintaxis: for ( variable in [objeto|matriz]) { //instrucciones }
57 Estructuras de ControlBucles: while Sintaxis: while (condición) { //instrucciones }
58 Estructuras de ControlBucles: do..while Sintaxis: do { //instrucciones } while(condición)
59 Estructuras de ControlBucles: with Sintaxis: with(objeto) { //instrucciones }
60 Estructuras de ControlBucles: switch Sintaxis: switch(expresión) { case etiqueta: //instrucciones;[break;] [default]: //instrucciones; }
61 Técnicas para insertar ScriptsEn la etiqueta HTML En el encabezado ó en el cuerpo de la una página Web En un Archivo .js
62 Técnicas para insertar ScriptsEn la etiqueta HTML ESTA SUJETA A LA OCURRENCIA DE UN EVENTO Y SU SINTAXIS ES:
63 Técnicas para insertar ScriptsEn el encabezado de la pagina Web { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.es/8408888/25/images/63/T%C3%A9cnicas+para+insertar+Scripts.jpg", "name": "Técnicas para insertar Scripts", "description": "En el encabezado de la pagina Web. //DECLARAR VARIABLES GLOBALES. //DECLARAR FUNCIONES. //INSTRUCCIONES JAVASCRIPT. ", "width": "800" }
64 Técnicas para insertar ScriptsEn un Archivo .JS a) Se debe crear un archivo con el código JavaScript. b) Se debe enlazar las paginas donde se usará el código con el archivo .js por medio de la etiqueta script. La sintaxis es: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.es/8408888/25/images/64/T%C3%A9cnicas+para+insertar+Scripts.jpg", "name": "Técnicas para insertar Scripts", "description": "En un Archivo .JS. a) Se debe crear un archivo con el código JavaScript. b) Se debe enlazar las paginas donde se usará el código con el archivo .js por medio de la etiqueta script. La sintaxis es: ", "width": "800" }