Vista previa del material en texto
Tema: Introducción a Java
Tema: JavaScript (Día 2)
Curso de Extensión: Introducción al Desarrollo Web
Ismael Orozco
ciorozco.unsa@gmail.com
1. Javascript DOM: Document Object Model
Página HTML DOM
<html>
<head>
<title> El titulo </title>
</head>
<body>
Cuerpo de la pagina
</body>
</html>
El DOM representa un documento HTML como un árbol.
1. Javascript DOM: Document Object Model
Página HTML DOM
<html>
<head>
<title> The document </title>
</head>
<body>
<div> Data </div>
<ul>
<li>Warning </li>
<li></li>
</ul>
<div>Top Secret!</div>
</body>
</html>
El DOM representa un documento HTML como un árbol.
1. Javascript DOM: Document Object Model
Tipos de nodos:
document nodo raíz del que derivan todos los demás nodos del árbol.
element representa cada una de las etiquetas HTML. Es el único que puede contener atributos y el
único del que pueden derivar otros elementos.
atr se define un nodo de este tipo para representar uno de los atributos de las etiquetas HTML,
es decir, uno por cada atributo=valor
text nodo que contiene el texto encerrado por una etiqueta HTML.
comment representa los comentarios incluidos en la página HTML.
...
Una vez construido automáticamente el árbol completo de nodos, ya es posible utilizar las funciones DOM
para acceder de forma directa a cualquier nodo del árbol.
1. Javascript DOM: Document Object Model
Página HTML Acceso DOM
<html>
<head>
<title> DIUNSa </title>
</head>
<body>
<a href="unsa.edu.ar"> UNSa </a>
<div id="cabecera">
<p name="ppal"> DI es el Depto de Informatica </p>
<a href="di.unsa.edu.ar"> Ver </a>
<p> Facultad de Ciencias Exactas </p>
</div>
<p> Nos vemos pronto </p>
</body>
</html>
1. Javascript DOM: Document Object Model
Página HTML Acceso DOM
<html>
<head>
<title> DIUNSa </title>
</head>
<body>
<a href="unsa.edu.ar"> UNSa </a>
<div id="cabecera">
<p name="ppal"> DI es el Depto de Informatica </p>
<a href="di.unsa.edu.ar"> Ver </a>
<p> Facultad de Ciencias Exactas </p>
</div>
<p> Nos vemos pronto </p>
</body>
</html>
<script type="text/javascript">
var e, en1, en2, ps, p;
en1= document.getElementsByTagName("a");
ps = document.getElementsByTagName("p");
p = ps[0];
en2 = p.getElementsByTagName("a");
e = en1[0];
alert(e.href);
</script>
getElementsByTagName(): obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el
parámetro que se le pasa a la función.
1. Javascript DOM: Document Object Model
Página HTML Acceso DOM
<html>
<head>
<title> DIUNSa </title>
</head>
<body>
<a href="unsa.edu.ar"> UNSa </a>
<div id="cabecera">
<p name="ppal"> DI es el Depto de Informatica </p>
<a href="di.unsa.edu.ar"> Ver </a>
<p> Facultad de Ciencias Exactas </p>
</div>
<p> Nos vemos pronto </p>
</body>
</html>
<script type="text/javascript">
var p;
p = document.getElementsByName("ppal");
</script>
getElementsByName(name): obtiene todos los elementos de la página HTML cuyo atributo name sea
igual que el parámetro que se le pasa a la función.
1. Javascript DOM: Document Object Model
Página HTML Acceso DOM
<html>
<head>
<title> DIUNSa </title>
</head>
<body>
<a href="unsa.edu.ar"> UNSa </a>
<div id="cabecera">
<p name="ppal"> DI es el Depto de Informatica </p>
<a href="di.unsa.edu.ar"> Ver </a>
<p> Facultad de Ciencias Exactas </p>
</div>
<p> Nos vemos pronto </p>
</body>
</html>
<script type="text/javascript">
var p;
p = document.getElementById("cabecera");
</script>
getElementById(name): Accede directamente a un nodo único.
2. Ejercicio
A partir de la página web proporcionada por la cátedra, mostrar por pantalla la siguiente información:
1. Número de enlaces de la página.
2. Dirección a la que enlaza el penúltimo enlace.
3. Número de enlaces que apuntan a: http://prueba
4. Cantidad de enlaces del tercer párrafo.
2. Ejercicio (Código HTML)
<html>
<head>
<title>Ejercicio DOM básico</title>
</head>
<body>
<p> JavaScript (abreviado comúnmente <a href="http://prueba"> JS </a>) es un lenguaje de programación interpretado,
dialecto del estándar ECMAScript. Se define como orientado a objetos, 3 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 aunque existe una forma de JavaScript
del lado del servidor (Server-side JavaScript o <a href="http://prueba2">F SSJS </a>). Su uso en aplicaciones externas a la
web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. </p>
<p> JavaScript se diseñó con una sintaxis similar a <a href="http://prueba"> C </a>, aunque adopta nombres y convenciones
del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Todos los
navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se
provee al lenguaje JavaScript de una implementación del Document Object Model (<a href="http://prueba3"> DOM </a>). </p>
<p> Tradicionalmente se venía utilizando en páginas web <a href="http://prueba"> HTML</a> para realizar operaciones y
únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado
para enviar y recibir información del servidor junto con ayuda de otras tecnologías como <a href="http://prueba4"> AJAX
</a>. JavaScript se interpreta en el agente de usuario al mismo <a href="http://prueba5">tiempo </a> que las sentencias van
descargandose junto con el código HTML. </p>
</body>
</html>
http://prueba
http://prueba2
http://prueba
http://prueba3
http://prueba
http://prueba4
http://prueba5
