JavaScript i web razvoj: Korištenje modela objekta dokumenta

Oglas

Ovaj će vam članak predstaviti kostur dokumenta s kojim radi JavaScript. Ako poznajete ovaj apstraktni objektni model dokumenta, možete pisati JavaScript Što je JavaScript i može li Internet postojati bez njega?JavaScript je jedna od onih stvari koje mnogi uzimaju zdravo za gotovo. Svi ga koriste. Čitaj više koji radi na bilo kojoj web stranici.

Uvod

Kako web stranice i JavaScript djeluju zajedno i kako mogu međusobno razgovarati? Odgovori leže u razumijevanju funkcioniranja modela objekta dokumenta.

Svrha DOM-a

DOM organizira sadržaj web stranice i daje mapu puta na nju. Model se sastoji od čvorova. Čvorovi su raspoređeni u hijerarhiju koja je najbolje zamisliti kao strukturu stabla. Trebali bismo biti u mogućnosti uzeti bilo koji HTML i tako ga predstavljati.

Na primjer, tekst ovog stavka je čvor unutar modela objekta dokumenta. Odlomak je drugi čvor i nadređeni je tekst čvorištu. Sam dokument u konačnici je nadređeni čvor oboje.

Možemo napisati JavaScript da djeluje na web stranici prepoznavanjem čvorova. Budući da je svaki dio sadržaja čvor, tada možemo napisati JavaScript koji je relevantan za bilo koji entitet koji želimo promijeniti. Primijetit ćete da je ovo slično kako funkcionira CSS Izrada web sučelja: Gdje započetiPokazat ćemo vam kako se internetska sučelja razgrađuju, a zatim ćemo istaknuti ključne koncepte, alate i građevinske blokove potrebne za izradu web dizajnera 21. stoljeća. Čitaj više : primjenjuje stil ili vizualni izgled na sadržaj koristeći atribute id i klase HTML elemenata, baš kao što JavaScript kontrolira ponašanje.

Važno je napomenuti da CSS i JavaScript nisu pronađeni u DOM-u, ali izvan njega. Oboje manipuliraju sadržajem DOM-a, umjesto da ga naseljavaju.

Ponovna upotreba koda

Zašto se izvorni kod web stranica upravlja na ovaj način? Dva su glavna razloga:

1. Spremanje JavaScripta u zasebne datoteke omogućava jednostavniju upotrebu koda. Kad se JavaScript napiše inline, pored sadržaja s kojim je povezan, mora se kopirati da bi se ista funkcionalnost mogla pojaviti drugdje.
2. JavaScript odvojen u vanjsku datoteku čini izvorni kod čitljivijim uklanjanjem funkcionalnosti web stranice (JavaScript) sa sadržaja (HTML).

Čvorovi DOM-a

Čvorovi koje stvorite i kontrolirate ograničeni su na HTML specifikaciju i preglednike koji podržavaju. To je jedan od razloga za to HTML5 je uvođenje novih elemenata najviše razine bilo važno Što je HTML5 i kako se mijenja način na koji pregledavam? [MakeUseOf objašnjava]U posljednjih nekoliko godina možda ste povremeno čuli izraz HTML5. Bilo da znate nešto o web razvoju ili ne, koncept može biti pomalo nejasan i zbunjujući. Očito,... Čitaj više .

U naše su svrhe najvažnije vrste čvorova:

• Element
• Atribut
• Tekst

Iako specifikacija zapravo navodi ukupno dvanaest.

Upotreba skripte za stvaranje čvorova u DOM-u

U svrhu jednostavne demonstracije, pomoću JavaScript ćemo stvoriti jedan određeni element.

Ovdje ćemo vam pokazati kako je moćan JS pomoću njega za stvaranje jednog od najvažnijih i najčešćih web stranica i naslova.

Slijediti ovaj primjer, stvaranje cijelog virtualnog poslužitelja nije vrijedno problema Kako stvoriti virtualno okruženje za razvoj i poslužiteljPa kako uravnotežite svoju sposobnost više zadataka sa potrebom za razvijanjem web aplikacija u izvornom kontekstu u kojem će se oni pokretati? Unesite virtualne strojeve. Čitaj više , zato koristite internetsku kutiju s pijeskom. Trebat ćete lagano igralište da eksperimentirate s JSBin-om. JSBin je izvrstan jer je višestruk, sadrži način da se vidi i manipulira sa svime: HTML, JS, CSS i pregled web stranice odjednom.

(Codepen je slično, i radi ovog primjera funkcionirat će jednako dobro.)

JSBin također može dinamički kreirati URL-ove za vašu JS korisničku podlogu koji će se kasnije moći dijeliti. Evo ovog koje sam generirao za ovaj primjer.

Reproducirao sam i komentirao sljedeće isječke kako bih stvorio novi naslov H1 u tijelu:

• Isječak HTML-a
• Isječak JavaScript

  // deklarirati novu varijablu za držanje novog h1 elementa var newHeading = document.createElement ("h1"); // dodajte tekstni čvor dokumentu var h1Text = document.createTextNode ("Razina naslova 1"); // napravite to podređenim čvorom novog naslova newHeading.appendChild (h1Text); // dodajte ovo kao podređeno element elementa definiranog kao "bt" document.getElementById ("bt"). appendChild (newHeading);

Što stvara novi H1 element i njegov je sadržaj izravno podređen

uvodna oznaka.

Imajte na umu da se izvorni HTML u lijevom oknu ne mijenja. Taj je kod u ovom primjeru prilično lako pročitati. U naprednom Javascriptu stvari mogu biti puno složenije.

Malo o leksičkoj strukturi JavaScripta

Gornji isječak ima malo objašnjenja.

• var stvara varijablu, koja pohranjuje proizvoljnu vrijednost za kôd koji se koristi.
• = je operater dodjele. Ovdje djeluje s var izraza i ime nove varijable (npr. newHeading) radi formiranja cjelovite deklaracije.
• object.method je zaziv koji upotrebljava sintaksu "točaka" za odvajanje objekata, poput dokument, od metoda koje se koriste u odnosu na njih kao u parametra getElementByID.
  • Pojam "Objekti" u programiranju Odakle je "Objektno orijentirano" programiranje dobilo svoje ime?Objektno orijentirana nije samo slučajna glasina koju čujete u programskim krugovima. Postoji razlog iza imena - ali što? Pridružite mi se dok istražujem neke osnove programskih koncepata i objašnjavam ... Čitaj više zaslužuje mnogo rasprava i izvan je okvira ovog članka. Dovoljno je reći da su važne komponente vaše prijave.
  • Metode su ono što očekujete: određeni postupak ili planirana akcija koja se može primijeniti na objekte.

Svakako smo vam prekriveni s velikim brojem resursi za učenje JavaScripta Stvarno naučite JavaScript s 5 najboljih Udemy tečajevaJavaScript je programski jezik na webu. Ako imate razloga za učenje JavaScripta, ovih pet izvrsnih tečajeva iz Udemya moglo bi biti mjesto za početak vašeg putovanja kodiranjem. Čitaj više . Potražite naše programiranje odjeljak za još više.

Što je sljedeće

Jedan od najpopularnijih okvira koji koristi JavaScript je jQuery Izrada Interneta interaktivna: uvod u jQueryjQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, ali je najrazvijenija, najviše podržana i najčešće korištena ... Čitaj više . To je važan temelj za najnoviju iteraciju bogatih web stranica i aplikacija, a upravo tamo možete krenuti sljedeći.

Je li vam ovaj članak pomogao da saznate više o pokretanju JavaScripta? Imate drugačiji pristup? Želimo vam se javiti u komentarima ispod!

Kreditna slika: Imagentle putem Shutterstock.com