JavaScript

JavaScript
programmeringsspråk
ForfatterBrendan Eich
Opprinnelsesdato1995
Siste versjon1.8.5
ParadigmerHendelses- og objektprogrammering, funksjonell
Skrivingsvak
Vanlige utvidelser.js
Påvirket avScheme , Self , Java , C , Python , Awk , HyperTalk
Det påvirketActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Referanseimplementering
GjennomføringKJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Nettsteddeveloper.mozilla.org/it/docs/Web/JavaScript

I informatikk er JavaScript et hendelsesorientert multi-paradigme programmeringsspråk , ofte brukt i webprogrammering på klientsiden (senere også utvidet til serversiden ) for å lage, i nettsteder og nettapplikasjoner , av interaktive dynamiske effekter gjennom skriptfunksjoner som påkalles av hendelser utløst på sin side på ulike måter av brukeren på nettsiden som er i bruk ( mus , tastatur , sideinnlasting, etc ...).

Opprinnelig utviklet av Brendan Eich fra Netscape Communications under navnet Mochan og senere LiveScript , ble det senere omdøpt til " JavaScript " og ble formalisert med en syntaks nærmere syntaksen til Sun Microsystems Java-språk ( som ble anskaffet i 2010 fra Oracle ). Standardisert for første gang i 1997 av ECMA under navnet ECMAScript , den siste standarden, datert juni 2022, er ECMA-262 Edition 13 [1] og er også en ISO-standard ( ISO / IEC 16262).

Beskrivelse

Skriptfunksjonene, som derfor brukes i presentasjonslogikken , kan enkelt settes inn i HTML - filer , i JSP - sider eller i spesielle separate filer med .js -utvidelsen så tilbakekalles i forretningslogikken . Nylig har bruksområdet blitt utvidet til de såkalte Hybrid Apps (hybrid-apper), som det er mulig å lage apper for flere operativsystemer med ved hjelp av en enkelt kildekode basert på JavaScript, HTML og CSS .

Java, JavaScript og JScript

Navneendringen fra LiveScript til JavaScript kom på den tiden Netscape inkluderte støtte for Java-teknologi i Netscape Navigator -nettleseren . [2] Navnevalget viste seg å være en kilde til stor forvirring. Det er ingen reell sammenheng mellom Java og JavaScript; deres likheter er hovedsakelig i syntaksen (avledet i begge tilfeller fra C-språket ); deres semantikk er ganske forskjellig, og spesielt objektmodellene deres er urelaterte og merkbart inkompatible.

Gitt suksessen til JavaScript som et språk for å berike nettsider , utviklet Microsoft et kompatibelt språk, kjent som JScript . Behovet for felles spesifikasjoner var grunnlaget for ECMA 262-standarden for ECMAScript , hvorav åtte utgaver er publisert siden arbeidet startet i november 1996 [3] .

Strukturelle aspekter

Hovedfunksjonene til JavaScript er:

Andre interessepunkter: I JavaScript på klientsiden kjører koden direkte på klienten og ikke på serveren . Fordelen med denne tilnærmingen er at, selv med tilstedeværelsen av spesielt komplekse skript , risikerer ikke webserveren overbelastning siden arbeidet utføres av klienten. En ulempe er at ved spesielt store skript kan overføringstiden fra nettverket bli for lang. Videre må all informasjon som krever tilgang til data lagret i en ekstern database sendes tilbake til et språk som fysisk utfører transaksjonen , for deretter å returnere resultatene til en eller flere JavaScript-variabler; slike operasjoner krever en ny lasting av selve siden. Imidlertid ble disse grensene stort sett overvunnet med fødselen av AJAX .

Noen andre bemerkelsesverdige JavaScript-funksjoner:

Inkompatibilitet

De ulike implementeringene av JavaScript, som allerede skjedde med HTML, samsvarer ofte ikke med standarder, men er heller bygget for å fungere med en spesifikk nettleser og et sett med spesifikke versjoner av samme. Den nåværende ECMAScript- standarden skal teoretisk være grunnlaget for alle JavaScript-implementeringer, men i praksis bruker Mozilla (og Netscape ) nettlesere JavaScript , Microsoft Internet Explorer bruker JScript , og andre nettlesere som Opera og Safari bruker andre ECMAScript- implementeringer , ofte med ekstra ikke- standardfunksjoner for å tillate kompatibilitet med JavaScript og JScript.

JavaScript og JScript inneholder mange funksjoner som ikke er en del av den offisielle ECMAScript-standarden, og kan også være blottet for flere funksjoner. Ved å gjøre det er de delvis inkompatible, noe som fører til at manusforfattere må håndtere slike problemer når de skriver programvare . Av de to er JavaScript mer standard-kompatibel: Dette betyr at et skript skrevet i henhold til ECMA-standarder vil fungere med de fleste nettlesere, spesielt i nyere versjoner.

En annen effekt er at hver nettleser kan behandle det samme skriptet forskjellig, og det som fungerer i en nettleser fungerer kanskje ikke i en annen, eller i en annen versjon av samme nettleser. Som med HTML, anbefales det derfor å skrive standardkompatibel kode. Selvfølgelig har det i løpet av årene blitt laget ulike biblioteker og rammeverk som kan brukes til å forenkle skrivingen av JavaScript-kode som fungerer korrekt uavhengig av hvilken nettleser som brukes. Et av de mest kjente og mest utbredte bibliotekene for å forenkle skrivingen av enkle skript i HTML- eller PHP-sider er jQuery , mens det er mange rammer for å skrive applikasjoner i JavaScript, til og med ekstremt sofistikerte (klientsiden og/eller serversiden), og ignorerer fullstendig. behovet for å gjenkjenne hvilken nettleser sluttbrukeren skal bruke.

Mottiltak

Det er to hovedteknikker for å håndtere inkompatibiliteter: nettlesersniffing (bokstavelig talt "sniffing av nettleseren") og objektdeteksjon . Da det bare var to nettlesere som støttet skripting, nemlig Netscape og Internet Explorer, var nettlesersniffing den mest populære teknikken. Ved å sjekke en rekke klientegenskaper, som returnerte plattform-, nettleser- og versjonsinformasjon, var det mulig for koden å se nøyaktig hvilken nettleser den kjørte i. senere sniffing- teknikker ble vanskeligere å implementere, ettersom Internet Explorer begynte å skjule informasjonen sin, for eksempel ved å gi stadig mer unøyaktig nettleserinformasjon (Microsofts årsaker til dette har lenge vært omstridt). Senere ble snusing i nettlesere noe av en komplisert kunstform da andre skriptnettlesere kom inn på markedet, hver med sin egen plattform, klient og versjonsinformasjon.

Objektdeteksjon er basert på å sjekke eksistensen av egenskapen til et objekt.

function set_image_source ( imageName , imageURL ) { // Test for å se om 'document'-objektet har en 'images'-egenskap if ( document . images ) { // kjøres bare hvis det finnes en 'images'- dokumentvektor . bilder [ bildenavn ]. src = imageURL ; } }

Et mer komplekst eksempel er basert på bruken av koblede boolske tester:

if ( dokument . brødtekst && dokument . brødtekst . stil )

I dette tilfellet vil uttrykket "document.body.style" normalt forårsake en feil i en nettleser som ikke har egenskapen "document.body", men bruk av "&&"-operatoren sikrer at "document.body.style" er aldri kalt hvis" document.body "ikke eksisterer. Testen drar nytte av denne særegenheten ved evalueringen av logiske uttrykk, kalt lat evaluering (bokstavelig talt "lat evaluering").

I dag brukes en kombinasjon av nettleser-sniffing, objektdeteksjon og standardoverholdelse som ECMAScript-spesifikasjonen og CSS i ulike tiltak for å prøve å sikre at en bruker aldri støter på en JavaScript-feil.

Bruk

I motsetning til andre språk, som C eller C++, som tillater å skrive helt frittstående programmer, brukes JavaScript hovedsakelig som et skriptspråk , integrert, det vil si i annen kode.

Den grunnleggende ideen er at vertsprogrammet (det som er vert for og kjører skriptet) gir skriptet et veldefinert API , som gir tilgang til spesifikke operasjoner, og implementeringen av disse er vertsprogrammets ansvar . Skriptet, når det kjøres, bruker referanser til denne API-en for å be ( vertsprogrammet ) om å utføre spesifikke operasjoner, som ikke er ment av selve JavaScript-språkkonstruksjonene. Denne mekanismen er også tatt i bruk i språk som C eller Java , der programmet er avhengig av biblioteker , ikke gitt av språket selv, som lar deg utføre operasjoner som I / O eller utføring av anrop til funksjonssystem .

Det typiske (og kanskje det mest kjente og mest vanlige) eksemplet på et vertsprogram for et JavaScript-skript er nettleseren . En moderne nettleser inneholder vanligvis en JavaScript-tolk . Når en nettside som inneholder JavaScript-kode besøkes, kjøres den av tolken i nettleseren. Grensesnittene som lar JavaScript forholde seg til en nettleser kalles DOM ( Document Object Model på italiensk ). Mange nettsteder bruker JavaScript-teknologi på klientsiden for å bygge kraftige dynamiske nettapplikasjoner .

En hovedbruk av JavaScript i nettmiljøet er skriving av små funksjoner integrert i HTML -sider som samhandler med nettleserens DOM for å utføre visse handlinger som ikke er mulig med statisk HTML alene : sjekk verdiene i inndatafeltene, skjul eller vise visse elementer osv. Dessverre blir ikke DOM-standardene pålagt av W3C alltid respektert konsekvent og konsekvent av alle. Ulike nettlesere, avhengig av deres gjengivelsesmotor , eksponerer forskjellige objekter eller metoder for skriptet, så det er ofte nødvendig å implementere tilleggskontroller til en JavaScript-funksjon, for å sikre kompatibilitet med hver nettleser og til og med i henhold til de forskjellige versjonene av samme nettleser.

Utenfor nettet er JavaScript-tolker integrert i flere applikasjoner. Adobe Acrobat og Adobe Reader støtter JavaScript i PDF- filer . Mozilla - plattformen , som understøtter mange populære nettlesere, bruker JavaScript for å implementere brukergrensesnittet og transaksjonslogikken til de ulike produktene. JavaScript-tolker er også integrert i proprietære applikasjoner uten skriptbare grensesnitt. Til slutt støtter Microsofts Windows Script Host - teknologi JavaScript (via JScript), et skriptspråk for operativsystemer .

Hver av disse applikasjonene gir sin egen objektmodell som gir tilgang til vertsmiljøet, med kjernen i JavaScript-språket stort sett uendret i hver applikasjon. Det er flere implementeringer av kjernen i JavaScript-språket, inkludert:

Bruk i HTML Skript -tag (HTML)

For å sette inn et skript på en HTML-side, må du bruke script -taggen . Denne taggen er ikke en del av selve JavaScript-språket, den fungerer bare som en "beholder" på en HTML-side.

< script type = "text / javascript" > // <! [CDATA [ JavaScript statements ... //]]> </ script >

Et dokument kan ha definisjonen av skriptkoden i flere deler. Gjennom denne taggen kan du representere versjonen som brukes, og avhengig av nettleseren vil du ha tolkningen av den aktuelle delen av koden. Definisjonene kan være følgende:

< script type = "text / javascript" > ... </ script > Eksempel: Hei verden!

Følgende eksempel viser en advarsel med " Hallo verden " inni.

< script type = "tekst / javascript" > varsel ( 'Hei verden' ); < /script>

For å "skrive" direkte inn på HTML-siden:

< script type = "tekst / javascript" > dokument . skriv ( 'Hei verden' ); < /script>

MIME - typen for JavaScript-kildekoden er application/javascript, men er mest brukt text/javascript, om enn ikke-standard.

For å bygge inn JavaScript-kode i et HTML-dokument, før det med:

< script type = "tekst / javascript" >

og følg med:

</ script >

Eldre nettlesere krever vanligvis koden til å begynne med:

< script language = "JavaScript" type = "tekst / javascript" > <! -

og slutter med:

// -> </ script >

Kommentarmarkører <!--... -->er nødvendig for å sikre at koden ikke vises som tekst av svært gamle nettlesere som ikke gjenkjenner taggen <script>i HTML-dokumenter, mens LANGUAGE er et HTML-attributt (som nå ikke anbefales) som kan etterspørres fra gamle nettlesere. <script>-tagger i XHTML / XML -dokumenter fungerer imidlertid ikke når de kommenteres ut, da parsere som samsvarer med XHTML/XML-standardene ignorerer kommentarer og kan også støte på problemer med symboler --og <i >skript (for eksempel å forveksle dem med operatørers reduksjon av heltall og sammenligning). XHTML-dokumenter bør da inkludere skriptene som CDATA -seksjoner av XML, med prefiks med

< script type = "tekst / javascript" > // <! [CDATA [

og følger dem forbi

//]]> </ script >

('//'-symbolene i begynnelsen av en linje signaliserer starten på en JavaScript-kommentar, for å forhindre <![CDATA[og ]]>fra å bli analysert av skriptet.)

HTML [1] -elementer kan inneholde iboende hendelser som kan assosieres med behandlere spesifisert av et skript. For å skrive gyldig HTML 4.01-kode, bør webserveren returnere en 'Content-Script-Type' med verdien 'text / JavaScript'. Hvis webserveren ikke kan konfigureres for dette formålet, kan nettstedforfatteren plassere følgende setning i overskriftsdelen av dokumentet

< meta http-equiv = "Content-Script-Type" innhold = "tekst / javascript" /> Hyppig bruk i nettlesere

JavaScript kan brukes for alle aspekter av nettleserens klientsideskripting , men noen bruksområder har blitt mer utbredt enn andre. Eksempler inkluderer å erstatte bilder, lage popup-vinduer og validere skjemadata . I de fleste nettlesere viser følgende XHTML -kodebit én måte et bilde kan erstattes med et annet når brukeren flytter markøren over det. Denne effekten kalles ofte rollover eller mouse over . Imidlertid kan lignende atferd også oppnås ved kun å bruke CSS .

< img src = "normal.png" onclick = "window.location.href = 'http: //en.wikipedia.org/'" onmouseover = "this.src = 'rollover.png'" onmouseout = "this.src = 'normal.png' " /> Datterselskaper

Et nytt eksempel på bruk av JavaScript er Bookmarklets , små deler av kode i bokmerkene eller favorittene til nettlesere. Programmeringsspråket som brukes i Macromedia Flash (kalt ActionScript ) har en sterk likhet med JavaScript, på grunn av deres delte forhold til ECMAScript . ActionScript har nesten samme syntaks som JavaScript, men objektmodellen [7] er veldig forskjellig.

JavaScript for OSA (JavaScript OSA, eller JSOSA), er et skriptspråk for Macintosh basert på Mozillas JavaScript 1.5-implementering [8] . Det er en freeware- komponent gjort tilgjengelig av Late Night Software . Interaksjon med operativsystemet og tredjepartsapplikasjoner administreres gjennom et MacOS -objekt . Bortsett fra det er språket praktisk talt identisk med Mozilla-implementeringen. Det har blitt foreslått som et alternativ til det mer brukte AppleScript -språket .

Språkelementer

Variabler

Variabler skrives vanligvis dynamisk, det vil si at de defineres ganske enkelt ved å tildele dem en verdi eller bruke kommandoenlet ; de som er deklarert utenfor en hvilken som helst funksjon er i "global" synlighet eller tilgjengelig fra hele nettsiden ; de som er deklarert inne i en funksjon er lokale eller interne i denne funksjonen. For å overføre variabler fra side til side, kan en utvikler sette en informasjonskapsel eller bruke en skjult ramme eller et vindu i bakgrunnen for å lagre dem.

Objekter

Alt i JavaScript er enten en primitiv verdi eller et objekt. Objekter er enheter med unikhet (de er bare likeverdige med seg selv) og som forbinder egenskapsnavn med verdier. Dette betyr at et objekt er en assosiativ vektor som ligner hashes i Perl og Ruby , eller ordbøker i Python , PostScript og Smalltalk .

JavaScript har flere typer forhåndsdefinerte objekter, spesielt Array , Boolean ( Boolean ), Dato (objekter som inneholder en dato og klokkeslett), Funksjon ( funksjoner ), Math (objekt som inneholder funksjoner brukt i matematiske beregninger), Tall (tall) , Objekt ( objekter ), RegExp ( regulære uttrykk ) og String ( strenger ). Andre objekter er "gjesteobjektene", definert ikke av språket, men av utførelsesmiljøet. I en nettleser tilhører typiske vertsobjekter DOM : vindu ( vindu ), skjema (maske), lenke ( lenke ) osv.

Ved å definere en konstruktør kan du definere objekter. JavaScript er et prototypebasert objektorientert språk. Dette betyr at arv er mellom objekter, ikke mellom klasser (JavaScript har ingen klasser). Objekter arver egenskaper fra prototypene sine.

Ytterligere egenskaper eller metoder kan legges til individuelle objekter etter at de er opprettet. For å gjøre dette for alle forekomster opprettet av en enkelt konstruktør, kan du bruke prototypekonstruktøregenskapen for å få tilgang til prototypeobjektet.

Eksempel: Opprette et objekt

// konstruktørfunksjon MyObject ( attributtA , attributeB ) { this . attributtA = attributtA dette . attributtB = attributtB } // lag et objekt obj = nytt mitt objekt ( 'rød' , 1000 ) // få tilgang til et attributt for obj alert ( obj . attributeA ) // få tilgang til et attributt med notasjonen til det assosiative vektorvarselet ( obj [ " attributeA" ]) Simuler arv

Hierarkiet av objekter i JavaScript kan emuleres. For eksempel:

function Base () { this . Overstyr = _Overstyr ; dette . BaseFunction = _BaseFunction ; function _Override () { alert ( "Base :: Override ()" ); } function _BaseFunction () { alert ( "Base :: BaseFunction ()" ); } } function Derive () { this . Overstyr = _Overstyr ; function _Override () { alert ( "Derive :: Override ()" ); } } Drift . prototype = ny base (); d = ny Utlede (); d . Overstyr (); d . BaseFunction ();

vil resultere i utgangen:

Utlede :: Overstyr () Base :: BaseFunction () Forhåndsdefinerte objekter

I tillegg til å tillate definisjon av objekter, gir JavaScript en hel rekke objekter som kan brukes til skriptene dine:

Array

En matrise er en assosiasjon mellom heltall og verdier av vilkårlig type. I JavaScript kan alle objekter assosiere heltall og verdier, men matriser er en spesiell type objekter som har spesifikk atferd og spesialiserte metoder for å bruke heltallsindekser (f.eks.,, joinog slice) push.

Matriser har en egenskap lengthsom garantert alltid er større enn den største indeksen som brukes i vektoren. Den oppdateres automatisk hvis du oppretter en eiendom med enda større indeks. Hvis du skriver et mindre tall i egenskapen, lengthfjernes de større indeksene. Denne egenskapen er den eneste spesielle egenskapen til vektorer, som skiller dem fra andre objekter.

Med matriseelementer kan du bruke normal notasjon for å få tilgang til objektegenskaper:

myArray[1] myArray["1"]

Disse to notasjonene er likeverdige. Du kan ikke bruke punktnotasjon eller strenger med en alternativ representasjon av tallet:

myArray.1(syntaksfeil) myArray(1)(feil syntaks, kun tillatt av Internet Explorer) myArray["01"](ikke det samme som myArray[1])

Deklarasjonen av en vektor kan bruke enten en eksplisitt notasjon eller konstruktøren Array:

myArray = [0,1,,,4,5];(vektor med lengde 6 med 4 elementer) myArray = new Array(0,1,2,3,4,5);(vektor med lengde 6 og 6 elementer) myArray = new Array(365);(tom vektor med lengde 365)

Arrays er implementert slik at bare definerte elementer bruker minne; de er "spredte vektorer". Angi myArray[10] = 'qualcosa'og myArray[57] = 'qualcosaltro'bruk plass kun for disse to elementene, som for alle andre objekter. Lengden på matrisen vil alltid rapporteres som 58.

Kontrollstrukturer og betingelser

hvis ... annet

IF-kontrollstrukturen tilsvarer SE på italiensk

Utsagnet i klammerparentesene vil kun utføres og bare hvis betingelsen vurderes til å være sann, ellers vil utsagnet i ELSE bli utført.

hvis (tilstand) { bruksanvisning; } hvis (tilstand) { bruksanvisning; } ellers { bruksanvisning; } Mens loop mens (tilstand) { bruksanvisning; } Gjør ... mens loop gjøre { bruksanvisning; } while (tilstand); For loop for ([innledende uttrykk]; [betingelse]; [økt uttrykk]) { bruksanvisning; } For loop ... i

Denne løkken går gjennom alle egenskapene til et objekt (eller elementene til en vektor).

for (variabel i objekt) { bruksanvisning; } For ... av loop

Denne løkken går gjennom alle verdiene til et objekt (eller elementene i en vektor).

for (variabel av objekt) { bruksanvisning; } Switch statement bryter (uttrykk) { saksverdi 1: bruksanvisning; bryte ; saksverdi 2: bruksanvisning; bryte ; standard  : bruksanvisning; }

Funksjoner

En funksjon er en blokk med instruksjoner , med en liste med argumenter (eventuelt tom) og som kan ha et navn (selv om det ikke er nødvendig). En funksjon kan returnere en verdi via retursetningen .

funksjon (kan være tom) { bruksanvisning; returnere uttrykk; }

Antall argumenter som sendes når en funksjon kalles, trenger ikke nødvendigvis å være lik antall argumenter i funksjonsdefinisjonen (med andre ord, antall formelle parametere må ikke nødvendigvis respekteres når funksjonen kalles, dvs. i spesifikasjon av gjeldende parametere ). Innenfor funksjonen kan listen over argumenter også refereres til ved hjelp av vektoren arguments(sistnevnte har egenskapen calleesom representerer en peker til selve funksjonen).

Hver funksjon er en forekomst av Function , en grunnleggende type objekt. Funksjoner kan opprettes og tildeles som alle andre objekter:

var myFunc1 = ny funksjon ("alert ('Hei')"); var myFunc2 = myFunc1; myFunc2 ();

produserer som utgang:

Hallo

Interaksjon med brukeren

Blant de andre teknikkene som et JavaScript-skript kan samhandle med brukeren på en nettside, er følgende:

  • HTML- skjemaelementer , redigerbare ved å få tilgang til HTML DOM;
  • Alarm dialogboks
  • Bekreft dialogboksen
  • Spør dialogboks
  • Nettleserstatuslinje _
  • Standard utgang ("konsoll")

Merk: dialogbokser fungerer ikke med Opera-nettleseren; det er ingen feil, de blir bare ikke henrettet.

Videoskrivemetoder (standardutgang)

For å skrive på skjermen (dvs. på siden der skriptet er plassert) kan du bruke metoden document.write (); strengene som skal vises kan settes sammen ved å bruke sammenkoblingsoperatoren '+':

< html > < head > < script type = "text / javascript" > <! - Skjul skript fra utdaterte nettlesere // Denne funksjonen genererer en horisontal linje med den valgte bredden. funksjonslinje ( widthPct ) { dokument . _ skriv ( "<hr align = 'venstre' width = '" + widthPct + "%' />" ); } // Denne funksjonen genererer tekst innledet av en tittel på et gitt nivå. funksjonsutgang ( headLevel , headText , text ) { document . _ skriv ( "<h" + headLevel + ">" + headText + "</ h" + headLevel + "> <p>" + tekst + "</p>" ); } // Slutt på kode for å skjule -> < / script> < / head> < body > < script type = "text / javascript" > <! - Skjul skript fra utdaterte nettlesere bar ( 25 ) output ( 2 , "JavaScript-regler!" , "Å bruke JavaScript er enkelt ..." ) // Slutt på kode for å skjule -> < / script> < p > Dette er vanlig HTML , i motsetning til den som genereres av koden ovenfor . < /p> < / body> < / html>

Hendelser

Tekstelementer kan være kilden til ulike hendelser som kan utløse en handling hvis en ECMAScript hendelsesbehandler er registrert . I HTML er disse hendelsesbehandlerne ofte funksjoner definert som anonyme direkte i HTML-taggen. Syntaksen for å kalle en hendelse i et skript er som følger:

Emne . hendelse = handler ;

Det finnes ulike kategorier av arrangementer:

  1. Hendelser som kan aktiveres med museknappene
  2. Hendelser som kan aktiveres ved musebevegelser
  3. Hendelser som kan aktiveres ved å dra musen (dra og slipp)
  4. Hendelser som kan aktiveres av brukeren med tastaturet
  5. Hendelser som kan aktiveres av brukerendringer
  6. Hendelser relatert til "brann"
  7. Hendelser som kan aktiveres ved å laste inn objekter
  8. Hendelser som kan aktiveres ved vindusbevegelser
  9. Hendelser knyttet til bestemte knapper
  10. Andre og nye typer arrangementer
Hendelser som kan aktiveres med museknapper

Liste over arrangementer:

  1. onClick : aktivert når du klikker på et objekt;
  2. onDblClick : aktivert med et dobbeltklikk;
  3. onMouseDown : aktivert når venstre museknapp trykkes;
  4. onMouseUp : aktivert når du hever venstre museknapp som ble trykket tidligere;
  5. onContextMenu : aktivert når du klikker med høyre museknapp for å åpne ContextMenu.

Dobbeltklikket er en hendelse som omfatter de andre og, for å være presis, aktiveres i rekkefølge onmousedown, onmouseup, onclick.

Programkode

A, ADRESSE, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = knapp, INPUT type = avkrysningsboks, INPUT type = fil, INPUT type = bilde, INPUT type = passord, INPUT type = radio, INPUT type = tilbakestill, INPUT type = send, INPUT type = tekst , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Hendelser som kan aktiveres ved musebevegelser

Liste over arrangementer:

  1. onMouseOver : aktivert når musen beveger seg over et objekt;
  2. onMouseOut : aktivert når musen beveger seg fra et objekt;
  3. onMouseMove : flytter musepekeren, men siden denne hendelsen forekommer ofte (bruken av musen er hyppig), er den ikke tilgjengelig som standard, men bare kombinert med hendelsesfangst, som vil bli forklart senere.
Programkode

A, ADRESSE, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = knapp, INPUT type = avkrysningsboks, INPUT type = fil, INPUT type = bilde, INPUT type = passord, INPUT type = radio, INPUT type = tilbakestill, INPUT type = send, INPUT type = tekst , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Hendelser som kan aktiveres ved å dra musen (dra og slipp)

Liste over arrangementer:

  1. onDragDrop : hendelse utløst når en bruker drar et objekt i nettleservinduet eller når han slipper en fil på det;
  2. onMove : aktivert når et objekt flytter et vindu eller en ramme;
  3. onDragStart : hendelse aktivert så snart brukeren begynner å dra et objekt;
  4. onDrag : aktivert når musen drar et objekt eller et utvalg tekst inn i vinduet i samme nettleser eller til og med en annen eller til og med på skrivebordet;
  5. onDragEnter : aktivert så snart brukeren drar et objekt til et gyldig mål for samme eller en annen nettleser;
  6. onDragOver : aktivert når brukeren drar et objekt på et gyldig mål for å være vert for det, og ligner på forrige hendelse, men aktiveres etter det;
  7. onDragLeave : aktivert når brukeren drar et objekt på et mål som er egnet for å være vert for det, men det slippes ikke;
  8. onDragEnd : utløses når brukeren slipper objektet etter at dra er fullført.
  9. onDrop : aktivert når musen løfter museknappen etter en draoperasjon;
Programkode

A, ADRESSE, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = knapp, INPUT type = avkrysningsboks, INPUT type = fil, INPUT type = bilde, INPUT type = passord, INPUT type = radio, INPUT type = tilbakestill, INPUT type = send, INPUT type = tekst , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Hendelser som kan aktiveres av brukeren med tastaturet

Liste over hendelser:

  1. onKeyPress : hendelse utløst når en bruker trykker og slipper en tast eller til og med når han holder den nede;
  2. onKeyDown : aktivert når tasten trykkes;
  3. onKeyUp : hendelse aktivert når en tast, som har blitt trykket, slippes;
  4. onHelp : aktivert når en bruker trykker på F1-tasten;
Hendelser som kan utløses av brukerendringer onChange

Utløses når innholdet i et skjema eller skjemafelt endres eller ikke lenger er valgt. Den brukes også med FileUpload, Select, Text, TextArea-objekter.

Eksempel:

< input type = "text" value = "Skriv inn e-postadresse" name = "userEmail" onChange = validateInput ( denne . verdi ) /> < script type = "text / javascript" > denne . myForm . brukerE-post . fokus (); dette . myForm . brukerE-post . velg (); funksjon validateInput () { userInput = ny streng (); userInput = dette . myForm . brukerE-post . verdi ; if ( userInput . match ( "@" )) alert ( "Takk for interessen." ); else alert ( "Vennligst sjekk at e-postdetaljene dine er korrekte før du sender inn" ); } < /script> onCellChange

Aktivert når et element i en database endres, for denne egenskapen har det en bruk som ikke er strengt relatert til JavaScript;

onPropertyChange

Hendelse utløst når eierskapet til et element endres;

onReadyStateChange

Hendelse utløst når lastestatusen til et element endres, hendelsen er nyttig, for eksempel for å bekrefte at et element er lastet.

Programkode

A, ADRESSE, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = knapp, INPUT type = avkrysningsboks, INPUT type = fil, INPUT type = bilde, INPUT type = passord, INPUT type = radio, INPUT type = tilbakestill, INPUT type = send, INPUT type = tekst , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Hendelser relatert til "brann" onFocus

Denne behandleren er det motsatte av onBlur, så den aktiveres når brukeren går inn i et felt;

onBlur

Den aktiveres når musepekeren eller markøren går ut av det gjeldende vinduet ved hjelp av musen eller TAB-tegnet. Brukt på moduler, men denne behandleren starter hvis feltet hvis tag inneholder kontrollen avsluttes;

Eksempel

Skriv inn e - postadresse < input type = "text" value = "" name = "userEmail" onBlur = addCheck () > < script type = "text / javascript" > function addCheck () { alert ( "Vennligst sjekk at e-postdetaljene dine er korrekte før du sender inn " ) } < / script> påVelg

Den kan aktiveres når du velger tekst inne i en tekstboks enten med musen eller ved å holde nede SHIFT og velge med piltastene;

onSelectStart

Den aktiveres når du begynner å velge en hendelse;

onbeforeEditFocus

Den aktiveres med et dobbeltklikk eller med et klikk på et objekt som allerede har utvalget, når dette er i DesignMode;

onLoseCapture

Utløses når et objekt mister musefangst.

Programkode

A, ADRESSE, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = knapp, INPUT type = avkrysningsboks, INPUT type = fil, INPUT type = bilde, INPUT type = passord, INPUT type = radio, INPUT type = tilbakestill, INPUT type = send, INPUT type = tekst , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Hendelser som kan aktiveres ved å laste inn objekter onLoad

Denne behandleren fungerer i lasting av objekter, for det meste vinduer og bilder;

onUnload

Det er det motsatte av det forrige, og det fungerer når du forlater et vindu for å laste et annet eller til og med for å laste det samme på nytt (med oppdateringsknappen);

onAbort

Behandleren av onAbort-hendelsen lar deg spesifisere noe kode i tilfelle brukeren blokkerer lasting av et objekt, eller blokkerer lasting av et bilde.

Denne behandleren bruker følgende hendelsesegenskaper.

Eksempel

< img name = "myPic" SRC = "images / myPic.gif" onAbort = "varsel ('Lasting av bilde avbrutt!')" > onFeil

Den aktiveres når lasting av et objekt forårsaker en feil, men bare hvis dette skyldes en syntaksfeil i koden og ikke i nettleseren, så den fungerer på en feil lenke til et bilde av siden, men ikke på en feil laste lenke til en hel side. Opera håndterer ikke denne hendelsen, som nå er foreldet: try ... catch-konstruksjonen brukes for korrekt feilhåndtering;

onBeforeUnload

Denne behandleren fungerer på samme måte som onUnload, men laster inn et øyeblikk før;

Denne behandleren fungerer når du stopper siden fra å laste med nettleserens stoppnøkkel og skal også fungere på samme måte som onUnload-lasting før dette, men etter onBeforeUnload.

Programkode
  1. onLoad Denne behandleren brukes med <BODY>- og <FRAMESET>-taggene og av JavaScript 1.1 også med <IMG>, mens det i Explorer også er nødvendig å legge til <SCRIPT>, <LINK>, <EMBED>, <APPLET>-taggene . I JavaScript 1.2 er <LAYER>-taggen også lagt til i Netscape.
  2. onUnload Denne behandleren brukes med <BODY>- og <FRAMESET>-taggene i Internet Explorer også.
  3. onAbort Denne behandleren brukes bare med <IMG>-taggen også i Internet Explorer.
  4. onError Denne behandleren brukes bare med <IMG>-taggen og med Window mens den er i Internet Explorer også med <OBJECT> og <STYLE>.
  5. onBeforeUnload Denne behandleren brukes med <BODY>-tagger i Internet Explorer også.
  6. onStop Denne behandleren brukes med <BODY>-tagger også i Internet Explorer.
Hendelser som kan aktiveres ved vindusbevegelser

Liste over hendelser:

  1. onResize: Denne behandleren aktiveres når brukeren reduserer eller maksimerer et vindu eller en ramme eller, spesielt for Utforsker, et objekt som høyden og bredden eller til og med posisjonen er fastsatt til, for eksempel et lag;
  2. onScroll: aktivert når du ruller siden enten med musen ved å bruke PGUP- og PGDOWN-tastene eller også med doScroll-metoden.
Programkode

A, ADRESSE, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, RAMME, Hn, HR, I, IMG, INPUT type = button, INPUT type = file, INPUT type = image, INPUT type = password, INPUT type = reset, INPUT type = submit, INPUT type = text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE , MENY, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, window, XMP

Hendelser relatert til bestemte knapper
  1. onSubmit: Denne behandleren aktiveres ved å klikke på Send-knappen i et skjema;
  2. onReset: denne behandleren aktiveres ved å klikke på Avbryt-knappen i et skjema.
Programkode

Handler gjelder kun for skjemaobjektet.

Feilhåndtering

Nyere versjoner av JavaScript (som starter med de som brukes i Internet Explorer 5 og Netscape 6 ) inneholder muligheten for en try... catchfeilhåndteringskonstruksjon .

Konstruksjonen try ... catch ... finallyfanger opp unntak forårsaket av en feil eller setning throw. Syntaksen er som følger:

prøv { // Utsagn der unntak kan bli kastet } catch ( feil ) { // Utsagn som skal utføres i tilfelle unntak } endelig { // Utsagn som skal utføres senere i begge tilfeller }

Til å begynne med blir setningene i blokken utført try. Hvis et unntak blir kastet, sendes skriptets kontrollflyt umiddelbart til catch block-setningene, med unntaket som gjøres tilgjengelig som et argument error. Ellers catchhoppes blokken over. Når blokken catcher ferdig, eller blokken tryer utført til slutten uten at noe unntak blir kastet, blir instruksjonene i blokken utført finally.

Integrasjon med HTML5

Med fødselen av HTML5 har JavaScript fått flere innovasjoner [9] :

Talegjenkjenning

Brukeren kan snakke inne i et skjema i stedet for å skrive:

< input type = "text" x - webkit - speech /> var recognition = new SpeechRecognition (); var speechRecognitionList = ny SpeechGrammarList ();

Systemvarsler

Systemvarsler er laget for å vekke brukerens oppmerksomhet, vise en kort melding selv utenfor gjeldende side eller selv om nettleseren ikke er i forgrunnen. Gitt deres potensielle invasivitet, er det mulig å bruke dem bare hvis nettstedet allerede har fått et spesifikt samtykke fra brukeren. [10] [11]

Systemvarslinger, som navnet antyder, er integrert konsekvent med gjeldende enhet (på skrivebordet er det ofte en pop-up , på mobil er det ofte i varslingslinjen osv.). [11] [10]

Nedenfor er et minimalt eksempel med to knapper, for å be om tillatelser for systemvarsler og for å vise en.

< button id = "btn-asking" > Be om tillatelser </ button > < button id = "btn-notify" > Vis varsel </ button > < script > // knappsøk var btnAsking = dokument . getElementById ( 'btn-spørre' ); var btnNotify = dokument . getElementById ( 'btn-varsle' ); // etter klikket starter forespørselen om btnAsking- tillatelser . addEventListener ( 'klikk' , funksjon () { Notification . requestPermission (); } ); // etter klikket viser jeg et btnNotify- varsel . addEventListener ( 'klikk' , funksjon () { new notification ( "Ny notification!" ); } ); </ script >

Utdypingen av den offisielle dokumentasjonen gjør det mulig å utføre ytterligere god praksis, inkludert:

  • bekreftelse av støtte (for eksempel Safari på iOS er beryktet for ikke å oppnå god støtte) [12] [11]
  • respekt for tidligere samtykke (unngå å be om flere forespørsler om samtykke)
  • respekt for dissens (unngå forsøk på å åpne varsler hvis det ikke er samtykke)

Lanseringen av tillatelsesforespørselen skal bare skje etter en interaksjon med brukeren (som et klikk på en knapp). Mange moderne nettlesere forbyr til og med å åpne popup-vinduet for samtykkeforespørsel for innfødte varsler hvis det ikke har vært noen interaksjon. [11]

Redigerbart innhold

Mulighet for brukeren til å endre nettsiden som om han var inne i et WYSIWYG -redigeringsprogram , selv om endringene ikke vil bli lagret på den virkelige eksterne nettsiden, men kun synlig i brukerens nettleser:

< div contenteditable = "true " > Denne teksten kan redigeres av brukeren . < / div> dokument . execCommand ( "defaultParagraphSeparator" , false , "p" );

Dra ut

Dra og slipp filer fra en nettside til datamaskinen eller annen enhet:

<a href = "src / star.mp3" draggable = "true" class = "dragout" data - downloadurl = "MIMETYPE: FILENAME: ABSOLUTE_URI_TO_FILE"> last ned < / a > var files = document . querySelectorAll ( '.dragout' ); for ( var i = 0 , fil ; fil = filer [ i ]; ++ i ) { fil . addEventListener ( 'dragstart' , funksjon ( e ) { e . dataTransfer . setData ( 'DownloadURL' , this . dataset . downloadurl ); }, false ); }

File System API

Skriv en fil asynkront til et filsystem med sandkasse ved hjelp av JavaScript:

vindu . requestFileSystem ( window . TEMPORARY , 1024 * 1024 , function ( fs ) { fs . root . getFile ( 'log.txt' , { create : true }, function ( fileEntry ) { filoppføring . createWriter ( funksjon ( skriver ) { . forfatter . onwrite = funksjon ( e ) { ... }; forfatter . onerror = funksjon ( e ) { ... }; var bb = ny BlobBuilder (); bb . append ( 'Hei verden!' ); forfatter . skriv ( bb.getBlob ( ' tekst / vanlig' )); }, opt_errorHandler ); } }, opt_errorHandler );

Geolokalisering

Mulighet for brukeren til å erklære sin stilling til en applikasjon eller en nettside:

if ( navigator . geolocation ) { navigator . geolokalisering . getCurrentPosition ( funksjon ( posisjon ) { var latLng = new google . maps . LatLng ( posisjon . coords . latitude , position . coords . longitude ); var marker = new google . maps . Marker ({ position : latLng , map : map }) ; map . setCenter ( latLng ); }, errorHandler ); }

Enhetsorientering

Rapporter data som indikerer endringer i enhetens orientering i forhold til tyngdekraftens tiltrekning. Spesielt kan bærbare enheter som mobiltelefoner bruke denne informasjonen til automatisk å rotere skjermen for å holde seg oppreist, og presentere en fullskjermvisning av nettinnhold når enheten roteres slik at dens bredde er større enn Hans Majestet.

vindu . addEventListener ( 'deviceorientation' , function ( hendelse ) { var a = hendelse . alpha ; var b = hendelse . beta ; var g = hendelse . gamma ; }, falsk );

Local Storage, Application Cache og Quota API

Evne til å bla gjennom tidligere viste nettsider selv uten internettforbindelse:

lagre-knappen . addEventListener ( 'click' , function () { window . localStorage . setItem ( 'value' , area . value ); window . localStorage . setItem ( 'timestamp' , ( new Date ())) getTime ()); }, false ); tekstområde . verdi = vindu . lokal lagring . getItem ( 'verdi' ); < html manifest = "cache.appcache" > vindu . applicationCache . addEventListener ( 'updateready' , function ( e ) { if ( window . applicationCache . status == window . applicationCache . UPDATEREADY ) { window . applicationCache . swapCache (); if ( bekreft ( 'En ny versjon av dette nettstedet er tilgjengelig. Last inn it? ' )) { window . location . reload (); } } }, false );

Web SQL-database

Nye funksjoner integrert med SQL:

var db = vindu . openDatabase ( "DBnavn" , "1.0" , "beskrivelse" , 5 * 1024 * 1024 ); // 5MB db . transaksjon ( funksjon ( tx ) { tx . executeSql ( "VELG * FRA test" , [], suksessCallback , errorCallback ); });

Indeksert DB

Denne API-en bruker indekser for å muliggjøre datasøk med høy ytelse. Mens nettlagring er nyttig for å lagre mindre mengder data, er det mindre nyttig for å lagre større mengder strukturerte data. IndexedDB gir en løsning.

var idbRequest = vindu . indeksertDB . åpen ( 'Databasenavn' ); idbRequest . onsuccess = funksjon ( hendelse ) { var db = hendelse . srcElement . resultat ; var transaksjon = db . transaksjon ([], IDBTransaction . READ_ONLY ); var curRequest = transaksjon . objectStore ( 'ObjectStore Name' ). openCursor (); curRequest . onsuksess = ...; }; webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY , function ( brukt , gjenværende ) { console . log ( "Brukt kvote:" + brukt + ", gjenværende kvote:" + gjenværende ); } ); webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT , 10 * 1024 * 1024 , function ( used ) { console . log ( "Brukt kvote:" + brukt + ", gjenværende kvote:" + gjenværende ); } );

Web Workers

Øk ytelsen til nettsiden:

var worker = new Worker ( 'task.js' ); arbeider . onmessage = funksjon ( hendelse ) { alert ( hendelse.data ) ; _ }; arbeider . postMessage ( 'data' ); oppgave . js : selv . onmessage = function ( event ) { // Gjør noe arbeid. selv . postMessage ( "recv'd:" + hendelse . data ); };

Web Socket

Toveis full-dupleks kommunikasjon over nettet: Både server og klient kan sende data når som helst eller til og med samtidig. Bare selve dataene sendes, uten overhead av HTTP-hoder, noe som reduserer båndbredden dramatisk.

var socket = ny WebSocket ( 'www.sito.it' ); stikkontakt . onopen = funksjon ( hendelse ) { socket . send ( 'Hei' ); }; stikkontakt . onmessage = funksjon ( hendelse ) { alert ( hendelse.data ) ; _ } -kontakt . onclose = funksjon ( hendelse ) { alert ( 'lukket' ); }

Fullskjerms nettsider

if ( elem . webkitRequestFullScreen ) { elem . webkitRequestFullScreen ( Element . ALLOW_KEYBOARD_INPUT ); } else if ( elem . mozRequestFullScreen ) { elem . mozRequestFullScreen (); } else if ( requestFullScreen element ) { elem . requestFullScreen (); } : fullskjerm - stamfar : root { overløp : skjult ; _ _ } : full - screen - ancestor { z - index : auto ; transform : ingen ; overgang : ingen ; } pre : fullskjerm { bakgrunnsfarge : hvit ; _ _ _ _ }

Nye velgere (DOM API)

var el = dokument . getElementById ( 'seksjon1' ); el . fokus (); var els = dokument . getElementsByTagName ( 'div' ); els [ 0 ]. fokus (); var els = dokument . getElementsByClassName ( 'seksjon' ); els [ 0 ]. fokus (); var els = dokument . querySelectorAll ( "ul li: nth-child (oddelig)" ); var tds = dokument . querySelectorAll ( "table.test> tr> td" ); var el = dokument . querySelector ( "tabell.test> tr> td" );

Tilpassbare attributter

< div id = "out" data - id = "gode" data - name = "joe" data - screen - name = "bruker1" > < / div> var el = dokument . querySelector ( '#out' ); el . setAttribute ( 'data-foo' , 'bar' ); var html = []; for ( var nøkkel i el . datasett ) { html . push ( key , ':' , el . datasett [ key ], '<br>' ); } el . innerHTML = html . bli med ( '' ); Utdata : id : godt navn : joe skjermnavn : bruker1 foo : bar

Element.classList

Bruk classLister et alternativ til å få tilgang til et elements klasseliste som en mellomromsdelt streng via element.className.

< div id = "main" class = "skygge avrundet" > < / div> var el = dokument . querySelector ( '#main' ). klasseliste ; el . legg til ( 'fremheve' ); el . remove ( 'skygge' ); el . veksle ( 'markering' ); konsoll . log ( el . inneholder ( 'høydepunkt' )); // falsk konsoll . log ( el . inneholder ( 'skygge' )); // falsk konsoll . log ( el . klasseList . toString () == el . klassenavn ); // utgang: < div id = "main" class = "avrundet" > < / div>

History API

Tilbyr muligheten til å endre URL - en til et nettsted uten en helsideoppdatering. Dette er nyttig for å laste deler av en side med JavaScript på en slik måte at innholdet er merkbart annerledes og garanterer en ny URL.

lenke . addEventListener ( 'klikk' , funksjon ( hendelse ) { historie . pushState ( 'Kontaktsideskjema' , 'Kontaktside' , '/kontakt' ); }); vindu . addEventListener ( 'popstate' , function ( event ) { document . querySelector ( 'h1' ). innerHTML = event . state ; }); webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY , function ( brukt , gjenværende ) { console . log ( "Brukt kvote:" + brukt + ", gjenværende kvote:" + gjenværende ); } ); webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT , 10 * 1024 * 1024 , function ( used ) { console . log ( "Brukt kvote:" + brukt + ", gjenværende kvote:" + gjenværende ); } );

JS i 3D-nettet

JavaScript inkluderer biblioteker og rammeverk for å lage 3D-nettgrensesnitt [13] .

function main () { const canvas = dokument . querySelector ( "#glCanvas" ); const gl = lerret . getContext ( "webgl" ); if ( gl === null ) { alert ( "Oppdater nettleseren din" ); returnere ; } gl . clearColor ( 0.0 , 0.0 , 0.0 , 1.0 ); gl . clear ( gl . COLOR_BUFFER_BIT ); } vindu . onload = hoved ;

Alternativer

Med fødselen av HTML 5 og CSS 3 har noen muligheter, for eksempel opprettelsen av [14] [15] [16] [17] [18] [19] [20] :

de kan implementeres uten bruk av JavaScript, noe som ofte var umulig med HTML 4 og CSS 2 [14] .

Eksempler på JavaScript UI

Merknader

  1. ^ ECMA-262 13th Edition , på 262.ecma-international.org .
  2. ^ En kort historie om JavaScript , på Auth0 - Blogg . Hentet 28. februar 2020 .
  3. ^ ECMA-262 standard
  4. ^ David Flanagan, JavaScript - The guide , Milan, Apogeo, 2000, s.1, ISBN  88-7303-627-9 .
  5. ^ David Flanagan, JavaScript - The guide , Milan, Apogeo, 2000, s.53, ISBN  88-7303-627-9 .
  6. ^ David Flanagan, JavaScript - The guide , Milan, Apogeo, 2000, ISBN  88-7303-627-9 .
  7. ^ Flex Quick Start - Definere datamodeller | Adobe Developer Connection , på adobe.com . Hentet 28. februar 2020 .
  8. ^ Matt Neuburg , AppleScript: The Definitive Guide: Scripting and Automating Your Mac , "O'Reilly Media, Inc.", 4. januar 2006, ISBN  978-1-4493-7915-5 . Hentet 28. februar 2020 .
  9. ^ lysbilde , på github.com .
  10. ^ a b Bruke Notifications API på developer.mozilla.org . _ Hentet 23. juni 2022 .
  11. ^ a b c d Notification.permission , på developer.mozilla.org . _ _ Hentet 23. juni 2022 .
  12. ^ Notification API : requestPermission , på caneuse.com . Hentet 23. juni 2022 .
  13. ^ 20 Interactive 3D JavaScript Libraries & Frameworks - Bashooka , på bashooka.com , 30. mai 2019. Hentet 18. februar 2021 .
  14. ^ a b 5 ting du kan gjøre med CSS i stedet for JavaScript , på LogRocket Blog , 29. oktober 2019. Hentet 9. februar 2021 .
  15. ^ ( NO ) 49 CSS-gallerier , på gratis grensesnitt . Hentet 9. februar 2021 .
  16. ^ LiveCode - HTML5 - Calculator App Demo , på livecode.com . Hentet 9. februar 2021 .
  17. ^ Andrea Pacchiarotti, Responsiv meny i HTML og CSS uten JavaScript og jQuery , på Andrea pacchiarotti . Hentet 9. februar 2021 .
  18. ^ Hvordan lage et magisk, animert verktøytips med CSS , på Web Design Envato Tuts + . Hentet 9. februar 2021 .
  19. ^ Ved å bruke HTML5 Dra og slipp API , su web.dev . Hentet 9. februar 2021 .
  20. ^ Hvordan lage en filopplastingsknapp , på w3schools.com . Hentet 9. februar 2021 .

Bibliografi

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Italia - 2002)
  • David Flanagan: JavaScript versjon 1.5 (Apogeo - 2002)
  • Emily A. Vander Veer: JavaScript (med CD-ROM) (Apogeo - 2001)
  • Roberto Abbate: Learning JavaScript (Master Editions - 2006)
  • Shelley Powers: Programmering i JavaScript (New Techniques - 2007)
  • Douglas Crockford: JavaScript - Teknikkene for å skrive den beste koden (New Techniques - 2009)

Relaterte elementer

Andre prosjekter

Eksterne lenker