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>
Més problemes amb la sintaxi
Parlant d'events, fixem-nos que en aquest exercici s'utilitza style="background-color" (sintaxi CSS) i obj.style.backgroundColor (sintaxi Javascript). Aquesta disparitat de sintaxi és un problema afegit per a l'aprenentatge dels mètodes i propietats a utilitzar. No hi ha altra solució que acostumar-se a aquest fet...
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You";
obj.style.backgroundColor="#0000ff";
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me";
obj.style.backgroundColor="#ff0000";
}
</script>
</body>
</html>
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:
T4. onchange, onkeyup... Vols jugar al Pong?
En l'anterior exemple vist a classe convertim el text a majúscules en el moment de sortir del focus. Com es faria si volem convertir a majúscules a mida que anem pitjant les tecles?
onkeypress i onkeydown no fan el resultat desitjat. En canvi, onkeyup sí que és la solució.
Per cert, vols jugar al Pong? Aquest joc utilitza els mètodes del teclat per fer moure la raqueta per la pantalla. Tens disponible tot el codi per estudiar-lo.
T5. 3 maneres de fer events
Estudia bé aquest exemple:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
<!--
1a manera de fer events:
Enter your name: <input type="text" id="fname" onchange="myFunction()">
-->
Enter your name: <input type="text" id="fname">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
//2a manera de fer events:
//document.getElementById("fname").onkeypress = function(){myFunction()};
document.getElementById("fname").onkeypress = myFunction;
//3a manera de fer events:
//document.getElementById("fname").addEventListener("keypress", myFunction);
</script>
</body>
</html>
creat per Joan Quintana Compte, novembre 2021
