DOM &
JS Events
Javiera Azócar
Jaime Hormazábal
DOM
01
Entendiendo el formato de una página web
Document Object Model (DOM)
Los DOM son una representación la estructura del HTML. Esto es a través de árboles de lógica donde cada rama del árbol termina en un nodo.
Esto será representado con una variable predefinida document lo que tendremos en nuestro
documento JavaScript para poder interactuar con las distintas partes del HTML.�
Variable Document
Con la variable document podremos acceder al HTML desde nuestro script:
Esto sirve para crear y editar elementos en el html. Esto nos servirá para darle vida a nuestros proyectos.
Crear elementos con DOM
Los elementos (h1, h2, p, div) se crean usando el código de .createElement se puede añadir valores dentro de este usando el comando .appendChild
Una vez que terminamos de hacer las ediciones se añaden usando el siguiente comando: document.body.appendChild()
Clases, id y atributos
Clases
ID
Atributos
De la misma manera podemos crear clases, id y atributos. La edición de estos y añadirlo al texto son iguales a lo anterior.
Eventos en JS
02
Abriendo la puerta para interactuar con nuestros usuarios.
¿Qué son los eventos?
Son las múltiples acciones que puede realizar el usuario o el sistema al interactuar con el documento.
La idea es poder detectarlos y desencadenar alguna acción
Algunos Ejemplos
onclick: Cuando el usuario hace click en un elemento
document.getElementById("boton").addEventListener("click", () => {
alert("¡Botón clickeado!");
});
onmouseover: Cuando el usuario pasa el mouse sobre un elemento
document.getElementById("caja").addEventListener("mouseover", () => {
console.log("El mouse está sobre la caja");
});
onmouseout: Cuando el usuario saca el mouse del elemento
Algunos Ejemplos
keydown: Cuando el usuario presiona una tecla
document.addEventListener("keydown", (event) => {
console.log(`Tecla presionada: ${event.key}`);
});
submit: Cuando se envía un formulario
document.getElementById("fm").addEventListener("submit", (event) => {
event.preventDefault(); // Evita el envío real
alert("Formulario enviado");
});
Algunos Ejemplos
load: Cuando la página carga completamente
window.addEventListener("load", () => {
console.log("Página completamente cargada");
});
Aquí podrán encontrar más ejemplos:
SVG
03
¿Qué es?
Se utiliza para representar imágenes mediante formas definidas a través de parámetros numéricos en lugar de un conjunto de píxeles, lo que evita la pérdida de calidad al escalar, siendo ideal para gráficos, iconos y diagramas.
Scalable Vector Graphics
SVG en html
<svg width="500" height="300">
<!--Elementos-->
</svg>
(0,0)
(500,0)
(500,300)
(0,300)
Principales elementos SVG
Rectángulo
<svg width="500" height="300">
<rect x="200" y="100" width="300" height="100" fill="blue" stroke="green" stroke-width="5" />
</svg>
Principales elementos SVG
Círculo
<svg width="500" height="300">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
Principales elementos SVG
Triángulo
<svg width="500" height="300">
<polygon points="100,10 40,180 160,180" fill="blue" stroke="black" stroke-width="3" />
</svg>
Principales elementos SVG
Elipse
<svg width="500" height="300">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="yellow"/>
</svg>
Principales elementos SVG
Línea
<svg width="500" height="300">
<line x1="0" y1="0" x2="500" y2="300" stroke="magenta"/>
</svg>
Principales elementos SVG
Texto
<svg width="500" height="300">
<text x="100" y="200" font-size="34" >hola </text>
</svg>
Algunos efectos
<svg width="500" height="300">
<circle cx="150" cy="100" r="50"
fill="red"/>
<circle cx="150" cy="205" r="50"
fill="red" opacity="0.5"/>
</svg>
Opacidad
Algunos efectos
<svg width="500" height="300">
<ellipse cx="100" cy="50" rx="100"
ry="50"/>
<ellipse cx="100" cy="50" rx="100"
ry="50" transform="translate(0, 200)"/>
</svg>
Transform
Se trasladó 200 en el eje y
Algunos efectos
Rotate
<svg width="500" height="300">
<ellipse cx="100" cy="50" rx="100"
ry="50"/>
<ellipse cx="100" cy="50" rx="100"
ry="50" transform="translate(0, 150)
rotate(45 100 50)"/>
</svg>
grados
centro rotación x
centro rotación y