Share
Bună ziua și bun venit la prima parte a ceea ce, sperăm, va fi o serie extinsă care să acopere aspectele esențiale ale limbajului de programare JavaScript și DOM API.
În timp ce cadre precum jQuery, Prototype și MooTools sunt modalități excelente de a suprima bug-urile browserului și de a accelera dezvoltarea, este important să cunoașteți și să înțelegeți tehnologiile care stau la baza acestuia. Această serie intenționează să vă spună ce trebuie să știți despre JavaScript și Modelul Obiectului de Document (DOM). Chiar dacă jurați de o anumită bibliotecă, acest lucru vă va aduce beneficii - știind cum funcționează ceva sub piele poate fi doar un lucru bun!
JavaScript este a dinamic, tiparit slab, prototip bazat pe limba de programare care este folosită în multe medii diferite. Pe lângă faptul că este limbajul de programare predominant pe partea clientului, este folosit și pentru a scrie plugin-uri pentru IDE, în fișiere PDF și ca bază pentru alte platforme și abstracții mai mari.
JavaScript se bazează pe standardul ECMAScript (ECMA-262) și a fost creat de Brendan Eich de la Netscape. Acesta a fost inițial numit LiveScript, dar mai târziu a fost redenumit la JavaScript, probabil cu singura intenție de a provoca confuzie.
Iată câteva dintre caracteristicile sale într-un mod mai detaliat:
Înțelegerea punctelor de mai sus nu este importantă în procesul de învățare despre JavaScript; este doar câteva idei pentru a-ți obține creierul în viteză și ar trebui să te ajute să diferențiezi JavaScript de alte limbi de programare pe care le-ai experimentat.
Modelul obiect de documente, în mod normal abreviat la DOM, este API-ul prin care JavaScript interacționează cu conținutul unui site web. JavaScript și DOM sunt de obicei văzute ca o singură entitate deoarece JavaScript este cel mai frecvent utilizat în acest scop (interacționând cu conținut de pe web). API-ul DOM este folosit pentru a accesa, traversa și manipula documente HTML și XML.
Iată câteva lucruri demne de remarcat despre DOM:
'), atunci acesta poate fi accesat prin DOM ca nod.
Dacă utilizați Firefox și nu aveți deja addon Firebug vă recomandăm să îl descărcați și să-l instalați acum. Este un instrument foarte util pentru a obține o imagine decentă a întregii structuri a documentului.
Când doriți să utilizați JavaScript pe un site web, acesta trebuie să fie inclus într-un element SCRIPT:
JavaScript!
După cum puteți vedea, avem un element SCRIPT în partea de jos a documentului nostru. Atributul TYPE trebuie strict setat la "application / javascript" dar nu e de mirare că nu funcționează în Internet Explorer, astfel că suntem blocați cu atributul "text / javascript" sau fără atribut TYPE deloc. Dacă vă interesează validarea, atunci probabil vă recomandăm sugestia anterioară.
De asemenea, ați observat că în cadrul elementului SCRIPT avem câteva linii comentate. Acestea informează browserele care suportă XHTML că conținutul elementului SCRIPT este "date caracter" și nu ar trebui interpretat ca marcaj XHTML. Este absolut necesar dacă intenționați să utilizați fie "<' or '>"din codul dvs. JavaScript. Evident, puteți uita toate acestea dacă folosiți un HTML simplu.
Orice JavaScript pe care îl punem în interiorul acelui element SCRIPT va rula ca încărcarea paginii. Singura excepție este atunci când un element SCRIPT are un atribut "amânare". În mod implicit, atunci când un browser întâlnește un element SCRIPT, acesta se va opri și va rula codul, apoi va efectua parsarea documentului. Atributul DEFER informează browserul că codul nu conține cod de modificare a documentelor și poate fi rulat mai târziu. Singura problemă cu acest lucru este că funcționează numai în IE, deci probabil că este bine să evitați acest atribut.
Dacă doriți să conectați un fișier de script extern, atunci pur și simplu adăugați un atribut SRC elementului SCRIPT corespunzător locației sale. Este, în mod normal, o idee mai bună de a avea fișiere separate de script decât să scrieți codul în linie, deoarece înseamnă că browserul poate memora cache-ul. În plus, nu trebuie să vă faceți griji cu privire la oricare dintre aceste prostii CDATA:
Înainte de a continua cu DOM este o idee bună să aveți o înțelegere de bază a unor elemente esențiale JavaScript. Dacă aveți probleme în a înțelege unele dintre acestea, nu vă faceți griji - în cele din urmă le veți ridica!
În JavaScript puteți avea diferite tipuri de valori. Există numere, șir, boolean, obiecte, nedefinite și nul:
Comentariile dintr-o singură linie sunt scrise cu două slash-uri (//), tot textul rămas pe acea linie este considerat a fi un comentariu de către parser. Comentariile cu mai multe linii sunt semnificative folosind '/ *' și '* /' pentru a termina comentariul.
În JavaScript, toate numerele sunt reprezentate ca valori în virgulă mobilă. Atunci când definiți o variabilă numerică, rețineți că nu o înfășurați în nici un citat.
// Notă: Utilizați întotdeauna 'var' pentru a declara o variabilă: var leftSide = 100; var topSide = 50; var zonaOfRectangle = leftSide * topSide; // = 5000
Orice șir definit este luat literal, JavaScript nu îl va procesa. Un șir este o secvență de caractere Unicode și trebuie înfășurat într-o pereche potrivită de ghilimele simple sau duble.
var firstPart = 'Bună ziua'; var secondPart = 'Lumea!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Semnul + este folosit ca operator de concatenare a șirului // (este folosit și pentru adăugarea numerică)
Tipurile booleene sunt utile atunci când doriți să evaluați o condiție - pentru a vedea dacă îndeplinește criteriile specificate. Există doar două valori booleene posibile: adevărate și false. Orice comparație, folosind operatori logici, va avea ca rezultat un boolean.
5 === (3 + 2); // = true // Puteți atribui valori booleene variabilelor: var veryTired = true; // Puteți testa după cum urmează: if (veryTired) // Sleep
"===" pe care o vedeți mai sus este un operator de comparare, le vom acoperi mai târziu.
O funcție este un Obiect specializat:
Accentsconagua
// Utilizarea funcției operator pentru a crea o nouă funcție: funcția myFunctionName (arg1, arg2) // Codul funcțional merge aici. // Dacă omiteți numele funcției, atunci // creați o funcție "anonimă": funcția (arg1, arg2) // Codul funcției merge aici. // Rularea unei funcții este pur și simplu un caz de referință // și apoi adăugarea unei paranteze (cu argumente): myFunctionName (); // Nu există argumente myFunctionName ('foo', 'bar'); // cu argumente // Puteți de asemenea să executați o funcție fără a-i acorda // o variabilă: (funcția () // Aceasta este cunoscută ca o funcție anonimă care invocă automat) (); O matrice este, de asemenea, un obiect specializat și poate conține orice număr de valori de date. Pentru a accesa valorile datelor într-un tablou, trebuie să utilizați un număr denumit "index" al elementului pe care încercați să îl regăsiți:
// 2 moduri diferite de declarare a unei noi matrice; // Literal: var fruit = ['apple', 'lemon', 'banana']; // Utilizând constructorul Array: var fruit = Array nou ('apple', 'lemon', 'banana'); fructe [0]; // Accesați elementul 1 al fructului (măr) [1]; // Accesați al doilea element al fructului (lămâie) [2]; // Accesați al treilea element al matricei (banană) Un obiect este o colecție de valori numite (perechi cheie-valoare). Este similară cu o matrice, singura diferență fiind că puteți specifica un nume pentru fiecare valoare de date.
// 2 moduri diferite de a declara un Obiect nou, // Literal (bretele curlate): var profile = name: 'Bob', vârsta: 99, job: 'Freelance Hitman'; // Utilizarea constructorului de obiecte: var profile = new Object (); profile.name = 'Bob'; profile.age = 99; profile.job = "Freelance Hitman";
Unul dintre cele mai comune constructe din JavaScript este 'IF' / 'ELSE' afirmație. Se intampla astfel:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // Putem folosi "alertă" pentru a notifica utilizatorul: alertă ("Puteți bea."); altceva alert ("Ne pare rău, nu puteți bea."); În loc să le listați pe toate, vă sugerăm să vizitați articolul MDC privind operatorii. Le explică foarte mult. Am setat câteva exemple pentru a vă da o idee despre modul în care unii dintre operatori sunt utilizați mai jos:
// additioa / substrație / multiplicare / împărțire var someMaths = 2 + 3 + 4 - 10 * 100/2; // Egalitatea în cazul în care (2 == (5 - 3) / * Face chestii * / // == verifică pentru eqaulitate // Inegalitate dacă (2! = (5 - 3) / Operatori de Egalitate Strictă: // (Vă sugerez să le folosiți) 2 === 2 // În loc de 2 == 2 2! == 3 // În loc de 2! = 3 // Alocare: var numberOfFruit = 9; numberOfFruit - = 2; // La fel ca "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // La fel ca "numberOfFruit = numberOfFruit + 2"
Looping-ul este util atunci când trebuie să treceți prin toate elementele dintr-un matrice sau toți membrii unui obiect. Cea mai obișnuită metodă de a intra în JavaScript este prin utilizarea instrucțiunii FOR sau WHILE.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'); // WHILE buclă var counter = 0; var lengthOfArray = envatoTutSites.length; în timp ce (contra < 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]);
Să presupunem că avem un document XHTML de bază care conține un paragraf și o listă neordonată:
JavaScript! Primul meu paragraf ...
În acest prim exemplu, vom accesa paragraful nostru utilizând metoda DOM "getElementById":
(Acest cod se încadrează în elementul SCRIPT din șablonul de mai sus).
var introParagraph = document.getElementById ('intro'); // Acum avem o referință la nodul DOM. Acest nod DOM // reprezintă paragraful intro. Variabila "introParagraph" este acum o referință la nodul DOM. Putem face mai multe lucruri cu acest nod - putem interoga conținutul și atributele acestuia și putem manipula orice aspect al acestuia. Putem să o eliminăm, să o clonăm sau să o mutăm în alte părți ale copacului DOM.
Orice lucru care este prezent într-un document pe care îl putem accesa folosind JavaScript și DOM API. Așadar, am putea dori să accesăm lista neordonată într-un mod similar, singura problemă este că nu are un ID. Îți poți da o identitate și apoi folosește aceeași metodă ca cea de mai sus sau am putea accesa-o folosind 'getElementsByTagName':
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' returnează o colecție / listă de noduri live // - Este foarte asemănătoare cu o matrice cu câteva mici diferențe. Metoda getElementsByTagName returnează o colecție / listă de noduri vii. Este similar cu o matrice în sensul că are o proprietate de lungime. Un lucru important este faptul că aceste colecții sunt "live" - dacă adăugați un element nou în DOM, colecția se va actualiza. Deoarece este un obiect asemănător cu array, putem accesa fiecare nod printr-un index, de la 0 la lungimea totală a colecției (minus 1):
// Accesați o singură listă neordonată: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Crearea nodului lista tuturor elementelor din listă din UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Acum, putem buclele prin fiecare element de listă folosind o buclă FOR: pentru (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
Termenul "traverse" este folosit pentru a descrie acțiunea de călătorie prin DOM, găsirea de noduri. API-ul DOM ne oferă o mulțime de proprietăți ale nodurilor pe care le putem folosi pentru a vă deplasa în sus și în jos prin toate nodurile dintr-un document.
Aceste proprietăți sunt inerente tuturor nodurilor și vă permit să accesați nodurile apropiate / apropiate:
Deci, după cum puteți vedea, traversarea DOM-ului este incredibil de ușoară, este doar un caz de cunoaștere a numelor proprietăților.
Un lucru de observat în legătură cu graficul de mai sus: elementele din listă pot fi preluate numai dacă nu există spații între ele. Deoarece puteți avea noduri de text și noduri de elemente într-un document spațiul dintre "
Acesta este modul în care toate bibliotecile JavaScript majore funcționează în spatele scenei; folosind metode și proprietăți DOM native pentru a vă oferi acces la aceste elemente printr-o abstracție frumos lustruită. Ceea ce vă separă de trăsăturile cadru este că aveți acum o idee despre cum să supraviețuiți fără un cadru (dacă nu ați făcut-o deja)!
Ei bine, asta e pentru prima parte. Sper că ați învățat ceva din toate ramblarile mele. În următoarea parte a seriei, sperăm să ne concentrăm pe câteva exemple mai aplicabile; probabil vom acoperi și modelul evenimentului pentru browser.
Între timp și dacă nu ați făcut deja aceste discuții de către Doug Crockford (site-ul Yahoo! Video):
Vă mulțumim pentru lectură!
