Számos kéréssel futtat egy sorozatot javaScript leckék. Ha határozottan konfigurálódik, a JS mester, azt jelenti, hogy alapvető ismerete van a HTML és a CSS-ről, mivel ez egy alap, amely nélkül nehéz megérteni, hogy mit fogunk beszélni.

Az oldalunkatól kezdve megpróbálom megmondani az érthető nyelvnek, igazi példákat mutat az életből, mert minden összehasonlítva van.

Mi a JavaScript, vagy hogyan kell megérteni, hogy milyen célra van szükség a webfejlesztés során!

Egy olyan világban élünk, ahol mindenki kézzelfogható, végrehajtjuk azokat az ötleteket, amelyek a fejünkhöz jönnek. Különböző technikával mozogunk házakat, autókat. Ez azt jelenti, hogy mit tehetünk a valós világban is képviselteti képest HTML, ahol járnak, mint építőanyag, az alapítvány, amelyen mindent tartja, és amikor cSS Súgó Ezt a világot készítjük, színesvé tesszük, ahogy maguk is meg akarták látni.

Valószínűleg csodálkozol, ha a HTML és a CSS az, ami körülvesz minket, akkor mi a JavaScript? Ahol a világunkban nyilvánul meg.

Egyszerűen azt hiszem, megmagyarázza a Movie Gary film példáján, azt hiszem, sokan úgy néztem meg, és megértettem, mit beszélünk. A film forgatókönyve szerint tudjuk, hogy Gary birtokolta a képességeket, varázsló volt, és egy mágikus pálna segített ebben. Ez volt a varázspálca, amely lehetőséget adott neki a mágia létrehozására, olyan szintre, mint amennyire ő rendelkezett, hogy egyedülálló legyen.

A JavaScript egy varázspálcaEz minden webfejlesztővel rendelkezik, de milyen varázslatot hozhat létre, csak a fejlesztő ismeretétől függ, amellyel rendelkezik. Azok, akik elsajátították ez a nyelva varázslók és a göndör csodák.

JavaScript nyelv A HTML és a CSS összetevői nélkül nem fullítják őket. Számos programozó említi a weboldal "rétegek" három nyelvét: HTML, CSS és JavaScript.

HTML. A hipertext-jelölés első nyelve - strukturális rétegeket biztosít, amely kifejezetten szervezi az oldal tartalmát, például szöveget, kép más elemeket.

Második, CSS. (Cascading Style Sheets) forma gyönyörű dekoráció, HTML-tartalom megjelenése.

És a harmadik JavaScript. - Viselkedési rétegek hozzáadása, a weboldal újjáélesztése, az interaktív, azaz elemek létrehozása a látogatókkal való kölcsönhatásba.

Ennek eredményeképpen a JavaScript nyelv elsajátításához jó ötlete van a HTML és a CSS-nek.

A programozás hihetetlen mágikusnak tűnhet, nem érhető el egyszerű halandó. Azonban a legtöbb fogalmát nem nehéz megérteni. A JavaScript meglehetősen barátságos a kezdő programozókkal kapcsolatban, de mégis nehezebb, mint a HTML vagy a CSS, ezért a leckék sorozata keretében elsajátítjuk a programozás alapvető fogalmát, és alkalmazhatjuk őket, amikor írásban írnak JavaScript.

Megismerkedhet az új szimbólumokkal () ,,, , (),!, Ismerje meg az új szavak megnevezését (var, , más, ha), elemezzük az írásjelek szabályait és a nyelv szintaxisát, és mindezt a mágia megteremtése érdekében.

Anyaga elő Denis égett, írja meg észrevételeit, és biztos, hogy ossza ezt az anyagot a barátaiddal.

• Átruházás

Az anyag, amelynek fordítása ma közzéteszünk, a JavaScript alapjaival foglalkozik, és kezdő programozók számára készült. Ez egy kis referenciakönyvként tekinthető az alapvető JS tervekről. Itt vagyunk, különösen beszélünk az adattípus-rendszerről, a változókról, a tömbökről, a funkciókról, az objektumok prototípusairól, valamint a nyelv más jellemzőiről.

Primitív adattípusok

A Javascript a következő primitív adattípusokat tartalmazza: szám, logikai, karakterlánc, meghatározatlan, null. Azonnal meg kell jegyezni, hogy amikor dolgozik primitív adattípusok, például zsinórral literálok, mi nem is végeznek explicit konverzió, akkor érheti el a módszereiket és tulajdonságait. Az a tény, hogy az ilyen műveletek végrehajtásakor a literálok automatikusan megfelelő objektumcsomaggal vannak felszerelve.

▍ lap

A JavaScript csak egyfajta számmal rendelkezik - ezek a két pontosság száma lebegőponttal. Ez arra a tényre vezet, hogy az egyes kifejezések számításának eredményei számtani helytelenül helytelenek. Lehet, hogy már tudja, hogy a JS-ben a 0,1 + 0,2 expresszió értéke nem egyenlő 0,3. Ugyanakkor, amikor az egész számokkal dolgozik, ilyen problémák nem figyelhetők meg, azaz 1 + 2 \u003d\u003d\u003d 3.

A JavaScript számobjektummal rendelkezik, amely a numerikus értékek objektumcsomagja. Számos objektumokat hozhat létre a VAR A \u003d szám (10) típusvezérléssel, vagy a fent leírt rendszer automatikus viselkedésére támaszkodhat. Ez különösen lehetővé teszi a számban tárolt módszerek hívását.

(123) .tostring (); // "123" (1.23) .tofixed (1); //"1.2 "
Vannak olyan globális funkciók, amelyek más típusú értékeket számszerű típusúak lehetnek. Ez a parseint (), a parsefloat () és a szám () design, amely ebben az esetben olyan hagyományos függvényként működik, amely a típusok átalakítását végzi:

PARSEINT ("1") // 1 parseint ("szöveg") // NAN parseFloat ("1.234") ///1,234 szám ("1") // 1 szám ("1.234") //1.234
Ha a működtetés során a számokkal együtt kiderül valamit, ami nem szám (néhány számítás alatt, vagy ha megpróbál konvertálni semmit a számra), a Javascript nem ad hibát, de a hasonló művelet eredményét NAN ( nem-szám, nem szám). Annak érdekében, hogy ellenőrizze, hogy a NAN értéket használják-e, használhatja az ISNAN () funkciót.

Számtani műveletek A JS meglehetősen ismeri a JS-t, de figyelmet kell fordítani arra a tényre, hogy a + üzemeltető elvégezheti a számok hozzáadását és a húrok összekapcsolását.

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

▍ stroke

A JavaScript sorai Unicode karakterek szekvenciái. String Literálok létrehozása, a szövegbe kerülő szövegbe való belépéskor kettős (") vagy egyetlen (" ") idézetekben. Amint már említettük, a karakterláncokkal való munkavégzés során a megfelelő objektumcsomagolásra támaszkodhatunk, amelynek prototípusa számos hasznos módszerrel rendelkezik, köztük - szubsztring (), indexof (), Concat ().

"Szöveg" .Substring (1,3) // ex "szöveg" .indexof ("x") // 2 "szöveg" .concat ("vége") // szövegvég
Sorok, mint más primitív értékek, immutabelins. Például a Concat () módszer nem módosítja a meglévő karakterláncot, és létrehoz egy újat.

▍Logikus értékek

A JS logikai adattípust két érték jellemzi - igaz és hamis. A nyelv automatikusan átalakíthatja a különböző értékeket a logikai adattípusra. Tehát hamis, a hamis logikai érték mellett nulla, meghatározatlan, "" (üres karakterlánc), 0 és NAN. Minden más, beleértve az objektumokat is, igazi értékek. Folyamatban logikai hadműveletek Minden, ami igaznak tekinthető igaznak, igaznak, és mindent, ami hamisnak tekinthető hamisnak. Vessen egy pillantást a következő példára. A fenti elvekkel összhangban az üres karakterláncot hamisnak kell átalakítani, és ennek a kódnak a végrehajtásának eredményeképpen a konzolban a vonal hamis lesz a konzolba.

Legyen szöveg \u003d ""; Ha (szöveg) (konzol.log ("ez igaz");) más (konzol.log ("ez hamis");)

Tárgyak

Az objektumok dinamikus szerkezetek, amelyek egy pár értékből állnak. Az értékek primitív adattípusok lehetnek, lehetnek objektumok vagy funkciók.

Az objektumok a legkönnyebben hozhatók létre az objektum Literal Syntax használatával:

Legyen OBJ \u003d (üzenet: "üzenet", Dosomething: Funkció () ())
Az objektum tulajdonságai bármikor olvashatók, olvashatók, adjunk hozzá, szerkeszthetők és törölhetők. Így történik:

• Olvasási tulajdonságok: object.name, objektum.
• Adatok rögzítése a tulajdonságokhoz (ha a nem létező tulajdonság nem létezik, hozzáadunk egy új tulajdonságot a megadott billentyűvel): object.name \u003d érték, objektum \u003d érték.
• Tulajdonságok törlése: Object.Name törlése, objektum törlése.

Íme néhány példa:

Legyen OBJ \u003d (); // üres objektum létrehozása obj.message \u003d "Üzenet"; // új tulajdonság hozzáadása obj.message \u003d "Új üzenet"; // Object.Message tulajdonságok szerkesztése; // Törölje az ingatlant
A nyelvben lévő objektumok hash táblázatok formájában valósulnak meg. Létrehozhat egy egyszerű hash táblát az objektum.Create parancs (NULL):

Legyen francia \u003d objektum.Create (null); Francia ["igen"] \u003d "oui"; Francia ["nem"] \u003d "nem"; Francia ["igen"]; // "oui"
Ha az objektumot impozánsnak kell tenni, akkor az objektum.freeze () parancsot használhatja.

Az objektum összes tulajdonságainak felsorolásához az Object.Keys () parancsot használhatja:

Funkció LogProperty (név) (Console.Log (név); // tulajdonságnév konzol.log (OBJ); // tulajdonságérték) Object.keys (OBJ) .FORMFOREECHER (LOGPROPERTY);

▍Kapja a primitív típusok és objektumok értékeit

-Ért praktikus munka A primitív értékekkel már azt mondták, hogy olyan objektumként érzékeljük őket, amelyek tulajdonságai és módszerei vannak, bár ezek nem objektumok. A primitív értékek változhatatlanok, az objektumok belső szerkezete változhat.

Változók

A Javascriptben a változók a VAR, LET és CONST kulcsszavak segítségével jelenthetők meg.

A VAR kulcsszó használata esetén változó, és ha szükséges, hogy inicializálja azt egy bizonyos értékkel. Ha a változó nincs inicializálva, értéke meghatározatlan. A VAR kulcsszóval bejelentett változók funkcionális hatókörvel rendelkeznek.

A LET kulcsszó nagyon hasonlít a VAR-hez, a különbség az, hogy a kulcsszóval bejelentett változók blokkkövetési lehetőséggel rendelkeznek.

A láthatóság blokkkövetése a CONST kulcsszó használatával is rendelkezik, amely szerint az ilyen változók értékei nem módosíthatók, helyesen hívják a "konstansokat". A CONST kulcsszó, amely "befagyasztja" a használata által bejelentett változó értékét összehasonlítható az objektummal.Freeze () módszer, "fagyasztás" objektumok.

Ha a változó bármely funkción kívül van bejelentve, annak hatálya globális.

Tömbök

A JavaScript tömböket objektumok segítségével hajtják végre. Ennek eredményeként a tömbökről beszélünk, valójában a tömbökhez hasonló tárgyakat tárgyaljuk. A tömb elemei segítségével működhet az indexük segítségével. A numerikus indexeket húrokká alakítják át, és nevekként használják a tömbök értékeinek eléréséhez. Például az ARR típus kialakítása hasonló az ARR ["1"] kialakításához, a másik pedig ugyanazt az értéket kapja: Arr \u003d\u003d\u003d Arr ["1"]. A fentieknek megfelelően egy egyszerű tömb kijelentette a LETRL \u003d ["A" parancsot, B "," C "], úgy tűnik, hogy a következő:

("0": "A", "1": "B", "2": "C")
A tömb elemeinek eltávolítása A törlés parancs segítségével "lyukakat" levelek. A probléma elkerülése érdekében használhatja a Splice () parancsot, de lassan működik, hiszen az elem eltávolítása után a tömb fennmaradó elemeit mozgatja, sőt, valójában a tömb elejére váltja őket .

Legyen ARR \u003d ["A", "B", "C"]; Törölje ARR; Konzol.log (ARR); // ["A", üres, "c"] konzol.log (Arr. Length); // 3.
A tömbök módszerei megkönnyítik az ilyen adatstruktúrák halmozóként és sorokban:

// Stack Let Stack \u003d; stack.push (1); // stack.push (2); // LAST LAST \u003d Stack.pop (); // console.log (utolsó); // 2 // Queue Legyen Queue \u003d; queue.push (1); // queue.push (2); // Let First \u003d Queue.Shift (); // console.log (első); //

Funkciók

A JavaScript funkciói objektumok. Funkciók lehet rendelni változók tárolt objektumok vagy tömbök, adási más funkciókra formájában érvek és visszaút egyéb funkciókat.

Háromféleképpen kell kijelenteni a funkciókat:

• Funkciónyilatkozat vagy funkció nyilatkozat).
• Használata funkcionális kifejezések (Function Expression), amelyeket más néven funkcionális literálok (FUNKCIÓ Literal).
• A felvételi funkciók szintaxis (nyíl funkció) használata.

▍Classical AD funkció

Ezzel a megközelítéssel a függvények nyilatkozatával a következő szabályok érvényesek:

• Az első kulcsszó a Nyilatkozat sor funkciójában működik.
• A funkcióknak nevet kell adniuk.
• A funkció csak akkor használható, hogy a kód előtt van ez által a mechanizmus emelő nyilatkozat funkciókat a felső része hatálya láthatóság, amelyben megállapították.

Itt van a klasszikus hirdetésfüggvény lista:

Funkció Dosomething () () ()

▍ Funkcionális kifejezések

A funkcionális kifejezések használata esetén a következőket kell figyelembe vennie:

• A funkció kulcsszó már nem az első szó a funkció sor funkciójában.
• A függvény nevének jelenléte opcionális. A névtelen és nevű funkcionális kifejezések használhatók.
• Hívásparancsok Az ilyen funkcióknak követniük kell hirdetéseik parancsát.
• Ezt a funkciót közvetlenül a bejelentés után lehet elindítani, az IEFE szintaxis segítségével (azonnal meghívták a funkció kifejezést - azonnali funkcionális kifejezést).

A funkcionális kifejezés így néz ki:

Legyen Dosomething \u003d funkció () ()

▍ Stretching funkciók

A nyílfunkciók valójában "szintaxiscukornak" tekinthetők névtelen funkcionális kifejezések létrehozásához. Meg kell jegyezni, hogy az ilyen funkcióknak nincs saját tulajdonsága ennek és érveknek. A nyílfunkció bejelentése így néz ki:

Hagyja dosomething \u003d () \u003d\u003e ();

A hívásfunkciók promóciói

A funkciók különböző módon hívhatók.

Normál funkcióhívás

Dosomething (argumentumok)

Hívás funkció objektum módszerként

Theobject.DoSomething (argumentum) Theibject ["Dosomething"] (Arguments)

A hívás funkció egy tervező formájában

Új Dosomething (argumentumok)

Funkció hívása az Apply () módszerrel

Dosomething.Apply (theobject,) dosomething.call (theobject, arguments)

Funkció hívása a kötődés () módszerrel

Legyen dosomethingwithobject \u003d dosomething.bind (theobject); dosomethingwithobject ();
A funkciók nagy vagy kisebb számú argumentummal hívhatók, mint a bejelentett paraméterek száma. A "felesleges" funkció működése során az érveket egyszerűen figyelmen kívül hagyják (bár a funkció hozzáféréssel rendelkezik hozzájuk), a hiányzó paraméterek meghatározatlanok lesznek.

A funkciók két pszeudo-paraméterrel rendelkeznek: ez és argumentumok.

▍ Esküvői szó ez

Ennek egyik kulcsszava egy függvény kontextus. Az a érték, amelyre azt jelzi, hogy a funkció okozott. Ez az, amit érték figyelembe kulcsszóval e módjától függően a funkció meghívása (ők, példákkal kódot, tervei, amelyeket itt használt fentiek szerint):

• Normál funkcióhívás - Ablak / undefined.
• A hívás funkció objektum-módszerként - theobject.
• Funkció hívása tervező formájában - egy új objektum.
• Funkció hívása az Apply () módszerrel - theobject használatával.
• Funkció hívása a kötődés () módszerrel - theobject.

▍ Esküvői szó argumentumok

Az argumentumok kulcsszava egy pszeudoparameter, amely hozzáférést biztosít a funkció hívásakor használt összes argumentumhoz. Úgy néz ki, mint egy tömb, de nem tömb. Különösen nincs tömb módszere.

Funkciócsökkentés (teljes, érték) függvényösszeg () () (hagyja args \u003d array.prototype.slice.call (argumentum); vissza az args.Reduce (Reductosum, 0);) összege (1,2, 3);
Az érvek kulcsszavának alternatívája a fennmaradó paraméterek új szintaxisa. A következő példában az args egy tömb, amely mindent, amit hívnak híváskor.

Funkció összege (... args) (Return Args.Reduce (redukció, 0);)

▍ Üzemeltetői visszatérés.

A függvény, amelyben a visszatérési kifejezés hiányzik, visszaállítja a meghatározatlant. A visszatérési kulcsszó használatával figyeljen arra, hogy a pontosvessző automatikusan beillesztésének mechanizmusa hogyan működik. Például a következő funkció nem ad vissza üres objektumot, de nem definiált:

Funkció Getobject () (Visszatérés ()) Getobject ()
Annak érdekében, hogy elkerüljük az ilyen problémát, a nyitó tartónak ugyanazon a soron kell elhelyezni, amelyen a visszatérési nyilatkozat található:

Funkció Getobject () (Visszatérés ())

Dinamikus gépelés

A JavaScript egy dinamikus gépeléssel rendelkező nyelv. Ez azt jelenti, hogy a konkrét értékek típusok, és a változók nem. A program végrehajtása ugyanabban a változóban értékeket rögzíthet különböző típusok. Itt van egy példa a különböző típusú funkciókra:

Funkciónapló (érték) (konzol.log (érték);) napló (1); napló ("szöveg"); log ((üzenet: "szöveg"));
A változóban tárolt adatok típusának tisztázása a TypeF () operátor:

Legyen n \u003d 1; Típusú (n); // számot s \u003d "szöveg"; Típus (ok); // String Let Fn \u003d funkció () (); Típusú (fn); // funkció.

A végrehajtás egyetlen áramlási modellje

A Javascript végrehajtási környezet egyetlen menetes. Ezt különösen a két funkció egyidejű végrehajtásának lehetetlenségében fejezik ki (ha nem veszi figyelembe az aszinkron végrehajtás lehetőségeit a kódex, hogy nem érintünk itt). A végrehajtási környezetben van egy úgynevezett eseménysor (eseménysor), amely tárolja a feldolgozandó feladatok listáját. Ennek eredményeként a kölcsönös erőforrás-blokkoló problémák problémája szokatlan a JS végrehajtásának egyetlen virágzási rendszerére, így nincs blokkoló mechanizmus. Az eseménysorba esett kódot azonban gyorsan végre kell hajtani. Ha túlterheli a nehéz munkával, a böngésző alkalmazásban, a főfolyamat, az alkalmazásoldal nem válaszol a felhasználónak való kitettségre, és a böngésző kínálja az oldal bezárását.

Kivételkezelés

A Javascript rendelkezik egy mechanizmussal a kivételkezeléshez. Az ilyen mechanizmusok szerint meglehetősen rendes módon működik, az elv: olyan kód, amely hibát okozhat a próbálkozás / fogási tervezés segítségével. Maga a kód a kipróbálási egység, a hibák feldolgozása a fogási blokkban történik.

Érdekes megjegyezni, hogy néha JavaScript, ha szabadúszó helyzete van, nem ad ki hibaüzeneteket. Ez annak köszönhető, hogy a JS nem dobta ki a hibákat, mielőtt elfogadja az ECMAMSCATE 3 szabványt.

Például a kód következő fragmense, a "fagyasztott" objektum megváltoztatására irányuló kísérlet, de a kivételt nem adják ki.

Legyen obj \u003d object.freeze (()); Obj.message \u003d "szöveg";
A "Silent" JS hibák közül néhány szigorú módban nyilvánul meg, a "Használati szigorú" tervezés használatával kikapcsolhatja; .

Prototípus-rendszer

Az ilyen JS mechanizmusok alapja, mint funkciótervezők, az objektum.Create parancs (), az osztály kulcsszó a prototípusok rendszere.
Tekintsük a következő példát:

LET SERVICE \u003d (Dosomething: Funkció () ()) Legyen specializedservice \u003d object.Create (szolgáltatás); Console.log (specializedservice .__ proto__ \u003d\u003d\u003d szolgáltatás); // igaz.
Itt egy speciális szolgáltatási objektum létrehozása, amelynek prototípusa szükséges az objektum objektum elkészítéséhez.Create (). Ennek eredményeképpen kiderül, hogy a Dosomething () módszer hívható a speciális szolgáltatási objektumhoz való érintkezéssel. Ezenkívül ez azt jelenti, hogy a speciális szolgáltatási objektum __proto__ tulajdonsága a szervizobjektumot jelzi.

Hasonló objektum létrehozása az osztály kulcsszó segítségével:

Osztályszolgáltatás (Dosomething ()) Osztály specializedservice kiterjeszti a szolgáltatást () Let SpecialedService \u003d Új specializedservice (); Console.log (specializedservice .__ proto__ \u003d\u003d\u003d specialedService.prototípus);
A szolgáltatási osztályban bejelentett módszerek hozzáadódnak a szerviz.prototípus objektumhoz. A szolgáltatási osztályú példányoknak ugyanaz a prototípus (szerviz.prototípus) lesz. Minden esetben átruházza a híváshívásokat a Service.prototípus objektumra. Ennek eredményeképpen kiderül, hogy a módszereket csak egyszer, a service.prototípusban, majd az osztály minden példánya szerint "örökölt".

▍Closure prototípusok

Az objektumok más tárgyak "örökösei" lehetnek. Minden objektum prototípussal rendelkezik, amelyek módszerei állnak rendelkezésre. Ha megpróbálja hivatkozni arra a tulajdonságra, amely nem az objektumban van, a Javascript megkezdi keresni a prototípus láncot. Ez a folyamat addig folytatódik, amíg az ingatlan megtalálható, vagy amíg a keresés eléri a lánc végét.

A JavaScript funkcionális programozásánál

BAN BEN JavaScript funkciók Az első osztályú objektumok, a nyelv támogatja a lezárási mechanizmust. Ez megnyitja a funkcionális programozás módosításának módját a JS-ben. Különösen a magasabb rendű funkciók alkalmazásának lehetőségéről beszélünk.

A lezárás olyan belső funkció, amely hozzáférést biztosít a szülői függvényen belül bejelentett változókhoz, még akkor is, ha a szülői funkció teljesül.

A legmagasabb rendelési funkció olyan függvény, amely képes más funkciókat, mint argumentumok, visszatérési funkciók, vagy mindkettő.

A funkcionális programozás a JS-ben számos kiadványban kiemelve. Ha érdekes az Ön számára - itt van néhány anyag ezen a témában

JavaScript Syntax bemutató

Az olvasás elkezdése előtt javaScript bemutatóA szoftver ismereteinek kell lennie.

Ez lesz egy nagy plusz a JavaScript szintaxis tanulásában, ha már ismeri a programozási nyelvet, például a PHP-t, a C-t vagy a Pascal-t, és megérti, hogy milyen változó, adattípus, funkció vagy tömb.

Ha azonban nem ismeri a programozási nyelveket, akkor nem érdemes aggódni, megadva javaScript tankönyv Csak azoknak tervezték, akik először a programozás tanulmányozását folytatják.

JavaScript (JavaScript) - Ez egy kliens programozási nyelv, amely vezérelhető HTML-oldal elemeit (HTML) és egy web böngésző, kényszeríti őket, hogy mozog, reagál a különböző események (kattintás, billentyűzet megnyomásával), hozzon létre egy csomó érdekes programok ( Szkriptek): Vizsgálatok, animáció, fotógalériák (például Vkontakte-ben), játékok és így tovább.

Hogyan működik a JavaScript tanulmányozása

Tanulmány javaScript nyelváltalában négy szakaszra oszlik:
1. JavaScript szintaxis (Ez a bemutató),
2. Tanulmány Dom és BOM.,
3. DOM és BOM ellenőrzés a JavaScript használatával,
4. Különböző JavaScript-könyvtárak tanulmányozása. jquery. - a legnépszerűbb ebben a pillanatban könyvtár (JQuery tankönyvnek meg kell jelennie ezen az oldalon 2015 végén).

A DOM a dokumentum objektummodellje. A DOM technológiának köszönhetően a HTML oldalak címkéi az objektumok objektumait és minden objektumot képviselik ebben a fában, egyedülálló cím van. A JavaScript nyelv erre a címre hivatkozva hozzáférhet egy adott HTML-címkéhez, és kezelheti (a szín, a méret, a helyzet és az MN. Dr.).

A BOM böngésző dokumentum modell. A szerkezet ugyanaz, mint a DOM, csak ahelyett, hogy a HTML-oldal tárgyak, amelyek a böngésző tárgyak: böngésző ablakot, a böngésző méretben kapható, látogatások történelem, állapot húr, stb

A DOM és a BOM tanulását követően többé-kevésbé összetett szkripteket hoznak létre az oldal és a böngésző által kölcsönhatásban lévő JavaScript-en.

Majd miután elsajátította egy kicsit, néhány tanulmány JavaScript könyvtár, mint például a jQuery, neki köszönhetően létre tudja hozni az azonos programok a JavaScript, csak sokkal gyorsabb és hatékonyabb.

Néhány webmester azonnal elkezdi tanulni jQuery, kihagyva az előző három szakaszban, de én nem ajánlom ezt, mert minden esetben meg kell érteni a JavaScript szintaxis és ismerik a DOM / BOM tárgyak tulajdonságaik, módszerek és a célpontok.

Milyen programokat lehet írni a JavaScript használatával

Használata sok érdekes programot (szkripteket) hozhat létre:
- olyan parancsfájlokat hozhat létre, amelyek megváltoztatják a webhelyoldal elemeit vagy helyét, egy vagy másik gomb megnyomásával,
- létrehozhat egy animációt,
- manipulálja az űrlapokat, például a felhasználó által megadott adatok ellenőrzését,
- különböző tesztek létrehozása, például az EGE (iskolai vizsgák) típusát, és azonnal megkapja az eredményt,
- Hála a BOM, megtalálja azokat a jellemzőket, valamint a böngésző és a számítógép számítógép meglátogatott webhely, amely lehetővé teszi, hogy a különböző látogató méter,
- A JavaScript segítségével még játékokat, rajzfilmeket és sok más érdekes és hasznos programot is létrehozhat.

Mi a célja ennek a bemutatónak a JavaScript-en?

Ennek célja javaScript könyvek meg kell tanítani javaScript szintaxis alapjai, bevezetni programozás és fogalmak, például változók, adattípusok, műveletek, elágazó üzemeltetők, funkciók, ciklusok, tömbök, tárgyak stb. Mindez megtalálható más programozási nyelvekben, így a JavaScript elsajátításával sokkal könnyebb lesz más nyelvek megtanulása, például PHP, C ++ vagy Python.

JavaScript tankönyvszerkezet

BAN BEN tankönyv a JavaScript-en.A következő témák és órák kerülnek figyelembe.

JavaScript - belép a játékba, amikor meg kell tennünk néhány lépést az ügyféloldalon, amely címzettje a weboldalunkat.

A JavaScript megváltoztathatja a weboldalt a kiszolgáló elérése nélkül, ellenőrizze az adatfelhasználó értékeit, és bármilyen más műveletet végez.

Ez a cikk olyan alapinformációkat tartalmaz, amelyek lehetővé teszik a JavaScript használatát.

A szkript közvetlenül az oldalkódba helyezése

A JS kódot közvetlenül az oldal belsejébe helyezheti.

Kód eltávolítása egy külön fájlban

Lehet benyújtani JavaScript-kód a külső fájlhoz, és használja a linket az oldalon

Ebben az esetben a záró címke szükséges.

A legjobb szkriptek beillesztése a zárócímke előtt

Változók

A változók nevei

A változó nevek nagy vagy kis betűvel, aláhúzással vagy $ jelekkel kezdődhetnek.

A név lehet számok, de lehetetlen elindítani a változó nevét a számokkal.

A JavaScript érzékeny a regiszterre: a MyText és a MyText két különböző változó.

Jobb használni a Camelcase nevét, kezdve minden szót a változó nevében a nagybetűvel.

Kijelentés

A JavaScriptben használt deklarációs változókhoz var..

Var mytext; // undefined mytext \u003d "Hi!"; Riasztás (mytext);

Közvetlenül a változó kijelentése után értéke meghatározatlan.

A bejelentett értékváltozót hozzárendelhet:

Var mytext \u003d "Szia!";

Számos változót is kijelenthet egy var:

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

A VAR érték hozzárendelése során elhagyhatja, de jobb, ha nem tegyünk.

A változók típusai

A JavaScript segítségével a sorokat használhatja:

Var mytext \u003d "Hello!";

egész számok:

Var mynumber \u003d 10;

Frakciós számok:

var pi \u003d 3.14;

Logikai értékek:

Var isboolean \u003d hamis;

A JavaScript szintaxis részletei

Hozzászólások

Az egyik sorban szereplő megjegyzéseket "//" osztják. Minden, ami a karakterek után jön, megjegyzésnek számít.

Számos vonal megjegyzéséhez használnia kell a "/ *" -ot, hogy kijelölje a megjegyzés kezdetét, és a "* /" megjelölje a megjegyzés végét

/ * Itt van kommentált kód, és ez is megjegyzés * /

Az üzemeltetők szétválasztása

Az üzemeltetők szétválasztásához használni kell ";"

Kívánatos, de nem feltétlenül használjon réseket, hogy javítsa a szöveg olvashatóságát.

Munka húrokkal

VAR STR \u003d 4 + 5 + "7"

sztring értéket ad " 97 »Str.

VAR STR2 \u003d "7" + 4 + 5

sztring értéket ad " 745 - Str2-ben.

Az a tény, hogy a hozzáadott értéket egymás után kiszámítják - balról jobbra. Ha van 2 szám - az eredmény lesz a szám. Ha egy karakterláncot és egy számot összecsukag, akkor a számot egy karakterláncként és két vonal kombinációjának érzékelik.

Sorfordítás

A karakterláncot a használt számra parseint () és parsefloat ()

Ezek a funkciók két argumentumot kapnak. Az első olyan karakterlánc, amelyet lefordítanak a számra és a második - a számrendszer alapjára, amelyet lefordítanak. A vonal megszakítása decimális szám, a második érvként 10-et kell használnia

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

JavaScript funkciók

A JavaScript funkciói az alábbiak szerint kerülnek megállapításra:

Funkció myfunkció () (néhány JS kód)

A használni kívánt érték visszaállításához visszatérés.:

Funkció mymultiplication (Paramone, Paramone * ParamTwo)

Az "névtelen" funkciót kijelentheti a funkció nevének nevének csökkentésével.

A funkciót paraméterként továbbíthatjuk egy másik funkciónak a nevének megadásával.

Tárgyak

Minden JavaScript egy objektum örökös.

Új létesítmény létrehozása

Var személy \u003d új objektum (); // az objektum személy személy létrehozása.Firstname \u003d "Andrew"; // Adja hozzá az első attribútum személyt .LASTNAME \u003d "PETERSON";

Másodszor, rövidebb lehetőség egy objektum létrehozásához

Var személy \u003d (// objektumos személy létrehozása): "Andrew", vezetéknév: "Peterson", getfullname: Funkció () (this this thisfirstname + "

Munka az objektum tulajdonságaival

var me \u003d új objektum ();

nekem ["név"] \u003d "Serg";
me.age \u003d 33;

Tömbök a JavaScriptben

Tömb létrehozása

Var arr \u003d új tömb (11, "Hello!", Igaz); // egy tömb létrehozása

Új felvétel új módja

Vararr \u003d; // egy tömb létrehozása

A JavaScript tömbökkel dolgozik

Az elemek száma a tömbben

VAR hossz \u003d Arr. Length; // 3.

Elemek hozzáadása egy tömbhöz - nyomja meg

arr.push ("új érték");

A tömb utolsó elemének kitermelése - POP

VAR LastValue \u003d Arr.Pop ();

Fegyverek kombinálása

var arm \u003d; var Longarray \u003d Arr.concat (Arr2); // két arresses arress és arr2 egyesítése egy Longarrey-ben

Csatlakozás - Merge A tömb összes eleme

var Longstring \u003d Arr.join (":") // "11: Hello!: igaz"

Összehasonlítás és logikai funkciók a JavaScriptben

Többé kevésbé

var istre \u003d 6\u003e \u003d 5; // több vagy egyenlő

Egyenlőség

var isfalse \u003d 1 \u003d\u003d 2; // egyenlő Istrue \u003d 1! \u003d 2; // nonavo var alsotrue \u003d "6" \u003d\u003d 6;

Identitás

var notidentical \u003d "3" \u003d\u003d\u003d 3 // HAMIS, mert adattípusok nem egyeznek Notidentical \u003d "3"! \u003d\u003d 3 // igaz, hiszen adattípusok nem esnek egybe

Ha az üzemeltető

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

Kapcsoló üzemeltető

Var ebéd \u003d Prompt ("Mit akarsz ebédre?", "Írja be az ebédelést itt"); Váltás (ebéd) (Case "Sandwich": Console.log ("biztos dolog! Egy szendvics, jön."); Szünet; tok "leves": console.log ; Szünet; tok "saláta": console.log ("jól hangzik! Mit szólnál egy császári salátáról?"); Szünet; tok ": console.log (" Pie "étkezés!") : konzol.log ("huh! Én" nem biztos benne, mi a "+ ebéd +". Hogyan működik egy szendvics hang?);););

Logikus és - &&

Ha (1 \u003d\u003d 1 && 2 \u003d\u003d 2) (riasztás ("igaz!");)

Logikus vagy - ||

Ha (1 \u003d\u003d 1 || 2 \u003d\u003d 3) (riasztás ("igaz!");)

Logikus nem -!

ha (! (1 \u003d\u003d 1)) (riasztás ("FALSE!");)

Ciklusok

-Ért

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

Míg

Míg (igaz) (// végtelen riasztási ciklus ("Ez soha nem fog megállni!");) Varnevek \u003d ["Sergey", "Andrey", "Petr"]; Míg (names.lengt\u003e 0) (riasztás (nevek [i]);)

Csinálni, miközben

Do (riasztás ("Ez soha nem fog megállni!");) Míg (igaz) (// végtelen ciklus)

Húrok

Text \u003d „bla-bla-bla-bla-Eric \\ blablabla Eric bla bla bla bla Eric \\ bla bla bla bla bla Eric”;

Szubsztrák.

Néha nem szeretné megjeleníteni a teljes. String, csak egy része. Például a gmail-beérkezett üzenetekben beállíthatja, hogy megjelenítse az egyes üzenetek első 50 vagy olyan karakterét, hogy előnézhessék őket. Ez az előnézet a szubsztrázás Az eredeti karakterlánc (az egész üzenet).

"Néhány szó" .Substring (x, y), ahol X az, ahol elkezdi a vágást és y, ahol befejezte az eredeti karakterlánc vágását.

A szám része egy kicsit furcsa. A "Hello" -ban kiválaszthatja a "Hello" -ot, írnád ezt: "Hello". aljzat (0, 2);

Gondolj az egyes karakterek bal oldalán, mint ez: 0-H-1-E-2-L-3-L-4-O-5.

Ha 0-os és ismét 2-nél vágsz, akkor csak ő marad.

További példák.:

1. A "Batman" első 3 betűje
"Batman" .Substring (0,3)

2. A "laptop" 4. és 6. betűje között
"Laptop" .Substring (3.6)

• hogyan kell behelyezni a szkriptet a HTML dokumentumba (általános információk);
• megjegyzések a JavaScript-en;
• hogyan kell változtatni, és adja meg nekik a megfelelő neveket;
• a szkript analízise és a módszerek szintaxisa;
• riasztási () módszer;
• hasznos tréfolás: "Plug" ideiglenesen nem működik

A szerzőtől

Számos különböző finomság van a weboldalak létrehozásában. De van három bálna. Ez HTML, CSS és JavaScript.

Azt javaslom, hogy az önkifejlesztést az alábbiak szerint szervezzem meg: Amint a HTML szintaxis, és megtanulja, hogy primitív oldalakat készítsen szöveggel, képek és táblázatokkal, csak csatlakozzon a CSS tanulmányához. Amint megérti, hogyan kell működnie a CSS-vel, kezdje el a JavaScript-et, párhuzamosan a "szókincs" -vel mindhárom nyelven. Úgy gondolom, hogy fél év alatt nagyon szép és funkcionális helyet építhet.

Nem tudtam, hogyan kell megközelíteni a JavaScriptet. Voltak tankönyvek, vagy túl elvont - elmélet, elméleti, és nem világos, hogy hogyan kell szerelni, hogy a gyakorlat, vagy éppen ellenkezőleg, túl specifikus: itt van egy sor kész receptek, hogy a felhasználásra és hogyan is Fordul - nem a haldokló dolog.

Valahogy egy tankönyv Vadim Dunaev. Sok, tudom, szidja ezt a bemutatót. Ezenkívül letöltöttem egy Frozo beolvasott PDF-t, ahol a "()" helyett "Q" lehet, és a latin betűket kódolják (helyek!) Hasonló oroszok, ezért ezek a kódok nem működnek. Általában meg kellett volna fogni. És őszintén szólva, ha nem olvastam semmit a JavaScript-ről, nem értem ezeket a hibákat, és csatlakoztam az átfutások számához. De aztán munka nélkül ültem, itt az ideje behatolni, és tetszett a tankönyv. De nagyon részletes, és olyan emberek számára készült, akik már kapcsolatba lépnek a programozással.

Megjegyzés 2012.

Most, néhány év múlva, és kezem ezt a tankönyvet a régi öröm nélkül. Elavult, az "élesített" az IE alatt meglehetősen felületes; Vannak valódi hibák és gondatlansági kód, és néhány hasznos dolog nem található. De összehasonlítva a "Crayframe vezetők", amelyek bőségben kibocsátott keresőmotorok, ez volt valami.

Szóval, megpróbálok megölni két nyúlást. Írjon valamit egyértelműen bármilyen vízforralóra és ugyanakkor konstruktív-kognitív. Annak érdekében, hogy ez a vízforraló az én tippjeim alapján írjon egy egyszerű, de teljesen eredeti forgatókönyvet.

Helyezze be a HTML dokumentumot

Valószínűleg ilyen címkéket láttál a HTML-kódokban:

Ez az Abrakadabra a címkék között van, és van egy szkript.

Tagja magát

Ez az attribútum opcionális. Érdemes használni a nyelv változatának tisztázását (Javascript1.1, Javascript1.2, stb.), Vagy ha másik nyelvet használ (például,

Típus attribútum, amely a szövegtípust jelzi: szöveg / JavaScript.. Megjelent a HTML 4.0 verzióban. Azt javaslom, hogy használja.

Mielőtt az attribútumba költözne src, megtudja, melyik HTML-kód válaszfalakat illesztheti be a szkripteket.

Bármilyen. De az elmével.

Gyakran a szkript jelzi egy adott szöveg visszavonását, amelyet itt és most hívnak. Ez a parancsfájl közvetlenül beillesztésre kerül ", A helyszínen."

Vannak olyan parancsfájlok, amelyek olyan változó hirdetésekkel rendelkeznek, amelyek más szkriptekben használhatók az oldalon, olyan funkciókkal, amelyek a HTML-kód bármely oldaláról hívhatók. Az ilyen szkriptek a leginkább ésszerűek a címkék között és .

De teheti meg, hogy azonnal használja a szkriptet több weboldalon. Ehhez a kódot külön fájlban kell rögzíteni a kiterjesztéssel .js. (például, myscript_1.js.). Címkék Már nem szükséges írni benne.

Aztán, hogy hívja a szkriptet a weboldalról, szükségünk lesz egy attribútumra src. Ez működik, mint egy hasonló címke attribútum :

Tehát ez a különböző oldalakon, ugyanazon kalapban vagy menüben van rögzítve a szkript fájlban. Különösen segít azoknak a tárhelyen, ahol az SSI nem halad át.

A kis szkripteket is behelyezheti a HTML-címkék egyes attribútumaiba, de egy kicsit később.

Néha a forgatókönyvet a végén kell elhelyezni. test. Vagy még a zárás után is : Például, ha szükségünk van a forgatókönyv végrehajtása előtt, feltárja az összes linket vagy összes képet a dokumentumban. De róla - később, amikor megtudjuk a JavaScript mechanizmusokat. Lehet hámozni.

Hozzászólások

Azt mondják, még mindig vannak olyan böngészők, akik nem értik a szkripteket. Meyaki felhasználók, akik annyira hajlamosak a szkriptek biztonságos letiltására. Ebben a helyzetben a szkript nem lesz végrehajtva, de a kódja, ugyanaz az "Abrakadabra", egyszerűen a képernyőre esik.

Tehát, hogy ne essen ki, akkor a HTML megjegyzésekben következtetjük.

Mmm ... és mi ez a két slash, mielőtt megjegyzést szeretne?

A záró megjegyzés már a forgatókönyv "testében" van. És JavaScript nem értik ezeket a koponya- HTMLs „Sky konzolok számára ez egy idegen test generáló hiba. Tehát meg kell elrejteni ezt záró címke a forgatókönyvet, forgalomba, mint egy JavaScript megjegyzést. JavaScript néz ki, kissé kecses: //. Miután a jelzési parancsfájl nem látja a HTML záró konzolt, és a HTML biztonságosan elrejti a szkript szövegét, és a képernyőn nem látható "bal" rekordok nem láthatóak a képernyőn.

Mivel megérintettük a megjegyzéseket, azt kell mondanom, hogy a Javascriptben két formája van - ugyanaz, mint a C és a C ++ (és a CSS-ben is).

// Ez a megjegyzés // csak egy sorban érvényes, //, azaz minden új sorban // meg kell állítania egy megjegyzést. És ez a szkript kód ... / * És ez a megjegyzésforma annyi sorban működik, amennyiben nem szivattyúzza a záró ikont, tükrözi a kezdetet. * / És most ismét a szkript kódja ...

Ne zavarja a HTML megjegyzéseket és a JavaScript megjegyzéseket! Ezek különböző nyelvek, bár egy üvegben egy üvegben vannak. " Vagy pontosabban egy bankban. Mint a pókok ...

Visszatérjünk a pulapidált böngészők problémájához. Tegyük fel, hogy a JavaScript segítségével valamit csináltál két képből valami, mint egy animált banner. Akkor kérheti, hogy a "szegény" böngészők (és te, remélem, nem teljesen hiányzik az altruizmus), a jelen képek megjelenése a címke segítségével

Milyen szerkesztők írnak szkripteket

Talán vannak különleges szerkesztők a JavaScript számára. Nem találkoztam senkivel, és nem nézett túl sokat. Általában a szkriptek ugyanabban a szerkesztőkben vannak írva, amelyeket weboldalak létrehozására használnak. Például szeretem a Homesite-t. A szkript írása ezekben a szerkesztőkben nem különbözik az egyszerű notebook írásában, kivéve a kód megvilágítását. És néha sokat segít. Letöltöttem egyszer egy szkript (németül), és nem működik. Megnéztem a kódot, és láttam, hogy a kulcsszó kapcsoló Valamilyen oknál fogva, nem osztották fel. Nézek - és nincs kapcsoló, de switsch., Donner, Wetter! Eltávolítottam a bükköt - és elmentem.

By the way, minden példájában, a kód pontosan úgy néz ki, ahogy az utat a Homesite ablakban.

Egy kőbányában

A következő példa a Dunaev plágium. De olyan egyszerű és mély, hogy nem tudok ellenállni. Csak néhány részletet adtam a felvételi tervezésről, hogy egyszerre és azokról.

Azonnal figyelmeztetlek: szinte ez a példa teljesen haszontalan. De a JavaScript nyelv és szintaxis számos kulcsfontosságú fogalmát koncentrálja.

Valójában szkript

Ha ezt a kódot egy Net Notepad oldalra másolja, és mentse fájlként.html, akkor a fájl megnyitásakor a következőket fogja látni:

Kívánjuk, hogyan jön ki.

var x \u003d 5;

Itt kijelentjük, hogy az X változó, amely egyenlő 5.

Álljon meg! Tudja, milyen változó van?

Ha nem, kattintson erre és olvassa el a magyarázatot.

Hogyan működik a számítógép? Minden adat mentésre kerül a lemezen, és az a hely, ahol hazugsággal meg kell jelölni, hogy világos legyen, hol keressük. Bármely program (és a szkript nem más, mint egy kis program) néhány adatmal működik. Ezért kényelmes azonnal "helyezni egy helyet" számukra. Ez a hely ez jelölt memória És a változó válik. Miért "változó"? Mert ez a terület különböző értékekkel tölthető. Például, amikor dolgozunk egy számológép, a számok és műveletek velük, hogy belépünk rögzíti a program a megfelelő változókat. És amikor megnyomja a végrehajtás gombot, az algoritmus a megadott értékeket használja.

A programkódban a változókat olyan nevek jelölik, amelyeket maguk is feltalálunk nekik. A nevek létrehozásához bizonyos szabályok különböznek különböző programozási nyelveken. Az alábbiakban leírt korlátozások kifejezetten a Javascripthez tartoznak.

var. - Kulcsszó változó kijelölésére (angol változóban).

x. - A változó neve.

Korlátozások: Csak latin betűk (Bármely regiszter), számok és szimbólumok használhatók a változó nevében. Ebben az esetben a változó nem kezdődik számokkal. És nincsenek rések.

Jobb változó nevek:

Helytelen változó nevek:

A JavaScript nyelv érzékeny a nyilvántartásra.

myvar., Myvar. és myvar. - Különböző változók.

(Az úton, a nyilvántartásról. A nyelv nevét nagy J és S-vel írták: JavaScript. Van egy félreértés, hogy ez az, hogy ez az, hogy ezt a szót HTML-címkékben írja. De a HTML nem érzékeny A nyilvántartás, így írhatsz, ahogy kérem. Régebben keveset, mint a kedvenc hazatérem, valaki - nagy.)

Ebben a parancsfájlban a változó azonnal megjelenik az érték. Ez nem kötelező. Az érték később rendelhető. A vonal végén egy pont vesszővel. Ez ebben az esetben nem szükséges. De nagy és összetett szkriptekben néha fontos, ezért részletes részletes bejegyzést mutatok be. Dunaevnek van ez a karakterlánc x \u003d 5., Explicit bejelentés var. Itt nem szükséges. De (imho) még mindig lehetőleg.

A következő sorban, amint azt már kitalálhatja, a változó kijelentette y.. Megkapta a már bejelentett jelentését x., 3 több mint x..

Majd a módszert hívják Éber ().

Ez a módszer párbeszédpanelt jelenít meg a zárójelben megadott üzenetben. Ez az összes JavaScript módszer szintaxisai: a módszer és a zárójelek neve tartalmával.

Ennek a módszernek a tartalma az Y változó értéke, a párbeszédpanelen pedig a nyolc. Megértette, miért?

Hasznos nyílások

Mivel találkoztunk a módszerrel Éber (), akkor itt van egyszerű és hasznos alkalmazás: Néha a webhely néhány oldala még nem készült, és a linkek már készek. Ez kellemetlen, hogy elérje a "404. oldal". Nem is nagyon kellemes várni, amíg meg nem csizmázik, majd megtudja, hogy a fejlõdés szakasza. Mindig ilyen linkeket fékezek az alábbiak szerint:

"JavaScript: riasztás (" az oldal fejlesztése ");\u003e Menüpont

By the way, itt van egy másik módja annak, hogy megvalósítsa a JavaScript kódot HTML kódba. Itt van behelyezve az attribútumba href. A címke hivatkozás és a kulcsszón keresztül vezetett be javaScript:"(Vastagbél és későbbi tér: mindig figyeljen a szintaktikai triviára). Ügyeljen arra, hogy a HTML attribútum értékének hagyományos kettős idézeteit és a "beágyazott" egy idézeteket a szkript szövegében kell megfogalmazni.

Hamarosan megismerjük a HTML-címkék speciális "esemény" attribútumait, például, kattintásra.amelyek kifejezetten a JavaScript-kód bevezetésére tervezték, és nem igényelnek kulcsszót.

Tehát megtanultunk:

hogyan állapítsa meg egy script a HTML dokumentumnak, amely egy JavaScript észrevételeit, hogyan állapítsa változókat, és azok a helyes neveket, valamint a szintaxis módszerek és különösen az Alert () metódust.

És megtanultam: