Share
Salve e benvenuti alla prima parte di quella che, si spera, sarà una serie estesa che copra aspetti fondamentali del linguaggio di programmazione JavaScript e dell'API DOM.
Mentre framework come jQuery, Prototype e MooTools sono ottimi modi per sopprimere i bug del browser e accelerare lo sviluppo, è importante conoscere e comprendere le tecnologie sottostanti. Questa serie intende dirti quello che devi sapere su JavaScript e il Document Object Model (DOM). Anche se giuri su una particolare biblioteca, questo ti avvantaggerebbe, sapendo che qualcosa funziona sotto la pelle non può che essere una buona cosa!
JavaScript è un dinamico, digitato in modo approssimativo, basato sui prototipi linguaggio di programmazione che viene utilizzato in molti ambienti diversi. Oltre ad essere il linguaggio di programmazione prevalente sul lato client del web, è anche usato per scrivere plugin per IDE, in file PDF e come base per altre piattaforme e astrazioni più avanzate.
JavaScript è basato sullo standard ECMAScript (ECMA-262) ed è stato creato da Brendan Eich di Netscape. Originariamente si chiamava LiveScript, ma in seguito fu rinominato in JavaScript, probabilmente con l'unico scopo di causare confusione.
Ecco alcune delle sue funzionalità in modo un po 'più dettagliato:
Capire i punti precedenti non è importante nell'apprendimento di JavaScript; sono solo alcune idee per innescare il tuo cervello e dovrebbero aiutarti a differenziare JavaScript dagli altri linguaggi di programmazione che potresti avere sperimentato.
Il Document Object Model, normalmente abbreviato in DOM, è l'API attraverso cui JavaScript interagisce con il contenuto all'interno di un sito web. JavaScript e il DOM sono solitamente visti come una singola entità poiché JavaScript è più comunemente usato per questo scopo (interagendo con il contenuto sul web). L'API DOM viene utilizzata per accedere, attraversare e manipolare documenti HTML e XML.
Ecco alcune cose degne di nota sul DOM:
') quindi è possibile accedervi tramite il DOM come nodo.
Se stai usando Firefox e non hai già l'add-on Firebug ti consiglio di scaricarlo e installarlo ora. È uno strumento molto utile per ottenere un'immagine decente dell'intera struttura del documento.
Quando si desidera utilizzare JavaScript su un sito Web deve essere incluso all'interno di un elemento SCRIPT:
JavaScript!
Come puoi vedere abbiamo un elemento SCRIPT in fondo al nostro documento. L'attributo TYPE deve essere impostato rigorosamente su "application / javascript" ma non sorprende che non funzioni in Internet Explorer, quindi siamo bloccati con "text / javascript" o nessun attributo TYPE. Se ti interessa la convalida, allora il precedente suggerimento ti sarà probabilmente adatto.
Avrai anche notato che all'interno di quell'elemento SCRIPT abbiamo un paio di righe commentate. Questi informano i browser che supportano XHTML che il contenuto dell'elemento SCRIPT è "dati carattere" e non deve essere interpretato come markup XHTML. È davvero necessario solo se prevedi di usare l'una o l'altra '<' or '>'caratteri nel tuo codice JavaScript. Ovviamente puoi dimenticarti di tutto questo se stai usando un semplice codice HTML.
Qualsiasi JavaScript inserito all'interno dell'elemento SCRIPT verrà eseguito al caricamento della pagina. L'unica eccezione è quando un elemento SCRIPT ha un attributo 'differire'. Per impostazione predefinita, quando un browser incontra un elemento SCRIPT, si fermerà ed eseguirà il codice, quindi continuerà l'analisi del documento. L'attributo DEFER informa il browser che il codice non contiene alcun codice che altera il documento e quindi può essere eseguito successivamente. L'unico problema è che funziona solo in IE, quindi probabilmente è meglio evitare questo attributo.
Se si desidera collegare a un file di script esterno, aggiungere semplicemente un attributo SRC all'elemento SCRIPT corrispondente alla sua posizione. Normalmente è un'idea migliore avere file di script separati piuttosto che scrivere codice in linea poiché significa che il browser può memorizzare nella cache il file. Inoltre, non devi preoccuparti di nessuna di queste sciocchezze CDATA:
Prima di continuare con il DOM è una buona idea avere una conoscenza di base di alcuni elementi essenziali di JavaScript. Se hai problemi a comprenderne alcuni, non preoccuparti: alla fine li raccoglierai!
In JavaScript puoi avere diversi tipi di valori. Ci sono numeri, stringhe, booleani, oggetti, non definiti e null:
I commenti a riga singola vengono scritti utilizzando due barre in avanti (//), si presume che tutto il testo rimanente su quella riga sia un commento del parser. I commenti su più righe sono indicati con '/ *' e '* /' per completare il commento.
In JavaScript tutti i numeri sono rappresentati come valori a virgola mobile. Quando definisci una variabile numerica, ricorda di non avvolgerla tra virgolette.
// Nota: usa SEMPRE 'var' per dichiarare una variabile: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
Qualsiasi stringa definita viene presa alla lettera, JavaScript non la elabora. Una stringa è una sequenza di caratteri Unicode e deve essere racchiusa in una coppia corrispondente di virgolette singole o doppie.
var firstPart = 'Ciao'; var secondPart = 'World!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Il segno + viene utilizzato come operatore di concatenazione di stringhe // (viene anche utilizzato per l'aggiunta numerica)
I tipi booleani sono utili quando si desidera valutare una condizione, per verificare se soddisfa i criteri specificati. Ci sono solo due possibili valori booleani: vero e falso. Qualsiasi confronto, utilizzando operatori logici, si tradurrà in un booleano.
5 === (3 + 2); // = true // È possibile assegnare valori booleani alle variabili: var veryTired = true; // Puoi testarlo in questo modo: if (veryTired) // Sleep
Il '===' che vedi sopra è un operatore di confronto, li copriremo più tardi.
Una funzione è un oggetto specializzato:
Accentsconagua
// Utilizzo dell'operatore della funzione per creare una nuova funzione: function myFunctionName (arg1, arg2) // Il codice funzione va qui. // Se ometti il nome della funzione allora // stai creando una "funzione anonima": function (arg1, arg2) // Il codice funzione va qui. // L'esecuzione di una funzione è semplicemente un caso di riferimento a esso // e quindi l'aggiunta di una parentesi (con argomenti): myFunctionName (); // Nessun argomento myFunctionName ('foo', 'bar'); // con argomenti // Puoi anche eseguire una funzione senza assegnare // a una variabile: (function () // Questa è nota come funzione anonima auto-invocativa) (); Un array è anche un oggetto specializzato e può contenere qualsiasi numero di valori di dati. Per accedere ai valori dei dati all'interno di un array è necessario utilizzare un numero, denominato "indice" dell'oggetto che si sta tentando di recuperare:
// 2 diversi modi di dichiarare un nuovo array, // Literal: var fruit = ['apple', 'lemon', 'banana']; // Utilizzo del costruttore di array: var fruit = new Array ('apple', 'lemon', 'banana'); frutta [0]; // Accedere al primo elemento dell'array (apple) fruit [1]; // Accede al 2 ° elemento dell'array (limone) frutto [2]; // Accedere al terzo elemento dell'array (banana) Un oggetto è una raccolta di valori denominati (coppie chiave-valore). È simile a un array, l'unica differenza è che è possibile specificare un nome per ciascun valore di dati.
// 2 diversi modi di dichiarare un nuovo oggetto, // Literal (parentesi graffe): var profile = nome: 'Bob', età: 99, lavoro: 'Freelance Hitman'; // Utilizzo del costruttore Object: var profile = new Object (); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman';
Uno dei costrutti più comuni in JavaScript è il 'SE ALTRO' dichiarazione. Va qualcosa del genere:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // Possiamo usare 'alert' per avvisare l'utente: alert ('You can drink.'); else alert ('Mi dispiace, non puoi bere.'); Invece di elencarli tutti qui ti suggerisco di visitare l'articolo di MDC sugli operatori. Li spiega in molti dettagli. Ho impostato alcuni esempi per darti un'idea di come alcuni degli operatori sono utilizzati di seguito:
// additioa / substraction / multiply / divide var someMaths = 2 + 3 + 4 - 10 * 100/2; // Equality if (2 == (5 - 3) / * Do stuff * / // == controlla eqaulity // Inequality if (2! = (5 - 3) / * Fai stuff * / / / Operatori rigorosi di uguaglianza: // (suggerisco di utilizzarli) 2 === 2 // Invece di 2 == 2 2! == 3 // Invece di 2! = 3 // Assegnazione: var numberOfFruit = 9; numberOfFruit - = 2; // Uguale a "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // come "numberOfFruit = numberOfFruit + 2"
Looping è utile quando devi passare attraverso tutti gli elementi di un array o tutti i membri di un oggetto. Il modo più comune per eseguire il loop in JavaScript consiste nell'utilizzare l'istruzione FOR o WHILE.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE ciclo var counter = 0; var lengthOfArray = envatoTutSites.length; mentre (contatore < lengthOfArray) alert(envatoTutSites[counter]); counter++; // Same as counter += 1; // FOR loop // (The i stands for "iterator" - you could name it anything) for (var i = 0, length = envatoTutSites.length; i < length; i++) alert(envatoTutSites[i]);
Supponiamo di avere un documento XHTML di base contenente un paragrafo e un elenco non ordinato:
JavaScript! Il mio primo paragrafo ...
In questo primo esempio accediamo al nostro paragrafo usando il metodo DOM 'getElementById':
(Questo codice va all'interno dell'elemento SCRIPT nel modello precedente).
var introParagraph = document.getElementById ('intro'); // Ora abbiamo un riferimento al nodo DOM. Questo nodo DOM // rappresenta il paragrafo di introduzione. La variabile 'introParagraph' è ora un riferimento al nodo DOM. Possiamo fare una serie di cose con questo nodo, - possiamo interrogarne il contenuto e gli attributi, e possiamo manipolarne qualsiasi aspetto. Possiamo rimuoverlo, clonarlo o spostarlo in altre parti dell'albero DOM.
Tutto ciò che è presente in un documento a cui possiamo accedere utilizzando JavaScript e l'API DOM. Quindi, potremmo voler accedere alla lista non ordinata in modo simile, l'unico problema è che non ha un ID. Puoi dargli un ID e poi usare lo stesso metodo di cui sopra o potremmo accederci usando 'getElementsByTagName':
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' restituisce una collezione / lista di nodi live // - È molto simile a una matrice con alcune leggere differenze. Il metodo 'getElementsByTagName' restituisce una raccolta / elenco di nodi attivi. È simile a un array in quanto ha una proprietà length. Una cosa importante da notare è che queste collezioni sono "live": se aggiungi un nuovo elemento al DOM, la raccolta si aggiornerà automaticamente. Poiché si tratta di un oggetto di tipo array, possiamo accedere a ciascun nodo tramite un indice, da 0 alla lunghezza totale della raccolta (meno 1):
// Accesso alla lista singola non ordinata: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Crea l'elenco dei nodi di tutti gli elementi dell'elenco all'interno di UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Ora possiamo scorrere ogni elemento della lista usando un ciclo FOR: for (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
Il termine "traversa" è usato per descrivere l'azione di viaggiare attraverso il DOM, trovando i nodi. L'API DOM ci offre molte proprietà del nodo che possiamo usare per spostarci su e giù attraverso tutti i nodi all'interno di un documento.
Queste proprietà sono inerenti a tutti i nodi e consentono di accedere ai nodi correlati / vicini:
Quindi, come puoi vedere, attraversare il DOM è incredibilmente facile, è solo un caso di conoscere i nomi delle proprietà.
Una cosa da notare sulla grafica di cui sopra: gli articoli della lista possono essere recuperati solo in quel modo se non ci sono spazi bianchi tra di loro. Perché puoi avere nodi di testo e nodi elemento in un documento lo spazio tra il '
Questo è il modo in cui tutte le principali librerie JavaScript lavorano dietro le quinte; usando metodi e proprietà DOM nativi per darti accesso a questi elementi attraverso un'astrazione ben lucidata. Ciò che ti separa dai "duri" del framework è che ora hai un'idea di come sopravvivere senza un framework (se non lo hai già fatto)!
Bene, questo è tutto per la prima parte. Spero tu abbia imparato qualcosa da tutte le mie divagazioni. Nella prossima parte della serie ci concentreremo, auspicabilmente, su alcuni esempi più applicabili; probabilmente copriremo anche il modello di eventi del browser.
Nel frattempo e se non avete già controllato questi colloqui di Doug Crockford (sito di Yahoo! Video):
Grazie per aver letto!
