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:03] enric_mieza_sanchez [Objects o diccionaris] |
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 48: | Línia 49: | ||
<WRAP tip> | <WRAP tip> | ||
Podeu provar codi Javascript: | Podeu provar codi Javascript: | ||
- | * A la consola del //browser// | + | * A la consola del //browser//< |
* Al terminal amb NodeJS: | * Al terminal amb NodeJS: | ||
Línia 62: | Línia 63: | ||
> | > | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== DOM: Document-Object Model ===== | ||
+ | Javascript es va crear per modificar les pàgines HTML en el //browser// i, per tant, disposen de funcions d' | ||
+ | |||
+ | Per exemple, un camp de text per a formulari (input), un paràgraf (p) i un span com aquests: | ||
+ | <file html exemple.html> | ||
+ | < | ||
+ | <p>El meu nom és:< | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | Fes un arxiu HTML amb el contingut anterior, obre la consola de Javascript com s' | ||
+ | <code javascript> | ||
+ | var elem = document.getElementById(" | ||
+ | console.log(elem.value) | ||
+ | </ | ||
+ | |||
+ | Si no heu escrit res dins el input text us hauria de sortir ''< | ||
+ | <code javascript> | ||
+ | console.log(elem.value) | ||
+ | </ | ||
+ | |||
+ | Si ara volem mostrar el nostre nom dins d'un element HTML (en aquest cas, el '' | ||
+ | <code javascript> | ||
+ | document.getElementById(" | ||
+ | </ | ||
+ | |||
+ | **Què ha passat quan has executat la darrera instrucció? | ||
+ | |||
+ | <WRAP info> | ||
+ | Per accedir al contingut dels elements HTML normals utilitzem '' | ||
+ | |||
+ | Per accedir al contingut dels elements de formulari utilitzem '' | ||
</ | </ | ||
Línia 74: | 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 96: | 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' | ||
\\ | \\ |