Diferència entre revisions de la pàgina «M06 UF3A1. Teoria»
Salta a la navegació
Salta a la cerca
| Línia 14: | Línia 14: | ||
*DOM Events | *DOM Events | ||
*DOM Event Listener | *DOM Event Listener | ||
| + | ==Compte amb les majúscules i minúscules== | ||
| + | Partim d'aquest codi bàsic: | ||
| + | <pre> | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <body> | ||
| + | |||
| + | <h2>JavaScript HTML Events</h2> | ||
| + | <h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | També funciona: | ||
| + | <pre> | ||
| + | <h2 onclick="this.innerHTML='Ooops!'"> | ||
| + | <h2 ONCLICK="this.innerHTML='Ooops!'"> | ||
| + | <h2 OnClick="this.innerHTML='Ooops!'"> | ||
| + | ... | ||
| + | </pre> | ||
| + | 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.). | ||
| + | <pre> | ||
| + | <!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> | ||
| + | </pre> | ||
{{Autor}}, novembre 2021 | {{Autor}}, novembre 2021 | ||
Revisió del 16:34, 16 nov 2021
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>
creat per Joan Quintana Compte, novembre 2021
