JavaScript es un lenguaje de programación interpretado usado principalmente en el lado del cliente para mejorar la interfaz de usuario y páginas web dinámicas. HTML5 es la quinta versión del lenguaje HTML que introduce nuevos elementos y atributos para reflejar el uso moderno de sitios web, mientras que DOM permite a los programadores acceder y manipular páginas web como documentos XML.

1. JavaScript,
HTML5, CSS3
Ivan Alberto Morales
Freddy Bueno
Jonathand Alberto Serrano
Serrano

2. Javascript


JavaScript es un lenguaje de programación
interpretado, dialecto del
estándar ECMAScript. Se define
como orientado a objetos, basado en
prototipos, imperativo, débilmente tipado y
dinámico.
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 páginas
web dinámicas.

3. Características



Es un superconjunto de la
especificación ECMAScript (ECMA-262)
Edición 3. Extensiones del lenguaje, que
incluyen parcialmente soporte para
ECMAScript para XML (E4X) (ECMA-357),
JavaScript soporta gran parte de
la estructura de programación 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 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.
 JavaScript usa prototipos en vez
de clases para el uso de herencia.

5.  Las
funciones también se comportan
como constructores. 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 (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 métodos por los que los
scripts pueden interactuar con el "mundo
exterior“,

6. 

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.
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. Más
bien, 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.

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 organización de Mozilla
Foundation, y nuevas características del
lenguaje son añadidas periódicamente.

8. DOM
 La
creación del Document Object Model
o DOM es una de las innovaciones que
más ha influido en el desarrollo de las
páginas web dinámicas y de las
aplicaciones web más complejas.

9. DOM
 DOM
permite a los programadores web
acceder y manipular las páginas 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 orígenes, DOM se ha
convertido en una utilidad disponible
para la mayoría de lenguajes de
programación (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
programación de aplicaciones web con
JavaScript consiste en la manipulación
de las páginas web. De esta forma, es
habitual obtener el valor almacenado
por algunos elementos (por ejemplo los
elementos de un formulario), crear un
elemento (párrafos, <div>, etc.) de forma
dinámica y añadirlo a la página.

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
página original.

13. Árbol de nodos
 DOM
transforma todos los documentos
XHTML en un conjunto de elementos
llamados nodos, que están
interconectados y que representan los
contenidos de las páginas web y las
relaciones entre ellos. Por su aspecto, la
unión de todos los nodos se llama "árbol
de nodos".

14. Árbol de nodos

15. Tipos de nodos
 La
especificación completa de DOM
define 12 tipos de nodos, aunque las
páginas XHTML habituales se pueden
manipular manejando solamente cuatro
o cinco tipos de nodos:
 Document,
nodo raíz del que derivan
todos los demás 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 página 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 función
getElementsByTagName() tiene un
nombre muy largo, pero que lo hace
autoexplicativo.
var parrafos =
document.getElementsByTagName("p");

19. Acceso directo a los nodos
getElementsByName()
 La
función getElementsByName() es
similar a la anterior, pero en este caso se
buscan los elementos cuyo atributo
name sea igual al parámetro
proporcionado.
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>

20. Acceso directo a los nodos
getElementById()

La función getElementById() es la más utilizada
cuando se desarrollan aplicaciones web
dinámicas. Se trata de la función preferida para
acceder directamente a un nodo y poder leer o
modificar sus propiedades.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>

21. Creación 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!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

22. Eliminación de nodos
var parrafo =
document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>

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
interacción con la tecnología AJAX a
páginas web.

24. jQuery
 jQuery
consiste en un único fichero
JavaScript que contiene las
funcionalidades comunes de DOM,
eventos, efectos y AJAX. La característica
principal de la biblioteca es que permite
cambiar el contenido de una página
web sin necesidad de recargarla,
mediante la manipulación del árbol DOM
y peticiones AJAX. Para ello utiliza las
funciones $() o jQuery().

25. HTML5
 HTML5
(HyperText Markup Language,
versión 5) es la quinta revisión importante
del lenguaje básico de la World Wide
Web, HTML.
 HTML5
establece una serie de nuevos
elementos y atributos que reflejan el uso
típico de los sitios web modernos

26. HTML5
 elementos
proporcionan nuevas
funcionalidades a través de una interfaz
estandarizada, como los elementos
<audio> y <video>.
 Mejoras en el elemento <canvas>, capaz
de renderizar en los navegadores más
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 más semántico, con etiquetas que
permiten clasificar y ordenar en distintos
niveles y estructuras el contenido.
Además, incorpora metadatos de
manera más formal, favoreciendo el
posicionamiento SEO y la accesibilidad.

28. Ventajas de HTML5
 El
código es más simple lo que permite
hacer páginas más ligeras que se cargan
más rápidamente favoreciendo la
usabilidad y la indexación en buscadores.
 Ofrece una compatibilidad mayor con los
navegadores de dispositivos móviles.
 Incluye la etiqueta de dibujo canvas, que
ofrece más efectos visuales.

29. Ventajas de HTML5
 Ofrece
soporte a codecs específicos.
 Posibilita la inserción de vídeos y audio de
forma directa.
 Permite la geolocalización del usuario.
Algo muy útil para el marketing móvil.
 Tiene la capacidad de ejecutar páginas
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. Además,
se permiten múltiples Javascripts
corriendo en paralelo en una misma
página.

31. Ventajas de HTML5

Dispone de nuevas capacidades CSS3 como
posibilidad de usar cualquier fuente o
tipografía en HTML, columnas de texto,
opacidad, transparencia, canales alpha,
contraste, saturación, brillo, animaciones de
transición y transformación, bordes
redondeados, gradientes, sombras, etc.

Permite realizar diseños adaptables a distintos
dispositivos (web, tablets, móviles…)

32. Integración JavaScript y
HTML5
 HTML5
 HTML5
= HTML + CSS + JavaScript
es un término genérico para
describir un conjunto de especificaciones
HTML, CSS y Javascript diseñado para
permitir a los programadores crear la
próxima generación de aplicaciones y
sitios Web.

33. Integración JavaScript y
HTML5
 HTML5
implica cambios en HTML, CSS y
Javascript. En lugar de preocuparse por
las más de 100 especificaciones, esos tres
términos describen la amplitud y el
alcance de HTML5.

34. EJEMPLOS