Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- introduccio_javascript [2022/12/01 09:17]
enric_mieza_sanchez [Introducció a Javascript]
+++ introduccio_javascript [2023/12/04 00:05] (actual)
enric_mieza_sanchez [Exercici de login i registre]
@@ Línia 1: / Línia 1: @@
 ====== Introducció a Javascript ======
-[[https://developer.mozilla.org/es/docs/Web/JavaScript|Javascript]] és el llenguatge més popular a internet. Es va dissenyar per a fer-se servir dins els navegador i enriquir els documents HTML, però progressivament han anat apareixent implementacions en altres àmbits fora del navegador, la més destacable és com servidor web amb NodeJS.
+[[https://developer.mozilla.org/es/docs/Web/JavaScript|Javascript]] és el llenguatge més popular a internet. **Javascript es va dissenyar per a fer-se servir dins els navegador i enriquir els documents HTML, fins al punt de permetre crear aplicacions en el propi //browser//**. Progressivament han anat apareixent implementacions en altres àmbits fora del navegador, la més destacable és com servidor web amb [[NodeJS]], però també en documents PDF o aplicacions d'escriptori.
 Ull a no confondre amb [[Java]], el nom és similar (ambdós marques registrades de Oracle) però els paradigmes i usos d'ambdós son ben diferents.
@@ Línia 14: / Línia 14: @@
   * [[https://www.w3schools.com/js/default.asp|Javascript a W3Schools]]
   * [[https://www.w3schools.com/jS/js_objects.asp|Objectes de Javascript]]. Equivalen als diccionaris o arrays associatius d'altres llenguatges.
-  * [[https://www.w3schools.com/jquery/jquery_get_started.asp|Afegint jQuery]]
   * [[https://www.w3schools.com/js/js_htmldom.asp|DOM del browser: Document-Object Model]]
+  * jQuery a bytes.cat: [[jQuery]].
+  * [[https://www.w3schools.com/jquery/jquery_get_started.asp|jQuery a W3Schools]]
-Algunes referències ràpides:
+Comentaris ràpids per entrar a Javascript:
   * ''var'' era la manera de definir variables abans del 2015 en Javascript.
   * ''let'' és la manera de definir variables des del 2015 endavant.
   * Un ''Object'' de Javascript és com un diccionari, només que pot emmagatzemar funcions, a part de variables primitives.
-  * Podem fer proves de Javascript a la consola del //browser//:<code>Firefox -> Eines -> Eines del navegador -> Web Developer Tools -> Consola</code>
+  * Podem fer proves de Javascript a la consola del //browser//:<code>Firefox -> Mes eines -> Web Developer Tools -> Consola</code>
   * La consola de JS del //browser// ens permetrà depurar amb molta facilitat ja que podem inspeccionar les variables en qualsevol moment.
+\\
+===== Objects o diccionaris =====
+En Javascript disposem de ''[[https://www.w3schools.com/jS/js_objects.asp|Object]]'' com a estructura de dades, però **cal no confondre el ''Object'' de JS amb una ''class''**. És molt similar a un diccionari o //array// associatiu de Python, que a més ens permet emmagatzemar funcions. Això el fa molt versàtil, tot i que molta gent el considera poc formal.
 Prova aquest exemple de ''Object'' a la consola:
@@ Línia 31: / Línia 36: @@
   console.log( cotxe["model"] )
   console.log( cotxe.model )
+Afegir una funció a un ''Object'':
+<code javascript>
+var myObj = {
+    fun: function() {
+        console.log("my fun");
+    } ,
+    myData: "un string qualsevol"
+}
+</code>
+<WRAP tip>
+Podeu provar codi Javascript:
+  * A la consola del //browser//<code>Firefox -> Més eines -> Web Developer Tools -> Consola</code>
+  * Al terminal amb NodeJS:
+Si teniu instal·lat [[nodejs_express|NodeJS]], podeu provar aquests exemples simplement obrint una consola de node al terminal (tant en GNU/Linux com en Windows):
+<code>
+$ node
+> var a = 1;
+> console.log(a);
+> var o = { fun: function() {console.log("my fun"); } , dada: 1}
+> o.fun()
+"my fun"
+>
+</code>
+</WRAP>
+\\
+===== DOM: Document-Object Model =====
+Javascript es va crear per modificar les pàgines HTML en el //browser// i, per tant, disposen de funcions d'accés i modificació al **document**. [[https://www.w3schools.com/js/js_htmldom_methods.asp|El DOM o //Document-Object Model// ens permet accedir amb facilitat al contingut HTML i modificar-lo]].
+Per exemple, un camp de text per a formulari (input), un paràgraf (p) i un span com aquests:
+<file html exemple.html>
+<h1>El meu nom</h1>
+<p>El meu nom és:<span id="nom"></span></p>
+<p>Nom: <input id="nameInput" /></p>
+</file>
+Fes un arxiu HTML amb el contingut anterior, obre la consola de Javascript com s'explica més amunt, i executa les ordres a la consola:
+<code javascript>
+var elem = document.getElementById("nameInput");
+console.log(elem.value)
+</code>
+Si no heu escrit res dins el input text us hauria de sortir ''<empty string>'', però si escriviu alguna cosa a dins i executeu de nou, us hauria de sortir el què hagueu escrit:
+<code javascript>
+console.log(elem.value)
+</code>
+Si ara volem mostrar el nostre nom dins d'un element HTML (en aquest cas, el ''SPAN id="nom"'', ho podem fer amb:
+<code javascript>
+document.getElementById("nom").innerHTML = elem.value;
+</code>
+**Què ha passat quan has executat la darrera instrucció?**
+<WRAP info>
+Per accedir al contingut dels elements HTML normals utilitzem ''element.innerHTML''.
+Per accedir al contingut dels elements de formulari utilitzem ''element.value''.
+</WRAP>
 \\
@@ Línia 42: / Línia 111: @@
 Part 1 - HTML i login:
-  - Crea una pàgina HTML amb 2 formularis:
+  - Crea una pàgina HTML amb 2 formularis amb diferents colors de fons:
-    * Login: amb username, password i botó //submit//.
+    * **Formulari de Login**: amb usuari i contrasenya.
-    * Registre: amb username, email, password i botó //submit//.
+    * **Formulari de Registre**: amb usuari, email, contrasenya.
   - Defineix un [[https://www.w3schools.com/jS/js_objects.asp|Object de JS]], a mode de diccionari, amb dos usuaris amb contrasenya. Fes-ho en una variable global que ens faciliti després afegir més usuaris.
-  - Busca com fer que els botons de //submit// no recarreguin la pàgina.
+  - Assegura't que els botons no recarreguin la pàgina (és suficient amb no posar tag <form>).
-  - Afegeix una funció ''fer_login()'' dins algun tag ''<script>'' dins la pàgina.
+  - Afegeix una funció ''fer_login()'' dins un tag ''<script>'' al final de la pàgina.
-  - Crida la funció ''fer_login()'' al clicar el botó de //submit// del formulari de login.
+  - Crida la funció ''fer_login()'' al clicar el botó del formulari de login (amb l'atribut ''onclick'').
-  - Comprova si l'usuari i contrasenya coincideix amb algun dels usuaris que tenim al diccionari. Mostra un ''alert'' indicant si el resultat del login és exitós o erroni.
+  - Comprova si l'usuari i contrasenya coincideix amb algun dels usuaris que tenim al diccionari. Mostra un ''alert'' indicant "Login exitós" o "Login incorrecte".
 Part 2 - Registre d'usuaris:
-  - Implementa una funció ''registra()'' que es cridi al prémer el botó de //submit// del formulari de registre.
+  - Implementa una funció ''registra()'' que es cridi al prémer el botó ''Registra''.
   - Guarda el nom d'usuari, password i email al diccionari que has creat a la part 1.
-  - Comprova que el nom d'usuari o l'email no existeix.
+  - Comprova que ni el nom d'usuari ni l'email no existeixin ja.
-    * En cas positiu, guarda el nom d'usuari, password i email al diccionari que has creat a la part 1, i dóna un missatge informant que l'usuari s'ha enregistrat correctament.
+    * En cas positiu, guarda el nom d'usuari, password i email al diccionari d'usuaris.
-    * En cas negatiu, informa l'usuari que el nom o email ja existeix a la base de dades.
+    * En cas negatiu, informa l'usuari de l'error.
   - Comprova que el nou usuari enregistrat funciona si intentem fer login.
+<WRAP info>
 Observa:
   - Què passa amb els usuaris registrats si recarreguem la pàgina?
+</WRAP>
+<WRAP important>
+Si has de passar l'autotest:
+  - Ha d'haver al menys un usuari ''ieti'' amb contrasenya ''cordova''.
+  - Formulari de login:
+    - Els camps han de tenir ID= ''usuari'' i ''contrasenya''.
+    - El botó ha de tenir el text ''Login''.
+    - 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= ''reg_usuari'' , ''reg_email'', ''reg_contrasenya_1'' i ''reg_contrasenya_2''.
+    - El botó ha de tenir el text ''Registra''.
+    - 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'usuari o l'email ja existeix mostrarem un **//alert// amb text "El nom o l'email ja existeix a la base de dades"**.
 </WRAP>
+</WRAP>
+\\
+===== Continuació =====
+Pots continuar aprofundint en Javascript amb l'article [[jQuery]].
+\\
+===== TODO =====
+Coses per ampliar de l'article:
+  * Variables, tipatge dinàmic
+  * Estructures de control
+  * DOM: cercar element i accedir al valor

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina