I CSS servono a dare uno stile grafico ad una semplice pagina html, cioè stabiliscono come una pagina web deve essere vista graficamente.
Inoltre possono controllare il layout di una singola pagina web oppure di tante pagine web contemporaneamente. Questa è una grande potenzialità perché una volta stabilite le regole, queste si possono applicare contemporaneamente a più pagine web.
Un’altra caratteristica è la possibilità di gestire la corretta disposizione degli elementi su tutti i dispositivi, dai PC agli smartphone.
Chi ha conosciuto il linguaggio HTML negli anni 2000, ha sicuramente conosciuto alcuni tag come ad esempio il tanto usato tag font che oggi è deprecato.
Tutto infatti ormai viene demandato ai CSS che si occupano di gestire con ordine e con una schema ben definito i vari layout.
In una pagina web è possibile inserire anche più fogli di stile.
Iniziamo il nostro semplice tutorial ponendoci alcune domande.
Da dove deriva il termine CSS?
CSS deriva da cascading style sheet, ovvero fogli di stile a cascata. L’ultima versione è la 3, quindi nella presente guida faremo riferimento ai CSS3.
Perché dobbiamo conoscere i fogli di stile CSS?
Perché, anche se oggi esistono tanti CMS gratuiti che consentono di costruire siti web funzionali, è sempre opportuno poter fare delle modifiche al codice per personalizzare un sito web come si desidera.
Inoltre spesso un sito web creato correttamente dà prestazioni migliori in termini di caricamento e indicizzazione nei motori di ricerca.
Come usare i CSS nelle nostre pagine web
Ci sono tre modalità di inserimento dei fogli di stile in una pagina web:
1. Fogli esterni
2. Fogli incorporati
3. Fogli in linea
Nella prossima lezione vedremo alcuni esempi pratici sui CSS e quale metodo è preferibile a seconda delle situazioni in cui ci troviamo.
Con architettura TCP/IP intendiamo tutta la suite di protocolli internet, su cui si basa il funzionamento di una rete.
Il nome deriva dai due importanti protocolli, tra gli oltre centinaia, TCP e IP.
TCP (Transmission Control Protocol) è il protocollo che si occupa di testare l’affidabilità di una rete e quindi di garantire una corretta comunicazione tra mittente e destinatario.
IP (Internet Protocol) è il protocollo che si occupa di indirizzare i dispositivi di una rete, assegnando, a ciascuno di essi, un indirizzo univoco, così come abbiamo studiato nella lezione che riguarda gli indirizzi IP. Inoltre si occupa di organizzare i pacchetti di dati che viaggiano nella rete.
Questo tipo di architettura, come abbiamo detto, è a strati, cioè formata da livelli, dove ciascun livello fornisce dei servizi utili al livello superiore.
Il modello TCP/IP è rappresentato da 4 livelli e deriva dal modello ISO/OSI che invece è caratterizzato da 7 livelli.
L’ISO è un organismo di standardizzazione. Fu il primo a definire una modalità per interconnettere i computer, infatti nel 1978 specificò un modello, l’OSI che divenne il modello standard di riferimento.
Vediamo subito il confronto tra i due modelli:
In entrambi i modelli i livelli più alti sono quelli più vicini all’utente, dunque nei canali più bassi si effettuano tutti i controlli relativi alle comunicazioni e ai mezzi trasmissivi utilizzati.
Architettura TCP/IP livelli
Nell’architettura TCP/IP ci sono dunque 4 livelli:
1. Livello di accesso alla rete
2. Livello di rete
3. Livello di trasporto
4. Livello di applicazione
Livello 1 – Accesso alla rete
Il livello di accesso alla rete è quello più basso e dunque si occupa del collegamento tra due o più dispositivi (host). Questo livello racchiude, come si nota dalla figura in alto, il livello fisico e il livello data link del modello OSI. In generale si occupa di muovere informazioni da un capo all’altro di un singolo canale di comunicazione.
A questo livello appartengono cavi, connettori, schede di rete, hub, switch e i bridge, ma non ad esempio i router.
Alcuni protocolli che operano a questo livello sono HDLC, PPP, SLIP, che approfondiremo nelle prossime lezioni.
Livello 2 – Rete
Il livello di rete si occupa di trasportare i pacchetti dalla sorgente alla destinazione, attraversando i router. Questo livello non offre un controllo sugli errori ma gestisce il flusso dei dati, le congestioni e le problematiche derivanti dalla presenza di più reti diverse.
I protocolli che operano a questo livello sono ARP, RARP, IP, ICMP, che affronteremo nelle prossime lezioni.
Livello 3 – Trasporto
Il livello di trasporto sfrutta i servizi offerti dal livello sottostante e fornisce un canale logico e affidabile tra il mittente ed il destinatario.
Si definisce canale logico in quanto i processi applicativi che comunicano non sono connessi fisicamente tra loro. Ricordiamo che per processo si intende un’istanza di un programma in esecuzione. Il software del livello di trasporto non è presente nei router ma sugli host.
Alcuni protocolli di questo livello sono TCP e UDP.
Livello 4 – Applicazione
Il livello più alto è quello di applicazione che fornisce agli utenti un’interfaccia per accedere alle reti. Dunque fornisce i servizi agli utenti della rete.
Il metodo JavaScript toUpperCase è una funzione incorporata che appartiene all’oggetto String. Questo metodo è utilizzato per trasformare tutti i caratteri di una stringa in lettere maiuscole.
Dunque, quando desideriamo convertire l’intero testo in maiuscolo, il metodo toUpperCase di JavaScript si rivela utile. Questo metodo permette di eseguire una trasformazione rapida ed efficace, rendendo tutte le lettere della stringa in caratteri maiuscoli.
Il metodo toUpperCase ha la seguente sintassi:
stringa.toUpperCase();
JavaScript toUpperCase – primo esempio
In questo primo esempio trasformiamo la stringa in maisucolo.
let testoMinuscolo = "coding creativo";
let testoMaiuscolo = testoMinuscolo.toUpperCase();
console.log(testoMaiuscolo); // "CODING CREATIVO"
Controllare se una stringa è scritta in maiuscolo.
Per sviluppare questo esempio innanzitutto dichiariamo ed inizializziamo una variabile stringa.
Ad esempio io ho assegnato il valore coding creativo. Successivamente, verifichiamo se la stringa coincide esattamente con la stessa stringa in formato maiuscolo. Se questa condizione risulta vera, indichiamo ‘La stringa è già in maiuscolo’. In caso contrario, applichiamo il metodo toUpperCase() per trasformare la stringa in maiuscolo e visualizziamo il risultato.
Di seguito, ecco un esempio pratico dell’utilizzo di un’istruzione condizionale if-else insieme al metodo toUpperCase() di JavaScript.
let stringa = 'Coding Creativo';
if (stringa === stringa.toUpperCase()){
console.log('La stringa è già scritta in maiuscolo' + coding);
} else {
stringa = stringa.toUpperCase();
console.log('La stringa trasformata è: ' + stringa);
}
JavaScript toUpperCase e getElementById
Inseriamo un valore attraverso un campo di input e, dopo aver cliccato su ok, trasformiamo questo valore in maiuscolo.
In questo esempio, oltre al metodo toUpperCase di JavaScript, utilizzeremo anche il metodo getElementById che abbiamo spiegato in questo tutorial: metodo getElementById.
Ricordiamo quindi che questo metodo restituisce l’elemento che ha l’id uguale a quello specificato tra parentesi tonde.
Al click sul pulsante ok, richiamiamo la funzione trasforma() in JavaScript.
Ecco dunque il codice html:
<h2>Esempio con il metodo toUpperCase e getElementById</h2>
<label>Inserisci il nome: </label>
<input type="text" id="nome">
<input type="button" id="ok" value="ok" onclick="trasforma()">
<p id="risultato"></p>
Ed il codice JavaScript:
function trasforma() {
let nome = document.getElementById("nome").value;
nome = nome.toUpperCase();
document.getElementById("risultato").innerHTML = "Il nome inserito è: " + nome;
}
Conclusione
In questa lezione abbiamo utilizzato il semplice metodo, toUpperCase di JavaScript, per trasformare il testo in maiuscolo. Più avanti affronteremo tanti altri esempi ed in particolare vedremo come trasformare ad esempio solo la prima lettera in maiuscolo e tutto il resto in minuscolo.
In questa lezione sviluppiamo una serie di esercizi JavaScript su if else, ovvero sulle istruzioni condizionali.
Le istruzioni condizionali permettono di valutare una condizione specifica. Se la condizione è vera, il programma esegue un insieme di istruzioni specifiche; in caso contrario, può eseguirne un altro insieme (non è obbligatorio infatti specificare l’else).
Le istruzioni condizionali sono ampiamente presenti nella vita quotidiana, anche al di fuori del contesto della programmazione. Ecco infatti alcuni esempi pratici che ritrovaimo nella vita reale:
Semafori Stradali:
Nei semafori stradali, il verde indica la possibilità di proseguire, mentre il rosso richiede di fermarsi. Il giallo funge da avviso di imminente cambiamento.
ATM (Bancomat):
Quando si utilizza un bancomat, il processo di prelievo di denaro coinvolge istruzioni condizionali. Ad esempio, se il saldo è sufficiente, il prelievo è autorizzato; altrimenti, può essere negato.
Impianto di Aria Condizionata:
In un impianto di aria condizionata, il termostato agisce come una sorta di istruzione condizionale. Se la temperatura ambiente è superiore al valore desiderato, l’aria condizionata si accende per raffreddare l’ambiente.
Prenotazione di un Biglietto Online:
Durante la prenotazione di un biglietto online, il processo può coinvolgere istruzioni condizionali. Se ci sono posti disponibili e si soddisfano determinate condizioni, la prenotazione avviene con successo; altrimenti, potrebbe essere negata.
Supermercato:
Nel processo di acquisto al supermercato, il passaggio attraverso la cassa può essere analogo a un’istruzione condizionale. Se hai abbastanza fondi o credito sulla tua carta, l’acquisto è consentito; altrimenti, potrebbe essere respinto.
In sostanza, le istruzioni condizionali si verificano ogni volta che è necessario prendere una decisione basata su una condizione specifica. Queste sono solo alcune delle possibili situazioni comuni nella vita quotidiana nelle quali occorre effettuare una scelta.
Esercizi JavaScript su if else – primo esercizio
Propongo adesso una serie di esercizi sulle istruzioni condizionali.
In questo primo esercizio confrontiamo se due valori sono uguali.
Inizializzare due variabili a e b con dei valori interi e verificare se contengono lo stesso valore.
Dapprima dichiariamo due costanti, a e b, e quindi assegniamo loro dei valori interi.
Successivamente, verifichiamo se contengono lo stesso valore, utilizzando l’istruzione condizionale if else su questi due valori.
Ricordiamo che la sintassi dell’istruzione if richiede che all’interno delle parentesi tonde sia specificato il test da valutare. Il risultato del test è un valore booleano, cioè vero o falso.
Nel nostro esempio, dato che a è assegnato a 5 e b a 6, il test (a === b) restituirà falso. Di conseguenza, le istruzioni all’interno delle parentesi graffe non verranno mai eseguite.
const a = 5;
const b = 6;
if (a === b) {
console.log('I valori di ' + a + ' e ' + b + ' sono uguali.');
} else {
console.log('I valori di ' + a + ' e ' + b + ' non sono uguali.');
}
Esercizi JavaScript sulle istruzioni condizionali – secondo esercizio
Consideriamo adesso un secondo esercizio in cui verifichiamo se un numero è positivo, negativo oppure nullo.
Ecco dunque una possibile soluzione utilizzando l’istruzione if else in JavaScript:
const numero = 13;
if (numero > 0) {
console.log('Il numero ' + numero + ' è positivo.');
} else if (numero < 0) {
console.log('Il numero ' + numero + ' è negativo.');
} else {
console.log('Il numero è zero.');
}
In questo esempio, la variabile numeroè inizializzata a 13. L’istruzione condizionale verifica se numero è maggiore di zero, in tal caso, viene stampato un messaggio indicando che il numero è positivo. Altrimenti si controlla se numero è minore di zero, e se tale condizione è vera viene stampato un messaggio che indica che il numero è negativo. Infine, rimane solo la condizione se numero è uguale a zero, ed in tal caso viene stampato un messaggio che indica che il numero è zero.
N.B. Nell’ultimo else non dobbiamo inserire la condizione con l’if in quanto è scontato che il numero sia nullo.
Esercizi JavaScript su if else – terzo esercizio
Realizziamo adesso un esercizio in cui verifichiamo se una persona è maggiorenne o minorenne in base all’età.
Innanzitutto inizializziamo una variabile eta e dopo utilizziamo un’istruzione condizionale per determinare se la persona è maggiorenne o minorenne.
Ecco dunque un esempio:
const eta = 20;
if (eta >= 18) {
console.log('La persona è maggiorenne.');
} else {
console.log('La persona è minorenne.');
}
In questo esempio, la variabile eta è inizializzata a 20. L’istruzione condizionale verifica se eta è maggiore o uguale a 18. Se questa condizione è vera, viene stampato un messaggio indicando che la persona è maggiorenne, altrimenti viene stampato un messaggio che indica che la persona è minorenne.
Esercizi JavaScript su if else – quarto esercizio
Consideriamo adesso un esercizio in cui determiniamo il giorno della settimana in base al numero corrispondente.
Inizializziamo una variabile numeroGiorno e utilizziamo un’istruzione condizionale per associare il numero al giorno corrispondente della settimana.
Ecco quindi un esempio:
const numeroGiorno = 3;
if (numeroGiorno === 1) {
console.log('Il giorno corrisponde a Lunedì.');
} else if (numeroGiorno === 2) {
console.log('Il giorno corrisponde a Martedì.');
} else if (numeroGiorno === 3) {
console.log('Il giorno corrisponde a Mercoledì.');
} else if (numeroGiorno === 4) {
console.log('Il giorno corrisponde a Giovedì.');
} else if (numeroGiorno === 5) {
console.log('Il giorno corrisponde a Venerdì.');
} else if (numeroGiorno === 6) {
console.log('Il giorno corrisponde a Sabato.');
} else if (numeroGiorno === 7) {
console.log('Il giorno corrisponde a Domenica.');
} else {
console.log('Numero giorno non valido.');
}
In questo esempio, la variabile numeroGiorno è inizializzata a 3. L’istruzione condizionale dunque verifica il valore di numeroGiorno e restituisce il giorno corrispondente della settimana. Tuttavia, quando si ha la necessità di valutare molte opzioni rispetto a una successione di istruzioni if-else, come nel nostro caso, l’istruzione switch-case risulta più indicata.
Quindi, nel contesto di questo quarto esercizio, la transizione verso l’utilizzo dell’istruzione switch può offrire maggiore chiarezza e leggibilità nel codice. L’istruzione switch infatti può gestire in modo più efficiente una serie di opzioni specifiche, rendendo il codice più conciso ed elegante.
Esempio con lo switch case:
const numeroGiorno = 3;
switch (numeroGiorno) {
case 1:
console.log('Il giorno corrisponde a Lunedì.');
break;
case 2:
console.log('Il giorno corrisponde a Martedì.');
break;
case 3:
console.log('Il giorno corrisponde a Mercoledì.');
break;
case 4:
console.log('Il giorno corrisponde a Giovedì.');
break;
case 5:
console.log('Il giorno corrisponde a Venerdì.');
break;
case 6:
console.log('Il giorno corrisponde a Sabato.');
break;
case 7:
console.log('Il giorno corrisponde a Domenica.');
break;
default:
console.log('Numero giorno non valido.');
}
In questo esempio, l’istruzione switch valuta la variabile numeroGiorno, e ciascun caso (case) corrisponde a un valore specifico. Se il valore di numeroGiorno coincide con uno dei casi, viene eseguito il blocco di codice associato. L’istruzione break è necessaria per uscire dallo switch dopo l’esecuzione del blocco corrispondente.
Se il numero non corrisponde a nessun giorno valido, allora l’esempio utilizza un blocco default per stampare un messaggio indicando per l’appunto che il numero del giorno non è valido.
Conclusione
In questa lezione, abbiamo dunque esplorato alcune semplici applicazioni dell’istruzione if-else in JavaScript. Tuttavia, il mondo della programmazione è vasto, e le sfaccettature dell’istruzione if-else sono molteplici.
Nelle prossime lezioni, ci immergeremo più a fondo in situazioni più complesse e affronteremo ulteriori sfaccettature di questa istruzione fondamentale. Con esempi più avanzati e pratici, cercheremo di arricchire ulteriormente la nostra comprensione, permettendovi di padroneggiare la programmazione in JavaScript in modo più completo.
Continuate dunque a seguirmi per scoprire nuovi scenari e approfondire la vostra conoscenza della programmazione in JavaScript.
I protocolli di rete consentono a due o più dispositivi di comunicare tra loro. Un protocollo di rete infatti si può vedere come un set di regole che permette la comunicazione tra vari dispositivi.
Infatti affinché due o più dispositivi si possano scambiare messaggi nella rete occorre che parlino lo stesso linguaggio e quindi che utilizzino lo stesso protocollo.
Esistono tanti protocolli nella rete. Infatti un protocollo unico con tutte le funzionalità sarebbe alquanto difficile da realizzare ed utilizzare.
Protocolli di rete e livelli
I vari protocolli di rete sono organizzati secondo un sistema detto a livelli e per ogni livello si utilizza uno specifico protocollo.
La suddivisione in livelli è gestita in modo tale che ciascun livello utilizza i servizi offerti dal livello inferiore.
Quindi ciascun livello fornisce dei servizi utili al livello superiore.
L’insieme dei livelli e dei relativi protocolli costituisce un’architettura di rete a strati.
Un’architettura di rete può essere:
– proprietaria;
– standard de facto;
– standard de iure.
Un’architettura proprietaria è basata su scelte indipendenti del costruttore che non fornisce le specifiche e dunque nessun altro costruttore può produrre apparati compatibili.
Invece un’architettura di tipo standard de facto è basata su specifiche di pubblico dominio.
Infine, un’architettura di tipo standard de iure è basata su specifiche di pubblico dominio ed inoltre è approvata da enti internazionali che si occupano di standardizzazione. In definitiva è un’architettura di tipo standard de iure ad esempio lo standard IEEE 802 per le reti locali che abbiamo affrontato nelle lezioni precedenti.
Anche il modello ISO/OSI, il modello su cui si basano le reti informatiche è standard de iure, mentre l’architettura di rete TCP/IP è di tipo standard de facto.
Commenti recenti