Javascript

Overview Development

PONENTE

JESÚS M. GARCÍA TORRES (Gartox)

Ingeniero de Software.

agenda

HTML5 y la evolución de la web
¿Qué es Javascript?
¿Como funciona?
Conceptos básicos

html5 y la evolución de la web

90's

Internet
HTML 1, 2 , 3 ,4
CSS
Páginas web
StarMedia...
Es tan bonito revivir el pasado...
Tablas :(

2000's

Yahoo
Google
Amazon
Maquetación con Div's
Hi5
MySpace

¿Y eso que ch@|#@#%! tiene que

ver con JS?

XMLHTTPRequest
AJAX
Peticiones asíncronas
Cambio al momento de crear sitios web
Aplicaciones corriendo en web.

¿Que tiene que ver lo anterior?

2006 - en adelante

Web 2.0
Evolución de aplicaciones en web.
Cambio de paradigma en desarrollo web
PHP time's
Facebook. (PHP a su máxima expresión)
Google Docs, Gmail, Gtalk, etc.
Real time applications
Experiencias Web

HTML5

"Nuevo estándar de marcado"
Semántica
Sockets
WebWorkers
SessionStorage
LocalStorage
Canvas

¿Como funciona esto?

Simple.
Esteroides al navegador
Aplicaciones funcionando del lado del cliente.
API totalmente rediseñada
API extensa

¡Mira Mamá.. sin manos!

O lo que es igual...

No más plugins para hacer las cosas
Video
Audio
WebApps
Push notifications

Javascript

Creado por netscape

(Se acuerdan cuando usábamos netscape)

Lenguaje de Scripting multi plataforma.
Orientado a objetos
Pequeño y liviano

Javascript

Se ejecuta en el navegador

(Client-side Javascript)

Se ejecuta en el servidor

(Server-side Javascript)

El lenguaje incomprendido de la web.

Javascript

Mitos

Es para hipster's
No te lo tomes en serio
Cualquiera puede hacerlo.
¿Es un lenguaje de verdad?
Solo sirve para imprimir alertas

```
alert("Mira, sin manos"); 
```

¿Por que debemos aprender

Javascript?

Tecnologías interesantes
Si te vas a dedicar a desarrollo web
Indispensable en casi cualquier sitio
¿Javascript es mejor que JAVA?
o ¿ mejor que PHP?
¿mejor que Python?.....

NO. Al igual que los demás sirve para resolver ciertos problemas.

No se trata de aprender un lenguaje se trata de aprender a resolver problemas. El código es implementación de soluciones.

Si resuelves el problema, solo debes escribir en la sintaxis correcta.

- JMGT

Bah... ni lo ha de usar nadie

Google
Amazon
LinkedIn
Yogome
Mozilla
Yahoo
De hecho casi todos los sitios web lo usan.

¿Y... como se come?

Sencillo, abre tu navegador (Chrome) y activa las herramientas de desarrolladores y escribe lo siguiente.

console.log("¡Como hacer calor!") ;alert("Una alerta en la ventana");

y así empezamos

//Definamos una clase var Personas = function (){    this.nombre = '';    this.apellido_paterno = '';        function personas()}; var pepito = Personas();

funciones

 //Múltiples formas function pintarAlerta() {    console.log("Alerta se esta pintando");    alert("Hola a todos");}
// Definiendo una variablevar miFuncion = function () { ....};
//Como objetovar miObjeto = {  miMetodo: function (){  .... }}

closures

Tipo especial de dato
Permite conservar un entorno en el que se crea una función.

 function enciendeAlarma(){
    var hora = "8:00 AM";

    function mostrarHora(){
        alert(hora);
    }

    return mostrarHora();
}

var miDespertador = enciendeAlarma();

JSON

Javascript Object Notation
Formato útil para envió de información
Útil en todo momento

 var Medico = {    nombre : 'Ruben',    apellido_paterno: 'Puig',    apellido_materno: 'Uc',    especialidad: 'Pediatra'}

en el servidor

NodeJs
Express
Sockets

npm install

var express = require('express'),
   app = express();

   app.listen(8000);

un ejemplo más real en vivo

gracias

@gartox

garciatjm@gmail.com