M0373-Llenguatge de Marques
BA1
|
Departament
d’informàtica M0373-Llenguatge de Marques BA1 |
|---|---|
| Institut Sabadell | Introducció a llenguatges de guions |
| Realitzat per | Revisat per | Aprovat per | |
|---|---|---|---|
| Nom i cognoms (últim canvi) | Eloi Vazquez / Marc Albareda | ||
| Càrrec (últim canvi) | Docents | ||
| Data (últim canvi) | 11/01/2025 |
| Número de revisió | Data | Descripció de la modificació |
|---|---|---|
| 0.0 | 11/01/2026 | Creació del document. |
| 0.1 | ||
| 0.2 |
És un llenguatge informàtic usat per controlar el comportament d’una màquina, normalment un ordinador. Cada llenguatge té una sèrie de regles sintàctiques i semàntiques estrictes que cal seguir per escriure un programa informàtic, i que en descriuen l’estructura i el significat respectivament. Aquestes regles permeten especificar les dades amb què treballarà el programa i les accions que realitzarà.
El llenguatge màquina és l’únic que entenen els circuits de l’ordinador. Aquest llenguatge està format per 1 i 0. Els llenguatges de programació es poden classificar:
Un llenguatge de guins és:
Els llenguatges de guions sovint s’utilitzen per ampliar les prestacions que ofereix un altre llenguatge, entorn o aplicació. En aquest sentit són molt utilitzats en el desenvolupament d’aplicacions web. Per exemple: Scripts de navegadors web. S’utilitzen per ampliar les capacitats de l’HTML i per inserir accions en pàgines web. Permeten crear efectes especials i aporten interactivitat. Els scripts són interpretats i executats en la màquina client pel navegador web, el qual ha d’incorporar l’intèrpret del llenguatge. Un exemple de llenguatge d’aquest tipus molt utilitzat és JavaScript.
Un altre exemple d’ús llenguatge de guions en desenvolupament web: Scripts de servidor. Són programes que permeten donar funcionalitats a les pàgines web que no es poden resoldre només amb els scripts de navegador. Els scripts de servidor permeten dotar de certa “intel·ligència” els llocs web, la qual cosa fa que generin pàgines diferents segons les circumstàncies. Un dels llenguatges més utilitzats en aquest àmbit és PHP.
Característiques principals dels llenguatges de guions: És un llenguatge interpretat. Llenguatge interpretat vs Llenguatge compilat:
Avantatges dels llenguatges interpretats:
Els inconvenients són:
La interpretació línia a línia es fa:
Aquesta execució en temps real, permet a JavaScript que pugui accedir i manipular el contingut HTML (usant el DOM) per fer actualitzacions dinàmiques sense haver de tornar a carregar tota la pàgina. Per exemple, quan es clica un botó de la pàgina web per a què guardi les dades.
L’avantatge que té és Avantatges fer un prototip i provar el seu funcionament de manera ràpida.
Aquest llenguatge funciona:
En el model d’esdeveniments del navegador, els esdeveniments segueixen una propagació jeràrquica, cosa que significa que l’esdeveniment pot activar-se en un element i “propagar-se” cap a fora. Hi ha dues fases en la propagació:
És important conèixer aquestes fases per poder controlar en quins moments es vol respondre a l’esdeveniment, evitant efectes no desitjats quan es fan clics o altres interaccions en elements “contenidors”.
Diagrama de flux:https://drive.google.com/file/d/1B80NU-Pbj5N0nY5ZxICrBbv0ryfH-CRU/view?usp=drive_link
Avantatges del llenguatge de programació orientat a esdeveniments són:
La interactivitat amb el llenguatge és:
Exemple de DOM:
Els llenguatges de guions per desenvolupament web et permet canviar l’HTML i el CSS de la pàgina web. Veure exemple: https://www.w3schools.com/js/js_htmldom_css.asp.
Les eines més bàsiques que hi ha per interaccionar són els missatges. Hi ha de diversos tipus, en destaquem els següents:
Hi ha diversos tipus de webs:
Què és Javascript?
Característiques diferenciadores de Javascript
Javascript ens proporciona les funcions necessàries per manipular documents HTML:
Afegir a l’HTML
S’afegeix Javascript a una pàgina HTML amb les etiquetes
<script>. Potser un bloc de codi incrustat o un
fitxer extern. Es pot posar tant dintre de les etiquetes body com de les
etiquetes head de la pàgina HTML. Javascript distingeix tant majúscules
com minúscules. Més endavant es veurà el funcionament amb la declaració
de variables.
Motors o intèrprets de JavaScript són:
Alguns d’aquests interprets es poden executar a part de la pàgina web en consola com SpiderMonkey.
Més informació: https://filisantillan.com/blog/js-engine/
Els elements del motor de javascript són:
Veure imatge:
Què és una instrucció en JS?
Les instruccions se separen amb punts i comes “;”. Sempre s’ha de posar per evitar errors inesperats. El punt i coma és especialment útil quan diverses instruccions comparteixen la mateixa línia. Es recomana col·locar cada instrucció en línies separades per facilitar la lectura.
Un exemple és el següent:
let x = 5;
let y = 10;
let result = x + y;
console.log(result)En aquest exemple, a l’HTML, s’associa el JS a la capçalera:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="Diapo343Activitat1.js" defer></script>
</head>
<body>
...
</body>
</html>Comentaris en JavaScript:
Exemple de codi:
// Aquesta variable emmagatzemma el resultat de la suma
let result = x + y;Un altre exemple:
/*
Aquest comentari explica un procés de diverses línies
de manera que sigui fàcil d'entendre en un bloc
*/
let x = 5;
let y = 10;
let result = x + y;
console.log(result)Els identificadors són els noms utilitzats per a variables, funcions, objectes, etc., dins del codi. Per tant, són essencials per mantenir una estructura organitzada i fàcilment comprensible. Per exemple:
let x=5;Normes de la nomenclatura:
Les paraules reservades les podeu trobar en el següent enllaç: https://www.w3schools.com/js/js_reserved.asp
Us de camelCase per anomenar les variables i les funcions:
Altres maneres de crear variables:
Una variable es declara automàticament el primer cop que s’utilitza. En aquest moment, es converteix en una variable global, independentment del punt del codi on s’hagi declarat. Per ex:
a = 3;
b = "Hola";Es considera una mala pràctica de programació no declarar explícitament les variables abans d’utilitzar-les, per tant s’ha d’evitar aquesta sintaxi encara que JavaScript ho permeti.
Característiques:
const PI = 3.14159; // PI = 3.14; // Error: PI és una constant
const a = 3;
a = 4; // ERROR, no es pot tornar a assignar
const a; // ERROR, declarada sense un valor
a = 4;const NUM_DIGITS_DNI = 8;
const ERROR_NUM_DIGITS = "El nombre de dígits del DNI ha de ser 8.";
const ERROR_LLETRA_DNI = "La lletra del DNI no és correcta.";
...
if (dni.length != NUM_DIGITS_DNI) alert(ERROR_NUM_DIGITS);
if (!comprovarLletraDNI(dni, lletra)) alert(ERROR_LLETRA_DNI);Exemple 2: Utilitzar constants amb objectes per associar valors numérics amb text:
const SUSPEN = {valor:1, nota:"Suspén"};
const MILLORAR = {valor:2, nota:"Necessita millorar"};
const PROGRESSA = {valor:3, nota:"Progressa adequadament"};
const MOLTBE = {valor:4, nota:"Molt bé!"};Exemple complet:
const SUSPEN = { valor: 1, nota: "Suspén" };
const MILLORAR = { valor: 2, nota: "Necessita millorar" };
const PROGRESSA = { valor: 3, nota: "Progressa adequadament" };
const MOLTBE = { valor: 4, nota: "Molt bé!" };
function avaluacio(puntuacio) {
if (puntuacio < 5) {
return SUSPEN;
} else if (puntuacio < 7) {
return MILLORAR;
} else if (puntuacio < 9) {
return PROGRESSA;
} else {
return MOLTBE;
}
}
// Exemple d’ús:
let resultat = avaluacio(8);
console.log(resultat.nota);
// Mostrar objecte complet.
console.log(resultat);Característiques:
let a = 3;
let a = 4; // ERROR, no es pot redeclararCaracterístiques:
var a = "hola";Característiques:
Exemple:
let a = 5;
let b = 10.5;
let total = a + b;
console.log(total); // 15.5Característiques:
Ex: let s1 = `Bon dia`;Exemples:
let greetings1 = "Hola";
let greetings2 = 'Hola';
let name = "Anna";
let greetings3 = `Hola, ${name}`;// output: Hola, Anna
let s1 = "Ens n'anem";
let s2 = "El seu nom és 'Jordi";
let s3 = 'El seu nom és "Jordi"';
let s4 = "El seu nom és \"Jordi\"";
let nom = "Jordi";
let s5 = `El seu nom és "{nom}"`;
let cadena = `primera línia
segona línia
tercera línia`;
let quantitat = 3;
let preu = 200;
let import = `Import: ${quantitat * preu}`; // Import: 600
Els booleans només tenen dos valors (true i false) i són essencials per a condicions.
let a = false;
let b = true;Undefined s’assigna automàticament a les variables que s’han declarat, però no tenen valor.
let age;
console.log(age);Null és un valor específic que indica l’absència intencionada de valor.
let user = null;Diferència entre null i undefined → undefined indica que la variable no té valor assignat, mentre que null es fa servir per indicar que la variable ha estat intencionadament buida o sense valor.
let a;
console.log(a); // undefined
let b = null;
console.log(b); // null
console.log(a == b); // true (undefined i null són iguals...)
console.log(a === b); // false (... però no són idèntics!!!)Un altre exemple:
console.log(variable ? variable : undefined);
console.log(window.variable ? variable : undefined);
let variable;
console.log(variable ? variable : undefined);
let variableU = undefined;
console.log(variableU ? variableU : undefined);
let variableN = null;
console.log(variableN ? variableN : undefined);
console.log(variableN !== null ? variableN : null);Arrays → Es veuen més endavant amb detall. Objectes → Es veuen més endavant amb detall.
Les variables poden tenir diferents tipus en cada moment. Per exemple:
let a; // a = undefined;
a = true; // 'a' conté un valor booleà
a = 5; // 'a' conté ara un número
a = "Hello"; // 'a' conté ara un string
a = [1, 2, 3]; // 'a' conté ara una referència a un array
a = {nom:"Mary", edat:25}; // 'a' conté ara una referència a un objecte
a = function(x) { return 2 * x; }; // 'a' conté ara una referència a una funcióExemple:
// És important distingir entre == i === (i també entre != i !==):
let a = null;
console.log(a == undefined); // true (undefined i null són equivalents a false)
console.log(a === undefined);// false (undefined i null no tenen el mateix significat)
console.log(1 == "1"); // true ("1" es converteix a 1)
console.log(1 === "1"); // false (no es fa la conversió)
Alguns casos curiosos (no intenteu entendre'ls!)
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // trueLes conversions es poden veure en aquests exemples:
let a, b, c, d;
a = "5" + 5; // "55" (string)
b = 5 + "5"; // "55" (string)
c = "5" - 5; // 0 (number)
d = "5" * "5"; // 25 (number)
a = "15" > 5; // true 15 > 5
b = 5 > "15"; // false 5 > 15
c = "15" > "5"; // false
d = "5" > "15"; // trueEls operadors matemàtics més comuns són:
+ → Suma- → Resta* → Multiplicació/ → Divisió% → Mòdul (resta de la divisió)Exemple de codi:
let a = 10;
let b = 3;
console.log(a + b); // Output: 13 (suma)
console.log(a - b); // Output: 7 (resta)
console.log(a * b); // Output: 30 (multiplicació)
console.log(a / b); // Output: 3.333333... (divisió)
console.log(a % b); // Output: 1 (mòdul: el residu de la divisió)Operacions d’assignació són:
= → s’assigna un valor.+= → Suma i assignació (ex.: x += y és
equivalent a x = x + y).-= → Resta i assignació (ex.: x -= y és
equivalent a x = x - y).*= → Multiplicació i assignació (ex.:
x *= y)./= → Divisió i assignació (ex:
x /= y).Exemple de codi:
let x = 5;
x += 3; // Equivalent a x = x + 3
console.log(x); // Output: 8
x -= 2; // Equivalent a x = x - 2
console.log(x); // Output: 6
x *= 4; // Equivalent a x = x * 4
console.log(x); // Output: 24
x /= 3; // Equivalent a x = x / 3
console.log(x); // Output: 8L’operació de concatenació:
+ → L’operador + no només serveix per sumar números,
sinó també per concatenar cadenes de text. També es poden concatenar
cadenes literals i valors numèrics.Exemple de codi:
let nom = "Maria";
let salutacio = "Hola, " + nom + "!";
console.log(salutacio); // Output: "Hola, Maria!"
let resultat = 5 + 3;
console.log("El resultat és: " + resultat); // Output: "El resultat és: 8"Exemple de codi:
let nom = "Víctor";
let salutacio = `Hola ${nom}`;
console.log(nom);Els operadors de comparació són utilitzats per comparar dos valors i retornar un valor booleà (true o false). A partir del resultat, de manera reactiva, realitzem una acció. Llista d’operadors:
Ex.: 5 == "5" → trueEx.: 5 === "5" → falseEx.: 5 < 6 → trueEx.: 5 > 6 → falseEx.: 5 <= 5 → true>Ex.: 5 >= 6 → falseExemple de codi:
let resultat1 = 10 > 5; // true
let resultat2 = "Hola" === "hola"; // false (diferència entre majúscules i minúscules)
let resultat3 = 20 <= 20; // true
let resultat4 = null !== undefined; // true
console.log(resultat1, resultat2, resultat3, resultat4);Algunes operacions amb números:
Podeu trobar més mètodes a: https://www.w3schools.com/js/js_number_methods.asp
Exemple de codi:
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- Primera secció és per veure algunes operacions matemàtiques típiques-->
<p id="suma"></p>
<p id="resta"></p>
<p id="multiplicacio"></p>
<p id="divisio"></p>
<!-- Aquesta secció és per veure el funcionament del triple = -->
<p id="comparar2iguals"></p>
<p id="comparar3iguals"></p>
<p id="comparar3iguals2"></p>
<!-- Aquesta seccio és per veure les diferents operacions matemàtiques -->
<p id="typeof"></p>
<p id="isnannan"></p>
<p id="isnanstring"></p>
<p id="isnan12string"></p>
<p id="isnannan12number"></p>
<p id="toString"></p>
<p id="toFixed"></p>
</body>
</html>JS
suma=2+2;
resta=2-1;
multiplicacio=2*22;
divisio=22/2;
/* Comparacions retornen un boleà*/
comparar2iguals = 40 == "40";
/*La comparació dels 3 iguals no només compara els valors sinó també els tipus */
comparar3iguals = 40 === "40"; /*En aquest cas la comparació retorna false*/
comparar3iguals2 = 40 === 40; /*En aquest cas la comparació retorna true*/
document.getElementById("suma").innerHTML = suma;
document.getElementById("resta").innerHTML = resta;
document.getElementById("multiplicacio").innerHTML = multiplicacio;
document.getElementById("divisio").innerHTML = divisio;
document.getElementById("comparar2iguals").innerHTML = comparar2iguals;
document.getElementById("comparar3iguals").innerHTML = comparar3iguals;
document.getElementById("comparar3iguals2").innerHTML = comparar3iguals2;
/* Operacions amb números */
document.getElementById("typeof").innerHTML = typeof suma;
/*NaN indica que no és un número*/
/*isNaN comprova si el que hi ha entre els parèntesis té un número*/
document.getElementById("isnannan").innerHTML = isNaN(NaN);
document.getElementById("isnanstring").innerHTML = isNaN("blabla"); /*Retorna true perquè és una cadena de caràcters*/
document.getElementById("isnan12string").innerHTML = isNaN("12"); /*En aquest cas dona el resultat a false perquè enten que el 12 entre cometes també és un número*/
document.getElementById("isnannan12number").innerHTML = isNaN(12); /* Retorna false perquè és un número*/
/* Converteix un número a una cadena de caràcters*/
document.getElementById("toString").innerHTML = typeof suma.toString();
/* Dona un format al número*/
document.getElementById("toFixed").innerHTML = suma.toFixed(2);Algunes operacions amb cadenes de text:
Podeu trobar més mètodes a: https://www.w3schools.com/js/js_string_methods.asp
Exemples de codi:
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- Aquesta secció és per veure les operacions amb cadenes de caràcters -->
<p id="concatenacio"></p>
<p id="concatenacio2"></p>
<p id="length"></p>
<p id="include"></p>
<p id="slice"></p>
<p id="replace"></p>
<p id="trim"></p>
<p id="split"></p>
</body>
</html>JS
/* Operacions anb Strings*/
/*Concatenació típica*/
document.getElementById("concatenacio").innerText = "Paraula 1 a concatenar" + ", paraula2 a concatenar";
/* concatenació amb variables */
let paraula= "world" ;
document.getElementById("concatenacio2").innerText = `Hello ${paraula}`;
/* length servei per indicar la longitud de la cadena de text */
document.getElementById("length").innerText = paraula.length;
/* includes serveix per indicar si un tros de text s'inclou a la cadena de text */
document.getElementById("include").innerText = paraula.includes('or');
/*slice talla un tros del text*/
document.getElementById("slice").innerText = paraula.slice(1,3);
/* Replace substitueix un tros de text per un altre */
document.getElementById("replace").innerText = paraula.replace("o","ooooooo");
/* trim elimina els espais en blanc del principi i del final */
paraula = " world ";
document.getElementById("trim").innerText = paraula.trim();
/* split separa la cadena de text pel caracter dintre de la funció donant una array amb els trossos separats sense el caràcter separador*/
paraula = "aaa,aa,aaaa";
paraula2 = paraula.split(',');
document.getElementById("split").innerText = paraula2[0];Els operadors lògics permeten combinar condicions per prendre decisions més complexes.
Llista d’operadors:
Ex.: 5 > 3 && 10 > 7 → trueEx.: 5 > 10 || 10 > 7 → trueEx.: !true → falseExemple de codi:
let edat = 18;
let carnet = true;
let cotxe = false;
let potConduir = (edat >= 18) && carnet; // true && true -> true
let potConduirSenseCotxe = potConduir || cotxe; // true || false -> true
let noTeCotxe = !cotxe; // !false -> true
console.log("Pot conduir:", potConduir);
console.log("Pot conduir sense cotxe:", potConduirSenseCotxe);
console.log("No té cotxe:", noTeCotxe);Què és una condició?
if (condició) sentència;. Si la condició és certa,
s’executa l’expressió. Després, tant si la condició és certa com si no,
es continua amb la següent sentència.Per exemple: if (x < 0) x = -x;
if (condició) {
// Bloc de codi que s'executa si la condició és certa
} else {
// Bloc de codi que s'executa si la condició és falsa
}Exemple de codi:
let edat = 20;
if (edat >= 18) {
console.log("És major d'edat.");
} else {
console.log("És menor d'edat.");
}Estructura amb bloc else if
if (a > b) {
// Sentències que s'executaran si la condició és certa
} else if (b > c) {
// Sentències que s'executaran si la condició anterior és falsa i aquesta és certa
} else if (c > d) {
// Sentències que s'executaran si les condicions anteriors són falses i aquesta és certa
} else {
// Sentències que s'executaran si totes les condicions anteriors són falses
}Exemple de codi:
let nota = 8;
if (nota >= 9) {
console.log("Excel·lent!");
} else if (nota >= 6) {
console.log("Has aprovat.");
} else {
console.log("Has suspès.");
}Estructura amb ifs anidats
if (a > b) { // 1ª condició
if (b > c && c > d) { // 2ª condició
// Sentències que s'executaran si la 1ª condició és certa i la segona també
} else {
// Sentències que s'executaran si la 1ª condició és certa i la segona falsa
}
} else {
// Sentències que s'executaran si la 1ª condició és falsa
}L’operador ternari és una alternativa simplificada a l’estructura
if-else.
Utilitza aquesta sintaxi:
true o
false).true.false.let a = (5 > 4 ? "Més gran": "Més petit");L’estructura switch case permet comparar una variable o
expressió amb diversos valors predefinits i executar blocs de codi
diferents segons el resultat. L’estructura bàsica és:
switch (expressió) {
case valor1:
// Codi per al cas valor1
break;
case valor2:
// Codi per al cas valor2
break;
default:
// Codi per al cas per defecte
}Exemple:
switch (estat) {
case "on":
// Sentències que s'executaran si la variable 'estat' té le valor 'on'
break;
case "off":
// Sentències que s'executaran si la variable 'estat' té le valor 'off'
break;
default:
// Sentències que s'executaran si la variable 'estat' no té cap dels valors anteriors
}Un altre exemple:
const dia = 3;
switch (dia) {
case 1:
console.log("Dilluns");
break;
case 2:
console.log("Dimarts");
break;
case 3:
console.log("Dimecres");
break;
default:
console.log("Dia no vàlid");
}Què és un array(vector o llista)?
Característiques dels arrays
Exemple de codi:
const fruites = new Array();
fruites[0] = "taronja";
fruites[1] = "llimona";
fruites[2] = "plàtan";o bé
const fruites = new Array( "taronja", "llimona", "plàtan" );Un altre exemple:
const fruites = [];
fruites[0] = "taronja";
fruites[1] = "llimona";
// Deixem les posicions 2 i 3 buides
fruites[4] = "plàtan";o bé
const fruites = [ "taronja", "llimona", , , "plàtan" ];Accedir un element
Per accedir a un element fruits[0] Modificar un
element
fruits[1] = "pera"
console.log(fruits);En Javascript un array no té una mida fixa en general. Per tant es poden afegir o eliminar elements en qualsevol moment.
Hi ha diverses maneres d’afegir elements a un array:
Afegir un sol element:
let matriz= ['1', '2', '3'];
matriz.push('4');
console.log(matriz); // resultat: ['1', '2', '3', '4']Afegir diversos elements:
let matriz= ['1', '2', '3'];
matriz.push('4', '5', '6');
console.log(matriz); // resultat: ['1', '2', '3', '4', '5', '6']Afegir el contingut d’un array a un altre array:
let a = ['1', '2', '3'];
let b = ['4', '5', '6'];
a.push.apply(a, b);
console.log(a); // resultado: ['1', '2', '3', '4', '5', '6']Afegir un sol element:
let matriz = ['1', '2', '3'];
matriz.unshift('0');
console.log(matriz); // resultat: ['0', '1', '2', '3']Afegir diversos elements:
let matriz = ['1', '2', '3'];
matriz.unshift('-1', '0');
console.log(matriz); // resultat: ['-1', '0', '1', '2', '3']let matrizOriginal = ['1', '2', '3'];
let matrizAgregar = ['4', '5', '6'];
let nuevaMatriz = matrizOriginal.concat(matrizAgregar);
console.log(nuevaMatriz); // resultat: ['1', '2', '3', '4', '5', '6']
console.log(matrizOriginal); // resultat: ['1', '2', '3']Un altre exemple amb la mateixa variable:
let matrizOriginal = ['1', '2', '3'];
let matrizAgregar = ['4', '5', '6'];
matrizOriginal = matrizOriginal.concat(matrizAgregar);
console.log(matrizOriginal); // resultat: ['1', '2', '3']Afegir un parell d’arrays a un array buit:
let a = ['1', '2', '3'];
let b = ['4', '5', '6'];
let c = [].concat(a, b);
console.log(c); // resultat:['1', '2', '3', '4', '5', '6']Per exemple:
let a = ['1', '2', '3'];
let nuevaMatriz = ['0', ...a, '4'];
console.log(nuevaMatriz); // resultat: ['0', '1', '2', '3', '4']Exemple de combinació d’operador de propagació amb push:
let a = ['1', '2', '3'];
let b = ['4', '5']
a.push(...b);
console.log(a); // resultat: ['0', '1', '2', '3', '4', '5']Exemple:
let a = ['1', '2', '3'];
a[a.length] = '4';
console.log(a); // resultat: ['1', '2', '3', '4']La forma és:
array.splice(index, total d'elements a eliminar, elements a afegir)
Exemple:
let c = ['1', '2', '3'];
c.splice(2, 0, '4', '5');
console.log(c); // resultat ['1', '2', '4', '5', '3']
let d = ['1', '2', '3'];
d.splice(2, 1, '4', '5');
console.log(d); // resultat ['1', '2', '4', '5']Funcions que permeten afegir o eliminar elements:
Arrays associatius són uns arrays que permet accedir als seus elements utilitzant un nom en lloc d’un índex. JavaScript permet utilitzar arrays associatius, però són similars als objectes. Es veuen més endavant els objectes
Una iteració és una manera de repetir una o més instruccions fins que
es compleixi una condició o sobre un conjunt de dades. S’utilitzen per
evitar repetir manualment el mateix codi quan es treballa amb
col·leccions (arrays, objectes) o s’ha de repetir una tasca un nombre
determinat de vegades. Es recomana utilitzar for quan se sap quantes
vegades s’ha de repetir el bucle. for → Ideal quan saps quantes vegades
has de repetir una acció. S’acostuma a utilitzar amb conjunts d’elements
dels quals es coneix la seva mida (el nombre d’elements que contenen),
per exemple les llistes. A continuació del for es poden posar 3
expresions separades per ;:
Qualsevol de les 3 expressions pot estar buida si no és necessària, fins i tot les 3. Si la segona expressió està buida, el bucle s’executarà indefinidament o s’haurà d’utilitzar la comanda break dins del bucle per sortir.
Exemple de sintaxi:
for (inicialització; condició; increment){
// instruccions
}Exemple de codi:
for(let i = 1; i < 10; i++){
console.log(i);
}Exemple de codi:
for(let i = 0; i < 10; i++){
for(let j = 0; i < 10; i++){
console.log((i*10) + j);
}
}Altres estructures for que utilitzarem més endavant:
while
S’utilitza quan no saps exactament quantes iteracions es faran, però tens una condició que decideix quan parar. Serveix per executar un bloc de codi mentre la condició sigui certa (bucle condicional). Si la primera vegada la condició és falsa, el codi no s’executa cap vegada.
Sintaxi:
while (condicio){
}Exemple:
let contador = 1;
while (contador <= 5){
console.log(contador);
contador++;
}do…while
És igual que while, però s’assegura que el codi s’executa almenys una vegada abans de verificar la condició.
La sintaxi és:
do{
// Instruccions
} while (condicio)Exemple:
let contador = 1;
do {
console.log(contador);
contador++;
} while (contador <= 5);Les característiques dels objectes són:
const persona = {
nom: "Joan",
edat: 25,
ciutat: Barcelona
}Per accedir a un objecte podem accedir a les propietats i mètodes d’un objecte amb l’operador punt “.” darrera de la instància d’un objecte.
Per exemple:
console.log(persona.nom)
console.log(persona["edat"])Per modificar o assignar valors, ho fem amb l’igual. També per afegir una nova propietat. En canvi, per eliminar propietats, utilitzem l’operador delete.
persona.edat = 27;
persona.professio = "Enginyer";
delete persona.ciutat;Per iterar els objectes ho fem amb un for…in:
for (const clau in persona){
console.log(clau + ": "+ persona[clau])
}Treballar amb arrays d’objectes és el mateix que treballar amb un array:
let alumne = {
nom: "Maria",
assignatures:["Sistemes", "Anglès", "IPO"]
}
console.log(alumne.assignatures[0]);Declaració d’objectes de tipus array. Hi ha 3 maneres:
let persona = {
nom:"Marc",
cognoms: "Albareda Sirvent"
edat:18,
fullname: function(){
return this.nom + " " + this.cognoms
}
}function Persona (nom, cognoms, edat) {
this.nom = "Marc",
this.cognoms= "Albareda Sirvent"
this.edat=18,
this.fullname= function(){
return this.nom + " " + this.cognoms
}
}
let a = new Persona()
console.log(a)
function Persona2 (nom, cognoms, edat) {
this.nom = nom,
this.cognoms= cognoms
this.edat=edat,
this.fullname= function(){
return this.nom + " " + this.cognoms
}
}
let b = new Persona2("A","B",1)
console.log(b)let persona = new Object({
nom:"Marc",
cognoms: "Albareda Sirvent"
edat:18,
fullname: function(){
return this.nom + " " + this.cognoms
}
})S’utilitza per iterar sobre les propietats d’un objecte o els índexs d’un array. És útil quan es necessita accedir a les claus o posicions dels elements.
Exemple:
let persona = {
nom: "Anna",
edat: 30,
ciutat: "Barcelona"
};
for (let propietat in persona) {
console.log(propietat + ": " + "persona[propietat]");
}Un altre exemple:
let colors = ["vermell", "blau", "verd"];
for (let index in colors) {
console.log("Index: " + index + ", Valor: " + colors[index]);
}S’utilitza per iterar sobre valors en estructures iterables, com arrays, cadenes, o objectes Set i Map. S’utilitza quan només t’interessen els valors i no els índexs.
Exemple:
let colors = ["vermell", "blau", "verd"];
for (let index of colors) {
console.log("Fruita: " + index);
}Un altre exemple:
let text = "Hola";
for (let lletra of text) {
console.log(lletra);
}S’utilitza per recórrer arrays aplicant una funció o operació a cada element. Sempre que es pugui, es prefereix les anteriors estructures.
Exemple:
let fruits = ["poma", "pera", "plàtan"];
fruits.forEach((fruit, index) => {
console.log(`Índex: ${index}, Fruita: ${fruit}`);
});Un altre exemple de codi:
let numeros = [1, 2, 3, 4, 5];
numeros.forEach((numero) => {
console.log(`Número: ${numero}`);
});Els objectes que hi han predefinits són:
Característiques:
Mètodes més importants:
Les caràcterístiques són:
Els mètodes més importants són:
Les característiques més importants són:
Exemples de crear dates:
new Date(); // Data i hora actuals
new Date(2010, 4); // 01/05/2010 a les 00:00:00
new Date(2024, 11, 25); // Dia de Nadal a les 00:00:00
new Date(2024, 0, 15, 23, 30); // 15/01/2024 a les 23:30:00Exemples de crear dates fora de rang:
new Date(2024, 9, 0); // 30/09/2024 (darrer dia del mes anterior)
new Date(2024, 13, 5); // 5/02/2025 (13 = febrer de l'any següent)
new Date(2024, 0, 0); // 31/12/2023 (darrer dia del 2023)
new Date(2024, -2, 10); // 10/11/2023 (2 mesos enrere respecte a l'any)Els mètodes més importants són:
Mètodes per calcular dates i hores
Exemple de sumar dies amb una data:
let d = new Date(); // Data d'avui
let dia = d.getDate(); // Obtenim el dia del mes
d.setDate(dia + 75); // Sumem dies a la data
let nouDia = d.getDate()
let nouMes = d.getMonth() + 1Exemple de calcular la diferència entre 2 dates:
let dataAvui = new Date();
let dataNadal = new Date(dataAvui.getFullYear(), 11, 25);
let diesNadal = Math.floor( (dataNadal - dataAvui) / (24 * 60 * 60 * 1000) );Busca 2 exemples de llenguatges de programació interpretats i 2 llenguatges programació compilats. Indica l’any de la seva creació.
Busca 5 esdeveniments que es poden fer en una pàgina web.
Ves a 3wschool i prova de canviar els diferents estils de l’exemple de la diapositiva anterior.
Busca per internet un parell de pàgines i identifica el tipus.
Busca per internet una pàgina web que tingui Javascript.
Agafa un codi que tinguis en JS i realitza un comentari d’una línia i un altre comentari de múltiples línies.
Indica si el nom d’aquestes variables és vàlid o invàlid i perquè:
Indicar el nom de les variables amb format camelCase dels següents exemples:
Exercicis de variables:
Escriu un programa que obté un nombre aleatori amb la funció random de la llibreria Math. El nombre aleatori va entre 1 i 10. L’usuari, mitjançant una pregunta prompt indicarà el nombre. Si s’encerta, mostrar el missatge trobat. En cas d’equivocar-se, indicar “Has fallat!”. Per mirar aleatori, consultar la pàgina: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Escriu un programa que obté 2 nombres aleatoris d’entre 1 i 10. A partir d’aquests 2 nombres, es fa una suma. En el cas, que els 2 nombres siguin igual, múltiplica per 2 la suma. Mostra el resultat en un missatge p per pantalla.
Crea un programa que faci la multiplicació o divisió de 2 nombres i que mostri el resultat a la pàgina web.
Escriu un programa que obté un nombre aleatori amb la funció random de la llibreria Math. El nombre aleatori va entre 1 i 10. L’usuari, mitjançant un input indicarà el nombre i un botó per calcular si s’encerta o no. Si s’encerta, mostrar el missatge trobat. En cas d’equivocar-se, indicar “Has fallat!”. Per més informació de com es genera els nombres aleatoris, consulta la pàgina: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Escriu un programa que obté 2 nombres amb inputs i un botó per calcular. A partir d’aquests 2 nombres, es fa una suma. En el cas, que els 2 nombres siguin igual, múltiplica per 2 la suma. Mostra el resultat en un missatge p per pantalla.
Fes una pàgina web que calculi el residu d’una divisió entre 25 entre 7 i mostri el resultat en una pàgina web.
Tens una variable x que comença amb el valor 10. Escriu un programa que realitzi les següents operacions, pas a pas, i calcula quin és el valor final de x després de cada operació. Per iniciar el càlcul, que sigui a través d’un botó a la pàgina web i que mostri el resultat en un element p. Els passos són:
Imagina que estàs creant un sistema senzill per generar el perfil d’un jugador d’un videojoc. Hauràs de calcular punts totals, bonificacions i presentar el resultat en format de text. Els càlculs s’activen quan es clica el botó i el resultat es mostra en una etiqueta p. Els passos són:
Escriu un programa en JavaScript que generi una frase personalitzada utilitzant variables per representar el nom, l’edat i la ciutat d’una persona. La frase ha de tenir el següent format: “Sóc en/na [nom], tinc [edat] anys i visc a [ciutat].”. Recorda de posar un botó que inici l’script i una etiqueta p per mostrar.
Instruccions:
Compara els següents valors:
Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Condicions senzilles: Declara una variable amb la temperatura i escriu un programa que imprimeixi:
Comprova si un número és parell o senar. Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat. El nombre s’obté de manera aleatoria. Consulta la pàgina web: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat. El javascript ha de fer:
puntuacio i assigna-hi
un valor entre 0 i 100. Aquest valor, s’obté de manera aleatoria."Suspens" si la
puntuació és inferior a 50. "Aprovat" si està entre 50 i 69
(inclosos). "Notable" si està entre 70 i 89 (inclosos).
"Excel·lent" si és 90 o més.Fes una pàgina web que tingui un botó i una etiqueta p que mostri el
resultat. El javascript ha de fer: Declara una variable
temperaturaAigua amb un valor numèric. Aquest valor, s’obté
de manera aleatoria entre 0 i 100. Després, determinar que:
"Aigua calenta" si la temperatura és de 60 graus o
més."Aigua tèbia" si està entre 30 i 59 graus."Aigua freda" si és inferior a 30 graus.Operador ternari. Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat. El javascript ha de fer: Determini si una persona pot rebre descompte segons la seva edat:
Operador ternari. Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat. El javascript ha de fer:
Operador ternari. Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat. El javascript ha de fer:
Operador ternari. Fes una pàgina web que tingui un botó i una etiqueta p que mostri el resultat:
Estructura switch case. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són: * Declara una variable num i assigna-hi un número entre 1 i 5 de manera aleatoria * Crea una estructura switch que imprimeixi un missatge segons el valor:
Estructura switch case. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són: * Declara una variable nota amb un valor entre 0 i 10. Aquest valor és aleatori. * Utilitza una estructura switch per classificar la nota en categories:
* De 0 a 4 → "Suspens".
* De 5 a 6 → "Aprovat".
* De 7 a 8 → "Notable".
* De 9 a 10 → "Excel·lent".
* Guarda el text a la variable resultat i mostra-ho per pantalla.Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per fer les operacions de JS indicades més abaix i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per fer les operacions de JS indicades més abaix i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per fer les operacions de JS indicades més abaix i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. Fes una pàgina web que tingui un botó per fer les operacions de JS indicades més abaix i una etiqueta p que mostri el resultat. Les instruccions són:
Bucles. fes el mateix que l’exercici 43, però amb un do…while.
Bucles. Fes una pàgina web que tingui un botó per fer les operacions de JS indicades més abaix i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un quadre de text per posar un valor numèric. Després 2 botons, un que posi Fahrenheit i un altre Celsius. Finalment, un element p per mostrar el resultat. Les instruccions són:
Igual que l’exercici 45, però substitueix els 2 botons per un botó i una llista desplegable amb els valors Fahrenheit i Celsius. Per defecte, estigui seleccionat el primer valor de la llista desplegable. La llista desplegable ha de ser HTML.
Fes una pàgina web que tingui un botó per executar les instruccions i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per executar les instruccions i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per executar les instruccions, un quadre de text i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per executar les instruccions i una etiqueta p que mostri el resultat. Les instruccions són:
"Suspens" si la puntuació és inferior a 50."Aprovat" si està entre 50 i 69 (inclosos)."Notable" si està entre 70 i 89 (inclosos)."Excel·lent" si és 90 o més.Fes una pàgina web que tingui un botó per executar les instruccions i una etiqueta p que mostri el resultat. Les instruccions són:
Fes una pàgina web que tingui un botó per executar les instruccions i una etiqueta p que mostri el resultat. Les instruccions són:
Objecte. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Crea un objecte Cotxe. Aquest objecte es guardarà a la variable vehicle. Els atributs de l’objecte són: marca, model i any. Posa-lis els valors que vulguis. Un cop creat, afegeix una nova propietat ecològic. Posa-li el valor que vulguis. Mostra el contingut de l’objecte a l’element p.
Arrays i objectes. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
L’índex 0 conté l’element meloArrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Fruita: Meló.Arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Objecte. Fes una pàgina web que tingui 3 inputs amb les següents instruccions:
Arrays. Fes una pàgina web que tingui un text area i quan se li doni a un botó, indiqui amb un element p, o semblant, la paraula més repetida.
Arrays. Fes una pàgina web que tingui un botó per cada comprovació i una etiqueta p que mostri el resultat. Les instruccions són:
Arrays. Fes una pàgina web que tingui un text area i quan se li doni a un botó, indiqui amb un element p, o semblant, quantes paraules hi ha i quants cops surt la vocal i.
Arrays. Fes una pàgina web que tingui un text area i quan se li doni a un botó, indiqui amb un element p, o semblant, en quantes paraules surt la o, dintre de la paraula quantes vegades surt la O, mostrant la paraula. També, quants cops surt la vocal o i el total de paraules.
Objecte i arrays. Fes una pàgina web que tingui un titol, un botó per executar les instruccions següents i un element p per mostrar el resultat de les instruccions:
Objectes i arrays. Fes una pàgina web que tingui 3 inputs que segueix les següents instruccions:
Objectes i arrays. Fes una pàgina web que tingui 3 inputs que segueix les següents instruccions:
Objectes i arrays. Fes una pàgina web que tingui 4 inputs que segueixi les següents instruccions:
Dates. Fes una pàgina web que al ciclar el botó, mostri en un element p la data i l’hora actuals en el format següent:
Dates. Fes una pàgina web que al ciclar el botó, mostri en un element p quants dies queden per al pròxim 1 de gener.
Pista: Resta la data actual d’una data futura (1 de gener de l’any següent) i converteix la diferència en dies. Utilitza els mètodes Date.now() o getTime().
Dates. Fes una pàgina web que tingui un botó i un element p per mostrar el resultat. A més, crea 3 inputs per recollir, un dia, mes i any que posi l’usuari. Al clicar el botó ha de fer:
Dates. Fes una pàgina web que tingui un botó i un element p. Al clicar el botó ha de seguir les següents instruccions: