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 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). 2
Javascript (cont.) Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. Se puede utilizar dentro de cualquier lenguaje que traduzca a HTML como PHP, ASP, SVG, etc. 3
Javascript (cont.) 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. 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; } 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 8
Constructor de Objetos function Person() { } var person1 = new Person(); var person2 = new Person(); La función Person() es el constructor del objeto 9
Constructor de Objetos function Person(gender) { this.gender = gender; alert('person instantiated'); } Person.prototype.gender = ''; var person1 = new Person('Male'); var person2 = new Person('Female'); gender es una propiedad de todos los objetos creados con la función Person //display the person1 gender alert('person1 is a ' + person1.gender); 10
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; 11
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. 12
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. 13
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() 14
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 15
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. 16
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. 17
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. 18