TEMA 2
Fonaments
del llenguatge
Variables, decisions i bucles
D’on surt JavaScript
Java i JavaScript només comparteixen el nom. Va ser màrqueting.
Els motors (engines)
Node.js és el motor de Chrome fora del navegador.
HTML, CSS i JavaScript
PREGUNTA PER A LA CLASSE
«Vull que el botó es torni vermell quan el cliquen.»
És feina del CSS o del JavaScript?
El primer programa
PRIMER.JS
El codi// El meu primer programa
console.log('Hola, 2n SMX');
console.log('Som', 24, 'alumnes');
console.log(7 * 24);NODE PRIMER.JS
El que surtHola, 2n SMX Som 24 alumnes 168
Primer prediu què sortirà. Després executa.
Llegir un error
sintaxi.js:2
console.log('Hola);
^^^^^^^
SyntaxError: Invalid or
unexpected tokenLes línies que comencen per «at», de moment, no les llegeixis.
PREGUNTA PER A LA CLASSE
«Hi ha un SyntaxError a la línia 5.»
S’executen les línies 1 a 4?
let i const
La taula de traça
let a = 3; let b = 4; a = a + b; b = a - b; console.log(a, b);
A la línia 4, b ja fa servir la a nova.
Tipus de dades (data types)
Si porta cometes, és un string: '42' no és un número.
Operadors
ARITMÈTICS
% el residu10 / 4 // 2.5 7 % 2 // 1 2 ** 3 // 8 2 + 3 * 4 // 14
LÒGICS
&& || !edat >= 18 && teCarnet dissabte || diumenge !teCarnet
n % 2 === 0 vol dir que n és parell.
Sempre ===
IGUAL EN VALOR I TIPUS
===5 === '5' // false 0 === '' // false
CONVERTEIX I COMPARA
==5 == '5' // true 0 == '' // true
Un 0 i un text buit no són el mateix. == diu que sí.
PREGUNTA PER A LA CLASSE
«typeof '7'»
Què respon, i per què?
Plantilles literals (template literals)
CONCATENAR AMB +
'Em dic ' + nom + ' i tinc ' + edat + ' anys'
PLANTILLA LITERAL
`Em dic ${nom} i tinc ${edat} anys`Accent obert: la tecla de la dreta de la P, i després espai.
Text + número = problema
JAVASCRIPT CONVERTEIX
Sol'2' + 3 // '23' '5' - 2 // 3 '15' + '8' // '158'
TU CONVERTEIXES
A propòsitNumber('15') + Number('8')
// 23
Number('hola') // NaNTot el que arriba d’un formulari és text.
Decisions: if i else if
if (nota < 5) {
console.log('Insuficient');
} else if (nota < 7) {
console.log('Suficient o Bé');
} else {
console.log('Notable o més');
}Es miren de dalt a baix.
Només s’executa el primer bloc que es compleix.
L’ordre de les condicions importa.
switch i break
switch (dia) {
case 'dissabte':
case 'diumenge':
console.log('Festa');
break;
default:
console.log('Res');
}Sense break, continua executant els case de sota.
default és l’else del switch.
PREGUNTA PER A LA CLASSE
«nota = 8. La primera condició és nota >= 5.»
Arribarà mai a dir Notable?
El bucle for
El bucle while
WHILE
Mentre passiPer quan no saps quantes voltes caldran.
ABANS DE CADA VOLTA
Pregunta i faSi d’entrada és false, no en fa cap.
Ctrl + C
atura un bucle que no acaba
break i continue
BREAK
Surt del buclefor (let i = 1; i <= 10; i++) {
if (i === 4) {
break;
}
console.log(i);
}
// 1 2 3CONTINUE
Salta la voltafor (let i = 1; i <= 6; i++) {
if (i % 3 === 0) {
continue;
}
console.log(i);
}
// 1 2 4 5