Introduccin a

JavaScript y DOM
DISERTANTE

ING. RASJIDO, JOSE ALBERTO

Agenda

Introduccin

a JavaScript

Introduccin

a DOM

Referencias

Introduccin a JavaScript

Qu es JavaScript?

JavaScript es un lenguaje de programacin que se utiliza

principalmente para crear pginas Web dinmicas.

Tcnicamente es un lenguaje de programacin interpretado, por lo

que no es necesario compilar los programas para ejecutarlos.

Introduccin a JavaScript

Especificacin estndar

En la actualidad la organizacin ECMA se encarga de mantener

actualizado el estndar, y se puede consultar la ltima versin en:

http://www.ecma-international.org/publications/standards/Ecma262.htm

Introduccin a JavaScript

Que permite?

Permite crear pgina interactivas con los usuarios ofreciendo

retroalimentacin.

Permite validar la informacin introducida por los usuarios ,en los

formularios, antes de enviarla al servidor.

Ofrece control sobre el navegador o browser y detectar plugins.

Actualmente se puede aplicar desde el lado del servidor (Node.js).

Permite trabajar con cookies.

Introduccin a JavaScript

Que NO permite?

No permite leer o escribir archivos en los hosts clientes. Esto es una

ventaja por cuestiones de seguridad.

No permite la lectura o escritura de archivos desde el lado servidor

(salvo con un framework).

JavaScript no puede cerrar una ventana que no ha abierto. Evitando

que un sitio tome el control del navegador y cierre ventanas de otros

sitios.

JavaScript no puede leer informacin de una pgina Web abierta

procedente de otro servidor.

Introduccin a JavaScript

Comenzando con JavaScript

La integracin de JavaScript con HTML es muy flexible y existen tres

formas posibles de hacerlo:
1.

Incluir JavaScript en el mismo documento XHTML.

2.

Definir JavaScript en un archivo externo.

3.

<script type=text/javascript> </script>

<script type=text/javascript src=codigo.js> </script>

Incluir JavaScript en los elementos XHTML.

<p onclick = alert(Un mensaje)> Un prrafo </p>

Introduccin a JavaScript

Detectar si JavaScript esta activado en el navegador

Para detectar si el navegador cliente tiene soporte para JavaScript, se

utiliza la etiqueta <noscript>.
<noscript>
<p>Bienvenido a nuestro sitio</p>

<p>El soporte para JavaScript est desativado.</p>

</noscript>

Introduccin a JavaScript

Sintaxis - Caractersticas

No se tienen en cuenta espacios en blancos y nuevas lneas.

Se distinguen las maysculas y minsculas.

No se define el tipo de las variables.

No es necesario terminar cada sentencia con el carcter de punto y

coma (;).

Se pueden incluir comentarios.

Introduccin a JavaScript

Sintaxis - Variables

Las variables se crean mediante la palabra reservada var y no se

especifica el tipo de dato que almacenar la variable.
Ejemplo:
var valorX = 3;
var valorY = 8;

suma = valorX + valorY;

El uso de var no es obligatorio, pero tiene sus implicancias.

10

Introduccin a JavaScript

Sintaxis mbito de las variables

El mbito se define por el alcance que tiene la misma dentro de un

programa. JavaScript tiene dos mbitos: global y local.
Una variable global es aquella que ha sido declarada de la siguiente

manera:

Cuando es declarada en cualquier parte del documento haciendo uso

de var y no se declara dentro de una funcin.

Cuando es declarada en cualquier parte sin usar var.

Una variable local es aquella que ha sido declarada dentro de una funcin
haciendo uso de la palabra reservada var.

11

Introduccin a JavaScript

Sintaxis Funciones

Una funcin es un conjunto de instrucciones que se agrupan para

realizar una tarea concreta pudiendo retornar un valor especifico.
Una funcin se define mediante function, seguido por el nombre de la
funcin, y puede ser invocada desde cualquier parte del documento.
Ejemplo:

function mostrarSuma(x, y) {
alert(La suma es: + (x+y) );
}

12

Agenda

13

Introduccin

a JavaScript

Introduccin

a DOM

Referencias

Introduccin a DOM

Qu es DOM?

DOM (Document Object Model Modelo de Objetos del Documento)

es un estndar definido por la W3C, el cual permite manipular
cualquier documento XML o HTML.

En JavaScript se puede utilizar el DOM para manipular y recorrer el

documento HTML a travs del objeto window.document o
directamente desde document.

14

Introduccin a DOM

Qu es DOM?

Fue diseado para ser independiente de cualquier lenguaje de

programacin, proveyendo una representacin estructural del
documento, a partir de una simple y consistente API.

El DOM provee dos ventajas para los programadores:

Provee una representacin estructural del documento.

Define la forma en que la estructura debe ser accedida desde un

Script.

15

Introduccin a DOM

16

Estructura

La estructura de un documento DOM es jerrquica y se asemeja a un rbol

genealgico, en el que se incluyen conceptos como hijos, padres, hermanos.
Ejemplo HTML:

<html>
<head> <title>Curso JQUERY</title> </head>
<body>

<h1>Bienvenidos a <em>"Introduccin a AJAX Y JQuery"</em></h1>

</body>
</html>

Introduccin a DOM

17

Estructura

Ejemplo DOM:

html

head

body

title

h1

Curso Jquery

Bienvenidos a

em

Introduccin a
AJAX y JQuery

Introduccin a DOM

Objetos

Hay dos clases de objetos que existen en un documento DOM:

El que representa a todo el documento en si;

Y los que representan a cada uno de los nodos (o etiquetas) de la

estructura jerrquica.

18

Introduccin a DOM

Tipos de nodos

La especificacin completa de DOM define 12 tipos de nodos, los mas

usados:

Document: nodo raz del que derivan todos los dems nodos del
rbol.

Element: representa cada una de las etiqueta HTML. Se trata del

nico nodo que puede contener atributos y del cual pueden
derivar otros nodos.

19

Introduccin a DOM

Tipos de nodos

Attr: se define un nodo de este tipo para representar un atributo de

una etiqueta HTML, uno por cada par (atributo, valor).

Text: Nodo que contiene el texto encerrado por una etiqueta HTML.

Comment: representa los comentarios incluidos en la pgina HTML.

20

Introduccin a DOM

21

Atributos de los objetos

Atributo

Descripcin

childNodes

Devuelve un vector con todos los nodos hijos (directos)

firstChild

Devuelve el primer hijo, equivalente a childNodes[0]

lastChild

Devuelve el ltimo hijo

nextSibling

Devuelve el "hermano" siguiente en la estructura jerrquica

previousSibling

Devuelve el "hermano" anterior en la estructura jerrquica

tagName

Representa el nombre de la etiqueta del nodo

nodeValue

Representa el texto dentro de una etiqueta. En XHTML, los

atributos textContent e innerHTML reemplazan a nodeValue

parentNode

Devuelve el nodo padre

Introduccin a DOM

22

Mtodos de los objetos

Mtodo

Descripcin

setAttribute(atributo,valor)

Define un atributo en el nodo

getAttribute(atributo)

Devuelve el valor de un atributo

removeAttribute(atributo)

Elimina el atributo del nodo

getElementById(id)

Devuelve el nodo que posea el id especificado

getElementsByTagName(tag)

Devuelve un vector con todos los nodos

descendientes del nodo actual

createElement(etiqueta)

Instancia un objeto nodo del tipo etiqueta

appendChild(nodo)

Agrega un nuevo hijo al nodo actual (se

agrega como ltimo hijo)

removeChild(nodo)

Elimina un nodo hijo

insertBefore(nuevoNodo, nodo)

Inserta un nuevo hijo antes de nodo

hasChildNodes()

Informa la cantidad de hijos

Introduccin a DOM

1)

EJERCICIOS
En base al documento dom/ejemplo02.html, completar la
funcionalidad de los mtodos agregarEmpleado() y
eliminarEmpleados().

2)

En base al documento dom/ejercicio01.html, completar la

funcionalidad del mtodo analizarDOM(), para que:
I.

Informe la cantidad de prrafos en todo el documento.

II.

Informe la cantidad de ingredientes del pan.

III.

Informe la cantidad de ingrediente del budn.

IV.

Informe las dimensiones de las dos imgenes del documento.

23

Agenda

24

Introduccin

a JavaScript

Introduccin

a DOM

Referencias

Referencias

Estndar ECMAScript

http://www.ecma-international.org/publications/standards/Ecma262.htm

Estndar DOM de la W3C

https://www.w3.org/TR/2015/REC-dom-20151119/

25