Le macchine virtuali di cui parleremo usano dei protocolli, hanno windows 10, vengono raggiunte con un
protocollo di nome RDP che permette di utilizzare un client RDP e questo su windows è di default
CSS e HTML
HTML: governa il tutto cioè l’utilizzo degli altri strumenti. Esistono delle tag di apertura che hanno degli
attributi ed esistono delle tab di chiusura
Gli spazi non hanno importanza sia nell’HTML che nel CSS. Gli attributi sono del tipo: attributo = valore. Nel
valore ci possono essere gli spazi ma il valore deve essere racchiuso tra virgolette, nell’attributo invece non
possono essere utilizzati. Se nelle virgolette ci devono essere altre virgolette ci sono dei metodi per fare
questo: ci sono entità che permettono di scrivere caratteri dove non sono permessi, la prima entità è la
& , la seconda < (Per il segno -),la terza è > (per il segno +), la quarta è " e la quinta è
' . Lo spazio può essere messo anche prima e dopo l’uguale. Essi vengono contati sempre e solo come
un solo spazio anche se ne mettiamo 5 di fila. Sia l’HTML che il CSS sono Case Insensitive, cioè le maiuscole
e le minuscole possono essere utilizzate in maniera alternativa, ma l’uso assolutamente diffuso, per i nomi
degli elementi dell’HTML e le parti del CSS si usa il minuscolo.
LHTML è fatto di elementi che si contengono ad esempio l’elemento di base HTML che a sua volta contiene
due elementi che sono “l’Head” e il “Body” e all’interno dell’Head ci sono il “Title” che è il titolo della
finestra e il “Link” che fa riferimento a come il documento deve essere rappresentato (SpreadSheet). Nel
“body” ci possono essere moltissimi elementi ad esempio: “h1….h6” che sono titoli di paragrafo del
documento, l’elemento “p” che può contenere caratteristiche del testo, ad esempio, l’elemento “em” che
dice che un certo termine deve essere espresso in maniera più enfatica rispetto agli altri termini. Le tag non
si devono incrociare.
Il CSS ha delle regole fatte da un selettore che si fa con le parentesi graffe contenente delle clausole. Un
selettore serve per dire a quali oggetti si applica la regola di formattazione ad esempio: p{…..}. Le clausole
sono fatte in questo modo: p{
nome: valore ;
}
JAVASCRIPT
Javascript è un linguaggio procedurale imperativo derivato (come sintassi) dal C.
Ha una componente funzionale e una componente ad oggetti per cui in JS esistono i cosiddetti oggetti per i
quali possono essere definite proprietà e metodi.
E’ basato sul concetto di istruzione cioè un comando che viene dato all’elaboratore di fare una certa attività
che viene quasi sempre terminata da “;”. Pensato per funzionare nei browser. Una parte integrata nel JS è il
DOM (Document Object Model) che vuol dire che un documento all’interno del
browser viene visto come un oggetto che ha delle proprietà e dei metodi. Ad esempio,
document è un oggetto con delle proprietà, ad esempio, h2 e P ma che sono a loro
volta oggetti e P a sua volta ha delle proprietà, ad esempio, em e strong cioè elementi
contenuti all’interno dell’elemento P. Quindi tutto il documento è descritto a oggetti.
Le istruzioni sono di vario tipo: ad esempio sono precedute da una parola per dire che tipo di istruzione è. Il
programmatore in un programma JS deve definire delle sue parole che nella maggior parte dei casi sono
delle variabili cioè pensiamo la variabile come se fosse una scatola con un nome che può essere riempita
con un valore. I valori possono essere valori numerici, valori stringa o valori indefiniti.
Il JS è un linguaggio non tipizzato, cioè i valori nella scatola possono essere diversi e non di un solo tipo ad
esempio non solo numerici. Ma è esempre conveniente usarne un solo tipo. Una variabile è fatta da un
nome o da un identificativo scelte dalle regole legate al linguaggio di programmazione: può essere fatto da
lettere dell’alfabeto (JS distingue lettere grandi e piccole), da caratteri di sottolineatura tipo “_” o le cifre.
Un nome può cominciare con una lettera o un carattere di sottolineatura ma non con un numero. Si evita di
usare il carattere di sottolineatura come primo carattere o anche di usarne di più attaccati l’uno all’altro.
Come si mette un valore nella scatola?
Per dire che stiamo dichiarando una variabile in JS si usa:
var <identificatore>
Oppure:
const <identificatore>
La differenza tra var e const è che const dice che quella variabile in realtà è una costante cioè non si può poi
cambiare.
Dopo si fa l’assegnazione:
var <identificatore> = <valore>
const <identificatore> = <valore>
In var si può cambiare il valore con: <identificatore> = <nuovo valore>.
In JS come si dichiara una funzione? Essa è in genere un metodo del documento e per dichiararla ci sono
vari modi:
function <nome della funzione> ( <parametri> ) {
<istruzioni>
}
In realtà ci sono due tipi di funzioni ma che si dichiarano nello stesso modo: ci sono funzioni “vere” e
funzioni che in realtà sono “procedure”. Le vere sono quelle che restituiscono un risultato invece quelle
procedure sono funzioni che svolgono un’attività. Come si distinguono? Le vere danno un’istruzione:
return <valore>
L’attività delle funzioni procedura è anche chiamata side effect.
Teorema di jacopini bohm: dice che per fare qualunque programma possa essere scritto con certi tipi di
istruzione può essere scritto utilizzando solo tre tipi di ……
Programmazione strutturata è la base di tutte le programmazioni moderne: ogni istruzione è una scatola
che ha una sola entrata e una sola uscita. Si prende un’attività complessa e si divide in parti più semplici con
maggior indipendenza l’una dall’altro (Top-down).
Le istruzioni strutturate di base sono 3:
-Sequenza di istruzione: si tratta di un grosso blocco contenente tanti blocchi ognuno dei quali con la sua
entrata e la sua uscita e ognuno dei quali corrisponde ad un blocco
- Scelta: si tratta di un blocco in cui all’inizio c’è una scelta (rappresentata da un rombo) che facciamo tra
due alternative e dopo queste due alternative si ha comunque un’unica
uscita
- Ripetizione: c’è un rombo all’inizio seguito da un blocco per poi tornare al rombo che a sua volta ha una
seconda uscita che porta all’uscita finale
In realtà c’è un quarto modo per ripetere un’attività ma non è un istruzione strutturata ed è la cosiddetta
“Ricorsione”.
function equazioneGrado1 (a,b){
let x;
x=-b/a
BNF
Sta per backus naur form. E’ un linguaggio specializzato per la descrizione di altri linguaggi. C’è ne sono
molte versioni. Noi useremo una versione della BNF per la descrizione della sintassi. Ci sono dei simboli che
sono definiti tramite espressioni: <simbolo> -> <espressione>
(es: <assegnazione> -> >contenitore> “=” <espressione>). Al posto delle virgolette dovremmo mettere
“spazi”.
Es2: <identificatore> -> “_”|”a”|….|”z”) <segueidentificatore>
<segueidentificatore> -> (“_”|….”z”|”0”|…|”9”)*
la barra verticale indica un’alternativa.
Es3: <function> -> “function” [<spazi> <identificatore>]
<spazi> “(“<parametri”)” <spazi>
“{“<istruzioni>”}”
Es4: <dichiarazione> -> [“var”|”let”|”const”] <spazi> <identificatore>
Al document possiamo aggiungere dei metodi col comando function e elle proprietà con la funzione
dichiarazione.
“Use Strict”
E’ un espressione/istruzione che restituisce un valore. Se viene messa all’inizio di un file JS modifica il
comportamento del JS cioè userà regole abbastanza diverse in base al fatto se questa istruzione c’è o
meno. Si può anche applicarla solamente ad una funzione dichiarandola non all’inizio dello script ma prima
della funzione.
ISTRUZIONI DI CONTROLLO
Sono quelle istruzioni che permetto di decidere come il programma deve comportarsi in base ai dati. Per
esempio possono definire dei comportamenti particolari per valori specifici. Istruzioni sono le sequenze, le
scelte e i cicli. Ci sono delle alternative oltre le istruzioni di controllo.
Le sequenze: <sequenza> -> “{“ < istruzioni “}”. Queste istruzioni possono essere da 0 a n istruzioni.
Ambito di un identificatore:
-
Dichiarato nello script, si diche che è una variabile globale
Dichiarato in una function viene chiamato variabile/parametro locale
Le variabili globali non vanno usate perché con esse è facile fare degli errori. Come variabili globali può
essere usata “const” perché è una costante. Gli oggetti globali sono metodi o proprietà del document
invece quelli globali sono metodi o proprietà della funzione.
SCELTE
Una scelta è un istruzione spesso chiamata “if-then-else”:
<if-then-else> -> “if” “(“<condzizione>”)” “{“ <istruzioni>”}”
[“else” “if” “(“…”)” “{“….”}”]*
[“else” “{“<istruzioni>”}”]
Essa serve a dire che il programma fa attività diverse in base ai dati che
l’utente ha inserito
CICLO
Anche sul ciclo esistono in JS delle istruzioni:
Es: <for> -> “for” “(“[<valori iniziali>] “;” <condizione> “;” [<aggiornare i valori>] “)” “{“ <istruzioni>”}”
Per prima cosa si definiscono quali sono i valori iniziali che vengono usati per la
condizione. Se i valori iniziali non soddisfano la condizione si esce subito dal ciclo. Se
invece soddisfano si passa alle istruzioni , e alla fine di queste istruzioni bisogna
ricordarsi di aggiornare i valori.
Es: vogliamo fare un ciclo che somma tutti i valori da 1 a 10, in verità non si fa con un ciclo ma con un
metodo molto più semplice cioè con:
for ( let i= ) ; i <= 10 ; i++) {
}
OPERATORI LOGICI
Permettono di scrivere delle espressioni logiche per decidere come comportarsi con i dati.
True/False. Le espressioni logiche permettono di scrivere delle espressioni che possono restituire true o
false. C’è ne sono di due tipi di operatori logici:
-
Esterni: quando il valore restituito è di tipo diverso dai due operandi
Interni: di tipo uguale
Ad esempio per quanto riguarda i numeri sono <, <=, >, >=, ==, !=
I valori buleani sono due operatori binari e uno unario:
-
Binari: && (end) oppure || (or)
! seguito da un valore (not)
X è compreso tra a e b? Per verificare questo in JS si puo scrivere: a<=x && x<=b
<, <=, >, >=, ==, != questi possono essere usati anche per le stringhe e JS le ordina con un ordine
lessicografico binario.
SOMMATORIE
Per fare una sommatoria si definisce una variabile di accumulo a cui diamo un valore iniziale ad esempio S.
Questa S iniziale gli possiamo dare il valore di 0 o di 1 ma per le sommatorie conviene usare lo 0
ARRAY
E’ un contenitore diviso in caselle e ognuna di queste caselle corrisponde ad un numero.
Es: let a= [ ];
O anche: let a = [35,27,48,52]
a è una variabile ma a[0] è un contenitore.
OGGETTI
Essi hanno proprietà e metodi.
Per definire un’oggetto facciamo così:
let b= { };
let b= {
prop1: 35,
prop2 : ‘stringa’
}
In certi contesti però va scritto cosi
let b= {
“prop1”: 35
“prop2”: ‘stringa’
}
Questo ha portato ha definire uno standard JSON: quando definiamo un ogetto in questo standard, esso
può essere messo sulla rete e scaricato da altri utenti.
Può essere utilizzato per serializzare gli oggetti
Ci sono tre modi per dichiarare una funzione:
1) “Function” <identificatore> “(“<parametri>”)” “{“
<istruzioni> “}”
2) “let” <identificatore> “=” “function” “(“<parametri>”)”
“{“ <istruzioni> “}”
3) <funzione> -> “let” <identificatore> “=” <parametri> “=>” <espressione>
(ES: let somma2 = function (x) {
Return x+x;
}
In html esistono tanti tag, uno è la tag <form> si usa per spedire dei dati ad un server.
“action” dice a che vanno spediti i dati del modulo
CSS HTML: CLASS
Classe è una proprietà del html che serve per pubblicare un insieme di elementi:
class= “
“
<identificatori>
Gli identificatori in javascript ed html hanno delle somiglianze, ad esempio, in entrambi i casi negli
identificatori ci possono essere caratteri alfabetici, cifre e simbolo di sottolineatura, però nel javascript non
accetta cifre al primo carattere, invece nel html nell’identificatore ci può essere il segno ”-“ e le cifre
possono anche essere il primo carattere.
Class crea un gruppo di elementi per ogni identificatore.
Nel css se abbiamo un <identificatore> esso rappresenta un elemento, il #<identificatore> rappresenta un
id, .<identificatore> rappresenta una class. Se ci sono conflitti fra le varie regole, il sistema decide come
risolvere il problema in base a dei criteri, quasi sempre il risultato è quello intuitivo
Box model: consiste in un blocco avente un contenuto all’interno
che una dimensione rettangolare, intorno ci sono 3 aree
rettangolari. La prima area è il panding, il colore del panding è il
background color della parte interna. La seconda area è il border e
la terza è il margin che ha il background color del blocco
contenente
Nella pagina noi prendiamo in considerazione che esiste un superblocco che sarebbe il body, formato da
altri blocchi a loro volta formati da altri blocchi ecc.
MODIFICA PAGINA HTML
Possiamo modificarla con dei metodi. Uno che abbiamo già visto è il document.getElementById.
Let x = document.getElementById(“identificatore”)
x.innerHTML
Esiste anche document.getElementsByTagName(“nome di un elemento”) : questo comando restituisce un
array di oggetti cioè tutti gli oggetti con quel nome. Dopo questo comando parte un ciclo for ad esempio:
for(let i=0; i< .length; i++){
if(
){
}
}
Esiste anche un .getElementsClassName(“classe) ed estrae tutti gli elementi classe.
FUNZIONI RICORSIVE
Sono funzioni che per una parte richiamano se stesse
Es.: fattorialeR(n) -> vale 1 se n= 0, vale 1 se n=1, altrimenti vale n*fattorialeR(n-1)
Il fattoriale di n viene definito come 1*2*….*n
Fibonacci(n) è definita come: 1 se n>0, 1 se n=1, altrimenti fibonacci(n-1)+fibonacci(n-2)