Share
Hallo en welkom bij het eerste deel van hopelijk een uitgebreide serie over kernaspecten van de JavaScript-programmeertaal en de DOM-API.
Hoewel frameworks zoals jQuery, Prototype en MooTools geweldige manieren zijn om browser bugs te onderdrukken en de ontwikkeling te versnellen, is het belangrijk om de onderliggende technologieën te kennen en te begrijpen. Deze serie is bedoeld om u te vertellen wat u moet weten over JavaScript en het Document Object Model (DOM). Zelfs als je zweert bij een bepaalde bibliotheek, zal dit je nog steeds voordeel opleveren - wetende dat iets onder de huid werkt, kan alleen maar een goede zaak zijn!
JavaScript is a dynamisch, losjes getypt, prototype-gebaseerde programmeertaal die in veel verschillende omgevingen wordt gebruikt. Naast dat het de meest voorkomende programmeertaal op de client van het web is, wordt het ook gebruikt om plug-ins voor IDE's te schrijven, in PDF-bestanden en als basis voor andere platforms en hogere abstracties.
JavaScript is gebaseerd op de ECMAScript-standaard (ECMA-262) en is gemaakt door Brendan Eich van Netscape. Het heette oorspronkelijk LiveScript, maar het werd later hernoemd naar JavaScript, waarschijnlijk met de enige bedoeling verwarring te veroorzaken.
Hier zijn enkele van de functies in een beetje meer detail:
Het begrijpen van de bovenstaande punten is niet belangrijk bij het leren over JavaScript; het zijn slechts een paar ideeën om je brein in de juiste versnelling te brengen en zou je moeten helpen JavaScript te onderscheiden van andere programmeertalen die je misschien hebt ervaren.
Het Document Object Model, normaal gesproken afgekort tot DOM, is de API waarmee JavaScript interageert met inhoud binnen een website. JavaScript en de DOM worden meestal als één geheel beschouwd, omdat JavaScript het meest wordt gebruikt voor dit doel (interactie met inhoud op internet). De DOM API wordt gebruikt voor toegang tot, doorkruisen en manipuleren van HTML- en XML-documenten.
Hier zijn een paar opmerkelijke dingen over de DOM:
') dan is het via de DOM toegankelijk als een knooppunt.
Als u Firefox gebruikt en u de Firebug-addon nog niet hebt, raad ik u aan deze nu te downloaden en te installeren. Het is een zeer nuttige tool om een goed beeld te krijgen van de gehele documentstructuur.
Wanneer u JavaScript op een website wilt gebruiken, moet dit worden opgenomen in een SCRIPT-element:
JavaScript!
Zoals je ziet hebben we een SCRIPT-element onderaan ons document. Het TYPE-kenmerk moet strikt worden ingesteld op 'application / javascript' maar tot geen verrassing werkt dit niet in Internet Explorer, dus we zitten vast met 'text / javascript' of helemaal geen TYPE-attribuut. Als u om validatie geeft, zal de eerdere suggestie waarschijnlijk bij u passen.
Je zult ook gemerkt hebben dat we binnen dat SCRIPT-element een aantal afgebakende regels hebben. Deze informeren browsers die XHTML ondersteunen dat de inhoud van het SCRIPT-element 'karaktergegevens' is en niet moet worden geïnterpreteerd als XHTML-markup. Het is alleen echt nodig als u van plan bent om de '<' or '>tekens in uw JavaScript-code. Vanzelfsprekend kun je dit alles vergeten als je eenvoudige HTML gebruikt.
JavaScript dat we in dat SCRIPT-element plaatsen, wordt uitgevoerd terwijl de pagina wordt geladen. De enige uitzondering is wanneer een SCRIPT-element een kenmerk 'defer' heeft. Wanneer een browser een SCRIPT-element tegenkomt, stopt het standaard en voert het de code uit, waarna het door gaat met het ontleden van het document. Het DEFER-attribuut informeert de browser dat de code geen code bevat voor het wijzigen van documenten en dus later kan worden uitgevoerd. Het enige probleem hiermee is dat het alleen in IE werkt, dus het is waarschijnlijk het beste om dit kenmerk te vermijden.
Als u een koppeling wilt maken naar een extern scriptbestand, voegt u eenvoudig een SRC-kenmerk toe aan uw SCRIPT-element dat overeenkomt met de locatie. Het is normaal gesproken een beter idee om aparte scriptbestanden te hebben dan om code inline te schrijven, omdat dit betekent dat de browser het bestand kan cachen. Bovendien hoeft u zich geen zorgen te maken over die CDATA-onzin:
Voordat we verder gaan met de DOM is het een goed idee om een basiskennis te hebben van een aantal JavaScript-essentials. Als je moeite hebt om een aantal hiervan te begrijpen, maak je geen zorgen - je zult ze uiteindelijk wel oppikken!
In JavaScript kunt u verschillende soorten waarden hebben. Er zijn getallen, strings, Booleans, Objects, Undefined en Null:
Opmerkingen met enkele regel worden geschreven met behulp van twee schuine strepen (//); alle resterende tekst op die regel wordt verondersteld een opmerking van de parser te zijn. Meerregelige opmerkingen worden aangeduid met '/ *' en '* /' om de opmerking te beëindigen.
In JavaScript worden alle getallen weergegeven als drijvende-kommawaarden. Bij het definiëren van een getalvariabele onthoud dat u deze niet tussen aanhalingstekens plaatst.
// Opmerking: gebruik ALTIJD 'var' om een variabele te declareren: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
Elke reeks die u definieert, wordt letterlijk genomen, JavaScript verwerkt deze niet. Een reeks is een reeks Unicode-tekens en moet worden ingepakt in een bijpassend paar enkele of dubbele aanhalingstekens.
var firstPart = 'Hallo'; var secondPart = 'World!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Het + -teken wordt gebruikt als de string-concatenation-operator // (het wordt ook gebruikt voor numerieke optelling)
Booleaanse typen zijn handig wanneer u een voorwaarde wilt evalueren om te zien of deze aan een opgegeven criterium voldoet. Er zijn slechts twee mogelijke Booleaanse waarden: waar en onwaar. Elke vergelijking, met behulp van logische operatoren, resulteert in een Boolean.
5 === (3 + 2); // = true // U kunt Booleaanse waarden toewijzen aan variabelen: var veryTired = true; // Je kunt het op deze manier testen: if (veryTired) // Sleep
Het '===' dat u hierboven ziet, is een vergelijkingsoperator, we zullen ze later bespreken.
Een functie is een gespecialiseerd object:
Accentsconagua
// Gebruik de functieoperator om een nieuwe functie te maken: function myFunctionName (arg1, arg2) // Functiecode komt hier. // Als u de naam van de functie weglaat, // maakt u een "anonymous function": function (arg1, arg2) // Functiecode komt hier. // Een functie uitvoeren is eenvoudigweg een kwestie van verwijzen naar // en vervolgens een haakje toevoegen (met argumenten): myFunctionName (); // Geen argumenten myFunctionName ('foo', 'bar'); // met argumenten // U kunt ook een functie uitvoeren zonder // it toe te kennen aan een variabele: (function () // Dit staat bekend als een zichzelf aanroepende anonieme functie) (); Een array is ook een gespecialiseerd object en kan een willekeurig aantal gegevenswaarden bevatten. Voor toegang tot gegevenswaarden binnen een array moet u een nummer gebruiken, de 'index' van het item dat u probeert op te halen:
// 2 verschillende manieren om een nieuwe array te declareren, // Letterlijk: var fruit = ['appel', 'citroen', 'banaan']; // Gebruik van de Array-constructor: var fruit = new Array ('apple', 'lemon', 'banana'); fruit [0]; // Toegang tot het eerste item van de array (appel) fruit [1]; // Toegang tot het tweede item van de array (citroen) fruit [2]; // Toegang tot het derde item van de array (banaan) Een object is een verzameling benoemde waarden (sleutel / waarde-paren). Het lijkt op een array, het enige verschil is dat u een naam kunt opgeven voor elke gegevenswaarde.
// 2 verschillende manieren om een nieuw object te declareren, // Letterlijk (accolades): var profile = name: 'Bob', age: 99, job: 'Freelance Hitman'; // De constructor Object gebruiken: var profile = new Object (); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman';
Een van de meest voorkomende constructies in JavaScript is de 'ALS' / 'ELSE' uitspraak. Het gaat ongeveer als volgt:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // We kunnen 'alert' gebruiken om de gebruiker op de hoogte te stellen: alert ('You can drink.'); else alert ('Sorry, je kunt niet drinken.'); In plaats van ze allemaal hier op te sommen, stel ik voor dat je het MDC-artikel over Operators bezoekt. Het verklaart ze in veel detail. Ik heb enkele voorbeelden gegeven om u een idee te geven van hoe sommige operatoren hieronder worden gebruikt:
// additioa / aftrekking / vermenigvuldigen / delen var someMaths = 2 + 3 + 4 - 10 * 100/2; // Gelijkheid als (2 == (5 - 3) / * Dingen doen * / // == controleert op eqaulity // Ongelijkheid als (2! = (5 - 3) / * Dingen doen * / / / Strikte gelijkheidsoperatoren: // (ik stel voor deze te gebruiken) 2 === 2 // In plaats van 2 == 2 2! == 3 // In plaats van 2! = 3 // Opdracht: var numberOfFruit = 9; numberOfFruit - = 2; // Gelijk aan "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // Gelijk aan "numberOfFruit = numberOfFruit + 2"
Looping is handig wanneer u alle items in een array of alle leden van een object moet doorlopen. De meest gebruikelijke manier om in JavaScript te lus te gaan, is door de instructie FOR of WHILE te gebruiken.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE loop var counter = 0; var lengthOfArray = envatoTutSites.length; terwijl (tegen < 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]);
Laten we aannemen dat we een eenvoudig XHTML-document hebben met een alinea en een ongeordende lijst:
JavaScript! Mijn eerste alinea ...
In dit eerste voorbeeld gaan we naar onze paragraaf met behulp van de 'getElementById' DOM-methode:
(Deze code past binnen het SCRIPT-element in de bovenstaande sjabloon).
var introParagraph = document.getElementById ('intro'); // We hebben nu een verwijzing naar het DOM-knooppunt. Dit DOM // -knooppunt vertegenwoordigt de intro-paragraaf. De variabele 'introParagraph' is nu een verwijzing naar het DOM-knooppunt. We kunnen een aantal dingen met dit knooppunt doen, - we kunnen de inhoud en attributen ervan bevragen, en elk aspect ervan manipuleren. We kunnen het verwijderen, klonen of verplaatsen naar andere delen van de DOM-boom.
Alles wat aanwezig is in een document waartoe we toegang hebben met behulp van JavaScript en de DOM API. We willen misschien op dezelfde manier toegang krijgen tot de ongeordende lijst, het enige probleem is dat het geen ID heeft. Je zou het een ID kunnen geven en dan dezelfde methode gebruiken als hierboven of we zouden er toegang toe hebben met behulp van 'getElementsByTagName':
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' retourneert een verzameling / lijst met live-knooppunten // - Het lijkt erg op een array met een paar kleine verschillen. De methode 'getElementsByTagName' retourneert een verzameling / lijst met live knooppunten. Het lijkt op een array omdat het een eigenschap length heeft. Een belangrijk ding om op te merken is dat deze collecties "live" zijn - als je een nieuw element aan de DOM toevoegt, zal de verzameling zichzelf updaten. Omdat het een arrayachtig object is, hebben we toegang tot elk knooppunt via een index, van 0 tot de totale lengte van de verzameling (min 1):
// Open de ongeordende ongeordende lijst: [0] index var ongeordendList = document.getElementsByTagName ('ul') [0]; // Maak een knooppuntlijst van alle lijstitems binnen de UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Nu kunnen we elk lijstitem doorlopen met een FOR-lus: for (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
De term "traverse" wordt gebruikt om de actie te beschrijven van het reizen door de DOM, het vinden van knooppunten. De DOM API geeft ons veel knooppunteigenschappen die we kunnen gebruiken om omhoog en omlaag te gaan door alle knooppunten in een document.
Deze eigenschappen zijn inherent aan alle knooppunten en bieden u toegang tot gerelateerde / gesloten knooppunten:
Dus, zoals u kunt zien, is het zeer eenvoudig om de DOM te doorkruisen, het is gewoon een kwestie van de namen van de eigendommen kennen.
Een ding om op te merken over de bovenstaande afbeelding: de lijstitems kunnen alleen op die manier worden opgehaald als er geen spatie tussen is. Omdat u tekstknooppunten en elementknooppunten in een document kunt hebben, de ruimte tussen de '
Dit is de manier waarop alle belangrijke JavaScript-bibliotheken achter de schermen werken; gebruik van native DOM-methoden en -eigenschappen om u toegang te geven tot deze elementen via een mooi gepolijste abstractie. Wat je scheidt van het raamwerk, is dat je nu een idee hebt van hoe te overleven zonder een raamwerk (als je dat nog niet had gedaan)!
Nou, dat is het voor deel een. Ik hoop dat je iets hebt geleerd van al mijn omzwervingen. In het volgende deel van de serie zullen we ons hopelijk concentreren op enkele meer toepasbare voorbeelden; we zullen waarschijnlijk ook het browsergebeurtenismodel behandelen.
In de tussentijd en als je dit nog niet hebt gedaan, bekijk dan deze besprekingen van Doug Crockford (Yahoo Video-site):
Bedankt voor het lezen!
