bytes.cat

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
====== Introducció a Javascript ======

[[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.

{{javascript.jpg}}

{{tag> #DawMp06 #DawMp06Uf1 #DawMp06Uf01 javascript #DamMpDual #DamMpProjecte }}

===== Referències =====

Referències:
  * [[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/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]]

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 -> 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:
  let cotxe = { "marca": "Teat", "model": "Panta" }

Puc accedir a l'atribut "model" de 2 maneres:
  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);
1
> 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>

\\

===== Exercici de login i registre =====

Exercici d'aproximació ràpida si sabeu programar en altres llenguatges i coneixeu mínimament HTML.

<WRAP todo>

Part 1 - HTML i login:

  - Crea una pàgina HTML amb 2 formularis amb diferents colors de fons:
    * **Formulari de Login**: amb usuari i contrasenya.
    * **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.
  - Assegura't que els botons no recarreguin la pàgina (és suficient amb no posar tag <form>).
  - Afegeix una funció ''fer_login()'' dins un tag ''<script>'' al final de la pàgina.
  - 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 "Login exitós" o "Login incorrecte".

Part 2 - Registre d'usuaris:
  - 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 ni el nom d'usuari ni l'email no existeixin ja.
    * En cas positiu, guarda el nom d'usuari, password i email al diccionari d'usuaris.
    * 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

Eines de la pàgina
