Brojnim zahtjevima pokrenite seriju javaScript lekcije. Ako ste odlučno konfigurirani, master JS, to znači da morate imati osnovno znanje o HTML-u i CSS-u, jer je to temelj, bez kojeg je teško shvatiti o čemu ćemo razgovarati.

Sa naše strane pokušat ću objasniti razumljiv jezik, pokazati se u stvarnim primjerima iz života, jer sve dolazi u poređenju.

Šta je JavaScript ili kako da razumem, za koju svrhu potrebna je tokom web razvoja!

Živimo u svijetu u kojem su svi opipljivi, implementiramo te ideje koje dolaze u našu glavu. Gradimo kuće, automobile, krećući se s raznim tehnikama. To jest, ono što možemo učiniti u stvarnom svijetu može biti zastupljeno u odnosu na HTML, gdje djeluje kao građevinski materijal, temelj, na kojem sve čuva, a kada cSS pomoć Mi napravimo ovaj svijet, činemo ga šarenim, kao što su htjeli vidjeti sebe.

Vjerovatno se pitate je li HTML i CSS ono što nas okružuje, pa šta je JavaScript? Gde se manifestuje u našem svetu.

Jednostavno, mislim da će objasniti na primjeru filma Gary Lots, mislim da su mnogi od vas izgledali i shvatili o čemu govorimo. Prema skriptu filma, znamo da je Gary posjedovali sposobnosti, bio je čarobnjak, a čarobni štapić pomogao je u tome. Bio je to čarobni štapić koji mu je pružio priliku za stvaranje magije, takav nivo kao što je posjedovao znanje da bi ga učinilo jedinstvenim.

JavaScript je čarobni štapićTo ima svaki web programer, ali koja magija možete stvoriti, ovisi samo o znanju programera sa kojim posjeduje. Oni koji su savladali ovaj jeziksu čarobnjaci i kovrčava čuda.

JavaScript jezik Nije ispunjeno bez njegovih komponenti HTML i CSS. Mnogi programeri spominju tri jezika koji formiraju "slojeve" web stranice: HTML, CSS i JavaScript.

Html Prvi jezik HyperText markiranja - pruža strukturalne slojeve, ekspresivno organizirajući sadržaj stranice, poput teksta, slika ostalih elemenata.

Sekunda, CSS. (Kaskadne stil limova) obrazac) prekrasan ukras, Izgled HTML sadržaja.

I treći JavaScript. - Dodajte slojeve ponašanja, oživljavajući web stranicu, što ga čini interaktivnim, odnosno kreiranje elemenata za interakciju sa posjetilacima.

Kao rezultat, za savladavanje JavaScript jezika, morate imati dobru predstavu o HTML-u i CSS-u.

Programiranje može izgledati nevjerovatna magija, nepristupačna jednostavnom smrtnom stanju. Međutim, većina njegovih koncepata nije teško razumjeti. JavaScript je prilično prijateljski u odnosu na novake programere, ali, ipak je teže od HTML-a ili CSS-a, tako da ćemo u okviru niza lekcija savladati temeljne koncepte programiranja, a možete ih primijeniti pri pisanju skripta na JavaScript.

Upoznat ćete se sa novim simbolima () ,, , (),!, Naučite oznaku novih riječi (var, , inače ako ćemo analizirati pravila interpunkcije i sintaksu samog jezika i sve to kako bi se stvorila i sve to radi stvaranja njihove magije.

Materijal pripremljen Denis spalio je, napišite svoje komentare i obavezno podijelite ovaj materijal sa svojim prijateljima.

• Transfer

Materijal, prevod koji danas objavljujemo posvećen je osnovama JavaScripta i namijenjen je za početnike programere. Može se posmatrati kao mala referentna knjiga o osnovnim JS dizajnima. Ovdje smo, posebno, razgovarajmo o sistemu tipa podataka, o varijablama, nizovima, značajkama, o prototipovima objekata i nekim drugim karakteristikama jezika.

Primitivni tipovi podataka

JavaScript ima sljedeće primitivne vrste podataka: broj, logičarski, string, nedefinirani, null. Odmah, treba napomenuti da, prilikom rada s primitivnim tipovima podataka, na primjer, s nizom literala, ne vodimo ni eksplicitnu pretvorbu, možemo pristupiti njihovim metodama i svojstvima. Činjenica je da se prilikom pokušaja obavljanja takvih operacija, literi automatski opremljeni odgovarajućim omotačem objekta.

▍ list

JavaScript ima samo jednu vrstu brojeva - to su broj dvostrukog tačnosti s plutajućom tačkom. To dovodi do činjenice da su rezultati izračunavanja nekih izraza aritmetički netačni. Možda već znate da u JS-u vrijednost izražavanja 0,1 + 0,2 nije jednak 0,3. Istovremeno, kada se radi sa cijelim brojevima, takvi se problemi ne primijećuju, odnosno 1 + 2 \u003d\u003d\u003d 3.

JavaScript ima broj brojeva koji je objekt omot za numeričke vrijednosti. Broj objekata možete kreirati ili pomoću naredbe VAR A \u003d broj (10) ili se možete osloniti na automatsko ponašanje gore opisanog sistema. To, posebno, omogućava vam pozivanje metoda pohranjenih u broju.Prototip u primenjuju se na numeričke litere:

(123) .tostranje (); // "123" (1,23) .tofikseljen (1); //"1.2 "
Postoje globalne funkcije dizajnirane za pretvaranje drugih vrsta vrijednosti u numerički tip. To je parseint (), parseffloat () i broj () dizajn, koji u ovom slučaju djeluje kao konvencionalna funkcija koja vrši pretvorbu vrsta:

Parseint ("1") // 1 paraseint ("Tekst") // Nan Parsefloat ("1.234") //1.234 broj ("1") // 1 broj ("1.234") //1.234) //1.234
Ako tokom operacije sa brojevima pokaže nešto što nije broj (tokom nekih proračuna ili kada pokušavate pretvoriti bilo šta na broj), JavaScript neće dati grešku, ali će predstavljati rezultat slične operacije kao i nan ( Nije-broj, ne broj). Da biste provjerili da li se upotrebljava vrijednost nan, možete koristiti funkciju INAN ().

Aritmetičke operacije JS radi prilično poznato, ali potrebno je obratiti pažnju na činjenicu da operator + može izvesti dodavanje brojeva i spajanje žica.

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

▍ moždani udar

Redovi u JavaScriptu su nikode nizovi znakova. String Licels stvaraju, unoseći tekst koji će se staviti u njih, u dvostrukom (") ili pojedinačnim (" ") citatima. Kao što je već spomenuto, prilikom rada sa string litalima možemo se osloniti na odgovarajući omot za objekt, u kojem se među njima postoji mnogo korisnih metoda, među njima - podvrsta (), indext (), exadef ().

"Tekst" .Substring (1,3) // EX "Tekst" .INDEXOF ("X") // 2 "Tekst" .con ("kraj") // TEXT "
Redovi, poput ostalih primitivnih vrijednosti, immutabelins. Na primjer, metoda Concat () ne mijenja postojeći niz i stvara novu.

▍Logijske vrijednosti

Logički tip podataka u JS predstavljeni su dvije vrijednosti - istinite i lažne. Jezik može automatski pretvoriti različite vrijednosti u logički tip podataka. Dakle, lažno, pored lažne logičke vrijednosti, nisu , nedefinirani "," (prazan niz), 0 i nan. Sve ostalo, uključujući bilo koje objekte, istinite su vrijednosti. U toku logičke operacije Sve što se smatra istinitim pretvara se na TRUE i sve što se smatra lažnim pretvara se u FALSE. Pogledajte sljedeći primjer. U skladu s gore navedenim principima, prazan niz bit će pretvoren u FALSE i kao rezultat izvršenja ovog kodeksa u konzoli, liniju ovoga je lažna u konzolu.

Pustiti tekst \u003d ""; Ako (tekst) (konzola.log ("To je istina");) drugo (konzola.log ("Ovo je lažno");)

Objekti

Objekti su dinamične strukture koje se sastoje od para ključne vrijednosti. Vrijednosti mogu imati primitivne vrste podataka, mogu biti objekti ili funkcije.

Predmeti su najlakši za stvaranje pomoću objektne literalne sintakse:

Let Obj \u003d (Poruka: "Poruka", Dotomething: Funkcija () ())
Svojstva objekta mogu biti u bilo kojem trenutku, čitati, dodavanje, uređivanje i brisanje. Ovako se radi:

• Promjete čitanja: objekt.Name, objekt.
• Snimanje podataka na svojstva (ako nekretnina na koja ne postoji ne postoji, dodaje se nova nekretnina s navedenim ključem): objekt.Name \u003d vrijednost, objekt \u003d vrijednost.
• Izbriši svojstva: Izbriši objekt.Name, Obriši objekt.

Evo nekoliko primjera:

Neka je obj \u003d (); // Stvaranje praznog objekta obj.message \u003d "Poruka"; // Dodavanje nove nekretnine Obj.message \u003d "Nova poruka"; // uređivanje brisanja objekta.Message Svojstva; // Izbriši nekretninu
Predmeti na jeziku implementiraju se u obliku hash tablica. Možete kreirati jednostavan hash tablicu pomoću naredbe objekt.create (null):

Neka French \u003d objekt.create (null); Francuski ["da"] \u003d "oui"; Francuski ["ne"] \u003d "ne"; Francuski ["da"]; // "oui"
Ako se objekt mora učiniti nepromjenjivim, možete koristiti naredbu objekt.freeze ().

Da biste nabrojali sva svojstva objekta, možete koristiti naredbu objekt.keys ():

Funkcija LogProperty (ime) (Console.log (naziv); // Naziv nekretnine Console.log (OBJ); // Vrijednost nekretnine) Object.Kj) .Žena (Logproperty);

▍Papirajte vrijednosti primitivnih vrsta i predmeta

Za praktični rad Sa primitivnim vrijednostima, već je rečeno, da ih percipiraju kao predmete koji imaju svojstva i metode, iako nisu objekti. Primitivne vrijednosti nepromjenjiva, unutarnja struktura objekata može varirati.

Varijable

U JavaScript-u, varijable se mogu najaviti pomoću ključnih riječi var, pustiti i Const.

Kada koristite VAR ključnu riječ, možete proglasiti varijablu i, ako je potrebno, da biste je inicijalizirali s određenom vrijednošću. Ako se varijabla ne inicijalizira, njegova vrijednost nije definirana. Varijable proglašene korištenjem ključne riječi var imaju funkcionalni opseg.

Plaste ključna riječ je vrlo slična Var-u, razlika je da su varijable proglašene ključnom riječi omogućuju blok opseg.

Opseg vidljivosti bloka takođe je varijable proglašeni pomoću Ključne riječi Const, koja je data da se vrijednosti takvih varijabli ne mogu promijeniti, pravilno nazvati "konstante". Ključna riječ Const koja "zamrzava" vrijednost varijable proglašene njegovom upotrebom može se uporediti sa metodom objekta.Freeze (), "zamrzavanjem" objekata.

Ako je varijabla proglašena izvan bilo koje funkcije, njegov opseg je globalni.

Nizovi

JavaScript nizovi se implementiraju pomoću objekata. Kao rezultat, govoreći o nizovima, zapravo razgovaramo o predmetima sličnim nizovima. Možete raditi sa elementima niza koristeći njihove indekse. Numerički indeksi se pretvaraju u žice i koriste se kao imena za pristup vrijednostima nizova. Na primjer, dizajn vrsti doline sličan je dizajnu dolaza ["1"], a drugi će dati pristup istoj vrijednosti: arr \u003d\u003d\u003d arr ["1"]. U skladu s gore navedenim, jednostavan niz proglasio je Let Arr \u003d ["A" naredbu, b "," C "], čini se da je sljedeći način:

("0": "A", "1": "B", "2": "C")
Uklanjanje elemenata niza koristeći naredbu izbrisanja "rupe" u njemu. Da biste izbjegli ovaj problem, možete koristiti naredbu Splice (), ali on funkcionira polako, jer nakon uklanjanja predmeta pomiče preostale elemente niza, u stvari, premještajući ih na početak porođaja, lijevo .

Let Arl \u003d ["A", "B", "C"]; Izbriši dol; Konzola.log (dol); // ["A", prazan, "c"] console.log (arr.length); // 3.
Metode nizova olakšavaju implementaciju takvih struktura podataka kao hrpe i redovi:

// Stack Neka Stack \u003d; Stack.Push (1); // stack.push (2); // neka zadnji \u003d stack.pop (); // console.log (zadnji); // 2 // Red put Queue \u003d; red.push (1); // queue.push (2); // neka prvo \u003d red \u003d queue.shift (); // console.log (prvo); // jedan

Funkcije

Funkcije u JavaScriptu su objekti. Funkcije se mogu dodijeliti varijablama, pohranjenim u predmetima ili nizovima, prenositi na druge funkcije u obliku argumenata i povraćaj iz drugih funkcija.

Postoje tri načina za prijavljivanje funkcija:

• Izjava o funkciji ili Izjavu o funkciji).
• Koristeći funkcionalne izraze (izraz funkcionalne funkcije) koji se nazivaju i funkcionalni literi (funkcija doslovno).
• Korištenje sintakse funkcija snimanja (funkcija strelice).

▍Classical AD funkcija

Ovim pristupom u deklaraciji funkcija, primjenjuju se sljedeća pravila:

• Prva ključna riječ u funkciji reda deklaracije je funkcija.
• Funkcije moraju dodijeliti ime.
• Funkcija se može koristiti u kodu koji je prije nego što je izrađen mehanizmom podizanja deklaracije funkcije u gornjem dijelu opsega vidljivosti u kojoj se deklarira.

Evo kako izgleda klasična lista funkcija oglasa:

Funkcija Dosomething () ()

▍ Funkcionalni izrazi

Kada koristite funkcionalne izraze, morate uzeti u obzir sljedeće:

• Ključna riječ funkcija više nije prva riječ u funkciji sadrže redovi.
• Prisutnost imena za funkciju nije obavezna. Moguće je koristiti i anonimne i nazvane funkcionalne izraze.
• Naredbe poziva Ovakve funkcije moraju slijediti naredbe svojih oglasa.
• Ova se značajka može pokrenuti odmah nakon najave, koristeći iife sintaksu (odmah se poziva na izraz funkcionalnog izraza - odmah nazvan funkcionalni izraz).

Funkcionalni izraz izgleda ovako:

Neka Dosomething \u003d funkcija () ()

▍ Funkcije istezanja

Funkcije sa strelicama, u stvari se mogu smatrati "sintaksom šećera" za stvaranje anonimnih funkcionalnih izraza. Treba napomenuti da takve funkcije nemaju vlastite subjekte ovog i argumenata. Najava funkcije strelice izgleda ovako:

Neka dosomething \u003d () \u003d\u003e ();

Promocije za pozivanje funkcija

Funkcije se mogu pozvati na različite načine.

Normalni poziv funkcije

Dotomething (argumenti)

Funkcija poziva kao metoda objekta

Theobject.dosomething (argumenti) theobject ["dosomething"] (argumenti)

Funkcija poziva u obliku dizajnera

Nova Dosomething (argumenti)

Pozivanje funkcije pomoću metode primjene ()

Dosomething.apply (theobject,) dosomething.call (theobject, argumenti)

Pozivanje funkcije pomoću Metode Bind ()

Neka Dosomethingwithoobject \u003d dosomething.bind (theobject); Dosomethingwithoobject ();
Funkcije se mogu nazvati velikim ili manjim brojem argumenata od broja parametara koji su navedeni kada ih proglasite. Tijekom rada "viška" funkcije argumenti će se jednostavno zanemariti (iako funkcija ima im pristup), nedostajući parametri će dobiti nedefinirani.

Funkcije imaju dva pseudo-parametre: ovo i argumenti.

▍ Vjenčanica ovo

Ključna riječ o tome je funkcionalni kontekst. Vrijednost na koju ukazuje ovisi o tome kako je nastala funkcija. To su vrijednosti potrebne ključne riječi ovisno o načinu pozivanja funkcije (oni, s primjerima kodeksa, čiji su ovdje gore navedeni dizajni koji se koriste ovdje su opisani):

• Normalni poziv funkcije - prozor / nedefiniran.
• Funkcija poziva kao metoda objekta - Theobject.
• Pozivanje funkcije u obliku dizajnera - novi objekt.
• Pozivanje funkcije pomoću metode Primjene () - Theobject.
• Pozivanje funkcije pomoću metode Bind () - Theobject.

▍ Argumenti za vjenčanicu

Ključna reč je pseudoparametar koji omogućava pristup svim argumentima koji se koriste prilikom pozivanja funkcije. Izgleda kao niz, ali nije niz. Konkretno, on nema metode niza.

Funkcija reducetosum (ukupna, vrijednost) suma () (neka args \u003d array.prototip.slice.call (argumenti); povratni args.rede (reducetosum, 0);) suma (1,2, 3);
Alternativa ključne riječi argumentima je nova sintaksa preostalih parametara. U sljedećem primjeru, args je niz koji sadrži sve što se prenosi prilikom poziva.

Funkcijska suma (... Args) (povratni args.Reduce (reducetosum, 0);)

▍ Povratak operatera.

Funkcija u kojoj nedostaje povratni izraz, vratit će se nedefinirano. Pomoću ključne riječi povraćaj obratite pažnju na način na koji mehanizam automatskog umetanja zareznih zareza. Na primjer, sljedeća funkcija neće vratiti prazan objekt, ali neodređen:

Funkcija GetObject () (povratak ()) GetObject ()
Da bi se izbjegao takav problem, otvor za otvaranje mora biti postavljen na istoj liniji na kojoj se nalazi povratna izjava:

Funkcija Getobject () (povratak ())

Dinamički kucanje

JavaScript je jezik sa dinamičnim kucanjem. To znači da specifične vrijednosti imaju vrste, a varijable nisu. Tokom izvršenja programa u istoj varijabilnoj varijabilnosti možete snimati vrijednosti različite vrste. Evo primjera funkcije koja radi sa različitim vrstama:

Dnevnik funkcije (vrijednost) (konzola.log (vrijednost);) dnevnik (1); zapisnik ("tekst"); Dnevnik ((poruka: "Tekst"));
Da biste razjasnili vrstu podataka pohranjenih u varijabli, možete koristiti korisnički operator TOP ():

Neka n \u003d 1; TIPOF (N); // broj neka s \u003d "tekst"; TIP (S); // string let fn \u003d funkcija () (); TIP (FN); // funkcija.

Model pogubljenja jednog protoka

JavaScript Exceurhic okruženje je jednokratno. To se posebno izražava u nemogućnosti istovremeno obavljanja dvije funkcije (ako ne uzima u obzir mogućnosti asinhronog izvršenja kodeksa koji ne utječe ovdje). U okruženju izvršenja postoji takozvani red događaja (red događaja), koji pohranjuje popis zadataka koji se obrađuju. Kao rezultat toga, problem problema sa međusobnim resursima neobičan je za jedno cvjetničku shemu izvršenja JS-a, tako da nema blokiranog mehanizma. Međutim, kôd koji spada u red događaja mora se brzo obaviti. Ako prepuštate s teškim radom, u aplikaciji Preglednika, glavni tok, stranica aplikacije neće odgovoriti na izlaganje korisniku, a pretraživač će ponuditi za zatvaranje ove stranice.

Rukovanje izuzetkom

JavaScript ima mehanizam za rukovanje izuzetkom. Djeluje prema prilično običnom za takve mehanizme princip: Kodeks koji može izazvati grešku vrši se korištenjem pokušaj / uhvatiti dizajn. Sam kôd je u pokušaj jedinice, pogreške se obrađuju u bloku za ulov.

Zanimljivo je napomenuti da ponekad JavaScript, ako imate slobodne situacije, ne izdaje poruke o pogrešci. To je zbog činjenice da JS nije izbacio greške prije usvajanja ECMAScript 3 standarda.

Na primjer, u sljedećem fragmentu Kodeksa pokušaj promjene objekta "smrznutog", ali izuzetak se neće izdati.

Neka obj \u003d objekt.Freeze (()); Obj.message \u003d "Tekst";
Neke od "tih" JS grešaka očituje se u strogom režimu, možete ga uključiti pomoću "upotrebe stroga" dizajna; .

Prototip sistem

Osnova takvih JS mehanizama kao funkcionalnih dizajnera, naredba objekta (), ključna riječ klase je sustav prototipa.
Razmotrite sljedeći primjer:

Pusti servis \u003d (Dotomething: Funkcija () ()) Neka specijaliziranaService \u003d objekt.create (usluga); Konzola.log (specijalizovanoService .__ proto__ \u003d\u003d\u003d usluga); // Tačno.
Ovdje, za kreiranje specijaliziranog objekta, prototip od kojih je bilo potrebno napraviti objekt objekta.create (). Kao rezultat toga, ispada da se metoda dozome () može nazvati kontaktiranjem specijaliziranog objekta. Pored toga, to znači da imovina __PROTO__ SpecijaliziranoService objekt ukazuje na uslužni objekt.

Kreirajte sada sličan objekt pomoću KLJUČNE RIJEČA:

Služba klase (Dotomething ()) Class SpecializedService Proširi Usluga () Ostavite specijalizovanoService \u003d Novo specijalizovanoService (); Konzola.log (specijalizovanoService .__ proto__ \u003d\u003d\u003d SpecializedService.prototip);
Metode proglašene u klasu usluge bit će dodati u uslugu.prototip objekt. Instance klase usluga imat će isti prototip (usluga.prototip). Svi će instanci delegirati pozive poziva na uslugu.prototip objekta. Kao rezultat toga, ispada da su metode proglašene samo jednom, u servisu.prototip, nakon čega su "naslijeđeni" po svim slučajevima klase.

▍Cotlous Prototipovi

Predmeti mogu biti "nasljednici" drugih objekata. Svaki objekt ima prototip, od kojih su to dostupne metode. Ako se pokušate uputiti na objekt koji nije u samom objektu, JavaScript će početi tražiti lanac prototipa. Ovaj će se proces nastaviti sve dok nekretnina ne pronađe, ili dok se pretraga ne dosegne kraj lanca.

O funkcionalnom programiranju u JavaScript-u

U JavaScript funkcije su predmeti prve klase, jezik podržava mehanizam zatvaranja. Ovo otvara način provođenja metoda funkcionalnog programiranja u JS-u. Konkretno, govorimo o mogućnosti primjene funkcija veće narudžbe.

Zatvaranje je interna funkcija koja ima pristup varijablama proglašenim u rodnoj funkciji, čak i nakon što se ispuni roditeljska funkcija.

Funkcija najviših narudžbi je funkcija koja je sposobna uzimati druge funkcije kao argumente, povratne funkcije ili oba.

Funkcionalno programiranje u JS-u označeno je u raznim publikacijama. Ako vam je zanimljivo - evo nekih materijala na ovoj temi posvećenoj

JavaScript udžbenik za sintaksu

Prije nego što počnete čitati javaScript tutorialMorate imati znanje o softveru.

Bit će veliki plus u učenju JavaScript sintakse ako ste već upoznati sa bilo kojim programskim jezikom, poput PHP, C ili Pascal-a, a također shvatite koja varijabla, vrsta podataka, funkcija ili niz.

Međutim, ako niste upoznati sa programskim jezicima, ne vrijedi zabrinuti, dati javaScript udžbenik Samo i dizajniran je za one koji prvi put prelaze u proučavanje programiranja.

JavaScript (JavaScript) - Ovo je programski program klijenta koji mogu kontrolirati Elemente HTML-stranice (HTML oznake) i web pretraživač, prisilite ih za pomicanje, odgovorite na različite događaje (klikovi miša, pritiskom na tipkovnicu), stvorite puno zanimljivih programa ( Skripte): testovi, animacija, foto galerije (na primjer, u Vkontakte), igre i još mnogo toga.

Kako je studija JavaScript-a

Studija javaScript jezikobično se podijeli u četiri faze:
1. JavaScript sintaksa (ovaj vodič),
2. Studija Dom i Bom.,
3. Kontrola DOM i BOM pomoću JavaScript-a,
4. Proučavanje različitih javascript biblioteka. jQuery. - najpopularniji na ovaj trenutak biblioteka (JQuery udžbenik bi se trebao pojaviti na ovoj stranici na kraju 2015.).

Dom je objektni model dokumenta. Zahvaljujući dom tehnologiji, HTML stranica oznake počinju predstavljati objekte objekata i svaki objekt u ovom stablu, postoji jedinstvena adresa. JavaScript jezik koji se odnosi na ovu adresu može pristupiti određenoj HTML oznaci i upravljati njima (promijenite boju, veličinu, položaj i mn. Dr.).

BOM je model dokumenta pregledača. Struktura je ista kao dom, samo umjesto objekata HTML-stranice, su preglednici: Prozor preglednika, veličina ekrana pregledača, posjeta povijest, statusni niz itd.

Nakon učenja Doma i BOM-a, oni počinju stvarati manje ili više složene skripte na JavaScript-u koji interaktiraju sa strani i pretraživačem.

Zatim, savladavši malo, proučavajući neke JavaScript biblioteke, poput jquery, zahvaljujući njoj, možete stvoriti iste programe kao i na JavaScript, samo mnogo bržim i efikasnijim.

Neke webmastere odmah počinju proučavati jquery, preskačući prethodne tri faze, ali ne preporučujem to, jer u svakom slučaju trebate razumjeti javascript sintaksu i znati objekte Dom / Bom njihovih svojstava, metoda i odredišta.

Koji se programi mogu napisati pomoću JavaScript-a

Korištenje Možete stvoriti mnoge zanimljive programe (skripte):
- Možete kreirati skripte koje će promijeniti elemente stranice web stranice ili njihovu lokaciju pritiskom na jedan ili drugi gumb,
- Možete stvoriti animaciju,
- manipulirati oblicima, poput provjere podataka koje je unio korisnik,
- Stvorite različite testove, poput vrste Ege (školskih ispita) i odmah dobijete rezultat,
- Zahvaljujući BOM-u, možete saznati karakteristike pregledača i računarskog računara koji ste posjetili vašu web lokaciju, što vam omogućava da stvorite različite mjere za posjete,
- Sa JavaScriptom možete stvoriti čak i igre, crtane filmove i mnoge druge zanimljive i korisne programe.

Koja je svrha ovog vodiča na JavaScript?

Svrha ovoga javaScript knjige je da te naučim osnove sintakse JavaScript, uvesti programiranje i koncepte kao što su varijable, vrste podataka, operacije, operatori grana, funkcija, ciklusi, nizovi, predmeti itd. Sve se to nalazi u drugim programskim jezicima, tako da je savladao JavaScript, bit ćete mnogo lakše naučiti druge jezike, kao što su PHP, C ++ ili Python.

JavaScript struktura udžbenika

U udžbenik na JavaScript-u.Sljedeće teme i lekcije razmotrit će se.

JavaScript - ulazi u igru \u200b\u200bkada trebamo napraviti neke korake na strani klijenta, koja se obratila našoj web stranici.

JavaScript može promijeniti web stranicu bez pristupa poslužitelju, provjerite unesene vrijednosti korisnika podataka i izvedite bilo koje druge operacije.

Ovaj članak sadrži osnovne informacije koje će vam omogućiti da počnete koristiti JavaScript.

Umetanje skripte izravno na kod stranice

Možete umetnuti JS kôd direktno unutar stranice.

Uklanjanje koda u zasebnoj datoteci

Može se podnijeti JavaScript kod do vanjske datoteke i koristiti vezu na nju na stranici

Zatvaračna oznaka u ovom slučaju je potrebna.

Najbolje umetnite skripte ispred oznake za zatvaranje

Varijable

Imena varijabli

Imena varijabli mogu se pokrenuti s velikim ili malim slovom, podvlakom ili $ znakom.

Ime može biti brojevi, ali nemoguće je započeti ime varijable s brojevima.

JavaScript je osjetljiv na registar: Mytext i Mytext su dvije različite varijable.

Bolje je koristiti za imenovanje kamile, započinjući svaku riječ u ime varijable s velikim slovom.

Proglašavanje

Za promenljive deklaracije u JavaScript koji se koristi var..

Var mytext; // nedefinirani mytext \u003d "zdravo!"; Upozorenje (Mytext);

Odmah nakon što proglasi varijablu, njegova vrijednost je nedefinirana.

Možete dodijeliti varijablu vrijednosti kada se proglasi:

Var mytext \u003d "zdravo!";

Takođe možete proglasiti nekoliko varijabli u jednoj var:

Var suma \u003d 4 + 5, mytext \u003d "bok!";

Prilikom dodjeljivanja var vrijednosti možete izostaviti, ali bolje je da ne treba učiniti.

Vrste varijabli

U JavaScript možete koristiti linije:

Var mytext \u003d "zdravo!";

cijeli brojevi:

Var mynumber \u003d 10;

Frakcijski brojevi:

Var PI \u003d 3.14;

Logičke vrijednosti:

Var ISBoolean \u003d FALSE;

Detalji JavaScript sintaksa

Komentari

Komentari u jednoj liniji su raspoređeni "//". Sve što dolazi nakon što se ovi znakovi smatraju komentarom.

Da biste komentirali nekoliko linija, morate koristiti "/ *" za označavanje početka komentara i "* /" za označavanje kraja komentara

/ * Ovdje se komentira kodeks i to je također komentar * /

Odvajanje operatora

Za odvajanje operatera morate koristiti ";"

Poželjno je, ali ne nužno, koristite praznine za poboljšanje čitljivosti teksta.

Radite sa žicama

VAR STR \u003d 4 + 5 + "7"

će dati vrijednost niza " 97 »U Str.

VAR STR2 \u003d "7" + 4 + 5

će dati vrijednost niza " 745 "U str2.

Činjenica je da se vrijednost prilikom dodavanja izračunava uzastopno - s lijeva na desno. Kada postoje 2 broja - rezultat postaje broj. Kada se niz i brojni nabori, broj se doživljava kao niz i kombinaciju dvije linije.

Prevođenje

Da biste prebacili niz na korišten broj parseint () i parseffloat ()

Ove funkcije primaju dva argumenta. Prvi je niz koji će biti preveden u broj, a drugi - baza broja brojeva koji će se koristiti za prevođenje. Da prekine liniju kao decimalni broj, morate koristiti 10 kao drugi argument

Var Mynumber \u003d Parseint ("345", 10);

JavaScript funkcije

Funkcije u JavaScript-u su proglašene na sljedeći način:

Funkcija MyFunction () (neki JS kod)

Da biste vratili vrijednost koju trebate koristiti povratak.:

Funkcija Mymultiplikacija (Paramone, Paramone * Paramtwo)

Možete proglasiti "anonimnu" funkciju spuštanjem naziva imena za funkciju.

Funkcija se može prenijeti kao parametar u drugu funkciju određivanjem njegovog imena.

Objekti

Sve u JavaScriptu je nasljednik objekta.

Stvaranje novog objekta

Var osoba \u003d novi objekt (); // kreiranje osobe osobe osobu.firstname \u003d "Andrew"; // dodajte prvu atributu persona.lastname \u003d "Peterson";

Druga, kraća opcija za stvaranje objekta

Var osoba \u003d (// Stvaranje objekta FirstName: "Andrew", prezime: "Peterson", GetFurlName: funkcija () (vratite ovo.Firstname + "" + this.lastname;))

Rad sa objektima Properties

var me \u003d novi objekt ();

ja ["ime"] \u003d "Serg";
ja.ge \u003d 33;

Nizovi u JavaScript-u

Stvaranje niza

Var arr \u003d novi niz (11, "Zdravo!", True); // Stvaranje niza

Novi način snimanja

Var arr \u003d; // Stvaranje niza

Rad sa nizovima u JavaScript-u

Broj elemenata u nizu

Var dužina \u003d arr.length; // 3.

Dodavanje elemenata u niz - gurnite

arr.push ("nova vrijednost");

Ekstrakcija poslednjeg elementa niza - pop

var lastvalue \u003d arr.pop ();

Kombiniranje ruku

var arr2 \u003d; var longraray \u003d arr.concat (arr2); // kombinirajući dva dolaska dol i arr2 u jednom Longarrayu

Pridružite se - spajanje svih elemenata niza

var longstring \u003d arr.Join (":") // "11: zdravo !: TRUE"

Usporedbe i logičke funkcije u JavaScript-u

Više-manje

Var ISTRUE \u003d 6\u003e \u003d 5; // više ili jednako

Ravnopravnost

var isfalse \u003d 1 \u003d\u003d 2; // jednak ISTRUE \u003d 1! \u003d 2; // neavo var alsotrue \u003d "6" \u003d\u003d 6;

Identitet

var notintible \u003d "3" \u003d\u003d\u003d 3 // FALSE, jer se vrste podataka ne podudaraju sa notintincem \u003d "3"! \u003d\u003d 3 // TRUE, jer se vrste podataka ne podudaraju

Ako operator

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

Prekidač

Var ručak \u003d brz ("Šta želite za ručak?", "Upišite odabir ručka ovdje"); Prekidač (ručak) (slučaj "sendvič": console.log ("Sigurna stvar! Jedan sendvič, pojavljuje se."); Pauza; futrola "supa": console.log moja omiljena. ") ; Pauza; Salata ": Console.log (" Zvuči dobro! Šta kažete na cezarnu salatu? "); Pauza; futrola" pita ": console.log (" pita "ne obrok!"); Pauza; zadano; default : console.log ("Huh! Nisam siguran šta je" + ručak + ". Kako se sendvič zvuk?");)

Logički i - &&

ako (1 \u003d\u003d 1 && 2 \u003d\u003d 2) (upozorenje ("istina!"););)

Logički ili - ||

Ako (1 \u003d\u003d 1 || 2 \u003d\u003d 3) (upozorenje ("TRUE!"););)

Logično ne -!

ako (! (1 \u003d\u003d 1)) (upozorenje ("FALSE!");););)

Ciklusi

Za

za (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]); }

Dok

Dok (istinito) (// ciklus beskonačnog upozorenja ("ovo se nikada neće zaustaviti!");) Var imena \u003d ["Sergey", "Andrey", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr", "Petr"]; Dok (imena.Length\u003e 0) (upozorenja (imena [I]);)

Učiniti dok

Učiniti (upozorenje ("ovo se nikada neće zaustaviti!");) Dok (istina) (// beskonačni ciklus

Žice

Tekst \u003d "Blah bla bla bla bla bla bla bla bla bla bla bla eric bla bla bla bla bla bla bla eric";

Podstrege.

Ponekad ne želite prikazati cijeli. Niz, samo dio toga. Na primjer, u vašem Gmail Inboxu možete postaviti da biste prikazali prvih 50 ili tako znakova svake poruke kako biste ih mogli pregledati. Ovaj pregled je a podvrstovanje Originalnog niza (cijela poruka).

"Neku reč" .Substring (X, Y) gdje je x tamo gdje počnete sjeckanje i y gdje završavate sjeckani izvorni niz.

Broj broj je malo čudan. Da biste odabrali za "HE" u "Zdravo", napisao biste ovo: "Zdravo". Podstreš (0, 2);

Zamislite lijevo od svakog karaktera, poput ovog: 0-H-1-E-2-L-3-L-4-O-5.

Ako nasjeckate na 0 i opet u 2, ostajete samo s njom.

Još primjera.:

1. prva 3 slova "batmana"
"Batman" .substring (0,3)

2. Od 4. do 6. slova "laptopa"
"Laptop" .substring (3.6)

• kako umetnuti skriptu u HTML dokument (opće informacije);
• komentari na JavaScript;
• kako proglasiti varijable i dati im prave imena;
• analiza skripte i sintaksa metoda;
• alert () metoda;
• korisna sitnica: "utikač" za privremeno ne radna veza

Od autora

U stvaranju web stranica postoji mnogo različitih suptilnosti. Ali postoje tri kitove. Ovo je HTML, CSS i JavaScript.

Preporučujem da organizujem samoobrazovanje na sledeći način: Čim HTML sintaksa i naučite da napravite primitivne stranice sa tekstom, slikama i tablicama, samo se povežite sa studijem CSS-a. Čim razumijete kako raditi sa CSS-om, počnite savladati JavaScript, paralelno sa "vokabularom" na sva tri jezika. Mislim da u pola godine možete izgraditi vrlo lijepu i funkcionalnu stranicu.

Nisam znao kako se približiti JavaScript-u. Bilo je udžbenika ili previše apstraktne - teorije, teorija i nije jasno kako da ga priložimo za vježbanje, ili, naprotiv, previše specifično: evo skupa gotovih recepata, uzimajući i koristite i kako sve okreće se - ne tvoja umiruća stvar.

Nekako sam dobio udžbenik Vadim Dunaev. Mnogi, znam, prihvatim ovaj vodič. Pored toga, preuzeo sam FROZO skenirani PDF, gdje bi umjesto "()" mogao biti, na primjer, "q", a latino pisma u kodovima se zamjenjuju (mjesta!) Slični Rusi, zbog čega ovi kodovi ne rade. Generalno sam morao da se uhvatim. I iskreno, ako prije nisam pročitao ništa o JavaScript-u, ne bih razumio ove greške i pridružio se broju psovki. Ali tada sam sjedio bez posla, bilo je vrijeme da prodrijete, i svidjelo mi se udžbenik. Ali vrlo je detaljan i dizajniran za ljude koji su došli u kontakt već sa programiranjem.

Napomena 2012.

Sada, nakon nekoliko godina, i tretiram ovaj udžbenik bez starog oduševljenja. Zastario je, "naoštren" pod IE je prilično površan; Postoje i prave pogreške i nepažnju, a neke korisne stvari nisu pronađene. Ali u poređenju s onim "vođe rajzvanih", koji je u izobilju izdao pretraživače, to je bilo nešto.

Dakle, želim pokušati ubiti dva zeca. Napišite nešto jasno za bilo koji čajnik i istovremeno konstruktivno-kognitivni. Tako da bi ovaj čajnik na temelju mojih savjeta mogao napisati pustiti jednostavan, ali potpuno originalni scenarij.

Umetnite u HTML dokument

Vjerovatno ste vidjeli takve oznake u HTML kodovima:

Ova Abrakadabra je između oznaka i postoji skripta.

Označiti se

Ovaj atribut nije obavezan. Vrijedno je koristiti ili da razjasni verziju jezika (JavaScript1.1, JavaScript1.2 itd.) Ili ako koristite drugi jezik (na primjer,

Tip atribut, koji označava tip teksta: tekst / JavaScript.. Pojavio se u verziji HTML 4.0. Preporučujem ga da ga koristi.

Prije prelaska na atribut src, saznajte koje particije HTML koda možete umetnuti skripte.

U bilo kojem. Ali s umom.

Često skripta ukazuje na povlačenje određenog teksta koji se ovdje zove i sada. Ova skripta je umetnuta direktno u , "U sceni."

Postoje skripte sa varijalnim oglasima koji se mogu koristiti u drugim skriptima na stranici, s funkcijama koje se mogu nazvati s bilo koje web lokacije HTML koda. Takve skripte su najobipodnije za postavljanje oznaka i .

Ali to možete učiniti da biste odmah koristili skriptu na više web stranica. Da biste to učinili, njegov kôd treba zabilježiti u zasebnoj datoteci s produžetkom .JS. (npr. myscript_1.js.). Oznake Više nije potrebno pisati u njemu.

A onda će nam pozvati scenarij sa web stranice, trebat će nam atribut src. Djeluje kao i sličan atribut oznake :

Dakle, ovo se nalazi na različitim stranicama, isti šešir ili meni snimljeni u datoteci skripte. Posebno pomaže o tim hostingu, gdje SSI ne prolazi.

Također možete umetnuti male skripte u neke atribute HTML oznaka, ali malo kasnije.

Ponekad se skripta mora postaviti na samom kraju. telo. ili čak nakon zatvaranja : Na primjer, ako nam treba, prije izvršavanja skripte, on istražuje sve veze ili sve slike u dokumentu. Ali o tome - i kasnije, kada saznamo JavaScript mehanizme. Možete oguliti.

Komentari

Kažu, još uvijek postoje takvi preglednici koji ne razumiju skripte. Korisnici Meyakiju koji su tako skloni sigurno onemogućim skripte. U ovoj situaciji, skripta se neće izvršiti, već i njegov kod, ista "Abrakadabra", jednostavno pada na ekran.

Dakle, tako da ne ispadamo, zaključujemo je u HTML komentarima.

Mmm ... i šta je ova dva kosa prije zatvaranja komentara?

Komentar zatvaranja već je u "tijelu" skripte. I javascript ne razumije ove kranijalne htmlove "za njega, za njega je strano tijelo koje stvara grešku. Dakle, morate sakriti ovu zatvaranju od skripte, stavljajući ga kao javascript komentar. JavaScript izgleda pomalo graciozno: //. Nakon tog skripta za potpis ne vidi držač za zatvaranje HTML-a, a HTML sigurno skriva tekst skripte, a na ekranu nije vidljivo "lijevo".

Budući da smo dotakli komentare, moram reći da u JavaScriptsu imaju dva oblika - isto kao i u C i C ++ (i usput u CSS-u).

// ovaj obrazac za komentar // Vrijedi samo na jednoj liniji, // koji je, na svaku novu liniju // morate postaviti znak za komentar. A ovo je kôd skripte ... / * I ovaj obrazac za komentar djeluje onoliko reda koliko dugo ne pumpa ikonu zatvaranja, ogledalo koje odražava početnu. * / A sada ponovo kod skripte ...

Ne zbunite HTML komentare i JavaScript komentare! Ovo su različiti jezici, iako su koegzistirani "u jednoj boci". Ili, tačnije, u jednoj banci. Poput pauka ...

Vratimo se na problem propadanja preglednika. Pretpostavimo, s JavaScript-om napravili ste nešto sa dvije slike nešto poput animiranog banera. Tada možete udovoljiti korisnicima "siromašnih" pretraživača (i vi, nadam se da nisu u potpunosti lišeni altruizma), izgled barem jedne od ovih slika uz pomoć oznake

Što urednici pišu skripte

Možda postoje neki posebni urednici za JavaScript. Nisam nikoga sreo i nisam izgledao previše. Obično se skripte pišu u istim urednicima koji se koriste za stvaranje web stranica. Na primjer, volim domaće. Pisanje skripte u ovim urednicima ne razlikuje se od pisanja u jednostavnoj bilježnici, osim za osvjetljenje koda. I ponekad mnogo pomaže. Preuzeo sam jednom kad sam skripta (na nekom njemačkom), a ne radi. Pogledao sam kod i vidio da je ključna riječ prebaciti Iz nekog razloga, nije dodijeljen. Izgledam - a nema prebaciti, ali switsch., Donner, Wetter! Uklonila sam bukve - i otišao.

Usput, u svim našim primjerima, kod izgleda upravo u prozoru za domovinu.

Iz sobe u kamenolomu

Sljedeći primjer je plagijarizam Dunaeva. Ali on je tako jednostavan i duboko da ne mogu odoljeti. Ovdje sam dodao samo neke detalje dizajna snimanja koji su u isto vrijeme objasnili i njihove.

Odmah vas upozoravam: Gotovo ovaj primer je apsolutno beskoristan. Ali koncentriše mnogo ključnih koncepata JavaScript jezika i njegovu sintaksu.

Zapravo skripta

Ako ovaj kôd kopirate u neto bilježnicu i spremite je kao file.html, a zatim kada otvorite datoteku, vidjet ćete sljedeće:

Zapitajmo se kako se izlazi.

Var X \u003d 5;

Ovdje proglašavamo varijablu x, što je jednako 5.

Stop! Znate li koja je varijabla?

Ako ne, kliknite ovo i pročitajte objašnjenje.

Kako radi računar? Svi podaci se spremaju na disku i mjesto gdje laže moraju biti označene da budu jasni gdje tražiti. Bilo koji program (i skripta nije ništa drugo nego mali program) radi s nekim podacima. Stoga je prikladno odmah "postići mjesto" za njih. Ovo mesto je ovo označena memorija A varijabla postaje. Zašto "varijabla"? Jer ovo područje može biti ispunjeno različitim vrijednostima. Na primjer, kada radimo s kalkulatorom, brojevima i akcijama s njima koje ulazimo s evidentiranim programom u odgovarajućim varijablama. A kad pritisnete tipku za izvršenje, algoritam koristi vrijednosti koje smo unijeli.

U programskom kodu, varijable su označene imenima koja sami izmišljaju za njih. Da biste stvorili imena, postoje određena pravila koja se mogu razlikovati na različitim programskim jezicima. Ta ograničenja koja će biti opisana u nastavku uključuju posebno na JavaScript.

var. - Ključna riječ za proglašavanje varijable (u engleskoj varijabli).

x. - Naziv varijable.

Ograničenja: Samo latino pisma (bilo koji registar), brojevi i simbol simbola mogu se koristiti u nazivu varijable. U ovom slučaju, varijabla ne bi trebala započeti brojevima. I nema praznina.

Nazivi desne varijable:

Netačna imena varijable:

JavaScript jezik je osjetljiv na registar.

myvar., Myvar. i myvar. - Različite varijable.

(Usput, o registru. Naziv jezika napisano je s velikim J i S: JavaScript. Postoji zabluda da je ova reč u HTML oznakama. Ali HTML nije osetljiv na Registar, tako da možete pisati, kao što molim. Navikla sam na malo, poput mog omiljenog domaćeg doma, nekoga - veliko.)

U ovoj skriptu varijabla odmah prilikom proglašenja dodijeljena je vrijednost. Nije obavezno. Vrijednost se može dodijeliti kasnije. Na kraju linije je tačka sa zarezom. To u ovom slučaju takođe nije potrebno. Ali u velikim i složenim skripti ponekad je važno, pa pokažem kompletan detaljni unos. Dunaev ima ovaj niz x \u003d 5., eksplicitna najava var. Ovdje također nije potrebno. Ali (imho) je i dalje po mogućnosti.

U sljedećem retku, kao što već možete pogoditi, procijenjena varijabla y.. Dobila joj je značenje već najavljenog x., 3 više od x..

A onda se način naziva metodom upozorenje ().

Ova metoda prikazuje dijaloški okvir sa porukom navedenom u zagradama. Ovo je sintaksa svih JavaScript metoda: naziv metode i nosača sa svojim sadržajem.

Sadržaj ove metode su vrijednost varijable y, a u dijaloškom okviru ćemo vidjeti osam. Razumijem zašto?

Korisne sitnice

Otkad smo se sreli sa metodom upozorenje (), a zatim evo njezine jednostavne i korisne primjene: ponekad neke stranice web stranice još nisu napravljene, a veze su već pripremljene. Neugodno je doći do "stranica 404". Također nije baš ugodno čekati dok se ne čine, a zatim saznaju da je odjeljak u razvoju. Uvijek kočim takve veze na sljedeći način:

"Javascript: upozorenje (" stranica u razvoju ");"\u003e Stavka izbornika

Usput, evo još jednog načina za implementaciju JavaScript koda u HTML kod. Ovdje je umetnut u atribut href. Referenca oznake i uvedena putem ključne riječi " javaScript:"(Sa debelim decembra i sledećim prostorom: uvek obratite pažnju na sintaktičku triviju). Obratite pažnju na tradicionalne dvostruke citate vrijednosti HTML atributa i "ugniježđenih" pojedinačnih citata u tekstu same skripte.

Vrlo brzo ćemo naučiti o posebnom atributu "događaja" HTML oznaka, na primjer, onclick.koji su posebno dizajnirani za uvođenje JavaScript koda i ne zahtijevaju ključnu riječ.

Dakle, naučili smo:

kako proglasiti skriptu u HTML dokumentu, koji obrasci imaju komentare JavaScript-a, kako izjaviti varijable i dati im tačna imena, kao i sintaksu metode i posebno upozorenja.

A takođe saznao: