JavaScript desde Cero

JavaScript desde Cero

Juan Segu - Junio 2011


El lenguaje JavaScript

AJAX

Frameworks

Futuro


Lenguaje para crear acciones

Click en un botn

Carga de una pgina web

Pasar por encima de una imagen

Cada vez que se presione una tecla


Agrega funcionalidad al HTML


Hola Mundo

document.write("Hola Mundo");


Lenguaje de programacin interpretado

NO se compila


Se utiliza principalmente del lado del cliente:Importancia del navegador web


Sintaxis similar a C y algunos nombres del lenguaje Java

Qu es el lenguaje JavaScript?

Java y JavaScript NO es lo mismo

Compilador JavaScript es interpretado

Orientado a Objetos

Potencia

Propsito JavaScript para web


JavaScript y VBScript

Crear y editar cdigo JavaScript

Editores convencionales

Otros editores

Usos de JavaScript

Cuadros de dilogo

CONFIRM

alert('Are you certain that you want to delete this product?');

ALERT

alert('This alert dialog tells you something important');

Usos de JavaScript

Efectos de texto

TEXTOS ANIMADOS

Texto haciendo olas:http://www.mundojavascript.com/animaciones/texto_haciendo_olas.shtml

alert('Are you certain that you want to delete this product?');

MARQUESINAS

Scroll de texto simple:http://www.mundojavascript.com/marquesinas/

- Botn derecho del ratn bloqueado

Usos de JavaScript

Formularios

VALIDACIN

Validacin de formularios:http://www.desarrolloweb.com/articulos/ejemplos/javascript/validar-fomulario.html

Ejemplo Web

www.acceseo.com

www.roverecocinas.com

Aprender JavaScript

Manuales de JavaScript recomendado:http://www.desarrolloweb.com/manuales/20/

Algunos ejemplos

http://www.htmlpoint.com/

http://www.elcodigo.net/

Limitaciones de JavaScript

No llegaba a ser un lenguaje imprescindible

JavaScript un poco soso

AJAX

y apareci AJAX

y apareci AJAX

y apareci AJAX

AJAX

No es una tecnologa sino una tcnica

AJAX

VENTAJAS DE UTILIZAR AJAX

Basado en estndares abiertos

Usabilidad, evitamos la recarga innecesaria de una pgina

Multinavegador y multiplataforma

Tiempos de espera menores

AJAX

DESVENTAJAS DE UTILIZAR AJAX

Falta de soporte en algunos navegadores(antiguos)

Demasiado cdigo hace lento el navegador

Cambia el funcionamiento de las pginas, algunos usuarios pueden no entender como va

Funcionamiento de AJAX

No es una tecnologa sino una tcnica

AJAX

Una parte muy elevada de las pginas webs utiliza JavaScript

Ventajas de utilizar AJAX

www.itmahotels.com

www.portamaticonline.com

Grandes ejemplos de AJAX

Google Maps

Gmail

Google

Flickr

Facebook

FRAMEWORKS

Qu es un framework?

Un conjunto estandarizado de conceptos, prcticas y criterios para enfocar un tipo de problemtica particular

WIKIPEDIA

Dnde encontraremos un FW?

Dnde encontraremos un FW?

JavaScript Frameworks

Ventajas de utilizar FW

Hacer mucho con muy poco

Ventajas de utilizar FW

Menor tiempo de desarrollo

Menos cdigo

Cdigo ms limpio

Funciones optimizadas

Si existe algo hecho, por qu no usarlo?

Cmo elegir un framework?

Factores a tener en cuenta:

Facilidad de uso

Comunidad

Velocidad

Compatibilidad


Facilidad de usoCul elegiras?


Comunidad

http://wappalyzer.com/stats/cat/JavaScript%20frameworks

http://trends.builtwith.com/javascript


Velocidad


Compatibilidad con navegadores

http://www.bestwebframeworks.com/

Algunos Frameworks

Framework recomendado

jQueryhttp://www.jquery.com/

jQueryhttp://www.jquery.com/

jQueryUIhttp://www.jqueryui.com/

Ejemplo jQuery

jQuery Hello World

$(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery");});This is Hello World by HTML

Frameworks para mviles?

http://www.jquerymobile.com/

Webs con jQuery

SPALMhttp://www.spalm.es/

PREVENTI SHOEShttp://www.preventishoes.com/blog/

NOW YOUhttp://www.now-you.eshttp://www.acceseo.net/nowyou

FUTURO DE JAVASCRIPT

Futuro de JavaScript



Adobe apuesta por HTML5?

http://labs.adobe.com/technologies/wallaby/


l ya lo anticip


FLASH

HTML5


Algunos ejemplos

https://developer.mozilla.org/es/demos/

http://www.20thingsilearned.com/

http://media.chikuyonok.ru/ambilight/


Algunos ejemplos

http://html5demos.com/

http://del.icio.us/juansegui/html5http://del.icio.us/juansegui/javascripthttp://del.icio.us/juansegui/ajax

http://www.addyosmani.com/resources/googlebox/

http://www.romancortes.com/ficheros/pacman_css.html


@juansegui

@acceseo

Gracias por vuestra atencin

Muokkaa otsikon tekstimuotoa napsauttamalla

Muokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso

JavaScript desde Cero

Technology

Transcript of JavaScript desde Cero