Comprender los objetos más importantes en la programación de JavaScript, el objeto document, representado en el documento HTML, la Interfaz de programación de aplicaciones (API) para trabajar con documentos HTML
En este tema, aprenderás que cada objeto de ventana en un navegador tiene una propiedad de documento que se refiere a un objeto document. Este objeto representa el contenido de la ventana. Sin embargo, el objeto no es independiente. Es el objeto central del DOM para representar y manipular el contenido del documento.
Los siguientes enlaces son externos a la Universidad Tecmilenio, al acceder a ellos considera que debes apegarte a sus términos y condiciones.
Para conocer más sobre Navegación y manipulación del DOM, revisa el siguiente video:
Códigos de programación – MR. (2020, 15 de julio). Curso de JS: 11. Manipulación el DOM parte 1 [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=RcQVT1smEFg
Yacklyon. (2021, julio 15). Curso de JAVASCRIPT MANIPULACION DEL DOM – INTRODUCCION [Archivo de video]. Recuperado de https://youtu.be/GsGMMHCpmYM?si=aYlODq5NIjjNthNM
Para conocer más sobre Navegación y manipulación del DOM, te recomendamos leer:
MDN contributors. (2021). Document Object Model (DOM). Recuperado de https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Aplicar los conocimientos adquiridos acerca del lenguaje JavaScript.
Para comenzar a programar en Javascript sólo necesitas un IDE con las extensiones necesarias ejecutar el código en un servidor local.
Debes crear un archivo HTML por cada ejercicio y el código de los ejemplos debe ir entre las etiquetas de <body></body>.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>título</title>
<meta charset="utf-8" />
</head>
<body>
<script>
//AQUÍ VA EL CÓDIGO JAVASCRIPT
</script>
</body>
</html>
Ejercicios:
1. Crea el código necesario para que se muestre un reloj digital o muestre el abecedario para poder jugar el juego "basta" en pantalla y agrega la siguiente funcionalidad:
Al hacer clic sobre el reloj o sobre el abecedario (solo deberá mostrar una letra a la vez), si está en marcha, se detenga y si está parado, vuelva a arrancar con la hora actual (utiliza addEventListener(…) para añadir manejadores).
Se recomienda variar el intervalo del evento a 1 milisegundo.
Utiliza métodos que existen en el objeto Date para horas, minutos, segundos, milisegundos. getHours(), getMinutes(), getSeconds() y getMilliseconds() y darles el formado para que el reloj siempre se muestre correctamente.
Ahora que ya sabes modificar los atributos de la página a través de DOM, enriquécela agregando personalizaciones como estilos de texto, colores, alineaciones, etc.
2. Realiza un programa que usando las funciones DOM y el archivo anexo, se pueda visualizar en pantalla información:
Número de links en toda la página
Dirección del último enlace
Número de enlaces que apuntan a http://prueba2
Número de enlaces del segundo párrafo
3. Una tabla HTML se crea con la siguiente estructura de etiquetas:
<table>
<tr>
<th> nombre </th>
<th> altura </th>
<th> lugar </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Para cada fila, la etiqueta <table> contiene una etiqueta <tr>. Dentro de estas etiquetas <tr>, podemos poner elementos de celda: celdas de encabezado (<th>) o celdas regulares (<td>).
Realiza un programa con la siguiente funcionalidad:
Dado un conjunto de datos, una matriz de objetos con propiedades de nombre, altura y lugar. Genera la estructura DOM para una tabla que enumere los objetos. Debe tener una columna por clave y una fila por objeto, además de una fila de encabezado con elementos <th> en la parte superior, enumerando los nombres de las columnas.
Escribe esto para que las columnas se deriven automáticamente de los objetos, tomando los nombres de propiedad del primer objeto en los datos.
Agrega la tabla resultante al elemento con un atributo id descriptivo para el conjunto de datos seleccionado sea visible en el documento.
Una vez que tengas esto funcionando, alinea a la derecha las celdas que contienen valores numéricos estableciendo su propiedad style.textAlign en "right".
<h1> Nombre del conjunto de datos </h1>
<div id = "[conjunto_de_datos]"> </div>
<script>
// Tu código conjunto de datos deberá tener al menos la siguiente estructura
const datos = [
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""},
{nombre: "", altura:, lugar: ""}
];
// Tu código aquí
</script>Asegúrate de: