JavaScript Bàsic

Qué és JavaScript?

JavaScript (JS) és el llenguatge de programació que permet afegir interactivitat a les pàgines web. S'executa al costat del client (al navegador) i pot manipular el DOM, gestionar events, fer peticions HTTP i molt més.

L'estàndard actual és ECMAScript 2024 (ES15), però les característiques fonamentals de ES6 (2015) son les que tot desenvolupador ha de dominar.

Variables

// var (evitar — àmbit de funció, problemàtic)
var nom = "Joan";

// let — variable que pot canviar (àmbit de bloc)
let edat = 25;
edat = 26;  // OK

// const — constant (àmbit de bloc, no reasignable)
const PI = 3.14159;
const CENTRE = "Institut Sa Palomera";
// PI = 3;  // ERROR!

Tipus de dades

// Primitius
let text = "Hola món";          // string
let nombre = 42;                 // number
let decimal = 3.14;              // number
let actiu = true;                // boolean
let buit = null;                 // null
let indefinit = undefined;       // undefined
let simbol = Symbol('id');       // symbol (ES6)

// Objectes
let persona = {
    nom: "Maria",
    edat: 22,
    parla: function() {
        console.log("Hola, soc " + this.nom);
    }
};

// Arrays
let notes = [7.5, 8.0, 9.5, 6.0];
let mixt = [1, "dos", true, null];

// Verificació de tipus
console.log(typeof text);      // "string"
console.log(typeof nombre);    // "number"
console.log(typeof actiu);     // "boolean"
console.log(Array.isArray(notes)); // true

Estructures de control

// if - else if - else
let nota = 7.5;
if (nota >= 9) {
    console.log("Excel·lent");
} else if (nota >= 7) {
    console.log("Notable");
} else if (nota >= 5) {
    console.log("Aprovat");
} else {
    console.log("Suspens");
}

// switch
let dia = "dilluns";
switch (dia) {
    case "dissabte":
    case "diumenge":
        console.log("Cap de setmana!");
        break;
    default:
        console.log("Dia laborable");
}

// Operador ternari
let resultat = nota >= 5 ? "Aprovat" : "Suspens";

// Nullish coalescing (ES2020)
let nomUsuari = null;
let display = nomUsuari ?? "Anònim";  // "Anònim"

Bucles

// for clàssic
for (let i = 0; i < 5; i++) {
    console.log("Iteració: " + i);
}

// for...of (per a iterables: arrays, strings)
let notes = [7, 8, 9, 5, 6];
for (let nota of notes) {
    console.log(nota);
}

// for...in (per a propietats d'objectes)
let alumne = { nom: "Joan", nota: 8, cicle: "ASIX" };
for (let clau in alumne) {
    console.log(clau + ": " + alumne[clau]);
}

// while
let comptador = 0;
while (comptador < 3) {
    console.log("Compte: " + comptador);
    comptador++;
}

// forEach (arrays)
notes.forEach(function(nota, index) {
    console.log(`Nota ${index + 1}: ${nota}`);
});

Funcions

// Funció declarada (hoisting)
function suma(a, b) {
    return a + b;
}

// Expressió de funció
const resta = function(a, b) {
    return a - b;
};

// Arrow function (ES6) — sintaxi curta
const multiplica = (a, b) => a * b;
const quadrat = n => n * n;  // un sol paràmetre, sense parèntesis

// Paràmetres per defecte (ES6)
function saluda(nom = "Amic") {
    return `Hola, ${nom}!`;
}
console.log(saluda());         // "Hola, Amic!"
console.log(saluda("Maria"));  // "Hola, Maria!"

// Rest parameters
function suma(...nombres) {
    return nombres.reduce((total, n) => total + n, 0);
}
console.log(suma(1, 2, 3, 4));  // 10

Plantilles de cadenes (Template Literals)

let nom = "Joan";
let nota = 8.5;
let cicle = "ASIX";

// Concatenació clàssica (evitar)
let msg1 = "L'alumne " + nom + " ha tret un " + nota + " a " + cicle;

// Template literal (ES6) — recomanat
let msg2 = `L'alumne ${nom} ha tret un ${nota} a ${cicle}`;

// Multilinea
let html = `
    <div class="targeta">
        <h3>${nom}</h3>
        <p>Nota: ${nota}</p>
    </div>
`;

Arrays: mètodes principals

let notes = [7, 4, 9, 5, 8, 3, 6];

// Transformació
let dobles = notes.map(n => n * 2);
// [14, 8, 18, 10, 16, 6, 12]

// Filtratge
let aprovades = notes.filter(n => n >= 5);
// [7, 9, 5, 8, 6]

// Reducció
let suma = notes.reduce((acc, n) => acc + n, 0);
// 42

// Cerca
let primera = notes.find(n => n < 5);       // 4
let index = notes.findIndex(n => n < 5);    // 1
let existeix = notes.includes(9);           // true
let all = notes.every(n => n >= 5);         // false
let some = notes.some(n => n >= 9);         // true

// Ordenació
let ordenades = [...notes].sort((a, b) => a - b);
// [3, 4, 5, 6, 7, 8, 9]

Miniactivitat AC03736

Crea un fitxer exercicis.js i resol els següents problemes: 1. Funció que rep un array de notes i retorna la nota mitjana. 2. Funció que rep un array de noms i retorna els que comencen per "M". 3. Funció que rep una cadena i compta quantes vocals té. 4. Funció que crea un objecte alumne amb nom, notes i el mètode mitjanaNotes().