M06 UF3A1. Teoria
Contingut
T1. Introducció al DOM
Comencem una nova UF (UF3) i en la sessió d'avui hem introduït els conceptes més importants del DOM. Sessió 1:
- JS HTML DOM (https://www.w3schools.com/js/js_htmldom.asp)
- DOM Intro
- DOM Methods
- DOM Document
- DOM Elements
- DOM HTML
- DOM Forms
T2. Continuem amb el DOM
- DOM CSS (https://www.w3schools.com/js/js_htmldom_css.asp)
- DOM Animations
- DOM Events
- DOM Event Listener
Compte amb les majúscules i minúscules
Partim d'aquest codi bàsic:
<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> <h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2> </body> </html>
També funciona:
<h2 onclick="this.innerHTML='Ooops!'"> <h2 ONCLICK="this.innerHTML='Ooops!'"> <h2 OnClick="this.innerHTML='Ooops!'"> ...
perquè aquest codi el processa el navegador, que no li importa les majúscules i minúscules.
Però si faig servir addEventListener, com que és Javascript pur, sí que importa majúscules i minúscules. He de fer servir click estrictament (no puc fer servir Clic, onclick, etc.).
<!DOCTYPE html>
<html>
<body>
<h2>Clicar aquí</h2>
</body>
</html>
<script>
let ele = document.getElementsByTagName("H2");
ele[0].addEventListener("click",function(){this.innerHTML = "Ep!!!"});
</script>
T3. Events del ratolí. Exercici de classe: backgroundColor i rodeta del ratolí (wheel)
Exercici preliminar: Fem que el backgroundColor de la pantalla transiti des de negre fins a blanc:
<html>
<head>
<style>
body {background-color: 0;}
</style>
<script>
var color = 0;
setInterval(function(){
//document.body.style.backgroundColor = "rgb(100,100,100)";
document.body.style.backgroundColor = "rgb(" + color + "," + color + "," + color + ")";
color += 10;
}, 100);
</script>
</head>
<body>
</body>
</html>
Exercici: Anem a implementar l'event wheel del ratolí. Amb la roda del ratolí, canvia el brackground del navegador, amb valors que vagin de blanc a negre en funció de lo ràpid que moguis el ratolí. Cada vegada que movem una unitat la rodeta del ratolí, es dispara un event. Si movem el ratolí molt ràpid es disparen molts events. Per saber si movem cap amunt o cap avall, hem de mirar la propietat event.deltaY (valor positiu, estem movent cap amunt; valor negatiu, estem movent cap avall).
L'objectiu és que amb la rodeta del ratolí puguem enfosquir o aclarir el background de la pantalla.
Podem partir d'aquest codi:
script index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div id="screen"></div>
<script src="assets/js/script.js"></script>
</body>
</html>
script style.css:
* {
margin: 0px;
}
#screen {
height: 100vh;
width: 100vw;
background-color: blue;
}
.wheel {
background-color: red !important;
}
script script.js:
document.getElementById("screen").addEventListener("wheel",function(event){
if (event.deltaY>0){
this.classList.add("wheel");
} else {
this.classList.remove("wheel");
}
console.dir(event);
})
Complement: estudiar el següent codi, que implementa un zoom sobre una imatge:
creat per Joan Quintana Compte, novembre 2021
