close

JavaScript

Hop til navigation Hop til søgning
JavaScript
programmeringssprog
Javascript-736400 960 720.png
ForfatterBrendan Eich
Oprindelsesdato1995
Nyeste version1.8.5
ParadigmerHændelses- og objektprogrammering, funktionel
Skrivningsvag
Almindelige udvidelser.js
Påvirket afScheme , Self , Java , C , Python , Awk , HyperTalk
Det påvirkedeActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Referenceimplementering
ImplementeringKJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Internet sidedeveloper.mozilla.org/it/docs/Web/JavaScript

Inden for datalogi er JavaScript et begivenhedsorienteret multi - paradigme programmeringssprog , der almindeligvis bruges i webprogrammering på klientsiden (senere også udvidet til serversiden ) til oprettelse, i websteder og webapplikationer , af interaktive dynamiske effekter gennem scriptfunktioner , der påberåbes af hændelser , der igen udløses på forskellige måder af brugeren på den webside, der er i brug ( mus , tastatur , sideindlæsning osv...).

Oprindeligt udviklet af Brendan Eich fra Netscape Communications under navnet Mochan og senere LiveScript , blev det senere omdøbt til " JavaScript " og blev formaliseret med en syntaks tættere på syntaksen for Sun Microsystems' Java-sprog ( som blev erhvervet i 2010 fra Oracle ). Standardiseret for første gang i 1997 af ECMA under navnet ECMAScript , den seneste standard, dateret juni 2022, er ECMA-262 Edition 13 [1] og er også en ISO-standard ( ISO / IEC 16262).

Beskrivelse

Script-funktionerne, som derfor bruges i præsentationslogikken , kan bekvemt indsættes i HTML - filer , på JSP - sider eller i særlige separate filer med .js- udvidelsen , der derefter genkaldes i forretningslogikken . For nylig er dets anvendelsesområde blevet udvidet til de såkaldte Hybrid Apps (hybrid apps), hvormed det er muligt at oprette apps til flere operativsystemer ved hjælp af en enkelt kildekode baseret på JavaScript, HTML og CSS .

Java, JavaScript og JScript

Navneændringen fra LiveScript til JavaScript kom omkring det tidspunkt, hvor Netscape inkluderede understøttelse af Java-teknologi i sin Netscape Navigator- browser . [2] Navnevalget viste sig at være en kilde til stor forvirring. Der er ikke noget reelt forhold mellem Java og JavaScript; deres ligheder er hovedsageligt i syntaksen (afledt i begge tilfælde fra C-sproget ); deres semantik er ret anderledes, og især deres objektmodeller er ikke-relaterede og mærkbart inkompatible.

I betragtning af JavaScripts succes som et sprog til berigelse af websider , udviklede Microsoft et kompatibelt sprog, kendt som JScript . Behovet for fælles specifikationer var grundlaget for ECMA 262-standarden for ECMAScript , hvoraf otte udgaver er blevet offentliggjort siden arbejdet begyndte i november 1996 [3] .

Strukturelle aspekter

De vigtigste funktioner i JavaScript er:

Andre interessepunkter: I JavaScript på klientsiden kører koden direkte på klienten og ikke på serveren . Fordelen ved denne tilgang er, at selv med tilstedeværelsen af ​​særligt komplekse scripts risikerer webserveren ikke at overbelaste, da arbejdet udføres af klienten. En ulempe er, at ved særligt store scripts kan overførselstiden fra netværket blive alt for lang. Desuden skal enhver information, der kræver adgang til data gemt i en fjerndatabase , sendes tilbage til et sprog, der fysisk udfører transaktionen , for derefter at returnere resultaterne til en eller flere JavaScript-variabler; sådanne operationer kræver en ny indlæsning af selve siden. Disse grænser blev dog stort set overvundet med fødslen af ​​AJAX .

Nogle andre bemærkelsesværdige JavaScript-funktioner:

Inkompatibilitet

De forskellige implementeringer af JavaScript, som det allerede er sket med HTML, er ofte ikke i overensstemmelse med standarder, men er snarere bygget til at fungere med en bestemt webbrowser og et sæt specifikke versioner af samme. Den nuværende ECMAScript- standard burde teoretisk set være grundlaget for alle JavaScript-implementeringer, men i praksis bruger Mozilla (og Netscape ) browsere JavaScript , Microsoft Internet Explorer bruger JScript , og andre browsere som Opera og Safari bruger andre ECMAScript- implementeringer , ofte med yderligere ikke- standardfunktioner for at tillade kompatibilitet med JavaScript og JScript.

JavaScript og JScript indeholder mange funktioner, der ikke er en del af den officielle ECMAScript-standard, og kan også være blottet for flere funktioner. Derved er de delvist inkompatible, hvilket får manuskriptforfattere til at skulle håndtere sådanne problemer, når de skriver software . Af de to er JavaScript mere standardkompatibelt: Det betyder, at et script skrevet i henhold til ECMA-standarder vil fungere med de fleste browsere, især i nyere versioner.

En anden effekt er, at hver browser kan behandle det samme script forskelligt, og hvad der virker i en browser, virker muligvis ikke i en anden eller i en anden version af den samme browser. Som med HTML anbefales det derfor at skrive standardkompatibel kode. Naturligvis er der gennem årene blevet skabt forskellige biblioteker og rammer, der kan bruges til at forenkle skrivningen af ​​JavaScript-kode, der fungerer korrekt uanset hvilken browser der bruges. Et af de bedst kendte og mest udbredte biblioteker til at forenkle skrivningen af ​​simple scripts inden for HTML- eller PHP-sider er jQuery , mens der er adskillige rammer til at skrive applikationer i JavaScript, selv ekstremt sofistikerede (klientsiden og/eller serversiden), der fuldstændig ignorerer behovet for at genkende, hvilken browser slutbrugeren vil bruge.

Modforanstaltninger

Der er to hovedteknikker til at håndtere inkompatibiliteter: browser-sniffing (bogstaveligt talt "sniffing browseren") og objektgenkendelse . Da der kun var to browsere, der understøttede scripting, nemlig Netscape og Internet Explorer, var browsersniffing den mest populære teknik. Ved at kontrollere en række klientegenskaber, som returnerede platform-, browser- og versionsoplysninger, var det muligt for koden at skelne præcis, hvilken browser den kørte i. senere sniffing- teknikker blev sværere at implementere, da Internet Explorer begyndte at skjule sine oplysninger, for eksempel ved at levere stadig mere unøjagtige browseroplysninger (Microsofts årsager hertil har længe været omstridt). Senere blev browser-sniffing noget af en kompliceret kunstform, da andre script-browsere kom på markedet, hver med deres egen platform, klient og versionsinformation.

Objektdetektion er baseret på kontrol af eksistensen af ​​et objekts egenskab. 

function  set_image_source ( imageName ,  imageURL ) 
{ 
  // Test for at se, om 'document'-objektet har en 'images'-egenskab 
  if  ( document . images ) 
  { 
    // køres kun, hvis der findes en 'images'- 
    dokumentvektor . billeder [  imageName  ]. src  =  imageURL ; 
  } 
}

Et mere komplekst eksempel er baseret på brugen af ​​linkede booleske tests:

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

I dette tilfælde ville udtrykket "document.body.style" normalt forårsage en fejl i en browser, der ikke har egenskaben "document.body", men brug af "&&"-operatoren sikrer, at "document.body.style" er aldrig kaldet if" document.body "ikke eksisterer. Testen drager fordel af denne ejendommelighed ved evalueringen af ​​logiske udtryk, kaldet doven evaluering (lit. "doven evaluering").

I dag bruges en kombination af browser-sniffing, objektdetektion og standardoverholdelse såsom ECMAScript-specifikationen og CSS i forskellige foranstaltninger for at forsøge at sikre, at en bruger aldrig støder på en JavaScript-fejl.

Brug

I modsætning til andre sprog, såsom C eller C++, som tillader at skrive helt selvstændige programmer, bruges JavaScript hovedsageligt som et scriptsprog , integreret, det vil sige i anden kode.

Den grundlæggende idé er, at værtsprogrammet (det, der hoster og udfører scriptet) forsyner scriptet med en veldefineret API , som giver adgang til specifikke operationer, hvis implementering er værtsprogrammets eget ansvar . Scriptet, når det udføres, bruger referencer til denne API til at anmode ( værtsprogrammet ) om at udføre specifikke handlinger, som ikke er tilsigtet af JavaScript-sprogkonstruktionerne selv. Denne mekanisme er også vedtaget i sprog som C eller Java , hvor programmet er afhængigt af biblioteker , der ikke er forudsat af sproget selv, som giver dig mulighed for at udføre operationer såsom I/O eller udførelse af opkald til funktionssystem .

Det typiske (og måske det mest kendte og mest almindelige) eksempel på et værtsprogram til et JavaScript-script er browseren . En moderne browser indeholder normalt en JavaScript-fortolker . Når en webside, der indeholder JavaScript-kode, besøges, udføres den af ​​tolken i browseren. De grænseflader, der tillader JavaScript at relatere til en browser, kaldes DOM ( Document Object Model på italiensk ). Mange websteder bruger JavaScript-teknologi på klientsiden til at bygge kraftfulde dynamiske webapplikationer .

En hovedanvendelse af JavaScript i webmiljøet er skrivning af små funktioner integreret i HTML -sider , der interagerer med browserens DOM for at udføre visse handlinger, der ikke er mulige med statisk HTML alene : tjek værdierne i inputfelterne, skjul eller vise visse elementer osv. Desværre bliver DOM-standarderne pålagt af W3C ikke altid respekteret konsekvent og konsekvent af alle. Forskellige browsere, afhængigt af deres gengivelsesmotor , eksponerer forskellige objekter eller metoder for scriptet, så det er ofte nødvendigt at implementere yderligere kontroller til en JavaScript-funktion for at sikre kompatibilitet med hver browser og endda i henhold til de forskellige versioner af den samme browser.

Uden for nettet er JavaScript-tolke integreret i flere applikationer. Adobe Acrobat og Adobe Reader understøtter JavaScript i PDF- filer . Mozilla -platformen , som understøtter mange populære webbrowsere, bruger JavaScript til at implementere brugergrænsefladen og transaktionslogikken for dens forskellige produkter. JavaScript-fortolkere er også integreret i proprietære applikationer uden scriptable grænseflader. Endelig understøtter Microsofts Windows Script Host - teknologi JavaScript (via JScript), et scriptsprog til operativsystemer .

Hver af disse applikationer giver sin egen objektmodel, der giver adgang til værtsmiljøet, hvor kernen i JavaScript-sproget forbliver stort set uændret i hver applikation. Der er flere implementeringer af kernen i JavaScript-sproget, herunder:

Brug i HTML

Script -tag (HTML)

For at indsætte et script på en HTML-side skal du bruge script -tagget . Dette tag er ikke en del af selve JavaScript-sproget, det fungerer kun som en "container" på en HTML-side. 

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

Et dokument kan have definitionen af ​​script-tagget i flere dele. Gennem dette tag kan du repræsentere den anvendte version, og afhængigt af browseren vil du have fortolkningen af ​​den relevante del af koden. Definitionerne kan være følgende: 

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

Følgende eksempel viser en advarselsmeddelelse med " Hej verden " indeni. 

< script  type = "text / javascript" > 
   advarsel ( 'Hej verden' ); 
< /script>

Sådan "skriver" direkte ind på HTML-siden: 

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

MIME-typen for JavaScript-kildekoden er application/javascript, men er mest brugt text/javascript, omend ikke-standard.

For at indlejre JavaScript-kode i et HTML-dokument skal du indlede det med: 

< script  type = "tekst / javascript" >

og følg af: 

</ script >

Ældre browsere kræver typisk koden til at starte med: 

  < scriptsprog  = "JavaScript" type = " tekst / javascript" > <! -

og slutter med: 

  // ->
   </ script >

Kommentarmarkører <!--... -->er nødvendige for at sikre, at koden ikke vises som tekst af meget gamle browsere, der ikke genkender tagget <script>i HTML-dokumenter, mens LANGUAGE er en HTML-attribut (som nu ikke anbefales), der kan rekvireres fra gamle browsere. <script>-tags i XHTML / XML -dokumenter virker dog ikke, når de kommenteres ud, da parsere, der overholder XHTML/XML-standarderne, ignorerer kommentarer og kan også støde på problemer med symboler --og <i >scripts (f.eks. ved at forveksle dem med operatørers reduktion af heltal og sammenligning). XHTML-dokumenter skal derefter indeholde scripts som CDATA- sektioner af XML, med præfiks med 

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

og følger efter dem 

  //]]>
   </ script >

('//'-symbolerne i begyndelsen af ​​en linje signalerer starten på en JavaScript-kommentar for at forhindre <![CDATA[og ]]>i at blive analyseret af scriptet.)

HTML [1] -elementer kan indeholde iboende hændelser, der kan associeres med handlere specificeret af et script. For at skrive gyldig HTML 4.01-kode skal webserveren returnere en 'Content-Script-Type' med værdien 'text / JavaScript'. Hvis webserveren ikke kan konfigureres til dette formål, kan hjemmesidens forfatter placere følgende erklæring i dokumentets overskriftssektion 

< meta  http-equiv = "Content-Script-Type"  content = "tekst / javascript"  />

Hyppig brug i webbrowsere

JavaScript kan bruges til alle aspekter af en webbrowsers klientside -scripting , men nogle anvendelser er blevet mere udbredte end andre. Eksempler omfatter udskiftning af billeder, oprettelse af pop op-vinduer og validering af formulardata . I de fleste browsere viser følgende XHTML -kodestykke én måde, hvorpå et billede kan erstattes med et andet, når brugeren flytter markøren hen over det. Denne effekt kaldes ofte rollover eller mouse over . Imidlertid kan lignende adfærd også opnås ved kun at bruge CSS . 

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

Datterselskaber

Et nyt eksempel på brugen af ​​JavaScript er Bookmarklets , små sektioner af kode i bogmærker eller favoritter i webbrowsere. Programmeringssproget, der bruges i Macromedia Flash (kaldet ActionScript ) har en stærk lighed med JavaScript på grund af deres fælles forhold til ECMAScript . ActionScript har næsten samme syntaks som JavaScript, men objektmodellen [7] er meget anderledes.

JavaScript til OSA (JavaScript OSA eller JSOSA) er et scriptsprog til Macintosh baseret på Mozillas JavaScript 1.5-implementering [8] . Det er en freeware- komponent , der stilles til rådighed af Late Night Software . Interaktion med operativsystemet og tredjepartsapplikationer styres gennem et MacOS -objekt . Bortset fra det er sproget stort set identisk med Mozilla-implementeringen. Det er blevet foreslået som et alternativ til det mere brugte AppleScript -sprog .

Sprogelementer

Variabler

Variabler er typisk dynamisk indtastet, det vil sige, de defineres blot ved at tildele dem en værdi eller bruge kommandoenlet ; dem, der er erklæret uden for enhver funktion, er i "global" synlighed eller er tilgængelige fra hele websiden ; dem, der er erklæret i en funktion, er lokale eller interne i denne funktion. For at overføre variabler fra side til side kan en udvikler indstille en cookie eller bruge en skjult ramme eller et vindue i baggrunden til at gemme dem.

Objekter

Alt i JavaScript er enten en primitiv værdi eller et objekt. Objekter er entiteter med unikhed (de er kun lige dem selv), og som forbinder egenskabsnavne med værdier. Det betyder, at et objekt er en associativ vektor, der ligner hashes i Perl og Ruby , eller til ordbøger i Python , PostScript og Smalltalk .

JavaScript har flere slags foruddefinerede objekter, især Array , Boolean ( Boolean ), Dato (objekter, der indeholder en dato og et klokkeslæt), Funktion ( funktioner ), Math (objekt indeholdende funktioner, der bruges i matematiske beregninger), Tal (tal) , Objekt ( objekter ), RegExp ( regulære udtryk ) og String ( strenge ). Andre objekter er "gæsteobjekter", defineret ikke af sproget, men af ​​eksekveringsmiljøet. I en browser hører typiske værtsobjekter til DOM'en : vindue ( vindue ), form (maske), link ( link ) osv.

JSDOM.gif

Ved at definere en konstruktør kan du definere objekter. JavaScript er et prototypebaseret objektorienteret sprog. Det betyder, at arv er mellem objekter, ikke mellem klasser (JavaScript har ingen klasser). Objekter arver egenskaber fra deres prototyper.

Yderligere egenskaber eller metoder kan tilføjes til individuelle objekter, efter at de er oprettet. For at gøre dette for alle forekomster, der er oprettet af en enkelt konstruktør, kan du bruge prototypeegenskaben konstruktør til at få adgang til prototypeobjektet.

Eksempel: Oprettelse af et objekt 

// 
konstruktorfunktion MitObjekt  ( attributA , attributB ) { dette . attributA = attributA dette . attributB = attributB } 

    
    

 
// create an Object 
obj  =  new  MyObject ( 'red' ,  1000 )
 
// få adgang til en attribut for obj 
alert ( obj . attributeA )
 
// få adgang til en attribut med notationen af ​​den associative vektoralarm 
( obj [ " attributA" ])

Simuler arv

Hierarkiet af objekter i JavaScript kan emuleres. For eksempel: 

function  Base () 
{ 
  this . Tilsidesæt  =  _Tilsidesæt ; 
  dette . BaseFunction  =  _BaseFunction ;
 
  function  _Override () 
  { 
    alert ( "Base :: Tilsidesæt ()" ); 
  }

  function  _BaseFunction () 
  { 
    alert ( "Base :: BaseFunction ()" ); 
  } 
}
 
funktion  Udled () 
{ 
   dette . Tilsidesæt  =  _Tilsidesæt ; 
   function  _Override () 
   { 
     alert ( "Derive :: Tilsidesæt ()" ); 
   } 
}

Drift . prototype  =  ny  base ();
 
d  =  ny  Udled (); 
d . Tilsidesæt (); 
d . BaseFunction ();

vil resultere i output: 

Udled :: Tilsidesæt ()
Base :: BaseFunction ()

Foruddefinerede objekter

Ud over at tillade definition af objekter, giver JavaScript en hel række af objekter, der kan bruges til dine scripts:

Array

Et array er en sammenhæng mellem heltal og værdier af vilkårlig type. I JavaScript kan alle objekter associere heltal og værdier, men arrays er en speciel type objekter, der har specifik adfærd og specialiserede metoder til at bruge heltalsindekser (f.eks.,, joinog slice) push.

Arrays har en egenskab length, der med garanti altid er større end det største indeks, der bruges i vektoren. Den opdateres automatisk, hvis du opretter en ejendom med et endnu større indeks. Hvis du skriver et mindre tal i ejendommen, lengthfjernes de større indeks. Denne egenskab er den eneste specielle egenskab ved vektorer, som adskiller dem fra andre objekter.

Med array-elementer kan du bruge normal notation til at få adgang til objektegenskaber: 

  myArray[1]
  myArray["1"]

Disse to notationer er ækvivalente. Du kan ikke bruge punktnotation eller strenge med en alternativ repræsentation af tallet: 

  myArray.1(syntaksfejl)
   myArray(1)(forkert syntaks, kun tilladt af Internet Explorer)
   myArray["01"](ikke det samme som myArray[1])

Deklarationen af ​​en vektor kan bruge enten en eksplicit notation eller konstruktøren Array: 

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

Arrays implementeres således, at kun definerede elementer bruger hukommelse; de er "spredte vektorer". Indstil myArray[10] = 'qualcosa'og myArray[57] = 'qualcosaltro'brug kun plads til disse to elementer, som til ethvert andet objekt. Længden af ​​arrayet vil altid blive rapporteret som 58.

Kontrolstrukturer og betingelser

hvis ... andet

IF-kontrolstrukturen svarer til SE på italiensk

Udsagnet indeholdt i klammerne vil kun blive eksekveret og kun hvis betingelsen vurderes til at være sand, ellers vil udsagnet indeholdt i ELSE blive udført. 

  hvis (tilstand)
  {
     instruktioner;
  }

  hvis (tilstand)
  {
     instruktioner;
  }
  andet
  {
     instruktioner;
  }

Mens loop 

  mens (tilstand)
  {
     instruktioner;
  }

Gør ... mens loop 

  gør
  {
     instruktioner;
  } mens (tilstand);

For loop 

  for ([initial udtryk]; [betingelse]; [stigningsudtryk])
  {
     instruktioner;
  }

For loop ... i

Denne sløjfe gennemgår alle egenskaberne for et objekt (eller elementerne i en vektor). 

  for (variabel i objekt)
  {
     instruktioner;
  }

For ... af loop

Denne løkke løber gennem alle værdierne af et objekt (eller elementerne i en vektor). 

  for (variabel af objekt)
  {
     instruktioner;
  }

Skift erklæring 

  skifte (udtryk)
  {
     case værdi1:
        instruktioner;
        bryde ;
     case værdi2:
        instruktioner;
        bryde ;
     standard  :
        instruktioner;
  }

Funktioner

En funktion er en blok af instruktioner , med en liste over argumenter (eventuelt tom), og som kan have et navn (selvom det ikke er nødvendigt). En funktion kan returnere en værdi via return -sætningen . 

  funktion (kan være tom)
  {
     instruktioner;
     returnere udtryk;
  }

Antallet af argumenter, der sendes, når en funktion kaldes, behøver ikke nødvendigvis at være lig med antallet af argumenter i funktionsdefinitionen (med andre ord, antallet af formelle parametre skal ikke nødvendigvis respekteres, når funktionen kaldes, dvs. specifikation af de aktuelle parametre ). Inden for funktionen kan listen af ​​argumenter også henvises til ved hjælp af vektoren arguments(sidstnævnte har egenskaben callee, der repræsenterer en pointer til selve funktionen).

Hver funktion er en forekomst af Function , en grundlæggende type objekt. Funktioner kan oprettes og tildeles som ethvert andet objekt: 

   var myFunc1 = ny funktion ("advarsel ('Hej')");
   var myFunc2 = myFunc1;
   myFunc2 ();

producerer som output: 

   Hej

Interaktion med brugeren

Blandt de andre teknikker, hvormed et JavaScript-script kan interagere med brugeren på en webside, er følgende:

  • HTML- formularelementer , der kan redigeres ved at få adgang til HTML DOM;
  • Alarm dialogboks
  • Bekræft dialogboksen
  • Spørg dialogboks
  • Browser statuslinje
  • Standard output ("konsol")

Bemærk: dialogbokse virker ikke med Opera-browseren; der er ingen fejl, de bliver bare ikke henrettet.

Videoskrivningsmetoder (Standard Output)

For at skrive på skærmen (dvs. på siden hvor scriptet er placeret) kan du bruge metoden document.write (); de strenge, der skal vises, kan sammenkædes ved hjælp af sammenkædningsoperatoren '+': 

< html > 
< head > 
< script  type = "text / javascript" > 
<!  - Skjul  script  fra forældede  browsere  

// Denne funktion genererer en vandret linje af den valgte bredde. 
funktionslinje  ( widthPct ) { dokument . _ skriv ( "<hr align = 'venstre' width = '" + widthPct + "%' />" ); }

      


// Denne funktion genererer tekst foran en titel på et givet niveau. 
funktionsoutput  ( headLevel , headText , text ) { document . _ skriv ( "<h" + headLevel + ">" + headText + "</ h" + headLevel + "> <p>" + tekst + "</p>" ); }  

                  


// Slut på kode for at skjule -> 
< / script> 
< / head> 
< body > 
< script  type = "text / javascript" > 
<! -  Skjul  script  fra forældede  browsere  

bar ( 25 ) 
output ( 2 ,  "JavaScript-regler!" ,  "Det er nemt at bruge JavaScript ..." )

// Slut på kode for at skjule -> 
< / script>

< p > Dette  er  normal  HTML , i  modsætning til  den , der genereres  af koden ovenfor . < /p>     

< / body> 
< / html>

Begivenheder

Tekstelementer kan være kilden til forskellige hændelser , der kan udløse en handling, hvis en ECMAScript hændelseshandler er blevet registreret . I HTML er disse hændelseshandlere ofte funktioner defineret som anonyme direkte i HTML-tagget. Syntaksen for at kalde en begivenhed i et script er som følger: 

Emne . hændelse  =  handler ;

Der er forskellige kategorier af begivenheder:

  1. Begivenheder, der kan aktiveres med museknapperne
  2. Begivenheder, der kan aktiveres ved musebevægelser
  3. Begivenheder, der kan aktiveres ved at trække med musen (træk og slip)
  4. Hændelser, der kan aktiveres af brugeren med tastaturet
  5. Hændelser, der kan aktiveres ved brugerændringer
  6. Begivenheder relateret til "brand"
  7. Hændelser, der kan aktiveres ved at indlæse objekter
  8. Hændelser, der kan aktiveres ved vinduesbevægelser
  9. Begivenheder knyttet til bestemte knapper
  10. Andre og nye typer arrangementer

Begivenheder, der kan aktiveres med museknapper

Liste over begivenheder:

  1. onClick : aktiveret ved klik på et objekt;
  2. onDblClick : aktiveret med et dobbeltklik;
  3. onMouseDown : aktiveret når venstre museknap trykkes ned;
  4. onMouseUp : aktiveret, når du hæver venstre museknap, du tidligere har trykket på;
  5. onContextMenu : aktiveret, når der klikkes på højre museknap for at åbne ContextMenu.

Dobbeltklikket er en hændelse, der omfatter de andre, og for at være præcis aktiveres i rækkefølge onmousedown, onmouseup, onclick.

Application tag

A, ADRESSE, APPLET, OMRÅDE, 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 = knap, INPUT type = afkrydsningsfelt, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = radio, INPUT type = nulstil, INPUT type = indsend, 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

Begivenheder, der kan aktiveres ved musebevægelser

Liste over begivenheder:

  1. onMouseOver : aktiveret når musen bevæger sig hen over et objekt;
  2. onMouseOut : aktiveret når musen bevæger sig fra et objekt;
  3. onMouseMove : flytter musemarkøren, men da denne hændelse forekommer ofte (brugen af ​​musen er hyppig), er den ikke tilgængelig som standard, men kun kombineret med event capture, som vil blive forklaret senere.
Application tag

A, ADRESSE, APPLET, OMRÅDE, 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 = knap, INPUT type = afkrydsningsfelt, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = radio, INPUT type = nulstil, INPUT type = indsend, 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

Begivenheder, der kan aktiveres ved at trække med musen (træk og slip)

Liste over begivenheder:

  1. onDragDrop : hændelse udløst, når en bruger trækker et objekt i browservinduet, eller når han taber en fil på det;
  2. onMove : aktiveret når et objekt flytter et vindue eller en ramme;
  3. onDragStart : hændelse aktiveret, så snart brugeren begynder at trække et objekt;
  4. onDrag : aktiveret når musen trækker et objekt eller et udvalg af tekst ind i vinduet i den samme browser eller endda en anden eller endda på skrivebordet;
  5. onDragEnter : aktiveret, så snart brugeren trækker et objekt til et gyldigt mål i den samme eller en anden browser;
  6. onDragOver : aktiveret når brugeren trækker et objekt på et gyldigt mål for at være vært for det, og ligner den tidligere hændelse, men aktiveres derefter;
  7. onDragLeave : aktiveret, når brugeren trækker et objekt på et mål, der er egnet til at være vært for det, men det frigives ikke;
  8. onDragEnd : udløses, når brugeren taber objektet, efter at trækket er fuldført.
  9. onDrop : aktiveret, når musen løfter museknappen efter en trækoperation;
Application tag

A, ADRESSE, APPLET, OMRÅDE, 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 = knap, INPUT type = afkrydsningsfelt, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = radio, INPUT type = nulstil, INPUT type = indsend, 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

Hændelser, der kan aktiveres af brugeren med tastaturet

Liste over begivenheder:

  1. onKeyPress : hændelse udløst, når en bruger trykker og slipper en tast eller endda når han holder den nede;
  2. onKeyDown : aktiveret, når der trykkes på tasten;
  3. onKeyUp : hændelse aktiveret, når en tast, der er blevet trykket, slippes;
  4. onHelp : aktiveret når en bruger trykker på F1-tasten;

Hændelser, der kan udløses af brugerændringer

onChange

Udløses, når indholdet af en formular eller et formularfelt ændres eller ikke længere er valgt. Det bruges også med FileUpload, Select, Text, TextArea objekter.

Eksempel: 

< input  type = "text"  value = "Indtast e-mail-adresse"  name = "userEmail"  onChange = validateInput ( denne . værdi )  /> 
< script  type = "text / javascript" > 
  denne . minForm . brugerE-mail . fokus (); 
  dette . minForm . brugerE-mail . vælg ();
 
  function  validateInput () 
  { 
    userInput  =  ny  streng (); 
    userInput  =  dette . minForm . brugerE-mail . værdi ; 
    if  ( userInput . match ( "@" )) 
      alert ( "Tak for din interesse." ); 
    else 
      alert ( "Kontroller venligst, at dine e-mailoplysninger er korrekte, før du sender" ); 
  } 
< / script>
onCellChange

Aktiveres, når et element i en database ændres, for denne egenskab har det en anvendelse, der ikke er strengt relateret til JavaScript;

onPropertyChange

Hændelse udløst, når ejerskabet af et element ændres;

onReadyStateChange

Hændelse udløst, når indlæsningsstatus for et element ændres, hændelsen er nyttig, for eksempel til at bekræfte, at et element er blevet indlæst.

Application tag

A, ADRESSE, APPLET, OMRÅDE, 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 = knap, INPUT type = afkrydsningsfelt, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = radio, INPUT type = nulstil, INPUT type = indsend, 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

Begivenheder relateret til "brand"

onFocus

Denne handler er det modsatte af onBlur, så den aktiveres, når brugeren indtaster et felt;

onBlur

Den aktiveres, når musemarkøren eller markøren forlader det aktuelle vindue ved hjælp af musen eller TAB-tegnet. Anvendt på moduler starter denne handler dog, hvis feltet, hvis tag indeholder kontrolelementet, forlades;

Eksempel 

Indtast  e  -mailadresse  < input  type = "text"  value = ""  name = "userEmail"  onBlur = addCheck () > 
< script  type = "text / javascript" > 
function  addCheck () 
{ 
  alert ( "Kontroller venligst, at dine e-mailoplysninger er korrekte før du sender " ) 
} 
< / script>
påVælg

Den kan aktiveres, når du markerer tekst inde i en tekstboks enten med musen eller ved at holde SHIFT nede og vælge med piletasterne;

onSelectStart

Den aktiveres, når du begynder at vælge en begivenhed;

onbeforeEditFocus

Den aktiveres med et dobbeltklik eller med et klik på et objekt, der allerede har valget, når dette er i DesignMode;

onLoseCapture

Udløses, når et objekt mister musefangst.

Application tag

A, ADRESSE, APPLET, OMRÅDE, 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 = knap, INPUT type = afkrydsningsfelt, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = radio, INPUT type = nulstil, INPUT type = indsend, 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

Hændelser, der kan aktiveres ved at indlæse objekter

onLoad

Denne handler arbejder med at indlæse objekter, for det meste vinduer og billeder;

onUnload

Det er det modsatte af det forrige, og det virker, når du forlader et vindue for at indlæse et andet eller endda for at genindlæse det samme (med opdateringsknappen);

onAbort

Behandleren af ​​onAbort-hændelsen giver dig mulighed for at specificere noget kode i tilfælde af at brugeren blokerer indlæsningen af ​​et objekt eller blokerer indlæsningen af ​​et billede.

Denne handler bruger følgende hændelsesegenskaber.

Eksempel 

  < img  name =  "myPic"  SRC =  "images / myPic.gif"  onAbort =  "advarsel ('Indlæsning af billede afbrudt!')" >
onFejl

Den aktiveres, når indlæsningen af ​​et objekt forårsager en fejl, men kun hvis dette skyldes en syntaksfejl i koden og ikke i browseren, så den virker på et forkert link til et billede af siden, men ikke på et forkert indlæsningslink til en hel side. Opera håndterer ikke denne hændelse, som nu er forældet: try ... catch-konstruktionen bruges til korrekt fejlhåndtering;

onBeforeUnload

Denne handler fungerer på samme måde som onUnload, men indlæses på et øjeblik før;

onStop

Denne handler fungerer, når du stopper siden i at indlæse med browserens stop-tast og bør også fungere på samme måde som onUnload-indlæsning før dette, men efter onBeforeUnload.

Application tag
  1. onLoad Denne behandler bruges med <BODY> og <FRAMESET> tags og af JavaScript 1.1 også med <IMG>, mens det i Explorer også er nødvendigt at tilføje tags <SCRIPT>, <LINK>, <EMBED>, <APPLET> . I JavaScript 1.2 tilføjes <LAYER>-tagget også i Netscape.
  2. onUnload Denne handler bruges også sammen med <BODY> og <FRAMESET> tags i Internet Explorer.
  3. onAbort Denne handler bruges kun med <IMG>-tagget også i Internet Explorer.
  4. onError Denne behandler bruges kun med <IMG>-tagget og med Window, mens den er i Internet Explorer også med <OBJECT> og <STYLE>.
  5. onBeforeUnload Denne handler bruges også med <BODY>-tags i Internet Explorer.
  6. onStop Denne handler bruges også med <BODY>-tags i Internet Explorer.

Hændelser, der kan aktiveres ved vinduesbevægelser

Liste over begivenheder:

  1. onResize: Denne håndtering aktiveres, når brugeren reducerer eller maksimerer et vindue eller en ramme eller, især for Explorer, et objekt, hvortil højden og bredden eller endda positionen er blevet fastsat, såsom et lag;
  2. onScroll: aktiveret, når du ruller siden enten med musen ved hjælp af PGUP- og PGDOWN-tasterne eller også med doScroll-metoden.
Application tag

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 = knap, INPUT type = fil, INPUT type = billede, INPUT type = adgangskode, INPUT type = nulstil, INPUT type = indsend, INPUT type = tekst, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE , MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, vindue, XMP

Begivenheder relateret til bestemte knapper

  1. onSubmit: Denne behandler aktiveres ved at klikke på knappen Send i en formular;
  2. onReset: denne behandler aktiveres ved at klikke på knappen Annuller i en formular.
Application tag

Handler, der kun gælder for formularobjektet.

Fejlhåndtering

Nyere versioner af JavaScript (startende med dem, der bruges i Internet Explorer 5 og Netscape 6) inkorporerer muligheden for entry... catch fejlhåndteringskonstruktion .

Konstruktionen try ... catch ... finallyfanger undtagelser fra en fejl eller sætning throw. Dens syntaks er som følger: 

prøv  { 
   // Udsagn, hvor undtagelser kan smides 
}  catch  ( fejl )  { 
   // Udsagn, der skal udføres i tilfælde af undtagelse 
}  endelig  { 
   // Udsagn, der skal udføres senere i begge tilfælde 
}

Til at begynde med udføres sætningerne i blokken try. Hvis der kastes en undtagelse, overføres scriptets kontrolflow øjeblikkeligt til catch-blok-sætningerne, hvor undtagelsen gøres tilgængelig som et argument error. catchEllers springes blokken over. Når blokken catcher færdig, eller blokken tryer udført til slutningen, uden at nogen undtagelse er kastet, udføres instruktionerne i blokken finally.

Integration med HTML5

Med fødslen af ​​HTML5 har JavaScript erhvervet flere innovationer [9] :

Talegenkendelse

Brugeren kan tale inde i en formular i stedet for at skrive:

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

Systemmeddelelser

Image
Websiden kan indeholde andre typer grafik som disse. Disse er ikke systemmeddelelser.

Systemmeddelelser er designet til at tilskynde brugerens opmærksomhed og vise en kort besked, selv uden for den aktuelle side, eller selvom browseren ikke er i forgrunden i øjeblikket. I betragtning af deres potentielle invasivitet er det kun muligt at bruge dem, hvis webstedet allerede har fået et specifikt samtykke fra brugeren. [10] [11]

Systemnotifikationer, som navnet antyder, er integreret konsekvent med den aktuelle enhed (på desktop er det ofte en pop-up , på mobil er det ofte i notifikationslinjen osv.). [11] [10]

Nedenfor er et minimalt eksempel med to knapper, for at anmode om tilladelser til systemmeddelelser og for at vise en. 

< button  id = "btn-asking" > Anmod om tilladelser </ button > 
< button  id = "btn-notify" > Vis meddelelse </ button >

< script > 
// knapsøgning 
var  btnAsking  =  dokument . getElementById (  'btn-spørger'  ); 
var  btnNotify  =  dokument . getElementById (  'btn-notify'  );

// efter klikket starter den anmodningen om 
btnAsk- tilladelser . addEventListener (  'klik' ,  funktion ()  { 
    Notification . requestPermission (); 
}  );

// efter klikket viser jeg en 
btnNotify- meddelelse . addEventListener (  'klik' ,  funktion ()  { 
    new notification  ( "Ny notifikation!" ) ; } ); </ script >

Uddybningen af ​​den officielle dokumentation gør det muligt at udføre yderligere god praksis, herunder:

  • verifikation af support (for eksempel Safari på iOS er berygtet for ikke at opnå stor support) [12] [11]
  • respekt for tidligere samtykke (undgå at bede om flere anmodninger om samtykke)
  • respekt for dissens (undgå at forsøge at åbne meddelelser, hvis der ikke er samtykke)

Lanceringen af ​​tilladelsesanmodningen bør kun ske efter en interaktion med brugeren (såsom et klik på en knap). Mange moderne browsere forbyder endda at åbne pop op-vinduet for anmodning om samtykke for indfødte meddelelser, hvis der ikke har været nogen interaktion. [11]

Redigerbart indhold

Mulighed for brugeren at ændre websiden, som om han var inde i en WYSIWYG -editor , selvom ændringerne ikke bliver gemt på den rigtige eksterne webside, men kun synlige i brugerens browser:

< div  contenteditable = "true " > 
Denne  tekst  kan  redigeres  af brugeren . < / div> dokument . execCommand ( "defaultParagraphSeparator" , false , "p" );

Træk ud

Træk og slip filer fra en webside til din computer eller anden enhed:

<a href =  "src / star.mp3" draggable = "true" class = "dragout" data - downloadurl = "MIMETYPE: FILENAME: ABSOLUTE_URI_TO_FILE"> download < / a > var filer = dokument . querySelectorAll ( '.dragout' ); for ( var i = 0 , fil ; fil = filer [ i ]; ++ i ) { fil . addEventListener ( 'dragstart' , funktion ( e ) { e . dataTransfer . setData ( 'DownloadURL' , dette .datasæt . downloadurl ); } , false ); }

Filsystem-API

Skriv asynkront en fil til et sandboxed filsystem ved hjælp af JavaScript:

vindue . requestFileSystem ( window . TEMPORARY ,  1024  *  1024 ,  function ( fs )  { 
  fs . root . getFile ( 'log.txt' ,  { create :  true },  function ( fileEntry )  {

    filindtastning . createWriter ( funktion ( writer )  {  .

        forfatter . onwrite  =  funktion ( e )  {  ...  }; 
        forfatter . onerror  =  funktion ( e )  {  ...  };

        var  bb  =  ny  BlobBuilder (); 
        bb . append ( 'Hej verden!' );

        forfatter . skriv ( bb.getBlob ( ' tekst / almindelig' ));

    },  opt_errorHandler ); 
  } 
},  opt_errorHandler );

Geolokalisering

Mulighed for brugeren at erklære sin holdning til en ansøgning eller en webside:

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

Enhedsorientering

Rapporter data, der indikerer ændringer i enhedens orientering i forhold til tyngdekraftens tiltrækning. Især kan bærbare enheder såsom mobiltelefoner bruge disse oplysninger til automatisk at rotere skærmen for at forblive oprejst, hvilket giver en fuldskærmsvisning af webindhold, når enheden roteres, så dens bredde er større end Hans Majestæt.

vindue . addEventListener ( 'deviceorientation' ,  function ( hændelse )  { 
  var  a  =  hændelse . alpha ; 
  var  b  =  hændelse . beta ; 
  var  g  =  hændelse . gamma ; 
},  falsk );

Local Storage, Application Cache og Quota API

Mulighed for at gennemse tidligere viste websider selv uden internetforbindelse:

gem knap . addEventListener ( 'click' ,  function  ()  { 
  window . localStorage . setItem ( 'value' ,  area . value ); 
  window . localStorage . setItem ( 'timestamp' ,  ( new  Date ())) getTime ()); 
},  false ); 
tekstområde . værdi  =  vindue . localStorage . getItem ( 'værdi' );

< html  manifest = "cache.appcache" > 
vindue . applicationCache . addEventListener ( 'updateready' ,  function ( e )  { 
  if  ( window . applicationCache . status  ==  window . applicationCache . UPDATEREADY )  { 
    window . applicationCache . swapCache (); 
    if  ( bekræft ( 'En ny version af dette websted er tilgængelig. Indlæs it? ' ))  { 
      window . location . reload (); 
    } 
  } 
},  false );

Web SQL-database

Nye funktioner integreret med SQL:

var  db  =  vindue . openDatabase ( "DBnavn" ,  "1.0" ,  "beskrivelse" ,  5 * 1024 * 1024 );  // 5MB 
db . transaktion ( funktion ( tx )  { 
  tx . executeSql ( "SELECT * FROM test" ,  [],  successCallback ,  errorCallback ); 
});

Indekseret DB

Denne API bruger indekser til at muliggøre højtydende datasøgninger. Mens weblagring er nyttig til lagring af mindre mængder data, er den mindre nyttig til lagring af større mængder strukturerede data. IndexedDB giver en løsning.

var  idbRequest  =  vindue . indekseretDB . åben ( 'Databasenavn' ); 
idbRequest . onsuccess  =  funktion ( hændelse )  { 
  var  db  =  hændelse . srcElement . resultat ; 
  var  transaktion  =  db . transaktion ([],  IDBTransaction . READ_ONLY ); 
  var  curRequest  =  transaktion . objectStore ( 'ObjectStore Name' ). openCursor (); 
  curRequest . onsuccess  =  ...; 
};

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  funktion ( brugt ,  resterende )  { 
    console . log ( "Brugt kvote:"  +  brugt  +  ", resterende kvote:"  +  resterende ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( used )  { 
    console . log ( "Brugt kvote:"  +  brugt  +  ", resterende kvote:"  +  resterende ); 
  } 
);

Web Workers

Øg ydeevnen af ​​websiden:

var  worker  =  new  Worker ( 'task.js' ); 
arbejder . onmessage  =  funktion ( hændelse )  {  advarsel ( hændelse . data );  }; 
arbejder . postMessage ( 'data' ); 
opgave . js : 
selv . onmessage  =  function ( hændelse )  { 
  // Gør noget arbejde. 
  selv . postMessage ( "recv'd:"  +  hændelse . data ); 
};

Web Socket

To-vejs fuld-duplex kommunikation over nettet: Både server og klient kan sende data til enhver tid eller endda samtidigt. Kun selve dataene sendes uden overhead af HTTP-headere, hvilket dramatisk reducerer båndbredden.

var  socket  =  ny  WebSocket ( 'www.sito.it' ); 
stikkontakt . onopen  =  funktion ( hændelse )  { 
  socket . send ( 'Hej' ); 
}; 
stikkontakt . onmessage  =  funktion ( hændelse )  {  advarsel ( hændelse . data );  } 
-stik . onclose  =  funktion ( hændelse )  {  advarsel ( 'lukket' );  }

Websider i fuld skærm 

if  ( elem . webkitRequestFullScreen ) { elem . webkitRequestFullScreen ( Element . ALLOW_KEYBOARD_INPUT ); } else if ( elem . mozRequestFullScreen ) { elem . mozRequestFullScreen (); } else if ( requestFullScreen element ) { elem . requestFullScreen (); } : fuldskærms - forfader : root { overløb : skjult ; _ _ } : fuldskærms - aner { z - indeks : auto ; _ _ transformere : ingen ; overgang : ingen ; } pre : fuldskærm { baggrundsfarve : hvid ; _ _ _ _ }

Nye vælgere (DOM API) 

var  el  =  dokument . getElementById ( 'sektion1' ); 
el . fokus (); 
var  els  =  dokument . getElementsByTagName ( 'div' ); 
els [ 0 ]. fokus (); 
var  els  =  dokument . getElementsByClassName ( 'sektion' ); 
els [ 0 ]. fokus (); 
var  els  =  dokument . querySelectorAll ( "ul li: n'te-barn (ulige)" ); 
var  tds  =  dokument . querySelectorAll ( "table.test> tr> td" ); 
var  el  =  dokument . querySelector ( "table.test> tr> td" );

Egenskaber, der kan tilpasses 

< div  id = "out"  data - id = "gode"  data - name = "joe"  data - screen - name = "bruger1" > < / div> 
var  el  =  dokument . querySelector ( '#out' ); 
el . setAttribute ( 'data-foo' ,  'bar' ); 
var  html  =  []; 
for  ( var  nøgle  i  el . datasæt )  { 
  html . push ( key ,  ':' ,  el . dataset [ key ],  '<br>' ); 
} 
el . indreHTML  =  html . join ( '' ); 
Output : 
id :  godt 
navn :  joe 
skærmnavn : bruger1 foo : bar

Element.classList

Brug classLister et alternativ til at få adgang til et elements klasseliste som en mellemrumssepareret streng via element.className.

< div  id = "main"  class = "skygge afrundet" > < / div> 
var  el  =  dokument . querySelector ( '#main' ). klasseliste ; 
el . tilføje ( 'fremhæv' ); 
el . fjerne ( 'skygge' ); 
el . toggle ( 'fremhæv' );

konsol . log ( el . indeholder ( 'fremhæv' ));  // falsk 
konsol . log ( el . indeholder ( 'skygge' ));  // falsk 
konsol . log ( el . klasseList . toString ()  ==  el . klassenavn ); 
// output: 
< div  id = "main"  class = "afrundet" > < / div>

History API

Tilbyder muligheden for at ændre webadressen på et websted uden en helsideopdatering. Dette er nyttigt til at indlæse dele af en side med JavaScript på en sådan måde, at indholdet er mærkbart anderledes og garanterer en ny URL.

link . addEventListener ( 'klik' ,  funktion ( hændelse )  { 
  historie . pushState ( 'Kontaktsideformular' ,  'Kontaktside' ,  '/kontakt' ); 
}); 
vindue . addEventListener ( 'popstate' ,  function ( hændelse )  { 
  document . querySelector ( 'h1' ). innerHTML  =  hændelse . tilstand ; 
});

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  funktion ( brugt ,  resterende )  { 
    console . log ( "Brugt kvote:"  +  brugt  +  ", resterende kvote:"  +  resterende ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( used )  { 
    console . log ( "Brugt kvote:"  +  brugt  +  ", resterende kvote:"  +  resterende ); 
  } 
);

JS i 3D-nettet

JavaScript inkluderer biblioteker og rammer til at skabe 3D-webgrænseflader [13] .

WebGL eksempel
WebGL eksempel
function  main ()  { 
  const  canvas  =  dokument . querySelector ( "#glCanvas" ); 
  const  gl  =  lærred . getContext ( "webgl" ); 
  if  ( gl  ===  null )  { 
    advarsel ( "Opdater din browser" ); 
    returnere ; 
  } 
  gl . clearColor ( 0,0 ,  0,0 ,  0,0 ,  1,0 ); 
  gl . clear ( gl . COLOR_BUFFER_BIT ); 
} 
vindue . onload  =  hoved ;

Alternativer

Med fødslen af ​​HTML 5 og CSS 3 nogle muligheder, såsom oprettelsen af ​​[14] [15] [16] [17] [18] [19] [20] :

de kan implementeres uden brug af JavaScript, hvilket ofte var umuligt med HTML 4 og CSS 2 [14] .

Eksempler på JavaScript UI

Noter

  1. ^ ECMA-262 13. udgave , på 262.ecma-international.org .
  2. ^ En kort historie om JavaScript , på Auth0 - Blog . 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 - Definition af 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. ^ slide , på github.com .
  10. ^ a b Brug af 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. maj 2019. Hentet 18. februar 2021 .
  14. ^ a b 5 ting, du kan gøre med CSS i stedet for JavaScript , på LogRocket Blog , 29. oktober 2019. Hentet 9. februar 2021 .
  15. ^ ( DA ) 49 CSS-gallerier , på gratis frontend . Hentet 9. februar 2021 .
  16. ^ LiveCode - HTML5 - Calculator App Demo , på livecode.com . Hentet 9. februar 2021 .
  17. ^ Andrea Pacchiarotti, Responsiv menu i HTML og CSS uden JavaScript og jQuery , på Andrea pacchiarotti . Hentet 9. februar 2021 .
  18. ^ Sådan laver du et magisk, animeret værktøjstip med CSS , på webdesign Envato Tuts + . Hentet 9. februar 2021 .
  19. ^ Brug af HTML5 Træk og slip API , su web.dev . Hentet 9. februar 2021 .
  20. ^ Sådan opretter du en filoverførselsknap på w3schools.com . Hentet 9. februar 2021 .

Bibliografi

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Italien - 2002)
  • David Flanagan: JavaScript version 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 - Teknikkerne til at skrive den bedste kode (New Techniques - 2009)

Relaterede emner

Andre projekter

Eksterne links

Hentet fra " https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=129571785 "