Lo básico de Javascript. ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes

Tamaño: px

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

Download "Lo básico de Javascript. ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes"

César Castillo San Martín
hace 8 años
Vistas:

1 Lo básico de Javascript ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes

2 Javascript Permite extender las capacidades de HTML Se utiliza principalmente del lado del cliente para mejoras en la interfaz de usuario y para crear páginas web dinámicas También hay una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

JavaScript del lado del servidor (Server-side JavaScript o SSJS).

3 Javascript (cont.) Se puede utilizar dentro de cualquier lenguaje que traduzca a HTML como PHP, ASP, SVG, etc. Es un lenguaje interpretado que se embebe en una página Web: las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas. Adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

Es un lenguaje interpretado que se embebe en una página Web: las instrucciones las analiza y procesa el

4 Ejemplo simple <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ejemplo sencillo</title> <h1 id="header">esto es JavaScript</h1> <script> alert( Bienvenido a los ejemplos de javascript ); </script> </head> <body>/*...*/</body> </html>

5 Javascript (cont.) Se define como: imperativo y estructurado, orientado a objetos, basado en prototipos,, débilmente tipado y dinámico.

6 Imperativo y estructurado Variables cuyo alcance es el de la función donde se definieron var x; // define la variable x var y = 2; // define la variable y y le asigna el valor 2 Estructuras de control: if, bucles for, sentencias switch, etc. if (a < b) { t = b; b = a; } while (b!== 0) { b = a % b; a = t; }

variable y y le asigna el valor 2 Estructuras de control: if, bucles for,

7 Tipado dinámico El tipo está asociado al valor, no a la variable. var x = 15; // Number (int) declaration var y = 15.6 // Number (float) declaration var z = 'Hello World' // String declaration var arr = []; // Array literal declaration var obj = {}; // Object literal declaration console.log( typeof( x ) ); // number console.log( typeof( z ) ); // string console.log( typeof( arr ) ); // object console.log( typeof( obj ) ); // object

6 // Number (float) declaration var z = 'Hello World' // String declaration var arr = []; // Array literal

8 Orientado Objetos Los objetos son arrays asociativos obj.x = 10 y obj['x'] = 10 son equivalentes Las propiedades y sus valores pueden ser creados, cambiados o eliminados en tiempo de ejecución. var triangulo = new Object(); // el objeto triangulo es un objeto vacío triangulo.ladoa = 3; // triangulo tiene una nueva propiedad ladoa cuyo // valor es 3 triangulo.ladob = 4; triangulo.ladoc = 5;

cambiados o eliminados en tiempo de ejecución.

9 Orientado Objetos Agrega el método getarea al objeto triangulo triangulo.getarea = function () { // Devuelve el área de un triángulo var semiperimetro = (this.ladoa + this.ladob + this.ladoc) / 2; var valor = semiperimetro * (semiperimetro - this.ladoa) * (semiperimetro - this.ladob) * (semiperimetro - this.ladoc); return Math.sqrt( valor ); }; // El punto y coma aquí es obligatorio.

ladoa + this.ladob + this.ladoc) / 2; var valor = semiperimetro * (semiperimetro - this.

10 Prototipos JavaScript usa prototipos en vez de clases para el uso de herencia. Un prototipo es un objeto que se copia para crear otros objetos Se realiza a través de Funciones como constructores de objetos Las funciones también se comportan como constructores.

11 Prototipos (cont.) Prefijar una llamada a la función con la palabra clave new Crear una nueva instancia de un prototipo, que heredan propiedades y métodos del constructor // Una simple función function Saludator() { alert("saludos factory!!") } // Y una simple llamada Saludator() // Un nuevo objeto a partir de su "clase prototipo var saludo = new Saludator()

un prototipo, que heredan propiedades y métodos del constructor // Una simple función

12 Prototipos (cont.) var Saludator = function (nom) { this.nombre = nom this.saluda = function() { alert("hola "+plural(this.nombre)) } function plural(n) { return n + "s" } } var obj1 = new Saludator("mundo") obj1.saluda() obj1.plural() // fallaría porque plural() es privado

nombre)) } function plural(n) { return n + "s" } } var obj1 = new

13 Funciones como métodos A diferencia de muchos lenguajes orientados a objetos, no hay distinción entre la definición de función y la definición de método. La distinción se produce durante la llamada a la función; una función puede ser llamada como un método. Cuando una función es llamada como un método de un objeto, la palabra clave this, que es una variable local a la función, representa al objeto que invocó dicha función.

La distinción se produce durante la llamada a la función; una función puede ser llamada como un método.

14 Funciones de primera clase A las funciones se les suele llamar ciudadanos de primera clase; son objetos en sí mismos. Una función javascript propiedades y métodos, como.call() y.bind(). Una función anidada es una función definida dentro de otra. Esta es creada cada vez que la función externa es invocada.

Una función javascript propiedades y métodos, como.call() y.bind().

15 Parámetros en las funciones Un número indefinido de parámetros pueden ser pasados a la función. La función puede acceder a ellos a través de los parámetros o también a través del objeto local arguments.

La función puede acceder a ellos a través de los

Documentos relacionados

Lo básico de Javascript

Lo básico de Javascript ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Javascript Permite extender las capacidades de HTML Se utiliza principalmente del lado del cliente para