Taula de continguts

Introducció a 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.

x-default

, , , , ,

Referències

Referències:

Comentaris ràpids per entrar a Javascript:


Objects o diccionaris

En Javascript disposem de 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: 

var myObj = {
    fun: function() {
        console.log("my fun");
    } ,
    myData: "un string qualsevol"
}

Podeu provar codi Javascript:

Si teniu instal·lat NodeJS, podeu provar aquests exemples simplement obrint una consola de node al terminal (tant en GNU/Linux com en Windows): 

$ node
> var a = 1;
> console.log(a);
1
> var o = { fun: function() {console.log("my fun"); } , dada: 1}
> o.fun()
"my fun"
>


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

exemple.html
<h1>El meu nom</h1>
<p>El meu nom és:<span id="nom"></span></p>
<p>Nom: <input id="nameInput" /></p>

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: 

var elem = document.getElementById("nameInput");
console.log(elem.value)

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: 

console.log(elem.value)

Si ara volem mostrar el nostre nom dins d'un element HTML (en aquest cas, el SPAN id=«nom», ho podem fer amb: 

document.getElementById("nom").innerHTML = elem.value;

Què ha passat quan has executat la darrera instrucció?

Per accedir al contingut dels elements HTML normals utilitzem element.innerHTML.

Per accedir al contingut dels elements de formulari utilitzem element.value.


Exercici de login i registre

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

Part 1 - HTML i login:

  1. 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.
  2. Defineix un 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.
  3. Assegura't que els botons no recarreguin la pàgina (és suficient amb no posar tag <form>).
  4. Afegeix una funció fer_login() dins un tag <script> al final de la pàgina.
  5. Crida la funció fer_login() al clicar el botó del formulari de login (amb l'atribut onclick).
  6. 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:

  1. Implementa una funció registra() que es cridi al prémer el botó Registra.
  2. Guarda el nom d'usuari, password i email al diccionari que has creat a la part 1.
  3. 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.
  4. Comprova que el nou usuari enregistrat funciona si intentem fer login.

Observa:

  1. Què passa amb els usuaris registrats si recarreguem la pàgina?

Si has de passar l'autotest:

  1. Ha d'haver al menys un usuari ieti amb contrasenya cordova.
  2. Formulari de login:
    1. Els camps han de tenir ID= usuari i contrasenya.
    2. El botó ha de tenir el text Login.
    3. Login correcte: mostrem un alert amb el text «Login exitós».
    4. Login incorrecte: mostrem un alert amb el text «Login incorrecte».
  3. Formulari de registre:
    1. Els camps han de tenir ID= reg_usuari , reg_email, reg_contrasenya_1 i reg_contrasenya_2.
    2. El botó ha de tenir el text Registra.
    3. Si les 2 contrasenyes dels formulari no coincideixen mostrarem un alert amb el text «Error en les contrasenyes».
    4. Si les 2 contrasenyes coincideixen mostrarem un alert amb el text «Nou usuari registrat correctament».
    5. 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».


Continuació

Pots continuar aprofundint en Javascript amb l'article jQuery.


TODO

Coses per ampliar de l'article: