Javascript Object Bokstavelig Tutorial

Javascript Object Bokstavelig Tutorial


Javascript er en web skriptspråk. Webutviklere bruker den til å lage websider mer interaktive og for å gi dem ekstra funksjonalitet. Javascript objekt litteraler er virtuelle representasjoner av reelle enheter. For eksempel kan en utvikler opprette et objekt bokstavelig heter \ "planet. \" Planetene har egenskaper som navn, størrelse og bane. I stedet for å definere en egen variabel for hver av disse egenskapene, kan en utvikler opprette et objekt bokstavelig heter \ "planet \" som holder disse egenskapene og verdiene knyttet til dem.

Bruksanvisning

1 Åpne Notisblokk.

2 Lim denne koden inn i filen:

<! DOCTYPE html PUBLIC \ "- // W3C // DTD XHTML 1.0 Transitional // EN \" \ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\&quot;>
<Html xmlns = \ "http://www.w3.org/1999/xhtml\&quot;>
<Head>

&lt;title>Test Page&lt;/title>

& Lt; script>

& Lt; / script>

</ Head>

<Body>

</ Body>

</ Html>

Dette skaper et tomt HTML-dokumentet.

3 Legg denne koden etter første <script> tag:

Var myState = {

}

Dette skaper bokstavelig objekt en Javascript. Dette objektet vil inneholde informasjon om en stat. Objektet definisjonen begynner med en venstre brakett og slutter med en riktig brakett.

4 Legg til denne linjen med kode under den første konsollen slik at objektet definisjonen ser slik ut:

Var myState = {
stateName: \ "Texas \"

}

Dette skaper en eiendom for \ "myState. \" Navnet på eiendommen er \ "stateName. \" Det har en verdi på \ "Texas. \" Opprett en eiendom ved å skille et navn og verdi med et kolon. Omgi ikke-numeriske verdier, for eksempel Texas, med anførselstegn.

5 Legg til en annen linje i koden slik at kodeblokken ser slik ut:

Var myState = {
navn: \ "Texas \",
kapital: \ "Austin \",

}

Dette legger en annen eiendom som heter \ "kapital \" til objektet. Den har en verdi på \ "Austin. \" Separate eiendommer med et komma, som vist ovenfor.

6 Tilføy denne koden til forrige kode:

byer: [\ "Dallas \", \ "Houston \", \ "Laredo \"],

Javascript objekt litteraler kan også inneholde arrays. Dette er en matrise som heter \ "byene \" som har tre elementer.

7 Tilføy denne koden til forrige kode:

klima: {nord: \ "kald \", sørlige: \ "hot \"}

Objekt litteraler kan inneholde andre objekt litteraler. Dette er et objekt bokstavelig heter \ "klima \" som inneholder to egenskaper: \ "Nord \" og \ "sørlige \". Den komplette \ "myState \" objekt bokstavelig ser nå slik ut:

Var myState = {
navn: \ "Texas \", kapital: \ "Austin \",
byer: [\ "Dallas \", \ "Houston \", \ "Laredo \"],
klima: {nord: \ "kald \", sørlige: \ "hot \"}
};

8 Legg denne koden etter forrige kode:

window.onload = showObject

funksjon showObject () {
alert (\ "Name = \" + myState.name + \ "First City = \" + myState.cities [0])

}

Window.onload uttalelse forteller Javascript for å kalle funksjonen som heter \ "showObject \" etter siden lastes. Denne funksjonen skrives ut noen av verdiene av objektet. For å få tilgang verdien av et objekt eiendom, bruker dot notasjon. Gjør dette ved å skrive inn navnet på eiendommen, etterfulgt av en periode. For eksempel, for å få tilgang til kapital i Texas, skriver \ "myState.texas. \" For å få tilgang til det andre elementet av \ "byene \" array, skriver \ "myState.cities [1]. \"

9 Legg til denne linjen med kode til funksjonen:

Alert (\ "Northern Klima = \" + myState.climate.northern)

Dette vil vise klima i den nordlige delen av state.To tilgang til en eiendom som er inne i en underordnet objekt bokstavelig, skriver du navnet på den overordnede objektet bokstavelig, føyer en periode, føyer navnet på barnet objektet bokstavelig, føyer en periode og til slutt legge skriv inn navnet på eiendommen som du ønsker å undersøke. I dette eksempelet \ "klima \" er et underordnet objekt bokstavelig inne en forelder objekt bokstavelig kalt \ Reference klimaet i den nordlige delen av staten ved å skrive følgende "myState \.":

myState.climate.northern

Hint

  • Hvis du forsøker å hente en verdi fra en ikke-eksisterende objekt bokstavelig eiendom, vil du få tilbake en verdi av \ "udefinert. \"