bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
introduccio_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.

x-default

Referències

Referències:

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:
    Firefox -> Mes eines -> 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 )

Afegir una funció a un Object:

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

Podeu provar codi Javascript:

  • A la consola del browser
    Firefox -> Més eines -> Web Developer Tools -> Consola
  • Al terminal amb NodeJS:

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:

  • Variables, tipatge dinàmic
  • Estructures de control
  • DOM: cercar element i accedir al valor
introduccio_javascript.txt · Darrera modificació: 2023/12/04 00:05 per enric_mieza_sanchez