Docsity
Docsity
Prepara i tuoi esami
Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity

Ottieni i punti per scaricare
Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium

Guide e consigli
Guide e consigli
Vendi su Docsity
Vendi su Docsity
Docsity AI
Docsity AI
AccediRegistrati

Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity

Cerca documenti

Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity

Cerca la tua università

Trova i documenti specifici per gli esami della tua università

Video Corsi

Preparati con lezioni e prove svolte basate sui programmi universitari!

Quiz

Rispondi a reali domande d’esame e scopri la tua preparazione

Docsity AINEW

Riassumi i tuoi documenti, fagli domande, convertili in quiz e mappe concettuali

Maturità 2026

Studia con prove svolte, tesine e consigli utili

Esplora domande

Togliti ogni dubbio leggendo le risposte alle domande fatte da altri studenti come te

Argomenti di studio

Esplora i documenti più scaricati per gli argomenti di studio più popolari

Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium

Condividi documenti
download point icon20 Punti

Per ogni documento caricato

Rispondi alle domande
download point icon5 Punti

per ogni risposta data (max 1 al giorno)

Tutti i modi per ottenere punti gratis
Ottieni punti subito

Scegli un piano Premium con tutti i punti di cui hai bisogno

Opportunità di studio

Scegli il tuo prossimo programma di studio

Entra in contatto con le migliori università del mondo e scegli il tuo percorso di studi

Classifica delle migliori università

Scopri le migliori università italiane secondo gli studenti

Community

Chiedi alla community

Chiedi aiuto alla community e sciogli i tuoi dubbi legati allo studio

Guide Gratuite

I nostri eBook salva studente

Scarica gratuitamente le nostre guide sulle tecniche di studio, metodi per gestire l'ansia, dritte per la tesi realizzati da tutor Docsity

Programmazione JS visual studio code, Appunti di Fondamenti di informatica

Alma Mater Studiorum – Università di Bologna (UNIBO)Fondamenti di informatica

Il file contiene le fondamenta per saper programmare e costruire un programma in linguaggio JS (con visual studio code) in grado di poter calcolare funzioni. Si ha una parte di teoria ed esempi concreti che guidano passo passo alla programmazione.

Tipologia: Appunti

2020/2021

In vendita dal 26/07/2021

rosssss11
rosssss11 🇮🇹

4.5

(2)

21 documenti

1 / 32

Toggle sidebar

Questa pagina non è visibile nell’anteprima

Non perderti parti importanti!

bg1
Programmazione:
-Descrizione HTML, CSS e JAVA SCRIPT
-Tipi nei linguaggi di programmazione: operatori, espressioni e funzioni, variabili, parametri
-Istruzioni nei linguaggi di programmazione: commenti, assegnazione, sequenza, scelta, ciclo
-Organizzazione di un programma: HIPO
-Tipi di classi in JS
-Classi ARRAY
-Eventi e la loro gestione
-Object
-JSON
-Programmi iterativi e ricorsivi (esempi fattoriale e Fibonacci)
-Vettori e matrici
-Risoluzione esame con programma di funzioni da definire e calcolare
-Come evidenziare elementi tramite class nel CSS
-BOXMODEL del CSS
-Breve introduzione ad R
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20

Anteprima parziale del testo

Scarica Programmazione JS visual studio code e più Appunti in PDF di Fondamenti di informatica solo su Docsity!

Programmazione:

  • Descrizione HTML, CSS e JAVA SCRIPT
  • Tipi nei linguaggi di programmazione: operatori, espressioni e funzioni, variabili, parametri
  • Istruzioni nei linguaggi di programmazione: commenti, assegnazione, sequenza, scelta, ciclo
  • Organizzazione di un programma: HIPO
  • Tipi di classi in JS
  • Classi ARRAY
  • Eventi e la loro gestione
  • Object
  • JSON
  • Programmi iterativi e ricorsivi (esempi fattoriale e Fibonacci)
  • Vettori e matrici
  • Risoluzione esame con programma di funzioni da definire e calcolare
  • Come evidenziare elementi tramite class nel CSS
  • BOXMODEL del CSS
  • Breve introduzione ad R

HTML

Html è un linguaggio per la descrizione degli elementi (linguaggio di descrizione testuale), presenta colori differenti per l’utilizzo di un editor. DOCTYPE indica al browser il tipo di documento. < > sono delle tag, utili per la descrizione degli elementi e della struttura del documento generale. Ci sono tag di apertura () e tag di chiusura (). Ci sono elementi puntuali che invece non hanno bisogno di tag di apertura/chiusura. Non si possono incrociare i tag: se gli ultimi 2 tag ( e ) fossero scritti in maniera diversa ci sarebbe un errore. Quando manca il tag di chiusura ce lo mette il browser, ma se invertiamo non ci può far nulla e lo mette come errore. Gli elementi possono avere degli attributi (seguono l’elemento dopo lo spazio): nome attributo seguito da un valore tra “ ” o ‘’→ dir=“ltr” Il testo è scritto all’interno di head in dentato (linee bianche laterali che servono a capire dove inizia e finisce il documento). I commenti vanno messi in tutte quelle situazioni in cui è necessario per chi va ad utilizzare il programma a distanza di giorni (non devono essere troppi, sennò diventano inutili). La pagina web è descritta da alcuni elementi obbligatori: doctype (non ci deve essere una riga vuota prima, deve essere nella 1° riga e occupare il 1° carattere, altrimenti il browser non è capace di riconoscere), al di fuori del documento si ha l’html (descrive le parti in cui è diviso il contenuto del documento stesso) che deve sempre contenere gli elementi head (contiene l’intestazione del documento, il

title cioè il titolo della finestra, non del documento, e informazioni

relative al documento) e body (contiene il documento che viene mostrato

all’utente e gli elementi h1, titolo principale del documento, che può

essere seguito da h2, titolo secondario e così via, poi c’è p che

rappresenta un capoverso). Head e Body sono elementi con scopi diversi, tutto deve avere un ordine (scritto dall’alto verso il basso, il tutto viene letto in sequenza). Ci sono quindi sia componenti obbligatorie (head e body) e facoltative (h1 e p) che si possono aggiungere.

CSS CSS descrive il modo di presentare il documento, è formato da un’unione di regole, ognuna di queste regole presenta un selettore con all’interno clausole {}. L’elenco di clausole può anche contenere 0 se vogliamo fare una regola vuota. Ci sono 2 regole del CSS (hanno più clausole):

  • html= descrive come deve essere visualizzato il documento totale;
  • body= descrive il corpo del documento (ha 2 clausole che descrivono come il contenuto del documento html viene visualizzato). I commenti (evidenziati in verde) rappresentano parti visibili solo al programmatore, in maniera tale che possa farne più facilmente la manutenzione. : Ogni clausola ha termini e valori (oggetti complessi che dipendono dalle proprietà considerate). Nel documento in esempio ci sono 3 unità di misura (numero e unità di misura sono scritti attaccati): margine in px (grandezza punto univoco dello schermo, punti fisici che hanno una loro grandezza), larghezza in mm, altezza in % (della finestra, html definisce finestra e al suo interno definisce la parte utilizzata dal documento). Boxmodel= rappresentazione oggetti nel documento html. I colori possono essere rappresentati in diversi modi: esadecimali, hsl, nome predefinito e RGB. RGB (in body completamente definito con la struttura) fa riferimento alla modalità di visione dell’occhio umano standard→nell’occhio umano c’è un tipo di sensore sensibile a 3 colori diversi (per il rosso ci sono dei coni nel nostro occhio, altri per il verde e altri per il blu), tutti gli altri colori si ottengono da questi tramite il modello di additività (nero=k, colore chiave; verde+blu=ciano, tipo di celeste; rosso+blu=magenta=m; rosso+verde=giallo=y; tutti i colori insieme=bianco). La standardizzazione dei colori avviene in inglese. RGB( , , ) presenta 3 valori da 0 a 255: 1° indica la quantità di rosso, 2° la quantità di verde, 3° la quantità di blu.

Nell’header c’è l’elemento style, contenente le regole del CSS. P=paragraph (capoverso), a cui è attribuito l’id=+1 (per identificare in maniera univoca l’elemento dell’html, gli id devono essere sempre diversi), si può fare lo stesso con #p1 (si sconsiglia l’identificazione tramite # per la manutenzione). Dentro il body il sistema evidenzia dove inizia e finisce. FONDAMENTALE: deve essere usato l’annidamento, non è questione di estetica, fa capire dove inizia e finisce le descrizione (gli editor aiutano a gestire l’annidamento). Nel CSS ci devono essere massimo 2 livelli di annidamento, in HTML e JAVASCRIPT di più. In HTML l’annidamento va sempre fatto (altrimenti si fa fatica a capire la struttura). Per togliere l’annidamento usiamo maiuscolo+carattere di tabulazione (caratteristiche dell’editor che spostano oggetto). VISUAL STUDIO CODE: gestisce le estensioni (pezzi di programma che ne modificano il comportamento)→intellisense (colora le parti in maniera diversa), sql beautify (aiuta a visualizzare certi documenti in maniera più leggibile), eslint (controlla regole javascript, permette di fare meno errori). Chi scrive il programma deve scrivere anche la documentazione (a volte più impegnativa dello scrivere il programma), fondamentale per la manutenzione. base.html ha bisogno di avere una modalità di visualizzazione (css) e di un programma (js). Il riferimento a queste 2 componenti come si fa? Per il css nell’header dove ci sono le informazioni relative al documento, la visualizzazione non ne fa parte): c’è il link (facoltativo) che fa riferimento al documento esterno→ rel=“stylesheet” (indica qual è lo scopo del file: usa documento esterno come foglio di stile per definire come vengono rappresentate), href=“base.css” (indica qual è il file: dice che il documento che contiene il foglio di stile è base.css, se cambiamo nome del file dobbiamo cambiarlo anche in href), type=“text/css” (indica il tipo di file: dice che il documento che noi stiamo utilizzando per definire il foglio di stile utilizza il formato/linguaggio CSS, ci sono altri modi per descrivere il foglio di stile ma tutti utilizzano questo). Per lo stile bisogna utilizzare un documento esterno, alcuni lo inseriscono direttamente nel file html (tecnica sconsigliata in ambito professionale). Gli attributi possono essere in qualunque ordine e hanno sempre gli stessi valori, i riferimenti al CSS si fanno sempre così quello che cambia è solo la sua collocazione e il nome dato. Allo stesso modo si fa il riferimento al programma javascript→ type=”text/javascript” (indica anche in questo caso il tipo di file), src=”base.js” (simile al href, indica il file contenente lo script). Anche in questo caso si fa riferimento

JAVASCRIPT

Javascript è un linguaggio procedurale object based (non oriented). La variabile rappresenta la versione di particolare di qualcosa di più generale, il contenitore. Gli oggetti del contenitore vengono definiti dal programmatore nel database (non sono predefiniti) e contiene un solo valore (se ne viene importato un altro questo sostituisce quello immesso in precedenza). Il contenitore ha un nome e anche un valore con cui può essere riempito. Il comportamento esatto del contenitore dipende dal linguaggio di programmazione utilizzato, le differenze stanno nel cosa c’è dentro e al fatto che può assumere forma fissa o variabile→se il linguaggio non è tipizzato la forma del contenitore si adatta al valore (altrimenti ci possiamo mettere solo valori di un determinato tipo). Javascript essendo un linguaggio non tipizzato permette di avere un tipo di contenitore libero (si può sostituire il valore in un 2° momento=comodo perché non ci si preoccupa prima di come può essere; ma se tanti oggetti nella stessa variabile si rischia di incorrere in gravi errori) e la forma del contenitore si adatta al contenuto. Js nasce per programmi semplici cioè programmi relativamente piccoli con attività specializzate in ambienti, il suo nome ufficiale inizialmente era ecmascript (ente di standardizzazione ecma, ha fatto anche nuove versioni del suo linguaggio come ad esempio typescript, un linguaggio tipizzato) ed è evoluto molto velocemente. Tipi di contenitori in JS NUMERICO→ scatola/contenitore pensata per contenere numeri, che possono essere integer e real (non vengono però distinti, non c’è corrispondenza tra numeri interi e reali). Può contenere numeri naturali (0,1,2..), interi (x+5=0), razionali (3x+5=0), algebrici (x^2 - 2=0) e trascendenti (π, e). Il linguaggio JS può fare operazioni: serie di bit con un esponente e una mantissa (es. 1.75E01, rappresenta la potenza di 10 in apice, non in linea, 1.75 rappresenta la mantissa, E separa, 01 rappresenta l’esponente, cioè la potenza di 10). VALORI BOULEANI→ misura finita per rappresentare il true (bit 1) e il false (bit 0). STRINGHE→sequenze di caratteri (si utilizzano codifiche di caratteri, negli usi moderni si usa l’unicode). Le stringhe normalmente sono di 10 byte, sono di solito evidenziate con “”. L’attività procedurale consiste nell’assegnazione di 1 valore ad un contenitore, l’attività di assegnazione si fa con l’=. = si calcola il valore tramite espressione (=). = la scatola ha un nome che utilizzo per decidere quale valore assegnargli. Il linguaggio ha delle parole riservate (if, for, function…) che non possiamo usare per assegnarli a delle variabili→abbiamo bisogno di termini aggiuntivi chiamati identificatori. Gli identificatori sono dati da una parola che identifica la variabile e devono essere scritti seguendo certe regole: grammaticali e d’uso. L’ esecuzione del programma:

  • sorgente (testo) che viene compilato o interpretato
  • se eseguibile viene eseguito dall’ elaboratore

REGOLE GRAMMATICALI REGOLE D’USO

L’identificatore deve essere un oggetto che inizia con un carattere alfabetico o una sottolineatura (come 1° carattere), gli altri caratteri possono essere alfabetici, cifre (all’interno del nome ma non come 1°) e sottolineatura. I caratteri in maiuscolo e minuscolo sono considerati diversi: JS è case sensitive (A e a possono essere usati per identificare oggetti diversi). Bisogna sempre usare nomi il cui significato non sia ambiguo (qualcuno il linguaggio lo deve leggere, come nelle pagine web). Usiamo quindi nomi significativi, anche nomi di più parole senza spazi→notazione a cammello NomiDiPiuParole (nell’identificare in JS non si possono usare i – come invece si può fare in CSS). Si possono commettere errori logici durante la programmazione = programma bloccato da qualcosa che non può essere o fa un’attività diversa da quella programmata, motivo per cui questi errori sono individuati durante l’esecuzione del programma (altri errori sono inevitabili). Non seguendo regole grammaticali gli errori vengono scoperti durante la compilazione/interpretazione. COME SI CREA UNA VARIABILE E LE SI DA’ UN VALORE? VAR (nome riservato) nome che si dà alla variabile (identificatore che corrisponde alla variabile) ; (per indicare termine dell’istruzione) variabile= 3+5; (espressione numerica, valore 8) variabile= ‘3+5’ (stringa che contiene 3+5, gli apici non si devono mai inserire all’interno) La stringa ha una struttura rigida: devono essere scritte su una sola riga, ma quando facciamo l’assegnazione di un’espressione a una variabile possiamo andare a capo (invece di scriverli tutti attaccati). Le componenti nell’assegnazione di una variabile sono chiamati token, sono nomi di oggetti dichiarati, rappresentano gli oggetti elementari di ciò che stiamo scrivendo (identificatori, i simboli, gli operatori, i numeri, non necessariamente un solo carattere, una stringa). L’assegnazione può avvenire in modi diversi, esistono scritture equivalenti:

  • variabile=variabile+1; è un’assegnazione per cambiare valore (se variabile vale 5, 5+1=6) si sostituisce l’espressione (uso matematico non valido).
  • variabile+=1; token indica di prendere valore variabile e aggiungerci 1 (ci sono diversi operatori di assegnazione che modificano la variabile come - =, x=, /=).
  • ++variabile; o variabile++; (aggiungo 1 alla variabile), ++ modifica gli oggetti e ci sono attività che restituiscono variabili.
  • var=x; x=++variabile; o x=variabile++; danno però risultati diversi, incrementano entrambi di 1 la variabile ma il 1° restituisce il valore incrementato della variabile, nel 2° caso il valore della variabile viene restituito prima di essere incrementato. Bisogna quindi evitare in quanto questa assegnazione modifica oggetti e restituisce anche valori (programma diventa difficile da mantenere, se dobbiamo fare queste attività, meglio farle separatamente). ++ va benissimo in quei casi in cui si vuole solamente modificare la variabile, non va bene come espressione che restituisce un valore. Meglio usarla solo nelle espressioni ++ o – - da soli.

ax+b dove a e b sono coefficienti numerici che hanno un valore, essendo però inseriti in un commento non viene eseguito nulla. var a=5; assegno nome e valore alla variabile a. Quest’istruzione dà undefined, in quanto non definisce valori, ma se scrivo a mi restituisce il suo valore ( 5 ). Dopo aver definito la variabile x e avergli associato un valore quest’equazione mi restituisce, se premo invio, il risultato dell’equazione (-0.6). Posso poi cambiare in un 2° momento il valore originario di a, non è un’uguaglianza, ma un’assegnazione (a=7). console.log indica che sto scrivendo in console. \ modifica il carattere successivo, indica che l’apice non è quello di chiusura (carattere escape, serve per inserire anche “”, \ indica barra rovesciata, \n indica new line per andare a capo, \t rappresenta tabulatore). nome funzione(argomenti), ci sono diverse funzioni e modi di scriverle. Gli operatori matematici rappresentano la scrittura più semplice per scrivere le funzioni (l’operatore può essere scritto vicino all’elemento su cui opera):

  • operatori binari(operatori infissi=si trovano in mezzo agli argomenti): a+b, +(a,b), a-b, a/b, a*b, a%b (modulo della divisione intera di a con b, restituisce il resto).
  • operatori unari(operatore prefisso): - a (cambio segno). Gli operatori logici sono && e ||. Gli operatori relazionali sono < (non usare tra caratteri, ci possono essere comportamenti diversi, può essere usato nelle stringhe per indicare che il codice di una stringa è minore di un altro, per cui ‘a’<‘b’ e ‘Z’<‘a’ perché nella codifica codice Z<a, se le stringhe sono tutte minuscole l’ordinamento è quello alfabetico, tranne per é), >, <=,

=, != (fra numeri si usa per indicare diverso), == (non è l’assegnazione =), !== (stesso modo per indicare diverso), === (altro modo per indicare uguaglianza). Se si usa il + 2 numeri vengono sommati, 2 stringhe vengono concatenate, 1 numero e 1 stringa vengono concatenati (in molti linguaggi no, ma in js accade questo) per cui il numero viene trasformato in stringa decimale. s+t → + si usa per la concatenazione, per cui ‘testo1’+‘testo2’ diventa ‘testo1testo2’ (per aggiungere spazio bisogna metterlo prima e dopo l’operatore). In alcuni casi l’operatore numerico – viene usato per trasformare una stringa in numero→ ‘23’- 0 =23 rappresenta un modo ingenuo per trasformarla. Per trasformare il numero in stringa→ 23+‘’=‘23’ In ogni caso, invece di scrivere tutte le istruzioni in console, l’ideale sarebbe costruire un programma per la risoluzione dell’equazione di primo grado. Si usano le funzioni che ci dicono come risolvere certi problemi.

[] interno facoltativo. La funzione deve avere un nome (identificatore). Lista parametri formali hanno un ruolo molto preciso nelle funzioni, i loro identificatori funzionano esattamente come le variabili (tutte le volte che la funzione viene chiamata i parametri vengono riempiti con i valori utilizzati nella chiamata delle funzioni): a e b sono coefficienti, cioè i possibili valori che influenzano il risultato dell’equazione. I parametri esistono solo temporaneamente, alla fine vengono distrutti (lo scope di un contenitore rappresenta l’ambito in quel contenitore esiste): le scatole corrispondenti ai parametri vengono create quando la funzione viene chiamata e distrutte quando la funzione termina→ se facciamo riferimento ad a e b fuori dalla funzione hanno significati diversi, sono variabili locali per cui quando la funzione termina non esistono più. Le variabili definite fuori da una funzione hanno come scope l’intero programma, sono globali (non devono essere usate se non si sa cosa si sta facendo). La lista di identificatori identifica le varie parti, separate da virgole, normalmente si scrivono in riga (nomi=argomenti della funzione), ma si possono mettere degli spazi, andando a capo. Gli spazi si usano quando ci sono possibilità di confondimento, servono per rendere tutto più chiaro. La funzione che trascriviamo deve restituire un valore: bisogna usare le variabili, non fare i conti direttamente. return x si trova solo all’interno della funzione, dice di restituire il valore della x. Posso usare l’equazione più volte scrivendo diversi parametri che restituiscono risultati differenti (l’ordine dei parametri è importante, cambia il risultato). Ci sono però 2 problemi: infinity quando a=0 e risultato=+-3 (+ della stringa). I real rappresentati sono solo quelli razionali, non c’è un modo di rappresentare gli irrazionali in maniera esatta (solo come radice di un’equazione), inoltre la quantità decimale è concettualmente infinita,

Per un programma sono fondamentali 3 istruzioni di controllo:

  • Sequenza di istruzioni→prima si dichiara la variabile locale, poi c’è l’assegnazione, infine si restituisce un certo valore.
  • Scelta tramite if e poi else→ bisogna anche scegliere l’attività da fare come alternativa, con uno switch case.
  • Ripetizione tramite while, repeat, loop. Un’altra istruzione di controllo è la ricorsione, non va usata l’istruzione go to, molto complicata e i programmi diventano difficili da mantenere (bisogna sempre pensare al mantenimento in un 2° momento). || indica che può essere 1 dei due risultati. === restituisce se il valore della scatola è uguale. NaN=NaN non si verifica mai, 2 indeterminate non possono essere uguali. I numeri razionali non sono rappresentabili in forma decimale, l’ultima cifra viene arrotondata, per cui ci potrebbero essere errori di arrotondamento (se dobbiamo confrontare numeri in divisione, talvolta questo tipo di confronti restituisce false). Istruzione strutturata (le istruzioni possono contenere altre istruzioni)→teorema Jacopini-Bohem che dice che ogni programma deve esse scritto in maniera strutturata, con istruzioni che presentano 1 sola entrata e 1 sola uscita per capire da dove inizia e da dove finisce (se ci fosse una 2° entrata da un blocco diverso e una 2° uscita dopo non si capirebbe più nulla)→sequenza (istruzione che contiene blocchi eseguiti in maniera ordinata). If serve a verificare il comportamento del programma in certe situazioni. E’ facile riconoscere i percorsi possibili (quando si usava la programmazione non strutturata era più complesso riconoscerli), presenta una scelta (non unica entrata e uscita) che può risultare in true o false ( istruzioni con unica entrata e uscita) e una conseguenza (esecuzione dell’attività). Struttura istruzione FOR: 1 sola entrata e 1 sola uscita, la 1° istruzione è data dall’inizializzazione (ci dice qual è la situazione iniziale, per cui se non è adeguata esce dal ciclo for senza fare nulla), poi si fa la scelta della ripetizione (2 alternative), se TRUE viene eseguito il ciclo (l’attività fa la ripetizione) e segue un’altra istruzione che modifica la condizione del ciclo per tornare poi all’inizio, se FALSE si esce dall’istruzione.

Utilizzo di For per calcolare il numero triangolare (somma da 1 a n). La funzione può non avere parametri e istruzioni. Scriviamo subito la variabile e restituiamo subito il valore (permette di evitare errori), poi in un 2° momento aggiungo istruzioni. Se non faccio nessun calcolo il valore restituito t, poi facciamo ripetizione (attività di aggiungere a t i numeri in sequenza da 0 a n). Le parti all’interno del for sono separate da ; a me interessa modificare i fin quando diventa n+ (in quel caso il ciclo finisce). var i=1 rappresenta la condizione iniziale. i<=n verifica lo stato. i++ modifica la conizione iniziale. L’attività vera e propria è data da t+=i. Un altro modo per fare la stessa attività avviene tramite while, in cui si scrive la condizione iniziale prima del ciclo while, per cui si modifica la condizione iniziale all’interno del ciclo. TIPI DI CLASSI IN JS Le classi e i tipi di oggetti in Js hanno un comportamento anomalo rispetto alle classi object oriented. 1)MATH, in js si scrive Math, serve per gestire le funzioni matematiche non banali e permette di definire proprietà (numeri) e proprietà (funzioni, scritte in minuscolo). es Math.pow(1.5,2.5) ha 2 argomenti, fa la potenza di un numero reale elevando ad un altro numero reale (in questo caso 2 non interi). es di proprietà→numeri notevoli (tutte stime di numeri non razionali) come E,LN2,LN10,PI(stima di pi greco) scritti in maiuscole, permettono la rappresentazione di un numero con maggior precisione sul nostro elaboratore (approssimazioni migliori possibili in base alle configurazioni di JS nel nostro computer). es di metodo→ceil che permette di arrotondare il numero ad un numero intero più grande o uguale come 3.5 che viene arrotondato a 4. 2)NUMBER, ha proprietà (numeri utili nella programmazione) e metodi (utili, non riguardano né funzioni analitiche, né numeri notevoli). Number.EPSILON restituisce il numero più piccolo maggiore di 0 dal punto di vista della

documento stesso. getElementByTagName fa riferimento al nome di tag, per cui by ‘p’ mi restituisce tutti gli elementi del documento html racchiusi nella tag p. var=tra le proprietà, dichiara 1 variabile p (è a tutti gli effetti una proprietà del document, in quanto è descritta al livello del documento). Se la variabile p fosse descritta in una funzione, sarebbe una proprietà della funzione (le funzioni hanno proprietà, tra le proprietà delle funzioni ci sono le variabili definite nella funzione e i suoi parametri). document=oggetto predefinito, dipende dal documento con cui si lavora. Elements= al plurale, potenzialmente restituisce molti oggetti. (p)= ci sono 3 forme per cercare lo stesso elemento. Html collection→ elenco di oggetti, in questo caso p (viene restituita tutta la serie di oggetti con tag p). 0:p rappresenta lo 0esimo elemento che contiene P (la serie di proprietà e metodi è ordinata). innerText descrive il contenuto di quell’elemento. CLASSE ARRAY L’array è un oggetto che contiene una serie di elementi, ognuno dei quali è individuato da un indice. Come si distingue?

  • var a = new Array(); Array presenta un costruttore (metodo particolare per costruirli, no numeri o stringhe semplici, c’è bisogno di un metodo ad oc per costruirli→vale per tutte le classi tranne quelle elementari). In questo caso () l’array è vuoto, in

altri linguaggi c’è bisogno di dire subito con cosa riempirlo, gli array sono dinamici: si possono aggiungere elementi in qualsiasi momento.

  • var a2 = [17, ‘True’, ‘a’, [] ]; in questo caso stiamo costruendo un’ array [] con valori separati dalle virgole, ci possiamo mettere un altro array all’interno (in questo caso vuoto), non è richiesto che gli elementi dell’array siano dello stesso tipo, ma è consigliato (regola di buona programmazione).
  • var a3=[1,7,11,8,9,10]; in questo caso l’array è formato da numeri interpretabili come interi (è bene che gli array siano formati da numeri dello stesso tipo). L’array è un contenitore diviso in settori (ognuno di essi ha un contenuto), per fare riferimento ad un certo numero all’interno si usa l’indice (la posizione nell’array)→ a3[2] indica il numero con indice 2 (3° posizione, si parte dall’indice 0) in questo caso l’11. Non solo l’intero array è un contenitore, ma ognuno degli elementi dell’array ha a sua volta un contenitore, l’unico caso in cui si fa riferimento senza il nome di variabile. a3[2]=24; rappresenta un modo di sostituire un elemento dell’array, in questo caso si sostituisce 11 con 24 (un determinato indice di un array può avere un solo valore, se inserisco un altro questo sostituisce il vecchio, inoltre posso modificare un singolo elemento per volta). Gli array possono essere utilizzabili per i vettori (possiamo estrarre un elemento, modificarlo, vederne la lunghezza) ed essere interpretati in diversi modi, hanno proprietà e metodi. es a3.length restituisce 6 (numero di elementi che lo compongono). Come si crea un vettore se non si sanno subito gli elementi? Posso crearlo dinamicamente, aggiungendo un pezzo alla volta. es. var a4=new Array(); o var a4=[]; in questo caso le () indicano un metodo. Poi posso aggiungere gli elementi: a4[0]=5; elemento indice 0 che prima non esisteva ora è occupato dal valore 5 (potevo mettere anche nome variabile a cui ho associato numero o stringa). a4[1]=7; a4[2]=a4[0]+a4[1]; a4[a4[0]]=1; in questo caso viene calcolato l’indice, 1 verrà messo nell’indice calcolato nella parentesi. Nel caso di Js se un elemento dell’array non esisteva prima viene creato, altri linguaggi informatici preferiscono restituire errore. Js non ha efficienza (ottimizzazione risorse informatiche, in cui sistema più veloce e richiede meno memoria) ma maggior efficacia nel contesto in cui viene utilizzato (si ottimizza il costo totale, bisogna capire quanto ne valga la pena). EVENTI E LORO GESTIONE L’idea di evento nasce da un SO small talk degli anni ’70 (copiato con i diritti): i sistemi sono pensati per interagire con l’utente, le attività (eventi) vengono intercettate dall’elaboratore che reagisce. Come risponde? Lo schermo dell’elaboratore è definito da vari layers: c’è una finestra sopra l’oggetto che è composta da varie componenti (es.bottoni), quando noi generiamo un evento questo arriva al primo oggetto sotto l’evento (se l’evento avviene dove non c’è nessuna finestra, arriva al desktop, se sopra la finestra arriva a quest’ultima).

testo all’interno del bottone stesso (3 volte ‘bottone’ ma con significati diversi)→oggetto con testo e comportamento (se click cambia aspetto), ha i suoi aspetti predefiniti che ne implicano il comportamento, la forma e l’aspetto con cui appare. Il bottone è contenuto nel paragrafo, contenuto nel body, body nel html, fuori browser e desktop. Per identificare un oggetto in JS posso farlo con il tag: getElementsByTagName permette di ottenere insieme indicizzato che può contenere un n qualunque di elementi. L’identificare ha un valore nell’ambito del suo contesto. var (è una proprietà del document, variabile globale, utilizzabile in tutti i programmi del document) bottone = document. (editor mi dà l’elenco proprietà e metodi) getElemtById (metodo) (“bottone”) (all’interno ci devo mettere l’id di riferimento, la stringa che identifica l’elemento associato nel documento html). Tutti gli elementi potrebbero avere un id (da interno documento html, h1, body), è formato da lettere, cifre, sottolineature, trattini senza spazi, unica condizione ID deve esserci una sola volta→mai lo stesso per due elementi differenti (regola html), altrimenti su certe attività ci sarebbero dei problemi (browser ce lo mostra nello stesso modo, ma non è detto che sia lo stesso). bottone.innerText (possiamo modificare gli elementi contenuti nell’html)= “Nuovo Bottone” (ho cambiato il contenuto dell’oggetto, ma devo essere in grado di ritrovarlo). Una volta che possiamo far riferimento ad un elemento posso aggiungergli un gestore evento bottone.addEventListener (type, listener, options; 3 elementi di cui l’ultimo è facoltativo, se non messo l’evento passa agli oggetti sottostanti). type=tipo di evento (es.drag quando trasciniamo un oggetto), in questo caso click. listener= attività fatta quando facciamo click sul bottone, contiene una function (in questo caso funzione anonima, senza nome) con parametri (lista obbligatoria) {descrive l’attività da eseguire, se click qua restituisce alert, che permette di scrivere/presentare una finestra modale con un testo}. Se premo invio restituisce undefined, ma funziona? Se compare la finestra modale (non permette modificare programma) significa che funziona e sono riuscito a modificare il comportamento del bottone.

Modifico poi il programma in html per far sì che il bottone restituisca la radice di a*x+b=0 (compare solo il testo). Per scrivere su più righe non è sufficiente andare a capo, devo inserire elemento apposito
(introduce break) per aumentare le dimensioni (o farlo su css). Per far fare qualcosa alla funzione scritta nel bottone devo aggiungere un addEventListener→in js scrivo il programma che aggiunge gestore di eventi al bottone e che faccia l’attività. Identifico la variabile con l’oggetto del bottone (uso lo stesso nome dell’id, sono correlate per cui posso farlo), aggiungendo la stringa che rappresenta l’id della variabile bottone, poi inserisco l’attività che il bottone deve gestire. (Quest’attività nell’html è scritta in fondo come script, perché rappresenta l’attività che va a cercare l’id del bottone→ letto in sequenza per cui se prima di leggere il programma non lo identifico non viene trovato). In questo caso invece di restituire una soluzione dice ESATTO! (NON BISOGNA MAI USARE RETURN PER GLI EVENTI). var a,b= proprietà della function anonima, definite a livello locale, posso dichiarare (solo 1 volta) e calcolare più variabili seguendo con la virgola. var bottone= globale, definita nel document. a=aObj.value- 0 = aObj rappresenta l’input di tipo text, value fa riferimento al valore all’interno del campo di input, se noi vogliamo considerarlo come numero e non stringa dobbiamo aggiungere - 0 (modo più semplice per dire al programma cos’è l’elemento di riferimento). Ci sono 3 parti (la cosa migliore è definire programma nella sua globalità e poi fare le parti separate): input (dati che servono), process (elaborazione dati), output (restituisce il risultato).