Unitat 4. Introducció a la programació amb Javascript.
https://ioc.xtec.cat/materials/FP/Materials/2251_ASIX/ASIX_2251_M03/web/html/media/fp_asix_m03_u2_pdfindex.pdf
– Per aprendre a programar amb Javascript usarem la pàgina w3schools.com i el llibre Eloquent Javascript. Cada un d’ells ens ajudaran a entendre com i que és programar. W3schools eines de que disposam i el llibre eloquent ens ensenya l’art de programar.
“Javascript és el llenguatge de programació que actua sobre el client. Malgrat això s’estan desenvolupant programes per poder actuar sobre el servidor sense la necessitat de usar altres llenguatges”
INTRODUCCIÓ
“Nosaltres pensam que cream es sistemes per els nostres propis proposits. Nosaltres creim que ho feim a la nostra imatge … però, la computadora no és com nosaltres. És una projecció d’una part molt prima de nosaltres: la porció que és lògica, ordenada, reglada i clara”.
Ellen Ullman, Close to the machine: Technophilia and its Discontents.
Programar és l’acte de construir un programa, un conjunt precís d’instruccions que diuen a la computadora que ha de fer. ja que les computadores són loques, pedants i bèsties incontrolables, la programació és tediosa i frustrant.
Afortunadament si tenim el rigor de pensar en termes d’una màquina, programar pot ser gratificant. Això permet que es puguin realitzar tasques complexes en un sol segon i tenirles sempre a mà. Es una manera de fer que la computadroa faci coses que no feia abans. Això també proveeix de meravellosos exercicis dins del pensament abstracte.
La majoria de programes que existeixen estan fets amb llenguatges de programació. Un llenguatge de programació és un artifici construït per introduir ordres a una computadora.
Nosaltres explorarem Javascript com a llenguatge.
PRINCIPIS BÀSICS DE LA PROGRAMACIÓ.
PER QUÈ FUNCIONEN ELS LLENGUATGES?
Una màquina enten 0 i 1, l'encés/apagat momentani de bits. Ho fa amb grups de paraules de zeros i uns, normalment bytes. 00110001 00000000 00000000 00110001 00000001 00000001 00110011 00000001 00000010 01010001 00001011 00000010 00100010 00000010 00001000 01000011 00000001 00000000 01000001 00000001 00000001 00010000 00000010 00000000 01100010 00000000 00000000
- Store the number 0 in memory location 0.
- Store the number 1 in memory location 1.
- Store the value of memory location 1 in memory location 2.
- Subtract the number 11 from the value in memory location 2.
- If the value in memory location 2 is the number 0, continue with instruction 9.
- Add the value of memory location 1 to memory location 0.
- Add the number 1 to the value of memory location 1.
- Continue with instruction 3.
- Output the value of memory location 0.
Set “total” to 0.
Set “count” to 1.
(loop) Set “compare” to “count”.
Subtract 11 from “compare”.
If “compare” is zero, continue at (end).
Add “count” to “total”.
Add 1 to “count”.
Continue at [loop].
(end) Output “total”.
let total = 0, count = 1;
while (count <= 10) {
total += count;
count += 1;
}
console.log(total);
// → 55
Un resum del codi més acurat
console.log(sum(range(1,10)));
//-> 55
Història del Javascript.
CAPITOL 1.
VALORS, TIPUS I OPERADORS
“Sota la superficie de la màquina, es moven els programa. Sense esforç, s’espandeix i es contreu. En una bona harmonia, electrons es dispersen i s’agrupen. Les formes al monitor són com a rissagues sobre l’aigua. L’essencia segueix sota, invisible.”
Master Yuan-Ma, The Book of programming.
Dins un ordinador sols hi ha dades. Podem llegir, modificar i crear dades. Totes aquestes dades s’enmmagatzemen com a seq¨ències de bits llargues i, per tant són fonamentalment iguals.
Els bits són qualsevol tipus de coses de dos valors, generalment descrits com zeros i uns. A l’interior de l’ordinador, prenen formes com una càrrega elèctrica alta o baixa, un senyal fort o feble o un lloc brillant o apagat a la superfície d’un CD. Qualsevol informació d’informació discreta es pot reduir a una seqüència de zeros i uns altres i, per tant, es representa en bits.
Per exemple, podem expressar el número 13 en bits. Funciona de la mateixa manera que un nombre decimal, però en comptes de 10 dígits diferents, només tenim 2 i el pes de cada un augmenta en un factor de 2 de dreta a esquerra. Aquests són els bits que conformen el número 13, amb els pesos dels dígits que es mostren a continuació:
| 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 | |
| 13 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 1 |
Així que aquest és el número binari 00001101. Els seus dígits no nul·ls són 8, 4 i 1, i sumen fins a 13.
VALORS
Imagina un mar de bits, un oceà d’ells. Una computadora moderna típica té més de 30 mil milions de bits en el seu emmagatzematge de dades volàtils (memòria de treball). L’emmagatzematge no volàtil (el disc dur o equivalent) tendeix a tenir encara uns quants ordres de magnitud més.
Per poder treballar amb aquestes quantitats de bits sense perdre’s, hem de separar-los en trossos que representen peces d’informació. En un entorn JavaScript, aquests trossos es diuen valors. Encara que tots els valors estan formats per bits, tenen diferents funcions. Cada valor té un tipus que determina la seva funció. Alguns valors són nombres, alguns valors són peces de text, alguns valors són funcions, etc.
Per crear un valor, només ha d’invocar el seu nom. Això és convenient. No ha de reunir material de construcció per als seus valors o pagar per ells. Acaba de trucar a un, i qui ho fa, ho teniu. No són realment creats a partir d’aire fi, és clar. Cada valor s’ha d’emmagatzemar en algun lloc, i si voleu utilitzar una quantitat gegantesca d’aquests alhora, podeu quedar-se sense memòria. Afortunadament, aquest és un problema només si els necessiteu tots simultàniament. Tan aviat com ja no utilitzeu un valor, es dissiparà, deixant enrere els seus bits per ser reciclats com a material de construcció per a la pròxima generació de valors.
Aquest capítol introdueix els elements atòmics dels programes de JavaScript, és a dir, els tipus de valors simples i els operadors que poden actuar sobre aquests valors.
Nombres
Els valors del tipus de número són valors numèrics. En un programa JavaScript, s’escriuen de la següent manera:
13
Utilitzeu-lo en un programa i provocarà que el patró de bits del número 13 s’instal·li a la memòria de l’ordinador.
JavaScript utilitza un nombre fix de 64 bits per emmagatzemar un únic valor numèric. El nombre de números diferents que es poden representar és limitat.
Per exemple, a la base decimal, amb N dígits , podem representar fins a a 10 N números. De la mateixa manera, amb 64 dígits binaris, podeu representar 264 números diferents, que són aproximadament 18 quintil · lons (un 18 amb 18 zeros després d’això).
“La memòria de l’ordinador solia ser molt menor, i la gent tendia a utilitzar grups de 8 o 16 bits per representar els seus nombres. Era fàcil desbordar accidentalment aquests petits nombres, per acabar amb un número que no cabia en la quantitat de bits donada. Avui dia, fins i tot les computadores que s’adapten a la vostra butxaca tenen molta memòria, de manera que podeu utilitzar els trossos de 64 bits i necessiteu preocupar-vos de desbordar-vos només quan es tracti d’uns números veritablement astronòmics.”
No obstant això, no tots els números sencers són inferiors a 18 quintil · lons. Aquests bits també emmagatzemen nombres negatius, de manera que un bit indica el signe del número. Una qüestió més gran és que els números no blancs també han de ser representats. Per fer-ho, alguns dels bits s’utilitzen per emmagatzemar la posició del punt decimal. El número sencer màxim real que es pot emmagatzemar és més al rang de 9 quadrillions (15 zeros), que encara és gratament enorme.
Els números fraccionaris s’escriuen mitjançant un punt.
9,81
Per a números molt grans o molt petits, també podeu utilitzar una notació científica afegint un e (per a l’exponent), seguit de l’exponent del número.
2.998e8
Això és 2.998 × 108 = 299.800.000.
Els càlculs amb nombres sencers (també anomenats enters) més petits que els 9 quadrillions esmentats anteriorment es garanteixen que sempre sigui precís. Malauradament, els càlculs amb nombres fraccionaris no solen ser. De la mateixa manera que π (pi) no es pot expressar amb precisió per un nombre finit de dígits decimals, molts números perden certa precisió quan només hi ha 64 bits disponibles per emmagatzemar-los. Aquesta és una llàstima, però només provoca problemes pràctics en situacions específiques. L’important és tenir-ne consciència i tractar els nombres digitals fraccionals com a aproximacions, no com a valors precisos.
Aritmètica
El més important per fer amb els números és l’aritmètica. Les operacions aritmètiques com l’addició o la multiplicació prenen dos valors numèrics i produeixen un nombre nou d’ells.
A JavaScript es representen:
100 + 4 * 11
Els símbols + i * s’anomenen operadors. El primer és l’addició i el segon representa la multiplicació. Posar un operador entre dos valors s’aplicarà a aquests valors i produirà un nou valor.
Però l’exemple significa “afegir 4 i 100, i multiplicar el resultat per 11”, o la multiplicació realitzada abans de l’addició? Com s’hauria imaginat, la multiplicació passa primer. Però com en matemàtiques, podeu canviar-ho embolicant l’afegit entre parèntesis.
(100 + 4) * 11
Per a la resta, hi ha l’operador, i la divisió es pot fer amb l’operador.
Quan els operadors apareixen junts sense parèntesi, l’ordre en què s’apliquen es determina per la precedència dels operadors. L’exemple mostra que la multiplicació arriba abans d’afegir. L’operador / operator té la mateixa prioritat que *. De la mateixa manera, per a + i -. Quan apareguin múltiples operadors amb la mateixa prioritat, com a 1 – 2 + 1, s’apliquen d’esquerra a dreta: (1 – 2) + 1.
Aquestes regles de prioritat no són una cosa que hauríeu de preocupar. Quan tinguis algun dubte, només has d’afegir parèntesi.
Hi ha un operador aritmètic més, que no podeu reconèixer immediatament. El símbol% s’utilitza per representar l’operació de la resta. X% Y és la resta de la divisió X per Y. Per exemple, el 314% 100 produeix 14 i el 144% 12 dóna 0. La precedència de l’operador restant és la mateixa que la multiplicació i la divisió. També veuràs sovint a aquest operador anomenat mòdul.
Nombres especials
Hi ha tres valors especials en JavaScript que es consideren nombres, però no es comporten com els números normals.
Els dos primers són Infinity i Infinity, que representen els infinits positius i negatius. Infinity – 1 segueix sent Infinity, i així successivament. No obstant això, no confereix massa confiança en la computació basada en infinit. No és matemàticament bo, i ràpidament conduirà al següent número especial: NaN.
NaN significa “not un number”, tot i que és un valor del tipus de número. Obtindreu aquest resultat quan, per exemple, intenteu calcular 0/0 (zero dividit per zero), Infinity – Infinity o qualsevol altra quantitat d’operacions numèriques que no produeixin un resultat significatiu.
Strings. Cadenes. Cordes
El següent tipus de dades bàsiques és la cadena. Les cadenes s’utilitzen per representar text. S’encripten incloent el seu contingut en cometes.
`En mig del mar`
“Navegant per l’oceà”
‘Surant al Mediterrani’
Podeu fer servir cometes simples, dobles cometes o accents greus per marcar les cadenes, sempre que es mostrin les cometes al principi i al final de la cadena.
Una cadena pot contenir gairebé qualsevol cosa, JavaScript ho convertirà com un valor de cadena.
Alguns caràcters són difícils, especials. Com per exemple fer que les cometes entre cometes, les línies noves (els caràcters que obtens quan premem entrar) es poden incloure sense escapar només quan la cadena es cita amb backticks (`).
Per permetre incloure aquests caràcters en una cadena, s’utilitza la notació següent: cada cop que una barra invertida (\) es troba dins del text citat, indica que el caràcter després té un significat especial. Això s’anomena escapar del personatge. Una cita que precedeix una barra invertida no finalitzarà la cadena, sinó que serà part d’ella. Quan es produeix un caràcter n després d’una barra invertida, s’interpreta com una línia nova. De la mateixa manera, una t després d’una barra invertida significa un caràcter de pestanya. Agafeu la cadena següent:
"Aquesta és la primera línia \ n I aquest és la segona"
El text actual contingut és el següent:
Aquesta és la primera línia
I aquest és la segona
Hi ha, per descomptat, situacions en què voleu una barra invertida en una cadena per ser només una barra invertida, no un codi especial. Si dues barres inverses es succeeixen entre si, es colapsaran junts, i només un quedarà en el valor de cadena resultant. Així és com es pot expressar la cadena “Un caràcter de nova línia escrit com” \ n “.”
“Un caràcter de nova línia s’escriu com \” \ \ n \ “.”
Les cadenes, també, han de ser modelades com una sèrie de bits per poder existir a l’interior de l’ordinador. La manera JavaScript ho fa basant-se en l’estàndard Unicode. Aquesta norma assigna un nombre a pràcticament tots els caràcters que necessiteu, inclosos els caràcters grec, àrab, japonès, armeni, etc. Si tenim un nombre per a cada caràcter, una cadena pot ser descrita per una seqüència de nombres.
I això és el que fa JavaScript. Però hi ha una complicació: la representació de JavaScript utilitza 16 bits per element de cadena, que pot descriure fins a 216 caràcters diferents. Però Unicode defineix més caràcters que això, aproximadament el doble que molts, en aquest punt. Així que alguns personatges, com molts emoji, ocupen dues “posicions de caràcters” en cadenes de JavaScript. Tornem a això al capítol 5.
Les cadenes no es poden dividir, multiplicar ni restar, però es pot utilitzar l’operador +. No afegeix, però es concatenà: enganxa dues cordes. La següent línia produirà la cadena “concatenar”: “amb” + “cat” + “e” + “nate” Els valors de cadena tenen una sèrie de funcions associades (mètodes) que es poden utilitzar per realitzar altres operacions en ells. Vaig a dir més sobre aquestes en el Capítol 4. Les cadenes escrites amb cometes simples o dobles es comporten molt iguals, l’única diferència és en quin tipus de cita cal escapar dins d’elles. Les cadenes que es mostren a l’esquena, generalment anomenades literals de plantilles, poden fer alguns trucs més. A més de poder estendre les línies, també poden integrar altres valors. “La meitat de 100 és de $ {100/2]” Quan escriviu alguna cosa dins de $ {} en una plantilla literal, el seu resultat serà calculat, convertit a una cadena , i s’inclou en aquesta posició. L’exemple produeix “la meitat de 100 és de 50”.
Operadors unaris
No tots els operadors són símbols. Alguns estan escrits com a paraules. Un exemple és l’operador typeof, que produeix un valor de cadena que designa el tipus de valor que li dóna.
console.log (typeof 4.5)
// → número
console.log (typeof "x")
// → string
console.log ("El tipus de x és: " + typeof "x")
//-> El tipus de x és: string
La instrucció de Javascript console.log serveix per veure el resultat d’alguna cosa per la consola de programador. Veurem més exemples més endavant.
Els altres operadors mostren que tots operen en dos valors, però el tipus de només té un. Els operadors que utilitzen dos valors s’anomenen operadors binaris, mentre que els que prenen una s’anomenen operadors unaris. L’operador menys es pot utilitzar tant com a operador binari com com a operador unari.
console.log (- (10 - 2))
// → -8
Valors booleans
Sovint és útil tenir un valor que distingeix entre només dues possibilitats, com “sí” i “no” o “encès” i “apagat”. A aquest efecte, JavaScript té un tipus booleà, que només té dos valors, true i false.
Comparació. <,>,==,!=,<=,>=.
Aquí hi ha una manera de produir valors booleans:
console.log (3 > 2)
// → true
console.log (3 <2)
// → false
Els símbols < i > són els símbols tradicionals de “és més gran que” i “és menor que”, respectivament. Són operadors binaris. Aplicar-los dóna com a resultat un valor booleà, vertader o fals, depenent del cas.
Les cadenes es poden comparar de la mateixa manera.
console.log ("Aardvark" < "Zoroaster")
// → true
La manera com s’ordenen les cadenes és aproximadament alfabètic, però no el que esperaria veure en un diccionari: les lletres majúscules són sempre “menys” que les minúscules, de manera que “Z” <“a” i caràcters no alfabètics (!, -,) i així successivament) també s’inclouen a l’ordre. Quan es comparen les cadenes, JavaScript passa dels caràcters d’esquerra a dreta, comparant els codis Unicode un per un.
Altres operadors similars són> = (major o igual que), <= (menys o igual que), == (igual a) i ! = (no igual a).
console.log ("Itchy"!= "Scratchy")
// → true
console.log ("Apple" == "Orange")
// → fals
Només hi ha un valor en JavaScript que no és igual a ell mateix, i això és NaN (“no un número”).
console.log (NaN == NaN)
// → fals
Es suposa que NaN denota el resultat d’una computació sense sentit i, com a tal, no és igual al resultat d’altres càlculs sense sentit.
Operadors lògics.
| a | b | a&&b | a||b |
| true | true | true | true |
| true | false | false | true |
| false | true | false | true |
| false | false | false | false |
També hi ha algunes operacions que es poden aplicar als valors booleans. JavaScript admet tres operadors lògics: i, o, i no. Aquests es poden utilitzar per “raonar” sobre els booleans.
L’operador && representa operacions lògiques i. És un operador binari, i el seu resultat només és veritable si tots dos valors són vertaders.
console.log (true & & false)
// → fals
console.log (true & & true)
// → true
El | | L’operador denota lògic o. Produeix cert si un dels valors que s’hi donen són vertaders.
console.log (false | true)
// → true
console.log (false || false)
// → fals
No està escrit com a signe d’exclamació (!). És un operador unari que volteja el valor donat a! True produeix false, i! False true.
Quan es barreja aquests operadors booleans amb aritmètica i altres operadors, no sempre és obvi quan es necessiten parèntesis. A la pràctica, en general es pot saber coneixent els operadors que hem vist fins ara, || té la precedència més baixa, llavors arriba &&, després els operadors de comparació (>, ==, etc.), i després la resta. Aquest ordre ha estat triat de tal manera que, en expressions típiques com la següent, són necessaris els pocs parèntesis possibles:
1 + 1 == 2 & & 10 * 10> 50
L’últim operador lògic que tractaré no és unari, no binari, sinó ternari, que funciona amb tres valors. Està escrit amb un signe d’interrogació i un còlon, així:
console.log (true? 1: 2);
// → 1
console.log (false? 1: 2);
// → 2
Aquest s’anomena operador condicional (o de vegades només l’operador ternari, ja que és l’únic operador d’aquest tipus en l’idioma). El valor a l’esquerra del signe d’interrogació “selecciona” quina dels altres dos valors sortirà. Quan és cert, tria el valor mig i, quan és fals, tria el valor de la dreta.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \’ inserts a single quote in a string.</p>
<p id=”demo”></p>
<script>
a=100;
var x = ”;
var sortida=””;
while (a > 0) {
x=x+”*”;
sortida= sortida+x+”<br>”;
a–;
}
document.getElementById(“demo”).innerHTML = sortida;
</script>
</body>
</html>