Aquesta és una revisió antiga del document

Taula de continguts

Introducció a Javascript

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.

#DawMp06, #DawMp06Uf1, #DawMp06Uf01, javascript, #DamMpDual, #DamMpProjecte

Referències

Referències:

Javascript a W3Schools
Objectes de Javascript. Equivalen als diccionaris o arrays associatius d'altres llenguatges.
Afegint jQuery
DOM del browser: Document-Object Model

Algunes referències ràpides:

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:

Firefox -> Eines -> Eines del navegador -> Web Developer Tools -> Consola

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 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 )

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:

Crea una pàgina HTML amb 2 formularis:
- Login: amb username, password i botó submit.
- Registre: amb username, email, password i botó submit.
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.
Busca com fer que els botons de submit no recarreguin la pàgina.
Afegeix una funció fer_login() dins algun tag <script> dins la pàgina.
Crida la funció fer_login() al clicar el botó de submit del formulari de login.
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.

Part 2 - Registre d'usuaris:

Implementa una funció registra() que es cridi al prémer el botó de submit del formulari de registre.
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 que has creat a la part 1, i dóna un missatge informant que l'usuari s'ha enregistrat correctament.
- En cas negatiu, informa l'usuari que el nom o email ja existeix a la base de dades.
Comprova que el nou usuari enregistrat funciona si intentem fer login.

Observa:

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

TODO

Coses per ampliar de l'article:

Variables, tipatge dinàmic
Estructures de control
DOM: cercar element i accedir al valor

bytes.cat

Barra lateral

Taula de continguts

Introducció a Javascript

Referències

Objects o diccionaris

Exercici de login i registre

TODO

bytes.cat

Eines de l'usuari

Eines del lloc

Barra lateral

Taula de continguts

Introducció a Javascript

Referències

Objects o diccionaris

Exercici de login i registre

TODO

Eines de la pàgina