Programmazione

JavaScript e sviluppo Web utilizzando il modello di oggetto documento

JavaScript e sviluppo Web utilizzando il modello di oggetto documento / Programmazione

Questo articolo ti introdurrà allo scheletro del documento con cui JavaScript funziona. Avendo una conoscenza pratica di questo modello di oggetto astratto documento, è possibile scrivere JavaScript Che cos'è JavaScript, E Internet esiste senza di esso? Che cos'è JavaScript e Internet può esistere senza di esso? JavaScript è una di quelle che molti danno per scontato. Tutti lo usano. Leggi altro che funziona su qualsiasi pagina web.

introduzione

In che modo le pagine Web e JavaScript funzionano insieme e in che modo possono parlare tra loro? Le risposte stanno nel capire come funziona il Modello oggetto Document.

Scopo del DOM

Il DOM organizza il contenuto di una pagina Web e fornisce una mappa stradale in esso. Il modello è composto da nodi. I nodi sono disposti in una gerarchia che è meglio pensare come una struttura ad albero. Dovremmo essere in grado di prendere qualsiasi HTML e rappresentarlo in questo modo.

Ad esempio, il testo di questo paragrafo è un nodo all'interno del modello di oggetto documento. Il paragrafo è un altro nodo e il genitore del nodo di testo. Il documento stesso è in definitiva un nodo genitore per entrambi.

Immagine di credito: Birger Eriksson tramite Wikimedia Commons

Possiamo scrivere JavaScript per agire sulla pagina Web identificando i nodi. Poiché ogni parte del contenuto è un nodo, possiamo quindi scrivere JavaScript che è rilevante per qualsiasi entità che vogliamo modificare. Noterete che questo è simile a come funziona il CSS Creazione di interfacce Web: da dove cominciare Creare interfacce Web: da dove iniziare Vi mostreremo come si rompono le interfacce web, quindi indicare i concetti chiave, gli strumenti e i blocchi necessari per fai di te un web designer del 21 ° secolo. Ulteriori informazioni: applica lo stile o l'aspetto visivo al contenuto utilizzando gli attributi id e class degli elementi HTML, proprio come JavaScript controlla il comportamento.

È importante notare che CSS e JavaScript non si trovano nel DOM, ma al di fuori di esso. Entrambi manipolano il contenuto del DOM, piuttosto che abitarlo.

Riutilizzare il codice

Perché il codice sorgente per le pagine Web è gestito in questo modo? Ci sono due ragioni principali:

  1. La memorizzazione di JavaScript in file separati consente di riutilizzare più facilmente il codice. Quando JavaScript è scritto in linea, accanto al contenuto a cui è associato, deve essere copiato affinché la stessa funzionalità si verifichi altrove.
  2. JavaScript separato in un file esterno rende il codice sorgente più leggibile rimuovendo la funzionalità della pagina web (il JavaScript) dal contenuto (l'HTML).

I nodi del DOM

I nodi creati e controllati sono limitati a quanto supportato dalle specifiche HTML e dai browser. Questa è una delle ragioni per cui l'introduzione di HTML5 di nuovi elementi di primo livello era importante. Che cos'è HTML5 e come cambia il modo in cui navigo? [MakeUseOf Explains] Che cos'è HTML5 e come cambia il modo in cui navigo? [MakeUseOf Explains] Negli ultimi anni, potresti aver sentito il termine HTML5 ogni tanto. Che tu sappia qualcosa sullo sviluppo del web o no, il concetto può essere alquanto nebuloso e confuso. Ovviamente, ... Per saperne di più .

Per i nostri scopi, i tipi più importanti di nodi sono:

  • Elemento
  • Attributo
  • Testo

Anche se la specifica in realtà elenca dodici in tutto.

Utilizzo di uno script per creare nodi nel DOM

Ai fini di una semplice dimostrazione, useremo JavaScript per creare un elemento particolare.

Qui ti mostreremo quanto sia potente JS utilizzandolo per creare uno degli oggetti della pagina web più fondamentali e comuni del web, la voce.

Per seguire questo esempio, la creazione di un intero server virtuale non vale la pena. Come creare un ambiente di sviluppo Web virtuale e un server Come creare un ambiente di sviluppo Web virtuale e un server Quindi, come bilanciare la tua capacità di multitasking con il tuo necessità di sviluppare app web nel contesto nativo in cui verranno eseguite? Inserisci macchine virtuali. Leggi di più, quindi usa una sandbox online. Avrai bisogno di un parco giochi leggero per sperimentare come JSBin. JSBin è fantastico perché è multistrato e include un modo per vedere e manipolare tutto: HTML, JS, CSS e l'anteprima della pagina web tutto in una volta.

(Codepen è simile, e per il bene di questo esempio, funzionerà altrettanto bene.)

JSBin può anche creare dinamicamente URL per il tuo scratchpad JS che possono essere condivisi in seguito. Ecco quello che ho generato per questo esempio.

Ho riprodotto e commentato i seguenti snippet per produrre una nuova intestazione H1 nel corpo:

  • Snippet HTML
  • Snippet JavaScript 
    // dichiara una nuova variabile per contenere un nuovo elemento h1 var newHeading = document.createElement ("h1"); // aggiungi il nodo di testo al documento var h1Text = document.createTextNode ("Intestazione di livello 1"); // crea un nodo figlio della nuova intestazione newHeading.appendChild (h1Text); // aggiungi questo elemento come elemento figlio definito come "bt" document.getElementById ("bt"). appendChild (newHeading);

Che crea un nuovo elemento H1 e il suo contenuto direttamente subordinato al tag di apertura.

Si noti che l'HTML sorgente nel riquadro a sinistra non cambia. Questo codice è abbastanza facile da leggere in questo esempio. Nel Javascript avanzato, le cose possono diventare molto più complesse.

Un po 'sulla struttura lessicale di JavaScript

Il frammento di cui sopra porta una piccola spiegazione.

  • var crea una variabile, che memorizza un valore arbitrario per il codice da utilizzare.
  • = è un operatore di assegnazione. Qui opera con il var termine e il nome della nuova variabile (ad es. newHeading) per formare una dichiarazione completa.
  • Oggetto.Metodo è un'invocazione che usa “punto” sintassi per separare oggetti, come il documento, dai metodi usati per loro, come in getElementById.
    • Il concetto di “oggetti” in programmazione Da dove viene la programmazione "Object Oriented"? Da dove viene la programmazione "Object Oriented"? Orientato agli oggetti non è solo una parola d'ordine casuale che senti nei circoli di programmazione. C'è una ragione dietro il nome - ma cosa? Unisciti a me mentre esploro alcuni dei fondamenti dei concetti di programmazione e spiega ... Read More merita molta discussione ed è al di fuori degli scopi di questo articolo. Basti dire che sono componenti importanti della vostra applicazione.
    • I metodi sono ciò che ti aspetteresti: una particolare procedura o un'azione pianificata che può essere applicata agli oggetti.

Ti abbiamo sicuramente coperto con un sacco di ottime risorse per l'apprendimento di JavaScript. Really JavaScript con 5 corsi Udemy Top Impara veramente JavaScript con 5 corsi Udemy Top JavaScript è il linguaggio di programmazione del web. Se hai un motivo per imparare JavaScript, questi cinque eccellenti corsi di Udemy potrebbero essere il posto giusto per iniziare il tuo viaggio di programmazione. Leggi di più . Controlla ancora nella nostra sezione di programmazione.

Qual'è il prossimo

Uno dei framework più popolari che fa uso di JavaScript è JQuery Making The Web Interactive: Un'introduzione a jQuery Making The Web Interactive: un'introduzione a jQuery jQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni: rende i siti Web interattivi . Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Per saperne di più. È una base importante per la più recente iterazione di pagine Web e applicazioni ricche, ed è qui che potresti voler iniziare.

Questo articolo ti ha aiutato a saperne di più sull'avvio di JavaScript? Hai un approccio diverso? Vogliamo sentirti nei commenti qui sotto!

Credito immagine: immagina tramite Shutterstock.com

Scopri di più su: JavaScript, programmazione.