Desarrollo de App para Firefox OS
Text
2do Taller de JavaScript
Manipulando el DOM y trabajando con Objetos
Desarrollo de App para Firefox OS
Text
EL DOM
El Document Object Model o DOM es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Nos permite comunicar los elementos de la web con nuestros scripts permitiendo crear sitios web mas dinámicos e interactivos.
Desarrollo de App para Firefox OS
Text
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de la página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Veamos el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Mozilla El Salvador</h1>
<a href="">enlace</a>
</body>
</html>
Desarrollo de App para Firefox OS
Text
El código HTML anterior se transforma en el siguiente árbol de nodos:
Desarrollo de App para Firefox OS
Text
TIPOS DE NODOS
Algunos de los tipos de nodos son:
- Document: nodo raíz del que descienden todos los demás nodos del árbol.
- Element: representa cada una de las etiquetas HTML. Es el ú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 HTML, es decir, uno por cada par atributo=valor.
- Text: nodo que contiene el texto encerrado por una etiqueta HTML.
Desarrollo de App para Firefox OS
Text
ACCEDIENDO AL DOM CON JS
<h1 id="saludo"></h1>
<p>
The Internet is an integral part of modern life—a key component
in education, communication, collaboration, business, entertainment
and society as a whole.
</p>
<script>
var p = document.getElementsByTagName('p')[0];
var h1 = document.getElementById('saludo');
h1.innerHTML = "Hello world";
p.style["background-color"] = "#0033CC";
p.style.color = "#fff";
</script>Document.querySelector()
Desarrollo de App para Firefox OS
Text
<input type="text" name="item" id='item' value="">
<button type="button" id="add">Agregr Item</button>
<ul id="list">
<li>Uvas</li>
</ul>Creando elementos en HTML con JS
var item = document.querySelector("#item");
var btn = document.querySelector('#add');
var list = document.querySelector('#list');
btn.onclick = function(){
var t = document.createTextNode(item.value);
var li = document.createElement('li');
li.appendChild(t);
list.appendChild(li);
}Desarrollo de App para Firefox OS
Text
Programación orientada a objetos
La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados en el mundo real. Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la modularidad, polimorfismo y encapsulamiento.
POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.
Desarrollo de App para Firefox OS
Text
Terminología
Clase: Define las características del Objeto.
Objeto: Una instancia de una Clase.
Propiedad: Una característica del Objeto, como el color.
Método: Una capacidad del Objeto, como caminar.
Constructor: Es un método llamado en el momento de la creación de instancias.
Herencia: Una Clase puede heredar características de otra Clase.
Desarrollo de App para Firefox OS
Text
Terminología
Encapsulamiento: Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.
Abstracción: La conjunción de herencia compleja, métodos, propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
Polimorfismo: Diferentes Clases podrían definir el mismo método o propiedad.
Desarrollo de App para Firefox OS
Text
Ejemplo de POO en JS
[js-02] DOM, Objectos, JSON
By Carlos Eduardo Cárcamo Mendoza
[js-02] DOM, Objectos, JSON
Una introducción de FFOS como plataforma de desarrollo en HTML5, en la que se muestran las ventajas de desarrollar y utilizar FFOS, integrando el funcionamiento de la MarketPlace en multiplataformas con el navegadro Firefox, Firefox móvil, y celulares con FFOS.
