Archivi tag: script

JavaScript Base – 3.2 – Dichiarazione, assegnazione e lettura di variabili

In questa lezione vediamo come si usano le variabili in JavaScript, in particolare:
  • dichiarazione
  • assegnazione
  • lettura

Dichiarazione

Per poter usare una variabile, dobbiamo prima di tutto crearla: questa fase si chiama dichiarazione.
La dichiarazione avviene con la parola chiave “var” seguita dal nome della variabile:
var numero;
Per mezzo di questa procedura, alla variabile viene assegnato un nome, che rimarrà tale per tutto il programma.
Il punto e virgola alla fine indica il termine dell’istruzione.
Mentre in altri linguaggi di programmazione è necessario specificare anche il tipo di dati che dovranno immagazzinare le variabili, in JavaScript è sufficiente inserire solo il nome.

Assegnazione

Ora che la variabile esiste, possiamo riempirla con qualcosa: le informazioni da memorizzare.
Per assegnare un valore ad una variabile, usiamo il simbolo “=”, chiamato appunto “operatore di assegnazione”:
numero = 10;
In questo caso, abbiamo assegnato il valore numerico 10 alla variabile di nome “numero”.
Notare che non è più necessario usare la parola “var”, in quanto ormai la variabile numero esiste già:
var numero;
numero = 10;
Il codice che vi ho scritto qui sopra può essere abbreviato in:
var numero = 10;
In quest’ultimo caso ho assegnato il valore 10 alla variabile già in fase di dichiarazione: potete usare entrambe le procedure.
Una volta che avete inserito un valore nella variabile, potete poi modificarlo nel tempo ripetendo il processo di assegnazione:
var numero;
numero = 10;
numero = -34;
Nonostante il valore iniziale della variabile sia 10, il valore viene successivamente modificato con “-34”: questo numero rappresenta il suo valore finale.

Lettura

A cosa serve un valore memorizzato se poi non andiamo a leggerlo?
Ogni variabile può essere letta in un determinato modo, basta semplicemente scrivere il nome della variabile e JavaScript al suo posto intenderà il valore che essa contiene.
Per esempio, se per stampare un testo a video abbiamo visto che si usa:
document.write("messaggio da visualizzare");
Ora possiamo usare:
document.write( nomevariabile );
e JS visualizzerà non il nome della variabile ma il suo contenuto.

Video

JavaScript Base – 3.1 – Introduzione alle variabili

In questa lezione vi parlo delle variabili, spiegandovi cosa sono e perché si usano in JavaScript.

In tutti i linguaggi di programmazione, le variabili sono indispensabili per conservare le informazioni nel tempo.

Per noi umani è facile memorizzare un paio di indirizzi o numeri di telefono, ma non 100 o 1000 di questi: ecco perché ci vengono in aiuto i computer.

Spesso nel web è utile memorizzare temporaneamente delle informazioni (numeri, date, parole, punteggi, ecc): tali dati vengono memorizzati usando degli speciali contenitori detti variabili.

Ciascun contenitore (variabile) ha un nome, in modo da poterlo individuare tra altri, e permette di memorizzare un valore che può variare nel tempo (ecco perché si chiama “variabile”).

JavaScript memorizza i dati in modo temporaneo: di norma questi dati rimangono nella memoria del computer fin quando rimanete su una determinata pagina web, in modo da poterli usare durante la vostra permanenza nella pagina.

La variabile viene creata con un procedimento chiamato dichiarazione, a cui seguirà una fase detta di assegnazione, dove la variabile verrà riempita con un suo valore iniziale.

Da qui in poi, il valore contenuto nella variabile può essere letto o modificato a seconda del programma.

Nelle prossime lezioni vi spiegherò come creare, modificare e leggere le variabili usando il codice JavaScript.

Video

JavaScript Base – 2.6 – JavaScript e HTML

In questa lezione vi parlo del nesso che c’è tra l’output generato da JS e il codice HTML.

Output JS

Generare un output in JS, ad esempio stampare a video un semplice testo, significa inserire del testo all’interno del codice della pagina web.

 

Come vi avevo anticipato, c’è una certa differenza tra quello che è il codice HTML e ciò che invece inserite all’interno del tag <script>.

Grazie a metodi come document.write(), possiamo creare del contenuto HTML interno alla pagina, nel punto in cui viene inserito il codice JavaScript.

Ad esempio, il seguente codice:

<body>
  <p>Paragrafo 1</p>
  <script>
    document.write("<p>Paragrafo 2</p>");
  </script>
</body>

darà lo stesso risultato a video di questo:

<body>
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
</body>

L’unica differenza è che nel primo caso il secondo paragrafo è stato “inserito” nella pagina usando JavaScript, mentre nel secondo è stato creato usando soltanto codice HTML.

Il metodo document.write() crea quindi un contenuto che farà parte del codice finale della pagina, contenuto che può anche prevedere tag HTML: nel caso precedente conteneva i tag per aprire e chiudere un paragrafo, creandolo proprio nella pagina.

Un risultato analogo può essere ottenuto con questo codice:

<body>
  <p>Paragrafo 1</p>
  <p>
  <script>
    document.write("Paragrafo 2");
  </script>
  </p>
</body>

In questo caso, document.write() viene usato solo per inserire il testo del paragrafo, mentre i tag di apertura e chiusura sono già stati creati da HTML.

Video

JavaScript Base – 2.5 – Commenti in JavaScript

In questa lezione vi parlo di come possiamo inserire i commenti nel codice JS.

Commenti

Come forse saprete, un commento è un testo che fa parte del codice della pagina, un testo che è invisibile all’utente finale che visualizza tale pagina sul browser.
I commenti vengono largamente usati per inserire un promemoria all’interno del codice della pagina, in maniera da facilitarne la comprensione da parte chi ci lavora o ci lavorerà su.
Per inserire un commento in JS, dovete essere all’interno di un tag <script> oppure all’interno di un file JS esterno.

Commento a riga singola

Se il vostro commento deve occupare un’unica riga, potete farlo cominciare con //, come nell’esempio seguente:
<script>
 // il codice seguente stampa a video qualcosa
 document.write("Operazione uno");
</script>

Commento multi linea

Se avete bisogno di un commento più lungo, che occupa cioè più di una riga, dovrete usare /* per aprire il commento e la sequenza contraria */ per chiuderlo:

<script>
 /*
 Andrea Rizzieri
 Marzo 2015
 Programma per l'e-commerce
 */
</script>

Video

JavaScript Base – 2.4 – Output

Vediamo come generare un output sulla pagina, usando il codice JS.

Output

Un’azione di output prevede di far comparire qualcosa (ad esempio un messaggio o un oggetto) all’interno della pagina web.

JavaScript è in grado di produrre un output in vari modi, oggi vediamo:

  • la generazione di elementi HTML sulla pagina;
  • la generazione di un messaggio in una finestra di dialogo;
  • la modifica di un elemento (a livello di nodo) della pagina web;
  • l’invio di un messaggio alla console di debug del browser.

document.write()

Il primo output che vediamo consiste nell’invocare il metodo write() sull’oggetto document.

Quando una pagina web (un file HTML) viene caricata in un browser, viene generato un oggetto document.

L’oggetto document ha diverse proprietà e metodi (comportamenti) a sua disposizione.

Tra i suoi metodi troviamo write() che permette di “riempire” il documento con un contenuto di tipo HTML, passato come argomento (all’interno delle parentesi).

Pensiamo ad un codice di questo tipo:

<script>
  document.write("Testo semplice");
</script>

Tale codice, all’interno di una pagina web, inserisce un contenuto HTML nel punto in cui viene collocato lo script.

Cosa si intende per “contenuto HTML”?

Esattamente quello che voi potete scrivere nel Body di una pagina web:

  • testo;
  • paragrafi;
  • immagini;
  • tabelle;
  • ecc.

Per esempio, se voi scrivete nel body:

 <body>
   Rosso di sera, bel tempo si spera.
 </body>

avete inserito un contenuto HTML all’interno della pagina.

In questo esempio, il contenuto è dato da un testo semplicissimo, senza cioè tag per la formattazione o la definizione di oggetti specifici.

Quello che avete scritto si può realizzare in JS usando la seguente sintassi:

 <body>
   <script>
     document.write("Rosso di sera, bel tempo si spera.");
   </script>
 </body>

Notate che il testo è stato inserito tra doppi apici in quanto si tratta di una stringa, ovvero una sequenza di caratteri alfanumerici.

Se invece del testo semplice volevate inserire un paragrafo, sostituite il contenuto tra le parentesi con un nuovo contenuto che comprenda i tag del paragrafo:

 <body>
   <script>
     document.write("<p>Rosso di sera, bel tempo si spera.</p>");
   </script>
 </body>

Anche in questo caso è stato inserito tutto il contenuto tra doppi apici, compresi i tag dell’HTML, in quanto anche loro comprendono caratteri alfanumerici.

Quando lo script JS con document.write() viene inserito assieme all’HTML, ovvero viene eseguito mentre il browser carica gli elementi della pagina, l’output generato dal JS si mischia con quello in HTML della pagina web.

Se invece il metodo write() viene invocato quando gli elementi della pagina web sono ormai stati caricati (magari richiamandolo con un pulsante) la pagina verrà sovrascritta da ciò che passerete al metodo tra le sue parentesi.

Per questo motivo, il metodo write() viene spesso usato con scopi di testing, in quanto sono disponibili soluzioni più precise e sicure (ad esempio il metodo innerHTML, descritto di seguito) per le modifiche di una pagina che ha già del contenuto.

alert()

Un altro modo per generare un output è quello di sfruttare una finestra di dialogo.

Una finestra di dialogo (ne parleremo verso la fine di questo corso JS livello Base) è una finestrella che appare per avvisare l’utente della pagina o per chiedergli qualcosa.

Un esempio di questa finestra è dato da alert():

<script>
  alert("CIAO CIAO");
</script>

Alert genera una finestra molto semplice, costituita da un messaggio e da un pulsante che permette di chiuderla.

Il messaggio corrisponde a ciò che voi indicherete nelle parentesi tonde, sempre tra doppi apici.

Esempio di risultato finale:

output_txt4

Ci sono vari tipi di finestre di dialogo, ne parlerò nelle ultime lezioni al termine di questo corso.

innerHTML

Un modo “intelligente” per inserire un contenuto HTML in un punto preciso della pagina è dato da innerHTML.

Essendo questo uno dei primi capitoli di un corso base, non voglio ancora trattare concetti complicati ma vi farò una piccola introduzione ad un argomento interessante.

Secondo il DOM (Document Object Model), la pagina web viene vista come una struttura ad albero, caratterizzata da elementi genitori e sotto-elementi figli.

Ciascuno di questi elementi è detto nodo e rappresenta un oggetto della pagina web.

L’oggetto di livello superiore, quello in cima alla gerarchia è document: tutti gli altri nodi sono suoi figli.

Con JS è possibile manipolare i singoli nodi figli del document ma, per farlo, è necessario prima selezionarli.

Per selezionare i nodi possiamo usare diversi metodi ma oggi vediamo (occhio alle maiuscole!):

document.getElementById()

Tale metodo è in grado di selezionare un determinato nodo in base al valore del suo attributo Id.

Esempio, se la pagina contiene questo paragrafo:

 <body>
   <p id="speciale">Paragrafo speciale.</p>
 </body>

Il paragrafo è stato etichettato con l’id “speciale”, e solo lui può avere questo nome, in modo da poterlo individuare tra altri paragrafi.

Per poter scrivere del testo all’interno di quel determinato paragrafo, possiamo usare:

document.getElementById("speciale")

Ma selezionarlo e basta non serve a nulla, dobbiamo dire al codice JS cosa deve fare con quel nodo, per questo usiamo il metodo innerHTML:

 

<body>
  <p id="speciale">Paragrafo speciale.</p>
  <script>
    document.getElementById("speciale").innerHTML = "Nuovo contenuto";
  </script>
</body>

In questo esempio, abbiamo individuato l’unico paragrafo speciale della pagina e gli abbiamo modificato il contenuto, sovrascrivendolo.

console.log()

Un ultimo metodo di output si usa nelle operazioni di testing e debug dei programmi JS, e prevede di inviare messaggi alla console del browser.

Questa console è un ambiente di controllo che solitamente viene visualizzato sul vostro browser premendo il tasto F12.

Con il comando JS:

console.log("messaggio");

potete mostrare un messaggio direttamente nella finestra di output della console per lo sviluppo.

Si tratta di una operazione utile prevalentemente all’analisi dei vostri programmi, al testing ed al debug.

Video

JavaScript Base – 2.3 – Collocazione del codice

In questa lezione vi spiego dove posizionare il codice JavaScript nella pagina (o fuori da essa).

Come per i fogli di stile CSS, il codice JavaScript può essere inserito all’interno della pagina oppure può essere collocato in un file esterno, opportunamente collegato.

Se il codice JS è interno alla pagina, dovrà essere posizionato nell’head o nel body, purché racchiuso nel tag <script>.

Codice nell’head

Posizionando il codice nell’head, questo verrà letto al caricamento della pagina, prima del caricamento degli oggetti che poi compongono la pagina da visualizzare (quelli interni al body).

<html>
 <head>
   <title>Collocazione</title>
   <script>
     document.write("bla bla bla");
   </script>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
 </body>
</html>

In questo caso la scritta “Bla bla bla” verrà visualizzata prima dei due paragrafi Pippo e Pluto.

Codice nel body

Collocandolo nel body, invece, il codice sarà letto assieme agli elementi della pagina ed eseguito mentre il browser li visualizza.

<html>
 <head>
   <title>Collocazione</title>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <script>
     document.write("bla bla bla");
   </script>
   <p>Paragrafo 2</p>
 </body>
</html>

In questo caso la scritta “Bla bla bla” verrà visualizzata tra il paragrafo 1 ed il paragrafo 2, in quanto lo script viene eseguito in mezzo ai tag dei due paragrafi.

A cosa serve questa distinzione? Perché scegliere di inserire un codice prima, in mezzo o addirittura dopo il codice HTML degli elementi della pagina?

Se inserite un codice nell’head, potete scegliere di farlo eseguire subito (prima di caricare il resto della pagina) oppure di renderlo “innocuo” fino a quando non decidete voi di eseguirlo: in questo caso si parla di funzioni, ovvero blocchi di codice che si possono richiamare al momento del bisogno.

Il codice può anche essere inserito al fondo della pagina, di solito prima della chiusura del body, perché in questo modo il browser ha già letto tutto il contenuto della pagina e sarà in grado di trovare nello script i riferimenti agli oggetti in essa contenuti.

In questo corso di base sul linguaggio JavaScript, viene trattato principalmente il codice eseguito tra gli elementi HTML, ma nei corsi successivi vedrete come si usano gli script caricati prima o dopo la pagina, e imparerete ad utilizzare le funzioni.

Codice esterno

Un codice JS esterno, viene inserito in un file di testo semplice, di solito contrassegnato con un nome ed una estensione .JS:

nomefile.js

Il file esterno viene poi collegato alle pagine con il tag <script> e l’attributo src, che indica il percorso del file JS:

<html>
 <head>
   <title>Collocazione</title>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <script src="codice.js">
   </script>
 </body>
</html>

Nel file esterno il codice va inserito direttamente, senza quindi usare il tag script.

Video

JavaScript Base – 2.1 – Definizione

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

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

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