JavaScript

El lenguaje de los navegadores

Víctor Pimentel Rodríguez

lapapelera.org

¿Qué es JavaScript?

Lenguaje de Programación

Interpretado: script
Sintaxis algo similar a Java, pero NO es Java
No es un lenguaje de propósito general
Orientado a eventos
Basado en Objetos (prototype-based)
Orientado para la programación web...
...pero desde el lado del cliente

Perspectiva Histórica

En 1995, Brendan Eich desarrolla Mocha para Netscape Navigator
Tras acuerdos con Sun, a finales de ese año se renombra como JavaScript
En 1996 se implementa en Internet Explorer 3, llamándolo JScript
En 1997 se adopta como estándar ECMAscript, más tarde ISO
Pero la guerra de navegadores ya ha empezado

Guerra de Navegadores

Debido a la rivalidad entre Netscape e IE, cada uno extiende el estándar según le conviene
Problemas: incompatibilidad entre navegadores
Solución temporal: Hacks
Solución definitiva: estándar común
W3C imparcialmente publica el estándar DOM (Document Object Model)

Situación actual

Con la llegada de AJAX, se ha dado un gran impulso a este lenguaje
Una gran parte de las aplicaciones web usan JavaScript
Algunas más intensivamente, por ejemplo, Gmail, Writely, Meebo, TiddlyWiki, etc...
Pero no solo se usa en el desarrollo web
También se usa para personalizar las páginas: GreaseMonkey (User Scripts)
Y como hay varios motores liberados, varios proyectos lo han incluido.

Primer contacto

Cómo escribirlo

Desde cualquier editor de texto normal
Se inserta en el HTML mediante etiquetas
El código se escribe:

Dentro del HTML
O en un archivo externo y se indica el archivo

Para archivos externos, la extensión .js es la normal y aconsejada
Los archivos externos ayudan a separar Contenido, Diseño y Comportamiento

Dónde escribir JavaScript (I)

Directamente sobre un elemento HTML

Como enlaces. Ejemplo:
<a href="javascript:history(-1);">Volver atrás</a>
Capturando los eventos de un elemento: onload, onmouseover, onclick, onsubmit, etc... Ejemplo:
<a href="#" onmouseover="history(-1);">Volver atrás</a>

Dónde escribir JavaScript (II)

Directamente sobre HTML, con la etiqueta <script>
Mejor solución, se consigue JavaScript no intrusivo
Ejemplo:
<script language="javascript" type="text/javascript"> // Código JavaScript </script>

Dónde escribir JavaScript (III)

Indicando el archivo que contiene el código JavaScript
La mejor solución, la más limpia y la menos intrusiva
Ejemplo:
<script type="text/javascript" src="http://loquesea.com/libreria.js"></script>

Sintaxis básica

Variables y tipos

Es un lenguaje débilmente tipado
Los tipos no se especifican, y pueden cambiar
Para declarar una variable se utiliza la palabra reservada var:

var miVariable = 5

Pero no es necesaria, podemos trabajar directamente asignando un valor:

miVariable = "hola"

Pero se aconseja ponerla siempre, sobre todo en funciones
Las constantes no existen

Variables y tipos: Tipos básicos (I)

Hay 3 tipos (o valores) básicos:
Números: 5, 4.15, 1.2e100...
Cadenas: "hola", 'mundo', "a"
Booleanos: true y false
También hay otros valores, como null o undefined

Variables y tipos: Tipos básicos (II)

Una misma variable puede ser de diferente tipo en diferentes puntos: miVar = "50"; miVar2 = miVar + 35; // 5035 miVar3 = miVar - 35; //15 miVar = false;
JavaScript hace los cambios automáticamente por nosotros

Variables y tipos: Alcance de las variables

Las variables pueden ser globales, escritas fuera de bloques
O locales a un bloque:

function cambiaValor(){ x=100; } function noCambiaValor(){ var x=40; } x=15; // global cambiaValor(); // ahora x vale 100 noCambiaValor(); //sigue valiendo 100

Sentencias de control

Las usuales: if, for, while, switch...
Algunas específica de objetos (with, for...in)
También hay capturas de excepciones: try{...}catch{...}

Funciones

Ya hemos visto cómo son: function nombre(argumento1, argumento2...){ //código de la función}
Pueden devolver un valor o no
Podemos especificar los argumentos que queramos: número, tipo...:
function listar (separador) { var lista = ""; for(var i = 1; i < arguments.length; i++){ lista += arguments[i] + separador; } return lista; } listar ( ", " , "peras", "naranjas", "manzanas" );

Objetos

Tipo complejo de datos
Esos datos pueden ser tipos básicos u otros objetos
También pueden tener funciones...
...pero en realidad las funciones también son objetos
Se ordenan mediante pares key=>value
Más adelante veremos cómo trabajar con ellos

Literales

Son constantes y cada tipo tiene su propia sintaxis
Tipos básicos:

Números: 42.21
Cadenas: "algo corto"
Booleanos: true

Arrays: alumnos=["hola", 2 , "mundo", estaMadura]
Objetos: pera={color: "verde", : 10, madura: estaMadura }
Funciones: estaMadura=function(){return color=="verde"}

Objetos

Creación de Objetos

No están basados en clases sino en prototipos
Su constructor es casi exactamente como una función:


function Coche (marca,modelo,km) {

this.marca = marca;

this.modelo = modelo;

this.km = km;

this.recorrer = function(km) {this.km += km};

}

A partir de ahora, se crearán objetos mediante new: var coche = new Coche("Honda", "Civic", 1500);

Acceso a sus propiedades

Hay tres formas:

Especificando su nombre

coche.marca = "Seat";
coche.recorrer(150);

Especificando su posición, como si fuera un array


coche[1] = "Ibiza";

coche[2](300);

Mezclándolo


var nuevo = coche["marca"] + coche["modelo"];

coche["recorrer"](300);

Extendiendo Objetos

Para añadir métodos o atributos a toda la clase se utiliza prototype Coche.prototype.año=null coche.año = 2002
Para eliminarlos de un objeto concreto, podemos usar delete delete coche.modelo
Para heredar los métodos de otro objeto también se usa prototype Coche.prototype = new Vehiculo;
Como solo tenemos un objeto prototype, no existe la herencia múltiple

Objetos de wrap

Son objetos que "cubren" a los tipos básicos, para añadir más funcionalidad.
Por ejemplo: cadena=new String("otra cadena");
Cadenas: String, Números: Number, Booleanos Boolean
Objetos: Object, Arrays: Array, Funciones: Function

Otros objetos predefinidos

Math: métodos estáticos que nos facilitan operaciones y constantes matemáticas. Math.PI, Math.sqrt(), Math.random() , etc...
Date: hace de calendario y gestor de tiempo
RegExp: para trabajar con expresiones regulares

Su literal es /expresion/

DOM

DOM, una api para todos

DOM (Document Object Model) como api para HTML y XML
En principio para cualquier lenguaje, pero JavaScript es el más usado
Sirve para acceder a, crear, modificar los elementos de un documento estructurado
Hay varios niveles, para catalogar las implementaciones:

Nivel 1: La especificación más básica, incluye la navegación por el árbol DOM, inserción de elementos y tratamiento de elementos HTML
Nivel 2: Un poco más amplio, incluye los XML namespaces, vistas filtradas y el manejo de eventos
Nivel 3: Incluye seis subniveles, pero es bastante reciente y pocos navegadores lo aceptan (a cachos).

Árbol DOM

Si los elementos HTML tienen hijos, hermanos, padres, se anidan...
...habrá que crear un árbol con todos esos elementos: árbol DOM
Pero también hay otros métodos para acceder a todos los elementos con algo en común (etiqueta, clase, etc...)

Objetos de DOM

Los objetos importantes que podemos usar gracias a DOM:
element, que son cada uno de los elementos HTML y XML.
document, que es el objeto que referencia al documento HTML/XML
window, que referencia a la propia ventana (ya que es el objeto por defecto, sus métodos y atributos también funcionarán si no ponemos window delante)
event, que contiene toda la información sobre un evento
style, que nos servirá para cambiar los estilos de nuestros elementos

Window: Propiedades

window.location: objeto Location con la información de la url actual, pudiendo modificarla
window.navigator: información del navegador
window.screen: tamaño de la ventana,
window.statusbar/sidebar/toolbar: información sobre las barras de herramientas

Window: Métodos

window.blur/focus: quita o da el foco a la ventana
window.open/close: cierra las ventanas
window.alert/confirm/openDialog: abre peuqeñas vetanas de diálogo
window.print: imprime el documento actual

Document: Propiedades

document.referrer: url del referrer, si la hubiera
document.forms: collection con todos los formularios del documento
document.images: collection con todas las imágenes del documento
document.anchors: devuelve todos los enlaces internos
document.styleSheets: devuelve las referencias a todas las hojas de estilo de la página

Document: Métodos

document.createElement/document.createAttribute: crea un nuevo elemento/atributo
document.createEvent: crea un nuevo evento
document.getElementById/Name: devuelve el elemento cuya id/name coincida
document.getElementsByTagName: collection de todos los elementos con esa etiqueta
document.write: escribe un texto en el documento

Element: Propiedades

className: nombre de a clase; id: nombre de su id; tagName la etiqueta (p, a, img, table...)
childNodes: collection con todos los hijos del elemento
focus/blur: quita o da el foco al elemento
getElementsByTagName: collection con todos los elementos hijos que tengan ese tag
hasAttribute/setAttribute: para trabajar con sus atributos

Element: Métodos

addEventListener: añade un escuchador a nuestro elemento, es la mejor forma de hacerlo
appendChild: añadimos un hijo al elemento
parentNode: padre del elemento
textContent/innerHTMLdevuelven el contenido de un elemento

AJAX

AJAX, la palabra de moda

Ya hemos repetido que JavaScript es un lenguaje interpretado del lado del cliente
Lo que significa que deberá llamar a otro lenguaje en el lado del servidor si quiere recoger datos
Normalmente esto se traducía en tener que recargar la página
AJAX, Asynchronous JavaScript and XML, hace posibles las peticiones sin tener que recargar
Además, también puede trabajar con XML
Todo se basa en XMLHTTPRequest, que es un objeto que implementó Internet Explorer

Cómo establecer una petición HTTP (I)

Para crear el objeto se necesita un pequeño hack, ya que IE requiere ActiveX para cargarlo:
if (window.XMLHttpRequest){ // Todos http_request = new XMLHttpRequest(); }else if(window.ActiveXObject){ // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
Una vez creado, debemos especificar qué función va a tratar la información cuando esté lista:
http_request.onreadystatechange = funcionALlamar;

Cómo establecer una petición HTTP (II)

Ya está listo para hacer la petición: open y send
open (modo, url, asíncrono);
send (datos)
Modo = GET o POST, y asíncrono será true, de lo contrario el navegador se bloquearía hasta que le llegase la respuesta
Si el modo es GET, se pasa la url (relativa/absoluta) con las cadenas detrás
Si el modo es POST, se pasa la url normal
send siempre se debe enviar, si es POST contendrá los datos, pero si es GET será null

Recogiendo la respuesta

Podemos trabajar con los datos de 2 maneras: responseText o responseXML
La función que escucha será parecida:
function hacerAlgo(http_request) { if (http_request.readyState == 4) { if (http_request.status == 200) { ... http_request.responseText ... } else { // problema } } }

JSON

JSON significa JavaScript Object Notation
Simplemente, es la notación que vimos antes, en forma de literales
Es una forma rápida de entender por las personas, y de procesar por las máquinas, y encima es pequeña
Ya hay librerías (o pequeñas clases) para casi todos los lenguajes importantes
Estas librerías facilitan el paso de datos entre el lenguaje del servidor y JavaScript
Si usamos AJAX y nos devuelven un objeto JSON, podremos leerlo fácilmente con la función eval() pero es peligroso, mejor un parser JSON

Librerías externas

Prototype

Prototype no es solo una librería, es todo un framework
Se ha hecho famoso por su integración en RubyOnRails
Intenta ser un framework cross-browser
Provee de funciones Rubyistas
Integra una clase Ajax muy poderosa y fácil de usar
Perfecto para hacer otras librerías sobre él (LightBox, WindowClass, etc...)

Script.aculo.us

script.aculo.us está basada en Prototype, ahora sigue un desarrollo paralelo
Es muy visual
Se centra en efectos, drag&drop, etc...
Pero puede resultar muy pesada
moo.fx es otra librería de efectos muy ligera, con efectos visuales pero muy sencillos

JavaScript, el lenguaje de los navegadores

Víctor Pimentel Rodríguez

JavaScript

El lenguaje de los navegadores

Víctor Pimentel Rodríguez

lapapelera.org

¿Qué es JavaScript?

Lenguaje de Programación

Perspectiva Histórica

Guerra de Navegadores

Situación actual

Primer contacto

Cómo escribirlo

Dónde escribir JavaScript (I)

Dónde escribir JavaScript (II)

Dónde escribir JavaScript (III)

Sintaxis básica

Variables y tipos

Variables y tipos: Tipos básicos (I)

Variables y tipos: Tipos básicos (II)

Variables y tipos: Alcance de las variables

Sentencias de control

Funciones

Objetos

Literales

Objetos

Creación de Objetos

Acceso a sus propiedades

Extendiendo Objetos

Objetos de wrap

Otros objetos predefinidos

DOM

DOM, una api para todos

Árbol DOM

Objetos de DOM

Window: Propiedades

Window: Métodos

Document: Propiedades

Document: Métodos

Element: Propiedades

Element: Métodos

AJAX

AJAX, la palabra de moda

Cómo establecer una petición HTTP (I)

Cómo establecer una petición HTTP (II)

Recogiendo la respuesta

JSON

Librerías externas

Prototype

Script.aculo.us

Behaviour

Presentacular

Otros Recursos

¡Esto es to..., esto es to...

esto es todo amigos!