Tutoriale video de la WebMagisters. Douglas Crockford „JavaScript: puncte forte”

Selectia materialelor pentru învăţarea JavaScript pentru orice nivel de pregătire – am adunat resurse utile, care sunt potrivite atât pentru începători, cât și pentru profesioniști.

Începătoarea Marijn Haverbeke „JavaScript expresiv”

Cartea atinge conceptele fundamentale nu numai ale JS, ci și ale programării în general. Pe lângă studiul teoriei, autorul se va oferi să implementeze mai multe proiecte practice interesante. De exemplu, creați-vă propriul limbaj de programare.

Curs JavaScript Jedi de la Sorax

Curs video de la renumit programatorși un profesor pe nume Sorax este grozav pentru a începe să învețe JS.

Tutoriale video de la WebMagisters

Un alt curs video excelent în limba rusă, care vă va spune despre elementele de bază ale JS și despre cum să-l utilizați corect în dezvoltarea web.

JavaScript30

30 de zile vorbitoare de engleză curs practic de JS. Autorul nu se bazează foarte mult pe teorie, dar încă de la prima lecție sugerează scrisul proiecte interesante, care devin mai dificile de la lecție la lecție.

Pentru cei care cunosc noțiunile de bază Tutorial JavaScript modern

Un tutorial interactiv care va fi la fel de util atât unui începător, cât și unui programator care a studiat elementele de bază. Conține multe subtilități și trucuri cu privire la munca JS și DOM.

Eddie Osmani „Modele pentru aplicații JavaScript scalabile” JavaScript. Șabloane

Această carte este, de asemenea, un ghid pentru un numar mare exemple practiceși un ghid complet pentru Noțiuni de bază. Recomandat pentru programatorii care au nevoie să învețe un limbaj de programare web, precum și pentru programatorii care folosesc deja JS și doresc să-l stăpânească perfect.

Douglas Crockford „JavaScript: punctele forte»

JS - departe de asta cel mai bun limbaj programare, mai ales când vine vorba de optimizarea acesteia. De când a fost creat în grabă, are multe puncte slabeși modele teribile. Este exact ceea ce autorul își propune să vorbească în paginile cărții sale și, în același timp, să înțeleagă ce anume determină punctele forte ale limbajului și cum acest lucru va ajuta la crearea unui cod cu adevărat extensibil și eficient.

McLaughlin B. „Învățare AJAX”

O carte pentru cei care doresc să înțeleagă mai bine cum funcționează AJAX. Recomandat tuturor celor care doresc să-și ducă creația la nivelul următor aplicații interactive pentru web.

Tom Coleman și Sasha Greif „Descoperiți Meteorul. Crearea de aplicații web JavaScript în timp real”

Cartea este dedicată lui Meteor.js - un cadru care este construit pe baza Node.js și este în esență un strat rapid între interfață și baza de date. Vă permite să creați aplicații JS cu adevărat interactive și să utilizați un singur cod atât pe server, cât și pe client.

Documentația Meteor.js

Documentația Meteor.js tradusă de comunitate în rusă.

Mark Bates „CoffeeScript. Al doilea vânt al JavaScript-ului"

Dacă știți deja și utilizați CoffeeScript în munca dvs., atunci această carte vă va ajuta să vă faceți treaba mai bine. Și dacă nu, va fi un ghid excelent și principala carte de referință pe această temă. Publicația este destinată în primul rând dezvoltatorilor web care folosesc JS, precum și tuturor celor care doresc să scrie cod de înaltă calitate și ușor de înțeles.

Maximiliano Firtman „jQuery Mobile. Dezvoltare de aplicații pentru smartphone-uri și tablete"

Cartea vorbește despre crearea de aplicații web dinamice folosind JS, AJAX și biblioteci jQuery. De asemenea, acordă atenție creării de aplicații cu capacitatea de a lucra autonom offline.

Am colectat mai multe ghiduri excelente pe Internet pentru a lucra și a învăța Angular.js și le-am prezentat atenției.

Continuarea selecției de materiale pe Angular, de data aceasta cu link-uri către diverse surse utile, precum prezentarea cadrului versiunea 2 (pentru a afla ce s-a schimbat și a apărut în versiune noua framework din sursa originală), precum și podcasturi interesante și alte materiale care pot fi utile în învățarea Angular.js.

Tutoriale video pe Node.js

Un scurt curs video pe Node.js - potrivit pentru cei care nu sunt complet familiarizați cu acest cadru și pentru cei care doresc să-și reîmprospăteze cunoștințele despre acesta.

Tutoriale video despre CoffeeScript de la Sorax.

O altă serie de tutoriale de la Sorax, de data aceasta pentru utilizatorii JS mai avansați care doresc să se familiarizeze cu CoffeeScript. Grozav de urmărit imediat după cursul JavaScript vanilla.

Cartea „Suprarealismul în JavaScript”.

Un ghid excelent pentru cei cărora le place să învețe lucruri noi prin practică - cartea vă va spune cum să creați aplicații complexe, cum ar fi jocuri folosind JS.

Dintr-o privire: în partea 1 a seriei de manuale Modern JavaScript Concepts, vom introduce programarea funcțională (FP), programarea reactivă (RP) și programarea funcțională reactivă (FRP). Pentru a face acest lucru, vom învăța despre puritate, stare și apatridie, imuabilitate și mutabilitate, programare imperativă și declarativă, funcții de ordin superior, observabile și paradigmele FP, RP, FRP.

Introducere

In spate anul trecut JavaScript a evoluat mult și nu crede că se va opri aici. Cu toate acestea, multe concepte născute în blogurile și documentația JS rămân nerevendicate de o gamă largă de dezvoltatori de interfețe. În această serie de articole, vom explora conceptele care necesită atât niveluri intermediare, cât și niveluri avansate de cunoștințe și modul în care se încadrează în JavaScript modern.

Concepte

În acest articol, vom acoperi conceptele care sunt esențiale pentru înțelegerea programării funcționale, programarea reactivă și programarea reactivă funcțională și modul de utilizare a acestora cu JavaScript:

Puritate: funcții pure, funcții impure, efecte secundare
Stare: cu și fără el
Imuabilitate și schimbare
Programare imperativă și declarativă
Funcții de ordin superior
Programare functionala
Observabile: cald și rece
Programare reactiva
Programare Reactivă Funcțională

Puritate Funcții pure

Valoarea returnată a unei funcții pure depinde doar de datele de intrare (argumente) și nu implică niciun efect secundar. Cu același argument de intrare, rezultatul va fi întotdeauna același. Exemplu:

Funcția jumătate (x) (
întoarcere x / 2;
}

Funcția half(x) ia un număr x și returnează valoarea jumătății x . Dacă trecem un argument de 8 acestei funcție, va returna 4. Odată apelată, o funcție pură poate fi întotdeauna înlocuită cu rezultatul muncii sale. De exemplu, am putea înlocui jumătate (8) cu 4: oriunde este folosită această funcție în codul nostru, înlocuirea nu ar avea niciun efect rezultat final. Aceasta se numește transparență referențială.

Funcțiile pure depind doar de ceea ce le este transmis. De exemplu, o funcție pură nu poate face referire la variabile din domeniul de aplicare al părintelui decât dacă acestea sunt transmise în mod explicit acesteia ca argumente. Chiar și atunci, funcția nu poate schimba nimic în domeniul său de aplicare părinte.

Var someNum = 8;

// aceasta NU este o funcție pură
funcția impureHalf() (
returnează someNum / 2;
}

Funcțiile pure trebuie să ia argumente.
Aceleași intrări (argumente) vor produce întotdeauna aceleași ieșiri (întoarce același rezultat).
Funcțiile pure se bazează doar pe starea internă și nu o schimbă pe cea externă ( Notă: console.log schimbă starea globală).
Funcțiile pure nu produc efecte secundare.
Funcțiile pure nu pot apela funcții impure.

Funcții impure

O funcție impură își schimbă starea în afara domeniului său de aplicare. Orice funcții cu efecte secundare(vezi mai jos) sunt necurate, la fel ca funcțiile procedurale fără o valoare returnată.

Luați în considerare următoarele exemple:

Efecte secundare în JavaScript

Când o funcție sau o expresie își schimbă starea în afara contextului său, rezultatul este un efect secundar. Exemple de efecte secundare: apelarea unui API, manipularea DOM, emiterea unei alerte, scrierea într-o bază de date și așa mai departe. Dacă o funcție produce efecte secundare, se ia în considerare necurat. Funcțiile care provoacă efecte secundare sunt mai puțin previzibile și mai greu de testat, deoarece provoacă modificări în afara domeniului lor local.

Pentru a rezuma: curățenia

O mulțime de cod bun constă în funcții impure numite procedural de către cele pure. Acest lucru are încă o mulțime de beneficii pentru testare și imuabilitate. Transparența referențială are, de asemenea, comoditatea memorării: stocarea în cache și stocarea rezultatelor apelurilor de funcții și apoi reutilizarea rezultatelor stocate în cache. Cu toate acestea, determinarea când funcțiile sunt cu adevărat pure poate fi dificilă.

Informații suplimentare despre curățenie pot fi găsite în următoarele resurse:

Funcții pure sau impure
Programare funcțională: Funcții pure

Stat

Stați — informații la care un program are acces și cu care poate funcționa la un anumit moment în timp. Acestea includ date stocate în memorie, porturi I/O, baze de date și așa mai departe. De exemplu, conținutul variabilelor dintr-o aplicație în orice acest moment timpul este reprezentativ pentru starea aplicației.

Cu o avere

Programele, aplicațiile sau componentele cu stare stochează în memorie datele de stare curentă. Ei pot schimba starea și, de asemenea, pot avea acces la istoria acesteia. Următorul exemplu demonstrează acest lucru:

Număr var = 1; funcția increment() (
return number++;
) // variabila globală este schimbată: număr = 2
creştere();

Nici un stat

Funcțiile sau componentele fără stat efectuează sarcini ca și cum ar fi fost executate pentru prima dată de fiecare dată. Ele nu fac referire și nu folosesc date create anterior în execuția lor. Apatridia oferă transparență referențială. Funcțiile depind doar de argumentele lor și nu au acces și nu trebuie să cunoască nimic în afara domeniului lor. Funcțiile pure nu au stare. Exemplu:

Număr var = 1; creșterea funcției (n) (
întoarce n + 1;
) // variabila globală NU este modificată: returnează 2
increment(numar);

Aplicațiile fără stat gestionează în continuare starea. Cu toate acestea, ei revin la starea lor actuală fără a schimba starea anterioară. Acesta este principiul programării funcționale.

Pentru a rezuma: condiție

Gestionarea averii este importantă pentru oricine aplicație complexă. Funcțiile sau componentele cu stare modifică starea și istoricul acesteia și sunt mai dificil de testat și de depanat. Funcțiile apatride se bazează doar pe intrările lor pentru a produce ieșiri. Un program fără stat returnează o stare nouă în loc să modifice starea existentă.

Informații suplimentare despre stare pot fi găsite la următoarele resurse:

Stat
Beneficiile programării fără stat
Componente cu si fara stari, manual lipsa
Redux: Container de stare previzibilă pentru aplicații JavaScript

Imuabilitate și schimbare

Conceptele de imuabilitate și mutabilitate sunt mai nebuloase în JavaScript decât în alte limbaje de programare. Cu toate acestea, veți auzi multe despre imuabilitate când citiți despre programare functionalaîn JS. Este important să știm ce înseamnă acești termeni în sens clasic și cum sunt implementați în JavaScript. Definitiile sunt destul de simple:

Imuabil

Dacă un obiect este imuabil, valoarea acestuia nu poate fi modificată după ce este creat.

Schimbabil

Dacă un obiect este mutabil, valoarea acestuia poate fi modificată după creare.

Implementare: imuabilitate și mutabilitate în JavaScript

ÎN șiruri JavaScript iar literalele numerice sunt implementate imuabile. Acest lucru este ușor de înțeles dacă luăm în considerare modul în care lucrăm cu ei:

Var str = „Bună ziua!”;
var anotherStr = str.substring(2);
// rezultat: str = "Bună ziua!" (neschimbat)
// rezultat: anotherStr = "llo!" (linie nouă)

Folosind metoda .substring() pe Hello! , șirul nu schimbă șirul original. În schimb ea creează linie nouă. Am putea redefini valoarea lui str la altceva, dar odată ce ne-am creat Hello! , va rămâne pentru totdeauna Salut! .

Literale numerice sunt, de asemenea, imuabile. Următorul exemplu va avea întotdeauna același rezultat:

Var trei = 1 + 2;
// rezultat: trei = 3

În niciun caz 1 + 2 nu pot deveni altceva decât 3.

Acest lucru demonstrează că JavaScript are o implementare a imuabilității. Cu toate acestea, dezvoltatorii JS știu că limbajul vă permite să schimbați foarte mult. De exemplu, obiectele și matricele sunt mutabile. Luați în considerare următorul exemplu:

Var arr = ;
arr.push(4);
// rezultat: arr =

var obj = ( salut: „Bună ziua” );
obj.name = "Jon";
// rezultat: obj = ( salut: „Bună ziua”, nume: „Jon” )

În aceste exemple obiecte sursă schimbat. Obiectele noi nu sunt returnate.

Pentru a afla mai multe despre mutabilitatea în alte limbi, consultați Obiectele mutabile și imuabile.

În practică: Mutabilitatea în JavaScript

Programarea funcțională în JavaScript crește bine. Dar, în esență, JS este un limbaj foarte fluid, constând din multe paradigme. Caracteristica cheie programare funcțională — imuabilitate. Alte limbaje funcționale va arunca o eroare atunci când un dezvoltator încearcă să schimbe un obiect imuabil. Atunci cum putem reconcilia mutabilitatea inerentă a JS atunci când scriem JS reactiv funcțional sau funcțional?

Când vorbim despre programare funcțională în JS, cuvântul „imuabil” este folosit foarte mult, dar este responsabilitatea dezvoltatorului să-l țină mereu cont. De exemplu, Redux se bazează pe un singur arbore de stări imuabil. Cu toate acestea, JavaScript însuși este capabil să modifice obiectul de stare. Pentru a implementa un arbore de stare imuabil, trebuie să returnăm un nou obiect de stare de fiecare dată când starea se schimbă.

Pentru a demonstra conceptul de observabile, să ne uităm la un exemplu simplu: redimensionarea unei ferestre de browser. În acest context, observabilele sunt cât se poate de clare. Redimensionarea ferestrei browserului emite un flux de evenimente în timpul anumită perioadă timp (în timp ce fereastra primește marimea corecta). Putem crea un observabil și să ne abonam la acesta pentru a răspunde la un flux de evenimente de redimensionare:

Exemplul de cod de mai sus demonstrează că, pe măsură ce dimensiunea ferestrei se schimbă, putem limita fluxul observabil și ne putem abona la modificările acestuia pentru a răspunde la noile valori din colecție. Acesta este un exemplu de observabil fierbinte.

Despre acest ghid

Cartea de referință este destinată persoanelor care au stăpânit deja elementele de bază ale programării în JavaScript.

Directorul a fost creat pe baza informațiilor furnizate pe site-ul web „Directorul limbilor web” www.spravkaweb.ru.

Din cauza această resursă reumpletă în mod constant informație nouă, Descarca versiune actualizata cartea de referință poate fi găsită în secțiunea Download

De asemenea, pe site sunt disponibile pentru descărcare cărți de referință despre PHP, CSS, Perl, MySQL.

O incheietura folosind HTMLși JavaScript

. . . Textul scenariului

Atribut limba

Al doilea atribut src

se transforma in single:

Etichetă

Reguli pentru scrierea scenariilor

În primul rând, trebuie să luăm în considerare eticheta. Această etichetă este folosită pentru a insera scripturi în codul HTML al paginii. Formatul său:

. . . Textul scenariului

Textul scriptului este plasat în interiorul etichetei

Atribut limba vă permite să specificați în ce limbaj de programare este scris scriptul.

Valoarea implicită este „JavaScript”.

Internet Explorer scenarii scrise în Limbajul VBScript, care corespunde valorii atributului „VBScript”.

Navigator vă permite să setați versiunea interpretului JavaScript:

Acest lucru poate fi util în cazurile în care utilizați opțiunea limbaj JavaScript, specific unei anumite versiuni.

Următorul tabel prezintă versiunile interpretului JavaScript și corespondența acestora versiuni diferite Navigator:

Al doilea atribut src servește la specificarea adresei fișierului care conține scriptul.

În acest caz, de obicei eticheta asociată se transformă într-o singură etichetă:

js- extensie standard pentru fișierele JavaScript.

Dar ce se întâmplă dacă browserul Web nu acceptă scripturi? (De exemplu, este și versiune veche programul sau utilizatorul a dezactivat suportul pentru scripturi în setările de securitate.) Browserul Web va ignora eticheta și va afișa textul scriptului.

Pentru a evita acest lucru, este recomandat să includeți scriptul într-o etichetă într-un comentariu.

Cu toate acestea, unele versiuni ale Navigator nu „văd” scriptul în acest caz, deși, potrivit manuale tehnice Netscape însuși ar trebui. Prin urmare, acest sfat se aplică numai pentru Internet Explorer.

Alternativ, puteți utiliza .

Această etichetă este acceptată de Internet Explorer și Navigator:

. . . Text de afișat dacă browserul Web nu acceptă scripturi

Eticheta poate fi plasată oriunde în textul paginii, chiar și în afara . Textul plasat în interiorul acestei etichete va fi afișat în locul întregii pagini. Adică, un utilizator al unui browser Web cu suportul pentru scripturi dezactivat va vedea doar acest text în fereastră și nimic altceva.

Model de obiect document

Trebuie remarcat faptul că JavaScript acceptă așa-numitele clase externe și obiecte definite de alte programe.Pagina Web pe care o vizualizați într-o fereastră de browser Web poate fi descrisă ca o colecție de obiecte. Să zicem că include obiect mare„document-ca-întreg” și obiecte mai mici: „paragraf-1”, „paragraf-2”, „paragraf-1” și „figura”. Puteți accesa aceste obiecte din același JavaScript.

Figure.MoveForward;Paragraph-1.Width = 80%;Paragraph-3.Show;

Desigur, acest lucru este foarte exagerat, dar principiul este acesta.

De exemplu, luați în considerare scenariul:

var d;d=new Date();document.write(d.toString());

Document document- acesta este „documentul nostru ca întreg”. A scrie- metoda sa care inserează textul trecut ca parametru în locația curentă a documentului HTML.

Colecția de obiecte care descrie o pagină web, cu toate metodele și proprietățile lor, se numește model obiect document. O tehnologie pentru crearea unei pagini web, în care codul HTML obișnuit este combinat cu codul JavaScript, iar acesta din urmă controlează pagina folosind model de obiect, se numește HTML dinamic (DHTML).

obiect document

activeElement

alinkColor

Exemplu:

set de caractere

compatMode

defaultCharset

designMode

documentElement

fileCreatedDate

fileModifiedDate

mărime fișier

edocument.imagini

modificat ultima dată

linkColor

Locație

parent Window

Similar cu document.embeds

protocol

Returnează versiunea protocolului folosită pentru a accesa documentul curent

readState

Returnează starea curentă a documentului.

referitor

Returnează adresa de Internet a paginii Web din care a navigat utilizatorul pagina curenta. Dacă utilizatorul navighează la acesta prin simpla introducere a adresei în browserul Web, este returnat un șir gol.

Returnează o matrice a tuturor elementelor SCRIPT conținute în document. Este posibil nu numai vizualizarea matricei, ci și adăugarea/eliminarea elementelor.

Securitate

Această proprietate oferă informații despre tipul de securitate, dacă există, aplicat în documentul curent.

selecţie

Proprietatea document.selection returnează un obiect de selecție, al cărui conținut este afișat în fereastra browserului ca o selecție de text. Această selecție poate fi făcută de utilizator sau prin script într-un obiect TextRange

foi de stil

Returnează titlul paginii Web specificat în etichetă

Setează sau returnează adresa de Internet a paginii Web curente.

URL necodificat

Proprietatea returnează șirul URL ca cod. Aceasta înseamnă că toate caracterele non-alfanumerice (adică numai numere și litere ale alfabetului latin) vor fi recodate în reprezentarea lor URL. adică semnul % și cod hexazecimal caracter (de exemplu, un spațiu va arăta ca %20).

vlinkColor

Setează sau returnează culoarea hyperlinkurilor vizitate dintr-un document. În IE funcționează corect numai dacă culoarea hyperlinkurilor vizitate este setată la atributul VLINK.

Lățimea documentului în pixeli.

Metode

Această metodă este concepută pentru a șterge documentul curent din fereastra browserului.

Determină o pagină Web să își actualizeze imediat conținutul după utilizarea metodelor de scriere. Metoda nu acceptă parametri și nu returnează o valoare.

createAttribute()

createAttribute(„Numele atributului”)

Generează un obiect atribut și returnează o referință la acesta. La apelarea metodei, este specificat doar numele atributului, astfel încât scriptul atribuie o valoare proprietății nodeValue, iar apoi noul atribut este adăugat elementului existent folosind *Returns: attribute object reference.

setAttributeNode

var newAttr = document.createAttribute("width");newAttr.nodeValue = "80%";document.getElementById("myTable").setAttributeNode(newAttr);

createElement()

createElement(„Numele mânerului”)

Generează un obiect atribut pentru orice descriptor HTML (sau XML) specificat ca parametru. Acest obiect nu face parte oficial din modelul de obiect al documentului curent, deoarece nu face parte încă din document. Dar aceasta metoda folosit pentru a apela obiectul element care va fi în cele din urmă plasat în document.

elementFromPoint()

elementFromPoint((X), (Y))

getElementById()

getElementById((numele elementului))

Returnează elementul al cărui nume este transmis ca parametru. Numele elementului de pagină este specificat de atributul ID. Metoda ia un singur parametru - numele elementului de pagină.

getSelection()

Returnează un șir care conține text selectat de utilizator pe pagină. Metoda nu acceptă parametri.

scrie((Text))

Scrie textul sau codul HTML transmis ca parametru în locația curentă din document.

scrieLn()

scrieLn((Text))

La fel ca scrierea, dar adaugă o întoarcere la cărucior și un avans de linie la sfârșit.

Colecția de obiecte

Colectie este un fel de matrice de obiecte, indexate nu numai după numerele numerice ale elementelor, ci și după numele acestora, și având proprietăți și metode. Colecția este diferită de matrice asociativă tocmai prin prezența proprietăților și metodelor, i.e. o colecție este un obiect în sine.

Luați în considerare, de exemplu, colecția de imagini pe care o include obiectul document. Puteți accesa elementele sale individuale prin număr de serie sau nume unic.

document.images.item(1)document.images("iamge1")

Rețineți că indicăm indicele elementului de colecție nu în pătrate, ci în parantezele deoarece este de fapt un argument pentru funcția de metodă item susținută de toate colecțiile. Numele acestei metode poate fi omis.

document.images(1)document.images("imagine1")

Toate elementele unei pagini Web sunt numerotate în ordinea în care apar în codul HTML. Iar numele unice sunt specificate printr-un atribut special ID, disponibil în aproape toate etichetele.

Pentru unele etichete (în special și ) este de asemenea disponibil Atributul NAME, care îndeplinește aceeași funcție ca ID.

Colecția totală reprezintă toate elementele unei pagini Web, fără excepție, inclusiv imagini. Elementele acestei colecții pot fi menționate după număr (sunt numerotate în ordinea în care apar în codul HTML) sau după nume.

document.all(8)document.all("iamge1")

Atributul ID necesită ca numele tuturor elementelor să fie unice, dar numai formal. În realitate, pot exista două sau mai multe elemente pe pagina cu aceleasi nume. În acest caz, va trebui să specificați un al doilea index

document.all(„imagine1”, 2)

sau expresie document.all(„imagine1”) va returna o colecție de toate imaginile numite imagine1.

De asemenea, toate colecțiile au o proprietate de lungime, care specifică numărul de elemente din colecție. Trebuie remarcat faptul că elementele colecției sunt numerotate de la zero, astfel că ultimul său element va avea numărul lungime-1.

Unele colecții pot avea metode pentru adăugarea și eliminarea elementelor și alte scopuri.

Obiecte subordonate și colecții ale obiectului document

Obiectul document conține multe obiecte și colecții subordonate în cadrul acestuia. Următorul tabel listează proprietățile care returnează referințe la acestea și oferă descrieri ale obiectelor și colecțiilor corespunzătoare.

Colectie toate Are metoda suplimentara Etichete, care vă permite să filtrați articolele de colecție după eticheta lor. Această metodă ia ca parametru valoarea șirului etichetei dorite.

document.all.tags("H1")

Aceeași metodă este susținută de colecție link-uri.

De asemenea, vreau să menționez două metode acceptate de Internet Explorer începând cu 5.0. Acestea sunt metodele getElementByNameȘi getElementByTagName. Prima returnează o colecție de elemente cu valoarea atributului NUME trecut ca parametru. Din moment ce atributul NUME folosit in HTML modern foarte rar, beneficiul acestei metode este mic. A doua metodă returnează o colecție de elemente create de eticheta trecută ca parametru.

document.getElementByName(„o imagine”) document.getElementByTagName(„H1”)

Accesarea elementelor paginii

Un obiect document are mai multe metode utile care pot fi folosite în scripturi. Dar principala sa semnificație este oferirea accesului la elementele individuale ale unei pagini Web. Cum poți ajunge la un element individual al unei pagini? În primul rând, prin colecții. De exemplu, o colecție toate:

document.all(„imagine1”).outerHTML

Sau prin colectie imagini:

document.images("imagine1").outerHTML

all("imagine1").outerHTMLimages("imagine1").outerHTML

NN nu vă permite să faceți asta. Necesită un link obligatoriu către document. În plus, nu suportă colecția toate.

document.images("imagine2").src

Numele unui element de pagină Web este specificat folosind atribute IDȘi NUME. Dacă fiecare element de pagină are nume unic, atunci puteți folosi așa-numitul recurs direct la elemente. Adică accesați-l nu ca element al colecției, ci ca obiect separat. Acest lucru funcționează atât în IE, cât și în NN.

imagine1.exteriorHTMLlayer1.sus

Accesul direct este mai rapid decât accesul printr-o colecție. Prin urmare, se recomandă utilizarea acestuia în toate cazurile în care nu este nevoie de acces special la colecții și când fiecare element de pagină accesat din scripturi are un nume unic.

obiect de locație

Un obiect Locație conține informații despre locația documentului curent, de ex. adresa lui de internet. Poate fi folosit și pentru a trece la alt document și a reîncărca documentul curent.

Proprietățile obiectului locație

Metode de localizare a obiectelor

Folosind obiectul locație, puteți încărca un alt document în locul celui curent. Pentru a face acest lucru, pur și simplu atribuiți proprietății valoarea noii adrese de internet href.

document.location.href = "http://www.spravkaweb.ru";

Utilizatorii IE pot folosi și metoda atribui:

document.location.assign("http://www.spravkaweb.ru");

Dacă doriți să înlocuiți complet documentul curent, astfel încât nici măcar adresa acestuia să nu apară în lista istorică, utilizați metoda a inlocui:

document.location.replace("http://www.spravkaweb.ru");

obiect de stil

Ca toate celelalte obiecte, stil

stil de stil

Proprietăți și metode

Ca toate celelalte obiecte, stilul acceptă o serie de proprietăți și metode. Ele pot fi împărțite în două grupe:

Proprietățile primului grup sunt în general similare cu atributele de stil corespunzătoare și au aproape aceleași nume, cu excepția faptului că simbolurile „-” sunt eliminate, deoarece nu respectați convențiile de denumire JavaScript, iar primele litere ale tuturor cuvintelor care alcătuiesc numele atributului, cu excepția primului, sunt scrise cu majuscule. Următorul tabel prezintă exemple de conversie a numelor de atribute de stil în nume de proprietăți ale obiectelor de stil care stabilesc stilul elementului.

Prin analogie, puteți converti toate atributele de stil în proprietăți ale obiectului de stil.Toate proprietățile non-stil ale obiectului de stil sunt enumerate în tabelul de mai jos. Acest obiect are și metodele getAttribute, removeAttribute și setAttribute. Dar acestea proprietăți suplimentare iar metodele sunt acceptate doar de IE începând de la 4.0

Lucrul cu obiectul de stil

Obiectul de stil vă permite să schimbați stilul oricărui element dintr-o pagină Web prin simpla atribuire proprietatea dorită valoarea cerută.

paragraph1.style.fontSize = 7;

Puteți modifica dimensiunile geometrice ale unui element:

image1.style.height = "100mm";image1.style.width = "120mm";

și locația sa:

iamge1.style.top = "200px";image1.style.left = "50px";

Observați că atribuim valorile șirului de proprietăți ale parametrilor geometrici, indicând unitatea de măsură. Acest lucru nu este foarte ușor de calcul, așa că obiectul de stil oferă proprietăți pixel, primirea și întoarcerea valori numericeîn pixeli:

image1.style.pixelHeight = 400;iamge1.style.pixelLeft +=5;

De asemenea, puteți utiliza proprietăți poz, care returnează și acceptă valori numerice în unitățile în care aceste valori au fost specificate în definiția stilului.

nheight = image1.style.posHeight; // Valoare în milimetrinwidth = image1.style.posWidth; // Valoarea în pixeli

Puteți folosi metode getAttribute, setAttributeȘi removeAttribute pentru a obține și a seta valoarea și a elimina orice proprietate de stil:

paragraph1.style.setAttribute("borderBottomWidth", 5, false);paragraph1.style.removeAttribute("borderTopWidth", false);

Obiectul de stil din Internet Explorer

Cum accesezi obiectul de stil? Internet Explorer oferă trei proprietăți pentru aceasta: stil, curentStyleȘi runtimeStyle.

Prima proprietate vă permite să accesați stilul încorporat în eticheta elementului folosind atributul STYLE:

Orice text

someColor = par1.style.color;

Expresia de mai sus va fi introdusă într-o variabilă cevaColor valoare de atribut culoare stilul elementului inline, de ex. "verde".

someFontSize = par1.style.fontSize;

Această expresie va reveni nul, chiar dacă undeva în foaia de stil atributul marimea fontului definit pentru acest element. Și totul pentru că interesele proprietății de stil nu depășesc orașul încorporat.

Pentru a obține stilul unui element ținând cont atât de stilurile inline, de foile de stil, cât și de atributele etichetei, utilizați proprietatea curentStyle:

Orice textsomeColor = par1.currentStyle.color;someBColor = par1.currentStyle.backgroundColor;someFontSize = par1.currentStyle.fontSize;someOther = par1.currentStyle.textDecoration;

Să presupunem că undeva în foaia de stil există un atribut definit pentru acest element culoare de fundal, egal cu „teal”, și text-decor deloc definite. Aceste expresii vor returna următoarele valori: prima este „verde”, a doua este „teal”, a treia este „cea mai mare” (sau „7”), iar a patra este „niciuna”? acestea. Valoarea implicită pentru acest atribut de stil.

Dacă modificați orice proprietate a obiectului stil, aceeași proprietate a obiectului currentStyle se va schimba și invers. Singurul detaliu este că dacă modificați orice proprietate currentStyle și apoi accesați-o imediat, vechea valoare va fi returnată. Adică, trebuie să treacă ceva timp între alocarea unei valori și aplicarea acesteia la element.

Proprietate runtimeStyle destul de ciudat. Returnează o referință la obiect runtimeStyle, care este aproximativ la fel ca curentStyle, dar atribuirea de noi valori proprietăților sale nu afectează proprietățile de stil similare. Adică, puteți suprascrie proprietățile stilului runtimeStyle, și proprietățile de stil corespunzătoare (dar nu curentStyle) nu se va schimba.

obiect styleSheet și colecție styleSheets

Obiectul document IE are încorporată o colecție styleSheets pe care o puteți utiliza pentru a accesa foile de stil individuale ale documentului. A masa separata stilurile sunt reprezentate de un obiect styleSheet:

adresa = document.styleSheets(1).href;

Trei proprietăți ale obiectului foaie de stil ne vor fi utile.

Primul este href, reprezentând adresa de Internet a fișierului extern foaie de stil. Puteți modifica această adresă URL pentru a încărca o altă foaie de stil.

Al doilea - dezactivat, care permite sau împiedică browserul Web să utilizeze acest tabel pentru a formata documentul. Vă rugăm să rețineți că în în acest caz, false permite utilizarea tabelului, iar true îl dezactivează.

Și ultima proprietate - tip- este de interes doar teoretic pentru noi: specifică tipul foii de stil, care pentru IE este întotdeauna „text/css”.

Obiectul de stil din Navigator. Stiluri JavaScript

Navigator acceptă referirea directă prin identificatori numai pentru obiectele de strat și nu acceptă colecții toate. Da și suport pentru atribute ID este implementat așa așa, în principal pentru atribuirea stilurilor elementelor. Dar obiectul document Navigator oferă patru proprietăți foarte puternice pentru a lucra cu stiluri.

Proprietate clase vă va permite să accesați un stil separat numit:

document.classes.(Numele stilului).(Numele etichetei)|toate.(Numele proprietății)

Aici (Numele etichetei) poate fi numele oricărei etichete. Dacă trebuie să stilați toate etichetele, utilizați cuvântul toate.

De exemplu, să presupunem că definiți un stil în foaia de stil:

Somestyle (culoare: verde)

Apoi, în codul de script îl puteți accesa:

document.classes.somestyle.all.fontFamily = "Arial";

În mod similar, puteți defini un stil pentru o anumită etichetă:

P.somestyle (culoare: verde)document.classes.somestyle.P.fontFamily = "Arial";

La rândul său, proprietatea ids vă va permite să accesați stilul atribuit unui anumit ID:

document.ids.(Identificator).(Numele proprietății)

De exemplu:

#someid (culoare: verde)document.ids.someid.fontFamily = "Arial";

Dar dacă treceți peste stilul unei etichete? În acest caz, utilizați proprietatea Etichete:

document.tags.(etichetă).(Numele proprietății)

De exemplu:

H1 (culoare: verde)document.tags.H1.fontFamily = „Curier”;

Ce se întâmplă dacă trebuie, de exemplu, să schimbați stilul unui element situat în interiorul unui titlu de nivel al doilea? Există o proprietate pentru asta contextual:

document.contextual((Context 1)[, (Context 2)[, ...]]).(Numele proprietății)

Apoi, pentru cazul am descris:

document.contextual(document.tags.H2, document.tags.B).fontStyle= „oblic”;

care este similar cu specificarea într-o foaie de stil

H2 B (stil font: oblic)

Dar dacă credeți că puteți schimba în mod dinamic aspectul elementelor paginii în Navigator schimbându-le stilurile, vă înșelați din păcate. În realitate, obiectul de stil este nevoie de Navigator doar pentru a suporta un nou tip de foaie de stil, așa-numitele stiluri JavaScript.

Stilurile JavaScript diferă de stilurile obișnuite prin faptul că sunt cel mai asemănătoare cu scripturile. De fapt, acestea sunt scripturi. Să ne uităm la două exemple: o foaie de stil obișnuită și o foaie de stil JavaScript:

P (culoare: albastru).bigtext (dimensiunea fontului: 72pt; greutatea fontului: cel mai aldine)H1 B (decor text: subliniat)

Aceasta este o foaie de stil obișnuită. Acum să o transformăm într-o foaie de stil JavaScript:

document.tags.P.color = „albastru”;lățime (document.classes.bigtext.all) ( fontSize = „72pt”; fontWeight = „cel mai îndrăzneț”; )document.contextual(document.tags.H1, document.tags. B).textDecoration = „subliniere”;

Acum puteți vedea cum o foaie de stil JavaScript este similară cu un script. Rețineți, de asemenea, că în acest caz atributul tip necesar, deoarece specifică tipul foii de stil.

În toate exemplele anterioare pentru Navigator, am furnizat întotdeauna o referință la obiect document. Dar poate fi omis în foile de stil JavaScript.

tags.P.color = "blue";width (classes.bigtext.all) ( fontSize = "72pt"; fontWeight = "cel mai îndrăzneț"; )contextual(tags.H1, tags.B).textDecoration = "subliniat";

obiect fereastră

Obiectul fereastră reprezintă fereastra curentă a browserului Web sau un cadru individual dacă fereastra este împărțită în cadre.

Returnează true dacă fereastra curentă este închisă. Poate fi folosit atunci când lucrați cu mai multe ferestre.

defaultStatus

Mesajul implicit afișat în bara de stare a ferestrei.

document

innerHeight

Returnează înălțimea zonei client a ferestrei (fără margini, meniuri, bare de instrumente) în pixeli.

innerWidth

Returnează lățimea zonei client a ferestrei (fără margini, meniuri, bare de instrumente) în pixeli.

Doar NN este acceptat începând cu versiunea 4.0

Returnează numărul de cadre.

Locație

bara de locație

Returnează o referință la obiectul barei de adrese din fereastra Navigator (alias Bara de instrumente pentru locație). Singura proprietate a acestui obiect, vizibilă, vă va permite să-l arătați sau să-l ascundeți; valoarea true a acestei proprietăți arată bara de adrese, false o elimină.

Doar NN este acceptat începând cu versiunea 4.0

Returnează numele ferestrei sau cadrului.

navigator

înălțime exterioară

Returnează înălțimea totală a ferestrei (cu margini, meniuri, bare de instrumente) în pixeli.

Doar NN este acceptat începând cu versiunea 4.0

outerWidth

Returnează lățimea completă a ferestrei (cu margini, meniuri, bare de instrumente) în pixeli.

Doar NN este acceptat începând cu versiunea 4.0

pageXOffset

Returnează distanța orizontală dintre poziția curentă a ferestrei și marginea din stânga a documentului. Când derulați conținutul ferestrei la dreapta, valoarea acestei proprietăți crește, iar la stânga scade.

Doar NN este acceptat începând cu versiunea 4.0

paginaYOffset

Returnează distanța verticală dintre poziția curentă a ferestrei și marginea din stânga a documentului. Când derulați în jos conținutul ferestrei, valoarea acestei proprietăți crește, iar când derulați în sus, scade.

Doar NN este acceptat începând cu versiunea 4.0

bara personală

Numai Navigator de la 4.0 este acceptat

ecranStânga

Returnează coordonatele orizontale din stânga colțul de sus fereastră.

ecranSus

Returnează coordonata verticală a colțului din stânga sus al ferestrei.

Numai IE 5.0 și versiunile superioare sunt acceptate

Coordonata orizontală a colțului din stânga sus al ferestrei.

Doar NN este acceptat începând cu versiunea 4.0

Coordonata verticală a colțului din stânga sus al ferestrei.

Doar NN este acceptat începând cu versiunea 4.0