Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
//CSS
/*Altezza minima della pagina*/
.vheight-100{
min-height: 100vh;
}
/*altezza del bottone*/
.below-nav {
margin-top: 4rem;
}
/*Sfondo degli elementi*/
.list-group-item {
background-color: transparent;
}
/*elemento attivo selezionato */
.list-group-item.active{
color:white;
background-color: #293133;
border-color: #293133;
}
/*oggetti inattivi su cui passa il mouse*/
.list-group-item-action:hover{
background-color: #708090;
border-color: #708090;
}
/* Bottone per aggiungere una task*/
.fixed-right-bottom{
position: absolute;
right: 0;
bottom: 0;
z-index: 1030;
margin: 0 1.5rem 1.5rem 0;
border-radius: 50%;
}
.navbar{
data-bs-theme="dark";
} 142
//JavaScript nel browser
Caricare JS nel browser
Il file JS va caricato dal file html utilizzando il tag <script>
//In linea:
- In linea
…
<script>
alert(‘hello’);
</script>
…
- Esterno
…
<script src=”file.js”></script>
JavaScript in linea
Viene eseguito immediatamente appena viene incontrato
Il contenuto del contenuto del tag viene sostituito con l’output del file JS ed
interpretato come un codice html
(Se possibile meglio evitarlo)
…
<script> …
document.write(‘<p>Hello</p>’); <p>Hello</p>
</script> …
…
JavaScript su una risorsa esterna
Il codice JS viene caricato da una o più risorse esterne
Viene caricato con l’attributo src nel tag <script>
Il file JS una volta caricato viene eseguito immediatamente, una volta terminato
riprende l’esecuzione del file html
<script src=”file.js”></script>
//type=”text/javascript” è di base quindi non è necessario
//Dove inserire il tag <script> 143
- nella sezione <head>
L’esecuzione del html non procede fino a quando non è terminata l’esecuzione
del file JS quindi poco efficiente
Lo script viene eseguito quando ancora il documento DOM non esiste ancora
- Poco prima della fine del documento è una posizione più efficiente
Il codice una volta caricato viene eseguito dal sandbox del browser
È attaccato ad un contesto globale nell’oggetto finestra
È possibile accedere solo ad una limitata serie di API:
- libreria standard di JS
- oggetti del browser (BOM)
- oggetti del documento (DOM)
Se si utilizzano più script JS essi sono indipendenti fra loro:
- accedono tutti allo stesso scopo globale
- per avere una collaborazione strutturale sono necessari i moduli
Molte fasi dell’elaborazione e d’interazione con il documento web genereranno una
serie di eventi asincroni
Questi eventi possono essere gestiti da:
- comportamenti predefiniti del browser
- gestori di eventi definiti dall’utente all’interno del file JS
- ignorati se non sono definiti dei gestori
//Modello a oggetti del Browser
Oggetti principali del Browser
//window: rappresenta la finestra che contiene il documento DOM, consente di
interagire con il browser attraverso il BOM: browser object model( non
standardizzato), è un oggetto globale che contiene tutte le variabili globali di JS (può
essere omesso quando si scrive un codice JavaScript
nella pagina
//document: rappresenta l’albero DOM caricato in una
finestra, è accessibile
attraverso la proprietà di window: window.document 144
Lo scopo globale
//window rappresenta lo scopo globale del programma JS
È possibile aggiungere degli attributi a window:
- Esplicitamente: window.program=”nice”;
- Implicitamente: var myprogram=”nice”;
//Attenzione: il nome si scontra con altri script o proprietà predefinite
Gli attributi di window sono visibili automaticamente
window.document e document sono equivalenti
//Le proprietà di window sono:
- console: console di debug del browser (visibile negli attrezzi di sviluppo)
- document: l’oggetto documento
- history: consente l’accesso agli API della cronologia (storia dei URL)
- location: consente l’accesso agli API di localizzazione (URL corrente,
protocolli. ecc…), proprietà di lettura e scrittura (ad esempio può essere
impostato per caricare una nuova pagina)
- localStorage e sessionStorage: consente l’accesso ai due oggetti attraverso
l’API di memorizzazione web per memorizzare localmente piccole
informazioni nel browser
Proprietà e metodi di uso comune
Oggetti Proprietà e metodi
window Altri oggetti globali, open(),close(),moveTo(),resizeTo()
screen width,height,colorDepth,pixelDepth,...
location hostname,pathname,port,protocol,assign(),...
history back(),forward()
navigator userAgent,platform,systemLanguage,...
document body,forms,write(),close(),getElementByld(),...
Popup Boxes alert(),confirm(),prompt()
Timing setInterval(func,time,p1,...),setTimeout(func,time) 145
Oggetto finestra: metodi principali
Metodi:
- alert(), prompt(), confirm(): gestiscono i box di dialogo nativi del browser
- setInterval(), clearInterval(), setTimeout(), setImmediate(): consentono di
eseguire il codice attraverso il loop degli eventi del browser
- addEventListener(), removeEventListener(): consentono di eseguire un codice
quando avviene uno specifico evento nel documento
- open(): consente di aprire una nuova finestra del browser
- moveTo(), resizeTo(), minimize(), focus(): consentono di manipolare le
dimensioni della finestra del browser
Memorizzazione dei dati
cookies:
- coppia stringa/valore separati da una semicolonna
- i cookies vengono trasferiti su ogni singola richiesta
Web Storage (memorizzazione locale e della sessione):
- memorizza i dati come coppia valori chiave dal lato utente
- Il browser definisce la dimensione massima di memoria utilizzabile
Local Storage (window.localStorage):
- memorizza i dati nel browser dell’utente
- Esegue una comparazione dei cookie: più sicurezza, maggiore capacità di
dati, non trasferiti
- questi dati non hanno una data di scadenza
Session Storage (window.sessionStorage)
- memorizza i dati in sessioni
- I dati vengono distrutti quando la pagina/il browser vengono chiusi 146
//Modello ad oggetti del documento
DOM
È la rappresentazione interna del
browser di una pagina web, ottenuta
attraverso l’analizzazione del file html
Il browser espone un API che
consente l’interazione con il DOM
Interazioni con il DOM
Attraverso JavaScript è possibile:
- accedere ai metadata e headers della pagina
- ispezionare la struttura della pagina
- modificare ogni nodo nella pagina
- modificare gli attributi di un nodo
- creare/rimuovere dei nodi nella pagina
- modificare lo stile e le classi CSS
- attaccare/ rimuovere degli ascoltatori per gli eventi
Tipi di nodi
- Document: il nodo document è la
radice dell’albero
- Element: un tag del file HTML
- Attr: un attributo di un tag
- Text: il contenuto testuale di un
elemento o di un noto Attr
- Comment: un commento HTML
- DocumentType: la dichiarazione
DocType 147
Gerarchia delle classi DOM
Gli oggetti in DOM sono
istanze di una gerarchia
Liste dei nodi
Il DOM API potrebbe manipolare le seri/liste dei nodi
Il tipo NodeList è simile ad una sequenza array di nodi
Può essere aperto come un array in JS:
- proprietà .length
- .item(i), equivalente a list[i]
- iteratori .entries(), .keys(), .values()
- iteratori primari .forEach()
- classico ciclo for…of 148
//Manipolazione di DOM
Ricerca degli elementi di DOM
- document.getElementById(valore): nodo con l’attributo id=valore
- document.getElementsByTagName(valore): crea una NodeList con tutti gli
elementi con il nome del tag specificato (ad esempio div)
- document.getElementsByClassName(valore): crea una NodeList con tutti
gli elementi con l’attributo class=valore (ad esempio col-8)
- document.querySelector(css): il primo elemento nodo che combacia con il
selettore di sintattico CSS
- document.querySelectorAll(css): crea una NodeList con tutti gli elementi
che combaciano con il selettore sintattico CSS
Accesso agli elementi DOM
<!doctype html>
<html>
<head></head>
<body>
<div id="foo"></div>
<div class="bold"></div>
<div class="bold color"></div>
<script>
document.getElementById('foo');
document.querySelector('#foo');
document.querySelectorAll('.bold');
document.querySelectorAll('.color');
document.quesySelectorAll('.bold, .color');
</script>
</body>
</html> 149
Navigazione dell’albero DOM
Le proprietà per navigare l’albero
“Elements” non include un testo 150
Attributi dei tag esposti come proprietà
Gli attributi degli elementi HTML diventano proprietà degli oggetti DOM
Ad esempio:
- <body id=”page”>
- oggetto DOM: document.body.id=”page”
- <input id=”input” type=”checkbox” checked />
- oggetto DOM: input.checked //è un valore booleano
Può leggere gli attributi ma per modificare il contenuto degli oggetti visualizzati
bisogna utilizzare setAttribute()
Gestione degli attributi Tag
- elem.hasAttribute(nome): controlla l’esistenza dell’attributo
- elem.getAttribute(nome): controlla il valore
- elem.setAttribute (nome, valore): imposta il valore dell’attributo
- elem.removeAttribute(nome): rimuove l’attributo
- elem.attributes: collezione di tutti gli attributi
- elem.matches(css): controlla se l’elemento corrisponda al selettore css
Creazione di un elemento
Utilizzando i metodi del documento:
- document.createElement(tag) per creare un elemento con un tag
- document.createTextNode(text) per creare un nodo con un testo
Esempio: elemento div con classe e contenuto:
//JavaScript
let div = document.createElement('div');
div.className= "alert alert-success"; "
div.innerText = "Hey ciao! Hai un messaggio importante
//HTML
<div class="aler alert-sucess">
Hey ciao! Hai un messaggio importante
</div> 151
Inseriment
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
