Els tipus de variables en JavaScript són les categories que classifiquen els valors que poden emmagatzemar les variables. JavaScript té cinc tipus primitius i un tipus de referència o objecte. Els tipus primitius són:
undefined indica aquesta situació.null, que representa l'absència d'un objecte. Aquest tipus és similar a undefined, però es pot assignar explícitament a una variable.true o false. Aquests valors representen el valor veritat o falsedat d'una expressió o condició.El tipus de referència o objecte correspon a les variables que poden emmagatzemar objectes, és a dir, estructures de dades que agrupen propietats i mètodes. Un exemple d'objecte és un array, que és una col·lecció ordenada de valors accessibles per un índex numèric.
Per saber el tipus d'una variable, es pot utilitzar l'operador typeof, que retorna una cadena amb el nom del tipus. Per exemple:
typeof 3; // retorna "number"
typeof "hola"; // retorna "string"
typeof true; // retorna "boolean"
typeof null; // retorna "object"
typeof undefined; // retorna "undefined"
typeof [1, 2, 3]; // retorna "object"En el codi que he proporcionat més avall, es declaren quatre variables amb diferents tipus:
colors és de tipus objecte i conté un array amb tres cadenes: "vermell", "blau" i "verd".nul és de tipus objecte i té el valor null.indefinit és de tipus undefined i no té cap valor assignat.suma és de tipus funció i conté una funció anònima que retorna la suma de dos paràmetres.El codi també escriu en el document HTML el valor i el tipus de cada variable mitjançant la funció document.write. Aquesta funció permet inserir contingut dinàmic en una pàgina web. El codi utilitza la funció JSON.stringify per convertir l'array colors en una cadena amb format JSON, que facilita la seva visualització.
Els resultats del codi HTML són els següents:
Variable d'array: ["vermell","blau","verd"] (tipus: object) Variable nul·la: null (tipus: object) Variable indefinida: undefined (tipus: undefined) Variable de funció: 8 (tipus: function)
Variable numèrica
// Variables numèriques
var num = 42; // Declaració d'una variable numèrica
document.write("Variable numèrica: " + num + " (tipus: " + typeof num + ")\n");
Variable de text
// Variables de text (cadenes de caràcters)
var text = "Hola, món!"; // Declaració d'una variable de text
document.write("Variable de text: '" + text + "' (tipus: " + typeof text + ")\n");
Variable boleana
// Variables boleanes
var esCert = true; // Declaració d'una variable boleana
document.write("Variable boleana: " + esCert + " (tipus: " + typeof esCert + ")\n");
Variable d'objectes
// Variables d'objectes
var persona = { // Declaració d'una variable d'objecte
nom: "Anna",
edat: 25
};
document.write("Variable d'objecte: " + JSON.stringify(persona) + " (tipus: " + typeof persona + ")\n");d
Variable d'arrays
// Variables d'arrays
var colors = ["vermell", "blau", "verd"]; // Declaració d'una variable d'array
document.write("Variable d'array: " + JSON.stringify(colors) + " (tipus: " + typeof colors + ")\n");
Variables nul·les
// Variables nul·les
var nul = null; // Declaració d'una variable nul·la
document.write("Variable nul·la: " + nul + " (tipus: " + typeof nul + ")\n");
Variable indefinida
// Variables indefinides
var indefinit; // Declaració d'una variable indefinida
document.write("Variable indefinida: " + indefinit + " (tipus: " + typeof indefinit + ")\n");
// Variables de funció
var suma = function(a, b) { // Declaració d'una variable de funció
return a + b;
};
document.write("Variable de funció: " + suma(3, 5) + " (tipus: " + typeof suma + ")\n");
//Tipus de funcions
//Una funció és semblant a un procediment o conjunt d'instruccions que fa una tasca pero amb la particularitat que hi ha entrada i sortida d'informació
// Declaració de funció
// Aquesta forma consisteix a definir una funció amb la paraula clau function, seguida d'un nom, una llista de paràmetres entre parèntesis i un bloc de codi entre claus.
// Les funcions declarades poden ser cridades abans o després de la seva definició, ja que són hissades (hoisted) al principi de l'abast on es troben.
function suma(a, b) {
return a + b;
}
// Expressió de funció
// Aquesta forma consisteix a assignar una funció anònima (sense nom) a una variable o una constant.
// Les funcions expressades només poden ser cridades després de la seva definició, ja que la variable o la constant que les conté no són hissades.
var resta = function(a, b) {
return a - b;
};
// Funció de fletxa
// Aquesta forma consisteix a utilitzar una sintaxi més concisa per crear funcions anònimes amb la paraula clau =>.
// Les funcions de fletxa tenen algunes diferències respecte a les altres formes, com per exemple que no tenen el seu propi objecte arguments ni el seu propi valor this.
var multiplica = (a, b) => {
return a * b;
};
// Crida a les funcions i mostra els resultats
document.write("Suma: " + suma(3, 5) + "
");
document.write("Resta: " + resta(3, 5) + "
");
document.write("Multiplica: " + multiplica(3, 5) + "
");
// Funció anònima: és una funció que no té nom i que es pot assignar a una variable o passar com a argument a una altra funció.
// Exemple: assignem una funció anònima a la variable saluda
var saluda = function (nom) {
document.write ("Hola, " + nom + "
");
};
// Callback: és una funció que es passa com a argument a una altra funció i que s'executa dins d'aquesta per completar alguna acció o rutina.
// Exemple: passem la funció saluda com a callback a la funció repeteix
function repeteix (n, callback) {
for (var i = 0; i < n; i++) {
callback ("Pompeu"); // cridem al callback amb el paràmetre "Pompeu"
}
}
// Autoexecutable: és una funció que s'executa automàticament quan es defineix, sense necessitat de ser cridada després.
// Exemple: definim i executem una funció autoexecutable que mostra un missatge
(function () {
document.write ("Aquesta és una funció autoexecutable
");
}) (); // els parèntesis finals indiquen que s'ha d'executar la funció
// Clausura: és una funció que té accés a les variables i paràmetres de la seva funció externa, encara que aquesta hagi acabat.
// Exemple: definim una funció externa que retorna una funció interna que fa ús de les variables de l'externa
function externa (x) {
var y = 2; // variable local de la funció externa
function interna () {
document.write ("El producte de " + x + " i " + y + " és " + x * y + "
");
}
return interna; // retornem la funció interna
}
// This: és una paraula clau que fa referència a l'objecte actual on es troba el codi que s'està executant.
// Exemple: definim un objecte persona amb un mètode que fa ús de this per accedir a les seves propietats
var persona = {
nom: "Anna",
edat: 25,
descriu: function () {
document.write ("El nom és " + this.nom + " i l'edat és " + this.edat + "
");
}
};
// Cridem a les funcions i mostrem els resultats
saluda ("Joan"); // cridem a la funció anònima assignada a la variable saluda
repeteix (3, saluda); // cridem a la funció repeteix amb el callback saluda
var f = externa (5); // cridem a la funció externa i guardem el seu retorn (la funció interna) en la variable f
f (); // cridem a la variable f com si fos una funció (és una clausura)
persona.descriu (); // cridem al mètode descriu de l'objecte persona, que fa ús de this
<!DOCTYPE html>
<html>
<head>
<title>Condicionals amb Entrada d'Usuari</title>
</head>
<body>
<h1>Condicionals amb Entrada d'Usuari</h1>
<p>Aquest és un exemple de com utilitzar condicionals en JavaScript amb entrada d'usuari:</p>
<script>
// Demanar a l'usuari que introdueixi l'edat
var edat = parseInt(prompt("Introdueix la teva edat:"));
var missatge = "";
// Utilitzant l'if-else per assignar un missatge basat en l'edat
if (edat >= 18) {
missatge = "Ets major d'edat";
} else {
missatge = "Ets menor d'edat";
}
// Mostrar el missatge a la pàgina
document.write("<p>" + missatge + "</p>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Operador Ternari amb Entrada d'Usuari</title>
</head>
<body>
<h1>Operador Ternari amb Entrada d'Usuari en Català</h1>
<p>Aquest és un exemple de com utilitzar l'operador ternari en JavaScript amb entrada d'usuari:</p>
<script>
// Demanar a l'usuari que introdueixi l'edat
var edat = parseInt(prompt("Introdueix la teva edat:"));
var missatge = "";
// Utilitzant l'operador ternari per assignar un missatge basat en l'edat
missatge = (edat >= 18) ? "Ets major d'edat" : "Ets menor d'edat";
// Mostrar el missatge a la pàgina
document.write("<p>" + missatge + "</p>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Switch </title>
</head>
<body>
<h1>Switch</h1>
<p>Aquest és un exemple de com utilitzar un switch en JavaScript:</p>
<script>
// Demanar a l'usuari que introdueixi l'edat
var edat = parseInt(prompt("Introdueix la teva edat:"));
var missatge = "";
// Utilitzant un switch per assignar un missatge basat en l'edat
switch (true) {
case edat >= 18:
missatge = "Ets major d'edat";
break;
default:
missatge = "Ets menor d'edat";
}
// Mostrar el missatge a la pàgina
document.write("<p>" + missatge + "</p>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Funció</title>
</head>
<body>
<h1>Funció</h1>
<p>Aquest és un exemple de com utilitzar una funció en JavaScript:</p>
<script>
// Funció per determinar el missatge basat en l'edat
function determinarMissatge(edat) {
if (edat >= 18) {
return "Ets major d'edat";
} else {
return "Ets menor d'edat";
}
}
// Demanar a l'usuari que introdueixi l'edat
var edat = parseInt(prompt("Introdueix la teva edat:"));
// Cridar la funció i mostrar el missatge a la pàgina
var missatge = determinarMissatge(edat);
document.write("<p>" + missatge + "</p>");
</script>
</body>
</html>
try {
// Codi que pot generar un error
let result = 10 / 0; // Divisió per zero
} catch (error) {
console.error(`Error: ${error.message}`);
}
try {
// Codi que pot generar un error
let result = 10 / 0; // Divisió per zero
} catch (error) {
console.error(`Error: ${error.message}`);
} finally {
console.log('La clàusula finally sempre s\'executarà.');
}
try {
// Codi que pot generar un error
let numerator = 10;
let denominator = 0;
let result = numerator / denominator; // Divisió per zero
} catch (error) {
console.error(`Error: ${error.message}`);
console.error(`Error Stack Trace: ${error.stack}`);
console.error(`Error Name: ${error.name}`);
console.error(`Error Cause: ${error.cause || 'No cause available'}`);
} finally {
console.log('La clàusula finally sempre s\'executarà.');
}
try:
try és on es pot generar un error. En aquest cas, s'està intentant dividir 10 per 0, la qual cosa provoca una "Divisió per zero". Si es produeix un error dins d'aquest bloc, el control es transferirà immediatament a la clàusula catch.catch:
catch s'executa quan es produeix un error dins del bloc try. Aquesta clàusula rep un paràmetre error, que és l'objecte que representa l'error que es va produir. Aquí es mostren diverses propietats de l'objecte error:
error.message: Conté el missatge d'error.error.stack: Conté la pila de trucades (stack trace) que mostra com es va arribar a l'error.error.name: El tipus d'error (en aquest cas, seria "TypeError" o "ZeroDivisionError").error.cause: Algunes vegades els errors poden tenir una causa associada; aquí es mostra aquesta causa si està disponible o "No hi ha cap causa disponible" si no n'hi ha cap.finally:
finally s'executa sempre, ja sigui que es produeixi un error o no. En aquest cas, simplement mostra un missatge per indicar que la clàusula finally s'està executant.<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>. Axios és una biblioteca JavaScript que s'utilitza per fer peticions HTTP.<h1>) per a la prova: "Prova Realista amb Axios, Sinon, Chai i Mocha".<p>) amb els identificadors "respostaExitosa" i "respostaFallida" per mostrar els resultats exitosos i fallits de les proves.mocha.setup('bdd');. Aquesta línia estableix la configuració de les proves com a "bdd" (Behavior-Driven Development).fetchData per realitzar una sol·licitud HTTP amb Axios:
fetchData que utilitza Axios per fer una sol·licitud HTTP a l'API https://jsonplaceholder.typicode.com/posts/1. Si la sol·licitud és exitosa, retorna les dades; si hi ha un error, llança l'error.fetchData i es mostra la resposta exitosa a la pàgina.fetchData i es captura l'error que es mostra a la pàgina.Aquest codi és un exemple de com realitzar i mostrar proves d'unitats en una pàgina web utilitzant Mocha, Chai, Sinon i Axios, amb la capacitat de simular respostes d'Axios per validar el comportament del codi en respostes exitoses i fallides.