JavaScript Base – 2.1 – Definizione

JavaScript Base, , , , ,

In questa lezione introduco il linguaggio JavaScript, spiegandovi perché si usa nelle pagine web.

Definizione

Il JavaScript è un linguaggio di programmazione che serve per rendere interattive le pagine web, ovvero dotarle di un comportamento.

L’HTML serve per inserire nella pagina gli oggetti che la compongono (testi, titoli, immagini, tabelle, ecc).

I fogli di stile CSS servono per formattare gli elementi descritti dall’HTML (modificare il loro aspetto, dimensione e posizione).

Il JavaScript vi permette di dare alla vostra pagina un comportamento, ad esempio:

  • visualizzare data e ora in base a quando viene vista;
  • avvisare l’utente con un messaggio;
  • cambiare la dimensione del testo con un click su un pulsante;
  • cambiare una immagine con un’altra al passaggio del mouse.

Per poter usare questo linguaggio è necessario conoscerne i suoi comandi e farsi entrare in testa un po’ di logica di programmazione: vedrete che con questo corso avrete le basi per poterlo fare in autonomia.

I corsi successivi che pubblicherò vi insegneranno anche ad usare il codice JavaScript in ambienti molto usati nel mondo del lavoro.

Video

Javascript Base – 1.2 – Prerequisiti e materiale occorrente

JavaScript Base, , , , ,

Per poter seguire questo corso sono richiesti i seguenti prerequisiti:

  • Conoscenza di base del linguaggio HTML

Cosa dovete sapere dell’HTML per poter usare i CSS?

Dovrete essere in grado di:

  • Creare una pagina HTML e modificarla
  • Visualizzare l’anteprima della pagina su di un browser
  • Conoscere i tag principali per testi e immagini

Sarebbe anche utile una infarinatura sui fogli di stile CSS, ma non è indispensabile per seguire questo corso.

Se non siete sicuri delle vostre conoscenze sull’argomento HTML, o volete semplicemente fare un ripasso, vi consiglio di dare un’occhiata al mio corso:

Per quel che riguarda il materiale che useremo, sarà sufficiente un normale computer e un editor di testo, ovvero un programma con cui poter creare e modificare file di testo (io userò il comunissimo Blocco Note).

Video

JavaScript Base – 1.1 – Introduzione al corso

JavaScript Base, , , , ,

In questo corso saranno trattati i seguenti argomenti:

  • Introduzione al linguaggio JavaScript
  • Variabili
  • Operatori
  • Istruzioni condizionali
  • Finestre di dialogo

Pensato per chi parte da zero, e quindi non ha alcuna conoscenza sull’argomento, questo corso vi permetterà di comprendere il linguaggio JavaScript e cominciare ad utilizzarlo per rendere interattive le vostre pagine web.

Al termine del corso sarete in grado di:

  • capire dove posizionare uno script JavaScript nella vostra pagina web
  • dichiarare variabili per memorizzare dati di tipo diverso
  • manipolare variabili e valori con gli operatori principali del linguaggio
  • effettuare confronti tra dati e variabili
  • usare finestre di dialogo per avvisare l’utente o memorizzare dati o comandi

Video

CSS3 Base – 5.3 – Pseudo-classi

CSS3 Base, , , , , , , , , ,

In questa lezione vediamo come usare le pseudo-classi come selettori nei CSS.

Finora abbiamo visto i seguenti selettori:

  • nomi di tag – identificano un particolare gruppo di elementi HTML presenti nella pagina (es: p, body, h1) ;
  • classi – rappresentano un’etichetta con cui contrassegnare elementi HTML (anche di tipo diverso) che devono avere lo stesso stile;
  • ID – speciali etichette per identificare un unico elemento che avrà uno stile particolare nella pagina.

Esiste la possibilità di usare un altro tipo di selettore nei CSS: le pseudo-classi.

Pseudo-classi

Una pseudo-classe non indica un particolare elemento HTML, indica lo stato in cui si trova.

La pseudo-classe si indica con il nome del tag HTML, seguito da due punti (:) e dal nome dello stato in cui si trova.

Si usano molto per gestire gli stati in cui può trovarsi un link (collegamento):

  • a:link – collegamento non ancora visitato;
  • a:visited – collegamento già visitato;
  • a:hover – collegamento al passaggio del mouse;
  • a:active – collegamento attivo.
Pseudo-classi per i link
Pseudo-classi per i link

Per il loro corretto funzionamento, le pseudo-classi vanno inserite in questo ordine.

Video

CSS3 Base – 5.2 – ID

CSS3 Base, , , , , ,

In questa lezione vi parlo di cosa sono gli ID e di come vengono usati nei CSS.

ID

Come per la classe, anche l’ID viene usato per etichettare gli elementi HTML a cui applicare un determinato stile ma, a differenza della classe, l’ID si applica ad un unico elemento.

Per prima cosa applichiamo l’ID all’elemento univoco nel codice HTML:

Applicazione dell'ID
Applicazione dell’ID

In questo caso è stato applicato solo al paragrafo 2, l’unico che deve avere quello stile.

Poi creiamo nel CSS un selettore apposito formato da un cancelletto (#) seguito dal nome dell’ID:

ID nel CSS
ID nel CSS

Il risultato finale dimostra che soltanto il paragrafo 2 è interessato dallo stile:

Esempio
Esempio

Si poteva ottenere un risultato analogo andando ad inserire un CSS in linea nel tag del paragrafo 2, tuttavia in questo caso sarebbe stato più scomodo da aggiornare (ad esempio se volevamo poi cambiare il colore).

Video

CSS3 Base – 5.1 – Classi

CSS3 Base, , , , ,

In questa lezione vi parlo di cosa sono le classi e di come si usano nei CSS.

Abbiamo detto che se creiamo una regola CSS usando un selettore HTML (es: p), tale stile si applica a tutti gli elementi di quel tipo:

Stile per paragrafi
Stile per paragrafi

Lo stile indicato nell’esempio applica un colore blu al testo di tutti i paragrafi della pagina.

Nel caso in cui noi non volessimo assegnare il colore blu a tutti i paragrafi ma solo ad alcuni, dovremmo agire in maniera diversa.

Classi

Potrebbe risultare utile definire una classe, ovvero un’etichetta, per contrassegnare gli elementi HTML che devono avere caratteristiche simili.

In questo caso applicheremo la classe a tutti gli elementi che dovranno avere il testo in blu.

La classe si applica con l’attributo class dentro al tag HTML dell’elemento:

<p class="testoblu">Paragrafo 1</p>

Il valore dell’attributo class sarà il nome della classe, nel nostro caso è testoblu, per ricordarci che gli elementi con tale etichetta avranno il testo colorato di blu.

Oltre ai paragrafi, posso applicare la stessa etichetta ad altri elementi ti tipo testuale, ad esempio intestazioni, liste, ecc.

Nell’esempio vado ad applicare la classe testoblu a due paragrafi e ad una intestazione:

Applicazione della classe
Applicazione della classe

Ora non ci resta che dire al CSS come deve gestire tutti gli elementi di classe testoblu.

Per creare la classe si inserisce nel CSS un selettore formato da un punto seguito dal nome della classe (parola unica senza spazi), inserendo nelle graffe le dichiarazioni di stile:

Creazione della classe
Creazione della classe

Questo è risultato finale, in cui appaiono blu solo gli elementi di classe testoblu:

Esempio
Esempio

Video

CSS3 Base – 4.1 – Il colore nei CSS

CSS3 Base, , , , ,

In questa lezione vi spiego come viene usato il colore nelle pagine web.

Colori nel web

Nelle pagine web possiamo applicare il colore principalmente a queste categorie di oggetti:

  • testi
  • sfondi
  • linee e bordi

Il colore può essere indicato in vari modi, di seguito trovate i più usati.

Parola chiave

Potete usare una parola chiave che indica il nome del colore in inglese, es:

  • black;
  • pink;
  • lavender.

Codice esadecimale

E’ possibile specificare il colore con una sigla di 3 o 6 caratteri in codice esadecimale, es:

  • #77BBEE;
  • #7BE;
  • #000;

Codice RGB e RGBA

Il codice RGB indica la presenza di rosso, verde e blu nel colore in base ad un valore numerico che va da 0 (assenza di colore) e 255 (totale presenza), es:

  • rgb(0,255,0);
  • rgb(0,0,0);
  • rgb(122,30,0);

Il codice rgba è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

  • rgb(0,255,0,0.5);

Codice HSL e HSLA

Il codice HSL indica rispettivamente tinta, saturazione e luminosità del colore.

La tinta indica la tonalità di colore e si indica con un valore da 0 a 360 dove:

  • 0 e 360 indicano il rosso;
  • 120 indica il verde;
  • 240 indica il blu.

La saturazione indica la quantità di colore presente e si indica con un valore percentuale che va da 0% (assenza di colore, tinta sul grigio) a 100% (totale presenza di colore).

La luminosità indica la quantità di luce e si indica con un valore percentuale che va da 0% (colore nero) a 100% (colore bianco).

Esempi:

  • hsl(100,100%,70%);
  • hsl(80,50%,30%);
  • hsl(260,100%,50%);

Il codice hsla è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

  • hsl(100,100%,70%,0.5);

Approfondimenti

Maggiori approfondimenti sul sito Wikipedia.

Video

CSS3 Base – 3.7 – Indentazione del testo

CSS3 Base, , , , , , ,

In questa lezione vediamo come applicare un rientro al testo.

text-indent

La proprietà text-indent serve per applicare un rientro al testo, rispetto al suo margine sinistro.

Questa proprietà accetta valori numerici positivi o negativi, fissi (con varie unità di misura come: px, pt, cm, em) o relativi alla dimensione del contenitore (%):

Uso di text-indent
Uso di text-indent

Il rientro viene applicato soltanto alla prima riga del testo: se si vuole spostare l’intero blocco dobbiamo usare le proprietà margin e padding, che spiegherò nel corso CSS intermedio.

Video