Programacion de aplicaciones web parte 5

Programación para Web I

•

SIN SIGLA

facundoanazgo

4/9/2023

¡Este material tiene más páginas!

Vista previa del material en texto

PAW 2023
Programación de Aplicaciones Web - JavaScript DOM
Javascript DOM: Document Object Model
• El DOM representa un documento HTML como un árbol.
Javascript DOM: Document Object Model
• El DOM representa un documento HTML como un árbol.
Página HTML
Javascript DOM: Document Object Model
• El DOM representa un documento HTML como un árbol.
Página HTML DOM
Javascript DOM: Document Object Model
• El DOM representa un documento HTML como un árbol.
Página HTML
Javascript DOM: Document Object Model
• El DOM representa un documento HTML como un árbol.
Página HTML DOM
Javascript DOM: Document Object Model
Tipos de Nodos
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.
document nodo raíz del que derivan todos los demás nodos del árbol.
element
representa cada uno de las etiquetas HTML. Es el único que puede 
contener atributos y el único del que pueden derivar otros elementos.
text nodo que contiene el texto encerrado por una etiqueta HTML.
comment representa los comentarios incluidos en la página HTML.
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
...
Javascript DOM: Document Object Model
• 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.
Javascript DOM: Document Object Model
• 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.
Página HTML
Javascript DOM: Document Object Model
• 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.
Página HTML Acceso DOM
Javascript DOM: Document Object Model
• getElementsByName(): 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.
Javascript DOM: Document Object Model
• getElementsByName(): 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.
Página HTML Acceso DOM
Javascript DOM: Document Object Model
• getElementById(): Accede directamente a un único nodo.
Javascript DOM: Document Object Model
• getElementById(): Accede directamente a un único nodo.
Página HTML Acceso DOM
Javascript DOM: 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.
Javascript DOM: Ejercicio<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
Bibliografía
–MDN - Mozilla Developer Network - JavaScript developer guide [en línea]
 Disponible en: <https://developer.mozilla.org/en-US/docs/Learn/Javascript>
–W3Schools Online Web Tutorials [en línea]
 Disponible en: <https://www.w3schools.com/js/js_htmldom.asp>
–FLANAGAN, David. JavaScript: The Definitive Guide. Séptima Edición. Estados 
Unidos, O’Reilly Media, Inc., 687p.
https://developer.mozilla.org/en-US/docs/Learn/Javascript
https://www.w3schools.com/js/js_htmldom.asp