1. JavaScript, HTML5, CSS3 Ivan Alberto Morales Freddy Bueno
Jonathand Alberto Serrano Serrano
2. Javascript JavaScript es un lenguaje de programacin
interpretado, dialecto del estndar ECMAScript. Se define como
orientado a objetos, basado en prototipos, imperativo, dbilmente
tipado y dinmico. Se utiliza principalmente en su forma del lado
del cliente (client-side), implementado como parte de un navegador
web permitiendo mejoras en la interfaz de usuario y pginas web
dinmicas.
3. Caractersticas Es un superconjunto de la especificacin
ECMAScript (ECMA-262) Edicin 3. Extensiones del lenguaje, que
incluyen parcialmente soporte para ECMAScript para XML (E4X)
(ECMA-357), JavaScript soporta gran parte de la estructura de
programacin de C (por ejemplo, sentencias if, bucles for,
sentencias switch, etc.). En JavaScript los puntos y coma que
finalizan una sentencia pueden ser omitidos
4. JavaScript est formado casi en su totalidad por objetos. Los
objetos en JavaScript son arrays asociativos A las funciones se les
suele llamar ciudadanos de primera clase; son objetos en s mismos.
Como tal, poseen propiedades y mtodos, como .call() y .bind(). Una
funcin anidada es una funcin definida dentro de otra. Esta es
creada cada vez que la funcin externa es invocada. JavaScript usa
prototipos en vez de clases para el uso de herencia.
5. Las funciones tambin se comportan como constructores.
Prefijar una llamada a la funcin con la palabra clave new crear una
nueva instancia de un prototipo, que heredan propiedades y mtodos
del constructor (incluidas las propiedades del prototipo de Object)
JavaScript normalmente depende del entorno en el que se ejecute
(por ejemplo, en un navegador web) para ofrecer objetos y mtodos
por los que los scripts pueden interactuar con el "mundo
exterior,
6. Un nmero indefinido de parmetros pueden ser pasados a la
funcin. La funcin puede acceder a ellos a travs de los parmetros o
tambin a travs del objeto local arguments. A diferencia de muchos
lenguajes orientados a objetos, no hay distincin entre la definicin
de funcin y la definicin de mtodo. Ms bien, la distincin se produce
durante la llamada a la funcin; una funcin puede ser llamada como
un mtodo. Cuando una funcin es llamada como un mtodo de un objeto,
la palabra clave this, que es una variable local a la funcin,
representa al objeto que invoc dicha funcin.
7. Al igual que muchos lenguajes de script, arrays y objetos
(arrays asociativos en otros idiomas) pueden ser creados con una
sintaxis abreviada. De hecho, estos literales forman la base del
formato de datos JSON. JavaScript se encuentra oficialmente bajo la
organizacin de Mozilla Foundation, y nuevas caractersticas del
lenguaje son aadidas peridicamente.
8. DOM La creacin del Document Object Model o DOM es una de las
innovaciones que ms ha influido en el desarrollo de las pginas web
dinmicas y de las aplicaciones web ms complejas.
9. DOM DOM permite a los programadores web acceder y manipular
las pginas XHTML como si fueran documentos XML. De hecho, DOM se
dise originalmente para manipular de forma sencilla los documentos
XML.
10. DOM A pesar de sus orgenes, DOM se ha convertido en una
utilidad disponible para la mayora de lenguajes de programacin
(Java, PHP, JavaScript) y cuyas nicas diferencias se encuentran en
la forma de implementarlo.
11. rbol de nodos Una de las tareas habituales en la
programacin de aplicaciones web con JavaScript consiste en la
manipulacin de las pginas web. De esta forma, es habitual obtener
el valor almacenado por algunos elementos (por ejemplo los
elementos de un formulario), crear un elemento (prrafos,
, etc.) de forma dinmica y aadirlo a la pgina.
12. rbol de nodos Todas estas tareas habituales son muy
sencillas de realizar gracias a DOM. Sin embargo, para poder
utilizar las utilidades de DOM, es necesario "transformar" la pgina
original.
13. rbol de nodos DOM transforma todos los documentos XHTML en
un conjunto de elementos llamados nodos, que estn interconectados y
que representan los contenidos de las pginas web y las relaciones
entre ellos. Por su aspecto, la unin de todos los nodos se llama
"rbol de nodos".
14. rbol de nodos
15. Tipos de nodos La especificacin completa de DOM define 12
tipos de nodos, aunque las pginas XHTML habituales se pueden
manipular manejando solamente cuatro o cinco tipos de nodos:
Document, nodo raz del que derivan todos los dems nodos del
rbol.
16. Tipos de nodos Element, representa cada una de las
etiquetas XHTML. Se trata del nico nodo que puede contener
atributos y el nico del que pueden derivar otros nodos. Attr, se
define un nodo de este tipo para representar cada uno de los
atributos de las etiquetas XHTML, es decir, uno por cada par
atributo=valor.
17. Tipos de nodos Comment, representa los comentarios
incluidos en la pgina XHTML. Text, nodo que contiene el texto
encerrado por una etiqueta XHTML.
18. Acceso directo a los nodos getElementsByTagName() Como
sucede con todas las funciones que proporciona DOM, la funcin
getElementsByTagName() tiene un nombre muy largo, pero que lo hace
autoexplicativo. var parrafos =
document.getElementsByTagName("p");
19. Acceso directo a los nodos getElementsByName() La funcin
getElementsByName() es similar a la anterior, pero en este caso se
buscan los elementos cuyo atributo name sea igual al parmetro
proporcionado. var parrafoEspecial =
document.getElementsByName("especial");
...
...
...
20. Acceso directo a los nodos getElementById() La funcin
getElementById() es la ms utilizada cuando se desarrollan
aplicaciones web dinmicas. Se trata de la funcin preferida para
acceder directamente a un nodo y poder leer o modificar sus
propiedades. var cabecera = document.getElementById("cabecera");
...
21. Creacin de elementos XHTML simples // Crear nodo de tipo
Element var parrafo = document.createElement("p"); // Crear nodo de
tipo Text var contenido = document.createTextNode("Hola Mundo!");
// Aadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido); // Aadir el nodo Element como hijo
de la pagina document.body.appendChild(parrafo);
22. Eliminacin de nodos var parrafo =
document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
...
23. Framework JavaScript jQuery: Es un framework de JavaScript
para facilitar, entre otros, el acceso a los elementos del DOM, los
efectos, interactuar con los documentos HTML, desarrollar
animaciones y agregar interaccin con la tecnologa AJAX a pginas
web.
24. jQuery jQuery consiste en un nico fichero JavaScript que
contiene las funcionalidades comunes de DOM, eventos, efectos y
AJAX. La caracterstica principal de la biblioteca es que permite
cambiar el contenido de una pgina web sin necesidad de recargarla,
mediante la manipulacin del rbol DOM y peticiones AJAX. Para ello
utiliza las funciones $() o jQuery().
25. HTML5 HTML5 (HyperText Markup Language, versin 5) es la
quinta revisin importante del lenguaje bsico de la World Wide Web,
HTML. HTML5 establece una serie de nuevos elementos y atributos que
reflejan el uso tpico de los sitios web modernos
26. HTML5 elementos proporcionan nuevas funcionalidades a travs
de una interfaz estandarizada, como los elementos y . Mejoras en el
elemento , capaz de renderizar en los navegadores ms importantes
(Mozilla, Chrome, Opera, Safari e IE) elementos 3D.
27. Ventajas de HTML5 Es nativo, y por tanto independiente de
plugins de terceros. Es decir, no pertenece a nadie, es opensource.
Es ms semntico, con etiquetas que permiten clasificar y ordenar en
distintos niveles y estructuras el contenido. Adems, incorpora
metadatos de manera ms formal, favoreciendo el posicionamiento SEO
y la accesibilidad.
28. Ventajas de HTML5 El cdigo es ms simple lo que permite
hacer pginas ms ligeras que se cargan ms rpidamente favoreciendo la
usabilidad y la indexacin en buscadores. Ofrece una compatibilidad
mayor con los navegadores de dispositivos mviles. Incluye la
etiqueta de dibujo canvas, que ofrece ms efectos visuales.
29. Ventajas de HTML5 Ofrece soporte a codecs especficos.
Posibilita la insercin de vdeos y audio de forma directa. Permite
la geolocalizacin del usuario. Algo muy til para el marketing mvil.
Tiene la capacidad de ejecutar pginas sin estar conectado.
30. Ventajas de HTML5 Incorpora nuevas capacidades Javascript
que aumentan la capacidad de almacenamiento. Frente a las cookies
que dejaban almacenar algunos kilobytes, ahora se puede conseguir
el almacenamiento de entre 5 y 10 megas, dependiendo de la
plataforma. Adems, se permiten mltiples Javascripts corriendo en
paralelo en una misma pgina.
31. Ventajas de HTML5 Dispone de nuevas capacidades CSS3 como
posibilidad de usar cualquier fuente o tipografa en HTML, columnas
de texto, opacidad, transparencia, canales alpha, contraste,
saturacin, brillo, animaciones de transicin y transformacin, bordes
redondeados, gradientes, sombras, etc. Permite realizar diseos
adaptables a distintos dispositivos (web, tablets, mviles)
32. Integracin JavaScript y HTML5 HTML5 HTML5 = HTML + CSS +
JavaScript es un trmino genrico para describir un conjunto de
especificaciones HTML, CSS y Javascript diseado para permitir a los
programadores crear la prxima generacin de aplicaciones y sitios
Web.
33. Integracin JavaScript y HTML5 HTML5 implica cambios en
HTML, CSS y Javascript. En lugar de preocuparse por las ms de 100
especificaciones, esos tres trminos describen la amplitud y el
alcance de HTML5.