Scribd
Cargar
101 vistas

DAW Javascript DOM 2022

El documento presenta una práctica sobre el desarrollo de aplicaciones web utilizando HTML DOM y JavaScript. Explica conceptos clave como el modelo de objetos del documento (DOM), la manipulación de elementos HTML mediante la API DOM y JavaScript, y el uso de eventos para interactuar con el usuario. También incluye un plan de trabajo con enlaces a tutoriales para aprender sobre los fundamentos de JavaScript, la API DOM y la gestión de eventos.

Cargado por

Manuel Fernández Míguez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
101 vistas

DAW Javascript DOM 2022

El documento presenta una práctica sobre el desarrollo de aplicaciones web utilizando HTML DOM y JavaScript. Explica conceptos clave como el modelo de objetos del documento (DOM), la manipulación de elementos HTML mediante la API DOM y JavaScript, y el uso de eventos para interactuar con el usuario. También incluye un plan de trabajo con enlaces a tutoriales para aprender sobre los fundamentos de JavaScript, la API DOM y la gestión de eventos.

Cargado por

Manuel Fernández Míguez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

Desarrollo de aplicaciones Web

Práctica: HTML DOM y JavaScript

Eduardo M. Sánchez Vila


[email protected]
Prof. Dr. Dept Electronica y Computación
Grupo de Sistemas Inteligentes
Universidad de Santiago de Compostela
Práctica: HTML DOM y JavaScript

Conceptos:

1. Documento HTML está constituido por Elementos. Cada Elemento contiene:


• Marca (=Tag)
• Contenido
2. CSS consiste en añadir Selectores (=Reglas) para añadir estilo/formato a los
Elementos de HTML. Cada Regla contiene:
• Objeto HTML (Elemento, Class o Id) que queremos modificar
• Atributo del Objeto
• Valor del Atributo
3. DOM representa un documento HTML como un árbol de Objetos (=Elementos)
HTML. Cada nodo del árbol puede representar:
• Marca (=Tag)
• Contenido
Práctica: HTML DOM y JavaScript

=
Práctica: HTML DOM y JavaScript

Conceptos:

4. HTML DOM es una API escrita en JavaScript para modificar documentos HTML
La API permite:
• Operaciones CRUD sobre Objetos HTML: Crear, Leer, Actualizar y Borrar
• Crear/añadir nuevos Elementos HTML
• Buscar y Leer contenido de Objetos HTML (Elemento, Class o Id)
• Buscar y Cambiar contenido/atributos de Objetos HTML
• Borrar Elementos HTML
• Gestionar Eventos sobre Objetos HTML. Permiten asociar acciones del
usuario (estímulos) con operaciones CRUD.

5. Ejemplos API de HTML DOM:


• Leer y cambiar contenido
• Gestionar un evento de ratón
Práctica: HTML DOM y JavaScript

URL Eventos

Interacción Petición HTTP

Respuesta HTTP
Práctica: HTML DOM y JavaScript

Javascript en sus inicios:


Práctica: HTML DOM y JavaScript

Javascript moderno:

Google Maps http://chrome.angrybirds.com


Práctica: HTML DOM y JavaScript

Plan de trabajo:

• Aprender JavaScript
• Aprender API de HTML DOM

Tutoriales:

1. Tutorial de JavaScript
• Taller en clase: Fundamentos de JavaScript.
• Referencia: https://es.javascript.info/
2. Tutoriales de API de HTML DOM
• Taller en clase: Operaciones CRUD y eventos
• Referencia: https://es.javascript.info/
• Referencia: https://www.w3schools.com/js/js_htmldom.asp
Tutorial: JavaScript

Diseño de la actividad:

1. Fundamentos de JavaScript
• Primer programa: “Hola mundo”
• Modo “use sctrict”
• Variables y tipos de datos
• Interacción: entrada/salida
• Operadores básicos y operaciones matemáticas
• Comparaciones y sentencias If
• Funciones

2. Tutorial y taller práctico en clase:


2.1 Tutorial:
Referencia: https://es.javascript.info/
2. 2 Otros tutoriales:
Referencia: https://desarrolloweb.com/manuales/manual-javascript.html
Tutorial: HTML DOM

Diseño de la actividad:

1. El árbol DOM
1.1 Relación entre elementos HTML y árbol DOM:
Referencia: https://es.javascript.info/dom-nodes
1.2 Herramienta para ver el DOM: Live DOM Viewer

2. Recorriendo el árbol DOM:


2.1 Esquema de navegación:
Referencia: https://www.w3schools.com/js/js_htmldom_navigation.asp
2.2 Explicación de la navegación:
Referencia: https://es.javascript.info/dom-navigation
2.3 Explicar ejercicio: DOM children

3. Buscar elementos en el árbol DOM:


3.1 Tabla resumen en el apartado “Resumen”:
Referencia: https://es.javascript.info/searching-elements-dom
3.2 Ejemplos de métodos para buscar elementos:
Referencia: https://www.w3schools.com/js/js_htmldom_elements.asp
Tutorial: HTML DOM

Diseño de la actividad:

3. Buscar elementos en el árbol DOM:


3.3 Ejemplos comparando getElementsBy* y querySelector:
Referencia:
https://es.stackoverflow.com/questions/22538/diferencia-entre-queryselector-queryselectorall-getelementbyid-getelementbyta
3.4 Manejando colecciones de elementos:
Referencia: https://www.w3schools.com/js/js_htmldom_collections.asp
3.5 Ejemplos de búsqueda de elementos: explicar ejercicio Buscar elementos
Referencia: https://es.javascript.info/searching-elements-dom

4. Cambiar, crear y eliminar elementos en el árbol DOM:


4.1 Tabla resumen:
Referencia: https://www.w3schools.com/js/js_htmldom_document.asp
4.2 Ejemplos de métodos para cambiar elementos:
Referencia: https://www.w3schools.com/js/js_htmldom_html.asp
Referencia: https://www.w3schools.com/js/js_htmldom_css.asp
4.3 Ejemplos de métodos para crear y eliminar elementos:
Referencia: https://www.w3schools.com/js/js_htmldom_nodes.asp
Tutorial: HTML DOM

Diseño de la actividad:

5. Gestión de eventos
5.1 Del atributo on<event> al método “addEventListener”
Referencia: https://es.javascript.info/introduction-browser-events
5.2 Ejemplos con el atributo on<event>
Referencia: https://www.w3schools.com/js/js_htmldom_events.asp
5.3 Ejemplos con el método “addEventListener”
Referencia: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

También podría gustarte