A jQuery adatmódszere lehetővé teszi számunkra, hogy tetszőleges adatokat kötjünk bármilyen dokumentumhoz vagy JavaScript objektumhoz, így a kód tömörebbé és olvashatóbbá válik. A jQuery 1.4.3-tól kezdve ezt a módszert lehetett használni JavaScript objektumok, valamint nyomon követheti ezen adatok változásait.
Alapok
Kezdetben meghívhatja a data metódust egy jQuery objektumon, és közvetlenül is használhatja a $.data() függvényt.
// A metódus használatával: $("#myDiv").data("kulcs","tetszőleges érték"); // A függvény közvetlen használata: $.data($("#myDiv").get(0),"kulcs","tetszőleges érték");
Az adatfüggvény az az alacsony szintű megvalósítás, amely a metódus meghívásakor ténylegesen használatos. A jQuery objektum metódus sokkal kényelmesebb, és lehetővé teszi, hogy felvegye magát a hívások láncába.
Azt is vegye figyelembe, hogy a $.data függvény első paramétereként egy DOM elemet kell átadnia, nem pedig egy jQuery objektumot.
Egy objektum metódushoz két paraméterre van szükség – egy kulcsra és egy értékre. A kulcs egy karakterlánc-konstans, az érték pedig bármilyen adatstruktúra, beleértve a tömbfüggvényeket és az objektumokat. Létezik egy alternatív szintaxis, ahol egyetlen paraméterként adhat át egy objektumot:
// Átadhat egy objektumot: $("#myDiv"). data(("name":"Stevie","age":21)); // Ugyanaz: $("#myDiv").data("név","Stevie").data("életkor",21);
Most, ha meg kell szereznie a tárolt adatokat, meghívhatja az adatfüggvényt, paraméterként átadva neki a kulcsot:
Var theValue = $("#myDiv").data("életkor"); 21
Az adatokhoz való hozzáférés a szkriptben bárhol nyitva áll. A tárolt adatokat mindaddig kapja meg, amíg van olyan elem, amelyet az adott szelektor megkap.
Var theValue = $("div:first").data("név"); // Stevie $("div:first").click(function()( alert($(this).data("age"); // 21 ));
A jQuery 1.4.3-ban az attribútumokban tárolt HTML5 adatok is elérhetők. Ez azt jelenti, hogy ha van egy ilyen deklarált eleme:
Ebben az esetben a data-internal-id attribútumból szerezheti be az adatokat a $("#img1").data("internal-id") metódus meghívásával, ami mindenképpen hasznos AJAX kérések esetén.
Az adatmódszer használata JavaScript objektumokon
Meglepődhet, de az adatmódszer normál JavaScript objektumokon is használható. Ez a funkció hivatalosan a jQuery 1.4.3-ban jelent meg.
Var myObj = (); $(myObj).data("város","Springfield");
A fenti példa valójában egy várostulajdont hoz létre az adott objektumon. Ebben az esetben miért nem írja be a myObj.city = "Springfield" kifejezést? A különbség az, hogy a data metódus több hasznos eseményt is hozzáad az objektumhoz, amelyek megkönnyítik az objektummal való munkát. Például:
var progressBar = (); $(progressBar).bind("setData",function(e,key,value)( switch(key)("százalék": $("#progress").width(érték+"%"); $("# százalékszöveg").szöveg(érték+"%"); törés; kis- és nagybetűk "színe": $("#progress").css("szín",érték); törés; kis- és nagybetűk "engedélyezve": $("#progress") .toggleClass("aktív", érték); szünet; ) )); $(progressBar).data("enabled",true).data("százalék",21).data("szín","zöld"); console.log(progressBar.enabled);
A fenti példában az adatmódszert használjuk egy egyszerű API létrehozására, amellyel frissíthetünk egy elemet.
Két további esemény is használható JavaScript objektumon:
- getData – Az adatok beolvasása előtt aktiválódik. Használhatja a kapott adatok előfeldolgozására. Például az érték újraszámításához.
- changeData – az adatok beállítása vagy módosításakor aktiválódik. Ezt az eseményt a jQuery adatkapcsolati bővítmény használja. Lehetővé teszi, hogy űrlapadatokat köthessen egy JavaScript-objektumhoz, és az űrlapmezőket az objektum tulajdonságaiként kezelje.
A színfalak mögött
A jQuery létrehoz egy üres objektumot (a kíváncsiak számára $.cache néven), amely az adatmódszerrel tárolt összes érték tárolója. A DOM minden adatmódszerrel használt eleméhez egyedi azonosító tartozik, amely a $.cache objektumban lévő adatok eléréséhez szükséges kulcs.
A jQuery nem csak a felhasználói adatokat tárolja ebben a gyorsítótárban, hanem a belső adatokat, az eseménykezelőket is, amelyeket a live() , bind() és delegate() függvényekkel függeszt össze. A központi áruház használata robusztusabbá teszi a jQuery-t.
Következtetés
Az adatmódszer csak egy a jQuery számos funkciója közül, amelyek megkönnyítik a webfejlesztők életét. A könyvtár egyéb funkcióival kombinálva szilárd alapot ad, amelyre támaszkodhatunk.
A lecke a Javascript objektumokkal foglalkozik. Egyéni objektumokról van szó: objektum létrehozása javaScriptben, munka objektumtulajdonságokkal és metódusokkal, valamint JavaScript prototípusokkal. Rövid bevezetés az objektumokkal való munkavégzésbe elhelyezkedés, Navigátor, Képernyő
Az oldal feladata, hogy a felhasználók számára gyakorlati ismereteket biztosítson a nyelvhasználathoz. Laboratóriumi munkák A javaScriptben, a bonyolultságuk növekedésével és szemléltető, megoldott példákkal alátámasztva bemutatva, megkönnyíti a tanulmányozott anyag észlelését, és megtanulja, hogyan hozhat létre önállóan "élő", dinamikus weboldalakat.
A JavaScriptben többféle objektum létezik:
- beépített objektumok
- böngésző objektumok
- objektumok, amelyeket a programozó saját maga hoz létre (egyedi)
A beépített objektumok előre definiált objektumok, … A legtöbbet már tárgyaltuk az előző leckékben.
A JavaScript-ben lévő böngészőobjektumokról a későbbi leckékben lesz szó.
Itt az ideje, hogy megismerjük egyéni objektumok JavaScriptben.
- Objektum (objektumok)
- Szám (számfeldolgozás)
- Karakterlánc (karakterlánckezelés)
- Tömb (tömbök)
- Matematika (matematikai képletek, függvények és konstansok)
- Dátum (dátumokkal és időpontokkal dolgozik)
- RegExp
- Globális (tulajdonságai: Infinity, NaN, undefined)
- funkció
JavaScript objektum létrehozása
Az objektumok létrehozásának két módja van:
- Objektuminicializáló használata (vagy gyűjteményobjektumok létrehozása)
- Az objektumkonstruktor használata ()
- Gyűjteményobjektumok létrehozása
var objektum_neve = new Object(); objektum_név.tulajdonság = érték;// pont jelölése objektum_név["tulajdonság"] = érték;// zárójel
Fontos: Ne feledje, hogy nem használhat számot értékként: myObg.rost = 2 // NE! myObg.rost = "2" // megteheti
Példa: Hozzon létre egy myBrowser objektumot tulajdonságnévvel (érték ) és verzió (érték " 9.0 »)
✍ 1. megoldás:
var myBrowser = new Object(); myBrowser.name="Microsoft internet böngésző"; myBrowser["verzió"]= "9.0";
Példa: Hozzon létre két gyűjteményobjektumot (autó és motor) szín- és márkatulajdonságokkal. Tulajdonság értékének megjelenítése szín az objektumnál autóés tulajdonságait márka az objektumnál moto.
✍ Megoldás:
| varcar = new Object(); car.color = "Fehér" ; car.maxSpeed = 220 ; car.brand = "Nissan" ; document.write ("Autó színe: " + autó.szín ) ; var moto = ( szín: "Kék", lóerő: 130, márka: "Yamaha"); document.write( "Motorkerékpár gyártó:"+ moto.brand ); |
var car = new Object(); car.color = "Fehér"; car.maxSpeed=220; car.brand = "Nissan"; document.write("Autó színe: " + autó.szín); var moto = ( szín: "Kék", lóerő: 130, márka: "Yamaha" ); document.write("Motorkerékpár gyártó: " + moto.brand);
"mindegyikhez" for in ciklusban, amikor javascript objektumokkal foglalkozik
Erről a kialakításról már sok szó esett.
A javascript for in ciklusa tömbök, gyűjtemények és objektumok iterációjára készült.
Vegyünk egy példát a for használatára:
| 1 2 3 4 5 6 7 8 | var myBrowser = new Object(); myBrowser.name = "Microsoft Internet Explorer" ; myBrowser[ "verzió" ] = "9.0" ; for (var a in myBrowser) ( alert(a) ; // Végigfut a myBrowser objektum tulajdonságain. Megadja a nevet, a verziót alert(myBrowser[ a] ) ; // Tulajdonságértékek visszaadása } |
var myBrowser = new Object(); myBrowser.name="Microsoft Internet Explorer"; myBrowser["verzió"]= "9.0"; for (var a in myBrowser) ( alert(a); // A myBrowser objektum tulajdonságai között lépkedjen. Megadja a nevet, a verzióra vonatkozó figyelmeztetést (myBrowser[a]); // Megadja a tulajdonság értékeit.
A konstruktor osztályok létrehozása két lépésben történik:
- először egy osztályt hozunk létre egy konstruktor segítségével;
- majd létrehozta új objektum konstruktor alapú.
Objektumosztály létrehozása konstruktor segítségével (konstruktorosztályok létrehozása):
függvény Object_class_name(v1, v2)( this.v1 = érték; this.v2 = érték; )
Új objektum létrehozása egy objektumosztály konstruktora alapján:
var objektum_neve = new class_name("érték_v1","érték_v2");
var objektum_neve =új osztálynév(); objektum_neve.v1="érték_v1"; objektum_neve.v2="érték_v2";
A konstruktor osztály nevét általában nagybetűvel írjuk!
Vegyünk egy példát:
Példa: Konstruktor létrehozása objektumosztályhoz és objektum létrehozása ezen az osztályon: hozzon létre egy myBrowser objektumot tulajdonságnévvel (érték "Microsoft Internet Explorer") és verzió (érték " 9.0 »)
Nyitott megoldás
| 1 2 3 4 5 6 7 8 | function Böngésző (név, verzió) ( this .name = név; this .version = version; ) var myBrowser = new Böngésző("Microsoft Internet Explorer" , "9.0" ) ; alert(myBrowser.name ) ; alert(myBrowser.version) ; |
function Böngésző (név, verzió)( this.name = név; this.version = version; ) var myBrowser = new Böngésző("Microsoft Internet Explorer","9.0"); alert(myBrowser.name); alert(myBrowser.version);
Hasonlítsuk össze ismét az objektumok létrehozásának első módját:
// gyűjtemény objektum var myBrowser = (név: "Microsoft Internet Explorer", verzió: "7.0"); alert(myBrowser.name); alert(myBrowser.version); // következő sor elfogadhatatlan! var myBrowser1 = new myBrowser("MozillaFirefox","3.5"); // NEM IGAZ! !!
Fontos: Gyűjteményobjektum létrehozása esetén nem hozható létre az osztály példánya, mivel ez nem osztály
js feladat 6_1. Hozzon létre egy Alkalmazott objektumot, amely egy bizonyos vállalat alkalmazottairól tartalmaz információkat, például Név, Osztály, Telefonszám, Fizetés (használjon konstruktor függvényt és ezt a kulcsszót). Hozzon létre egy objektumpéldányt
Objektumtulajdonságok elérése JavaScriptben
Objektum_neve. ingatlan neve
| 1 2 | agent007.Name = "Kötvény" ; alert(ügynök007.Név) ; |
agent007.Name = "Kötvény"; figyelmeztetés(ügynök007.Név);
Mi az alapértelmezett tulajdonság
A konstruktor függvény lehetővé teszi, hogy egy objektumot alapértelmezett tulajdonságokkal ruházz fel. Ezek a tulajdonságok minden létrehozott objektumpéldányon megtalálhatók lesznek.
| 1 2 3 4 5 6 7 8 9 10 | function Diák(név, telefon) ( this .name = név; this .phone = "22-22-22" ; // alapértelmezett tulajdonság!) var ivanov = new Student("Ivan" , "33-33-33" ) ; alert(ivanov.name) ; // "Ivan" riasztást ad (ivanov.phone ) ; // a "22-22-22" értéket adja vissza ivanov.phone = "33-33-33" ; //módosítsa az alapértelmezett tulajdonságot alert(ivanov.phone) ; // a következőt adja vissza: "33-33-33" |
function Diák(név, telefon) ( this.name=name; this.phone="22-22-22"; // alapértelmezett tulajdonság! ) var ivanov = new Student("Ivan","33-33-33" ) ; alert(ivanov.name); // "Ivan" figyelmeztetést ad (ivanov.phone); // "22-22-22" ivanov.phone="33-33-33"; //az alapértelmezett tulajdonság-figyelmeztetés módosítása (ivanov.phone); // a következőt adja vissza: "33-33-33"
Tulajdonságok hozzáadása egy objektumosztályhoz
Tulajdonértéket adhat hozzá:
- egy adott objektumpéldány;
- tárgyak egész osztálya
Tulajdonságok hozzáadása egy konkréthoz(példány) objektum:
objektum_neve. property_name = érték
ivanov.biology = "kiváló";
Fontos: A példában a tulajdonság egy adott objektumra van beállítva, nem az objektumok osztályára!
Tulajdonságok hozzáadása az osztályba objektumok:
osztály_név.prototípus. property_name = érték
student.prototype.biology = "kiváló";
Fontos: A példában az (alapértelmezett) tulajdonság az objektumosztályon van beállítva! Ez prototípussal történik; prototípus- a szerkezetet meghatározó objektum
| 1 2 | Student.prototype .email = " [e-mail védett]" ; alert(ivanov.email ) ; // adni fog " [e-mail védett]" |
student.prototype.email=" [e-mail védett]"; alert(ivanov.email); // megadja " [e-mail védett]"
Példa: Példa az összes objektumtulajdonság értékekkel történő megjelenítésére
| 1 2 3 4 5 6 7 8 9 | var summerTour= ( pulyka : 2000 , spanyolország : 3000 , egyiptom : 1000 ); var opció; for (opció a summerTour-ban) ( document.write (opció + ":" + summerTour[opció] + " " ) ; } |
var summerTour=( pulyka: 2000, spanyolország: 3000, egyiptom: 1000 ); var opció; for (opció a summerTour-ban)( document.write(opció + ":" + summerTour + "
");
}
Javascript prototípusok (bevezetés)
Nézzünk egy példát arra, hogyan javascript osztályok prototípusokon
Példa: Hozzon létre egy objektumosztályt Autó (autó) három tulajdonsággal: név (név), modell (modell), szín (szín). Hozzon létre egy osztály példányát meghatározott tulajdonságértékekkel. Ezután a létrehozott példányon keresztül add hozzá az osztályba ingatlantulajdonos (tulajdonos) meghatározott alapértelmezett értékkel ( Ivanov). Nyomtassa ki a létrehozott példány összes tulajdonságértékét
| függvény Autó(név, modell, szín) ( /* autóobjektum-építő*/ this .name = név; this .model = modell; ez .szín = szín; var myCar= új Autó; myCar.name = "Mers" ; myCar.model = "600" ; myCar.color = "zöld" ; Car.prototype .owner = "Ivanov" ; /* új ingatlan hozzáadása */ alert(sajátAutó.nev + " " + myAutó.modell + " " + myAutó.szín + " " + autóm.tulajdonos ) ; |
function Autó(név, modell, szín) ( /* car object konstruktor*/ this.name = név; this.model = modell; this.color = color; ) var myCar=new Car; myCar.name="Mercedes"; myCar.model="600"; myCar.color="green"; Car.prototype.owner = "Ivanov"; /* új tulajdonság hozzáadása*/ alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
js feladat 6_2. A js 6_1 beállításához az Employee objektum létrehozott példányán keresztül, adjon hozzá egy új cím tulajdonságot az objektumosztályhoz
JavaScript objektum módszerek
Hozzon létre egy objektum metódust
Példa: Adja hozzá az aboutBrowser metódust a Browser objektum konstruktorhoz, amely információkat jelenít meg az objektum tulajdonságairól a böngésző képernyőjén
- Az objektummetódusok a függvényből származnak, és hozzáadódnak az osztálykonstruktorhoz
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | function showBrowser() ( document.write ("Böngésző: " + ez .név + " " + ez .verzió ) ; ) function Browser(név, verzió) ( this .name = név; this .version = verzió; ez .aboutBrowser = showBrowser; ) var myBrowser= new Böngésző("Microsoft Internet Explorer" , 8.0 ) ; myBrowser.aboutBrowser(); |
function showBrowser() ( document.write("Böngésző: " + this.name + " " + this.version); ) function Browser(név, verzió) ( this.name = név; this.version = version; this.aboutBrowser = showBrowser; ) var myBrowser=new Browser("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();
function Böngésző(név, verzió) ( this.name = név; this.version = version; this.aboutBrowser = function()( document.write("Böngésző: " + név + " " + verzió); ) ) var myBrowser= új böngésző ("Microsoft Internet Explorer", 8.0); myBrowser.aboutBrowser();
js feladat 6_3. Hozzon létre egy szolgáltatási osztályt (Tour) egy utazási cég munkájához egy utazási költség kiszámításának módszerével a számításból: emberek száma * napok száma * országos tarifa. Hozzon létre egy példányt a turkeyTour objektumból tulajdonságértékekkel. Az objektum összes tulajdonságának megjelenítése a képernyőn. Számítási objektum metódus létrehozása függvény alapján.
A beépített objektumok Javascript prototípusai (Prototype).
Tulajdonságok és módszerek hozzáadása beépített objektumokhoz (prototípus)
JavaScript- OOP nyelv (objektum-orientált programozás), prototípusok alapján.
Prototípus- a szerkezetet meghatározó objektum
Fontolja meg a prototípusokkal való munkát egy példa segítségével:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Prototípus módosítása */ // Alapértelmezett tulajdonság hozzáadása a beépített objektumhoz String .prototype .color = "fekete" ; // Metódus hozzáadása (módosítása) egy beépített objektumhoz String .prototype .write = stringWrite; függvény stringWrite()( document.write(" " ) ; document.write (ez a .toString () ) ; document.write ("") ; } // használja a módosított osztályt var s = new String("Ez egy karakterlánc" ) ; s.color = "piros" ; s.write(); |
/* A prototípus módosítása */ // Alapértelmezett tulajdonság hozzáadása a beépített objektumhoz String.prototype.color = "black"; // Metódus hozzáadása (módosítása) a beépített objektumhoz String.prototype.write = stringWrite; függvény stringWrite()( document.write(" "); document.write(this.toString()); document.write(""); ) // a módosított osztály használata var s = new String("Ez egy karakterlánc"); s.color = "red"; s.write();
Fontos: Tulajdonságok és metódusok nem adhatók hozzá a Math objektumhoz
js feladat 6_4. Adja hozzá a programkódot a feladat befejezéséhez: Adja hozzá a printMe() metódust a beépített String osztályhoz, amely kiírja a szót "Hurrá!" a felhasználó által megadott szint () címsoraként (h... tag).
A fejléc szintje (1, 2...6) a String osztály tulajdonságaként adható hozzá.
Emlékezzünk vissza, hogyan kell kinézniük a HTML-ben a címsorcímkéknek:
fejléc
Kód hozzáadása:
| 1 2 3 4 5 6 7 8 | String .prototype .uroven = "1" ; ... függvény printZagolovok () ( ... ... ) var s= new ...; ... |
String.prototype.level="1"; ... függvény printZagolovok ()( ... ... ) var s=new ...; ...
Összegzés: Hasonlítsuk össze újra az egyéni objektumok két használatát a JavaScriptben:
- Gyűjteményobjektumok létrehozása
- Konstruktor osztályok létrehozása
- Menj a főoldalra
- ...
- ...
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var myBook= new Object(); myBook.title = "(!LANG:book"
;
myBook.price
=
"200"
;
alert(myBook[
"title"
]
)
;
!} // 1. lehetőség a tulajdonságok elérésére alert(meBook.price) ; // 2. lehetőség a tulajdonságok elérésére függvény myBookShow() ( for (var i in myBook) ( document.write (i+ ": " + myBook[ i] + " " ) ; // Tulajdonságok feletti iteráció) ) myBook.show = myBookShow; myBook.show(); |
var myBook=new Object(); myBook.title="(!LANG:book";
myBook.price="200";
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
function myBookShow()
{
for (var i in myBook)
{
document.write(i+": "+myBook[i]+"!}
"); // Visszatérés a tulajdonságok között ) ) myBook.show=myBookShow; myBook.show();
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | függvény myBook(cím, ár) ( // tulajdonságok meghatározása ez .title = cím; this.price = ár; // módszer meghatározása this .show = show; function show() ( document.write ("Cím: " + this .title ) ; document.write ("Ár: " + ez .ár ) ; ) ) var book = new myBook("Könyv" , 200 ) ; könyv.show(); |
function myBook(title,price)( // tulajdonságok meghatározása this.title = title; this.price = ár; // metódus meghatározása this.show = show; function show() ( document.write("Cím: " + ez. title); document.write("Ár: " + ez.ár); ) ) var book = new myBook("Könyv", 200); könyv.show();> Menj a főoldalra</a> <li > ... </li> <li > ... </li>
*Összetett: menüpontok száma, elnevezése és url meg kell kérdezni a felhasználót
Tanács: egy karakterlánc megjelenítéséhez a képernyőn a show() metódusban használja a document.write() metódust
javaScript hely, navigátor, képernyő objektumok
JavaScript Navigator
Fontolja meg a Navigator objektum használatát JavaScriptben egy példával:
Példa:Írjon egy függvényt, amely megjeleníti:
- böngésző neve
- böngésző nyelve
- OS neve
- engedélyezve vannak-e a sütik
- hogy a felhasználó csatlakozik-e az internethez
- képernyőfelbontás
- színmélység
- betöltött oldal URL-je
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var opció; // megjeleníti a navigátor objektum összes tulajdonságát for (opció a navigátorban) ( document.write (opció + " : " + navigátor[opció] + " " ) ; } // funkció a navigátor objektum adott tulajdonságainak megjelenítéséhez függvény userDetails()(document.write( " Böngésző neve: "+ navigator.userAgent + " " ); document.write ("Böngésző nyelve: " + navigator.language + " " ); document.write ("OS neve: " + navigator.oscpu + " "); document.write( "Engedélyezve vannak a cookie-k:"+ navigator.cookieEnabled + " "); document.write( "Bekapcsolva van az internet:"+ navigator.nLine + " " ) ; ) userDetails() ; |
var opció; // kiírja a navigátor objektum összes tulajdonságát (opció a navigátorban)( document.write(opció + " : " + navigátor+ "
"); ) // függvény az objektumnavigátor funkció meghatározott tulajdonságainak megjelenítéséhez userDetails ()( document.write("
Böngésző neve: " + navigator.userAgent + "
"); document.write("Böngésző nyelve: " + navigator.language + "
"); document.write("OS neve: " + navigator.oscpu + "
"); document.write("Engedélyezve vannak a cookie-k: " + navigator.cookieEnabled + "
"); document.write("Kapcsolódik az internet: " + navigator.nLine + "
"); ) userDetails();
JavaScript Screen objektum
Tekintsük a Screen objektum használatát a JavaScriptben egy példán keresztül:
függvény userDetails ()( document.write("Felbontás: " + képernyő.szélesség + " x " + képernyő.magasság + "
"); document.write("Színmélység: " + képernyő.színmélység + " x " + képernyő.magasság + "
"); ) userDetails();
JavaScript Location objektum
Fontolja meg a Location objektum használatát JavaScriptben egy példával:
| 1 2 3 4 | függvény userDetails()(document.write( "A betöltött oldal címe: " location.href + " " ) ; ) userDetails() ; |
function userDetails ()( document.write("A betöltött oldal URL-je: " + location.href + "
"); ) userDetails();
Megállapítások:
- Az új kulcsszóval rendelkező kifejezésekkel objektumok példányait, azaz konkrét inkarnációit hozhatja létre.
- Sőt, a javascript prototípus tulajdonságának köszönhetően lehetőség nyílik olyan új tulajdonságok és metódusok hozzáadására olyan objektumokhoz, amelyeket a felhasználó talált ki, és amelyek nem voltak jelen az eredeti beépített objektumokban.
- Az objektumok létrehozása adatbázisok létrehozására használható.
Ebben a fejezetben:
A JavaScript számos előre meghatározott objektummal rendelkezik, amelyeket szkriptek írásakor használhat. Ide tartoznak az olyan objektumok, mint a tömb, logikai érték, dátum, függvény, matematika, szám, reguláris kifejezés és karakterlánc, valamint a primitív objektum. NÁL NÉL korai változatai nyelv, dokumentum objektumok (ablak, dokumentum) is szerepeltek benne, de most kikerültek a magból JavaScript nyelv, és hivatkozzon a Document Object Model (DOM) definíciójára, amelyről később lesz szó. Ezeknek az objektumoknak (dokumentum és ablak) bizonyos tulajdonságai azonban már ismerősek számunkra.
Térjünk azonban vissza a JavaScript modern értelemben vett beépített objektumaihoz. A matematika és a dátum kivételével minden beépített objektum rendelkezik olyan tulajdonságokkal, mint a konstruktor és a prototípus. Arra használják őket, hogy új tulajdonságokat adjanak a meglévő objektumokhoz, és leírásuk egy függvényobjektum kontextusában történik.
Tárgy
Minden JavaScript objektum az Object objektumtól öröklődik. Ezért ennek az objektumnak az összes tulajdonságát és metódusát minden más JavaScript objektum megosztja.
Csak 2 tulajdonság van meghatározva az objektum objektumhoz - a konstruktor és a prototípus. A konstruktor tulajdonság egy függvényt határoz meg, amely létrehozza az objektum prototípusát – a teljes függvényt, nem csak a nevét. Más szavakkal, fontolja meg azt a lehetőséget, amikor valamilyen tesztobjektum definiálva van, és létrejön ennek a tmp-objektumnak egy példánya:
Függvényteszt(verzió) ( this.verzió = verzió; ) tmp = new test(1);
Ebben az esetben a konstruktor tulajdonság segítségével láthatjuk a tesztobjektum forráskódját (4.6. ábra):
Alert(tmp.constructor);
Rizs. 4.6.
Ennek a tulajdonságnak azonban van egy korlátja: nem tudja kiadni a beépített JavaScript objektumok kódját: ilyen esetekben a kimeneti információ a prototípus függvény nevére és a "" karakterláncra korlátozódik.
Ami a prototípus tulajdonságot illeti, ez lehetővé teszi az aktuális objektum prototípus funkciójának elérését. Ennek a tulajdonságnak a használata lehetővé teszi az objektum prototípusának jellemzőinek megváltoztatását. Például hozzáadhat egy új tulajdonságot egy teszt típusú objektumhoz a prototype tulajdonság használatával:
Test.prototype.comment = "Új megjegyzés tulajdonság";
Mostantól minden teszt típusú objektum, beleértve a már létrehozott tmp-példányt is, megjegyzés tulajdonsággal fog rendelkezni, amely könnyen ellenőrizhető a következő ellenőrzéssel:
alert(tmp.comment);
Sőt, a beépített JavaScript objektumok is hasonló módon frissíthetők. Ha például leírás tulajdonságot kell hozzáadnunk a tömbökhöz, akkor ezt (természetesen csak a jelenlegi forgatókönyvben!) úgy tehetjük meg, hogy hivatkozunk az Array objektum prototípusára, és hozzáadjuk a megfelelő tulajdonságot:
array.prototype.description = "";
Ami a metódusokat illeti, az Object objektumnál valamivel több van belőlük - akár 5 darab. Ezek a toSource, toString, watch, unwatch és valueOf, azok Rövid leírás táblázat a 4.10.
A toString és a valueOf metódusok szinte minden beépített JavaScript objektumra vonatkoznak, és általában az értelmező automatikusan meghívja őket, amikor konverziót kell végrehajtani. Ami a toSource metódust illeti, valójában csak a konstruktor tulajdonságot végzi el.
A fennmaradó figyelési és megtekintési metódusok, a Netscape 4 böngészőben bevezetett szabadalmaztatott kiterjesztések (most már a Mozilla is támogatja) a szkriptek hibakeresésére szolgálnak. Mivel a hibakereső programok kérdését a kiadvány nem tárgyalja, nincs értelme e módszerek ismertetésének. De minden esetre vegye figyelembe, hogy a Sea Monkey-ban (de nem Firefox böngésző) rendelkezik egy script hibakeresővel - JavaScript Debugger.
tömb objektum
A tömbváltozók rendezett értékgyűjteményeket tartalmaznak, amelyeket a kényelem érdekében egyetlen változóként jelenítenek meg. Nem egyszer találkoztunk már tömbökkel (ne felejtsünk el legalább argumentumtömböket), most itt az ideje, hogy foglalkozzunk minden tulajdonságukkal és alkalmazási finomságukkal.
Más programozási nyelvekkel ellentétben a JavaScript nem rendelkezik olyan adattípussal, mint egy tömb. Ezt a korlátozást azonban megkerüli az a tény, hogy használhat egy előre definiált tömbobjektumot - Array. A következő szintaxisok egyikét használhatja tömbobjektum létrehozásához:
Tömbnév = new Tömb(elem1, elem2, ... elemN) Tömbnév = new Array(Tömbhossz)
Az első esetben a tömb összes komponense fel van sorolva, a másodikban egyszerűen az elemek száma van feltüntetve. A tömb deklarálásakor literálokat is használhat:
Számítógépek = ["PC", "Mac", "Sun"];
Egy tömb elemeinek értékekkel való feltöltéséhez, valamint általában a tömb elemeinek eléréséhez használhatja az elem indexét. Ebben az esetben figyelembe kell venni, hogy a tömbelemek indexe nulláról indul:
var színek = new Tömb(3); színek = "piros"; színek = "kék"; színek = "Zöld";
Gyakran célszerű használni a JavaScript azon képességét, hogy közvetlenül kitöltse a tömböt, amikor deklarálják:
Var színek = new Array("Piros","Kék","Zöld");
Egy tömb hosszának (a tömböt alkotó elemek számának) megtudásához használja a length tulajdonságot:
Var NumColors = színek.hosszúság;
A hossz tulajdonságon kívül a JavaScript számos egyéb tulajdonságot és módszert is kínál a tömbökkel való munkavégzéshez. Az Array objektum tulajdonságai a hosszon kívül tartalmazzák az összes objektum univerzális konstruktorát és prototípusát, valamint a tömbök reguláris kifejezésekkel együtt történő használatára szolgáló index- és bemeneti tulajdonságokat.
Ami a metódusokat illeti, a szabványos toSource, toString és valueOf mellett a tömbök még egy tucat saját módszerrel vannak felruházva, amelyeket a 4.11. táblázat sorol fel.
| Módszer | Leírás |
|---|---|
| concat | Összevon két tömböt, és egy újat ad vissza |
| csatlakozik | Egy tömb összes elemét egyetlen karakterláncba fűzi össze |
| pop | Eltávolítja utolsó elem tömbből, és visszaadja azt |
| nyom | Egy vagy több elemet ad egy tömb végéhez, és visszaadja az új hosszát |
| fordított | Egy tömb elemeit úgy mozgatja, hogy az első legyen az utolsó, és fordítva |
| váltás | Eltávolítja a tömb első elemét, és visszaadja |
| szelet | Eltávolítja a tömb egyes elemeit, és egy új tömböt ad vissza |
| toldás | Hozzáad és/vagy eltávolít egy elemet egy tömbből |
| fajta | A tömb elemeit ABC sorrendbe rendezi |
| váltáshoz | Hozzáad egy vagy több elemet egy tömb elejéhez, és visszaadja a tömb új hosszát (az MSIE 5.5-ben és 6-ban ez a módszer nem ad vissza semmit) |
Nézzünk meg közelebbről néhány módszert. Tehát a concat módszerrel 2 tömböt kombinálhat egyben:
Var a = new Array("A1", "A2"); var b = new Array("B1", "B2"); varab = a.concat(b);
Itt az ab változóból egy tömb lesz, amely az egyesítendő két tömb mind a 4 elemét tartalmazza. Ha most a join metódust alkalmazzuk egy ilyen tömbre, akkor az eredmény egy karakterlánc lesz, amely a tömb összes elemét tartalmazza, vesszővel elválasztva:
Str = ab.join(); // str = "A1,A2,B1,B2" lekérése
Ami a pop módszert illeti, ugyanarra a tömbre alkalmazva "B2"-t kapunk válaszként, és a tömb az első három értékre csonkolódik. Ezzel szemben a shift metódus visszaadja az első elemet (esetünkben „A1”), és ugyanezt teszi a tömbbel is, azzal a különbséggel, hogy a többi elemet előre tolja.
Ezek és más tömbmódszerek működésének jobb megértéséhez tekintse meg a következő példát a 4.3-as listában.
Felsorolás 4.3. Munka tömbökkel
Ugyanez a példa megtekinthető a tömb.html fájlban, ugyanakkor a böngészőben megtekinthető lesz a munkájának összes eredménye (lásd 4.7. ábra).
Rizs. 4.7. A splice metódus alkalmazásának eredménye: a visszaadott tömb és változások
A tömbök lehetnek többdimenziósak is, pl. egy tömbelem lehet egy másik tömb. Ebben az esetben a következő szintaxist használjuk egy tömbelem eléréséhez:
Array2D="0,0 elem" Array2D="0,1" ... Array2D[N][N]="N,N elem"
Példa a kitöltésre és a kimenetre kétdimenziós tömb az arrays.html fájlban található, ott is van interaktív példa szinte minden tömbmódszerhez.
Logikai objektum
A logikai objektum az azonos nevű adattípus burkolója. A következő szintaxist használjuk a logikai objektumok meghatározására:
BooleanObj = új Boolean(érték)
Itt az érték egy inicializálási kifejezés, amely szükség esetén igaz vagy hamis értékre lesz öntve. Ha olyan értéket ad meg, mint például 0, null, false, NaN, undefined, vagy egy üres karakterlánc, akkor a logikai objektum inicializálása false, bármely más érték esetén igaz értéket fog eredményezni.
A primitív igaz és hamis logikai értékeket nem szabad összetéveszteni a logikai objektum igaz és hamis adattípusaival. Például, ha deklarál egy x változót, és hozzárendeli egy hamis értékkel inicializált logikai objektum értékét, az összehasonlításkor továbbra is igaz lesz:
X = new Boolean(false); // összehasonlításkor ha (x) igaz lesz
Ugyanakkor, ha egyszerűen a false primitív adattípust rendeli hozzá egy változóhoz, akkor az megkapja:
x=hamis; // összehasonlításkor ha (x) hamis értéket kapunk
Ami ennek az objektumnak a használatát illeti, a gyakorlatban függvényként használható bármely más típusú érték logikai értékké való konvertálására:
A=100; x = Boolean(a); // x igaz lesz, ha (x) (...)
Valójában azonban nem valószínű, hogy ezt megteszi, mivel ha szükséges, az ilyen átalakításokat a JavaScript értelmező automatikusan végrehajtja - a fenti példában azonnal beírhatja, hogy „ha (a) ...”, és a szükséges átalakítást ebben az esetben úgyis megtörténik .
dátum objektum
A JavaScript nem biztosít speciális adattípust a dátumokkal való munkavégzéshez, de a tömbökhöz hasonlóan van egy speciális Data objektum. Dátumobjektum létrehozásához a következő módszerek bármelyikét használhatja:
Új dátum() új dátum(ezredmásodperc) new Date("Dátum_mint_karakterlánc")
Az első esetben egy Dátum objektum jön létre az aktuális idővel, a második esetben pedig az 1970. január 1-je óta eltelt ezredmásodpercek számát kell megadni. Ha a dátum karakterláncként van megadva, akkor "2005. február 28." formátumúnak kell lennie. A dátumot az év, hónap, nap stb. egész értékeivel is beállíthatja:
Új dátum (év, hónap, nap [, óra, perc, másodperc, ezredmásodperc])
Természetesen ebben az esetben elkerülhető a másodpercek és ezredmásodpercek megadása, főleg, hogy a böngészők régebbi verziói nem is támogatták a milliszekundumot. Ezenkívül az 1.3 előtti JavaScript nem támogatja az 1970. január 1-je előtti dátumokat. Ami a sorban feltüntetett értékek formátumát illeti, az év bármely 4 jegyű szám (ha 2 jegyű számot ad meg, akkor 1900 lesz hozzáadva), a hónap száma 0-tól ( január 11-ig (december), a nap pedig 0-tól 31-ig tart. Ennek megfelelően az időértékek is korlátozottak: órákban 0 és 23 között, másodpercekben és percekben 0 és 59 között lesz, és ezredmásodpercekre - 0-tól 999-ig. Így 2005. május 9. objektumérték-dátumtípusként a következőket kell írnia:
Var anyday = new Date(2005, 5, 9);
És ha meg kell szereznie a dátum és az idő aktuális értékét, akkor egyáltalán nincs szükség paraméterekre:
Varnow = new Date();
A JavaScript 1.3-as verziójától kezdve a dátumtartomány legfeljebb 100 millió nap lehet 1970. 01. 01. előtt és után (összesen majdnem 550 000 év!). Ugyanebben a változatban bevezették azt az előírást, hogy az évszámot mindig négy számjegyű formátumban kell feltüntetni az évszázadok változásával járó hibák elkerülése érdekében.
A Dátum objektum használatához 2 tulajdonság áll rendelkezésre - konstruktor és prototípus, valamint számos módszer, amelyek lehetővé teszik a dátum kívánt részének (év, hónap, nap, idő) kiválasztását, megjelenítését egyik vagy másik formátumban, stb. Mindegyiket felsorolja a 4.12. táblázat.
| Módszer és szintaxisa | Leírás |
|---|---|
| getDate() | A hónap napját adja vissza helyi idő szerint |
| getDay() | A hét napját adja vissza helyi idő szerint |
| getFullYear() | Helyi idő szerint adja vissza az évet |
| getHours() | Az aktuális időt (órában) adja vissza helyi idő szerint |
| get Milliseconds() | Az aktuális időt (ezredmásodpercben) adja vissza helyi időben |
| getMinutes() | Az aktuális időt (percben) adja vissza helyi idő szerint |
| get Month() | Az aktuális időt (hónapot) adja vissza helyi idő szerint |
| getSeconds() | Az aktuális időt (másodpercben) adja vissza helyi idő szerint |
| getTime() | A pontos időt adja vissza számként helyi idő szerint |
| getTimezoneOffset() | Az időeltolást adja vissza percben a helyi idő szerint a GMT-hez képest |
| getUTCDate() | A hónap napját adja vissza egyetemes idő szerint |
| getUTCDay() | A hét napját adja vissza egyetemes idő szerint |
| getUTCFullYear() | Visszaadja az évet egyetemes idő szerint |
| getUTCHours() | Az aktuális időt (órákat) adja vissza univerzális időben |
| getUTCMilliseconds() | Az aktuális időt (ezredmásodpercben) adja vissza univerzális időben |
| getUTCMutes() | Az aktuális időt (percben) adja vissza univerzális időben |
| getUTCMonth() | Az aktuális időt (hónapot) adja vissza univerzális időben |
| getUTCSecons() | Az aktuális időt (másodpercben) adja vissza univerzális időben |
| getYear() | Elavult. Az évet rövid (kétjegyű) formátumban adja vissza univerzális idő szerint |
| elemzés(dátum_karakterlánc) | Az 1970. január 1-től eltelt ezredmásodpercek számát adja vissza a paraméterben megadott értékre, helyi idő szerint |
| setDate(day) | A hónap napját helyi idő szerint állítja be |
| setFullYear(év) | Az évet helyi idő szerint állítja be |
| setHours (óra) | Az időt (óra) helyi idő szerint állítja be |
| setMilliseconds (ezredmásodperc) | Beállítja az időt (ezredmásodpercben) helyi idő szerint |
| set Minutes (perc) | Beállítja az időt (percben) helyi idő szerint |
| set Month(hónap) | Beállítja az időt (hónapot) helyi idő szerint |
| setSeconds (másodperc) | Beállítja az időt (másodpercben) a helyi idő szerint |
| setTime (ezredmásodperc) | Beállítja az időt ezredmásodpercben egy adott dátumhoz helyi idő szerint |
| setUTCDate(day) | A hónap napját az egyetemes idő szerint állítja be |
| setUTCFullYear(év) | Az évet az egyetemes idő szerint állítja be |
| setUTCHours (óra) | Beállítja az időt (órákat) egyetemes időre |
| UTCM ezredmásodperc beállítása (ezredmásodperc) | Beállítja az időt (ezredmásodpercben) univerzális időben |
| setUTCMutes (perc) | Az időt (percben) univerzális időben állítja be |
| setUTCMhónap(hónap) | Beállítja az időt (hónapot) univerzális időben |
| setUTCSeconds (másodperc) | Beállítja az időt (másodpercben) univerzális időben |
| setYear (év) | Elavult. Az évet helyi idő szerint állítja be, az évérték kétjegyű formátuma megengedett |
| toGMTString() | Elavult. A dátumot a GMT-nek megfelelő karakterláncsá alakítja |
| toLocaleString() | A dátumot és az időt karakterláncként adja vissza, a helyi rendszer beállításai szerint formázva |
| toLocaleDateString() | A dátumot a helyi rendszerbeállításoknak megfelelően formázott karakterláncként adja vissza |
| toLocaleTimeString() | Az időt a helyi rendszerbeállításoknak megfelelően formázott karakterláncként adja vissza |
| a forráshoz() | Egy dátum objektumot ad vissza literális ábrázolásban |
| toString() | Dátumobjektumot ad vissza karakterlánc-ábrázolásban |
| toUTCSstring() | A dátumot UTC formátumú karakterláncsá alakítja |
| UTC (beállítások) | Az 1970. január 1. óta eltelt ezredmásodpercek számát adja vissza egyetemes idő szerint. Az év, a hónap és a nap paraméterként van megadva, valamint (opcionálisan) óra, perc, másodperc és ezredmásodperc. |
| értéke() | A dátumot primitív értékként adja vissza |
A módszerek ilyen sokasága ellenére a Date objektummal való munka meglehetősen egyszerű: csak meg kell értenie a metódusok elnevezésének elvét:
- A "set" szóval kezdődő módszerek a dátum és az idő beállítására szolgálnak a Date objektumokban;
- A "get" karakterrel kezdődő metódusok a dátumok, időpontok vagy ezek egy részének kinyerésére szolgálnak a Date objektumokból;
- a "to"-val kezdődő metódusok a dátumot és az időt (vagy azok egy részét) adják vissza karakterlánc-értékként;
- Az "UTC"-t tartalmazó metódusok csak abban különböznek a hasonlóktól, hogy univerzális időformátummal működnek (azaz az időt greenwichi középidőben jelenítik meg, figyelembe véve az aktuális időzónától való eltolást).
Így már csak hozzá kell adni vagy beállítani a dátum vagy az idő szükséges részének nevét, hogy megkapjuk vagy beállítsuk kívánt paramétert, opcionálisan UTC használatával is. Nos, ha az eredményt "emberi" formában szeretné elérni, használja a to módszereket. Ne feledje azt is, hogy mindig teljes formátumú függvényeket kell használnia az évszámmal (azaz getFullYear vagy getUTCFullYear, nem getYear).
A dátum karakterlánc-ábrázolása a JavaScriptben a következő formátumú:
NapHét Hónap Nap Év Óra:Perc:Második GMT±eltolás
Ahhoz, hogy vizuálisan lássuk a dátumok ábrázolását, és egyúttal megvizsgáljuk, hogyan működnek az olyan függvények, mint a toString, nézzük meg, mit adnak vissza a kimeneten. Ebben az esetben az első dolog, ami eszébe juthat egy adott függvény munkájának megtekintéséhez, az a szöveges kimenet használata a dokumentumban:
Document.writeln(DateObject.toString()); document.writeln(DateObject.toGMTString()); // stb.
De valójában, mivel sok funkció van, jó lenne előre megírni, hogy milyen műveletet hajtottak végre:
Document.writeln("DateObject.toString()" + DateObject.toString());
Most gondoljuk át újra, hogy valójában hány sort szeretnénk így kiadni. Még akkor is, ha figyelembe vesszük a „másolás és beillesztés” módszer mindenki által támogatott lehetőségeit szövegszerkesztők, ez nem biztosít biztosítást az ehhez hasonló hibák ellen:
Document.writeln("DateObject.toLocaleString()" + DateObject.toString());
De ahogy az IBM mottója is mondja, az embereknek gondolkodniuk kell, és a gépeknek működniük kell. Gondoljuk át tehát, hogyan tegyük működőképessé a számítógépet, egyúttal megkímélve magunkat attól, hogy plusz bájt kódot kell beírnunk, ehhez lapozzuk fel a 4.4-es listát.
Felsorolás 4.4. Különböző típusú dátumok és az eval funkció megjelenítése
Mindenekelőtt a printDate függvényt határozza meg, amely valójában ilyen vagy olyan formában jeleníti meg a dátumot a dokumentumban. Inkább a dátumot írja ki esetünkben, de elvileg bármit ki tud írni - a lényeg, hogy az argumentum egy komplett JavaScript-kód legyen. Ebben az esetben a kód először úgy jelenik meg, ahogy van (vagyis a string változót eredeti formájában nyomtatja ki), majd a végrehajtás eredménye, amelyhez az eval függvényt használjuk. Ennek eredményeként, miután egyszer írt egy ilyen függvényt, később hivatkozhat rá a dokumentumban, így megkímélheti magát attól, hogy gyakorlatilag ugyanazt a szöveget kétszer írja be.
A kimeneti függvényt követi egy Date típusú objektum létrehozása, amelyhez 2005, 3. hónap (április, mivel január nulla), 1. nap 14 óra 30 perc 45 másodperc értéke van hozzárendelve. Ezután a dokumentum megnyílik írásra, és a printDate függvény szekvenciálisan meghívásra kerül a 6-hoz különféle módszerek dátum objektum. Ennek a szkriptnek az eredménye 6 sor lesz, amelyek a metódusból és a munka eredményéből származó értékpárokat tartalmaznak, kettősponttal elválasztva (4.8. ábra).
Rizs. 4.8. Ugyanazon dátum kiadása különböző módszerekkel
Megjegyzendő, hogy a dátumot a program belső megjelenítésében megjelenítő toSource metódust csak a Mozilla böngészők támogatják. Ezenkívül a dátumok minden más módszerrel történő kiadásának formátuma is kissé eltérhet a különböző böngészőkben. Egy ilyen példát betölthet különféle nézőkbe, és saját szemével nézheti meg, mit adnak ki (date.html fájl).
Funkció objektum
Az előre definiált Function objektum egy JavaScript kódsort határoz meg, amelyet függvényként kell végrehajtani. A következő szintaxis használatos egy függvényobjektum deklarálására:
FunctionName = new Function([argumentum1, argument2, ...argumentN], FunctionBody)
Ebben az esetben bármely változó neve, vagy egy már létező objektum tulajdonsága használható függvénynévként. Lehetőség van Function típusú objektum megadására is az objektum eseménykezelőjének értékeként. Például, ha saját eseménykezelőt szeretnénk létrehozni, mint például a „dokumentum betöltése befejeződött” (document.onload), akkor ezt írhatjuk:
Document.onload = new Function([Argument1, ...argumentN], FunctionBody);
Az argumentumok ebben az esetben a függvénynek átadott paraméterek, a függvény törzse pedig a tényleges kód, amelyet az adott függvényobjektum elérésekor végre kell hajtani. Például megírhatja az objektum egy változatát, amelyet egy szám négyzetre emelésére használunk:
Var SquareObj = new Function("x", "return x*x");
Itt SquareObj a változó neve, x az elfogadandó argumentum, és a "return x*x" a függvény törzse. Figyeljük meg, hogy nem csak a függvény törzse, hanem az általa elfogadott argumentumok is idézőjelbe kerülnek, és azt is, hogy az objektumtípus neve a JavaScriptben megszokott módon nagybetűvel van írva (Function).
Az így létrehozott változók használata hasonló bármely más típusú változó használatához:
Var a = 5 + SquareObj(2); // kap 9-et
Valójában egy Function típusú objektum mindig ábrázolható közönséges függvényként, amellyel deklaráltuk kulcsszó funkció. Tehát ugyanaz a második hatványra való emelés a következőképpen írható le:
SquareFunc(x) függvény (x*x visszatérés; )
Ennek megfelelően az ilyen metódussal deklarált függvény (jelen esetben ez a függvény „tiszta” formájában, és nem az eljárás) használható hasonló módon:
Var a = 5 + SquareFunc(2); // kap 9-et is
Így egy változóhoz függvényként való érték hozzárendelése Function objektum segítségével megegyezik egy függvény deklarálásával. Ugyanakkor ezeknek a megközelítéseknek van egy különbsége: ha a SquareObj olyan változó, amelynek értéke egy Function objektum segítségével létrehozott objektumra való hivatkozás, akkor a SquareFunc egy függvény neve. Ennek megfelelően a program végrehajtásakor ezek is eltérően viselkednek: függvény típusú objektum esetén az értelmező, amikor egy változóval (esetünkben SquareObj-vel) találkozik, teljes mértékben kiértékeli a függvény teljes kódját, a deklarált függvényeknél pedig a szokásos módon a kód csak az első lépésnél kerül kiértékelésre. Ez a különbség nem feltétlenül jelentős, ha a függvény egyszeri munkát végez, de a Function objektum alapján létrehozott változók használata jelentősen csökkenti a program hatékonyságát ciklusokban. Ezért a gyakorlatban a függvényobjektumok használata nagyon ritka, de ennek ellenére néha kényelmesek lehetnek, például metódusok hozzáadása más objektumokhoz.
A Function objektum rendelkezik a szabványos JavaScript konstruktor és prototípus tulajdonságokkal, valamint számos saját tulajdonsággal:
Az argumentumok - az arguments.callee függvény paramétereinek megfelelő tömb - a függvény törzsének felel meg. arguments.caller (elavult) - A függvény nevére mutat, amelyből az objektumot meghívták; arguments.length – a függvényparaméterek számát jelzi. long - a függvény által várt argumentumok számát jelzi (és nem a kapott argumentumok számát, mint az argumentum.length esetében);
FIGYELEM
Minden argumentum tulajdonság csak "belülről" látható egy függvényen, és a JavaScript 1.4-től kezdve az argumentumok már nem a Function objektum tulajdonságai, hanem egy önálló helyi változó, amely implicit módon jelen van bármely függvényben. Valójában a Funkciónak csak 1 saját tulajdonsága van - hossza.
A tulajdonságokon kívül a Function objektumnak több metódusa is van. Tehát az alkalmazó metódus lehetővé teszi, hogy egy objektum metódusát alkalmazza egy másikra, a call metódus pedig egy másik objektum metódusának meghívását az aktuális kontextusában. Sajnos ezeknek a módszereknek a gyakorlati alkalmazása egyértelműen sok kívánnivalót hagy maga után. Tehát csak meg kell említeni a szabványos toString, toSource és valueOf JavaScript metódusokat, amelyek a Function objektumhoz is elérhetők.
Matematikai objektum
A matematika egy beépített JavaScript nyelvi objektum, amely alapvető matematikai állandókkal és függvényekkel rendelkezik, mint metódusok és tulajdonságok. Például a Math objektum PI tulajdonsága tartalmazza a pi (π) értékét, amely körülbelül 3,1416, és a sin metódus a megadott szám szinuszát adja vissza.
A π számon kívül a Math objektum a következő tulajdonságokkal rendelkezik:
- E a természetes logaritmusok alapja (körülbelül 2,718)
- LN10 a 10 természetes logaritmusa (körülbelül 2,302)
- LN2 a 2 természetes logaritmusa (körülbelül 0,693)
- LOG10E – E decimális logaritmusa (körülbelül 0,434)
- LOG2E – E bináris logaritmusa (körülbelül 1,442)
- SQRT1_2- Négyzetgyök 0,5-ből (körülbelül 0,707)
- Az SQRT2 a 2 négyzetgyöke (körülbelül 1,414)
Mivel a Math objektum minden tulajdonsága előre definiált konstans, más Math típusú objektumok létrehozása nemcsak hogy nem kötelező, hanem elfogadhatatlan is, és ezeket mindig ugyanúgy kell elérni, például:
VarCircleLength = átmérő * Math.PI;
A Math objektum a tulajdonságokon kívül az alapvető matematikai függvényeknek megfelelő metódusokat is meghatároz. Mindegyiket felsorolja a 4.13. táblázat.
| Módszer és szintaxisa | Leírás |
|---|---|
| abs (szám) | Az argumentum abszolút értékét adja eredményül |
| atan2(y,x) | Egy számot ad vissza a -? -hoz, amely az x tengely és az (x,y) pont közötti szöget jelenti (radiánban). Vegye figyelembe, hogy az első argumentum az y-koordináta |
| exp(szám) | Visszaadja E-t a megadott hatványra (exponenciális logaritmus) |
| mennyezet (szám), padló (szám) | Azt az értéket adja vissza, amely a legközelebbi nagyobb (ceil) vagy kisebb (padló) egész szám |
| min(szám1, szám2), max(szám1, szám2) | A két összehasonlított argumentum kisebb (min) vagy nagyobb (max.) számát adja vissza |
| sin(szám),cos(szám),tan(szám),asin(szám),acos(szám),atan(szám) | Szabványos trigonometrikus függvények – szinusz, koszinusz, érintő, arcszinusz, arkoszinusz és arktangens – végrehajtásának eredményét adja vissza |
| pow(bázis, kitevő) | Visszaadja az alapot a kitevő hatványára |
| véletlen() | 0 és 1 közötti álvéletlen számot ad vissza |
| kerek(szám) | A legközelebbi egész számra kerekített értéket adja vissza |
| sqrt(szám) | Egy szám négyzetgyökét adja eredményül |
A tulajdonságokhoz hasonlóan a Math objektum metódusainak használatához közvetlenül magára az objektumra kell hivatkoznia, nem pedig annak másolataira. Például írjunk egy függvényt, amely visszaadja az átmérőt egy kör területe alapján:
Funkció CircleDiam(négyzet) ( Sugár = Math.sqrt(Négyzet / Math.PI) ; )
A gyakorlati használathoz használhatja a felszólítási és riasztási módszereket:
Var sq = prompt("Adja meg a területet",1); vardi = CircleDiam(sq); alert("Kör átmérője: "+di);
A math.html fájlban láthatja, hogyan működnek a Math objektum ezen és más módszerei.
Szám objektum
A Number objektum egyszerű numerikus típusok objektum reprezentációja. Speciális tulajdonságokkal rendelkezik a numerikus állandókhoz, például "maximális szám", "nem szám" és "végtelen". Új, Number típusú objektum létrehozásához használja a következő szintaxist:
ÚjSzám(érték)
A gyakorlatban a Number objektum használata leggyakrabban arra korlátozódik, hogy konstansait használják az argumentumok érvényesítésére és a futási hibák nyomon követésére. Például annak ellenőrzésére, hogy egy változó értéke szám-e vagy sem, használhatja ezt a módszert:
If(x!=Szám.NaN);
Ebben az esetben a feltétel akkor lesz igaz, ha az x változó tartalmaz egy számot, mert összehasonlítjuk egy speciális értékkel - NaN, ami "nem szám". A NaN mellett más speciális értékek is használhatók - ezek mind a Number objektum tulajdonságai:
- MAX_VALUE – a lehetséges maximális szám
- MIN_VALUE – a minimális lehetséges szám
- NaN – nem szám (nem szám)
- NEGATIVE_INFINITY - "negatív végtelen", túlcsordulás esetén visszaadott speciális érték
- POSITIVE_INFINITY - "pozitív végtelen", túlcsordulás esetén visszaadott speciális érték
Ezen tulajdonságok mindegyike állandó, így használatukhoz nem kell új Number típusú objektumot létrehoznia. A számhoz a fenti tulajdonságokon kívül a szabványos konstruktor és prototípus tulajdonságai is definiálva vannak.
A Number objektumnak a tulajdonságokon kívül természetesen metódusai is vannak. Attól eltekintve szabványos módszerek toSource, toString és valueOf, a JavaScript 1.5 3 új natív metódust vezet be a Number objektumhoz, a toExponential, a toFixed és a toPrecision. Mindegyiket arra tervezték, hogy számokat karakterláncokká konvertáljanak egyik vagy másik formátum alapján. Például a toExponential metódus egy számot sztringgé alakít ki kitevős számként, a toFixed metódus egy fix számú tizedesjegyű számot tartalmazó karakterláncsá alakítja át, a toPrecision metódus pedig ezen módszerek egyikét használja, attól függően, hogy a szám és a hozzárendelt karakterek száma.
Vizsgáljuk meg részletesebben ezeket a módszereket, amelyekhez figyelembe vesszük a szintaxisukat:
Módszer ([karakterek száma])
Nyilvánvaló, hogy minden metódusnál a karakterek száma a tizedesjegyek számát jelöli, de ha a toFixed metódus alapértelmezett értéke (vagyis ha nincs megadva semmi) 0, akkor a toExponential és a toPrecision esetében a karakterek száma, amelyek a megjelenítéshez szükségesek számot teljes egészében. Hogy jobban megértsük, hogyan működnek és különböznek ezek a módszerek, nézzük meg őket a 4.5-ös lista példájával:
Felsorolás 4.5. toExponenciális, toFix és toPrecision módszerek
Itt is (mint a 4.4-es listában) azt a függvényt használtuk, ami először a kifejezést írja ki, majd az értelmezés eredményét, csak mi ebben az esetben printNumber-nek hívtuk. Ezt követi annak a változónak a tényleges deklarálása, amelyen a számításokat végrehajtjuk. Ebben az esetben Szám típusú objektumként deklaráltuk, bár valójában korlátozódhattunk volna egy változó egyszerű deklarálására (x = 12,45678). Végül megnyílik a dokumentum írásra, és először az x változó értéke jelenik meg explicit konverzió nélkül (de már tudjuk, hogy itt valójában a toString() metódus kerül automatikusan alkalmazásra), ezután mindhárom vizsgált metódus hívódik először. szám karakterek megadása nélkül, majd - a 2. és 4. paraméterrel. Ennek a szkriptnek 10 sora lesz, amelyek párokat tartalmaznak "kifejezés: feldolgozás eredménye" (4.9. ábra).
Rizs. 4.9.
Összefoglalva, még egyszer meg kell jegyezni, hogy ezek a módszerek csak a JavaScript 1.5-ben jelentek meg, és ennek megfelelően nem működnek a 7.0-s verzió előtti Netscape 4, MSIE 4/5 és Opera böngészőkben. Ugyanakkor rugalmasabb kimeneti formázási lehetőségeket biztosítanak, mint például a Math objektum round() metódusa.
2011-08-01 // Kérdése, javaslata, észrevétele van? tudsz
Réges-régen, az XHTML/HTML4 idejében a fejlesztőknek csak néhány lehetőségük volt tetszőleges DOM-mal kapcsolatos adatok tárolására. Feltalálhatta saját attribútumait, de ez kockázatos volt – a kódja nem lesz érvényes, a böngészők figyelmen kívül hagyhatják az adatait, és ez problémákat okozhat, ha a név megegyezik a szabványos HTML-attribútumokkal.
Ezért a legtöbb fejlesztő a class vagy rel attribútumokra támaszkodott, mivel ez volt az egyetlen ésszerű módja a tárolásnak további sorok. Tegyük fel például, hogy egy widgetet építünk üzenetek megjelenítésére, például egy Twitter-idővonalat. Ideális esetben a JavaScript kód átírása nélkül konfigurálható, ezért a felhasználói azonosítót a class attribútumban határozzuk meg, így:
A miénk JavaScript kód megkeresi az azonosítóval rendelkező elemet msglist. A forgatókönyv segítségével megkeressük a következővel kezdődő osztályokat user_, a "bob" pedig esetünkben a felhasználói azonosító lesz, és ennek a felhasználónak az összes bejegyzését megjelenítjük.
Tegyük fel, hogy szeretnénk beállítani az üzenetek maximális számát, és kihagynánk a hat hónapnál (180 napnál) régebbi üzeneteket:
A tulajdonságunk osztály nagyon gyorsan zsúfolt lesz – könnyebben lehet hibázni, és a karakterláncok elemzése JavaScriptben egyre nehezebbé válik.
HTML5 adatattribútumok
Szerencsére a HTML5 bevezette az egyéni attribútumok használatának lehetőségét. Bármilyen kisbetűs nevet használhat előtaggal adat-, Például:
Egyéni adatattribútumok:
- ezek karakterláncok – bennük bármilyen karakterláncként ábrázolható vagy kódolható információ tárolható, például JSON. A típusátadást JavaScript segítségével kell elvégezni
- olyan esetekben kell használni, amikor nincsenek megfelelő HTML5 elemek vagy attribútumok
- csak az oldalra hivatkozzon. A mikroformátumokkal ellentétben ezeket figyelmen kívül kell hagyni. külső rendszerek, típus kereső motorokés keresőrobotok
JavaScript feldolgozási példa #1: getAttribute és setAttribute
Minden böngésző lehetővé teszi az adatattribútumok lekérését és módosítását a getAttribute és setAttribute metódusokkal:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
Ez működik, de csak a régebbi böngészőkkel való kompatibilitás fenntartására használható.
JavaScript feldolgozási példa #2: jQuery data() metódus
A jQuery 1.4.3-tól kezdve a data() metódus kezeli a HTML5 adatattribútumokat. Nem kell kifejezetten megadnia az előtagot adat- szóval a következő kód működne:
Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("lista-méret", show+3);
Bárhogy is legyen, ne feledje, hogy a jQuery megpróbálja átalakítani az ilyen attribútumok értékeit a megfelelő típusokká (boolean, számok, objektumok, tömbök vagy null), és hatással lesz a DOM-ra. nem úgy mint setAttribute, módszer adat() fizikailag nem helyettesíti az attribútumot adatlista-méret- ha a jQuery-n kívül ellenőrzi az értékét - akkor is 5 lesz.
JavaScript feldolgozási példa #3: API adatkészletekkel való munkavégzéshez
És végül megvan a HTML5 adatkészlet API, amely egy DOMStringMap objektumot ad vissza. Emlékeztetni kell arra, hogy az adatattribútumok előtagok nélkül vannak leképezve egy objektumra adat-, a kötőjeleket eltávolítjuk a nevekből, és magukat a neveket CamelCase-vé alakítjuk, például:
| Attribútum neve | Név az adatkészlet API-ban |
| adatfelhasználó | felhasználó |
| adat-max | maxage |
| adatlista-méret | listSize |
Új kódunk:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Ezt az API-t mindenki támogatja modern böngészők, de nem IE10 és régebbi. Ezekre a böngészőkre van megoldás, de valószínűleg praktikusabb a jQuery használata, ha régebbi böngészőkre ír.
Amikor dolgozik dátum és idő JavaScriptben használt dátum objektum. Úgy gondolom, hogy nem szükséges elmagyarázni, milyen gyakran kell dolgozni a dátummal és az idővel. És ebben a cikkben megtudhatja, hogyan kell ezt megtenni JavaScript.
Kezdjük a hagyományoknak megfelelően a tervezőkkel dátum objektum. Négyen vannak. Az első konstruktornak nincsenek paraméterei, és az aktuális időt és dátumot adja vissza:
Var date = new Date();
document.write(dátum);
Ennek eredményeként valami ehhez hasonlót fog látni: 2010. október 14., csütörtök, 11:42:06 GMT+0400".
Második kivitelező dátum objektum egy konstruktor egy paraméterrel. Ez a paraméter az azóta eltelt ezredmásodpercek számát tartalmazza 01.01.1970 (Egy korszak születése Unix). Például így:
Változás dátuma = new Date(135253235);
document.write(dátum);
Ennek eredményeként a következőket fogja látni: 1970. január 2. péntek, 16:34:13 GMT+0300".
A következő konstruktor lehetővé teszi a létrehozást dátum objektum a következő paraméterek beállításával: év, hónap és dátum:
Változás dátuma = new Date(2010, 0, 12);
document.write(dátum);
Eredmény: " 2010. január 12., kedd, 00:00:00 GMT+0300 Azt is vegye figyelembe 0 a hónap január, és 11- December van.
És az utolsó kivitelező Dátum osztály JavaScriptben lehetővé teszi az alkotást dátum objektum minden dátum és idő paraméterrel: év, hónap, nap, óra, perc és másodperc.
változó dátuma = new Date(2010, 0, 12, 23, 45, 12);
document.write(dátum);
Ilyen sort kapsz: 2010. január 12. kedd, 23:45:11 GMT+0300". Ez minden Dátum objektumkonstruktorok JavaScriptben a fejlesztők biztosítják.
A speciális tulajdonságai időpont osztály Nem, tehát azonnal térjünk át a módszerekre. Kezdjük rögtön a módszerek egy csoportjával, amelyek pontosan ugyanúgy működnek, de mindegyik más dátum- és időelemet ad vissza:
Var date = new Date();
document.write("Év - " + date.getFullYear() + "
");
document.write("Hónap - " + dátum.getHónap() + "
");
document.write("Szám - " + date.getDate() + "
");
document.write("A hét napja a következő: " + date.getDay() + "
");
document.write("Óra - " + date.getHours() + "
");
document.write("Perc - " + date.getMinutes() + "
");
document.write("Második - " + date.getSeconds() + "
");
document.write("Milliszekundum - " + date.getMilliseconds() + "
");
document.write("Ezredmásodpercek száma 1970. 01. 01. óta - " + date.getTime() + "
");
A szkript futtatásával azonnal megértheti, hogy ezek a módszerek mit is csinálnak. Csak annyit szeretnék megjegyezni, hogy a hét napjainak számozása is ezzel kezdődik nulla. A vasárnapnak pedig indexe van 0 és szombat - 6 .
Vannak hasonló módszerek, de megmutatják dátum és idő GMT. Írjuk ezt a kódot:
Var date = new Date();
document.write("Év - " + date.getUTCFullYear() + "
");
document.write("Hónap - " + dátum.getUTCMonth() + "
");
document.write("Szám - " + date.getUTCDate() + "
");
document.write("A hét napja a következő: " + date.getUTCDay() + "
");
document.write("Óra - " + dátum.getUTCHours() + "
");
document.write("Perc - " + date.getUTCMutes() + "
");
document.write("Második - " + date.getUTCSeconds() + "
");
document.write("Milliszekundum - " + date.getUTCMilliseconds() + "
");
Ennek a szkriptnek a futtatásával megtudhatja az aktuális dátum és idő Greenwichben.
Ellentétes módszerek kap() módszerek - készlet(). Ha az előbbi bizonyos értékeket ad vissza, akkor az utóbbi éppen ellenkezőleg, megváltoztatja azokat. Igazából ezt a forgatókönyvet nem tudtam megadni, de hogy ne maradjon kérdés, tegyük meg:
Var date = new Date();
date.setFullYear(1990);
dátumbeállításHónap(11);
datesetDate(15);
datesetHours(9);
dátumkészletPercek(20);
datesetSeconds(0);
dátumkészlet Milliszekundum(10);
document.write(dátum);
Remélem észrevetted ezt a módszert setDay() nem létezik. Ez azt sugallja, hogy a hét napját az év, a hónap és a dátum függvényében kell kiválasztani.
Vannak hasonló módszerek a GMT-re is. Csak adjon hozzá egy előtagot UTC, például a hónap megváltoztatásához használja a módszert setUTCMonth().
És az utolsó módszer az beállítani az időt(). Az azóta eltelt ezredmásodpercek számát veszi paraméterként 01.01.1970 :
Date.setTime(39293012);
document.write(dátum);
Ennek eredményeként ezt fogja látni: 1970. január 01. csütörtök, 13:54:53 GMT+0300".
Ennyi a konstruktor és a módszer Dátum objektum JavaScriptben.
