Il DOM e la Console nella Sintassi JavaScript

Il DOM e la Console

Il DOM e la Console sono strumenti fondamentali per qualsiasi persona desideri approfondire le proprie conoscenze JavaScript, in questa lezione sarai in grado di scoprire che cosa sono e come usarli in modo da approfondire successivamente le loro potenzialità.

Contenuti Extra

Tranquillo non si tratta di strumentistica da DJ o tasse da pagare!

Visto che sono importanti è inutile girarci intorno ed incominciamo subito anche perchè credo che tu voglia sporcarti veramente le mani!

Il DOM

Oggi scopriremo cos’è questa strana sigla che corrisponde al Document Object Model.

Come si può intuire dai termini inglesi si riferisce al documento, ovvero la pagina, con oggetto a modelli ci si riferisce ad un elenco ad albero (il classico esplora risorse del file manager) che nel nostro caso corrisponde ai vari elementi della pagina.

dom

Tutto il contenuto della pagina, anche quello non visibile, è gestito dal DOM. Il DOM inoltre si occupa di gestire/caricare tutto il codice JavaScript insieme al contenuto CSS (il motore grafico del browser poi lo renderizza).

Il DOM è uno standard del W3C per uniformare questa interfaccia e la sua idea è stata riciclata in altri linguaggi e tecnologie.
Si insomma una ficata pazzesca!

Uno sviluppatore può interagire in modo semplice con questo strumento grazie alla console o con JavaScript.

La Console

La console è l’amico di ogni sviluppatore web e permette di interagire con la pagina.

Questo strumento permette di interagire in tempo reale con il markup della pagina, con gli attributi CSS e di eseguire codice JavaScript. Naturalmente fa anche molte altre cose che sono al di fuori di questa guida.

Ogni browser ha una sua console (si anche Internet Explorer) ed a seconda del browser sarà differente.
Sia Firefox che Chrome la integrano nativamente, quindi premendo F12 si aprirà questa finestra all’interno della pagina.
La console di Firefox è recente ed anche se è abbastanza completa ancora non riesce a sostituire Firebug (un estensione che include la console) per via delle sue molte funzionalità e dei vari plugin aggiuntivi.

La Console di FireFox

Per provare a sporcarti le mani apri il tuo browser (non è IE vero???) e premi F12. Se tutto funziona correttamente ti si aprirà la finestra altrimenti il tuo computer esploderà. Credo che succederà la prima opzione.

Andando alla scheda Console è possibile vedere (a seconda del browser) gli errori di JavaScript e altro. Ci sarò un campo dove scrivere del codice JavaScript per testarlo in tempo reale.Questa funzionalità è molto utile per verificare se il codice funziona in modo veloce senza dover salvare ed aggiornare la pagina.

Se inserisci questo codice nella console e premi invio (lo esegue) vedrai che lo sfondo del sito diventerà nero!

Vediamo di analizzare il codice:

  • document – Riferimento alla pagina in uso;
  • getElementByTagName – La funzione (metodo è il termine tecnico perchè è una funzione di una classe) che passandogli il nome del tag ritorna un’array degli elementi trovati con quel tag;
  • Associamo il tutto ad una variabile;
  • body[0] – Prendiamo il primo elemento dell’array (di body c’è nè uno solo quindi non ci sbagliamo);
  • style – Accediamo all’attributo style del body;
  • background – Cambiamo il valore dell’attributo css in black.

Il punto (.) in JavaScript serve per poter usare i metodi dell’oggetto (i termini ritornano) quindi possiamo manipolare i vari elementi in modo facile.

Come vedi abbiamo potuto cambiare una pagina, anzi, qualunque pagina che vogliamo, naturalmente solo nel nostro browser e finchè non aggiorneremo la pagina. Ricordiamoci che JavaScript è un linguaggio lato client che nasce vive e muore all’interno della pagina in cui è invocato.

File JavaScript

Come abbiamo detto precedentemente nella Console il codice viene mantenuto in memoria solo fino al refresh della pagina e se volessimo qualcosa di più permanente come tutti i siti web?

Il codice JavaScript può essere inserito in un file di testo con estensione *.js (è uno standard che vi consiglio di eseguire) e possiamo inserirlo nella cartella dove sono i file HTML e CSS.

Per poterlo linkare nella pagina si usa la seguente sintassi:

Il tag script indica che si tratta di un file di scripting, type indica il linguaggio e src dichiara il percorso al file.

Posizionando il codice visto sopra dentro questo file ad ogni refresh avremo in automatico lo sfondo nero senza usare i CSS.

Mai usare JavaScript per del lavoro che possono fare i CSS perchè hanno performance migliori! Questo è solo un esempio, certo JavaScript si usa per cambiare i valori ma quando vengono scatenati degli eventi (che vedremo nella prossima puntata).

Conclusioni

Abbiamo scoperto cos’è la Console e come eseguire del codice JavaScript sia on the fly scritto in un file.
Inoltre con dei metodi di JavaScript possiamo accedere e modificare i CSS con il DOM.

Nella prossima puntata vedremo come usare gli eventi in JavaScript :-D

Lascia il tuo Pensiero