JavaScript. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR

Tamaño: px

Comenzar la demostración a partir de la página:

Download "JavaScript. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR"

Margarita de la Fuente de la Cruz
hace 7 años
Vistas:

1 JavaScript CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR

2 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

3 Agregando el código al HTML Ejemplo: <script language="javascript">  </script> Ejemplo: <script language="javascript1.2">

4 Agregando el código al HTML Ejemplo: <script language="javascript" src="functions.js"></script> La última norma de HTML disponible en html recomienda utilizar: <script type="text/javascript"></script>

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

6 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

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

8 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.

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

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

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

12 Operadores Asignación = +=,-=,*=,/= &=, = Especiales (condición)? valorsi : valorno typeof Devuelve el tipo. Expresiones regulares (JavaScript 1.2)

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

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

15 Estructuras de control for for (declaracióninicial; prueba; incremento) { declaraciones;

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

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

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

19 Estructuras de control with with (objeto) { declaraciones;

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

21 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.

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

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

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

25 Objetos Constructor: function Perro(nombre) { this.nombre = nombre; miperro = new Perro("Scooby Doo");

26 Objetos (orientados a prototipo) var objeto = { ; /* '= {' es equivalente a '= new Object()' */ alert( objeto.tostring() ); Todos los objetos Object reciben Object.prototype (Object. proto ).

27 Extensión de objetos nativos String.prototype.repeat = function(times) { return new Array(times+1).join(this) alert( "a".repeat(3) ) // aaa

28 Heredando de objetos nativos // constructor function MyArray() { this.stringify = function() { return this.join(', ') // Make sure that (new MyArray) has the right proto MyArray.prototype = Array.prototype // Test var myarr = new MyArray() myarr.push(1) myarr.push(2) alert( myarr.stringify() ) // 1, 2 alert( myarr.length ) // 2 in all except IE

29 Eventos Para ver los posibles eventos de cada etiqueta HTML ver 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;">

30 Excepciones

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

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

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

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

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

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

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

38 Guía de estilo JavaScript Guía de estilo de Airbnb

39 Bibliotecas JavaScript Debido a la gran diferencia de implementación JavaScript de navegadores es mucho más productivo utilizar bibliotecas JavaScript que potencien las prestaciones del navegador. Algunas de estas bibliotecas son: prototype ( jquery ( Ext JS ( AngularJS ( React (

40 jquery vs prototype jquery es actualmente la biblioteca JavaScript más popular. Utiliza selectores CSS lo que la ha convertido en la biblioteca preferida por diseñadores o desarrolladores que ya conocen CSS. prototype es mucho menos popular. Se le ha criticado por extender el DOM. Sin embargo tiene un API mucho más elegante que el de jquery (

41 Comparación general Wikipedia tiene una tabla comparativa de todas las bibliotecas JavaScript. AngularJS tiene críticos fuertes en cuanto a su modelo por las implicaciones de rendimiento. Recientemente una de las más mencionadas es React, sin embargo su rendimiento también es cuestio nable.

42 Tendencia reciente Ahora que ha pasado la idealización de las bibliotecas JavaScript que permitían un mayor nivel de abstracción hay una tendencia hacia escribir simplemente JavaScript o como le llaman Vanilla Javascript. Se pueden encontrar muchos ejemplos. Inclusive los últimos estándares ECMAscript han mejorado muchísimo el lenguaje. Por ejemplo: Object.observe().

43 Modernizr Modernizr es una biblioteca JavaScript que detecta características HTML5 y CSS3 en el navegador del usuario.

44 Un ejemplo de polyfill (1) Incluir el CSS de jquery UI ( <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothne ss/jquery-ui.css" /> Incluir el código de jquery UI: <script src="//code.jquery.com/ui/1.10.3/jqueryui.js"></script>

45 Un ejemplo de polyfill (2) if (!Modernizr.inputtypes.date) { $(function() { $( "#date" ).datepicker({ mindate: "+2D", showbuttonpanel: true ); );

46 Lecturas recomendadas Norma ECMA Script Netscape's JavaScript Guide Netscape's JavaScript Documentation Library Microsoft JScript Documentation Microsoft Scripting Technologies Microsoft DHTML References Microsoft DHTML Object Model

47 Gracias por su atención! Preguntas?

Documentos relacionados

Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella

Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella Contenido Objetivo Introducción Operadores Tipos de datos Funciones Networking armpower.blogs.upv.es 2 Objetivo Aprender a instalar Node.js Conocer