Diferència entre revisions de la pàgina «M06 UF3A1. Teoria»
m |
|||
| Línia 123: | Línia 123: | ||
Complement: estudiar el següent codi, que implementa un zoom sobre una imatge: | Complement: estudiar el següent codi, que implementa un zoom sobre una imatge: | ||
*http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html | *http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html | ||
| + | |||
| + | =T4. onchange, onkeyup... Vols jugar al Pong?= | ||
| + | *https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onchange | ||
| + | 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ó. | ||
| + | |||
| + | *http://codeincomplete.com/posts/2011/5/14/javascript_pong/ | ||
| + | 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. | ||
{{Autor}}, novembre 2021 | {{Autor}}, novembre 2021 | ||
Revisió del 11:53, 23 nov 2021
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:
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.
creat per Joan Quintana Compte, novembre 2021
