Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia | ||
introduccio_javascript [2022/12/14 20:31] enric_mieza_sanchez [DOM: Document-Object Model] |
introduccio_javascript [2023/12/04 00:05] (actual) enric_mieza_sanchez [Exercici de login i registre] |
||
---|---|---|---|
Línia 14: | Línia 14: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * jQuery a bytes.cat: [[jQuery]]. | ||
+ | * [[https:// | ||
- | Algunes referències ràpides: | + | Comentaris ràpids per entrar a Javascript: |
* '' | * '' | ||
* '' | * '' | ||
* Un '' | * Un '' | ||
- | * Podem fer proves de Javascript a la consola del // | + | * Podem fer proves de Javascript a la consola del // |
* La consola de JS del //browser// ens permetrà depurar amb molta facilitat ja que podem inspeccionar les variables en qualsevol moment. | * La consola de JS del //browser// ens permetrà depurar amb molta facilitat ja que podem inspeccionar les variables en qualsevol moment. | ||
Línia 72: | Línia 73: | ||
<file html exemple.html> | <file html exemple.html> | ||
< | < | ||
- | <p>El meu nom és:< | + | <p>El meu nom és:< |
< | < | ||
</ | </ | ||
Línia 78: | Línia 79: | ||
Fes un arxiu HTML amb el contingut anterior, obre la consola de Javascript com s' | Fes un arxiu HTML amb el contingut anterior, obre la consola de Javascript com s' | ||
<code javascript> | <code javascript> | ||
- | var nom = document.getElementById(" | + | var elem = document.getElementById(" |
- | console.log(nom.value) | + | console.log(elem.value) |
</ | </ | ||
Si no heu escrit res dins el input text us hauria de sortir ''< | Si no heu escrit res dins el input text us hauria de sortir ''< | ||
<code javascript> | <code javascript> | ||
- | console.log(nom.value) | + | console.log(elem.value) |
</ | </ | ||
Si ara volem mostrar el nostre nom dins d'un element HTML (en aquest cas, el '' | Si ara volem mostrar el nostre nom dins d'un element HTML (en aquest cas, el '' | ||
<code javascript> | <code javascript> | ||
- | document.getElementById(" | + | document.getElementById(" |
</ | </ | ||
+ | |||
+ | **Què ha passat quan has executat la darrera instrucció? | ||
<WRAP info> | <WRAP info> | ||
Línia 108: | Línia 111: | ||
Part 1 - HTML i login: | Part 1 - HTML i login: | ||
- | - Crea una pàgina HTML amb 2 formularis: | + | - Crea una pàgina HTML amb 2 formularis |
- | * Login: amb username, password | + | * **Formulari de Login**: amb usuari |
- | * Registre: amb username, email, | + | * **Formulari de Registre**: amb usuari, email, |
- Defineix un [[https:// | - Defineix un [[https:// | ||
- | - Busca com fer que els botons | + | - Assegura' |
- | - Afegeix una funció '' | + | - Afegeix una funció '' |
- | - Crida la funció '' | + | - Crida la funció '' |
- | - Comprova si l' | + | - Comprova si l' |
Part 2 - Registre d' | Part 2 - Registre d' | ||
- | - Implementa una funció '' | + | - Implementa una funció '' |
- Guarda el nom d' | - Guarda el nom d' | ||
- Comprova que ni el nom d' | - Comprova que ni el nom d' | ||
- | * En cas positiu, guarda el nom d' | + | * En cas positiu, guarda el nom d' |
- | * En cas negatiu, informa l' | + | * En cas negatiu, informa l' |
- Comprova que el nou usuari enregistrat funciona si intentem fer login. | - Comprova que el nou usuari enregistrat funciona si intentem fer login. | ||
Línia 130: | Línia 133: | ||
</ | </ | ||
+ | <WRAP important> | ||
+ | Si has de passar l' | ||
+ | - Ha d' | ||
+ | - Formulari de login: | ||
+ | - Els camps han de tenir ID= '' | ||
+ | - El botó ha de tenir el text '' | ||
+ | - Login correcte: mostrem un **//alert// amb el text "Login exitós" | ||
+ | - Login incorrecte: mostrem un **//alert// amb el text "Login incorrecte" | ||
+ | - Formulari de registre: | ||
+ | - Els camps han de tenir ID= '' | ||
+ | - El botó ha de tenir el text '' | ||
+ | - Si les 2 contrasenyes dels formulari no coincideixen mostrarem un **//alert// amb el text "Error en les contrasenyes" | ||
+ | - Si les 2 contrasenyes coincideixen mostrarem un **//alert// amb el text "Nou usuari registrat correctament" | ||
+ | - Si el nom d' | ||
</ | </ | ||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== Continuació ===== | ||
+ | Pots continuar aprofundint en Javascript amb l' | ||
\\ | \\ |