Arvukate taotluste abil joosta seeria javaScripti õppetunnid. Kui olete konfigureeritud konfigureeritud, tähendab kapten JS-i, et teil on HTML-i ja CSS-i põhiteadmised, sest see on aluseta, ilma milleta on raske mõista, mida me räägime.

Alates meie poolel püüan seletada arusaadavale keelele, näitavad elu tegelikke näiteid, sest kõik tuleneb võrdlemisel.

Mis on JavaScript või kuidas aru saada, millisel eesmärgil on vaja veebiarendust!

Me elame maailmas, kus igaüks on käegakatsutav, me rakendame neid ideid, mis tulevad meie pea juurde. Me ehitame maju, autosid, liikudes erinevate tehnikatega. See tähendab, mida me saame teha reaalses maailmas, saab esindada võrreldes HTML-iga, kus ta tegutseb ehitusmaterjalina, sihtasutusena, kus kõik hoiab ja millal cSS-i abi Me teeme selle maailma, me teeme selle värviliseks, sest nad tahtsid teda ise näha.

Ilmselt sa ei tea, kas HTML ja CSS on meid ümbritseb, nii et Mis on JavaScript? Kus ta avaldub meie maailmas.

Lihtsalt ma arvan, et filmi Gary partiide näitel selgitan, ma arvan, et paljud sa vaatasid ja mõistame, mida me räägime. Filmi skripti sõnul teame, et Gary valitses võimeid, ta oli viisard ja magic Wand aitas selles. See oli maagiline võlukepp, mis andis talle võimaluse luua maagiat, sellise taseme, nagu ta omas teadmisi, et muuta see ainulaadseks.

JavaScript on maagiline võlukeppSee on iga veebiarendaja, kuid mida magic saate luua, sõltub ainult teadmisi arendaja, kellele ta omab. Need, kes on õppinud see keelon võlurid ja lokkis imet.

JavaScripti keel Mitte fullegeeritud ilma selle komponentideta HTML ja CSS-i. Paljud programmeerijad mainivad kolme keelt, mis moodustavad veebilehe "kihid": HTML, CSS ja JavaScript.

HTML. Hypertext Markupi esimene keel - pakub struktuurilisi kihte, mis korraldab selgesõnaliselt lehe sisu, näiteks teksti, pildi teisi elemente.

Teiseks, CSS. (Cascading Style lehed) vorm ilus kaunistusHTML-sisu välimus.

Ja kolmas JavaScript. - Lisage käitumuslikud kihid, veebilehe taaselustamine, mis muudab selle interaktiivseks, st loomisel elemendid, kes suhtlevad külastajatega.

Selle tulemusena peate JavaScripti keele juhtima nii HTML-i kui CSS-i hea idee.

Programmeerimine võib tunduda uskumatu maagia, ligipääsmatuks lihtsaks surelikuks. Kuid enamik selle mõisteid ei ole raske mõista. JavaScript on novice programmeerijate suhtes üsna sõbralik, kuid siiski on see raskem kui HTML või CSS, nii et õppetundide seeria raames meisterdame programmeerimise põhikontseptsioone ja saate neid skriptide kirjutamisel rakendada JavaScript.

Saite tutvuda uute sümbolitega () ,, , ()!

Materjal ettevalmistatud Denis põles, kirjuta oma kommentaarid ja kindlasti jagada seda materjali oma sõpradega.

• Üleandmine

Materjal, mis täna avaldava kirja tõlge on pühendatud JavaScripti põhialustele ja on mõeldud algajatele programmeerijatele. Seda saab vaadelda väikese juhtraamatuna JS-i disainilahendustena. Siin me räägime eelkõige andmete tüübi süsteemist, muutujatest, massiividest, objektide prototüüpide kohta ja mõningaid keele muid omadusi.

Primitiivsed andmetüübid

JavaScript on järgmised primitiivsed andmetüübid: number, boolean, string, määratlemata, null. Kohe, tuleb märkida, et kui töötate primitiivsete andmete tüüpidega, näiteks stringi-kirjade puhul, ei tee me isegi selgesõnalist konversiooni, saame kasutada oma meetodeid ja omadusi. Fakt on see, et selliste toimingute tegemisel on sõna otseselt varustatud sobiva objekti ümbrisega.

▍ leht

JavaScript on ainult ühe numbrite tüüp - need on ujuva punkti kahekordse täpsuse numbrid. See toob kaasa asjaolu, et mõned väljenduvate väljendite arvutamise tulemused on aritmeetiline vale. Te võite juba teada, et JS-is ei ole ekspressiooni väärtus 0,1 + 0,2 0,3. Samal ajal, kui töötavad täisarvud selliseid probleeme ei täheldatud, see tähendab, 1 + 2 \u003d\u003d\u003d 3.

JavaScript on number objekti, mis on objekti ümbris numbriliste väärtuste jaoks. Number objekte saab luua kas kasutades var a \u003d number (10) tüüpi käsu või saate tugineda automaatse käitumise süsteemi eespool kirjeldatud. Eelkõige võimaldab teil helistada numbritega salvestatud meetodeid

(123) .tostring (); // 123 "(1,23) .tofixed (1); //31.2 "
On globaalsed funktsioonid, mis on mõeldud muude väärtuste muutmiseks numbrilisel tüübil. See on Parseint (), Parsefloat () ja number () disain, mis käesoleval juhul toimib tavapärase funktsioonina, mis täidab tüüpide konverteerimist:

Partsiint ("1") // 1 Parseint ("tekst") // NAN PARSEFLOAT ("1.234") //1,234 number ("1") // 1 number ("1.234") //1,234
Kui töö ajal numbritega selgub välja midagi, mis ei ole number (mõnede arvutuste ajal või üritades midagi numbrit teisendada), ei anna JavaScript vea, vaid esitab sarnase operatsiooni tulemusena nagu NAN ( Mitte-A-number, mitte number). Nan-väärtuse kasutamisel saate kasutada ISNANi () funktsiooni.

Aritmeetiline tegevus JS töötavad üsna tuttavat, kuid on vaja pöörata tähelepanu asjaolule, et + operaator saab täita numbrite lisamise ja stringide liitmise.

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

▍ insult

JavaScripti read on Unicode'i tähemärkide järjestused. String-literalsivsorrals loovad, sisestades tekst, mis asetatakse neile kahekordse (") või ühe (") jutumärkidega. Nagu juba mainitud, kui töötavad string-kirjalikult, saame tugineda vastavale objekti ümbrisele, mille prototüüp on nende hulgas palju kasulikke meetodeid - substring (), indexof (), concat ().

"Tekst" .substring (1,3) // ex "tekst" .indexof ("x") // 2 "tekst" .ccat ("End") // Teksti lõpp
Rida, nagu teised primitiivsed väärtused, immutabelid. Näiteks Concat () meetod ei muuda olemasolevat stringit ja loob uue.

▍Logical väärtused

Logical Data Liik JS esindab kaks väärtust - tõsi ja vale. Keel saab automaatselt teisendada erinevaid väärtusi loogiliste andmete tüüp. Niisiis, vale, lisaks vale loogilisele väärtusele, on , määratlemata, "(tühi string), 0 ja nan. Kõik muu, sealhulgas objektid, on tõelised väärtused. Pooleli loogikaoperatsioonid Kõik, mida peetakse tõeks, konverteeritakse tõeliseks ja kõik, mida peetakse valeks, konverteeritakse valeks. Vaadake järgmist näidet. Vastavalt ülaltoodud põhimõtetele konverteeritakse tühi string valeks valeks ja selle koodi täitmise tulemusena konsoolis, selle rida on valed jäävad konsooli.

Lase Text \u003d ""; If (tekst) (konsool.log ("See on tõsi");) muidu (konsool.log ("See on vale");)

Esemed

Objektid on dünaamilised struktuurid, mis koosnevad peamise väärtuse paari. Väärtustel võivad olla primitiivsed andmetüübid, võivad olla objektid või funktsioonid.

Objektid on kõige lihtsam luua objekti sõnasõnaline süntaks:

Olgu Obj \u003d (sõnum: "Sõnum", Dosomething: funktsiooni () ())
Objekti omadused võivad olla igal ajal lugeda, lisada, redigeerida ja kustutada. Nii see on tehtud:

• Lugemisomadused: objekt.Name, objekt.
• Salvestage andmed omadustele (kui vara, millele ei ole olemas, ei eksisteeri, lisatakse uus vara määratud võtmega): objekt.Name \u003d väärtus, objekt \u003d väärtus.
• Kustuta omadused: kustutage objekt.Name, kustutage objekt.

siin on mõned näidised:

Olgu Obj \u003d (); // tühja objekti loomine obj.message \u003d "sõnum"; // uue vara lisamine obj.message \u003d "uus sõnum"; // Redigeerimine Kustuta objekti.Message omadused; // kustutada vara
Keele objektid rakendatakse Hash tabelite kujul. Võite luua lihtsa hash tabeli abil objekti.Create Command (Null):

Olgu Prantsuse \u003d objekt.Create (null); Prantsuse [jah "] \u003d" Oui "; Prantsuse ["ei"] \u003d "mitte"; Prantsuse [jah "]; //" oui "
Kui objekt peab olema muutumatu, saate kasutada objekti.Freeze () käsku.

Kõigi objekti omaduste loetlemiseks saate kasutada objekti.Keys () käsku:

Funktsioon LogProperty (nimi) (konsool.log (nimi); // Property Nimi konsool

▍Cap väärtused primitiivne tüüp ja objektid

Jaoks praktiline töö Primitiivsete väärtustega oli juba öeldud, et tajub neid objektidena, millel on omadused ja meetodid, kuigi need ei ole objektid. Primitiivsed väärtused muutuvad, objektide sisemine struktuur võib erineda.

Muutujad

JavaScriptis saab muutujaid teatada var, lase ja const märksõnade abil.

Vari märksõna kasutamisel saate deklareerida muutuja ja vajadusel initsialiseerida selle teatud väärtusega. Kui muutuja ei käivitata, on selle väärtus määratlemata. VAR-märksõna abil deklareeritud muutujad on funktsionaalsed ulatuslikud.

Lase märksõna on väga sarnane var, erinevus on see, et märksõnaga deklareeritud muutujad lasevad blokeerida.

Nähtavuse plokk ulatus on ka CONST-märksõna abil deklareeritud muutujad, mis arvestades, et selliste muutujate väärtusi ei saa muuta, helistab õigesti "konstantidele". CONST märksõna, et "külmub" väärtus muutuja deklareeritud selle kasutamisega saab võrrelda objekti.Freeze () meetod, "külmutamine" objektid.

Kui muutuja deklareeritakse väljapoole mis tahes funktsiooni, on selle ulatus globaalne.

Massiivsus

JavaScripti massiivid rakendatakse objektide abil. Selle tulemusena räägime massiividest rääkides tegelikult sarnast esemeid. Te saate töötada massiivi elementidega nende indeksite abil. Numbrilised indeksid konverteeritakse stringideks ja neid kasutatakse massiivide väärtuste avamiseks. Näiteks on AR-tüüpi tüüp kujundamine sarnane ARR-i kujundusega ["1"] ja teine \u200b\u200bannab juurdepääsu samale väärtusele: ARR \u003d\u003d\u003d ARR ["1"]. Vastavalt eeltoodule kuulutas lihtne massiiv Let ARR \u003d ["A" käsk, B "," C "], näib olevat järgmine:

("0": "A", "1": "B", "2": "C")
Massiivi elementide eemaldamine Kustuta käsu abil jätab ta "augud". Selle probleemi vältimiseks saate kasutada splaissilist () käsku, kuid see toimib aeglaselt, kuna pärast elemendi eemaldamist liigub see ülejäänud elemendid, tegelikult nihkuvad need massiivi algusesse, vasakule .

Let ARR \u003d ["A", "B", "C"]; Kustuta ARR; Konsool.log (ARR); // ["A", tühi, "c"] konsool.log (arr.length); // 3.
Masinide meetodid muudavad selliste andmestruktuuride rakendamise lihtsaks nagu korstnad ja järjekorrad:

// stack lase virna \u003d; stack.push (1); // stack.push (2); // Las Last \u003d Stack.Pop (); // console.log (viimane); // 2 // Queue lase järjekorda \u003d; queue.push (1); // queue.push (2); // Olgu esimene \u003d Queue.Shift (); // konsool.log (esiteks); // üks

Funktsioonid

JavaScripti funktsioonid on objektid. Funktsioone saab määrata muutujatele, mis on salvestatud objektides või massiivides, edastavad teistele funktsioonidele argumentide kujul ja muudest funktsioonidest tagasipöördumist.

Funktsioonide deklareerimiseks on kolm võimalust:

• Funktsioonide deklaratsiooni või funktsioonide väljavõte).
• Kasutades funktsionaalseid väljendeid (funktsiooni väljendus), mida nimetatakse ka funktsionaalseteks sõnamärkideks (funktsiooni sõnasõnaline).
• Kasutades pildistamisfunktsioonide süntaks (nool funktsioon).

▍Classical reklaamifunktsioon

Selle lähenemisviisiga funktsioonide deklaratsioonile kohaldatakse järgmisi eeskirju: \\ t

• Esimene märksõna deklaratsiooni reafunktsioonis on funktsioon.
• Funktsioonid peavad määrama nime.
• Funktsiooni saab kasutada kood, mis on enne selle tegemist mehhanismi tõstmise funktsiooni deklaratsiooni ülemises osas nähtavust, milles ta on deklareeritud.

Siin on see, mida klassikaline reklaamifunktsiooni nimekiri näeb välja:

Funktsioon Dosomething () ()

▍ funktsionaalsed väljendid

Funktsionaalsete väljendite kasutamisel peate kaaluma järgmist:

• Funktsioon märksõna ei ole enam esimene sõna funktsioon reas funktsiooni.
• Funktsiooni nime olemasolu on vabatahtlik. Nii anonüümseid kui ka nimega funktsionaalseid väljendeid on võimalik kasutada.
• Kõne käsud Sellised funktsioonid peavad järgima oma reklaamide käske.
• Seda funktsiooni saab kohe pärast väljakuulutamist alustada Iife'i süntaksi abil (koheselt tugineda funktsiooni ekspressiooni - kohe nimetatakse funktsionaalseks ekspressiooniks).

Funktsionaalne väljendus näeb välja selline:

Olgu Dosomething \u003d funktsiooni () ()

▍ Venitamisfunktsioonid

Anonüümsete funktsionaalsete väljendite loomiseks võib nool funktsioone käsitleda "süntaksi suhkur". Tuleb märkida, et sellistel funktsioonidel ei ole selle ja argumentide enda üksusi. Noole funktsiooni väljakuulutamine näeb välja selline:

Olgu Dosomething \u003d () \u003d\u003e ();

Kampaaniad kõnede funktsioonide kohta

Funktsioone saab nimetada mitmel viisil.

Tavaline funktsioonikõne

Dosomething (argumendid)

Kõne funktsioon objekti meetodina

TheoBject.dosomething (argumendid) TheObject ["Dosomething"] (argumendid)

Kõne funktsioon kujundaja kujul

Uus Dosomething (argumendid)

Funktsiooni helistamine rakenduse () meetodi abil

Dosomething.Apply (TheObject,) dosomething.call (TheObject, argumendid)

Funktsiooni helistamine siduva () meetodi abil

Olgu DosomethingwithObject \u003d Dosomething.Bind (TheObject); dosomethingwithObject ();
Funktsioone saab nimetada suure või väiksemate argumentide arvuga kui nende deklareerimisel määratletud parameetrite arv. Operatsiooni ajal "liigse" funktsiooni argumendid lihtsalt ignoreeritakse (kuigi funktsioonil on juurdepääs neile), puuduvad parameetrid saavad määratlemata.

Funktsioonidel on kaks pseudo-parameetrit: see ja argumendid.

▍ Pulmasõna see

Selle märksõna on funktsiooni kontekst. Väärtus, millele see näitab, sõltub funktsiooni põhjustatud. See, millised väärtused võtavad selle märksõna, sõltuvalt funktsiooni helistamise meetodist (need, koodi näidetega, mille kujundused siin kasutavad siin kirjeldatud):

• Normaalne funktsioonikõne - aken / määramata.
• Kõne funktsiooni objekti meetodina - TheoBject.
• Funktsiooni helistamine disaineri kujul - uus objekt.
• Funktsiooni helistamine Rakenda () meetodi abil - TheObject.
• Funktsiooni helistamine sidumise meetodi abil - TheObject.

▍ Pulmad Sõna argumendid

Argumendid Asja märksõna on pseudoparameter, mis annab juurdepääsu kõigile funktsiooni helistamisel kasutatud argumentidele. See näeb välja nagu massiiv, kuid ei ole massiiv. Eelkõige tal ei ole massiivi meetodeid.

Funktsioon redutsetosum (kokku, väärtus) funktsiooni summa () (lase args \u003d array.protype.slice.call (argumendid); tagastamine args.reduce (redutsetosum, 0);) summa (1,2, 3);
Alternatiiv argumentide märksõna on uue süntaksi ülejäänud parameetrid. Järgmises näites on Args massiiv, mis sisaldab kõike, mis edastatakse helistamisel.

Funktsioon summa (... args) (tagastama args.reduce (redutsetosum, 0);)

▍ Operaatori tulu.

Funktsioon, milles tagasivoolu väljend puudub, tagastab määratlemata. Tagasitulemuste märksõna kasutamine pöörama tähelepanu sellele, kuidas semikooloni automaatse sisestamise mehhanism. Näiteks järgmine funktsioon ei taga tühja objekti, vaid määratlemata:

Funktsioon ShoeBject () (tagastamise ()) GetObject ()
Sellise probleemi vältimiseks tuleb avaklamber paigutada samasse rida, mille tagastamise avaldus asub:

Funktsiooni GetObject () (tagasisaatmine ())

Dünaamiline kirjutamine

JavaScript on keel, millel on dünaamiline kirjutamine. See tähendab, et konkreetsed väärtused on tüübid ja muutujad ei ole. Programmi täitmise ajal sama muutuja, saate salvestada väärtusi erinevad tüübid. Siin on näide erinevate tüüpidega töötavate funktsiooni kohta:

Funktsioon Log (väärtus) (konsool.log (väärtus);) Logi (1); Logi (tekst "); Logi ((sõnum: "tekst"));
Muutuja salvestatud andmete tüübi selgitamiseks saate kasutada tüübitüüpi () operaatori:

Olgu n \u003d 1; N); // number lase s \u003d "tekst"; TYPEF (s); // string lase fn \u003d funktsiooni () (); Tickit (FN); // funktsioon.

Single vooluhulk täitmise mudel

JavaScripti teostamise keskkond on ühe keermega. See eriti väljendatakse võimatult samaaegselt täita kaks funktsiooni (kui mitte võtta arvesse võimalusi asünkroonse täitmise koodi, et me ei mõjuta siin). Täitmise keskkonnas on nn ürituste järjekord (sündmuste järjekord), mis salvestab töödeldavate ülesannete loetelu. Selle tulemusena on vastastikuste ressursside blokeerimisprobleemide probleem JS-i ühekordse õitsemise skeemi jaoks ebatavaline, mistõttu ei ole blokeerimismehhanismi. Sündmuste järjekorda kuuluv kood tuleb siiski kiiresti läbi viia. Kui te üle koormata raskete töödega, brauserirakenduses, peavoolu, rakenduse leht ei reageeri kasutajale ja brauser pakub selle lehe sulgemiseks.

Erandkäitlus

JavaScript on mehhanism erandi käitlemiseks. See toimib vastavalt üsna tavalisele sellistele mehhanismidele põhimõtet: kood, mis võib põhjustada vea, mis koosneb proovimise / püügiprojekti abil. Kood ise on proovisüksuses, vead töödeldakse püügiplokis.

On huvitav märkida, et mõnikord JavaScript, kui teil on vabakutselised olukorrad, ei väljasta veateated. See on tingitud asjaolust, et JS ei visata vigu enne ECMACT 3 standardi vastuvõtmist.

Näiteks järgmises koodi järgmisel fragmendil püütakse muuta "külmutatud" objekti ebaõnnestumist, kuid erandit ei väljastata.

Olgu Obj \u003d objekt.Freeze (()); Obj.Message \u003d "Tekst";
Mõned "Silent" JS vead avaldub range režiimis, saate selle sisse lülitada kasutades "kasutage range" disaini; .

Prototüübi süsteem

Aluseks selliste JS mehhanismide funktsiooni disainerid, objekt.Create Command (), klassi võtmesõna on prototüüpide süsteem.
Kaaluge järgmist näidet:

Lase Service \u003d (dosomething: funktsiooni () ()) Olgu spetsialiseerunudService \u003d objekt.Create (teenus); Konsool.log (spetsialiseerunudService .__ proto__ \u003d\u003d\u003d teenus); // Tõsi.
Siin, luua spetsialiseerunudservice objekti, prototüüp, mis oli vaja teha objekti objekt.Create (). Selle tulemusena selgub, et dosomething () meetodit saab nimetada spetsialiseeritudservice objektiga. Lisaks tähendab see, et spetsialiseeritudservice objekti __proto__ vara näitab teenuseobjekti.

Looge nüüd sarnane objekt, kasutades klassi märksõna:

Klassiteenus (dosomething ()) klassi spetsialiseeritudservice laiendab teenust () Olgu spetsialiseerunudService \u003d uus spetsialiseerunudservice (); Konsool.log (spetsialiseerunudservice .__ proto__ \u003d\u003d\u003d spetsiaalneservice.protype);
Teenus klassis deklareeritud meetodeid lisatakse teenusesse.Prototype'i objektile. Teenindusklassi juhtudel on sama prototüüp (service.protype). Kõik juhtumid delegeerivad helistamiskutsed teenusesse.Prototype'i objektile. Selle tulemusena selgub, et meetodid deklareeritakse ainult üks kord teenuses.Prototype'is, pärast mida nad "pärisid" kõigi klasside juhtudel.

▍Kõik prototüübid

Objektid võivad olla teiste objektide "pärijad". Iga objektil on prototüüp, mille meetodid on sellele kättesaadavad. Kui proovite viidata vara, mis ei ole objektis ise, JavaScript hakkab otsima prototüübi ahelat. See protsess jätkub kuni vara leidumiseni või kuni otsing jõuab ahela lõpuni.

JavaScripti funktsionaalse programmeerimise kohta

Sisse JavaScripti funktsioonid Kas esimesed klassi objektid, keel toetab sulgurite mehhanismi. See avab viis rakendada meetodeid funktsionaalse programmeerimise js. Eelkõige räägime võimalusest rakendada kõrgema järjekorra funktsioonide rakendamist.

Sulgemine on sisemine funktsioon, millel on juurdepääs vanemafunktsioonis deklareeritud muutujatele, isegi pärast vanemafunktsiooni täitmist.

Kõrgeim tellimuse funktsioon on funktsioon, mis on võimeline võtma teisi funktsioone argumentidena, tagastamisfunktsioonidena või mõlemad.

Funktsionaalne programmeerimine JS-s on esile tõstetud mitmesugustes väljaannetes. Kui see on huvitav teile - siin on mõned materjalid sellel teemal pühendatud

JavaScripti süntaksi juhendaja

Enne lugemise alustamist javaScript juhendajaTeil peab olema tarkvara tundmine.

See on suur pluss õppida JavaScript Syntax Kui olete juba tuttav mis tahes programmeerimiskeelt, nagu PHP, C või PASCAL, ja mõista ka milline muutuja, andmete tüüp, funktsioon või massiivi.

Siiski, kui te ei ole tuttav programmeerimiskeelte, ei ole see väärt murettekitavaid javaScript õpik Lihtsalt ja on mõeldud neile, kes esmakordselt jätkata programmeerimise uuringus.

JavaScript (JavaScript) - See on kliendi programmeerimiskeel, mida saab juhtida HTML-lehekülje elemendid (HTML-sildid) ja veebibrauser, sundida neid liikuma, reageerides erinevatele sündmustele (hiireklõpsud, klaviatuuripressimine), looge palju huvitavaid programme ( Skriptid): testid, animatsioon, fotogaleriid (näiteks VKONTAKTE), mängud ja palju muud.

Kuidas on JavaScripti uuring

Uuring javaScripti keelon tavaliselt jagatud neljaks etapiks:
1. JavaScripti süntaks (See juhendaja),
2. Uuring Dom ja Bom.,
3. DOM ja BOM-juhtimine JavaScripti abil
4. erinevate JavaScripti raamatukogude uurimine. jquery. - Kõige populaarsem sel hetkel raamatukogu (JQuery õpik peaks ilmuma sellel saidil 2015. aasta lõpus).

Dom on dokumendi objekti mudel. Tänu DOM-tehnoloogiale hakkavad HTML-leheküljed sildid esindama objektide esemeid ja iga selle puu objekti objekte, on ainulaadne aadress. JavaScripti keel, mis viitab sellele aadressile, pääseb juurde konkreetsele HTML-märgisele ja hallata seda (muutke värvi, suurust, positsiooni ja MN. Dr.).

BOM on brauseri dokumendimudel. Struktuur on sama kui dom, ainult HTML-lehekülje objektide asemel, on brauseri objektid: brauseri aken, brauseri ekraani suurused, külastuste ajalugu, staatuse string jne.

Pärast dom ja Bomi õppimist alustavad nad lehekülje ja brauseriga jagatud JavaScripti jaoks rohkem või vähem keerulisi skripte.

Siis, olles natuke õppinud, uurida mõnda JavaScripti raamatukogu, näiteks JQuery, tänu talle saate luua samad programmid JavaScriptis, vaid palju kiiremini ja tõhusamalt.

Mõned veebimeistrid hakkavad kohe uurima jquery, vahele viimase kolme etapi vahele, kuid ma ei soovita seda, sest igal juhul peate mõistma JavaScripti süntaksi ja teadma oma omaduste, meetodite ja sihtkohtade dom / bom objekte.

Milliseid programme saab kirjutada JavaScripti abil

Kasutades saate luua palju huvitavaid programme (skriptid):
- Saate luua skripte, mis muudavad saidi lehekülje elemente või nende asukohta, vajutades ühte või mõnda muud nuppu,
- Saate luua animatsiooni,
- manipuleerida vormid, näiteks kasutaja sisestatud andmete kontrollimine,
- luua erinevaid katseid, näiteks EGE (koolieksamite) tüüpi ja saada kohe tulemuse,
- Tänu BOMile saate teada brauseri omadused ja teie saidile külastanud arvuti arvuti, mis võimaldab teil luua erinevaid külastamismõõtureid,
- JavaScripti abil saate luua isegi mänge, karikatuure ja paljusid muid huvitavaid ja kasulikke programme.

Mis on selle juhendi eesmärk JavaScriptis?

Selle eesmärk javaScript'i raamatud on õpetada teid javaScripti süntaksi põhitõed, tutvustada programmeerimist ja mõisteid nagu muutujad, andmetüübid, toimingud, hargnevate operaatorite, funktsioonide, tsüklite, massiivide, objektide jne. Kõik see on teistes programmeerimiskeeledes, nii et võttes õppinud JavaScripti, siis on palju lihtsam õppida teisi keeli, nagu PHP, C ++ või Python.

JavaScript õpiku struktuur

Sisse javaScripti õpik.Arvesse kaalutakse järgmisi teemasid ja õppetunde.

JavaScript - siseneb mängu, kui peame tegema kliendi poolel mõned sammud, mis käsitlesid meie veebilehte.

JavaScript võib veebilehte muuta ilma serveri juurde pääsemata, kontrollida andmete kasutaja väärtusi ja täita muid toiminguid.

See artikkel sisaldab põhiteavet, mis võimaldab teil alustada JavaScripti kasutamist.

Skripti sisestamine otse lehekülje koodile

JS-koodi saab sisestada otse lehekülje sees.

Koodi eemaldamine eraldi failis

Saab esitada JavaScripti kood välisele failile ja kasutage linki selle lehel

Sellel juhul on vaja sulgemismärgis.

Parim sisestada skriptid sulgemismärgi ees

Muutujad

Muutujate nimed

Muutuja nimed saab alustada suure või väikese kirjaga, rõhutada või $ märk.

Nimi võib olla numbreid, kuid muutuja nimi on võimatu numbriga käivitada.

JavaScript on registri suhtes tundlik: MyText ja MyText on kaks erinevat muutujat.

Parem on kasutada Camelcase nimetamise jaoks, alustades iga sõna muutja nimel suurtähtega.

Deklareerimine

Kasutatava JavaScripti deklaratsioonimuutujate puhul var..

Var mytext; // määratlemata mytext \u003d "Tere!"; Alert (MyText);

Vahetult pärast muutuja kuulutamist on selle väärtus määratlemata.

Saate määrata väärtus muutuja deklareerimisel:

Var mytext \u003d "hi!";

Samuti saate deklareerida mitmeid muutujaid ühes var

Var summa \u003d 4 + 5, mytext \u003d "Tere!";

VAR väärtuse määramisel saate välja jätta, kuid see on parem mitte teha.

Muutujate tüübid

JavaScriptis saate kasutada jooni:

Var mytext \u003d "Tere!";

terve numbrid:

Var mynumber \u003d 10;

Fraktsiooninumbrid:

var pi \u003d 3.14;

Loogika väärtused:

Var isboolase \u003d vale;

JavaScripti süntaksi üksikasjad

Kommentaarid

Kommentaarid ühes liinil on eraldatud "//". Kõik, mis tuleb pärast neid märke loetakse kommentaariks.

Et kommenteerida mitu rida, peate kasutama "/ *", et määrata kommentaari algus ja "* /", et määrata kommentaari lõpus

/ * Siin on kommenteeritud kood ja see on ka kommentaar * /

Operaatorite eraldamine

Operaatorite eraldamiseks peate kasutama ";"

See on soovitav, kuid mitte tingimata kasutada lünki, et parandada teksti loetavust.

Töö stringidega

var str \u003d 4 + 5 + "7"

annab stringi väärtuse " 97 »Str.

Var str2 \u003d "7" + 4 + 5

annab stringi väärtuse " 745 "STR2-s.

Fakt on see, et väärtus lisamisel arvutatakse järjestikku - vasakult paremale. Kui on 2 numbrit - tulemus muutub numbrile. Kui string ja number voldid, number tajutakse stringina ja kombinatsiooni kahe rida.

Rida tõlge

Stringi ülekandmiseks kasutatud numbrile parseint () ja parsefloat ()

Need funktsioonid saavad kaks argumenti. Esimene on string, mis tõlgitakse numbri süsteemi numbrile ja teisele tasemele, mida kasutatakse tõlkimiseks. Katkestada rida kümnendnumber, Te peate kasutama 10 teise argumendina

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

JavaScripti funktsioonid

JavaScripti funktsioonid deklareeritakse järgmiselt:

Funktsioon Myfunction () (mõned JS-kood)

Väärtuse tagastamiseks vajaliku väärtuse tagastamiseks tagasi.:

Funktsioon MyMultiplication (Paramone, Paramone * Paramtwo)

Te saate deklareerida "anonüümne" funktsiooni, vähendades funktsiooni nime nime.

Funktsiooni saab edastada parameetrina teise funktsiooni, täpsustades selle nime.

Esemed

Kõik JavaScript on objekti pärija.

Uue rajatise loomine

Var inimene \u003d uus objekt (); // objekti isiku inimene.firstname \u003d "Andrew"; // Lisa esimese atribuudi isik.Lastname \u003d "Peterson";

Teiseks, lühema võimaluse objekti loomiseks

Varine \u003d (// objekti objekti loomine eesnimi eesnimi: "Andrew", perekonnanimi: "Peterson", GetfullName: funktsiooni () (tagastage see.FirstName + "+ see.Lastname;))

Töö objekti omadustega

var mina \u003d uus objekt ();

mina ["nimi"] \u003d "Serg";
me.age \u003d 33;

Massiivid JavaScript

Massiivi loomine

VAR ARR \u003d uus massiiv (11, Hello! ", Tõsi); // massiivi loomine

Uus salvestamise viis

VAR ARR \u003d; // massiivi loomine

Töötamine JavaScripti massiividega

Elementide arv massiivi

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

Elementide lisamine massiivile - push

arr.push ("uus väärtus");

Massiivi viimase elemendi ekstraheerimine - Pop

var lastvalue \u003d arr.pop ();

Relvade ühendamine

var arr2 \u003d; var lonarsaray \u003d arr.concat (ARR2); // Kombineerides kaks peresses Arr ja ARR2 ühes Longraray

Liitu - ühendage kõik massiivi elemendid

var lonkstring \u003d arr.join (":") // "11: Tere!: TRUE"

JavaScripti võrdlus ja loogilised funktsioonid

Enam-vähem

var otsi \u003d 6\u003e \u003d 5; // rohkem või võrdne

Võrdõiguslikkus

var isfalse \u003d 1 \u003d\u003d 2; // võrdne istetrae \u003d 1! \u003d 2; // nonavo var alsotrue \u003d "6" \u003d\u003d 6;

Identiteet

var notintentical \u003d "3" \u003d\u003d\u003d 3 // vale, kuna andmete tüübid ei vasta notintentical \u003d "3"! \u003d\u003d 3 // Tõsi, kuna andmete tüübid ei lange kokku

Kui operaator

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

Operaator

Var lõunasöök \u003d kiire ("Mida sa tahad lõunaks?", "Sisestage oma lõunasöök valik siin"); Lüliti (lõunat) (Case "võileib": konsool.log ("kindel asi! Üks võileib, tulemas.") ; Murda; Case "salat": konsool.log ("kõlab hästi! : konsool.log ("Huh! I" ei ole kindel, mida "lõunasöök +" on. Kuidas sandwich-heli? ");)

Loogiline ja - &&

kui (1 \u003d\u003d 1 && 2 \u003d\u003d 2) (hoiatus ("TRUE!");)

Loogiline või - ||

Kui (1 \u003d\u003d 1 || 2 \u003d\u003d 3) (hoiatus ("tõsi!");)

Loogiline mitte -!

kui (! (1 \u003d\u003d 1)) (hoiatus ("FALSE!");)

Tsüklid

Jaoks

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

Samas

Kuigi (TRUE) (// Lõpmatu hoiatustsükkel ("See ei lõpe kunagi!");) Varnid \u003d ["Sergei", "Andrey", "Petr"]; Samas (nimed.Enth\u003e 0) (hoiatus (nimed [i]);)

Tehke samal ajal

Teha (Alert ("See ei lõpe kunagi!");)) (TRUE) (// lõpmatu tsükkel)

Stringid

Tekst \u003d "blah blah blah blah blah blah eric \\ blah blah blah eric blah blah eric blah blah blah blah blah blah eric";

Substrings.

Mõnikord ei taha te kuvada terve. String, vaid osa sellest. Näiteks teie Gmaili postkastis saate selle seadistada iga sõnumi esimese 50 või nii märki kuvamiseks, et saaksite neid ära vaadata. See eelvaade on a substring Algse stringi (kogu sõnum).

"Mõned sõnad" .substring (x, y), kus X on koht, kus alustate tükeldamist ja Y on koht, kus te lõpetate algse stringi tükeldamise.

Number osa on veidi imelik. Et valida "ta" "Tere", siis kirjutada see: "Tere". Substring (0, 2);

Mõelge igale iseloomu vasakule küljele: 0-H-1-E-2-L-3-L-4-O-5.

Kui te tükeldate 0-le ja jälle 2-ga, jääte just ta.

Rohkem näiteid.:

1. Esimesed 3 tähed "Batman"
"Batman" .substring (0.3)

2. Alates 4. kuni 6. kirja "sülearvuti"
"Sülearvuti" .substring (3.6)

• kuidas sisestada skripti HTML-dokumendis (üldine teave);
• kommentaarid JavaScripti kohta;
• kuidas deklareerida muutujaid ja anda neile õiged nimed;
• meetodite skripti ja süntaksi analüüs;
• alert () meetod;
• kasulik Trickle: "Plug" jaoks ajutiselt ei tööta link

Autorilt

Veebilehtede loomisel on palju erinevaid nüansse. Aga seal on kolm vaala. See on HTML, CSS ja JavaScript.

Soovitan korraldada enesehariduse järgmiselt: Niipea kui HTML-i süntaks ja õppige tegema primitiivsete lehekülgede teksti, piltide ja tabelitega, ühendage lihtsalt CSS-i uuringuga. Niipea, kui te mõistate, kuidas CSS-iga töötada, alustage JavaScripti, paralleelselt "sõnavara" kõigis kolmes keeles. Ma arvan, et poole aastas saate ehitada väga ilus ja funktsionaalne sait.

Ma ei teadnud, kuidas JavaScript läheneda. Seal oli õpikud või liiga abstraktne - teooria, teooria, ja ei ole selge, kuidas seda praktikas lisada, või vastupidi, liiga spetsiifiline: siin on valmis retseptide kogum, võtke ja kasutada ja kuidas see kõik pöörded - mitte sinu suremas.

Ma sain kuidagi õpiku Vadim Dunaev. Paljud, ma tean, sõidab selle juhendi. Lisaks alla laaditud Frozo skaneeritud PDF, kus asemel "()" võiks olla näiteks "Q" ja Ladina tähed koodid asendatakse (kohad!) Sarnased venelased, mistõttu need koodid ei tööta. Üldiselt pidin ma püütud. Ja ausalt, kui ma ei lugenud JavaScripti kohta midagi enne, ma ei mõista neid vigu ja liitusid numbrite arvuga. Aga siis ma istusin ilma tööta, oli aeg tungida ja mulle meeldis õpik. Aga see on väga üksikasjalik ja mõeldud inimestele, kes on juba programmeerimisega kokku puutunud.

Märkus 2012.

Nüüd, mõne aasta pärast ja ma kohtlen seda õpikut ilma vana rõõmustamata. Ta on aegunud, "teritatud" all IE on üsna pealiskaudne; On ka tõelisi vigu ja hooletuse koodi ning mõned kasulikud asjad ei leitud. Aga võrreldes nende "vähimärkide juhid", mis arvukus väljastas otsingumootorid, see oli midagi.

Niisiis, ma tahan proovida tappa kaks jänest. Kirjutage iga veekeetja jaoks midagi selget ja samal ajal konstruktiivset kognitiivset. Nii et see veekeetja minu nõuandete põhjal võib kirjutada lihtsa, kuid täielikult originaalse skripti.

Sisestage HTML-dokumendi juurde

Sa ilmselt nägid selliseid silte HTML-koodides:

See abrakadabra on sildid ja on skript.

Tag ise

See atribuut on vabatahtlik. Tasub kasutada kas selgitada versiooni keele (JavaScript1.1, JavaScript1.2 jne) või kui kasutate teist keelt (näiteks

Tüüp atribuut, mis näitab teksti tüüp: tekst / JavaScript.. See ilmus HTML 4.0 versioonis. Ma soovitan seda kasutada.

Enne atribuudi liikumist src, Uuri välja, milliseid partitsioone HTML-koodi saate skriptide sisestada.

Mistahes. Aga meeles.

Sageli näitab skript konkreetse teksti tühistamise, mida nimetatakse siia ja nüüd. See skript sisestatakse otse "Stseenis."

On skripte, millel on muutujate reklaamid, mida saab kasutada teistes leheküljel olevate skriptide puhul, funktsioone, mida saab helistada HTML-koodi mis tahes saidilt. Sellised skriptid on märgiste vahele kõige mõistlikumad ja .

Aga saate seda teha skripti kasutamiseks kohe mitmel veebilehtedel. Selleks tuleb selle kood salvestada laiendiga eraldi failis .js. (nt myScript_1.js.). Sildid Selles ei ole enam vaja kirjutada.

Ja siis, et helistada skripti veebilehelt, me vajame atribuut src. See toimib nii sarnase sildi atribuut :

Seega paigutatakse skripti failis salvestatud erinevatele lehekülgedele, sama mütsile või menüüle. Eriti aitab see nendel hostimisel, kus SSI ei liigu.

Samuti saate sisestada väikseid skripte mõnda HTML-märgiste atribuute, kuid veidi hiljem.

Mõnikord skripti tuleb paigutada lõpus. keha. või isegi pärast sulgemist : Näiteks, kui me vajame enne skripti täitmist, uurib ta kõiki dokumendis olevaid linke või kõiki pilte. Kuid ka sellest - hiljem, hiljem, kui me JavaScripti mehhanismid leiame. Saate kooruda.

Kommentaarid

Nad ütlevad, et seal on veel selliseid brausereid, kes ei mõista skripte. Meyaki kasutajad, kes on nii kalduvad skriptide ohutult keelatud. Sellises olukorras ei täideta skripti, vaid selle koodi, sama "abrakadabra", lihtsalt langeb ekraanile.

Niisiis, et mitte kukkuda, järeldame selle HTML-i kommentaarides.

Mmm ... ja mis on see kaks kaldkriipsu enne kommentaari sulgemist?

Sulgemise kommentaar on juba skripti "kehas". Ja JavaScript ei mõista neid kraniaalseid HTMLSi "Sky Brackets, tema jaoks on see võõrkeha, mis tekitab vea. Nii et peate selle sulgemismärgi peitmiseks skripti alt peitma, asetades selle JavaScript kommentaariks. JavaScript tundub mõnevõrra graatsiline: //. Pärast seda märgi skripti ei näe HTML-i sulgemisklambrit ja HTML-i ohutult peidab skripti teksti ja ekraanil ei ole "vasak" kirjed.

Kuna me puudutasime kommentaare, pean ütlema, et JavaScriptis on neil kaks vormi - sama nagu C ja C ++ (ja ka CSS-i kaudu).

// See kommentaar Vorm // Kehtib ainult ühel real, // see on iga uue rea // teil määrata kommentaari märgi. Ja see on skripti kood ... / * Ja see kommentaar vorm toimib nii palju ridu nii kaua, kui see ei pumbata sulgemis ikooni, peegel peegeldab esialgset. * / Ja nüüd uuesti skripti kood ...

Ärge segage HTML-i kommentaare ja JavaScripti kommentaare! Need on erinevad keeled, kuigi nad eksisteerivad "ühes pudelis." Või täpsemalt ühes pangas. Nagu ämblikud ...

Tagasi naasevad lagunenud brauserite probleemile. Oletame, et JavaScript, sa tegid midagi kahest pildist midagi animeeritud banner. Siis saate palun "vaeste" brauserite kasutajad (ja teie, ma loodan, ei ole täielikult altruismita), vähemalt ühe nende piltide ilmumine sildi abiga

Millised toimetajad kirjutavad skripte

Võib-olla on JavaScripti jaoks mõned spetsiaalsed toimetajad. Ma ei kohtunud kedagi ja ei vaata liiga palju. Tavaliselt on skriptid kirjutatud samas toimetajates, mida kasutatakse veebilehtede loomiseks. Näiteks ma armastan koduseid. Skripti kirjutamine nendes toimetajates ei erine selle lihtsa sülearvuti kirjutamisest, välja arvatud koodi valgustus. Ja mõnikord aitab see palju. Ma alla laadisin kord skripti (mõnel saksa keeles) ja see ei tööta. Ma vaatasin koodi ja nägin märksõna vahetama Mingil põhjusel ei eraldata. Ma vaatan - ja ei ole vahetama, aga switsch., Donner, Wetter! Ma eemaldasin pöök - ja läksin.

Muide, kõikides meie näidetes näeb kood täpselt nii koduse aknas.

Alates ruumist karjääris

Järgnev näide on Dunajevi plagieerimine. Aga ta on nii lihtne ja sügav, et ma ei saa vastu seista. Lisasin siia ainult mõned üksikasjad salvestuse disaini kohta, et selgitada samal ajal ja nende.

Kohe ma hoiatan teid: Peaaegu see näide on absoluutselt kasutu. Aga see keskendub JavaScripti keele ja selle süntaksi paljude peamiste kontseptsioonide.

Tegelikult skript

Kui kopeerida selle koodi Net Notepad Page ja salvestada see fail.html, siis kui avate faili, näete järgmist:

Maame, kuidas see välja viime.

var x \u003d 5;

Siin deklareerime muutuja X, mis on võrdne 5-ga.

Stop! Kas sa tead, mis muutuja on?

Kui ei, klõpsake seda ja loe selgitust.

Kuidas arvuti töötab? Kõik andmed salvestatakse kettale ja koht, kus nad asuvad, peavad olema selged, et need otsivad. Iga programm (ja skript ei ole midagi muud kui väike programm) töötab mõnede andmetega. Seetõttu on mugav kohe "koht koht" neile. See koht on see märgistatud mälu Ja muutuja muutub. Miks "muutuja"? Kuna seda ala saab täita erinevate väärtustega. Näiteks kui me töötame kalkulaatoriga, registreeritakse programm nendega, mida me sisestame, registreerisime programmi vastavates muutujatele. Ja kui vajutate täitmisnuppu, kasutab algoritm sisestatud väärtusi.

Programmi koodis tähistatakse muutujad nimed, mida me ise nende jaoks leiutame. Nimede loomiseks on teatud reeglid, mis võivad erinevates programmeerimiskeeltes erineda. Need piirangud, mida allpool kirjeldatakse allpool, on spetsiaalselt JavaScripti.

var. - märksõna muutuja deklareerimiseks (inglise keeles).

x. - muutuja nimi.

Piirangud: muutuja nime saab kasutada ainult ladina tähed (mis tahes registris), numbreid ja sümboli sümbolit. Sellisel juhul ei tohiks muutuja numbritega alustada. Ja puuduvad lüngad.

Õige muutuja nimed:

Vale muutuja nimed:

JavaScripti keel on registri suhtes tundlik.

myvar., Myvar. ja myvar. - erinevad muutujad.

(Muide, registri kohta. Keele nimi ise on kirjutatud suurte J ja S: JavaScript. On eksiarvamus, et see on vajalik selle sõna kirjutamine HTML-silte. Aga HTML ei ole tundlik Register, nii et saate kirjutada, nagu te palun. Ma olen harjunud vähe, nagu minu lemmik kodusiit, keegi - suur.)

Selles skripti korral määratakse muutuja kohe deklareerimisel väärtuseks. See ei ole kohustuslik. Väärtust saab määrata hiljem. Line lõpus on punkt komaga. Sellisel juhul ei ole ka vajalik. Kuid suurte ja keeruliste skriptide puhul on mõnikord oluline, nii et ma näitan täielikku üksikasjalikku kirjet. Dunaev on see string lihtsalt x \u003d 5., selgesõnaline väljakuulutamine var. Samuti ei ole siin vaja. Kuid (IMHO) on veel eelistatavalt.

Järgmisel real, nagu te juba arvate, deklareeritud muutuja y.. Ta anti juba välja kuulutatud tähenduses x., 3 rohkem kui x..

Ja seejärel nimetatakse meetodit alert ().

See meetod kuvab dialoogiboksi sulgudes määratud sõnumiga. See on kõigi JavaScripti meetodite süntaks: meetodi nimi ja sulgudes selle sisuga.

Selle meetodi sisu on muutuja Y väärtus ja dialoogiboksis näeme kaheksa. Mõistis, miks?

Kasulikud tühikud

Kuna me kohtusime meetodiga alert ()Siis on siin selle lihtne ja kasulik rakendus: mõnikord pole saidi mõned leheküljed veel tehtud ja lingid on juba valmis. See on ebameeldiv saada "Page 404". Samuti ei ole väga meeldiv oodata, kuni see saapad ja seejärel teada, et sektsioon arengut. Ma pidurin alati selliseid linke järgmiselt:

"JavaScript: hoiatus (" Arengu leht ");"\u003e Menüüelement

Muide, siin on veel üks võimalus JavaScripti koodi rakendamiseks HTML-koodi rakendamiseks. Siin lisatakse see atribuudile href. Tag viide ja tutvustas läbi märksõna " javaScript:"(Käärsoole ja järgneva ruumiga: pöörake alati tähelepanu süntaktilisele tühiasile). Pöörake tähelepanu traditsioonilistele topelt hinnapakkumistele HTML atribuutiväärtuse ja "pesastatud" jutumärkide tekstis skripti ise.

Varsti õpime näiteks HTML-märgiste erilist "sündmuse" atribuutidest, näiteks onclick.Mis on spetsiaalselt loodud JavaScripti koodi tutvustamiseks ja ei nõua märksõna.

Niisiis, me õppisime:

kuidas kuulutada Script HTML-dokumendis, millel on JavaScript kommentaarid, kuidas deklareerida muutujaid ja anda neile õiged nimed, samuti meetodite süntaks ja konkreetselt hoiatusteate () meetodi süntaks.

Ja ka õppinud: