Prin numeroase cereri rulează o serie javaScript lecții. Dacă sunteți configurat cu hotărâre, Master JS, înseamnă că trebuie să aveți cunoștințe de bază despre HTML și CSS, deoarece aceasta este o fundație, fără de care este dificil să înțelegem despre ce vom vorbi.

Din partea noastră, voi încerca să explic limbajului de înțeles, să arătăm în exemple reale din viață, pentru că totul vine în comparație.

Ce este JavaScript sau cum să înțelegeți, în ce scop este necesar în timpul dezvoltării web!

Trăim într-o lume în care toată lumea este tangibilă, putem implementa acele idei care vin la capul nostru. Construim case, mașini, mișcându-ne cu diverse tehnici. Adică ceea ce putem face în lumea reală poate fi reprezentat în comparație cu HTML, unde acționează ca un material de construcție, fundația, pe care totul păstrează și când ajutor CSS Facem această lume, o facem colorată, așa cum voiau să-l vadă singuri.

Probabil că vă întrebați dacă HTML și CSS este ceea ce ne înconjoară, deci ce este JavaScript? Unde se manifestă în lumea noastră.

Pur și simplu, cred că va explica despre exemplul filmului Gary, cred că mulți dintre voi arata și înțeleg despre ce vorbim. Potrivit scenariului filmului, știm că Gary posedă abilitățile, era un vrăjitor, iar o baghetă magică a ajutat la asta. A fost bagheta magică care ia dat ocazia de a crea magie, un astfel de nivel, pe măsură ce poseda cunoștințe pentru ao face unic.

JavaScript este o baghetă magicăCare are fiecare dezvoltator web, dar ce magie puteți crea, depinde numai de cunoașterea dezvoltatorului cu care posedă el. Cei care au stăpânit această limbăsunt vrăjitori și minuni curbate.

Limba JavaScript. Nu au fost fullate fără componente HTML și CSS. Mulți programatori menționează trei limbi care formează "straturi" ale unei pagini web: HTML, CSS și JavaScript.

HTML. Prima limbă a marcajului HyperText - oferă straturi structurale, organizând în mod expres conținutul paginii, cum ar fi textul, alte elemente.

Al doilea, Css. (Foi de stil cascading) frumos de decorare, Aspectul conținutului HTML.

Și al treilea JavaScript. - Adăugați straturi de comportament, revigorarea paginii web, făcându-l interactive, adică, creând elemente pentru a interacționa cu vizitatorii.

Ca rezultat, pentru a stăpâni limba JavaScript, trebuie să aveți o idee bună despre HTML și CSS.

Programarea poate părea magie incredibilă, inaccesibilă pentru muritorii simpli. Cu toate acestea, majoritatea conceptelor sale nu sunt greu de înțeles. JavaScript este destul de prietenos cu programatorii novice, dar, totuși, este mai dificil decât HTML sau CSS, astfel încât în \u200b\u200bcadrul seriei de lecții vom stăpâni conceptele fundamentale de programare și le puteți aplica atunci când scrieți scripturi pe JavaScript.

Vă veți familiariza cu noi simboluri () ,, , (),!, Aflați desemnarea de cuvinte noi (var, , altfel dacă), vom analiza regulile de punctuație și sintaxa limbii în sine și toate acestea pentru a-și crea magia.

Materialul preparat Denis ars, scrie comentariile dvs. și asigurați-vă că ați împărtășit acest material cu prietenii dvs.

• Transfer

Materialul, traducerea pe care o publicăm astăzi, este dedicată elementelor de bază ale JavaScript și este destinată programatorilor începători. Acesta poate fi vizualizat ca o mică carte de referință pe designul JS Basic. Aici, în special, să vorbim despre sistemul de date, despre variabile, matrice, caracteristici, despre prototipurile obiectelor și alte caracteristici ale limbii.

Tipuri de date primitive

JavaScript are următoarele tipuri de date primitive: număr, boolean, șir, nedefinit, null. Imediat, trebuie remarcat faptul că, atunci când lucrați cu tipuri de date primitive, de exemplu, cu literari de șir, nu conducem nici măcar o conversie explicită, putem accesa metodele și proprietățile lor. Faptul este că atunci când încercați să efectuați astfel de operațiuni, literale sunt echipate automat cu un înveliș de obiecte adecvate.

▍ foaie

JavaScript are doar un tip de numere - acestea sunt numerele de dublu precizie cu un punct plutitor. Acest lucru duce la faptul că rezultatele calculării unor expresii aritmetice incorecte. S-ar putea să știți deja că în JS valoarea expresiei 0,1 + 0,2 nu este egală cu 0,3. În același timp, atunci când lucrați cu numere întregi, aceste probleme nu sunt observate, adică 1 + 2 \u003d\u003d\u003d 3.

JavaScript are un obiect numeric, care este un ambalaj de obiecte pentru valori numerice. Numărul de obiecte pot fi create fie utilizând comanda tip var A \u003d numărul (10) sau vă puteți baza pe comportamentul automat al sistemului descris mai sus. Acest lucru, în special, vă permite să apelați metode stocate în număr.protype în aplicat literalmente numerice:

(123). Tostring (); // "123" (1,23). Tofixed (1); //"1.2 "
Există funcții globale concepute pentru a converti alte tipuri de valori într-un tip numeric. Este parseINT (), parsefloat () și designul numărului (), care, în acest caz, acționează ca o funcție convențională care efectuează conversia tipurilor:

Parseint ("1") // 1 parseint ("Text") // Nan Parsefloat ("1.234") //1.234 Număr ("1") // 1 ("1.234") //1.234
Dacă în timpul operației cu numere se dovedește ceva care nu este un număr (în timpul unor calcule sau atunci când încercați să convertiți orice la număr), JavaScript nu va da o eroare, dar va prezenta rezultatul unei operațiuni similare ca Nan ( nu-a-număr, nu număr). Pentru a verifica dacă valoarea NAN este utilizată, puteți utiliza funcția ISNAN ().

Operatii aritmetice JS funcționează destul de familiar, dar este necesar să se acorde atenție faptului că operatorul + poate efectua adăugarea de numere și concatenarea corzilor.

1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

▍ accident vascular cerebral

Rândurile din JavaScript sunt secvențe de caractere Unicode. String literalmente creează, introducând textul care urmează să fie plasat în ele, în cotații duble (") sau single (" "). După cum sa menționat deja, atunci când lucrați cu literale de șir, putem să ne bazăm pe ambalajul de obiecte corespunzător, în prototipul căruia există multe metode utile, printre care substring (), indexarea (), Concat ().

"Text" .substring (1,3) // ex "text" .Indexof ("x") // 2 "text" .concat ("capăt") // Text sfârșit
Rânduri, ca alte valori primitive, imutabeline. De exemplu, metoda Concat () nu modifică șirul existent și creează unul nou.

▍ valori ilogice

Tipul de date logic în JS este reprezentat de două valori - Adevărat și Fals. Limba poate converti automat diferite valori la tipul de date logice. Deci, fals, în plus față de valoarea logică falsă, sunt nul, nedefinite, "" (string gol), 0 și nan. Orice altceva, inclusiv orice obiecte, este valorile adevărate. În curs operații logice Tot ceea ce este considerat adevărat este transformat într-adevăr și tot ceea ce este considerat fals este convertit la fals. Aruncați o privire la următorul exemplu. În conformitate cu principiile de mai sus, șirul gol va fi convertit în FALSE și ca urmare a executării acestui cod în consola, linia acestui lucru este falsă va cădea în consola.

Fie textul \u003d ""; Dacă (text) (consola.log ("acest lucru este adevărat");) altceva (consola.log ("acest lucru este fals");)

Obiecte

Obiectele sunt structuri dinamice constând dintr-o pereche de valoare cheie. Valorile pot avea tipuri de date primitive, pot fi obiecte sau funcții.

Obiectele sunt cele mai ușor de creat folosind o sintaxă literală obiect:

Lăsați Obj \u003d (Mesaj: "Un mesaj", Dozomething: Funcție () ())
Proprietățile obiectului pot fi, în orice moment, citiți, adăugați, editați și ștergeți. Acesta este modul în care se face:

• Proprietăți de citire: obiect.Name, obiect.
• Înregistrați datele la proprietăți (dacă nu există proprietatea la care nu există, se adaugă o proprietate nouă cu tasta specificată): obiect.name \u003d valoare, obiect \u003d valoare.
• Ștergeți proprietățile: Ștergeți obiectul.name, ștergeți obiectul.

Aici sunt cateva exemple:

Lăsați obj \u003d (); // crearea unui obiect gol obj.Message \u003d "un mesaj"; // adăugarea unei noi proprietăți obj.Message \u003d "un mesaj nou"; // editarea proprietăților de ștergere. // șterge proprietatea
Obiectele din limba sunt implementate sub formă de mese hash. Puteți crea o tabelă simplă de hash utilizând comanda obiect.create (null):

Fie Franceză \u003d Object.Create (Null); Franceză ["da"] \u003d "oui"; Franceză ["nu"] \u003d "non"; Franceză ["da"]; // "oui"
Dacă obiectul trebuie să fie imuabil, puteți utiliza comanda obiect.freeze ().

Pentru a enumera toate proprietățile obiectului, puteți utiliza comanda obiect.keys ():

Funcție Logproperty (nume) (consolă) (nume); // consola de nume de proprietate.log (obj); // valoare imobiliară) obiect.keys (obj) .Fore (logproperty);

▍CAP Valorile tipurilor și obiectelor primitive

Pentru munca practica Cu valori primitive, a fost deja spus, pentru a le percepe ca obiecte care au proprietăți și metode, deși nu sunt obiecte. Valorile primitive imuabile, structura internă a obiectelor poate varia.

Variabile

În JavaScript, variabilele pot fi anunțate folosind cuvintele cheie VAR, LET și CONST.

Când utilizați cuvântul cheie VAR, puteți declara o variabilă și, dacă este necesar, să o inițializați cu o anumită valoare. Dacă variabila nu este inițializată, valoarea sa este nedefinită. Variabilele declarate utilizând cuvântul cheie VAR au un domeniu funcțional.

Cuvântul cheie Let este foarte asemănător cu var, diferența este că variabilele declarate cu cuvântul cheie, să aibă un domeniu de aplicare a blocului.

Blocul de vizibilitate are, de asemenea, variabile declarate utilizând cuvântul cheie CONST, care, dat fiind faptul că valorile unor astfel de variabile nu pot fi modificate, va apela corect "Constantele". Cuvântul cheie CONST că "îngheață" valoarea variabilei declarată cu utilizarea sa poate fi comparată cu metoda Obiect.freeze (), obiectele "înghețate".

Dacă variabila este declarată în afara oricărei funcții, domeniul său de aplicare este global.

Arrays.

Arrays JavaScript sunt implementate folosind obiecte. Ca rezultat, vorbind de matrice, discutăm de fapt obiecte similare cu matricele. Puteți lucra cu elementele matricei folosind indexurile lor. Indicii numerici sunt convertiți în șiruri și sunt utilizați ca nume pentru a accesa valorile matricei. De exemplu, designul tipului ARR este similar cu designul ARR ["1"], iar celălalt va da acces la aceeași valoare: arr \u003d\u003d\u003d arr ["1"]. În conformitate cu cele de mai sus, o matrice simplă declarată Let Arr \u003d ["" o "comandă, B", "C"], pare să fie după cum urmează:

("0": "A", "1": "B", "2": "C")
Scoaterea elementelor matricei utilizând comanda de ștergere frunze "găuri" în ea. Pentru a evita această problemă, puteți utiliza comanda Splice (), dar funcționează încet, deoarece, după îndepărtarea elementului, acesta mișcă elementele rămase ale matricei, de fapt, schimbându-le la începutul matricei, la stânga .

Fie arr \u003d ["A", "B", "C"]; Ștergeți ARR; Consola.log (arr); // ["a", goală, consola "C" ].log (arr.Length); // 3.
Metodele de matrice facilitează implementarea unor astfel de structuri de date ca stive și cozi:

// stivă lasa stack \u003d; stivă.push (1); // stivă.push (2); // lăsați ultima \u003d stivă.pop (); // consola.log (ultima); // 2 // coada lasa coada \u003d; coada.push (1); // coada.push (2); // lăsați mai întâi \u003d coada.Shift (); // console.log (mai întâi); // unu

Funcții

Funcțiile în JavaScript sunt obiecte. Funcțiile pot fi atribuite variabilelor, stocate în obiecte sau matrice, transmit la alte funcții sub formă de argumente și revenirea din alte funcții.

Există trei modalități de declarare a funcțiilor:

• Declarația funcției sau declarația funcției).
• Utilizarea expresiilor funcționale (expresia funcției), care sunt numite și literale funcționale (funcție literală).
• Utilizarea sintaxei funcțiilor de fotografiere (funcția săgeată).

▍ Funcție de anunțuri

Cu această abordare a declarației de funcții, se aplică următoarele reguli:

• Primul cuvânt cheie din funcția ROW Declarație este funcția.
• Funcțiile trebuie să atribuie un nume.
• Funcția poate fi utilizată în codul care este înainte de a se face prin mecanismul de ridicare a declarației de funcții în partea superioară a domeniului de vizibilitate în care este declarată.

Aici arată lista de funcții clasice de anunțuri:

Funcția Dozometh () ()

▍ expresii funcționale

Când utilizați expresii funcționale, trebuie să luați în considerare următoarele:

• Cuvântul cheie al funcției nu mai este primul cuvânt din funcția Caracter Row.
• Prezența unui nume pentru o funcție este opțională. Este posibil să se utilizeze atât expresiuni funcționale anonime și numite.
• Comenzi de apel Aceste funcții trebuie să urmeze comenzile anunțurilor lor.
• Această caracteristică poate fi inițiată imediat după anunț, utilizând sintaxa Iife (expresia funcției invocate imediat - denumită imediat expresia funcțională).

Expresia funcțională arată astfel:

Lăsați DOSOMHING \u003d funcția () ()

▍ Funcții de întindere

Funcțiile săgeții, de fapt, pot fi considerate "zahăr de sintaxă" pentru a crea expresii funcționale anonime. Trebuie remarcat faptul că astfel de funcții nu au entități proprii ale acestui lucru și argumente. Anunțul funcției săgeată arată astfel:

Lăsați dozomul \u003d () \u003d\u003e ();

Promoții pentru funcții de apel

Funcțiile pot fi numite în diferite moduri.

Apel funcțional normal

Doze (argumente)

Funcția apelului ca metodă de obiect

Theobject.dozomething (argumente) TheObject ["Dozomething"] (argumente)

Funcția de apel sub formă de designer

Noi doze (argumente)

Apelarea unei funcții utilizând metoda Aplicați ()

DOSIMETHING.Aplicați (TheObject,) Dosomthing.Call (TheObject, argumente)

Apelarea unei funcții utilizând metoda BIND ()

Lăsați dozewithobject \u003d dozomet.bind (theobject); dozechingwithobject ();
Funcțiile pot fi numite cu un număr mare sau mai mic de argumente decât numărul de parametri care au fost specificați atunci când le-au fost declarați. În timpul funcționării funcției "exces", argumentele vor fi pur și simplu ignorate (deși funcția are acces la acestea), parametrii lipsă vor primi nedefinit.

Funcțiile au doi pseudo-parametri: acest lucru și argumente.

▍ Cuvântul de nunta asta

Cuvântul cheie al acestui lucru este un context de funcție. Valoarea la care indică depinde de modul în care a fost cauzată funcția. Aceasta este valorile cuvinte cheie din acest lucru în funcție de metoda de a apela funcția (acestea, cu exemple de cod, ale căror desene sau modele sunt descrise mai sus):

• Apel funcțional normal - fereastră / nedefinită.
• Funcția de apel ca metodă de obiect - TheObject.
• Apelarea unei funcții sub forma unui designer - un obiect nou.
• Apelarea unei funcții utilizând metoda Aplicați () - TheObject.
• Apelarea unei funcții utilizând metoda BIND () - TheObject.

▍ argumente cu cuvânt de nuntă

Argumentele cheie cheie este un pseudoparametru care oferă acces la toate argumentele utilizate la apelarea unei funcții. Arată ca o matrice, dar nu este o matrice. În special, el nu are metode de matrice.

Funcție Reducetozum (Total, valoare) Suma funcției () (permite args \u003d array.protype.slice.call (argumente); retur args.reduce (reductosum, 0);) suma (1,2, 3);
O alternativă la cuvântul cheie argumentelor este noua sintaxă a parametrilor rămași. În exemplul următor, args este o matrice care conține tot ceea ce este transmis la apel.

Suma de funcții (... args) (retur args.reduce (reductosum, 0);)

▍ Returnarea operatorului.

Funcția în care lipsește expresia de întoarcere, va returna nedefinit. Folosind cuvântul cheie de întoarcere, acordați atenție modului în care mecanismul introducerii automate a funcțiilor de punct și virgulă. De exemplu, următoarea funcție nu va returna un obiect gol, dar nedefinit:

Funcție getObject () (retur ()) getObject ()
Pentru a evita o astfel de problemă, suportul de deschidere trebuie plasat pe aceeași linie pe care se află instrucțiunea de retur:

Funcție getObject () (Return ())

Tastarea dinamică

JavaScript este o limbă cu tastarea dinamică. Aceasta înseamnă că valorile specifice au tipuri, iar variabilele nu sunt. În timpul executării programului în aceeași variabilă, puteți înregistra valori tipuri diferite. Iată un exemplu de funcție care funcționează cu diferite tipuri:

Funcție jurnal (valoare) (consolă.log (valoare);) log (1); log (textul "); jurnal ((Mesaj: "Text"));
Pentru a clarifica tipul de date stocate într-o variabilă, puteți utiliza operatorul TypeOf ():

Fie n \u003d 1; Tipul (N); // numere haiþi s \u003d "text"; Tipul (e); // șir lăsați fn \u003d funcție () (); Tipul (Fn); // funcția.

Modelul de execuție unic de execuție

Mediul de execuție JavaScript este monoficat. Acest lucru, în special, este exprimat în imposibilitatea de a efectua simultan două funcții (dacă nu trebuie să ia în considerare posibilitățile de execuție asincronă a codului pe care nu le afectăm aici). În mediul de execuție, există o așa-numită coadă de eveniment (coadă de eveniment), care stochează lista sarcinilor care trebuie procesate. Ca urmare, problema problemelor legate de blocarea resurselor reciproce este neobișnuită pentru o schemă de executare a JS, deci nu există un mecanism de blocare. Cu toate acestea, codul care cade în coada de așteptare trebuie să fie efectuat rapid. Dacă supraîncărcați cu munca grea, în aplicația browser, fluxul principal, pagina de aplicație nu va răspunde la expunerea la utilizator și browserul va oferi închiderea acestei pagini.

Manipularea excepțiilor

JavaScript are un mecanism de manipulare a excepțiilor. Funcționează în conformitate cu destul de obișnuit pentru astfel de mecanisme: un cod care poate provoca o eroare este alcătuită utilizând designul de încercare / captură. Codul în sine este în unitatea de încercare, erorile sunt procesate în blocul de captură.

Este interesant de observat că, uneori, JavaScript, dacă aveți situații independente, nu emite mesaje de eroare. Acest lucru se datorează faptului că JS nu a aruncat erori înainte de a adopta standardul ECMAScript 3.

De exemplu, în următorul fragment al codului, o încercare de a schimba obiectul "înghețat" nu reușește, dar excepția nu va fi emisă.

Lăsați obj \u003d obiect.freeze (()); Obj.message \u003d "text";
Unele dintre erorile JS "silențioase" se manifestă în modul strict, puteți să-l rotiți folosind designul "Utilizați stricte"; .

Sistemul prototipului

Baza unor astfel de mecanisme JS ca designeri de funcții, comanda obiect.create (), cuvântul cheie de clasă este sistemul de prototipuri.
Luați în considerare următorul exemplu:

Let Service \u003d (Dozomething: Funcție () ()) Fie SpecializatService \u003d Obiect.Create (serviciu); Consola.log (specializatService .__ Proto__ \u003d\u003d\u003d serviciu); // Adevărat.
Aici, pentru a crea un obiect specializatService, prototipul de care a fost necesar să se facă obiectul obiectului .Creați (). Ca rezultat, se pare că metoda de doze () poate fi numită prin contactarea obiectului specializatService. În plus, acest lucru înseamnă că proprietatea __proto__ a obiectului specializatorService indică obiectul de serviciu.

Creați acum un obiect similar utilizând cuvântul cheie de clasă:

Serviciul de clasă (Dozomething ()) Clasa SpecializedService Extens Service () Fie SPECIALIDIDSERVICICE \u003d noua specializareService (); Console.log (SpecializatService .__ Proto__ \u003d\u003d\u003d SpecializatService.protype);
Metodele declarate în clasa de service vor fi adăugate la obiectul Service.protype. Cazurile de clasă de servicii vor avea același prototip (Service.protype). Toate instanțele vor delega apelurile apelurilor către obiectul Service.protype. Ca urmare, se dovedește că metodele sunt declarate doar o singură dată, în service.protype, după care sunt "moștenite" de toate situațiile clasei.

PROTOTYPES COMPLEGE

Obiectele pot fi "moștenitori" de alte obiecte. Fiecare obiect are un prototip, al cărui metode sunt disponibile. Dacă încercați să vă referiți la proprietatea care nu este în obiectul în sine, JavaScript va începe să caute lanțul prototip. Acest proces va continua până când se găsește proprietatea, sau până când căutarea ajunge la capătul lanțului.

Privind programarea funcțională în JavaScript

ÎN Funcții JavaScript. Sunt obiecte de primă clasă, limba sprijină mecanismul de închidere. Aceasta deschide modul de implementare a metodelor de programare funcțională în JS. În special, vorbim despre posibilitatea aplicării funcțiilor de ordin superior.

Închiderea este o funcție internă care are acces la variabile declarate în cadrul funcției părinte, chiar dacă funcția parentală este îndeplinită.

Funcția cea mai înaltă este o funcție care este capabilă să ia alte funcții ca argumente, funcții de întoarcere sau ambele.

Programarea funcțională în JS este evidențiată într-o varietate de publicații. Dacă este interesant pentru dvs. - Iată câteva materiale pe acest subiect dedicat

JavaScript sintaxa Tutorial.

Înainte de a începe să citiți javaScript Tutorial.Trebuie să aveți cunoștințe despre software.

Va fi un mare plus în învățarea sintaxei JavaScript dacă sunteți deja familiarizat cu orice limbaj de programare, cum ar fi PHP, C sau Pascal, și înțelegeți, de asemenea, ce variabilă, tip de date, funcție sau o matrice.

Cu toate acestea, dacă nu sunteți familiarizat cu limbile de programare, nu merită îngrijorător, dat manualul JavaScript. Doar și este conceput pentru cei care procesează mai întâi la studiul programului.

JavaScript (JavaScript) - Acesta este un limbaj de programare client, care poate fi controlat de elemente HTML-PAGE (etichete HTML) și un browser web, forțați-i să se miște, să răspundă la diverse evenimente (clicuri de mouse, apăsarea tastaturii), creați o mulțime de programe interesante ( Scripturi): Teste, animație, galerii foto (de exemplu, în Vkontakte), jocuri și multe altele.

Cum este studiul JavaScript

Studiu limba JavaScript.este de obicei împărțită în patru etape:
1. Sintaxa JavaScript. (acest tutorial),
2. Studiu Dom. și BOM.,
3. DOM și controlul BOM utilizând JavaScript,
4. Studierea diferitelor biblioteci JavaScript. jquery. - Cel mai popular pe acest moment bibliotecă (Manualul JQuery ar trebui să apară pe acest site la sfârșitul anului 2015).

DOM este modelul de obiect al documentului. Datorită tehnologiei DOM, etichetele Pagini HTML încep să reprezinte obiectele obiectelor și fiecare obiect în acest copac, există o adresă unică. Limba JavaScript Referitor la această adresă poate avea acces la o anumită etichetă HTML și o poate gestiona (schimbați culoarea, dimensiunea, poziția și Mn. Dr.).

BOM este un model de document al browserului. Structura este aceeași cu DOM, numai în loc de obiectele HTML-Page, sunt obiectele browserului: fereastra browserului, dimensiunile ecranului browserului, istoricul vizitelor, șirul de stare etc.

După ce ați învățat DOM și BOM, încep să creeze scripturi mai mult sau mai puțin complexe pe JavaScript interacționând cu pagina și browserul.

Apoi, am stăpânit puțin, studiați o bibliotecă JavaScript, cum ar fi JQuery, datorită ei, puteți crea aceleași programe ca pe JavaScript, doar mult mai rapid și mai eficient.

Unii webmasteri încep imediat să studieze jQuery, sărind peste cele trei etape anterioare, dar nu recomand acest lucru, deoarece în orice caz trebuie să înțelegeți sintaxa JavaScript și să cunoașteți obiectele DOM / BOM ale proprietăților, metodelor și destinațiilor lor.

Ce programe pot fi scrise folosind JavaScript

Utilizarea Puteți crea multe programe interesante (scripturi):
- Puteți crea scripturi care vor schimba elementele paginii site-ului sau ale locației acestora, apăsând unul sau altul buton,
- Puteți crea o animație,
- manipularea formularelor, cum ar fi verificarea datelor introduse de utilizator,
- creați diferite teste, cum ar fi tipul de EGE (examene școlare) și obțineți imediat rezultatul,
- datorită BOM, puteți afla caracteristicile browserului și computerului computerului pe care l-ați vizitat site-ul dvs., ceea ce vă permite să creați diverși metri de vizitare,
- Cu JavaScript, puteți crea chiar și jocuri, desene animate și multe alte programe interesante și utile.

Care este scopul acestui tutorial pe JavaScript?

Scopul acestui lucru cărți JavaScript. este să te înveți noțiuni de bază de sintaxă JavaScript., introduceți programe și concepte, cum ar fi variabilele, tipurile de date, operațiunile, operatorii, funcțiile, ciclurile, matricele, obiectele etc. Toate acestea se găsesc în alte limbi de programare, așa că am stăpânit JavaScript, veți fi mult mai ușor să învățați alte limbi, cum ar fi PHP, C ++ sau Python.

Structura manualelor JavaScript

ÎN manual pe JavaScript.Următoarele subiecte și lecții vor fi luate în considerare.

JavaScript - intră în joc când trebuie să facem niște pași pe partea clientului, ceea ce ne-a adresat pagina web.

JavaScript poate schimba pagina web fără a accesa serverul, verificați valorile utilizatorului de date introduse și efectuați orice alte operații.

Acest articol conține informații de bază care vă vor permite să începeți să utilizați JavaScript.

Introducerea scriptului direct la codul paginii

Puteți introduce codul JS direct în interiorul paginii.

Eliminarea codului într-un fișier separat

Pot fi trimise Cod JavaScript. la fișierul extern și utilizați link-ul la acesta pe pagină

Eticheta de închidere în acest caz este necesară.

Cele mai bune scripturi în fața etichetei de închidere

Variabile

Numele variabilelor

Numele variabilelor pot fi pornite cu o literă mare sau mică, subliniere sau un semn de $.

Numele poate fi numere, dar este imposibil să porniți numele variabilei cu numerele.

JavaScript este sensibil la registru: MyText și Mytext sunt două variabile diferite.

Este mai bine să utilizați pentru numirea cameliei, începând fiecare cuvânt în numele variabilei cu o literă de capital.

Declarația

Pentru variabilele de declarație în JavaScript utilizat var..

Var MiText; // nedefinit miText \u003d "Bună!"; Alertă (miText);

Imediat după declararea variabilei, valoarea sa este nedefinită.

Puteți atribui o variabilă de valoare atunci când este declarată:

Var mytext \u003d "hi!";

De asemenea, puteți declara mai multe variabile într-o singură var:

Var sum \u003d 4 + 5, mytext \u003d "hi!";

La atribuirea valorii VAR, puteți omite, dar este mai bine să nu faceți.

Tipuri de variabile

În JavaScript, puteți utiliza linii:

Var mytext \u003d "salut!";

numere întregi:

Var mynumber \u003d 10;

Numere fracționate:

var pi \u003d 3,14;

Valori logice:

VAR ISBOOLAN \u003d FALSE;

Detalii despre sintaxa JavaScript

Comentarii

Comentariile într-o singură linie sunt alocate "//". Tot ceea ce vine după aceste personaje este considerat un comentariu.

Pentru a comenta mai multe linii, trebuie să utilizați "/ *" pentru a desemna începutul comentariului și "* /" pentru a desemna sfârșitul comentariului

/ * Aici este comentat cod și este, de asemenea, comentariu * /

Separarea operatorilor

Pentru separarea operatorilor, trebuie să utilizați ";"

Este de dorit, dar nu neapărat, utilizați lacune pentru a îmbunătăți lizibilitatea textului.

Lucrați cu șiruri de caractere

var str \u003d 4 + 5 + "7"

va da o valoare de șir " 97 »În Str.

Var str2 \u003d "7" + 4 + 5

va da o valoare de șir " 745 "În str2.

Faptul este că valoarea la adăugarea este calculată secvențial - de la stânga la dreapta. Când există 2 numere - rezultatul devine numărul. Când un șir și un număr de pliuri, numărul este perceput ca un șir și o combinație de două linii.

Traducere rând

Pentru a transfera șirul la numărul utilizat parseign () și parsefloat ()

Aceste funcții primesc două argumente. Primul este un șir care va fi tradus în număr și al doilea - baza sistemului numeric care va fi utilizat pentru a traduce. Pentru a întrerupe linia ca numar decimal, trebuie să utilizați 10 ca al doilea argument

Var mynumber \u003d parseint ("345", 10);

Funcții JavaScript.

Funcțiile în JavaScript sunt declarate după cum urmează:

Funcția Myfuncțional () (un cod JS)

Pentru a returna valoarea pe care trebuie să o utilizați Întoarcere.:

Funcție MyMultiplicare (paramonă, paramonă * paramtwo)

Puteți declara o funcție "anonimă" prin scăderea numelui numelui pentru funcția.

Funcția poate fi transmisă ca parametru în altă funcție prin specificarea numelui acestuia.

Obiecte

Totul în JavaScript este un moștenitor de obiecte.

Crearea unei noi facilități

VAR persoană \u003d obiect nou (); // crearea persoanei Persoana Obiect.FiRstName \u003d "Andrew"; // Adăugați primul person al atributului

A doua opțiune mai scurtă pentru a crea un obiect

VAR PERSOAN \u003d (// Crearea unui obiect Primul nume: "Andrew", LastName: "Peterson", GetfullName: Funcție () (return this.firstname + "" + acest.lastname;))

Lucrați cu proprietățile obiectului

var \u003d obiect nou ();

mine ["nume"] \u003d "serg";
me.age \u003d 33;

Matrice în JavaScript

Crearea unei matrice

Var arr \u003d matrice noi (11, "salut!", TRUE); // crearea unei matrice

Un mod nou de înregistrare

Var arr \u003d; // crearea unei matrice

Lucrul cu matrice în JavaScript

Numărul de elemente din matrice

Var lungime \u003d arr.length; // 3.

Adăugarea elementelor la o matrice - împingere

arr.push ("o nouă valoare");

Extragerea ultimului element al matricei - pop

var lastvalu \u003d arr.pop ();

Combinând brațele

var arr2 \u003d; var l lungarray \u003d arr.concat (ARR2); // combinarea a două aspecte arr și arr2 într-o singură longarray

Alăturați-vă - îmbinați toate elementele matricei

Var Longstring \u003d arr.join (":") // "11: Bună ziua!

Comparație și funcții logice în JavaScript

Mai puțin

VAR ISTRUE \u003d 6\u003e \u003d 5; // mai mult sau egal

Egalitate

var izfalse \u003d 1 \u003d\u003d 2; // Egal istrue \u003d 1! \u003d 2; // nonavo var alsotrue \u003d "6" \u003d\u003d 6;

Identitate

var nodentical \u003d "3" \u003d\u003d\u003d 3 // FALSE, deoarece tipurile de date nu se potrivesc cu notificare \u003d "3"! \u003d\u003d 3 // Adevărat, deoarece tipurile de date nu coincid

Dacă operatorul

dacă (5.< 6) { alert("true!"); } else { alert("false!") }

Schimbați operatorul

Var prânz \u003d prompt ("ce vrei pentru prânz?", "Introduceți alegerea prânzului aici"); Comutator (prânz) (caz "sandwich": consola.log ("lucru sigur! Un sandwich, venind"); pauza; caz "supa": consola.log ("a luat-o! Tomatele mele preferate") ; Break; Case "Salată": Console.log ("sună bine! Ce zici de o salată de Caesar?"); Break; Case "Pie": Console.log ("plăcintă nu este o masă!") : Console.log ("Huh! Nu sunt sigur ce este" + prânz + ". Cum face un sunet sandwich?");)

Logic și - &&

dacă (1 \u003d\u003d 1 && 2 \u003d\u003d 2) (Alert ("adevărat!");)

Logic sau - ||

Dacă (1 \u003d\u003d 1 || 2 \u003d\u003d 3) (Alertă ("Adevărat!");)

Logic nu -!

dacă (! (1 \u003d\u003d 1)) (alertă ("falsă!");)

Cicluri

Pentru

pentru (var i \u003d 0; i< 10; i = i + 1) { alert(i); } var names = [ "Sergey", "Andrey", "Petr" ]; for (var i = 0, len = names.length; i < len; i = i + 1) { alert(names[i]); }

In timp ce

În timp ce (adevărat) (// ciclu de alertă infinită ("acest lucru nu se va opri niciodată!");) Var nume \u003d ["sergey", "andrey", "Petr"]; În timp ce (nume.Length\u003e 0) (Alertă (nume [I]);)

Face în timp ce

Face (alertă ("acest lucru nu se va opri niciodată!");) În timp ce (adevărat) (// ciclu infinit

Siruri de caractere

Text \u003d "Blah Blah Blah Blah Blah Blah Eric \\ bla eric bla bla eric";

Substanță.

Uneori nu doriți să afișați Întreg. Șir, doar o parte din ea. De exemplu, în Inboxul dvs. Gmail, îl puteți seta pentru a afișa primele 50 sau astfel caractere ale fiecărui mesaj, astfel încât să le puteți previzualiza. Această previzualizare este a substring. A șirului original (întregul mesaj).

"Un cuvânt" .substring (x, y) unde x este locul în care începeți să tăiați și Y este locul în care ați terminat tăiați șirul original.

Partea numerică este puțin ciudată. Pentru a selecta pentru "HE" în "Bună ziua", ați scrie acest lucru: "Bună ziua". substring (0, 2);

Gândiți-vă la stânga fiecărui caracter, astfel: 0-H-1-E-2-L-3-L-4-O-5.

Dacă tăiați la 0 și din nou la 2 sunteți lăsați cu doar el.

Mai multe exemple.:

1. Primele 3 litere ale "Batman"
"Batman" .substring (0.3)

2. De la 4 la 6 litera de "laptop"
"Laptop" .substring (3.6)

• cum se introduceți scriptul în documentul HTML (informații generale);
• comentarii despre JavaScript;
• cum să declare variabile și să le dați numele potrivite;
• analiza scriptului și sintaxei metodelor;
• metoda de alertă ();
• utilitate utilă: "Plug" pentru linkul de lucru temporar

De la autor

Există multe subtilități diferite în crearea de pagini web. Dar există trei balene. Aceasta este HTML, CSS și JavaScript.

Vă recomandăm să organizați auto-educație după cum urmează: De îndată ce sintaxa HTML și învățați să faceți pagini primitive cu text, imagini și tabele, conectați-vă la studiul CSS. De îndată ce înțelegeți cum să lucrați cu CSS, începeți să stăpâniți JavaScript, paralel cu "vocabularul" în toate cele trei limbi. Cred că în jumătate de an puteți construi un site foarte frumos și funcțional.

Nu știam cum să mă apropii de JavaScript. Au fost manuale sau prea abstracte - teorie, teorie și nu este clar cum să-l atașați la practică sau, dimpotrivă, prea specific: aici este un set de rețete gata făcute, luate și utilizare și cum totul se transformă - nu lucrul tău de moarte.

Am primit cumva un manual Vadim Dunaev. Mulți, știu, certa acest tutorial. În plus, am descarcat un PDF scanat din Frozo, unde în loc de "()" ar putea fi, de exemplu, "Q", iar literele latine din coduri sunt înlocuite (locuri!) Ruși asemănători, motiv pentru care aceste coduri nu funcționează. În general, trebuia să fiu prins. Și, sincer, dacă n-aș citi nimic despre JavaScript înainte, nu aș înțelege aceste greșeli și l-am alăturat numărului de blesteme. Dar apoi stăteam fără muncă, era timpul să pătrund și mi-a plăcut manualul. Dar este foarte detaliat și conceput pentru persoanele care au intrat în contact deja cu programarea.

Notă 2012.

Acum, după câțiva ani și tratez acest manual fără vechea încântare. El este depășit, "ascuțit" sub IE este destul de superficial; Există, de asemenea, erori reale și neglijență, iar unele lucruri utile nu sunt găsite. Dar în comparație cu acei "lideri de crayframe", care în abundență au emis motoare de căutare, a fost ceva.

Deci, vreau să încerc să ucid două iepuri. Scrieți ceva clar pentru orice cazan și, în același timp, constructiv-cognitiv. Astfel încât acest fierbător pe baza sfaturilor mele ar putea scrie un script simplu, dar complet original.

Introduceți la documentul HTML

Probabil ați văzut astfel de etichete în codurile HTML:

Această abrakadabra este între etichete și există un script.

Etichetați-vă

Acest atribut este opțional. Merită să utilizați fie pentru a clarifica versiunea limbii (JavaScript1.1, JavaScript1.2, etc.), sau dacă utilizați o altă limbă (de exemplu,

Tip atribut, care indică tipul de text: text / JavaScript.. A apărut în versiunea HTML 4.0. Îi recomand să o folosească.

Înainte de a trece la atribut sRC., aflați care partiții de cod HTML puteți introduce script-uri.

În orice. Dar cu mintea.

Adesea, scriptul indică retragerea unui text specific, numit aici și acum. Acest script este introdus direct în , "În scenă".

Există scripturi cu anunțuri de variabile care pot fi utilizate în alte scripturi de pe pagină, cu funcții care pot fi numite de la orice site al codului HTML. Astfel de scripturi sunt cele mai rezonabile pentru a plasa între etichete și .

Dar puteți face acest lucru pentru a utiliza imediat scriptul pe mai multe pagini web. Pentru a face acest lucru, codul său trebuie înregistrat într-un fișier separat cu extensia .js. (de exemplu, myscript_1.js.). Etichete Nu mai este necesar să scrieți în ea.

Și apoi, pentru a apela scriptul de pe pagina web, vom avea nevoie de un atribut sRC.. Funcționează, precum și un atribut similar cu etichetă :

Deci, acest lucru este plasat pe pagini diferite, aceeași pălărie sau meniu înregistrată în fișierul script. Mai ales ajută la cei care găzduiesc, unde SSI nu trece.

De asemenea, puteți introduce scripturi mici în unele atribute ale etichetelor HTML, dar puțin mai târziu.

Uneori scenariul trebuie plasat la capăt. corp. sau chiar după închidere : De exemplu, dacă avem nevoie, înainte de a executa scenariul, acesta explorează toate legăturile sau toate imaginile din document. Dar despre el - prea, mai târziu, când aflăm mecanismele JavaScript. Puteți coaja.

Comentarii

Ei spun că există încă astfel de browsere care nu înțeleg scripturile. Utilizatorii Meyaki care sunt atât de înclinați să dezactiveze în siguranță scripturile. În această situație, scenariul nu va fi executat, ci codul său, același "Abrakadabra", pur și simplu cade pe ecran.

Deci, ca să nu cadă, îl încheiem în comentariile HTML.

Mmm ... și care sunt aceste două slash înainte de a închide un comentariu?

Comentariul de închidere este deja în "corpul" scriptului. JavaScript nu înțelege aceste htmls cranial "paranteze cer, pentru el este un corp străin care generează o eroare. Deci, trebuie să ascundeți această etichetă de închidere de la script, plasându-l ca un comentariu JavaScript. JavaScript arată oarecum grațios: //. După ce scriptul de semnare nu vede brațul de închidere HTML și HTML ascunde în siguranță textul scriptului și nu sunt vizibile înregistrări "stânga" pe ecran.

De când am atins comentariile, trebuie să spun că în JavaScript, au două forme - la fel ca în C și C ++ (și de CSS și în CSS).

// Acest formular de comentariu // valabil numai pe o singură linie, // care este, pe fiecare linie nouă // trebuie să setați un semn de comentariu. Și acesta este codul de script ... / * Formularul de comentarii acționează cât mai multe rânduri atâta timp cât nu pompează pictograma de închidere, oglindă care reflectă inițial. * / Și acum din nou codul scriptului ...

Nu confunda comentariile HTML și comentariile JavaScript! Acestea sunt limbi diferite, deși coexistă "într-o singură sticlă". Sau, mai precis, într-o bancă. Ca păianjenii ...

Să revenim la problema browserelor dilaționale. Să presupunem că, cu JavaScript, ați făcut ceva din două imagini, ceva de genul unui banner animat. Apoi, vă puteți mulțumi utilizatorilor browserelor "sărace" (și dumneavoastră, sper, nu sunt complet lipsite de altruism), apariția a cel puțin uneia dintre aceste imagini cu ajutorul etichetei

Ce editori scriu scripturi

Poate că există niște editori speciali pentru JavaScript. Nu am întâlnit pe nimeni și nu am arătat prea mult. De obicei, scripturile sunt scrise în aceiași editori care sunt utilizați pentru a crea pagini web. De exemplu, îmi place casa. Scrierea scriptului în acești editori nu este diferită de a fi scris într-un notebook simplu, cu excepția iluminării codului. Și uneori ajută foarte mult. Am descărcat o dată un script (la un german) și nu funcționează. M-am uitat la cod și am văzut că cuvântul cheie intrerupator Din anumite motive, nu alocate. Arăt - și nu există intrerupator, dar switsch., Donner, umed! Am îndepărtat fagul - și am plecat.

Apropo, în toate exemplele noastre, codul arată exact în fereastra casei.

Dintr-o cameră într-o carieră

Următorul exemplu este plagiatul lui Dunaev. Dar el este atât de simplu și profund încât nu pot rezista. Am adăugat aici doar câteva detalii despre designul de înregistrare pentru a explica în același timp și a lor.

Imediat te avertizez: Aproape acest exemplu este absolut inutil. Dar concentrează multe concepte cheie ale limbii JavaScript și sintaxa sa.

De fapt, script-ul

Dacă copiați acest cod într-o pagină Notepad Net și salvați-o ca fișier.html, atunci când deschideți fișierul, veți vedea următoarele:

Să ne întrebăm cum iese.

var x \u003d 5;

Aici declarăm variabila x, care este egală cu 5.

Stop! Știți ce variabilă este?

Dacă nu, faceți clic pe acesta și citiți explicația.

Cum funcționează un computer? Toate datele sunt salvate pe disc și locul în care acestea sunt marcate pentru a fi clar unde să caute. Orice program (și scriptul nu este altceva decât un mic program) funcționează cu unele date. Prin urmare, este convenabil să scrie imediat "un loc" pentru ei. Acest loc este acest lucru marcată memorie. Și variabila devine. De ce "variabilă"? Deoarece această zonă poate fi umplută cu valori diferite. De exemplu, când lucrăm cu un calculator, numerele și acțiunile cu acestea pe care le introducem sunt înregistrate de program în variabilele corespunzătoare. Și când apăsați butonul de execuție, algoritmul utilizează valorile pe care le-am introdus.

În codul programului, variabilele sunt notate de numele pe care le inventăm ele însele pentru ei. Pentru a crea nume, există anumite reguli care pot diferi în diferite limbi de programare. Aceste restricții care vor fi descrise mai jos includ în mod specific JavaScript.

var. - Cuvânt cheie pentru declararea variabilei (în variabila engleză).

x. - Numele variabilei.

Restricții: Numai literele latine (orice registru), numerele și simbolul simbolului pot fi utilizate în numele variabilei. În acest caz, variabila nu ar trebui să înceapă cu numere. Și fără lacune.

Numele de variabile corecte:

Numele de variabile incorecte:

Limba JavaScript este sensibilă la registru.

myvar., Myvar. și myvar. - variabile diferite.

(Apropo, despre registru. Numele limbii în sine este scrisă cu J și S: JavaScript. Există o concepție greșită că acesta este necesar să scrieți acest cuvânt în etichetele HTML. Dar HTML nu este sensibil la Registrul, astfel încât să puteți scrie, după cum vă rog. Sunt obișnuit cu puțin, ca și casa mea preferată, cineva - mare.)

În acest script, variabila imediat atunci când declarați este atribuită o valoare. Nu este obligatoriu. Valoarea poate fi atribuită mai târziu. La sfârșitul liniei este un punct cu o virgulă. Acest lucru nu este, de asemenea, necesar. Dar, în scripturi mari și complexe, este uneori important, așa că demonstrează o intrare detaliată completă. DUNAEV are doar acest șir x \u003d 5., Anunț explicit var. De asemenea, nu este necesar aici. Dar (IMHO) este încă preferabil.

În următoarea linie, după cum puteți ghici deja, a declarat variabila y.. Ea a primit semnificația anunțului deja anunțat x., 3 mai mult decât x..

Și apoi se numește metoda alerta ().

Această metodă afișează o casetă de dialog cu un mesaj specificat în paranteze. Aceasta este sintaxa tuturor metodelor JavaScript: numele metodei și parantezelor cu conținutul său.

Conținutul acestei metode este valoarea variabilei Y, iar în caseta de dialog vom vedea cele opt. Înțeles de ce?

Micșuni utile

De când ne-am întâlnit cu metoda alerta (), atunci aici este aplicația simplă și utilă: Uneori, unele pagini ale site-ului nu au fost încă făcute, iar legăturile sunt deja pregătite. Este neplăcut să ajungi la "Page 404". De asemenea, nu este foarte plăcut să așteptați până când este cizme și apoi aflați că secțiunea în dezvoltare. Întotdeauna conduc astfel de legături după cum urmează:

"JavaScript: Alertă (" Pagina în Dezvoltare ");\u003e Element de meniu.

Apropo, aici este o altă modalitate de a implementa codul JavaScript în codul HTML. Aici este introdus în atribut href. TAG Referință și introdus prin cuvântul cheie " javaScript:"(Cu un colon și spațiu ulterior: acordați întotdeauna atenție trivia sintactică). Fiți atenți la citatele tradiționale dublu ale valorii atributului HTML și cotațiile unice "imbricate" în textul scenariului în sine.

Foarte curând vom învăța despre atributele speciale de "eveniment" ale etichetelor HTML, de exemplu, onclick.care sunt concepute special pentru a introduce codul JavaScript și nu necesită un cuvânt cheie.

Deci, am învățat:

cum să declarați un script în documentul HTML, care formează un comentarii JavaScript, cum să declarați variabile și să le dați numele corecte, precum și sintaxa metodelor și, în special, metoda de alertă ().

Și, de asemenea, învățat: