@manikManik
Out Of The Box Thinker, Ama scrivere Javascript e Python. “🍺 🍻 gulp watch”
JavaScript è certamente uno di quei linguaggi di programmazione che puoi iniziare in poche ore grazie alla sua semplice sintassi, ma probabilmente ti ci vorrebbero anni per padroneggiarlo.
Per padroneggiare JavaScript è necessaria una comprensione approfondita di come funziona l’intero ecosistema. L’ecosistema centrale di JavaScript consiste di 3 componenti principali che sono ECMAScript, JavaScript Engine, e JavaScript Runtime.
Tutto inizia con la comprensione di cosa è ECMAScript e come è diverso da JavaScript e seguito da una comprensione del motore JavaScript e del runtime JavaScript. È a causa del runtime JavaScript che NodeJS e Google Chrome possono usare lo stesso motore JavaScript e tuttavia avere implementazioni molto diverse di JavaScript per gli sviluppatori.
Cos’è un runtime JavaScript o un host JavaScript?
Un runtime JavaScript (o un host JavaScript) può essere inteso come un contenitore che usa il motore JavaScript per generare API che possono essere usate dagli sviluppatori software per creare applicazioni usando JavaScript. Prendendo un esempio di un runtime JavaScript in un browser, esso conterrebbe tipicamente le implementazioni di JavsScript che sono più specifiche di un browser. Mentre un runtime per qualcosa come NodeJs avrebbe implementazioni specifiche che sono più specifiche per eseguire e costruire un’applicazione lato server usando JavaScript.
JavaScript Runtime In Your Browser For Web Development
Il runtime JavaScript nel browser ha l’implementazione di JavaScript che permette agli sviluppatori di sviluppare applicazioni per il web. Il runtime del browser web ha i seguenti tre importanti componenti:
- Il Core basato su ECMAScript – L’implementazione base di JavaScript con tutte le funzioni di input e output che gli sviluppatori possono usare.
- Document Object Model (DOM) – Questo è ciò che il browser rende come una gerarchia di nodi da mostrare al client o all’utente per XML e HTML.
- Browser Object Model (BOM) – Questo è ciò che permette agli sviluppatori di manipolare la finestra del browser. Usando il BOM gli sviluppatori possono accedere alle caratteristiche del browser e manipolarle al di fuori del contesto del DOM o della pagina che viene resa.
Immersione più profonda per capire ognuno di questi componenti in dettaglio.
Le funzioni IO Core basate su ECMAScript
Una piccola comprensione della storia di JavaScript renderebbe chiaro cos’è ECMAScript. ECMAScript è un linguaggio di scripting generico che è stato costruito sugli standard definiti in ECMA-262 dalla European Computer Manufacturers Association (ECMA). Questo è stato fatto con l’obiettivo di standardizzare JavaScript a partire dall’anno 1997.
JavaScript è un’implementazione di ECMAScript e tutti i browser web devono aderire a ECMAScript mentre creano il loro motore JavaScript e gli ambienti runtime. ECMAScript non contiene alcuna funzione IO, invece, è il JavaScript che implementa le varie funzioni usando le linee guida stabilite da ECMAScript. ECMAScript e JavaScript sono diversi l’uno dall’altro. ECMAScript è un linguaggio di scripting basato sugli standard definiti in ECMA-262 e non è legato ai browser web. È basato su ECMAScript che è stato costruito un linguaggio di scripting più robusto come JavaScript.
Document Object Model o DOM
Il Document Object Model è un’interfaccia indipendente dal linguaggio per XML e HTML che mappa l’intero documento come una gerarchia di nodi creando una rappresentazione ad albero. Il codice HTML sotto riportato è un perfetto esempio di gerarchia di nodi.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Perché era necessario il Document Object Model (DOM)?
Nei primi anni di internet, c’era un browser tra Netscape Navigator 4 e Internet Explorer 4. Entrambi i browser seguivano una versione diversa di HTML dinamico (DHTML) dimostrando così la difficoltà di eseguire lo stesso codice HTML su diversi browser. Con i crescenti timori che il web perdesse la sua natura multipiattaforma, fu creato un nuovo organismo indipendente chiamato World Wide Web Consortium (W3C). Era responsabilità del W3C mantenere gli standard della comunicazione web e questo quando iniziò a lavorare sul DOM. È grazie al DOM che JavaScript ottiene la capacità di creare HTML dinamico e uno sviluppatore può manipolare i vari nodi di un documento.
Ci sono vari metodi forniti dal DOM come interfaccia di programmazione che ti permette di alterare il documento HTML nel modo che vorresti come sviluppatore. Ecco alcuni esempi di caratteristiche del DOM API:
- La capacità di trovare un elemento sulla pagina web in base al suo id o alla sua classe.
- La capacità di cambiare lo stile o il contenuto tra i tag.
- La capacità di tracciare vari eventi sulla pagina e di aggiungere gli ascoltatori di eventi.
- La capacità di aggiungere o rimuovere nodi HTML.
- e così via
Si può accedere al DOM usando l’oggetto
documentnel browser. Ecco un semplice esempio di accesso a un elemento con
id="demo” con l’aiuto dell’oggetto
documentnel browser usando JavaScript.
Ecco la lista ufficiale di tutte le proprietà e i metodi dell’oggetto documento nel browser.
Browser Object Model o BOM
Proprio come il DOM è un’interfaccia per interagire con il documento il Browser Object Model è l’interfaccia per interagire con il browser fuori dal contesto del documento stesso. Il BOM era considerato abbastanza problematico a causa del fatto che era l’unica parte di JavaScript che non aveva uno standard che lo regolava. Tuttavia, con il lancio di HTML5, la maggior parte delle caratteristiche relative alla BOM sono diventate parte dello standard ufficiale di HTML5, il che ha portato a una massiccia riduzione della confusione che circonda la BOM.
Si può accedere alla BOM usando l’oggetto window che rappresenta la finestra del browser. Tutte le variabili globali fanno parte dell’oggetto window nei browser. Diamo un’occhiata a come si può accedere all’oggetto window e alle sue proprietà:
<!DOCTYPE html><html><body><p></p><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>Ecco alcuni esempi delle funzioni offerte dalla BOM API:
- Apertura o chiusura di una finestra.
- Spostamento o ridimensionamento della finestra.
- Ricerca delle dimensioni della finestra.
- Richiesta della posizione dell’utente.
- Prendendo la storia del browser.
- Accedendo ai cookie
- e così via
Qui c’è la lista ufficiale di tutte le proprietà e i metodi del Browser Object Model.
Questi tre componenti formano il runtime JavaScript nel browser e vi danno un’API per interagire con il motore JavaScript. Per favore diffondi un po’ di amore dando un pollice in su a questo articolo se ti è piaciuto, tienimi motivato. Potete guardare questo spazio per il prossimo articolo o potete iscrivervi alla mia Newsletter e vi avviserò non appena il prossimo articolo sarà pubblicato. Non dimenticate di lasciare un like o di condividere l’articolo se vi è stato utile!
Precedentemente pubblicato su https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
Tags
Crea il tuo account gratuito per sbloccare la tua esperienza di lettura personalizzata.