Forhåndsdefinerte objekter i JavaScript-språket. Hvordan kan jeg få tilgang til og behandle nestede objekter, matriser eller JSON? Hvor data js-objektet dannes

I dette kapittelet:

JavaScript har en rekke forhåndsdefinerte objekter som du kan bruke når du skriver skript. Disse inkluderer objekter som Array, Boolean, Date, Function, Math, Number, RegExp og String, samt det primitive objektet. I tidligere versjoner av språket inkluderte det også dokumentobjekter (vindu, dokument), men nå er de ekskludert fra kjernen av JavaScript-språket, og viser til definisjonen av dokumentobjektmodellen (DOM), som vil bli diskutert senere . Noen av egenskapene til disse objektene (dokument og vindu) er imidlertid allerede kjent for oss.

La oss imidlertid gå tilbake til innebygde JavaScript-objekter i moderne forstand. Alle innebygde objekter unntatt Math og Date har egenskaper som konstruktør og prototype. De brukes til å legge til nye egenskaper til eksisterende objekter, og er beskrevet i sammenheng med et funksjonsobjekt.

Objekt Objekt

Alle JavaScript-objekter arver fra Object. Derfor har alle andre JavaScript-objekter alle egenskapene og metodene til dette objektet.

Kun 2 egenskaper er definert for objektobjektet - konstruktør og prototype. Konstruktøregenskapen definerer en funksjon som lager en prototype av et objekt - spesifikt hele funksjonen, ikke bare navnet. Med andre ord, vurder alternativet når en objekttest er definert og en forekomst av dette tmp-objektet opprettes:

Funksjonstest (versjon) (this.version = versjon;) tmp = ny test (1);

I dette tilfellet, ved å bruke konstruktøregenskapen, kan du se kildekoden til testobjektet (Figur 4.6):

Alert (tmp.constructor);

Ris. 4.6.

Denne egenskapen har imidlertid én begrensning: den kan ikke vise koden til innebygde JavaScript-objekter: i slike tilfeller er den viste informasjonen begrenset til navnet på prototypefunksjonen og strengen "".

Prototype-egenskapen gir tilgang til prototypefunksjonen til gjeldende objekt. Bruk av denne egenskapen gjør det mulig å endre egenskapene til objektprototypen. Du kan for eksempel legge til en ny egenskap til et objekt av typetest ved å bruke prototypeegenskapen:

Test.prototype.comment = "Ny egenskapskommentar";

Nå vil alle objekter av typen test, inkludert den allerede opprettede tmp-forekomsten, ha en kommentaregenskap, som er enkel å verifisere ved å bruke følgende kontroll:

Alert (tmp.comment);

Dessuten er det mulig å modifisere innebygde JavaScript-objekter på denne måten. Hvis vi for eksempel trenger å legge til en egenskap som en beskrivelse til arrays, kan vi gjøre dette (selvfølgelig bare innenfor rammen av gjeldende scenario!) Ved å referere til prototypen til Array-objektet og legge til den tilsvarende egenskapen til det:

Array.prototype.description = "";

Når det gjelder metodene, er det litt flere av dem definert for objektobjektet - så mange som 5 stykker. Disse er toSource, toString, watch, unwatch og valueOf, og er kort beskrevet i Tabell 4.10.

Metodene toString og valueOf gjelder for nesten alle innebygde JavaScript-objekter, og kalles vanligvis automatisk av tolken når en konvertering blir nødvendig. ToSource-metoden gjør faktisk bare jobben for konstruktøregenskapen.

De resterende se- og unwatch-metodene, proprietære utvidelser introdusert i Netscape 4-nettleseren (nå også støttet av Mozilla), er ment for skriptfeilsøking. Siden spørsmålet om feilsøkingsprogrammer ikke vil bli vurdert innenfor rammen av denne publikasjonen, gir det ingen mening å beskrive disse metodene. Men for sikkerhets skyld kan du merke deg at Sea Monkey (men ikke Firefox) har en skriptfeilsøker - JavaScript Debugger.

Array-objekt

Matrisevariabler inneholder ordnede sett med verdier, representert som en enkelt variabel for enkelhets skyld. Vi har allerede møtt arrays mer enn en gang (husk i det minste arrays of arguments), nå er det på tide å håndtere alle deres egenskaper og finesser av bruk.

I motsetning til andre programmeringsspråk har ikke JavaScript samme datatype som en matrise. Men denne begrensningen omgås av det faktum at du kan bruke et forhåndsdefinert array-objekt - Array. Du kan bruke en av følgende syntakser for å lage et matriseobjekt:

ArrayName = new Array (item1, item2, ... itemN) ArrayName = new Array (ArrayLength)

I det første tilfellet er alle komponentene i matrisen oppført, i det andre er antallet elementer ganske enkelt angitt. Det er også tillatt å bruke bokstaver når du deklarerer en matrise:

Datamaskiner = ["PC", "Mac", "Sun"];

For å fylle array-elementer med verdier, samt å referere til array-elementer generelt, kan du bruke elementets indeks. Det bør huskes at indeksen til matriseelementene starter fra null:

Var farger = ny Array (3); farger = "Rød"; farger = "Blå"; farger = "Grønn";

Ganske ofte er det praktisk å bruke funksjonen JavaScript gir til å fylle en matrise direkte når du erklærer den:

Var farger = ny Array ("Rød", "Blå", "Grønn");

For å finne ut lengden på en matrise (antall elementer som utgjør en matrise), bruk lengdeegenskapen:

Var NumColors = colors.length;

I tillegg til lengdeegenskapen gir JavaScript også en rekke andre egenskaper og metoder for å jobbe med matriser. Spesielt inkluderer antallet egenskaper til Array-objektet, i tillegg til lengde, konstruktøren og prototypen universal for alle objekter, samt indeks- og inngangsegenskapene beregnet for bruk av arrays i forbindelse med regulære uttrykk.

Når det gjelder metodene, i tillegg til standarden toSource, toString og valueOf, er arrayene utstyrt med et dusin av sine egne, oppført i tabell 4.11.

La oss vurdere noen av metodene mer detaljert. Så ved å bruke concat-metoden kan du kombinere 2 arrays i ett:

Var a = ny matrise ("A1", "A2"); var b = new Array ("B1", "B2"); var ab = a.concat (b);

Her vil variabelen ab bli en matrise som inneholder alle de 4 elementene i de to matrisene som skal limes. Hvis vi nå bruker sammenføyningsmetoden på en slik matrise, vil resultatet være en streng som inneholder alle elementene i denne matrisen, oppført med kommaer:

Str = ab.join (); // get str = "A1, A2, B1, B2"

Når det gjelder pop-metoden, ved å bruke den på den samme matrisen, vil vi motta svaret i "B2", og matrisen vil bli avkortet til de tre første verdiene. Og skiftmetoden, tvert imot, returnerer det første elementet (i vårt tilfelle - "A1") og gjør det samme med matrisen, med den eneste forskjellen at de gjenværende elementene forskyves fremover.

For bedre å forstå hvordan disse og andre array-metoder fungerer, gå til neste eksempel i Listing 4.3.

Oppføring 4.3. Arbeid med arrays

Det samme eksemplet kan sees i filen array.html, samtidig vil det være mulig å se alle resultatene av arbeidet i nettleseren (se fig. 4.7).

Ris. 4.7. Resultat av spleisemetode: returnert array og endringer

Arrays kan også være flerdimensjonale, dvs. et matriseelement kan være en annen matrise. I dette tilfellet brukes følgende syntaks for å referere til et matriseelement:

Array2D = "Vare 0,0" Array2D = "Vare 0,1" ... Array2D [N] [N] = "Vare N, N"

Et eksempel på å fylle og vise en todimensjonal matrise finner du i filen arrays.html, det er også et interaktivt eksempel for nesten alle matrisemetoder.

boolsk objekt

Boolsk objekt er en innpakning for datatypen med samme navn. Følgende syntaks brukes til å definere et objekt av typen boolsk:

BooleanObj = ny boolsk (verdi)

Her er verdi et initialiseringsuttrykk, som om nødvendig vil bli castet til sant eller usant. Hvis du spesifiserer en verdi som 0, null, usann, NaN, udefinert eller en tom streng, vil initialiseringen av det boolske objektet være usann, og for enhver annen verdi, sann.

De primitive boolske verdiene sant og usant skal ikke forveksles med de sanne og usanne datatypene til det boolske objektet. For eksempel, hvis du erklærer en variabel x og tildeler den verdien til et boolsk objekt initialisert med usann, vil den fortsatt være sann når den sammenlignes:

X = ny boolsk (falsk); // når vi sammenligner hvis (x) får vi sannhet

På samme tid, hvis du bare tilordner en primitiv datatype til en variabel, vil den motta den:

X = usann; // når vi sammenligner hvis (x) får vi falsk

Når det gjelder bruken av dette objektet, kan det i praksis brukes som en funksjon for å konvertere verdier av andre typer til booleaner:

A = 100; x = boolsk (a); // x blir sann hvis (x) (...)

Men faktisk er det usannsynlig at du vil gjøre dette, siden slike transformasjoner om nødvendig utføres av JavaScript-tolken automatisk - i eksemplet ovenfor kan du umiddelbart skrive "hvis (a) ...", og transformasjonen er nødvendig i dette tilfellet vil bli gjort i alle fall ...

Datoobjekt

Det er ingen spesiell datatype for å arbeide med datoer i JavaScript, men som med arrays er det et spesielt Data-objekt. Du kan bruke en av følgende metoder for å lage et datoobjekt:

Ny dato () ny dato (millisekunder) ny dato ("Date_in_string_view")

I det første tilfellet opprettes et Dato-objekt med gjeldende klokkeslett, i det andre må du spesifisere antall millisekunder som har gått siden 1. januar 1970. Hvis datoen er angitt som en streng, må den ha formen "28. februar 2005". Det er også mulig å spesifisere en dato ved å bruke heltallsverdier for år, måned, dag osv.:

Ny dato (år, måned, dag [, time, minutt, sekund, millisekund])

Selvfølgelig kan du i dette tilfellet unngå å spesifisere sekunder og millisekunder, spesielt siden millisekunder ikke en gang ble støttet i eldre versjoner av nettlesere. I tillegg støtter ikke JavaScript før versjon 1.3 datoer tidligere enn 1. januar 1970. Når det gjelder formatet på verdiene som er angitt i strengen, er året et hvilket som helst 4-sifret tall (hvis du angir et 2-sifret tall, vil 1900 bli lagt til det), månedsnummeret er fra 0 (januar) ) til 11 (desember), og dagen er fra 0 til 31. Følgelig er tidsverdiene også begrenset: i timer vil det være et heltall fra 0 til 23, i sekunder og minutter - fra 0 til 59, og i millisekunder - fra 0 til 999. Som en objektverdi av typen Dato for å indikere 9. mai 2005, bør du derfor skrive:

Var anyday = ny dato (2005, 5, 9);

Og hvis du trenger å få gjeldende verdi for dato og klokkeslett, er det ingen parametere som kreves i det hele tatt:

Var nå = ny dato ();

Fra og med JavaScript 1.3 kan datointervallet være innenfor 100 millioner dager før og etter 01/01/1970 (nesten 550 tusen år totalt!). I samme versjon var det krav om alltid å angi årstallet i firesifret format, for å unngå feil knyttet til århundreskiftet.

For å jobbe med Date-objektet er det gitt 2 egenskaper - konstruktør og prototype, samt mange metoder som lar deg velge ønsket del av datoen (år, måned, dag, klokkeslett), vise den i ett eller annet format, etc. Alle er listet opp i tabell 4.12.

Til tross for en slik overflod av metoder, er det ganske enkelt å jobbe med Date-objektet: du trenger bare å forstå prinsippet om å navngi metodene:

• metoder som starter med "sett" er for å sette dato og klokkeslett i Dato-objekter;
• metoder som starter med "get" er for å hente datoer, klokkeslett eller deler av dem fra Dato-objekter;
• metoder som starter med "å" returnere dato og klokkeslett (eller deler av dem) som strengverdier;
• metoder som inneholder "UTC" skiller seg fra lignende bare ved at de fungerer med det universelle tidsformatet (det vil si viser tiden i Greenwich Mean Time, tar hensyn til forskyvningen i forhold til gjeldende tidssone).

Dermed gjenstår det bare å legge til for å hente eller angi navnet på den nødvendige delen av datoen eller klokkeslettet for å få eller sette den nødvendige parameteren, om nødvendig også ved å bruke UTC. Vel, når du trenger å få resultatet i en "menneskelig" form, bruk til-metodene. Husk også at for å jobbe med året, bør du alltid bare bruke fullformatfunksjoner (f.eks. getFullYear eller getUTCFullYear, ikke getYear).

Strengrepresentasjonen av en dato i JavaScript har følgende format:

Dag Uke Måned Dag År Timer: Minutter: Sekunder GMT ± Offset

For å se hvordan datoer er representert, og samtidig for å se hvordan funksjoner som toString fungerer, bør du vurdere hva de alle returnerer til utdataene. I dette tilfellet er det første du kan tenke deg for å se arbeidet til en bestemt funksjon å bruke tekstutgangen til dokumentet:

Document.writeln (DateObject.toString ()); document.writeln (DateObject.toGMTString ()); // etc.

Men faktisk, siden det er mange funksjoner, ville det være greit å skrive på forhånd hva slags handling som ble utført:

Document.writeln ("DateObject.toString ()" + DateObject.toString ());

La oss nå tenke igjen på hvor mange linjer vi egentlig ønsker å vise på denne måten. Selv med tanke på egenskapene til "kopier og lim inn"-metoden som støttes av alle tekstredigerere, sikrer den ikke mot feil som dette:

Document.writeln ("DateObject.toLocaleString ()" + DateObject.toString ());

Men som IBM-mottoet sier, folk skal tenke og maskiner skal fungere. Så la oss tenke på hvordan vi får datamaskinen til å fungere, samtidig som vi sparer oss for behovet for å legge inn ekstra byte med kode, som vi refererer til Listing 4.4 for.

Oppføring 4.4. Viser ulike typer datoer og evalfunksjonen

Først av alt definerer den printDate-funksjonen, som faktisk viser datoen i dokumentet i en eller annen form. Snarere viser den datoen i vårt tilfelle, men i prinsippet kan den vise hva du vil - det viktigste er at argumentet den aksepterer er en komplett del av JavaScript-kode. Samtidig sendes først koden ut som den er (dvs. strengvariabelen skrives ut i sin opprinnelige form), og deretter blir resultatet av kjøringen sendt ut, som evalfunksjonen brukes til. Som et resultat, etter å ha skrevet en slik funksjon én gang, kan du senere henvise til den gjennom hele dokumentet, og spare deg selv for å måtte skrive inn praktisk talt den samme teksten to ganger.

Etter utdatafunksjonen er opprettelsen av et objekt av datotypen, som tildeles verdien 2005, måned 3 (april, siden januar er null), dag 1, 14 timer, 30 minutter, 45 sekunder. Deretter åpnes et dokument for skriving og printDate-funksjonen kalles sekvensielt for 6 forskjellige metoder for Date-objektet. Resultatet av dette skriptet vil være 6 linjer som inneholder verdipar fra metoden og resultatet av dens operasjon, atskilt med et kolon (fig. 4.8).

Ris. 4.8. Viser samme dato med forskjellige metoder

Det skal bemerkes at toSource-metoden, som viser datoen i den interne representasjonen av programmet, kun støttes av Mozilla-nettlesere. I tillegg kan formatet for visning av datoer med alle andre metoder også variere litt i forskjellige nettlesere. Du kan laste et slikt eksempel inn i forskjellige seere og se selv hva de produserer (date.html-fil).

Funksjonsobjekt

Det forhåndsdefinerte funksjonsobjektet definerer en linje med JavaScript-kode som må utføres som en funksjon. Følgende syntaks brukes til å deklarere et funksjonsobjekt:

Funksjonsnavn = ny funksjon ([arg1, arg2, ... argN], FunctionBody)

I dette tilfellet kan navnet på en hvilken som helst variabel eller en egenskap til et eksisterende objekt brukes som navn på funksjonen. Det er også mulig å spesifisere et objekt av typen Funksjon som verdien for objektets hendelsesbehandler. Anta at hvis vi ønsker å lage vår egen hendelsesbehandler for fullføringshendelsen for dokumentlasting (document.onload), kan vi skrive slik:

Document.onload = ny funksjon ([Argument1, ... argN], FunctionBody);

Argumentene i dette tilfellet er parametere som sendes til funksjonen, og kroppen til funksjonen er den faktiske koden som må utføres når du får tilgang til dette funksjonsobjektet. Du kan for eksempel skrive en variant av et objekt som skal brukes til å kvadrere et tall:

Var SquareObj = ny funksjon ("x", "retur x * x");

Her er SquareObj navnet på variabelen, x er det aksepterte argumentet, og "return x * x" er kroppen til funksjonen. Vær oppmerksom på det faktum at ikke bare hoveddelen av funksjonen, men også argumentene den tar er omgitt av anførselstegn, og også at navnet på objekttypen, som vanlig i JavaScript, står med stor bokstav (Function).

Å bruke variabler opprettet på denne måten ligner på å bruke variabler av andre typer:

Var a = 5 + SquareObj (2); // få 9

Faktisk kan et objekt av typen Funksjon alltid representeres som en vanlig funksjon deklarert ved hjelp av funksjonsnøkkelordet. Så den samme hevingen til andre potens kan beskrives som følger:

Funksjon SquareFunc (x) (retur x * x;)

Følgelig er det mulig å bruke en funksjon deklarert av denne metoden (i dette tilfellet er det en funksjon i sin "rene" form, og ikke en prosedyre), på lignende måte:

Var a = 5 + SquareFunc (2); // får også 9

Å tilordne en verdi til en variabel som en funksjon ved å bruke et funksjonsobjekt er det samme som å erklære en funksjon som sådan. Men samtidig har disse tilnærmingene en forskjell: hvis SquareObj er en variabel, hvis verdi er en referanse til et objekt opprettet ved hjelp av funksjonsobjektet, så er SquareFunc navnet på funksjonen. Følgelig, under programkjøring, oppfører de seg også annerledes: for et objekt av funksjonstypen vil tolken når den møter en variabel (i vårt tilfelle SquareObj) evaluere hele funksjonskoden fullt ut, og for funksjoner som er deklarert på vanlig måte, koden evalueres kun i første gang. Denne forskjellen er kanskje ikke grunnleggende hvis funksjonen utfører en engangsjobb, men bruk av variabler opprettet på grunnlag av funksjonsobjektet reduserer effektiviteten til programmet i løkker betydelig. Derfor, i praksis, er bruken av funksjonsobjekter svært sjelden, men likevel kan de noen ganger være praktiske, for eksempel for å legge til metoder til andre objekter.

Function-objektet har standard JavaScript-konstruktør- og prototypeegenskaper, samt en rekke egne:

Argumenter - en matrise som tilsvarer parameterne til arguments.callee-funksjonen - tilsvarer kroppen til funksjonen. arguments.caller (avviklet) - indikerer navnet på funksjonen som objektet ble kalt fra; arguments.length - angir antall parametere til funksjonen. lengde - indikerer antall argumenter som forventes av funksjonen (og ikke antallet mottatt, slik tilfellet er med argument.length);

MERK FØLGENDE
Alle egenskapene til argumenter kan bare sees "innenfra" en funksjon, og siden JavaScript 1.4 er argumenter ikke lenger en egenskap til funksjonsobjektet, men en uavhengig lokal variabel som er implisitt tilstede i enhver funksjon. Faktisk er det bare 1 eiendom igjen for Funksjon - lengde.

I tillegg til egenskaper har Function-objektet flere metoder. Så, påføringsmetoden lar deg bruke metoden til ett objekt på et annet, og kallemetoden lar deg kalle metoden til et annet objekt i sammenheng med det gjeldende. Dessverre lar implementeringen av disse metodene i praksis tydeligvis mye å være ønsket. Så det gjenstår bare å nevne standard JavaScript-metodene toString, toSource og valueOf, som også er tilgjengelige i Function-objektet.

Matematikkobjekt

Math er et innebygd JavaScript-objekt som har grunnleggende matematiske konstanter og fungerer som metoder og egenskaper. For eksempel inneholder PI-egenskapen til Math verdien av pi (π), som er omtrent 3,1416, og sin-metoden returnerer sinusen til det angitte tallet.

I tillegg til tallet π har Math-objektet følgende egenskaper:

• E er grunnlaget for naturlige logaritmer (omtrent 2,718)
• LN10 - naturlig logaritme på 10 (omtrent 2.302)
• LN2 - naturlig logaritme på 2 (omtrent 0,693)
• LOG10E – Desimallogaritme av E (omtrent 0,434)
• LOG2E - Binær logaritme av E (omtrent 1,442)
• SQRT1_2 - kvadratroten av 0,5 (omtrent 0,707)
• SQRT2 – kvadratrot av 2 (omtrent 1.414)

Siden alle egenskapene til Math-objektet er forhåndsdefinerte konstanter, er det ikke bare unødvendig å lage andre objekter av Math-typen, men det er også uakseptabelt, og du må alltid referere til dem på samme måte, for eksempel:

Var CircleLength = diameter * Math.PI;

I tillegg til egenskaper definerer Math-objektet også metoder som tilsvarer grunnleggende matematiske funksjoner. Alle er listet opp i tabell 4.13.

Som med egenskaper, for å bruke metodene til Math-objektet, må du referere direkte til selve objektet, og ikke til en kopi av det. La oss for eksempel skrive en funksjon som vil returnere diameteren basert på arealet av sirkelen:

Funksjon CircleDiam (Square) (Radius = Math.sqrt (Square / Math.PI);)

For å bruke det i praksis, kan du bruke ledetekst- og varslingsmetodene:

Var sq = ledetekst ("Angi område", 1); var di = CircleDiam (sq); varsel ("Sirkeldiameter:" + di);

Driften av disse og andre metoder for Math-objektet kan sees i math.html-filen.

Nummerobjekt

Number-objektet er en objektrepresentasjon av enkle numeriske typer. Den har spesielle egenskaper for numeriske konstanter som maksimalt antall, ikke et tall, og uendelig. For å lage et nytt objekt av typen Number, bruk følgende syntaks:

Nytt nummer

I praksis koker bruken av Number-objektet oftest ned til å bruke konstantene for å validere argumenter og spore kjøretidsfeil. For å sjekke om verdien til en variabel er et tall eller ikke, kan du for eksempel bruke denne metoden:

If (x! = Number.NaN);

I dette tilfellet vil betingelsen være sann hvis variabelen x inneholder et tall, siden den sammenlignes med en spesiell verdi - NaN, som betyr "ikke et tall". I tillegg til NaN kan du bruke andre spesialverdier, som alle er egenskaper for Number-objektet:

• MAX_VALUE - det maksimalt mulige antallet
• MIN_VALUE - minimum mulig antall
• NaN - Ikke et tall
• NEGATIVE_INFINITY - "negativ uendelig", spesialverdi returnert i tilfelle overløp
• POSITIVE_INFINITY - "positiv uendelig", spesialverdi returnert i tilfelle overløp

Alle disse egenskapene er konstanter, så du trenger ikke lage et nytt Number-objekt for å bruke dem. I tillegg til egenskapene ovenfor, er standard konstruktør- og prototypeegenskaper også definert for Number.

I tillegg til egenskaper har Number-objektet selvfølgelig metoder. I tillegg til standardmetodene toSource, toString og valueOf, introduserer JavaScript 1.5 3 nye native metoder for Number-objektet - toExponential, toFixed og toPrecision. Alle er designet for å konvertere tall til strenger basert på ett eller annet format. For eksempel konverterer toExponential-metoden et tall til en streng som et tall med en eksponent, toFixed-metoden konverterer til en streng som inneholder et tall med et fast antall desimaler, og toPrecision-metoden bruker en av disse metodene, avhengig av nummer og antall tildelte sifre.

La oss utforske disse metodene mer detaljert, som vi vil vurdere syntaksen for:

Metode ([Antall tegn])

Selvfølgelig, for alle metoder, angir antall tegn antall desimaler, men hvis standardverdien for toFixed-metoden (det vil si hvis ingenting er spesifisert) er 0, så er det for toExponential og toPrecision antallet tegn som kreves for å vise hele nummeret. For bedre å forstå hvordan hver av disse metodene fungerer og hvordan de er forskjellige, la oss se på dem i oppføring 4.5:

Oppføring 4.5. Metodene toExponential, toFixed og toPrecision

Her brukte vi igjen (som i Listing 4.4) en funksjon som først skriver ut et uttrykk, og deretter resultatet av dets tolkning, bare vi kalte det printNumber i dette tilfellet. Dette etterfølges av selve deklarasjonen av variabelen som beregningene skal utføres over. I dette tilfellet erklærte vi det som et objekt av typen Number, selv om vi faktisk kunne ha begrenset oss til en enkel variabeldeklarasjon (x = 12.45678). Til slutt åpnes dokumentet for skriving og verdien av variabelen x vises først i det uten noen eksplisitte konverteringer (men vi vet allerede at faktisk blir toString ()-metoden automatisk brukt her), hvoretter alle tre undersøkte metodene kalles først uten å spesifisere et talltegn, og deretter - med parametere 2 og 4. Resultatet av dette skriptet vil være 10 linjer som inneholder parene "uttrykk: behandlingsresultat" (fig. 4.9).

Ris. 4.9.

Avslutningsvis gjenstår det å merke seg nok en gang at disse metodene bare dukket opp i JavaScript 1.5 og følgelig ikke fungerer i Netscape 4, MSIE 4/5 og Opera-nettlesere før versjon 7.0. Samtidig gir de mer fleksibilitet i formatering av tall i utdata enn for eksempel den runde ()-metoden til Math-objektet.

2011-08-01 // Noen spørsmål, forslag, kommentarer? Du kan

Når du jobber med dato og klokkeslett i JavaScript brukt av Datoobjekt... Jeg tror ikke jeg trenger å forklare hvor ofte du må jobbe med dato og klokkeslett. Og i denne artikkelen vil du lære hvordan du gjør det JavaScript.

La oss starte tradisjonelt med konstruktørene Datoobjekt... Det er fire av dem. Den første konstruktøren tar ingen parametere, og den returnerer gjeldende tid og dato:

Var-dato = ny dato ();
document.write (dato);

Som et resultat vil du se noe sånt som dette: " Tors 14. oktober 2010 11:42:06 GMT + 0400".

Andre konstruktør Datoobjekt er en konstruktør med én parameter. Denne parameteren inneholder antall millisekunder som har gått siden 01.01.1970 (begynnelsen av epoken Unix). For eksempel slik:

Var-dato = ny dato (135253235);
document.write (dato);

Som et resultat vil du se følgende: " Fre 2. januar 1970 16:34:13 GMT + 0300".

Følgende konstruktør lar deg lage Datoobjekt med innstilling av følgende parametere: år, måned og dag:

Var-dato = ny dato (2010, 0, 12);
document.write (dato);

Resultat: " tirsdag 12. januar 2010 00:00:00 GMT + 0300". Merk også at 0 måned er januar, og 11 er desember.

Og den siste konstruktøren Dato-klassen i JavaScript lar deg lage Datoobjekt med alle dato- og tidsparametere: år, måned, dag, timer, minutter og sekunder.

Var-dato = ny dato (2010, 0, 12, 23, 45, 12);
document.write (dato);

Du får følgende linje: " tirsdag 12. jan 2010 23:45:11 GMT + 0300". Det er alt JavaScript Dato-objektkonstruktører levert av utviklerne.

Spesielle egenskaper ved Dato klasse nei, så la oss gå rett til metodene. La oss starte med en gang med en gruppe metoder som fungerer nøyaktig likt, men hver av dem returnerer sitt eget dato- og klokkeslettelement:

Var-dato = ny dato ();
document.write ("År -" + date.getFullYear () + "
");
document.write ("Måned -" + date.getMonth () + "
");
document.write ("Nummer -" + date.getDate () + "
");
document.write ("Ukedag -" + date.getDay () + "
");
document.write ("Time -" + date.getHours () + "
");
document.write ("Minute -" + date.getMinutes () + "
");
document.write ("Second -" + date.getSeconds () + "
");
document.write ("Millisecond -" + date.getMilliseconds () + "
");
document.write ("Antall millisekunder gått siden 01.01.1970 -" + date.getTime () + "
");

Ved å kjøre dette skriptet vil du umiddelbart forstå hva hver av disse metodene gjør. Det eneste jeg vil merke meg er at nummereringen av ukedagene også starter med ripe... Dessuten har søndag en indeks 0 og lørdag - 6 .

Det finnes lignende metoder, men viser dato og klokkeslett etter Greenwich Mean Time... La oss skrive kode slik:

Var-dato = ny dato ();
document.write ("År -" + date.getUTCFullYear () + "
");
document.write ("Måned -" + date.getUTCMonth () + "
");
document.write ("Nummer -" + date.getUTCDate () + "
");
document.write ("Ukedag -" + date.getUTCDay () + "
");
document.write ("Time -" + date.getUTCHours () + "
");
document.write ("Minute -" + date.getUTCMinutes () + "
");
document.write ("Second -" + date.getUTCSeconds () + "
");
document.write ("Millisecond -" + date.getUTCMilliseconds () + "
");

Ved å kjøre dette skriptet vil du finne ut gjeldende dato og klokkeslett i Greenwich.

Motsatte metoder få () er metodene - sett ()... Hvis førstnevnte returnerer visse verdier, endrer sistnevnte tvert imot dem. Egentlig kunne jeg ikke ta med dette manuset, men slik at det ikke er noen spørsmål igjen, la oss gjøre det:

Var-dato = ny dato ();
date.setFullYear (1990);
date.setMonth (11);
date.setDate (15);
date.setHours (9);
date.setMinutes (20);
date.setSeconds (0);
date.setMilliseconds (10);
document.write (dato);

Jeg håper du la merke til at metoden setDay () eksisterer ikke. Dette betyr at ukedagen velges avhengig av år, måned og dag.

Det finnes også lignende metoder for Greenwich. Bare prefikset er lagt til UTC, for eksempel for å endre måneden, bruk metoden setUTCMonth ().

Og den siste metoden er setTime ()... Tar som parameter antall millisekunder som har gått siden 01.01.1970 :

Date.setTime (39293012);
document.write (dato);

Som et resultat vil du se dette: " Tor 1. januar 1970 13:54:53 GMT + 0300".

Det er alle konstruktørene og metodene Datoobjekt i JavaScript.

Datametoden i jQuery gir oss muligheten til å binde vilkårlige data til ethvert dokument eller javaScript-objekt, noe som gjør koden din mer konsis og lesbar. Fra og med jQuery 1.4.3 ble det mulig å bruke denne metoden for javaScript-objekter, og også spore endringer i disse dataene.

Det grunnleggende

Til å begynne med kan du kalle datametoden på et jQuery-objekt, og du kan også bruke funksjonen $ .data () direkte.

// Ved å bruke metoden: $ ("# myDiv"). Data ("nøkkel", "vilkårlig verdi"); // Bruker funksjonen direkte: $ .data ($ ("# myDiv"). Få (0), "nøkkel", "vilkårlig verdi");

Datafunksjonen er en lavnivåimplementering som faktisk brukes når metoden kalles. jQuery-objektmetoden er mye mer praktisk, den lar seg også inkludere som en kjede av samtaler.

Vær også oppmerksom på at du må sende et DOM-element, ikke et jQuery-objekt, som den første parameteren til $ .data-funksjonen.

En objektmetode krever to parametere - en nøkkel og en verdi. Nøkkelen er en strengkonstant, og verdien er enhver datastruktur, inkludert funksjoner, matriser og objekter. Det er en alternativ syntaks der du kan sende et objekt som én parameter:

// Du kan sende et objekt: $ ("# myDiv"). Data (("navn": "Stevie", "alder": 21)); // Samme ting: $ ("# myDiv"). Data ("navn", "Stevie"). Data ("alder", 21);

Nå, hvis du trenger å hente de lagrede dataene, kan du kalle opp datafunksjonen ved å sende nøkkelen til den som en parameter:

Var theValue = $ ("# myDiv"). Data ("alder"); // 21

Tilgang til disse dataene er åpen hvor som helst i skriptet. Du vil motta de lagrede dataene så lenge det er et element hentet av den gitte velgeren.

Var theValue = $ ("div: første"). Data ("navn"); // Stevie $ ("div: første"). Klikk (funksjon () (varsling ($ (dette) .data ("alder")); // 21));

JQuery 1.4.3 gir også HTML5-data lagret i attributter. Dette betyr at hvis du har et element deklarert slik:

I dette tilfellet kan du hente data fra data-internal-id-attributtet ved å kalle $ ("# img1"). Data ("internal-id")-metoden, som utvilsomt er nyttig for AJAX-forespørsler.

Bruke datametoden for JavaScript-objekter

Du kan bli overrasket, men datametoden kan også brukes til vanlige JavaScript-objekter. Denne funksjonaliteten ble offisielt introdusert i jQuery 1.4.3.

Var myObj = (); $ (myObj) .data ("by", "Springfield");

Eksemplet ovenfor oppretter faktisk en byeiendom for det gitte objektet. Hvorfor ikke bare skrive myObj.city = "Springfield" da? Forskjellen er at datametoden legger til flere nyttige hendelser til objektet for å gjøre det lettere å jobbe med dette objektet. For eksempel:

Var progressBar = (); $ (progressBar) .bind ("setData", funksjon (e, nøkkel, verdi) (bryter (tast) (stor bokstav "prosent": $ ("# fremdrift"). width (verdi + "%"); $ (" # prosentText "). tekst (verdi +"% "); break; case" color ": $ (" # progress "). css (" color ", value); break; case" aktivert ": $ (" # progress "). ") .toggleClass ("aktiv", verdi); break;))); $ (progressBar) .data ("aktivert", sant) .data ("prosent", 21) .data ("farge", "grønn"); console.log (progressBar.enabled);

I eksemplet ovenfor bruker vi datametoden for å lage den enkleste API som vi kan oppdatere et element med.

Det er ytterligere to hendelser som kan brukes for et javaScript-objekt:

• getData - utløses før lesing av data. Du kan bruke den til å forhåndsbehandle de mottatte dataene. For eksempel for å beregne en verdi på nytt.
• changeData - utløses når data settes eller endres. Denne hendelsen brukes av jQuery datalink-plugin. Den lar deg binde skjemadata til et javaScript-objekt og behandle skjemafelt som egenskaper for et objekt.

Bak scenen

jQuery lager et tomt objekt (for nysgjerrige kalles det $ .cache), som er lagret av alle verdiene som du lagrer ved hjelp av datametoden. Hvert element fra DOM-en som brukes med datametoden tildeles en unik identifikator, som deretter er nøkkelen for å få tilgang til dataene i $ .cache-objektet.

jQuery lagrer ikke bare brukerdata i denne hurtigbufferen, den lagrer også interne data, hendelsesbehandlere som du henger ved å bruke live (), bind () og delegere () funksjonene. Å bruke et sentralt depot gjør jQuery mer robust.

Konklusjon

Datametoden er bare en av de mange jQuery-funksjonene som gjør livet enklere for webutviklere. Når det kombineres med bibliotekets andre muligheter, utfyller det et solid grunnlag som vi kan stole på.

Tilbake på XHTML / HTML4-dagene var det bare noen få funksjoner som utviklere kunne bruke til å lagre vilkårlige DOM-relaterte data. Du kunne finne opp dine egne attributter, men det var risikabelt - koden din ville ikke være gyldig, nettlesere kunne ignorere dataene dine, og dette kan forårsake problemer hvis navnet samsvarte med standard HTML-attributter.

Derfor knyttet de fleste utviklere seg til klasse- eller rel-attributtene, da de var den eneste fornuftige måten å lagre ekstra strenger på. Anta for eksempel at vi lager en widget for å vise innlegg som tidslinjen til Twitter-innlegg. Ideelt sett bør JavaScript være konfigurerbart uten å måtte skrive om koden, så vi definerer bruker-IDen i klasseattributtet, for eksempel:

JavaScript-koden vår vil søke etter et element med en ID meldingsliste... Ved hjelp av manuset vil vi søke etter klasser som starter med bruker_, og "bob" i vårt tilfelle vil være bruker-ID, og ​​vi vil vise alle meldinger til denne brukeren.

La oss si at vi også ønsker å angi maksimalt antall meldinger, og hoppe over meldinger eldre enn seks måneder (180 dager):

Vår egenskap klasse blir rotete veldig raskt – det er lettere å gjøre feil, og JavaScript-strengparsing blir vanskeligere og vanskeligere.

HTML5-dataattributter

Heldigvis introduserte HTML5 muligheten til å bruke egendefinerte attributter. Du kan bruke alle små bokstaver med prefikset data-, for eksempel:

Egendefinerte dataattributter:

• disse er strenger - i dem kan du lagre all informasjon som kan representeres eller kodes som en streng, for eksempel JSON. Typecasting må gjøres med JavaScript
• bør brukes i tilfeller der ingen passende HTML5-elementer eller attributter er tilgjengelige
• referer kun til siden. I motsetning til mikroformater bør de ignoreres av eksterne systemer som søkemotorer og søkeroboter.

JavaScript-eksempel # 1: getAttribute og setAttribute

Alle nettlesere lar deg hente og endre dataattributter ved å bruke metodene getAttribute og setAttribute:

Var msglist = document.getElementById ("msglist"); var show = msglist.getAttribute ("data-liste-størrelse"); msglist.setAttribute ("data-liste-størrelse", + vis + 3);

Dette fungerer, men bør kun brukes for å opprettholde kompatibilitet med eldre nettlesere.

JavaScript eksempel # 2: jQuery data () metode

Fra og med jQuery 1.4.3 håndterer data ()-metoden HTML5-dataattributter. Du trenger ikke spesifisere prefikset eksplisitt data- så en kode som dette ville fungere:

Var msglist = $ ("# msglist"); var show = msglist.data ("listestørrelse"); msglist.data ("listestørrelse", vis + 3);

Uansett, husk at jQuery prøver å konvertere verdiene til slike attributter til passende typer (booleaner, tall, objekter, matriser eller null) og vil påvirke DOM. I motsetning til setAttribute, metode data () erstatter ikke attributtet fysisk data-liste-størrelse- hvis du sjekker verdien utenfor jQuery - forblir den fortsatt på 5.

JavaScript-eksempel # 3: API for arbeid med datasett

Til slutt har vi en HTML5 datasett API som returnerer et DOMStringMap objekt. Det må huskes at dataattributter er tilordnet et objekt uten prefikser. data-, bindestrek fjernes fra navnene, og selve navnene konverteres til camelCase, for eksempel:

Vår nye kode:

Var msglist = document.getElementById ("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = + vis + 3;

Denne API-en støttes av alle moderne nettlesere, men ikke IE10 og lavere. Det finnes en løsning for disse nettleserne, men det er sannsynligvis mer praktisk å bruke jQuery hvis du skriver for eldre nettlesere.