Java skript obuka od nule. Osnove JavaScripta

JavaScript je programski jezik koji vašoj web stranici dodaje interaktivnost (na primjer igre, odgovori kada se pritisnu gumbi ili se podaci unose u obrasce, dinamički stil i animacija). Ovaj vam članak pomaže da počnete s ovim uzbudljivim jezikom i daje vam ideju o tome što je moguće.

Šta je zapravo JavaScript?

Važno : Ako niste pratili ostatak našeg kursa, preuzmite ovaj primjer koda i koristite ga kao početnu tačku.

Varijable Primjer objašnjenja varijableString Broj Boolean Niz Objekat

Niz teksta poznat kao string. Da biste označili da je vrijednost string, morate je staviti u navodnike.	neka myVariable = "Bob";
Broj. Brojevi nemaju navodnike oko sebe.	neka mojaVarijabla = 10;
Vrijednost Tačno/Netačno. Riječi true i false su posebne ključne riječi u JS-u i ne trebaju navodnike.	neka mojaVarijabla = istina;
Struktura koja vam omogućava pohranjivanje više vrijednosti u jednu referencu.	neka mojaVarijabla = ; Pozovite svakog člana niza ovako: myVariable, myVariable, itd.
U suštini, bilo šta. Sve u JavaScriptu je objekt i može se pohraniti u varijablu. Imajte ovo na umu dok učite.	neka mojaVariable = document.querySelector("h1"); Svi gore navedeni primjeri također.

Pa zašto su nam potrebne varijable? Pa, varijable su potrebne da bi se uradilo bilo šta zanimljivo u programiranju. Ako se vrijednosti ne mogu promijeniti, onda ne možete učiniti ništa dinamično, poput personalizacije pozdravne poruke ili promjene slike prikazane u galeriji slika.

Komentari

Možete staviti komentare u JavaScript kod, baš kao što možete u CSS:

/* Sve između je komentar. */

Ako vaš komentar ne sadrži prijelome redaka, često ga je lakše staviti iza dvije kose crte poput ove:

// Ovo je komentar

Operatorski događaji

Prava interaktivnost na web stranici zahtijeva događaje. Ovo su strukture koda koje osluškuju stvari koje se dešavaju u pretraživaču i pokreću kod kao odgovor. Najočigledniji primjer je klik događaj, koji pokreće pretraživač kada kliknete na nešto mišem. Da biste to demonstrirali, unesite sljedeće u svoju konzolu, a zatim kliknite na trenutnu web stranicu:

Document.querySelector("html").onclick = function() ( alert("Jao! Prestani me bockati!"); )

Postoji mnogo načina da priložite događaj elementu. Ovdje odabiremo element, postavljajući njegovo svojstvo rukovanja onclick jednakim anonimnoj (tj. bezimeni) funkciji, koja sadrži kod za koji želimo da se pokrene događaj klika.

Document.querySelector("html").onclick = function() ();

je ekvivalentno

Neka myHTML = document.querySelector("html"); myHTML.onclick = function()();

Samo je kraće.

Supercharging naše primjer web stranice

Sada smo prošli kroz nekoliko osnova JavaScripta, hajde da dodamo nekoliko sjajnih funkcija na našu stranicu za primjer da vidimo šta je moguće.

Dodavanje izmjenjivača slika

U ovom odeljku ćemo dodati dodatnu sliku na našu web lokaciju koristeći još neke DOM API funkcije, koristeći neki JavaScript za prebacivanje između njih kada se klikne na sliku.

Prije svega, pronađite drugu sliku koju biste željeli postaviti na svoju web stranicu. Budite sigurni da je iste veličine kao prva slika, ili što je bliže moguće.

Sačuvajte ovu sliku u folderu sa slikama.

Preimenujte ovu sliku u "firefox2.png" (bez navodnika).

Idite na datoteku main.js i unesite sljedeći JavaScript. (Ako je vaš "Hello world!" JavaScript još uvijek tu, izbrišite ga.) let myImage = document.querySelector("img"); myImage.onclick = function() ( neka mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") ( myImage.setAttribute("src","images/firefox2. png"); ) else ( myImage.setAttribute("src","images/firefox-icon.png"); ) )

Sačuvajte sve datoteke i učitajte index.html u pretraživač. Sada kada kliknete na sliku, trebalo bi da se promeni u drugu!

Ako zapnete, možete uporediti svoj rad s našim gotovim primjerom koda na GitHubu.

Jedva smo zagrebali površinu JavaScripta. Ako ste uživali u igranju i želite da napredujete još dalje, idite na našu temu za učenje JavaScripta.

Zdravo, dragi čitaoci. Dok neko očajnički traži nešto drugo da uštedi kako bi održao nivo blagostanja, pametni ljudi ulažu u sebe. Odavno su shvatili da znanje o tehnologiji može dobro zaraditi.

Kako tačno? Imam oko 100 članaka na blogu posvećenih tome. Na primjer, "" ili "". Šta reći o onima koji planiraju nešto ozbiljno? Poznavanje rada na računaru među stanovništvom raste, a time i količina edukativnog materijala. Ostaje samo pronaći najbolje.

Danas ćemo razgovarati o JavaScript lekcije za početnike. Poznavajući ovaj programski jezik, već možete tražiti klijente i zarađivati novac. Za neke će ovo biti sljedeći korak ka uspjehu u IT industriji.

Iz današnjeg članka saznat ćete gdje možete naučiti kodirati, dobiti savjet kako to učiniti što efikasnije i brže ili besplatno. Svaka osoba ima svoje prioritete, pa ću pokušati ispuniti svačije nade da će pronaći nešto korisno u ovoj publikaciji.

Suprotno običaju, neću se predugo motati po grmu. Ima puno informacija. Hajde da počnemo.

Besplatne JavaScript klase

Finansijsko pitanje za mnoge programere početnike je od najveće važnosti. Ovo je sasvim logično. Internet je prvobitno kreiran kao baza znanja u kojoj svako može pronaći informacije od interesa. “Zašto odjednom moram da platim?” sasvim je prirodno pitanje.

Nažalost, odgovor je i na ovo jednostavan – kvalitet. Premalo je talentovanih i nesebičnih ljudi u našoj zemlji koji su spremni da daju svoje vrijeme besplatno, ali nemojte se nervirati.

Srećom, postoje razne vrste promocija, bonusa i kurseva koji su kreirani kako bi se povećao PR programera. Malo poznate škole kreiraju materijale, ali su u početku, radi povratnih informacija i recenzija, spremne dati ih besplatno. Vi samo trebate doći na pravo mjesto i pronaći najbolje vrijeme za to. Uspio sam pronaći dobru opciju, koju sada rado dijelim sa vama.

Ako ne znate ništa o JS-u (ovo je svjetska skraćenica za JavaScript), mogu vam predložiti izbor videa sa YouTube-a. Ovo je uvodni kurs za učenje od nule, kreiran od strane online škole Huxlet.

Takođe možete dobiti kurs " Osnove programiranja» sa zadacima na službenoj web stranici kompanije. 17 sati obuke obuhvata 27 časova i 21 praktičnu vežbu.

Kada ste naučili osnove, možete prijeći na sljedeći korak " JS: priprema za rad" Pristup je također besplatan.

Naravno, ja lično nisam pohađao ovaj kurs, pa stoga ne mogu garantovati za kvalitet i reći vam o svim karakteristikama obuke. Huxlet se pojavio relativno nedavno i pozicionira se kao međunarodni tim stručnjaka koji obučava ljude od nule do profesionalnog nivoa.

Tekstovi na engleskom jeziku, kursevi, reference na poznate resurse kao što su Lifehacker i Habr ulijevaju povjerenje. Međutim, glavna prednost, po mom mišljenju, je to što je besplatan.

Možda će se malo kasnije kompanija moći dokazati, dokazati svoju važnost u ovom svijetu, pokazati nivo stručnjaka koje proizvodi i postići slavu, uspjeh i slično.

Ako ne želite da gubite vrijeme i toliko učite, možete “otkupiti” samo informacije vezane za JS: “JavaScript. Nivo jedan" i "JavaScript. Drugi nivo." Istina, mislim da ćete u ovom slučaju morati zaboraviti na staž. Ove informacije treba razjasniti sa programerima.

To je u osnovi to. Želim ti sve najbolje. Ne zaboravite da se pretplatite na moju VKontakte grupu kako biste saznali nešto više o zarađivanju novca na internetu. Do sljedećeg puta.

Prevod

Materijal, čiji prijevod danas objavljujemo, posvećen je osnovama JavaScripta i namijenjen je programerima početnicima. Takođe se može smatrati malom referentnom knjigom o osnovnim JS konstrukcijama. Ovdje ćemo posebno govoriti o sistemu tipova podataka, varijablama, nizovima, funkcijama, prototipovima objekata i nekim drugim karakteristikama jezika.

Primitivni tipovi podataka JavaScript ima sljedeće primitivne tipove podataka: broj, boolean, string, nedefiniran, null. Odmah treba napomenuti da kada radimo s primitivnim tipovima podataka, na primjer, string literalima, možemo pristupiti njihovim metodama i svojstvima čak i bez izvođenja eksplicitne konverzije. Poenta je u tome da kada pokušavaju da izvedu takve operacije, literali se automatski opremaju odgovarajućim omotačem objekata.▍Brojevi Postoji samo jedan tip broja u JavaScript-u - brojevi sa pomičnim zarezom dvostruke preciznosti. To dovodi do činjenice da su rezultati izračunavanja nekih izraza aritmetički netačni. Možda već znate da u JS-u vrijednost izraza 0,1 + 0,2 nije jednaka 0,3. Istovremeno, kada se radi sa cijelim brojevima, takvi problemi se ne primjećuju, odnosno 1 + 2 === 3.

JavaScript ima objekt Number, koji je omotač objekta numeričke vrijednosti. Objekti tipa Broj mogu se kreirati ili korištenjem naredbe kao što je var a = new Number(10) , ili se možete osloniti na automatsko ponašanje gore opisanog sistema. Ovo posebno omogućava pozivanje metoda pohranjenih u Number.prototype kada se primjenjuju na numeričke literale:

(123).toString(); //"123" (1.23).toFixed(1); //"1.2"
Postoje globalne funkcije dizajnirane za pretvaranje vrijednosti drugih tipova u numerički tip. To su parseInt(), parseFloat() i Number() konstrukcija, koja u ovom slučaju djeluje kao redovna funkcija koja vrši konverziju tipa:

ParseInt("1") //1 parseInt("text") //NaN parseFloat("1.234") //1.234 Number("1") //1 Broj("1.234") //1.234
Ako operacija s brojevima rezultira nečim što nije broj (tokom nekog izračunavanja, ili kada pokušavate nešto pretvoriti u broj), JavaScript neće ispustiti grešku, već će rezultat takve operacije predstavljati kao NaN vrijednost ( Nije broj, nije broj). Da biste provjerili je li vrijednost NaN, možete koristiti isNaN() funkciju.

JS aritmetičke operacije rade na vrlo poznat način, ali morate obratiti pažnju na činjenicu da + operator može izvršiti i sabiranje brojeva i spajanje nizova.

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

▍Strings Stringovi u JavaScriptu su sekvence Unicode znakova. Literali stringova se kreiraju zatvaranjem teksta koji treba da bude sadržan u dvostrukim navodnicima ("") ili jednostrukim navodnicima (""). Kao što je već spomenuto, kada radimo sa string literalima, možemo se osloniti na odgovarajući omotač objekta, čiji prototip ima mnogo korisnih metoda, uključujući substring(), indexOf(), concat().

"text".substring(1,3) //ex "text".indexOf("x") //2 "text".concat(" end") //tekst kraj
Stringovi, kao i druge primitivne vrijednosti, su nepromjenjivi. Na primjer, metoda concat() ne modificira postojeći niz, već kreira novi.

▍Boolean vrijednosti Boolean tip podataka u JS-u je predstavljen sa dvije vrijednosti - true i false. Jezik može automatski pretvoriti različite vrijednosti u Boolean tip podataka. Dakle, pored logičke vrijednosti false, sljedeće vrijednosti su null, undefined, "" (prazan niz), 0 i NaN. Sve ostalo, uključujući sve objekte, su prave vrijednosti. Tokom Booleovih operacija, sve što se smatra istinitim pretvara se u true , a sve što se smatra netačnim pretvara se u false . Pogledajte sljedeći primjer. U skladu sa gornjim principima, prazan string će biti konvertovan u false i kao rezultat izvršavanja ovog koda, red This is false će se pojaviti u konzoli.

Neka tekst = ""; if(tekst) ( console.log("Ovo je istina"); ) else ( console.log("Ovo je netačno"); )

Objekti Objekti su dinamičke strukture sastavljene od parova ključ/vrijednost. Vrijednosti mogu biti primitivni tipovi podataka, objekti ili funkcije.

Objekti se najlakše kreiraju korištenjem sintakse literala objekta:

Neka obj = ( poruka: "Poruka", doSomething: function() () )
Svojstva objekta mogu se čitati, dodavati, uređivati i brisati u bilo kojem trenutku. Evo kako se to radi:

Čitanje svojstava: object.name, object .
Upisivanje podataka u svojstva (ako svojstvo kojem se pristupa ne postoji, dodaje se novo svojstvo sa navedenim ključem): ime objekta = vrijednost, objekt = vrijednost.
Brisanje svojstava: delete object.name , delete object .

Evo nekoliko primjera:

Neka obj = (); // kreiranje praznog objekta obj.message = "Poruka"; // dodavanje novog svojstva obj.message = "Nova poruka"; // uređivanje svojstva delete object.message; // brisanje svojstva
Objekti u jeziku su implementirani kao hash tablice. Jednostavnu hash tablicu možete kreirati pomoću naredbe Object.create(null):

Neka francuski = Object.create(null); francuski["yes"] = "oui"; francuski["no"] = "ne"; francuski["da"];//"oui"
Ako trebate učiniti objekt nepromjenjivim, možete koristiti naredbu Object.freeze().

Za ponavljanje kroz sva svojstva objekta, možete koristiti naredbu Object.keys():

Funkcija logProperty(name)( console.log(name); //ime svojstva console.log(obj); //vrijednost svojstva ) Object.keys(obj).forEach(logProperty);

▍Poređenje vrijednosti primitivnih tipova i objekata Kada praktičan rad Uz primitivne vrijednosti, možete ih, kao što je već rečeno, percipirati kao objekte koji imaju svojstva i metode, iako nisu objekti. Primitivne vrijednosti su nepromjenjive, a interna struktura objekata se može promijeniti.

Kada koristite ključnu riječ var, možete deklarirati varijablu i, ako je potrebno, inicijalizirati je određenom vrijednošću. Ako varijabla nije inicijalizirana, njena vrijednost je nedefinirana. Varijable deklarirane pomoću ključne riječi var imaju funkcionalni opseg.

Let ključna riječ je vrlo slična var , razlika je u tome što varijable deklarirane s ključnom riječi let imaju opseg bloka.

Varijable deklarirane pomoću ključne riječi const također imaju opseg bloka, koji bi se, s obzirom na to da vrijednosti takvih varijabli ne mogu mijenjati, pravilnije nazvati „konstante“. Ključna riječ const, koja zamrzava vrijednost varijable deklarirane pomoću nje, može se uporediti sa metodom Object.freeze() koja zamrzava objekte.

Ako je varijabla deklarirana izvan funkcije, njen opseg je globalan.

Nizovi Nizovi u JavaScriptu se implementiraju pomoću objekata. Kao rezultat toga, kada govorimo o nizovima, zapravo govorimo o objektima sličnim nizu. Možete raditi sa elementima niza koristeći njihove indekse. Numerički indeksi se pretvaraju u nizove i koriste kao imena za pristup vrijednostima elemenata niza. Na primjer, konstrukcija kao što je arr je slična konstrukciji kao što je arr["1"] , i obje će dati pristup istoj vrijednosti: arr === arr["1"] . Na osnovu gore navedenog, jednostavan niz deklariran sa let arr = ["A", "B", "C"] je predstavljen kao objekat otprilike ovako:

("0": "A", "1": "B", "2": "C")
Uklanjanje elemenata iz niza pomoću naredbe delete ostavlja rupe u njemu. Da biste izbjegli ovaj problem, možete koristiti naredbu splice(), ali je spora jer, nakon uklanjanja elementa, pomiče preostale elemente niza, zapravo, pomjerajući ih na početak niza, ulijevo.

Neka arr = ["A", "B", "C"]; delete arr; console.log(arr); // ["A", prazno, "C"] console.log(arr.length); // 3
Metode niza olakšavaju implementaciju struktura podataka kao što su stogovi i redovi:

// stack neka stack = ; stack.push(1); // stack.push(2); // neka traje = stack.pop(); // console.log(last); // 2 // red pusti queue = ; queue.push(1); // queue.push(2); // neka prvi = queue.shift();// console.log(first); // 1

Funkcije Funkcije u JavaScript-u su objekti. Funkcije se mogu dodijeliti varijablama, pohraniti u objekte ili nizove, proslijediti kao argumenti drugim funkcijama i vratiti iz drugih funkcija.

Postoje tri načina za deklarisanje funkcija:

Klasična deklaracija funkcije (Deklaracija funkcije ili Naredba funkcije).
Korištenje funkcijskih izraza, koji se također nazivaju literali funkcije.
Korištenje sintakse funkcije strelice.

▍Klasična deklaracija funkcije Sa ovim pristupom deklaraciji funkcije važe sljedeća pravila:

Prva ključna riječ na liniji deklaracije funkcije je funkcija.
Funkcija mora dobiti ime.
Funkcija se može koristiti u kodu prije njene deklaracije zbog mehanizma podizanja deklaracije funkcije na vrh opsega u kojem je deklarirana.

Evo kako izgleda klasična deklaracija funkcije:

Funkcija doSomething()()

▍Izrazi funkcije Kada koristite izraze funkcije, uzmite u obzir sljedeće:

Ključna riječ funkcije više nije prva riječ u redu deklaracije funkcije.
Ime funkcije je opciono. Moguće je koristiti i anonimne i imenovane izraze funkcije.
Naredbe za pozivanje takvih funkcija moraju slijediti naredbe za njihovo deklariranje.
Takva funkcija se može pokrenuti odmah nakon njene deklaracije, koristeći IIFE (Immediately Invoked Function Expression) sintaksu.

Izraz funkcije izgleda ovako:

Neka uradi nešto = function()()

▍Funkcije sa strelicama Funkcije sa strelicama se u suštini mogu smatrati „sintaksičkim šećerom“ za kreiranje anonimnih izraza funkcije. Treba napomenuti da takve funkcije nemaju svoje entitete this i argumente. Deklaracija funkcije strelice izgleda ovako:

Neka uradi nešto = () = > ();

▍Načini pozivanja funkcija Funkcije se mogu pozvati na različite načine. Normalni poziv funkcije doSomething(arguments) Pozivanje funkcije kao metode objekta theObject.doSomething(arguments) theObject["doSomething"](arguments) Pozivanje funkcije kao konstruktora. novo doSomething(argumenti) Pozivanje funkcije pomoću metode apply() doSomething.apply(theObject, ) doSomething.call(theObject, argumenti) Pozivanje funkcije pomoću metode bind() neka doSomethingWithObject = doSomething.bind(theObject); doSomethingWithObject();
Funkcije se mogu pozvati s više ili manje argumenata od broja parametara koji su specificirani kada su deklarirani. Tokom rada funkcije, “dodatni” argumenti će jednostavno biti zanemareni (iako će funkcija imati pristup njima), parametri koji nedostaju će dobiti vrijednost nedefinirana.

Funkcije imaju dva pseudoparametra: this i argumente.

▍Ključna riječ this Ova ključna riječ predstavlja kontekst funkcije. Vrijednost na koju ukazuje ovisi o tome kako je funkcija pozvana. Evo vrijednosti koje ova ključna riječ uzima, ovisno o tome kako se funkcija zove (one su, uz primjere koda, konstrukcije iz kojih se ovdje koriste, opisane iznad):

Normalni poziv funkcije je window / undefined.
Pozivanje funkcije kao metode objekta - theObject.
Pozivanje funkcije kao konstruktora je novi objekat.
Pozivanje funkcije pomoću metode apply() - theObject.
Pozivanje funkcije pomoću metode bind() - theObject.

▍Ključna riječ arguments Ključna riječ arguments je pseudoparametar koji daje pristup svim argumentima korištenim u pozivu funkcije. Izgleda kao niz, ali nije niz. Konkretno, nema metode niza.

Funkcija reducira toSum(ukupno, vrijednost)( vrati ukupno + vrijednost; ) funkcija sum())( neka args = Array.prototype.slice.call(arguments); vrati args.reduce(reduceToSum, 0); ) sum(1,2 , 3);
Alternativa ključnoj riječi arguments je nova sintaksa za preostale parametre. U sljedećem primjeru, args je niz koji sadrži sve što je proslijeđeno funkciji kada je pozvana.

Funkcija sum(...args)( return args.reduce(reduceToSum, 0); )

▍Return Statement Funkcija koja ne sadrži return naredbu će vratiti nedefiniranu. Kada koristite ključnu riječ return, obratite pažnju na to kako funkcionira mehanizam automatskog umetanja točke i zareza. Na primjer, sljedeća funkcija neće vratiti prazan objekt, već nedefiniranu vrijednost:

Funkcija getObject() ( return ( ) ) getObject()
Kako bi se izbjegao takav problem koji se otvara vitičasta zagrada mora biti postavljen u isti red kao i return izjava:

Funkcija getObject() ( return ( ) )

Dinamičko kucanje JavaScript je dinamički kucani jezik. To znači da konkretne vrijednosti imaju tipove, ali varijable nemaju. Tokom izvršavanja programa, vrijednosti se mogu upisati u istu varijablu različite vrste. Evo primjera funkcije koja radi s vrijednostima različitih tipova:

Funkcija log(value)( console.log(value); ) log(1); log("tekst"); log((poruka: "tekst"));
Da biste saznali tip podataka pohranjenih u varijabli, možete koristiti typeof() operator:

Neka je n = 1; typeof(n); //broj let s = "tekst"; typeof(s); //string neka fn = function() (); typeof(fn); //funkcija

Jednonitni model izvršavanja JavaScript runtime je jednonitni. To se posebno ogleda u nemogućnosti istovremeno izvršenje dvije funkcije (ako ne uzmete u obzir mogućnost asinhronog izvršavanja koda, koje se ovdje ne dotičemo). Izvršno okruženje ima nešto što se zove red događaja koji pohranjuje listu poslova koje je potrebno obraditi. Kao rezultat toga, jednonitna JS šema izvršavanja nema problem zastoja resursa, tako da nema potrebe za mehanizmom zaključavanja. Međutim, kod koji ulazi u red događaja mora se brzo izvršiti. Ako preopterećujete glavnu nit u aplikaciji pretraživača teškim radom, stranica aplikacije neće odgovoriti na unos korisnika i pretraživač će od vas zatražiti da zatvorite ovu stranicu. Upravljanje izuzecima JavaScript ima mehanizam za rukovanje izuzecima. Radi po principu koji je sasvim uobičajen za takve mehanizme: kod koji može uzrokovati grešku piše se pomoću konstrukcije try/catch. Sam kod je u bloku try, greške se obrađuju u bloku catch.

Zanimljivo je napomenuti da ponekad JavaScript, kada dođe do hitnih situacija, ne proizvodi poruke o grešci. To je zbog činjenice da JS nije izbacivao greške sve do usvajanja ECMAScript 3 standarda.

Na primjer, u sljedećem isječku koda, pokušaj izmjene zamrznutog objekta neće uspjeti, ali neće biti izbačen izuzetak.

Neka obj = Object.freeze(); obj.message = "tekst";
Neke od "tihih" JS grešaka se pojavljuju u strogom načinu rada, možete ih omogućiti korištenjem "use strict" konstrukcije; .

Prototipski sistem Prototipni sistem je u osnovi JS mehanizama kao što su funkcije konstruktora, naredba Object.create() i ključna riječ class.
Razmotrite sljedeći primjer:

Neka usluga = ( doSomething: function() () ) let specializedService = Object.create(service); console.log(specializedService.__proto__ === usluga); //istinito
Ovdje je naredba Object.create() korištena za kreiranje objekta specializedService čiji je prototip trebao biti objekt usluge. Kao rezultat toga, ispada da se metoda doSomething() može pozvati pristupanjem objektu specializedService. Dodatno, to znači da svojstvo __proto__ objekta specializedService ukazuje na objekt usluge.

Kreirajmo sada sličan objekat koristeći ključnu riječ class:

Class Service ( doSomething() ) class SpecializedService proširuje Service () neka specializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype);
Metode deklarirane u klasi Service će biti dodate objektu Service.prototype. Instance klase Service će imati isti prototip (Service.prototype). Sve instance će delegirati pozive metoda objektu Service.prototype. Kao rezultat toga, ispada da su metode deklarirane samo jednom, u Service.prototype , nakon čega ih "naslijeđuju" sve instance klase.

▍Lanac prototipa Objekti mogu biti “nasljednici” drugih objekata. Svaki objekat ima prototip čije su mu metode dostupne. Ako pokušate pristupiti svojstvu koje nije u samom objektu, JavaScript će ga početi tražiti u lancu prototipa. Ovaj proces će se nastaviti sve dok se ne pronađe svojstvo ili dok pretraga ne dođe do kraja lanca O funkcionalnom programiranju u JavaScript-u U JavaScriptu, funkcije su prvoklasni objekti, jezik podržava mehanizam za zatvaranje. Ovo otvara put implementaciji tehnika funkcionalnog programiranja u JS. Konkretno, govorimo o mogućnosti korištenja funkcija višeg reda.

Zatvaranje je unutrašnja funkcija koja ima pristup varijablama deklariranim unutar roditeljske funkcije, čak i nakon što se roditeljska funkcija izvrši.

Funkcija višeg reda je funkcija koja može uzeti druge funkcije kao argumente, vratiti funkcije ili učiniti oboje.

Funkcionalno programiranje u JS-u obrađeno je u mnogim publikacijama. Ako ste zainteresovani, evo nekoliko materijala posvećenih ovoj temi

Pozdrav svima, sada je vrijeme da vi i ja naučimo osnove JavaScripta, jer je JavaScript tehnologija pomoću koje možete organizirati dinamičke HTML stranice na vašoj web stranici.

Bilješka. Ova lekcija je prvenstveno namenjena onim korisnicima koji razumeju opšte principe programiranja, a takođe poznaju osnove HTML-a. Ako ne znate šta su oznake ol i li, bolje je da se prvo upoznate sa HTML osnove. TTakođe, ako ne znate šta je ovo ako...onda...drugo konstrukcija (ovo je opšti pogled), preporučujem da naučite opšte principe programiranja, bez obzira na programski jezik. Samo u ovom slučaju možete početi učiti JavaScript. I ova lekcija će vam biti što korisnija.

Osnove JavaScripta - teorija

I počnimo, kao i obično, sa osnovama, tj. sa definicijom, šta je JavaScript? JavaScript je skriptni programski jezik čiji se kod izvršava na strani klijenta ( korisnik). Obično se koristi za organiziranje dinamičkih HTML stranica na web stranici, bez ponovnog učitavanja same stranice, tj. bez kontaktiranja servera.

Zašto je potreban JavaScript?

Zašto tražite organiziranje dinamičkih stranica?

Prvo, lijep je, udoban i moderan.

Drugo, da biste napravili bilo kakvu promjenu na stranici, potrebno je ponovo učitati stranicu, dok će resursi biti uzeti sa servera, a sada zamislite da imate posjećenu stranicu i ima puno takvih zahtjeva, vaš server će jednostavno biti preopterećen. A pošto je JavaScript tehnologija na strani klijenta, nisu potrebni pozivi servera. Cijeli JavaScript program će se izvršiti direktno na vašem računaru ili na računaru korisnika koji je posjetio vašu stranicu.

Hajde sada da razgovaramo konkretnije o tome za šta možete koristiti JavaScript na svojoj veb lokaciji? Na primjer, za dinamički padajući izbornik ili pojavljivanje i nestanak nekih kontrola. Općenito, možete učiniti gotovo sve.

Hajde da sada razumemo principe ovog programskog jezika. JavaScript nije jako kucani programski jezik. Ne morate stavljati tačku i zarez na kraju svakog reda, ali je bolje da je stavite kako biste bolje razumjeli i sami pročitali kod, ali ako ste odjednom zaboravili staviti tačku i zarez, onda neće biti greške, za razliku od, na primjer, PHP jezika.

U procesu generisanja HTML stranice od strane pretraživača, sam pretraživač ne samo da je prikazuje, već i formira takozvano stablo elemenata koje se sastoji od čvorova. Svaki čvor se formira na osnovu HTML koda. Na osnovu svega rečenog, možemo reći da JavaScript može promijeniti ovo stablo i shodno tome promijeniti sam HTML kod, a kao rezultat toga promijeniti prikaz HTML stranice u pretraživaču. Pod promjenom stabla elemenata podrazumijevamo i promjenu pojedinih čvorova i brisanje ili dodavanje tih istih čvorova. Da bi bilo jasnije, čvor se formira na osnovu elemenata u HTML-u, drugim riječima, tagova ili samog sadržaja, tj. tekst. Na primjer, sljedeći HTML kod se može prikazati kao stablo elemenata.

HTML kod:

zdravo

Čvorovi ovog koda:

Root node – html

Podređeni čvor HTML čvora - tijelo

Podređeni čvor čvora tijela – str

Podređeni čvor čvora p je sam tekst ( tekst je zaseban čvor, to se mora zapamtiti prilikom dodavanja, brisanja i mijenjanja teksta).

Nadam se da je ovo jasno, pređimo direktno na sintaksu i pisanje prvih programa u JavaScript-u.

U početku mi se činilo da je JavaScript vrlo sličan jeziku na strani servera PHP programiranje, ali to je samo u nekim konstrukcijama i, usput rečeno, slično je i samo programskom jeziku JAVA, ali je zapravo pisanje nekoliko konstrukcija i imenovanje ovih jezika slično, ali inače, znači u principi programiranja, to su dvije različite stvari. Inače, JavaScript ni na koji način nije povezan sa JAVA jezikom, makar samo po imenu, tako da nemojte brkati JavaScript - to je jedan programski jezik, a Java potpuno drugi. Ali zašto se zvao JavaScript? Da, jer u vreme kada je JavaScript razvijen, jezik Java je bio veoma popularan, pa su JavaScript programeri odlučili da svoj jezik preimenuju u LiveScript ( tako se prvobitno zvao) u JavaScript-u, a također je promijenio pisanje osnovnih konstrukcija sličnih Javi. Inače, JavaScript se zvanično zove ECMAScript, postoji standard istog imena. Ovo je da bi se izbjegli problemi sa vlasnicima žiga Java. Dakle, JavaScript i JAVA su potpuno dva različita programska jezika. Zašto je ime JavaScript svima na usnama? Da, jer su jednostavno navikli na to, a svi jezik ECMAScript nazivaju JavaScript jezikom.

Primjer JavaScript koda

Dosta je lirske digresije od suštine našeg pitanja, pređimo na to kako možemo promijeniti te iste čvorove u ovom stablu. Kao i obično, to ćemo učiniti na primjeru. U nastavku imamo malu listu kako to možemo dodati ( ili izbrisati) još nekoliko značenja? Pokušajte da kliknete na „Dodaj na listu“ i otvoriće se prozor za unos, unesite naziv nove stavke i kliknite na OK. Hajde da saznamo kako se sve ovo dešava.

Sam primjer:

Prva linija

Druga linija

Treća linija

JavaScript kod:

//pišemo funkciju za dodavanje nove stavke u listu funkcija addLi() ( var stroka = prompt("Unesite naziv linije:", "");//da unesete naziv nove linije ako ( stroka)( var ol = document.getElementById (" spisokst");//pronađi našu listu var li = document.createElement("LI");//kreiraj novi element liste ol.appendChild(li);//dodijeli novi element na našoj listi var text = document.createTextNode(stroka) ;//kreirajte novi tekst čvora li.appendChild(text);//dodijelite ovaj tekst našoj novoj stavci liste ) ) //napišite funkciju za brisanje stavki iz funkcija liste deleteLi() ( var ol = document.getElementById ("spisokst"); //pronađimo našu listu var lastLi = ol.lastChild;//kreirajmo varijablu i pohranimo zadnji element naše liste u nju //provjerimo prisutnost našeg elementa, isključujući razmake, tabove i komentare dok (lastLi && lastLi.nodeType != 1)( lastLi = lastLi.previousSibling; ) if (lastLi)( lastLi.parentNode.removeChild(lastLi);//ukloni listu; stavka, //ako je naravno još nešto ostalo na listi) )

HTML kod:

Prva linija

Druga linija

Treća linija

Dodaj na listu

Ukloni sa liste

Napisao sam komentare u samom kodu, tako da mislim da ne bi trebalo biti problema s tim čemu služi. Ali ipak ću objasniti opštu sliku.

Imamo određenu listu označenu id = spisokst, da bismo je lakše pronašli, iz JavaScript-a. Zatim pišemo dvije funkcije u javascriptu:

1. addLi() – za dodavanje novih redova.

U funkciji addLi, tražimo od korisnika da unese ime novog stringa pomoću ugrađene prompt funkcije i stavi ovo ime u varijablu stroka ( kao što ste verovatno već shvatili, varijable se deklarišu pomoću operatora var).

Zatim, koristeći metodu getElementById objekta dokumenta, nalazimo ID liste koji nam je potreban.

Zatim, koristeći metodu createElement istog objekta dokumenta, kreiramo LI element ( Vjerovatno ste primijetili da se prilikom kreiranja elementa njegovo ime piše velikim slovima).

Zatim kreiramo novi tekstualni čvor i prosljeđujemo mu vrijednost koju je korisnik unio u našu stroka varijablu.

I opet dodjeljujemo, samo elementu li, njegovu novu vrijednost ( ili njegov podređeni čvor, tj. tekst) koristeći metodu appendChild.

2. deleteLi() – za brisanje ovih redova.

Ovdje također nalazimo našu listu koristeći metodu document.getElementById i prosljeđujemo joj spisokst vrijednost.

Zatim kreiramo novu varijablu lastLi i dodijelimo joj vrijednost posljednja tačka na našoj listi (ol.lastChild).

Ovdje postoji mali problem, prema standardu, kada se generira HTML stranica, svi razmaci, tabovi i komentari u HTML kodu se uzimaju u obzir, ali se ne prikazuju na ekranu, pa zapamtite, kada pristupate posljednjim elementima čvora, tamo može biti razmak, tab ili komentari, tako da se rezultat može neznatno razlikovati od stvarnog, na primjer, da nisam ovo uzeo u obzir ovdje, moje stavke na listi bi bile izbrisane nakon jedan ili, u nekim slučajevima, nakon dva klika na „ Ukloni sa liste"i da bih ovo izbegao, proverio sam šta je bilo u poslednjem čvoru. Ako ovo još nije jasno, ne morate se sjetiti :)

3. Napominjem da je funkcionalnost dugmadi također implementirana u javascript obradom događaja, na primjer, kada kliknete (događaj - onClick="javascript:addLi()") na dugme " Dodaj na listu" funkcija addLi() se pokreće, a kada kliknete na dugme " Ukloni sa liste» funkcija deleteLi() je pokrenuta. Ostalo je urađeno za vizuelne efekte, ne morate ga još pamtiti. Na primjer, događaj onmouseover znači da će se nešto dogoditi kada se mišem pređe.

Nadam se da vam je današnja lekcija bila korisna i zanimljiva, u narednim lekcijama ćemo pogledati složenije primjere.

JavaScript je kreirao programer Brendan Eich iz Netscapea i uveden u decembru 1995. godine pod imenom LiveScript. Vrlo brzo je preimenovan u JavaScript, iako je službeni naziv za JavaScript ECMAScript. ECMAScript razvija i održava međunarodna organizacija ECMA (European Computer Manufacturers Association).

Šta je JavaScript?
1) JavaScript je skriptni ili skriptni jezik. Skripta je programski kod - skup instrukcija koji ne zahtijeva prethodnu obradu (na primjer, kompilaciju) prije pokretanja. JavaScript kod se tumači od strane pretraživača dok se web stranica učitava. Interpretator pretraživača vrši analizu, obradu i izvršavanje red-po-linije originalni program ili zahtjev.

2) JavaScript je objektno orijentisani jezik sa prototipskim nasleđem. Podržava nekoliko ugrađenih objekata i također vam omogućava da kreirate ili izbrišete vlastite (prilagođene) objekte. Objekti mogu naslijediti svojstva direktno jedni od drugih, formirajući lanac objekt-prototip.

JavaScript na web stranicama 1. Povezivanje skripti sa HTML dokumentom

JavaScript skripte mogu biti inline, tj. njihov sadržaj je deo dokumenta, a eksterni se čuvaju u posebnom fajlu sa ekstenzijom .js. Skripte se mogu ugraditi u HTML dokument na sljedeće načine:

ili tijelo stranice.

Ova metoda se obično koristi za velike skripte ili skripte koje se koriste više puta na različitim web stranicama.

Kao obrađivač događaja.
Svaki html element ima JavaScript događaje koji se aktiviraju u određenom trenutku. Morate dodati traženi događaj u html element kao atribut i navesti potrebnu funkciju kao vrijednost ovog atributa. Funkcija koja se poziva kao odgovor na pokretanje događaja je rukovalac događaja. Kada se događaj pokrene, kod koji je povezan s njim će se izvršiti. Ova metoda se uglavnom koristi za kratke skripte, na primjer, možete postaviti boju pozadine da se promijeni kada kliknete na dugme:

var colorArray = ["#5A9C6E", "#A8BF5A", "#FAC46E", "#FAD5BB", "#F2FEFF"]; // kreiramo niz sa bojama pozadine var i = 0; funkcija changeColor())( document.body.style.background = colorArray[i]; i++; if(i > colorArray.length - 1)( i = 0; ) ) Promjena pozadine

Unutar elementa.
Element se može umetnuti bilo gdje u dokumentu. Unutar oznake je kod koji se izvršava odmah nakon što ga čitač pročita, ili sadrži opis funkcije koja se izvršava u trenutku kada je pozvana. Opis funkcije se može postaviti bilo gdje, glavna stvar je da je do trenutka kada je pozvana, kod funkcije već učitan.

Obično JavaScript kod postavljen u zaglavlje dokumenta (element) ili iza početne oznake. Ako se skripta koristi nakon što je stranica učitala, na primjer, kod brojača, onda je bolje da je postavite na kraj dokumenta:

document.write("Unesite svoje ime");

2. Tipovi podataka i varijable u JavaScript-u

Računari obrađuju informacije—podatke. Podaci se mogu predstaviti u različitim oblicima ili tipovima. Većina JavaScript funkcionalnosti implementirana je kroz jednostavan skup objekata i tipova podataka. Funkcionalnost niza, broja i logike zasnovana je na nizovima, numeričkim i logičkim tipovima podataka. Ostalo funkcionalnost, uključujući regularne izraze, datume i matematičke operacije, radi se pomoću objekata RegExp, Date i Math.

Literali u JavaScriptu su posebna klasa tipa podataka, fiksne vrijednosti jednog od tri tipa podataka - string, numerički ili boolean:

"ovo je niz" 3.14 true alert("Zdravo"); // "Zdravo" je literal var myVariable = 15; // 15 je literal

Primitivni tip podataka je instanca specifičnog tipa podataka kao što je string, numerički, boolean, null i nedefinisan.

2.1. Varijable u JavaScript-u

Podaci koje obrađuje JavaScript skripta su varijable. Varijable su imenovani kontejneri koji pohranjuju podatke (vrijednosti) u memoriju računara koji se mogu promijeniti tokom izvršavanja programa. Varijable imaju ime, tip i vrijednost.

Ime varijable, ili identifikator, može uključivati samo slova a-z, A-Z, brojevi 0-9 (broj ne može biti prvi znak u imenu varijable), simbol $ (može biti samo prvi znak u nazivu varijable ili funkcije) i znak donje crte _, razmaci nisu dozvoljeni. Dužina imena varijable nije ograničena. Moguće je, ali nije preporučljivo, imena varijabli pisati slovima ruskog alfabeta, za to moraju biti napisana u Unicode-u.

Ne možete koristiti JavaScript ključne riječi kao ime varijable. Imena varijabli u JavaScript-u razlikuju velika i mala slova, što znači da varijabla var message; i var Poruka; - različite varijable.

Varijabla se kreira (deklarira) pomoću ključne riječi var iza koje slijedi ime varijable, na primjer, poruka var; . Morate deklarirati varijablu prije nego što je koristite.

Varijabla se inicijalizira vrijednošću pomoću operatora dodjele = , na primjer, var message="Hellow"; , tj. kreira se varijabla poruke iu njoj se pohranjuje njena početna vrijednost "Hello". Varijabla se može deklarirati bez vrijednosti, u kom slučaju joj se dodjeljuje zadana vrijednost undefined. Vrijednost varijable se može promijeniti tokom izvršavanja skripte. Različite varijable se mogu deklarisati u istom redu, odvojene zarezom:

Var message="Hello", number_msg = 6, time_msg = 50;

2.2. Varijabilni tipovi podataka

JavaScript je netipizirani jezik; tip podataka za određenu varijablu nije potrebno specificirati kada je deklarirate. Tip podataka varijable ovisi o vrijednostima koje prihvaća. Tip varijable se može promijeniti tokom operacija sa podacima (dinamičko uvođenje tipa). Konverzije tipa se izvode automatski ovisno o kontekstu u kojem se koriste. Na primjer, u izrazima koji uključuju numeričke i nizove vrijednosti sa + operatorom, JavaScript pretvara numeričke vrijednosti u vrijednosti niza:

Var poruka = 10 + "dana prije odmora"; // će vratiti "10 dana do odmora"

Možete dobiti tip podataka varijable koristeći typeof operator. Ovaj operator vraća string koji identifikuje odgovarajući tip.

Typeof 35; // vraća "number" typeof "text"; // vraćamo "string" typeof true; // vraća "boolean" typeof ; // vraćamo "object" typeof undefined; // će vratiti "undefined" typeof null; // vrati "objekat"

Svi tipovi podataka u JavaScript-u podijeljeni su u dvije grupe - jednostavni tipovi podataka (primitivni tipovi podataka) i kompozitni tipovi podataka (kompozitni tipovi podataka).

Jednostavni tipovi podataka uključuju nizove, numeričke, logičke, null i podfinjene.

2.2.1. Vrsta stringa

Koristi se za pohranjivanje niza znakova zatvorenih u dvostruke ili jednostruke navodnike. Prazan skup znakova zatvoren u jednostruke ili dvostruke navodnike je prazan niz. Broj stavljen u navodnike je takođe niz.

Var money = ""; // prazan niz, nula znakova var work = "test"; var day = "Nedjelja"; var x = "150";

Možete uključiti jedan navodnik unutar niza sa dvostrukim navodnicima i obrnuto. Znak navodnika istog tipa se izbjegava korištenjem obrnute kose crte \ (naziva se escape sekvenca):

Document.writeln("\"Dobro jutro, Ivane Ivanoviču!\"\n"); // će prikazati "Dobro jutro, Ivane Ivanoviču!"

Stringovi se mogu porediti i kombinovati pomoću operatora konkatenacije +. Zahvaljujući automatskom ubacivanju tipova, možete kombinovati brojeve i nizove. Stringovi su trajni, kada se string jednom kreira ne može se mijenjati, ali se može kreirati nova linija spajanjem drugih nizova.

2.2.2. Numerički tip (broj)

Koristi se za numeričke vrijednosti. Postoje dvije vrste brojeva u JavaScriptu: cijeli brojevi (cijeli broj) i brojevi s pomičnim zarezom (broj s pomičnim zarezom). Cjelobrojne vrijednosti mogu biti pozitivne, kao što su 1, 2, negativne, kao što je –1, –2 ili nula. 1 i 1.0 su iste vrijednosti. Većina brojeva u JavaScript-u je napisana decimalno, ali se mogu koristiti i oktalni i heksadecimalni sistemi.

U decimalnom sistemu, vrijednosti numeričkih varijabli su navedene pomoću arapskih brojeva 1, 2, 3, 4, 5, 6, 7, 8, 9, 0.

U oktalnom formatu, broj je niz koji sadrži cifre od 0 do 7, počevši od prefiksa 0.

Za heksadecimalni format dodaje se prefiks 0x (0X), nakon čega slijedi niz brojeva od 0 do 9 ili slova od a (A) do f (F), što odgovara vrijednostima od 10 do 15.

Var a = 120; // cjelobrojna decimalna numerička vrijednost var b = 012; // oktalni format var c = 0xfff; // heksadecimalni format var d = 0xACFE12; // heksadecimalni format

Brojevi s pomičnim zarezom su brojevi sa razlomkom decimalnog dijela, ili su brojevi izraženi u naučnoj notaciji. Naučna notacija brojeva poprima sljedeći oblik: broj sa razlomkom decimalnog dijela, nakon kojeg slijedi slovo e, koje se može označiti i velikim i malim slovima, zatim neobavezni znak + ili - i cjelobrojni eksponent.

Var a = 6,24; // pravi broj var b = 1,234E+2; // realan broj, ekvivalentan 1.234 X 10² var c = 6.1e-2; // realan broj, ekvivalentan 6,1 X 10‾²

2.2.3. Boolean tip

Ovaj tip ima dvije vrijednosti, true i false. Koristi se za poređenje i testiranje uslova.

Var answer = confirm("Da li vam se dopao ovaj članak?\n Kliknite OK. Ako ne, kliknite Otkaži."); if (odgovor == istina) ( upozorenje("Hvala!"); )

Postoje i posebne vrste jednostavnih vrijednosti:
nul tip - ovaj tip ima jednu null vrijednost, koja se koristi za predstavljanje nepostojećih objekata.

undefined type - tip varijable underfined znači odsustvo početne vrijednosti varijable, kao i nepostojeće svojstvo objekta.

Kompozitni tipovi podataka sastoje se od više od jedne vrijednosti. To uključuje objekte i posebne tipove objekata — nizove i funkcije. Objekti sadrže svojstva i metode, nizovi su indeksirana zbirka elemenata, a funkcije se sastoje od kolekcije iskaza.

2.3. Globalne i lokalne varijable

Varijable se po opsegu dijele na globalne i lokalne. Opseg je dio skripte unutar kojeg je ime varijable pridruženo toj varijabli i vraća njenu vrijednost. Varijable deklarirane unutar tijela funkcije zovu se lokalne varijable i mogu se koristiti samo unutar te funkcije. Lokalne varijable se kreiraju i uništavaju zajedno sa odgovarajućom funkcijom.

Varijable deklarirane unutar elementa ili unutar funkcije, ali bez upotrebe ključne riječi var, nazivaju se globalnim. Njima se može pristupiti sve dok je stranica učitana u pretraživač. Takve varijable mogu koristiti sve funkcije, omogućavajući im razmjenu podataka.

Globalne varijable završavaju u globalnom imenskom prostoru, gdje su u interakciji pojedinačne programske komponente. Nije preporučljivo deklarirati varijable na ovaj način jer slična imena varijabli mogu već biti korištena u drugom kodu, što uzrokuje pad skripte.

Globalni prostor u JavaScript-u je predstavljen globalnim objektom prozora. Dodavanje ili promjena globalnih varijabli automatski ažurira globalni objekt. Zauzvrat, ažuriranje globalnog objekta automatski ažurira globalni prostor imena.

Ako globalna i lokalna varijabla imaju isto ime, onda će lokalna varijabla imati prednost nad globalnom.

Lokalne varijable deklarirane unutar funkcije u različitim blokovima koda imaju isti opseg. Međutim, preporučljivo je staviti sve deklaracije varijabli na početak funkcije.