Share
Hei og velkommen til den første delen av det som forhåpentligvis vil være en omfattende serie som dekker kjerneaspekter av JavaScript-programmeringsspråket og DOM API.
Mens rammer som jQuery, Prototype og MooTools er gode måter å undertrykke nettleserveil på og øke utviklingen, er det viktig å kjenne og forstå de underliggende teknologiene. Denne serien har til hensikt å fortelle deg hva du trenger å vite om JavaScript og Document Object Model (DOM). Selv om du sverger ved et bestemt bibliotek, vil dette fortsatt være til nytte for deg - å vite hvordan noe fungerer under huden, kan bare være en god ting!
JavaScript er en dynamisk, løst skrevet, prototype-basert programmeringsspråk som brukes i mange forskjellige miljøer. I tillegg til å være det utbredte programmeringsspråket på klientsiden på nettet, er det også brukt til å skrive plugins for IDEs, i PDF-filer og som grunnlag for andre plattformer og høyere abstraksjoner.
JavaScript er basert på ECMAScript-standarden (ECMA-262) og ble skapt av Brendan Eich of Netscape. Det ble opprinnelig kalt LiveScript, men det ble senere omdøpt til JavaScript, sannsynligvis med den eneste hensikten å forårsake forvirring.
Her er noen av funksjonene i litt mer detaljert:
Forståelse av de ovennevnte punktene er ikke viktig for å lære om JavaScript; det er bare noen få ideer for å få hjernen din i utstyr, og bør hjelpe deg å skille mellom JavaScript fra andre programmeringsspråk du kanskje har opplevd.
Dokumentobjektmodellen, som vanligvis forkortes til DOM, er APIen som JavaScript samhandler med innholdet på et nettsted. JavaScript og DOM er vanligvis sett som en enkelt enhet siden JavaScript er mest brukt til dette formålet (interagere med innhold på nettet). DOM-API-en brukes til å få tilgang til, krysse og manipulere HTML- og XML-dokumenter.
Her er noen få bemerkelsesverdige ting om DOM:
') så kan den nås via DOM som en knutepunkt.
Hvis du bruker Firefox, og du ikke allerede har Firebug-tillegget, anbefaler jeg at du laster ned og installerer det nå. Det er et veldig nyttig verktøy for å få et anstendig bilde av hele dokumentstrukturen.
Når du vil bruke JavaScript på et nettsted, må det inkluderes i et SCRIPT-element:
Javascript!
Som du kan se har vi et SCRIPT-element nederst i dokumentet vårt. TYPE-attributtet bør strengt sett settes til 'application / javascript' men uten overraskelse fungerer det ikke i Internet Explorer, så vi står fast med enten 'text / javascript' eller ingen TYPE-attributt i det hele tatt. Hvis du bryr deg om validering, vil det tidligere forslaget trolig passe deg.
Du har også lagt merke til at innenfor dette SCRIPT-elementet har vi et par kommentert linjer. Disse informerer XHTML-støttende nettlesere om at innholdet i SCRIPT-elementet er "tegndata" og ikke skal tolkes som XHTML-oppslag. Det er bare virkelig nødvendig hvis du planlegger å bruke enten "<' or '>'tegn i JavaScript-koden din. Åpenbart kan du glemme alt dette hvis du bruker vanlig HTML.
Eventuelle JavaScript vi legger inn i det SCRIPT-elementet, vil løpe som siden laster. Det eneste unntaket er når et SCRIPT-element har et "defer" -attributt. Som standard, når en nettleser møter et SCRIPT-element, stopper den og kjører koden, og den fortsetter å analysere dokumentet. DEFER-attributtet informerer nettleseren om at koden ikke inneholder noen dokumentendringskode og så kan kjøres senere. Det eneste problemet med dette er at det bare fungerer i IE, så det er sannsynligvis best å unngå dette attributtet.
Hvis du vil koble til en ekstern skriptfil, legg du bare til et SRC-attributt til ditt SCRIPT-element som svarer til plasseringen. Det er normalt en bedre ide å ha separate skriptfiler enn å skrive kode inline som det betyr at nettleseren kan cache filen. Pluss du trenger ikke å bekymre deg for noe av det CDATA-tullet:
Før vi fortsetter med DOM, er det en god ide å ha en grunnleggende forståelse av noen JavaScript-nødvendigheter. Hvis du har problemer med å forstå noen av disse, ikke bekymre deg - du vil etterhvert plukke dem opp!
I JavaScript kan du ha forskjellige typer verdier. Det er Numbers, Strings, Booleans, Objects, Undefined og Null:
Enkeltlinjemessige kommentarer skrives med to fremoverstreker (//), alt gjenværende tekst på den linjen antas å være en kommentar fra parseren. Multi-line kommentarer er signified using '/ *' og '* /' for å fullføre kommentaren.
I JavaScript er alle tall representert som flytende punktverdier. Når du definerer en tallvariabel, husk å ikke pakke den inn i noen anførselstegn.
// Merk: Bruk ALDRI 'var' til å erklære en variabel: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
En hvilken som helst streng du definerer er tatt bokstavelig, vil JavaScript ikke behandle det. En streng er en sekvens av Unicode-tegn og bør pakkes inn i et matchende par med enten enkelt eller dobbelt anførselstegn.
var firstPart = 'Hei'; var secondPart = 'Verden!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Signaturet brukes som string-concatenation operatør // (det brukes også til numerisk tillegg)
Boolske typer er nyttige når du vil evaluere en tilstand - for å se om den oppfyller en bestemt kriterier. Det er bare to mulige boolske verdier: ekte og falsk. Enhver sammenligning, ved hjelp av logiske operatører, vil resultere i en boolsk.
5 === (3 + 2); // = true // Du kan tilordne boolske verdier til variabler: var veryTired = true; // Du kan teste for det slik: hvis (veldig slitt) // Sove
Den '===' du ser ovenfor er en sammenligningsoperatør, vi vil dekke dem senere.
En funksjon er et spesialisert objekt:
Accentsconagua
// Bruk funksjonen operatør til å opprette en ny funksjon: funksjon myFunctionName (arg1, arg2) // Funksjonskode går her. // Hvis du slipper funksjonens navn, så // du lager en "anonym funksjon": funksjon (arg1, arg2) // Funksjonskode går her. // Kjører en funksjon er bare et tilfelle av referanse // og deretter legger du til en parentes (med argumenter): myFunctionName (); // Ingen argumenter myFunctionName ('foo', 'bar'); // med argumenter // Du kan også kjøre en funksjon uten å anta // det til en variabel: (funksjon () // Dette er kjent som en egenaktiverende anonym funksjon) (); En Array er også et spesialobjekt og kan inneholde et hvilket som helst antall dataverdier. For å få tilgang til dataverdier i en matrise må du bruke et tall, referert til som «indeks» for elementet du prøver å hente:
// 2 forskjellige måter å erklære et nytt utvalg på, // Literal: var frukt = ['apple', 'sitron', 'banan']; // Bruke Array-konstruktøren: var frukt = ny Array ('eple', 'sitron', 'banan'); frukt [0]; // Få tilgang til det første elementet i matrisen (apple) [1]; // Få tilgang til det andre elementet i matrisen (sitron) frukt [2]; // Få tilgang til det tredje elementet i matrisen (banan) Et objekt er en samling av navngitte verdier (nøkkelverdier par). Det ligner på en matrise, den eneste forskjellen er at du kan angi et navn for hver dataverdi.
// 2 forskjellige måter å erklære et nytt objekt på, // Literal (curly braces): var profil = navn: 'Bob', alder: 99, jobb: 'Freelance Hitman'; // Bruke Object-konstruktøren: var profil = nytt objekt (); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman';
En av de vanligste konstruksjonene i JavaScript er 'IF' / 'ELSE' uttalelse. Det går noe slikt:
var legalDrinkingAge = 21; var dinAge = 29; hvis (yourAge> = legalDrinkingAge) // Vi kan bruke 'varsel' for å varsle brukeren: varsel ('Du kan drikke.'); ellers alert ('Beklager, du kan ikke drikke.'); I stedet for å notere dem alle her ute foreslår jeg at du besøker MDC-artikkelen om Operatører. Det forklarer dem i stor detalj. Jeg har satt opp noen få eksempler for å gi deg en ide om hvordan noen av operatørene blir brukt nedenfor:
// addioa / substraction / multiply / divide var someMaths = 2 + 3 + 4 - 10 * 100/2; // Likestilling hvis (2 == (5 - 3) / * Gjør ting * / // == sjekker for eqaulity // Ulikhet hvis (2! = 5 - 3) / * Gjør ting * / / / Strict Equality Operators: // (Jeg foreslår at du bruker disse) 2 === 2 // I stedet for 2 == 2 2! == 3 // I stedet for 2! = 3 // Oppgave: var numberOfFruit = 9; numberOfFruit - = 2; // Samme som "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // Samme som "numberOfFruit = numberOfFruit + 2"
Looping er nyttig når du må gå gjennom alle elementene i en matrise eller alle medlemmer av et objekt. Den vanligste måten å løse i JavaScript, er å bruke enten FOR eller WHILE-setningen.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE loop var counter = 0; var lengthOfArray = envatoTutSites.length; mens (teller < 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]);
La oss anta at vi har et grunnleggende XHTML-dokument som inneholder et avsnitt og en uordnet liste:
Javascript! Mitt første avsnitt ...
I dette første eksemplet kommer vi til å få tilgang til vårt avsnitt ved å bruke 'getElementById' DOM-metoden:
(Denne koden går innenfor SCRIPT-elementet i ovennevnte mal).
var introParagraph = document.getElementById ('intro'); // Vi har nå en referanse til DOM-noden. Denne DOM // node representerer innledningsavsnittet. Variabelen 'introParagraph' er nå en referanse til DOM-noden. Vi kan gjøre en rekke ting med denne noden, - vi kan spørre innholdet og attributter, og kan manipulere ethvert aspekt av det. Vi kan fjerne den, klone den eller flytte den til andre deler av DOM-treet.
Alt som er til stede i et dokument vi kan få tilgang til ved hjelp av JavaScript og DOM API. Så, vi vil kanskje få tilgang til den uordnede listen på lignende måte, det eneste problemet er at det ikke har en ID. Du kan gi den en ID og deretter bruke samme metode som ovenfor, eller vi kunne få tilgang til den ved hjelp av "getElementsByTagName":
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' returnerer en live node samling / liste // - Det ligner veldig på en rekke med noen få små forskjeller. Metoden GetElementsByTagName returnerer en live node-samling / liste. Det ligner en matrise ved at den har en lengdeegenskap. En viktig ting å merke seg er at disse samlingene er "live" - hvis du legger til et nytt element i DOM, vil samlingen oppdatere seg selv. Siden det er et array-lignende objekt, kan vi få tilgang til hver node via en indeks, fra 0 til samlet lengde på samlingen (minus 1):
// Få tilgang til en uordnet liste: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Opprett nodeliste over alle listeposter i UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Nå kan vi løkke gjennom hvert liste element ved hjelp av en FOR-sløyfe: for (var i = 0, lengde = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
Begrepet "traverse" brukes til å beskrive handlingen av å reise gjennom DOM, finne noder. DOM API gir oss nok av nodeegenskaper som vi kan bruke til å flytte opp og ned gjennom alle noder i et dokument.
Disse egenskapene er iboende av alle noder og gir deg tilgang til relaterte / lukkede noder:
Så, som du ser, er det utrolig enkelt å krysse DOM'en, det er bare et tilfelle av å kjenne eiendomsnavnet.
En ting å merke seg om grafikken ovenfor: Listen elementer kan bare hentes på den måten hvis det ikke er mellomrom mellom dem. Fordi du kan ha tekstnoder og elementnoder i et dokument, er plassen mellom '
Slik fungerer alle de store JavaScript-bibliotekene bak kulissene; ved hjelp av native DOM metoder og egenskaper for å gi deg tilgang til disse elementene gjennom en pent polert abstraksjon. Det som skiller deg fra rammen, er at du nå har en ide om hvordan du overlever uten rammebetingelser (hvis du ikke allerede)!
Vel, det er det for første del. Jeg håper du har lært noe fra alle mine ramblings. I neste del av serien vil vi forhåpentligvis fokusere på noen flere gjeldende eksempler; vi vil trolig også dekke nettleseren hendelse modellen.
I mellomtiden og hvis du ikke allerede har sjekket ut disse snakkene av Doug Crockford (Yahoo! Videoside):
Takk for at du leste!
