. 
@manikManik
Out Of The Box Thinker, Iubesc să scriu Javascript și Python. “🍺 🍻 gulp watch”
JavaScript este cu siguranță unul dintre acele limbaje de programare pe care îl poți începe în câteva ore datorită sintaxei sale simple, dar probabil că ți-ar lua ani de zile să îl stăpânești.
Pentru a stăpâni JavaScript este nevoie de o înțelegere aprofundată a modului în care funcționează întregul ecosistem. Ecosistemul de bază al JavaScript este format din 3 componente principale care sunt ECMAScript, JavaScript Engine și JavaScript Runtime.
Totul începe cu înțelegerea a ceea ce este ECMAScript și cum se deosebește de JavaScript, urmată de o înțelegere a JavaScript Engine și a JavaScript Runtime. Datorită timpului de execuție JavaScript, NodeJS și Google Chrome pot folosi același motor JavaScript și totuși să aibă implementări foarte diferite ale JavaScript pentru dezvoltatori.
Ce este un JavaScript Runtime sau un JavaScript Host?
Un JavaScript Runtime (sau un JavaScript Host) poate fi înțeles ca un container care folosește JavaScript Engine pentru a genera API-uri care pot fi folosite de dezvoltatorii de software pentru a crea aplicații folosind JavaScript. Luând ca exemplu un timp de execuție JavaScript într-un browser, acesta ar conține de obicei implementările JavsScript care sunt mai specifice unui browser. În timp ce un timp de execuție pentru ceva de genul NodeJs ar avea implementări specifice care sunt mai specifice pentru a rula și construi o aplicație server-side folosind JavaScript.
JavaScript Runtime In Your Browser For Web Development
JavaScript runtime in the browser are implementarea JavaScript care permite dezvoltatorilor să dezvolte aplicații pentru web. Timpul de execuție al browserului web are următoarele trei componente importante:
- The Core Based On ECMAScript – Implementarea de bază a JavaScript cu toate funcțiile de intrare și ieșire pe care dezvoltatorii le pot utiliza.
- Document Object Model (DOM) – Acesta este ceea ce browserul redă ca o ierarhie de noduri pentru a fi afișate clientului sau utilizatorului pentru XML și HTML.
- Browser Object Model (BOM) – Acesta este ceea ce permite dezvoltatorilor să manipuleze fereastra browserului. Folosind BOM, dezvoltatorii pot accesa caracteristicile browserului și le pot manipula în afara contextului DOM sau a paginii care este redată.
Să ne scufundăm mai adânc pentru a înțelege în detaliu fiecare dintre aceste componente.
Funcțiile IO de bază bazate pe ECMAScript
O mică înțelegere a istoriei JavaScript ar face clar ce este ECMAScript. ECMAScript este un limbaj de scripting de uz general care a fost construit pe baza standardelor definite în ECMA-262 de către European Computer Manufacturers Association (ECMA). Acest lucru a fost făcut cu obiectivul de standardizare a JavaScript începând cu anul 1997.
JavaScript este o implementare a ECMAScript și toate browserele web trebuie să adere la ECMAScript în timp ce își creează motorul JavaScript și mediile de execuție. ECMAScript nu conține funcții IO, în schimb, JavaScript este cel care implementează diferitele funcții folosind liniile directoare stabilite de ECMAScript. ECMAScript și JavaScript sunt diferite unul de celălalt. ECMAScript este un limbaj de scripting bazat pe standardele definite în ECMA-262 și nu este legat de browserele web. Pe baza ECMAScript a fost construit un limbaj de scripting mai robust precum JavaScript.
Document Object Model sau DOM
Document Object Model este o interfață neutră din punct de vedere lingvistic pentru XML, precum și pentru HTML, care trasează întregul document ca o ierarhie de noduri, creând o reprezentare arborescentă. Codul HTML dat mai jos este un exemplu perfect de ierarhie de noduri.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>De ce a fost nevoie de Document Object Model (DOM)?
În timpul primilor ani ai internetului, a existat un browser era între Netscape Navigator 4 și Internet Explorer 4. Ambele browsere urmau o versiune diferită de Dynamic HTML (DHTML), dovedind astfel că era dificil să rulezi același cod HTML pe browsere diferite. Având în vedere temerile din ce în ce mai mari cu privire la faptul că internetul își pierdea caracterul cross-platform, a fost creat un nou organism independent numit World Wide Web Consortium (W3C). Responsabilitatea W3C a fost de a menține standardele de comunicare web și atunci a început să lucreze la DOM. Datorită DOM, JavaScript primește abilitatea de a crea HTML dinamic și un dezvoltator poate manipula diferitele noduri ale unui document.
Există diverse metode oferite de DOM ca interfață de programare care vă permite să modificați documentul HTML așa cum ați dori ca dezvoltator. Iată câteva exemple de caracteristici ale API-ului DOM:
- Capacitatea de a găsi un element pe pagina web pe baza id-ului sau clasei sale.
- Capacitatea de a modifica stilul sau conținutul dintre tag-uri.
- Capacitatea de a urmări diverse evenimente de pe pagină și de a adăuga ascultătorii de evenimente.
- Capacitatea de a adăuga sau elimina noduri HTML.
- și așa mai departe
DOM-ul poate fi accesat cu ajutorul obiectului
documentdin browser. Iată un exemplu simplu de accesare a unui element cu
id="demo” cu ajutorul obiectului
documentdin browser folosind JavaScript.
Iată lista oficială a tuturor proprietăților și metodelor obiectului document din browser.
Browser Object Model sau BOM
La fel cum DOM este o interfață pentru a interacționa cu documentul, Browser Object Model este interfața pentru a interacționa cu browserul în afara contextului documentului propriu-zis. BOM a fost considerat a fi destul de problematic din cauza faptului că era singura parte a JavaScript care nu avea un standard care să o reglementeze. Cu toate acestea, odată cu lansarea HTML5, majoritatea caracteristicilor legate de BOM au devenit parte a standardului oficial al HTML5, ceea ce a dus la o reducere masivă a confuziei din jurul BOM.
Boto-ul poate fi accesat cu ajutorul obiectului window, care reprezintă fereastra browserului. Toate variabilele globale fac parte din obiectul window din browsere. Să aruncăm o privire la modul în care puteți accesa obiectul fereastră și proprietățile sale:
<!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>Iată câteva exemple de caracteristici care sunt oferite de API-ul BOM:
- Deschiderea sau închiderea unei ferestre.
- Mutarea sau redimensionarea ferestrei.
- Obținerea dimensiunilor ferestrei.
- Cercetarea locației utilizatorului.
- Obținerea istoricului browserului.
- Accesarea cookie-urilor
- și așa mai departe
Aici este lista oficială a tuturor proprietăților și metodelor din Browser Object Model.
Aceste trei componente formează timpul de execuție JavaScript în browser și vă oferă un API pentru a interacționa cu motorul JavaScript. Vă rugăm să răspândiți puțină dragoste dând acestui articol un thumbs up dacă v-a plăcut, țineți-mă motivat. Puteți urmări acest spațiu pentru următorul articol sau vă puteți abona la buletinul meu informativ și vă voi anunța de îndată ce următorul articol va fi publicat. Nu uitați să lăsați un like sau să distribuiți articolul dacă v-a fost de ajutor!
Publicat anterior la https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
. Tags
Creează-ți un cont gratuit pentru a debloca experiența ta de lectură personalizată.