close

JavaScript

Siirry navigointiin Siirry hakuun
JavaScript
ohjelmointikieli
Javascript-736400 960 720.png
TekijäBrendan Eich
Alkuperäpäivä1995
Uusin versio1.8.5
ParadigmatTapahtuma- ja objektiohjelmointi, toimiva
Kirjoittaminenheikko
Yleiset laajennukset.js
VaikuttanutScheme , Self , Java , C , Python , Awk , HyperTalk
Se vaikuttiActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Viitetoteutus
ToteutusKJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Verkkosivustodeveloper.mozilla.org/it/docs/Web/JavaScript

Tietojenkäsittelytieteessä JavaScript on tapahtumakeskeinen moniparadigmaohjelmointikieli , jota käytetään yleisesti asiakaspuolen Web-ohjelmointissa ( myöhemmin myös palvelinpuolelle ) vuorovaikutteisten dynaamisten tehosteiden luomiseen verkkosivustoissa ja verkkosovelluksissa skriptitoimintojen avulla . tapahtumat , jotka käyttäjä laukaisee vuorotellen eri tavoin käytetyllä verkkosivulla ( hiiri , näppäimistö , sivun lataus jne.).

Alunperin Netscape Communicationsin Brendan Eichin kehitti nimellä Mochan ja myöhemmin LiveScript , mutta myöhemmin se nimettiin uudelleen " JavaScriptiksi " ja virallistettiin syntaksilla , joka oli lähempänä Sun Microsystemsin Java-kielen syntaksia ( joka hankittiin vuonna 2010 Oraclelta ). ECMA standardoi ensimmäisen kerran vuonna 1997 nimellä ECMAScript . Viimeisin, kesäkuussa 2022 päivätty standardi on ECMA-262 Edition 13 [1] ja se on myös ISO-standardi ( ISO / IEC 16262).

Kuvaus

Esityslogiikassa käytetyt skriptitoiminnot voidaan kätevästi lisätä HTML - tiedostoihin , JSP - sivuille tai erityisiin erillisiin tiedostoihin .js - tunnisteella , jonka jälkeen ne haetaan liiketoimintalogiikassa . Äskettäin sen käyttöalue on laajentunut ns. hybridisovelluksiin (hybridisovellukset), joilla on mahdollista luoda sovelluksia useisiin käyttöjärjestelmiin käyttämällä yhtä JavaScript-, HTML- ja CSS -pohjaista lähdekoodia .

Java, JavaScript ja JScript

Nimenmuutos LiveScriptistä JavaScriptiin tuli suunnilleen silloin, kun Netscape sisällytti Java-teknologian tuen Netscape Navigator -selaimeensa . [2] Nimen valinta osoittautui suuren hämmennyksen lähteeksi. Java:n ja JavaScriptin välillä ei ole todellista yhteyttä; niiden yhtäläisyydet ovat pääasiassa syntaksissa (johdettu molemmissa tapauksissa C-kielestä ); niiden semantiikka on varsin erilainen, ja erityisesti niiden objektimallit eivät liity toisiinsa ja ovat selvästi yhteensopimattomia.

Koska JavaScript on menestynyt verkkosivujen rikastamisen kielenä , Microsoft kehitti yhteensopivan kielen, joka tunnetaan nimellä JScript . Yhteisten eritelmien tarve perustui ECMAScriptin ECMA 262 -standardiin , josta on julkaistu kahdeksan painosta sen jälkeen, kun työ aloitettiin marraskuussa 1996 [3] .

Rakenteelliset näkökohdat

JavaScriptin pääominaisuudet ovat:

Muita kiinnostavia kohteita: Asiakaspuolen JavaScriptissä koodi suoritetaan suoraan asiakkaalla , ei palvelimella . Tämän lähestymistavan etuna on, että jopa erityisen monimutkaisten komentosarjojen läsnä ollessa, verkkopalvelin ei vaaranna ylikuormitusta, koska työ tekee asiakas. Haittapuolena on, että erityisen suurten skriptien tapauksessa siirtoaika verkosta voi venyä liian pitkäksi. Lisäksi kaikki tiedot, jotka vaativat pääsyn etätietokantaan tallennettuihin tietoihin, on lähetettävä takaisin kielelle, joka suorittaa tapahtuman fyysisesti , jotta tulokset palautetaan yhdelle tai useammalle JavaScript-muuttujalle. tällaiset toiminnot vaativat itse sivun uuden latauksen. Nämä rajat kuitenkin suurelta osin ylitettiin AJAX :n syntyessä .

Muutamia muita huomionarvoisia JavaScript-ominaisuuksia:

Yhteensopimattomuus

JavaScriptin erilaiset toteutukset, kuten jo tapahtui HTML:n kanssa, eivät useinkaan ole standardien mukaisia, vaan ne on pikemminkin rakennettu toimimaan tietyn verkkoselaimen ja sen tiettyjen versioiden kanssa. Nykyisen ECMAScript -standardin pitäisi teoriassa olla kaikkien JavaScript-toteutusten perusta, mutta käytännössä Mozilla (ja Netscape ) selaimet käyttävät JavaScriptiä , Microsoft Internet Explorer käyttää JScriptiä ja muut selaimet, kuten Opera ja Safari , käyttävät muita ECMAScript- toteutuksia , usein myös muita ei -toteutuksia. vakioominaisuudet mahdollistavat yhteensopivuuden JavaScriptin ja JScriptin kanssa.

JavaScript ja JScript sisältävät monia ominaisuuksia, jotka eivät ole osa virallista ECMAScript-standardia, ja niistä voi myös puuttua useita ominaisuuksia. Näin tehdessään ne ovat osittain yhteensopimattomia, minkä vuoksi käsikirjoittajat joutuvat käsittelemään tällaisia ​​ongelmia kirjoittaessaan ohjelmistoja . Näistä kahdesta JavaScript on enemmän standardien mukainen: tämä tarkoittaa, että ECMA-standardien mukaan kirjoitettu komentosarja toimii useimmilla selaimilla, erityisesti uusimmissa versioissa.

Toinen vaikutus on, että jokainen selain voi käsitellä samaa komentosarjaa eri tavalla, ja mikä toimii yhdessä selaimessa, ei välttämättä toimi toisessa tai saman selaimen eri versiossa. Kuten HTML:n kanssa, on siksi suositeltavaa kirjoittaa standardien mukainen koodi. Tietenkin vuosien varrella on luotu erilaisia ​​kirjastoja ja kehyksiä, joiden avulla voidaan yksinkertaistaa JavaScript-koodin kirjoittamista, joka toimii oikein käytetystä selaimesta riippumatta. Yksi tunnetuimmista ja yleisimmistä kirjastoista, joka yksinkertaistaa yksinkertaisten skriptien kirjoittamista HTML- tai PHP-sivuilla, on jQuery , kun taas JavaScript-sovellusten kirjoittamiseen on lukuisia kehyksiä, jopa erittäin kehittyneitä (asiakaspuoli ja/tai palvelinpuoli), jättäen kokonaan huomiotta. tarve tunnistaa, mitä selainta loppukäyttäjä käyttää.

Vastatoimenpiteet

Yhteensopimattomien tilanteiden käsittelyyn on kaksi päätekniikkaa: selaimen nuuskiminen (kirjaimellisesti "selaimen nuuskiminen") ja objektien tunnistus . Kun oli vain kaksi selainta, jotka tukivat komentosarjoja, eli Netscape ja Internet Explorer, selaimen nuuskiminen oli suosituin tekniikka. Tarkistamalla useita asiakkaan ominaisuuksia, jotka palauttivat alusta-, selain- ja versiotiedot, koodi pystyi havaitsemaan tarkalleen, missä selaimessa se oli käynnissä. Myöhemmin haistelutekniikoiden toteuttaminen vaikeutui, kun Internet Explorer alkoi naamioida tietojaan esimerkiksi antamalla yhä epätarkempia selaintietoja (Microsoftin syyt tähän ovat olleet pitkään kiistanalaisia). Myöhemmin selaimen haistamisesta tuli monimutkainen taidemuoto, kun markkinoille tuli muita komentosarjoja käyttäviä selaimia, joilla kullakin oli oma alusta-, asiakas- ja versiotietonsa.

Objektin tunnistus perustuu kohteen ominaisuuden olemassaolon tarkistamiseen. 

funktio  set_image_source ( imageName ,  imageURL ) 
{ 
  // Testaa, onko 'dokumentti'-objektilla 'images'-ominaisuus , 
  jos  ( document . images ) 
  { 
    // suoritetaan vain, jos 'images'- 
    dokumenttivektori on olemassa . kuvat [  imageName  ]. src  =  kuvan URL-osoite ; 
  } 
}

Monimutkaisempi esimerkki perustuu linkitettyjen Boolen testien käyttöön:

jos  ( dokumentti . body  &&  asiakirja . body . tyyli )

Tässä tapauksessa ilmaus "document.body.style" aiheuttaisi normaalisti virheen selaimessa, jossa ei ole "document.body" -ominaisuutta, mutta "&&"-operaattorin käyttäminen varmistaa, että "document.body.style" on ei koskaan kutsuttu if" document.body "ei ole olemassa. Testissä hyödynnetään tätä loogisten lausekkeiden arvioinnin erityispiirrettä, jota kutsutaan laiskaksi arvioimiseksi (lit. "laiska arviointi").

Nykyään selaimen haistamisen, objektien havaitsemisen ja standardien, kuten ECMAScript-määrityksen ja CSS :n, yhdistelmää käytetään useissa toimenpiteissä sen varmistamiseksi, että käyttäjä ei koskaan kohtaa JavaScript-virhettä.

Käyttö

Toisin kuin muut kielet, kuten C tai C ++, jotka mahdollistavat täysin itsenäisten ohjelmien kirjoittamisen, JavaScriptiä käytetään pääasiassa komentosarjakielenä , integroituna, eli muun koodin sisällä.

Perusajatuksena on, että isäntäohjelma (se, joka isännöi ja suorittaa komentosarjan) tarjoaa skriptille hyvin määritellyn API :n , joka mahdollistaa pääsyn tiettyihin toimintoihin, joiden toteuttaminen on isäntäohjelman itsensä vastuulla. Kun komentosarja suoritetaan, se käyttää viittauksia tähän sovellusliittymään pyytääkseen ( isäntäohjelmaa ) suorittamaan tiettyjä toimintoja, joita JavaScript-kielen rakenteet eivät itse ole tarkoitetut. Tämä mekanismi on otettu käyttöön myös kielissä, kuten C tai Java , joissa ohjelma luottaa kirjastoihin , joita itse kieli ei tarjoa ja joiden avulla voit suorittaa toimintoja, kuten I / O tai kutsua funktiojärjestelmää .

Tyypillinen (ja ehkä tunnetuin ja yleisin) esimerkki JavaScript-komentosarjan isäntäohjelmasta on selain . Nykyaikainen selain sisältää tavallisesti JavaScript-tulkin . Kun JavaScript-koodia sisältävällä verkkosivulla vieraillaan, selaimen sisältämä tulkki suorittaa sen. Liitäntöjä, jotka sallivat JavaScriptin liittyä selaimeen, kutsutaan DOM :ksi ( italiaksi Document Object Model ). Monet verkkosivustot käyttävät asiakaspuolen JavaScript-tekniikkaa tehokkaiden dynaamisten verkkosovellusten rakentamiseen .

JavaScriptin pääasiallinen käyttö verkkoympäristössä on pienten HTML - sivuille integroitujen toimintojen kirjoittaminen, jotka ovat vuorovaikutuksessa selaimen DOM:n kanssa suorittamaan tiettyjä toimintoja, jotka eivät ole mahdollisia pelkällä staattisella HTML :llä : tarkista syöttökenttien arvot, piilota tai näyttää tiettyjä elementtejä jne. Valitettavasti kaikki eivät aina kunnioita W3C :n määräämiä DOM-standardeja johdonmukaisesti ja johdonmukaisesti. Eri selaimet, renderöintimoottoristaan ​​riippuen , paljastavat skriptille erilaisia ​​objekteja tai menetelmiä, joten JavaScript-toimintoon on usein otettava käyttöön lisäsäätimiä yhteensopivuuden varmistamiseksi kunkin selaimen kanssa ja jopa saman selaimen eri versioiden mukaan.

Webin ulkopuolella JavaScript-tulkit on integroitu useisiin sovelluksiin. Adobe Acrobat ja Adobe Reader tukevat JavaScriptiä PDF - tiedostoissa . Mozilla -alusta , joka tukee monia suosittuja verkkoselaimia, käyttää JavaScriptiä eri tuotteidensa käyttöliittymän ja tapahtumalogiikan toteuttamiseen. JavaScript-tulkit on myös integroitu patentoituihin sovelluksiin, joissa ei ole komentosarjaliittymiä. Lopuksi Microsoftin Windows Script Host -tekniikka tukee JavaScriptiä (JScriptin kautta) , käyttöjärjestelmien komentosarjakieltä .

Jokainen näistä sovelluksista tarjoaa oman objektimallinsa, joka antaa pääsyn isäntäympäristöön, ja JavaScript-kielen ydin pysyy suurelta osin muuttumattomana kussakin sovelluksessa. JavaScript-kielen ytimessä on useita toteutuksia, mukaan lukien:

Käyttö HTML:ssä

Script tag (HTML)

Jos haluat lisätä skriptin HTML-sivulle, sinun on käytettävä komentosarjatunnistetta . Tämä tunniste ei ole osa itse JavaScript-kieltä, vaan se toimii vain "säilönä" HTML-sivulla. 

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

Dokumentissa voi olla komentosarjatunnisteen määritelmä useissa osissa. Tämän tagin avulla voit esittää käytetyn version ja selaimesta riippuen sinulla on tulkinta koodin oikeasta osasta. Määritelmät voivat olla seuraavat: 

< script  type = "text / javascript" >  ...  </ script >
Esimerkki: Hei maailma!

Seuraava esimerkki näyttää varoitusviestin, jonka sisällä on " Hei maailma ". 

< script  type = "text / javascript" > 
   alert ( 'Hei maailma' ); 
< / script>

"Kirjoittaminen" suoraan HTML-sivulle: 

< script  type = "text / javascript" > 
   asiakirja . kirjoittaa ( 'Hei maailma' ); 
< / script>

JavaScript - lähdekoodin MIME-tyyppiapplication/javascript on , mutta se on eniten käytetty text/javascript, vaikkakin ei-standardi.

Upota JavaScript-koodi HTML-dokumenttiin kirjoittamalla sen eteen: 

< script  type = "text / javascript" >

ja seuraa: 

</ script >

Vanhemmat selaimet vaativat yleensä koodin aluksi: 

  < skriptikieli  = "JavaScript" type = " teksti / javascript" > <! -

ja päättyy: 

  // ->
   </ script >

Kommenttimerkkejä <!--... -->tarvitaan sen varmistamiseksi, että koodia ei näytetä tekstinä erittäin vanhassa selaimessa, joka ei tunnista tunnistetta <script>HTML-dokumenteissa, kun taas LANGUAGE on HTML-attribuutti (mitä ei nyt suositella), jota voidaan pyytää vanhoilta selaimet. XHTML / XML -dokumenttien <script>-tunnisteet eivät kuitenkaan toimi kommenteissa, koska XHTML/XML-standardien mukaiset jäsentimet jättävät huomioimatta kommentit ja voivat myös kohdata ongelmia symbolien --ja komentosarjojen kanssa (esimerkiksi sekoittamalla ne operaattorien vähennyksiin kokonaisluvut ja vertailu). XHTML-dokumenttien tulee sitten sisältää skriptit XML:n CDATA -osina , etuliitteenä <>

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

ja seuraa niitä 

  //]]>
   </ script >

("//"-symbolit rivin alussa merkitsevät JavaScript-kommentin alkua, jotta <![CDATA[skripti ]]>ei jäsentäisi sitä.)

HTML [1] -elementit voivat sisältää sisäisiä tapahtumia, jotka voidaan liittää skriptin määrittämiin käsittelijöihin. Voidakseen kirjoittaa kelvollisen HTML 4.01 -koodin verkkopalvelimen tulee palauttaa "Content-Script-Type" arvolla "text / JavaScript". Jos verkkopalvelinta ei voida konfiguroida tähän tarkoitukseen, verkkosivuston tekijä voi sijoittaa seuraavan lausunnon asiakirjan otsikko-osioon 

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

Usein käytetty verkkoselaimissa

JavaScriptiä voidaan käyttää jokaiseen verkkoselaimen asiakaspuolen komentosarjaan , mutta jotkin käyttötavat ovat yleistyneet kuin toiset. Esimerkkejä ovat kuvien vaihtaminen, ponnahdusikkunoiden luominen ja lomaketietojen vahvistaminen . Useimmissa selaimissa seuraava XHTML -koodinpätkä näyttää tavan, jolla yksi kuva voidaan korvata toisella, kun käyttäjä siirtää kohdistimen sen päälle. Tätä tehostetta kutsutaan usein vierityksen tai hiiren päälle . Samanlainen käyttäytyminen voidaan kuitenkin saavuttaa myös käyttämällä vain CSS: ää . 

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

Tytäryhtiöt

Uusi esimerkki JavaScriptin käytöstä ovat kirjanmerkit , pienet koodiosat kirjanmerkeissä tai verkkoselaimien suosikit . Macromedia Flashissa käytetty ohjelmointikieli (kutsutaan ActionScript ) muistuttaa suuresti JavaScriptiä, koska niillä on yhteinen suhde ECMAScriptiin . ActionScriptillä on lähes sama syntaksi kuin JavaScriptillä, mutta objektimalli [7] on hyvin erilainen.

JavaScript for OSA (JavaScript OSA tai JSOSA) on komentosarjakieli Macintoshille , joka perustuu Mozillan JavaScript 1.5 -toteutukseen [8] . Se on Late Night Softwaren tarjoama ilmainen komponentti . Vuorovaikutusta käyttöjärjestelmän ja kolmannen osapuolen sovellusten kanssa hallitaan MacOS -objektin kautta . Sen lisäksi kieli on käytännössä identtinen Mozilla-toteutuksen kanssa. Sitä on ehdotettu vaihtoehdoksi enemmän käytetylle AppleScript -kielelle .

Kielielementit

Muuttujat

Muuttujat kirjoitetaan tyypillisesti dynaamisesti, eli ne määritellään yksinkertaisesti antamalla niille arvo tai käyttämällä komentoalet ; ne, jotka on ilmoitettu minkään toiminnon ulkopuolelle, ovat "globaalissa" näkyvissä tai käytettävissä koko verkkosivulta ; funktion sisällä ilmoitetut ovat paikallisia tai kyseisen funktion sisäisiä. Siirtääkseen muuttujia sivulta toiselle kehittäjä voi asettaa evästeen tai käyttää taustalla piilotettua kehystä tai ikkunaa niiden tallentamiseen.

Objektit

Kaikki JavaScriptissä on joko primitiivistä arvoa tai objektia. Objektit ovat entiteettejä, joilla on ainutlaatuisuus (ne ovat samanarvoisia vain itselleen) ja jotka yhdistävät ominaisuuksien nimet arvoihin. Tämä tarkoittaa, että objekti on assosiatiivinen vektori , joka on samanlainen kuin Perlin ja Rubyn tiivisteet tai Pythonin , PostScriptin ja Smalltalkin sanakirjat .

JavaScriptissä on monenlaisia ​​ennalta määritettyjä objekteja, erityisesti Array , Boolean ( Boolean ), Date (objektit, jotka sisältävät päivämäärän ja kellonajan), Function ( funktiot ), Math (objekti, joka sisältää matemaattisissa laskelmissa käytettyjä toimintoja), Numero (numerot) , Objekti ( objektit ) ), RegExp ( säännölliset lausekkeet ) ja String ( merkkijonot ). Muut objektit ovat "vierasobjekteja", joita ei määrittele kieli vaan suoritusympäristö. Selaimessa tyypilliset isäntäobjektit kuuluvat DOM : iin: ikkuna ( ikkuna ), lomake (maski), linkki ( linkki ) jne.

JSDOM.gif

Määrittämällä konstruktorin voit määrittää objekteja. JavaScript on prototyyppipohjainen oliokieli. Tämä tarkoittaa, että periytyminen tapahtuu objektien välillä, ei luokkien välillä (JavaScriptillä ei ole luokkia). Objektit perivät ominaisuudet prototyypeillään.

Muita ominaisuuksia tai menetelmiä voidaan lisätä yksittäisiin objekteihin niiden luomisen jälkeen. Voit tehdä tämän kaikille yhden rakentajan luomille ilmentymille käyttämällä prototypekonstruktori-ominaisuutta päästäksesi prototyyppiobjektiin.

Esimerkki: Objektin luominen 

// 
konstruktorifunktio MyObject  ( attribuuttiA , attribuuttiB ) { this . attribuuttiA = attribuuttiA tämä . attribuuttiB = attribuuttiB } 

    
    

 
// luo objekti 
obj  =  uusi  OmaObject ( 'punainen' ,  1000 )
 
// käyttää obj 
alertin attribuuttia ( obj . attribuuttiA )
 
// käyttää attribuuttia assosiatiivisen vektorin merkinnällä 
( obj [ " attributeA" ])

Simuloi periytymistä

JavaScriptin objektien hierarkiaa voidaan emuloida. Esimerkiksi: 

function  Base () 
{ 
  this . Override  =  _Override ; 
  tämä . BaseFunction  =  _BaseFunction ;
 
  function  _Override () 
  { 
    alert ( "Base :: Override ()" ); 
  }

  function  _BaseFunction () 
  { 
    alert ( "Base :: BaseFunction ()" ); 
  } 
}
 
function  Johda () 
{ 
   this . Override  =  _Override ; 
   function  _Override () 
   { 
     alert ( "Johda :: Ohita ()" ); 
   } 
}

Drift . prototyyppi  =  uusi  Base ();
 
d  =  uusi  Johdannainen (); 
d . Ohita (); 
d . BaseFunction ();

tuloksena on tulos: 

Johda :: Ohita ()
Base :: BaseFunction ()

Ennalta määritetyt objektit

Sen lisäksi, että JavaScript sallii objektien määrittelyn, se tarjoaa joukon objekteja, joita voidaan käyttää komentosarjoissasi:

Array

Taulukko on yhdistelmä kokonaislukujen ja mielivaltaisen tyyppisten arvojen välillä. JavaScriptissä kaikki objektit voivat liittää kokonaislukuja ja arvoja, mutta taulukot ovat erikoistyyppisiä objekteja, joilla on tietty käyttäytyminen ja erikoistuneet menetelmät kokonaislukuindeksien käyttämiseen (esim.,, joinja slice) push.

Matriiseilla on ominaisuus length, joka on taatusti aina suurempi kuin vektorissa käytetty suurin indeksi. Se päivitetään automaattisesti, jos luot omaisuuden, jolla on vielä suurempi indeksi. Pienemmän luvun kirjoittaminen ominaisuuteen lengthpoistaa suuremmat indeksit. Tämä ominaisuus on vektorien ainoa erikoisominaisuus, joka erottaa ne muista objekteista.

Taulukkoelementeillä voit käyttää tavallista merkintää objektin ominaisuuksiin pääsemiseksi: 

  myArray[1]
  myArray["1"]

Nämä kaksi merkintää ovat samanarvoisia. Et voi käyttää pistemerkintöjä tai merkkijonoja numeron vaihtoehtoisen esityksen kanssa: 

  myArray.1(syntaksivirhe)
   myArray(1)(virheellinen syntaksi, sallii vain Internet Explorer)
   myArray["01"](ei sama kuin myArray[1])

Vektorin määrittelyssä voidaan käyttää joko eksplisiittistä merkintää tai konstruktoria Array: 

 myArray = [0,1,,,4,5];(vektori pituus 6 ja 4 elementtiä)
  myArray = new Array(0,1,2,3,4,5);(vektori, jonka pituus on 6 ja 6 elementtiä)
  myArray = new Array(365);(tyhjä vektori pituus 365)

Taulukot on toteutettu siten, että vain määritetyt elementit käyttävät muistia; ne ovat "hajallaan olevia vektoreita". Aseta myArray[10] = 'qualcosa'ja myArray[57] = 'qualcosaltro'käytä tilaa vain näille kahdelle elementille, kuten kaikille muille objekteille. Taulukon pituudeksi ilmoitetaan aina 58.

Ohjausrakenteet ja ehdolliset

jos ... muuten

IF-ohjausrakenne vastaa italiaksi SE:tä

Aaltosulkeissa oleva lauseke suoritetaan vain ja vain, jos ehto on tosi, muuten ELSE:n sisältämä lause suoritetaan. 

  jos (ehto)
  {
     ohjeet;
  }

  jos (ehto)
  {
     ohjeet;
  }
  muu
  {
     ohjeet;
  }

While loop 

  kun (kunto)
  {
     ohjeet;
  }

Tee ... while loop 

  tehdä
  {
     ohjeet;
  } while (ehto);

For loop 

  for ([alkulauseke]; [ehto]; [lisälauseke])
  {
     ohjeet;
  }

For loop ... in

Tämä silmukka käy läpi kohteen (tai vektorin elementtien) kaikki ominaisuudet. 

  for ( muuttuja objektissa)
  {
     ohjeet;
  }

For ... of loop

Tämä silmukka kulkee kohteen (tai vektorin elementtien) kaikkien arvojen läpi. 

  for ( objektin muuttuja )
  {
     ohjeet;
  }

Vaihda lauseketta 

  kytkin (lauseke)
  {
     tapauksen arvo1:
        ohjeet;
        tauko ;
     tapauksen arvo2:
        ohjeet;
        tauko ;
     oletus  :
        ohjeet;
  }

Toiminnot

Funktio on komentolohko , jossa on luettelo argumenteista (mahdollisesti tyhjä) ja jolla voi olla nimi (vaikka se ei ole välttämätöntä). Funktio voi palauttaa arvon return - käskyn kautta . 

  toiminto (voi olla tyhjä)
  {
     ohjeet;
     paluulauseke ;
  }

Funktiota kutsuttaessa välitettyjen argumenttien lukumäärän ei välttämättä tarvitse olla yhtä suuri kuin funktiomääritelmän argumenttien lukumäärä (eli muodollisten parametrien määrää ei välttämättä tarvitse noudattaa funktiota kutsuttaessa, eli nykyisten parametrien määrittely ) . Funktiossa argumenttiluetteloon voidaan viitata myös vektorin avulla arguments(jälkimmäisellä on ominaisuus, calleejoka edustaa osoitinta itse funktioon).

Jokainen funktio on funktion esiintymä , joka on objektin perustyyppi. Toimintoja voidaan luoda ja määrittää kuten mitä tahansa muuta objektia: 

   var myFunc1 = uusi toiminto ("hälytys ('Hei')");
   var myFunc2 = myFunc1;
   myFunc2 ();

tuottaa lähtönä: 

   Hei

Vuorovaikutus käyttäjän kanssa

Muiden tekniikoiden joukossa, joilla JavaScript-skripti voi olla vuorovaikutuksessa käyttäjän kanssa verkkosivulla, ovat seuraavat:

  • HTML- lomakeelementit , joita voi muokata HTML DOM:n kautta;
  • Varoitusvalintaikkuna _
  • Vahvista valintaikkuna
  • Kehotteen valintaikkuna
  • Selaimen tilapalkki
  • Vakiolähtö ("konsoli")

Huomautus: valintaikkunat eivät toimi Opera-selaimen kanssa; ei ole virhettä, niitä ei vain suoriteta.

Videon kirjoitusmenetelmät (vakiolähtö)

Voit kirjoittaa näytölle (eli sivulle, jolla komentosarja sijaitsee) käyttämällä document.write () -menetelmää; näytettävät merkkijonot voidaan ketjuttaa käyttämällä ketjutusoperaattoria '+': 

< html > 
< head > 
< script  type = "text / javascript" > 
<  ! - Piilota  komentosarja  vanhentuneilta  selaimilta  

// Tämä toiminto luo vaakasuoran viivan valitun leveyden. 
funktiopalkki  ( leveysPct ) { dokumentti . _ write ( "<hr align = 'left' width = '" + widthPct + "%' />" ); }

      


// Tämä toiminto luo tekstiä, jota edeltää tietyn tason otsikko. 
funktion  tulos ( headLevel ,  headText ,  text ) 
{ 
  document . kirjoittaa ( "<h"  +  headLevel  +  ">"  +  headText  +  "</ h"  +  headLevel  +  "> <p>"  +  teksti  +  "</p>" ); 
}

// Piilota koodin loppu -> 
< / komentosarja> 
< / head> 
< body > 
< script  type = "text / javascript" > 
<!  - Piilota  komentosarja  vanhentuneilta  selaimilta  

bar ( 25 ) 
tulos ( 2 ,  "JavaScript Rules!" ,  "JavaScriptin käyttäminen on helppoa..." )

// Piilotettavan koodin loppu -> 
< / komentosarja>

< p > Tämä  on  normaali  HTML ,  toisin  kuin yllä olevan koodin luoma  . _ _ < /p>     

< / body> 
< / html>

Tapahtumat

Tekstielementit voivat olla erilaisten tapahtumien lähde, jotka voivat laukaista toiminnon, jos ECMAScript - tapahtumakäsittelijä on rekisteröity . HTML:ssä nämä tapahtumakäsittelijät ovat usein nimettömiä toimintoja suoraan HTML-tunnisteessa. Komentosarjan tapahtuman kutsumisen syntaksi on seuraava: 

Aihe . tapahtuma  =  käsittelijä ;

Tapahtumaluokkia on useita:

  1. Tapahtumat, jotka voidaan aktivoida hiiren painikkeilla
  2. Tapahtumat, jotka voidaan aktivoida hiiren liikkeillä
  3. Tapahtumat, jotka voidaan aktivoida vetämällä hiirtä (vedä ja pudota)
  4. Tapahtumat, jotka käyttäjä voi aktivoida näppäimistöllä
  5. Tapahtumat, jotka voidaan aktivoida käyttäjän muokkauksilla
  6. "paloon" liittyvät tapahtumat
  7. Tapahtumat, jotka voidaan aktivoida lataamalla objekteja
  8. Tapahtumat, jotka voidaan aktivoida ikkunan liikkeillä
  9. Tapahtumat, jotka on linkitetty tiettyihin painikkeisiin
  10. Muita ja uudenlaisia ​​tapahtumia

Tapahtumat, jotka voidaan aktivoida hiiren painikkeilla

Tapahtumalista:

  1. onClick : aktivoituu, kun objektia napsautetaan;
  2. onDblClick : aktivoituu kaksoisnapsauttamalla;
  3. onMouseDown : aktivoituu, kun hiiren vasenta painiketta painetaan;
  4. onMouseUp : aktivoituu, kun nostat aiemmin painettua hiiren vasenta painiketta;
  5. onContextMenu : aktivoituu, kun hiiren oikeaa painiketta napsautetaan ja kontekstivalikko avataan.

Kaksoisnapsautus on tapahtuma, joka kattaa muut ja tarkalleen ottaen aktivoituu peräkkäin onmousedown, onmouseup, onclick.

Sovellustunniste

A, OSOITE, SOVELTA, ALUE, B, BDO, BIG, Block QUOTE, BODY, BUTTON, TEKSTIS, KESKUS, CITE, KOODI, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = painike, INPUT type = valintaruutu, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = radio, INPUT type = reset, INPUT type = lähetä, INPUT type = teksti , KBD, LABEL, LEGEND, LI, LISTING, KARTTA, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PELOKAKSI, 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

Tapahtumat, jotka voidaan aktivoida hiiren liikkeillä

Tapahtumalista:

  1. onMouseOver : aktivoituu, kun hiiri liikkuu kohteen päällä;
  2. onMouseOut : aktivoituu, kun hiiri liikkuu kohteesta;
  3. onMouseMove : siirtää hiiren osoitinta, mutta koska tämä tapahtuma toistuu usein (hiirtä käytetään usein), se ei ole oletuksena käytettävissä, vaan vain yhdistettynä tapahtuman kaappaamiseen, mikä selitetään myöhemmin.
Sovellustunniste

A, OSOITE, SOVELTA, ALUE, B, BDO, BIG, Block QUOTE, BODY, BUTTON, TEKSTIS, KESKUS, CITE, KOODI, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = painike, INPUT type = valintaruutu, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = radio, INPUT type = reset, INPUT type = lähetä, INPUT type = teksti , KBD, LABEL, LEGEND, LI, LISTING, KARTTA, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PELOKAKSI, 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

Tapahtumat, jotka voidaan aktivoida vetämällä hiirtä (vedä ja pudota)

Tapahtumalista:

  1. onDragDrop : tapahtuma laukeaa, kun käyttäjä vetää objektia selainikkunassa tai kun hän pudottaa tiedoston siihen;
  2. onMove : aktivoituu, kun objekti siirtää ikkunaa tai kehystä;
  3. onDragStart : tapahtuma aktivoituu heti, kun käyttäjä alkaa vetää objektia;
  4. onDrag : aktivoituu, kun hiiri vetää objektin tai tekstivalikoiman saman selaimen ikkunaan tai jopa toiseen tai jopa työpöydälle;
  5. onDragEnter : aktivoituu heti, kun käyttäjä vetää objektin saman tai toisen selaimen kelvolliseen kohteeseen;
  6. onDragOver : aktivoituu, kun käyttäjä vetää objektin kelvolliseen kohteeseen isännöidäkseen sitä, ja on samanlainen kuin edellinen tapahtuma, mutta aktivoituu sen jälkeen;
  7. onDragLeave : aktivoituu, kun käyttäjä vetää objektin sen isännöintiin sopivaan kohteeseen, mutta sitä ei vapauteta;
  8. onDragEnd : laukeaa, kun käyttäjä pudottaa objektin vetämisen jälkeen.
  9. onDrop : aktivoituu, kun hiiri nostaa hiiren painikkeen vetämisen jälkeen;
Sovellustunniste

A, OSOITE, SOVELTA, ALUE, B, BDO, BIG, Block QUOTE, BODY, BUTTON, TEKSTIS, KESKUS, CITE, KOODI, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = painike, INPUT type = valintaruutu, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = radio, INPUT type = reset, INPUT type = lähetä, INPUT type = teksti , KBD, LABEL, LEGEND, LI, LISTING, KARTTA, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PELOKAKSI, 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

Tapahtumat, jotka käyttäjä voi aktivoida näppäimistöllä

Tapahtumalista:

  1. onKeyPress : tapahtuma laukeaa, kun käyttäjä painaa ja vapauttaa näppäintä tai jopa kun hän pitää sitä alhaalla;
  2. onKeyDown : aktivoituu, kun näppäintä painetaan;
  3. onKeyUp : tapahtuma aktivoituu, kun näppäin, jota oli painettu, vapautetaan;
  4. onHelp : aktivoituu, kun käyttäjä painaa F1-näppäintä;

Tapahtumat, jotka voivat laukaista käyttäjän tekemät muutokset

onChange

Käynnistyy, kun lomakkeen tai lomakekentän sisältöä muutetaan tai sitä ei ole enää valittu. Sitä käytetään myös FileUpload-, Select-, Text- ja TextArea-objektien kanssa.

Esimerkki: 

< input  type = "text"  value = "Anna sähköpostiosoite"  name = "userEmail" onChange  = validateInput ( this . value ) /  > 
< script  type = "text / javascript" > 
  this . myForm . userEmail . tarkennus (); 
  tämä . myForm . userEmail . valitse ();
 
  function  validateInput () 
  { 
    userInput  =  new  String (); 
    userInput  =  tämä . Oma Lomake . userEmail . arvo ; 
    if  ( userInput . match ( "@" )) 
      alert ( "Kiitos mielenkiinnostasi." ); 
    else 
      alert ( "Tarkista sähköpostitietosi oikein ennen lähettämistä" ); 
  } 
< / skripti>
onCellChange

Aktivoituu, kun tietokannan elementtiä muutetaan, tälle ominaisuudelle sillä on käyttö, joka ei liity tiukasti JavaScriptiin;

onPropertyChange

Tapahtuma käynnistyy, kun elementin omistajuus muuttuu;

onReadyStateChange

Tapahtuma laukeaa, kun elementin lataustila muuttuu, tapahtuma on hyödyllinen esimerkiksi sen varmistamiseksi, että elementti on ladattu.

Sovellustunniste

A, OSOITE, SOVELTA, ALUE, B, BDO, BIG, Block QUOTE, BODY, BUTTON, TEKSTIS, KESKUS, CITE, KOODI, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = painike, INPUT type = valintaruutu, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = radio, INPUT type = reset, INPUT type = lähetä, INPUT type = teksti , KBD, LABEL, LEGEND, LI, LISTING, KARTTA, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PELOKAKSI, 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

"Tuloon" liittyvät tapahtumat

onFocus

Tämä käsittelijä on vastakohta onBlurille, joten se aktivoituu, kun käyttäjä syöttää kenttään;

onBlur

Se aktivoituu, kun hiiren osoitin tai kursori poistuu nykyisestä ikkunasta hiirtä tai TAB-merkkiä käyttämällä. Moduuleissa tämä käsittelijä kuitenkin käynnistyy, jos poistutaan kentästä, jonka tunniste sisältää ohjausobjektin;

Esimerkki 

Anna  sähköpostiosoite  < input type = "text" value = "" name = " userEmail  " onBlur = addCheck () > < script type = "text / javascript" > function addCheck () { alert ( "Tarkista, että sähköpostitietosi ovat oikein ennen lähettämistä " ) } < / script>
onSelect

Se voidaan aktivoida, kun valitset tekstiruudun sisällä olevaa tekstiä joko hiirellä tai pitämällä SHIFT-näppäintä painettuna ja valitsemalla nuolinäppäimillä;

onSelectStart

Se aktivoituu, kun aloitat tapahtuman valitsemisen;

onbeforeEditFocus

Se aktivoidaan kaksoisnapsauttamalla tai napsauttamalla objektia, jolla on jo valinta, kun tämä on DesignModessa;

onLoseCapture

Laukaisee, kun kohde menettää hiiren kaappauksen.

Sovellustunniste

A, OSOITE, SOVELTA, ALUE, B, BDO, BIG, Block QUOTE, BODY, BUTTON, TEKSTIS, KESKUS, CITE, KOODI, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = painike, INPUT type = valintaruutu, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = radio, INPUT type = reset, INPUT type = lähetä, INPUT type = teksti , KBD, LABEL, LEGEND, LI, LISTING, KARTTA, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PELOKAKSI, 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

Tapahtumat, jotka voidaan aktivoida lataamalla objekteja

onLoad

Tämä käsittelijä toimii objektien, enimmäkseen ikkunoiden ja kuvien, lataamisessa;

onUnload

Se on päinvastainen kuin edellinen ja se toimii, kun poistut ikkunasta ladataksesi toisen tai jopa ladataksesi saman uudelleen (päivityspainikkeella);

onAbort

OnAbort-tapahtuman käsittelijällä voit määrittää koodin siltä varalta, että käyttäjä estää objektin lataamisen tai kuvan lataamisen.

Tämä käsittelijä käyttää seuraavia tapahtumaominaisuuksia.

Esimerkki 

  < img  name =  "myPic"  SRC =  "images / myPic.gif"  onAbort =  "hälytys ('Kuvan lataus keskeytetty!')" >
onError

Se aktivoituu, kun objektin lataaminen aiheuttaa virheen, mutta vain jos tämä johtuu koodin syntaksivirheestä, ei selaimen, joten se toimii sivun kuvan virheellisessä linkissä, mutta ei väärässä latauslinkki koko sivulle. Opera ei käsittele tätä tapahtumaa, joka on nyt vanhentunut: try ... catch -rakennetta käytetään oikeaan virheenkäsittelyyn;

onBeforeUnload

Tämä käsittelijä toimii samalla tavalla kuin onUnload, mutta latautuu hetkeä ennen;

onStop

Tämä käsittelijä toimii, kun lopetat sivun latautumisen selaimen pysäytysnäppäimellä, ja sen pitäisi toimia samalla tavalla kuin onUnload-lataus ennen tätä, mutta onBeforeUnloadin jälkeen.

Sovellustunniste
  1. onLoad Tätä käsittelijää käytetään tunnisteiden <BODY> ja <FRAMESET> kanssa ja JavaScript 1.1:ssä myös <IMG>:n kanssa, kun taas Explorerissa on myös tarpeen lisätä tunnisteet <SCRIPT>, <LINK>, <EMBED>, <APPLET> . JavaScript 1.2:ssa <LAYER>-tunniste lisätään myös Netscapeen.
  2. onUnload Tätä käsittelijää käytetään <BODY>- ja <FRAMESET>-tunnisteiden kanssa myös Internet Explorerissa.
  3. onAbort Tätä käsittelijää käytetään vain <IMG>-tunnisteen kanssa myös Internet Explorerissa.
  4. onError Tätä käsittelijää käytetään vain <IMG>-tunnisteen ja ikkunan kanssa, kun taas Internet Explorerissa myös <OBJECT> ja <STYLE>.
  5. onBeforeUnload Tätä käsittelijää käytetään <BODY>-tunnisteiden kanssa myös Internet Explorerissa.
  6. onStop Tätä käsittelijää käytetään <BODY>-tunnisteiden kanssa myös Internet Explorerissa.

Tapahtumat, jotka voidaan aktivoida ikkunan liikkeillä

Tapahtumalista:

  1. onResize: Tämä käsittelijä aktivoituu, kun käyttäjä pienentää tai maksimoi ikkunaa tai kehystä tai erityisesti Explorerin tapauksessa objektia, johon korkeus ja leveys tai jopa sijainti on kiinnitetty, kuten kerrosta;
  2. onScroll: aktivoituu vierittäessä sivua joko hiirellä PGUP- ja PGDOWN-näppäimillä tai myös doScroll-menetelmällä.
Sovellustunniste

A, OSOITE, SOVELMA, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, KOODI, mukautettu, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, Hn, HR, I, IMG, INPUT type = painike, INPUT type = tiedosto, INPUT type = kuva, INPUT type = salasana, INPUT type = nollaa, INPUT type = lähetä, INPUT type = teksti, 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, ikkuna, XMP

Tiettyihin painikkeisiin liittyvät tapahtumat

  1. onSubmit: Tämä käsittelijä aktivoidaan napsauttamalla lomakkeen Lähetä-painiketta;
  2. onReset: tämä käsittelijä aktivoidaan napsauttamalla lomakkeen Peruuta-painiketta.
Sovellustunniste

Käsittelijä koskee vain Form-objektia.

Virhe käsittelyssä

JavaScriptin uudemmat versiot (alkaen Internet Explorer 5:ssä ja Netscape 6 :ssa käytetyistä ) sisältävät mahdollisuuden try... catchvirheenkäsittelykonstruktioon .

Konstrukti try ... catch ... finallyhavaitsee virheen tai käskyn aiheuttamat poikkeuksetthrow . Sen syntaksi on seuraava: 

kokeile  { 
   // Lausekkeet, joissa poikkeuksia voidaan heittää 
}  catch  ( error )  { 
   // Lauseet, jotka suoritetaan poikkeustapauksessa 
}  lopuksi  { 
   // Lausekkeet, jotka suoritetaan myöhemmin molemmissa tapauksissa 
}

Aluksi lohkon sisältämät käskyt suoritetaan try. Jos poikkeus heitetään, komentosarjan ohjausvirta välitetään välittömästi catch block -lauseisiin, jolloin poikkeus asetetaan saataville argumenttina error. Muussa tapauksessa lohko catchohitetaan. Kun lohko catchon valmis tai lohko tryon suoritettu loppuun ilman, että poikkeuksia heitetään, lohkon ohjeet suoritetaan finally.

Integrointi HTML5:n kanssa

HTML5:n syntyessä JavaScript on saanut useita innovaatioita [9] :

Puheentunnistus

Käyttäjä voi puhua lomakkeen sisällä kirjoittamisen sijaan:

< syöttötyyppi  = "teksti" x - webkit - puhe / > var - tunnistus = uusi Puheentunnistus (); var voiceRecognitionList = uusi SpeechGrammarList ();

Järjestelmän ilmoitukset

Image
Web-sivu voi sisältää muun tyyppistä grafiikkaa, kuten näitä. Nämä eivät ole järjestelmäilmoituksia.

Järjestelmän ilmoitukset on suunniteltu herättämään käyttäjän huomio näyttämällä lyhyt viesti myös nykyisen sivun ulkopuolella tai vaikka selain ei ole tällä hetkellä etualalla. Niiden mahdollinen invasiivisuus huomioon ottaen on mahdollista käyttää niitä vain, jos sivusto on jo saanut käyttäjältä erityisen suostumuksen. [10] [11]

Järjestelmän ilmoitukset, kuten nimestä voi päätellä, integroidaan johdonmukaisesti nykyiseen laitteeseen (työpöydällä se on usein ponnahdusikkuna , mobiililaitteella se on usein ilmoituspalkissa jne.). [11] [10]

Alla on pieni esimerkki kahdesta painikkeesta, joiden avulla voit pyytää käyttöoikeuksia järjestelmäilmoituksille ja näyttää yhden. 

< button  id = "btn-asking" > Pyydä käyttöoikeuksia </ button > 
< button  id = "btn-notify" > Näytä ilmoitus </ button >

< komentosarja > 
// painikkeen haku 
var  btnAsking  =  asiakirja . getElementById (  'btn-asking'  ); 
var  btnNotify  =  asiakirja . getElementById (  'btn-notify'  );

// napsautuksen jälkeen se käynnistää 
btnAsking- käyttöoikeuspyynnön . addEventListener (  'napsautus' ,  function ()  { 
    Notification . requestPermission (); 
}  );

// napsautuksen jälkeen näytän 
btnNotify- ilmoituksen . addEventListener (  'napsauta' ,  function ()  { 
    new  Notification (  "Uusi ilmoitus!"  ); 
}  ); 
</ script >

Virallisen dokumentaation syventäminen mahdollistaa edelleen hyvien käytäntöjen toteuttamisen, mukaan lukien:

  • tuen tarkistaminen (esimerkiksi iOS :n Safari on tunnettu siitä, ettei se saa suurta tukea) [12] [11]
  • aikaisemman suostumuksen kunnioittaminen (vältä useiden suostumuspyyntöjen pyytämistä)
  • erimielisyyden kunnioittaminen (vältä yrittämästä avata ilmoituksia, jos suostumusta ei ole)

Lupapyyntö tulee käynnistää vain vuorovaikutuksen jälkeen käyttäjän kanssa (kuten napin painalluksen jälkeen). Monet nykyaikaiset selaimet jopa kieltävät suostumuspyyntöponnahdusikkunan avaamisen alkuperäisille ilmoituksille, jos vuorovaikutusta ei ole ollut. [11]

Muokattava sisältö

Käyttäjän mahdollisuus muokata verkkosivua ikään kuin hän olisi WYSIWYG -editorissa , vaikka muutoksia ei tallennettaisi oikealle etäsivulle, vaan ne näkyvät vain käyttäjän selaimessa:

< div  contenteditable = " true " > 
Käyttäjä voi muokata tätä  tekstiä  . < / div> asiakirja . execCommand ( "defaultParagraphSeparator" , false , "p" );

Vedä ulos

Vedä ja pudota tiedostoja verkkosivulta tietokoneellesi tai muulle laitteelle:

<a href =  "src / star.mp3" draggable = "true" class = "dragout" data - downloadurl = "MIMTYYPPI: TIEDOSTANIMI: ABSOLUTE_URI_TO_FILE"> lataa < / a > var files = document . querySelectorAll ( '.dragout' ); for ( var i = 0 , tiedosto ; tiedosto = tiedostot [ i ]; ++ i ) { tiedosto . addEventListener ( 'dragstart' , function ( e ) { e . dataTransfer . setData ( 'DownloadURL' , this . dataset . downloadurl ); }, false ); }

Tiedostojärjestelmän API

Kirjoita tiedosto asynkronisesti hiekkalaatikkotiedostojärjestelmään JavaScriptin avulla:

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

    tiedostosyöttö . createWriter ( funktio ( kirjoittaja )  {  .

        kirjailija . onwrite  =  funktio ( e )  {  ...  }; 
        kirjailija . virhe  =  funktio ( e )  {  ...  };

        var  bb  =  uusi  BlobBuilder (); 
        bb . append ( 'Hei maailma!' );

        kirjailija . kirjoittaa ( bb.getBlob ( ' teksti / tavallinen' ));

    },  opt_errorHandler ); 
  } 
},  opt_errorHandler );

Geolocation

Käyttäjän mahdollisuus ilmoittaa asemansa sovellukselle tai verkkosivulle:

if  ( navigaattori . geolocation )  { 
  navigaattori . maantieteellinen sijainti . getCurrentPosition ( toiminto ( sijainti )  { 
    var  latLng  =  uusi  google . kartat . LatLng ( 
        sijainti . koordinaatit . leveysaste ,  sijainti . koordinaatit . pituusaste ); 
    var  marker  =  uusi  google . maps . Merkki ( { sijainti :  latLng ,  kartta :  kartta }) ; 
    kartta . setCenter ( latLng ); 
  },  errorHandler ); 
}

Laitteen suunta

Raportoi tiedot, jotka osoittavat muutoksia laitteen suunnassa suhteessa painovoiman vetovoimaan. Erityisesti kannettavat laitteet, kuten matkapuhelimet, voivat käyttää näitä tietoja kääntämään näyttöä automaattisesti pysyäkseen pystyasennossa, jolloin verkkosisältö näkyy koko näytön kokoisena, kun laitetta käännetään niin, että sen leveys on suurempi kuin Hänen Majesteettinsa.

ikkuna . addEventListener ( 'laitteen suunta' ,  funktio ( tapahtuma )  { 
  var  a  =  tapahtuma . alpha ; 
  var  b  =  tapahtuma . beta ; 
  var  g  =  tapahtuma . gamma ; 
},  false );

Paikallinen tallennustila, sovellusvälimuisti ja kiintiösovellusliittymä

Mahdollisuus selata aiemmin katsottuja verkkosivuja myös ilman Internet-yhteyttä:

Tallenna-painike . addEventListener ( 'click' ,  function  ()  { 
  window . localStorage . setItem ( 'arvo' ,  alue . arvo ); 
  window . localStorage . setItem ( 'aikaleima' ,  ( new  Date ())) getTime ()); 
},  false ); 
tekstialue . arvo  =  ikkuna . localStorage . getItem ( 'arvo' );

< html  manifest = "cache.appcache" > 
ikkuna . sovellusvälimuisti . addEventListener ( 'updateready' ,  function ( e )  { 
  if  ( window . applicationCache . status  ==  window . applicationCache . UPDATEREADY )  { 
    window . applicationCache . swapCache (); 
    if  ( vahvista ( 'Tästä sivustosta on saatavilla uusi versio. Lataa se? ' ))  { 
      ikkuna . sijainti . lataa uudelleen (); 
    } 
  } 
},  false );

Web SQL -tietokanta

Uusia toimintoja integroituna SQL:ään:

var  db  =  ikkuna . openDatabase ( "DBName" ,  "1.0" ,  "description" ,  5 * 1024 * 1024 );  // 5 Mt 
db . tapahtuma ( funktio ( tx )  { 
  tx . executeSql ( "VALITSE * FROM testi" ,  [],  menestysCallback , errorCallback ); });

Indeksoitu DB

Tämä API käyttää indeksejä mahdollistaakseen tehokkaat tiedonhaut. Vaikka verkkotallennustila on hyödyllinen pienempien tietomäärien tallentamiseen, se on vähemmän hyödyllinen suurempien strukturoitujen tietojen tallentamiseen. IndexedDB tarjoaa ratkaisun.

var  idbRequest  =  ikkuna . indeksoitu DB . open ( 'tietokannan nimi' ); 
idbRequest . onsuccess  =  toiminto ( tapahtuma )  { 
  var  db  =  tapahtuma . srcElement . tulos ; 
  var  tapahtuma  =  db . tapahtuma ([],  IDBTransaction . READ_ONLY ); 
  var  curRequest  =  tapahtuma . objectStore ( 'ObjectStore-nimi' ). openCursor (); 
  curRequest . onnistuminen  =  ...; 
};

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( käytetty ,  jäljellä )  { 
    console . log ( "Käytetty kiintiö:"  +  käytetty  +  ", jäljellä oleva kiintiö:"  +  jäljellä ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( käytetty )  { 
    console . log ( "Käytetty kiintiö:"  +  käytetty  +  ", jäljellä oleva kiintiö:"  +  jäljellä ); 
  } 
);

Web Workers

Lisää verkkosivun suorituskykyä:

var  worker  =  new  Worker ( 'task.js' ); 
työntekijä . onmessage  =  function ( tapahtuma )  {  hälytys ( tapahtuma . data );  }; 
työntekijä . postMessage ( 'data' ); 
tehtävä . js : 
itse . onmessage  =  function ( tapahtuma )  { 
  // Tee töitä. 
  itse . postMessage ( "recv'd:"  +  tapahtuma . data ); 
};

Web Socket

Kaksisuuntainen kaksisuuntainen viestintä verkon kautta: Sekä palvelin että asiakas voivat lähettää tietoja milloin tahansa tai jopa samanaikaisesti. Vain itse tiedot lähetetään ilman HTTP-otsikoiden lisäkustannuksia, mikä vähentää dramaattisesti kaistanleveyttä.

var  socket  =  uusi  WebSocket ( 'www.sito.it' ); 
pistorasia . onopen  =  toiminto ( tapahtuma )  { 
  socket . lähetä ( 'Hei' ); 
}; 
pistorasia . onmessage  =  function ( tapahtuma )  {  hälytys ( tapahtuma . data );  } 
pistorasia . onclose  =  function ( tapahtuma )  {  hälytys ( 'suljettu' );  }

Koko näytön verkkosivut 

if  ( elem . webkitRequestFullScreen ) { elem . webkitRequestFullScreen ( Element . ALLOW_KEYBOARD_INPUT ); } else if ( elem . mozRequestFullScreen ) { elem . mozRequestFullScreen (); } else if ( requestFullScreen element ) { elem . requestFullScreen (); } : koko näyttö - esi - isä : root { ylivuoto : piilotettu ; } : koko näyttö - esi - isä { z - indeksi : auto ; muunnos : ei mitään ; siirtyminen : ei mitään ; } pre : koko näyttö { taustaväri : valkoinen ; _ _ _ }

Uudet valitsimet (DOM API) 

var  el  =  asiakirja . getElementById ( 'osa1' ); 
el . tarkennus (); 
var  els  =  asiakirja . getElementsByTagName ( 'div' ); 
muut [ 0 ]. tarkennus (); 
var  els  =  asiakirja . getElementsByClassName ( 'osio' ); 
muut [ 0 ]. tarkennus (); 
var  els  =  asiakirja . querySelectorAll ( "ul li: n. lapsi (pariton)" ); 
var  tds  =  asiakirja . querySelectorAll ( "taulukko.testi> tr> td" ); 
var  el  =  asiakirja . querySelector ( "taulukko.testi> tr> td" );

Muokattavat attribuutit 

< div  id = "out"  data - id = "hyvä"  data - name = "joe"  data - screen - name = "user1" > < / div> 
var  el  =  asiakirja . querySelector ( '#out' ); 
el . setAttribute ( 'data-foo' ,  'bar' ); 
var  html  =  []; 
for  ( var  key  in  el . dataset )  { 
  html . push ( näppäin ,  ':' ,  el . tietojoukko [ avain ],  '<br>' ); 
} 
el . innerHTML  =  html . liity ( '' ); 
Tulos : 
id :  hyvä 
nimi :  joe 
screenName :  user1 
foo :  bar

Element.classList

Käyttö classListon vaihtoehto elementin luokkaluettelon käyttämiselle välilyönnillä eroteltuna merkkijonona element.className.

< div  id = "pää"  class = "varjo pyöristetty" > < / div> 
var  el  =  asiakirja . querySelector ( '#main' ). luokkalista ; 
el . add ( 'korosta' ); 
el . poistaa ( 'varjo' ); 
el . toggle ( 'korosta' );

konsoli . loki ( el . sisältää ( 'korosta' ));  // väärä 
konsoli . loki ( el . sisältää ( 'varjo' ));  // väärä 
konsoli . log ( el . classList . toString ()  ==  el . className ); 
// lähtö: 
< div  id = "main"  class = "pyöristetty" > < / div>

History API

Tarjoaa mahdollisuuden muuttaa verkkosivuston URL -osoitetta ilman koko sivun päivittämistä. Tästä on hyötyä, kun sivun osia ladataan JavaScriptillä siten, että sisältö eroaa huomattavasti ja takaa uuden URL-osoitteen.

linkki . addEventListener ( 'napsautus' ,  toiminto ( tapahtuma )  { 
  historia . pushState ( 'Yhteystiedot' ,  'Yhteystietosivu' ,  '/yhteys' ); 
}); 
ikkuna . addEventListener ( 'popstate' ,  funktio ( tapahtuma )  { 
  document . querySelector ( 'h1' ). innerHTML  =  tapahtuma . tila ; 
});

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( käytetty ,  jäljellä )  { 
    console . log ( "Käytetty kiintiö:"  +  käytetty  +  ", jäljellä oleva kiintiö:"  +  jäljellä ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( käytetty )  { 
    console . log ( "Käytetty kiintiö:"  +  käytetty  +  ", jäljellä oleva kiintiö:"  +  jäljellä ); 
  } 
);

JS 3D-verkossa

JavaScript sisältää kirjastoja ja kehyksiä 3D-verkkorajapintojen luomiseen [13] .

WebGL-esimerkki
WebGL-esimerkki
function  main ()  { 
  const  canvas  =  asiakirja . querySelector ( "#glCanvas" ); 
  const  gl  =  kangas . getContext ( "webgl" ); 
  if  ( gl  ===  null )  { 
    alert ( "Päivitä selaimesi" ); 
    paluu ; 
  } 
  gl . clearColor ( 0.0 ,  0.0 ,  0.0 ,  1.0 ); 
  gl . tyhjennä ( gl . COLOR_BUFFER_BIT ); 
} 
ikkuna . lataus  =  main ;

Vaihtoehdot

HTML 5 :n ja CSS 3 :n syntymän myötä joitain mahdollisuuksia, kuten [14] [15] [16] [17] [18] [19] [20] :

ne voidaan toteuttaa ilman JavaScriptin käyttöä, mikä oli usein mahdotonta HTML 4:n ja CSS 2:n kanssa [14] .

JavaScript-käyttöliittymän esimerkkejä

Muistiinpanot

  1. ^ ECMA-262, 13. painos , osoitteessa 262.ecma-international.org .
  2. ^ JavaScriptin lyhyt historia Auth0 - Blogissa . Haettu 28.2.2020 .
  3. ^ ECMA-262-standardi
  4. ^ David Flanagan, JavaScript - Opas , Milano, Apogeo, 2000, s.1, ISBN  88-7303-627-9 .
  5. ^ David Flanagan, JavaScript - opas , Milano, Apogeo, 2000, s. 53, ISBN  88-7303-627-9 .
  6. ^ David Flanagan, JavaScript - opas , Milano, Apogeo, 2000, ISBN  88-7303-627-9 .
  7. ^ Flex Quick Start - Tietomallien määrittely | Adobe Developer Connection osoitteessa adobe.com . Haettu 28.2.2020 .
  8. ^ Matt Neuburg , AppleScript: The Definitive Guide: Scripting and Automating Your Mac , "O'Reilly Media, Inc.", 4. tammikuuta 2006, ISBN  978-1-4493-7915-5 . Haettu 28.2.2020 .
  9. ^ slide osoitteessa github.com .
  10. ^ a b Ilmoitussovellusliittymän käyttäminen osoitteessa developer.mozilla.org . _ _ Haettu 23. kesäkuuta 2022 .
  11. ^ a b c d Notification.permission osoitteessa developer.mozilla.org . _ _ _ Haettu 23. kesäkuuta 2022 .
  12. ^ Ilmoitussovellusliittymä : requestPermission , osoitteessa caneuse.com . Haettu 23. kesäkuuta 2022 .
  13. ^ 20 Interaktiiviset 3D JavaScript -kirjastot ja -kehykset - Bashooka , osoitteessa bashooka.com , 30. toukokuuta 2019. Haettu 18. helmikuuta 2021 .
  14. ^ a b 5 asiaa, jotka voit tehdä CSS:llä JavaScriptin sijaan LogRocket Blogissa 29. lokakuuta 2019. Haettu 9. helmikuuta 2021 .
  15. ^ ( EN ) 49 CSS-galleriaa , ilmaisessa käyttöliittymässä . Haettu 9. helmikuuta 2021 .
  16. ^ LiveCode - HTML5 - Laskin - sovelluksen esittely osoitteessa livecode.com . Haettu 9. helmikuuta 2021 .
  17. ^ Andrea Pacchiarotti, Responsiivinen valikko HTML:ssä ja CSS:ssä ilman JavaScriptiä ja jQueryä , Andrea pacchiarotti . Haettu 9. helmikuuta 2021 .
  18. ^ Kuinka tehdä maagisia, animoituja työkaluvihjeitä CSS :n avulla Web Design Envato Tuts + -sovelluksessa . Haettu 9. helmikuuta 2021 .
  19. ^ HTML5: n vedä ja pudota -sovellusliittymää käyttämällä web.dev . Haettu 9. helmikuuta 2021 .
  20. ^ Tiedoston latauspainikkeen luominen osoitteessa w3schools.com . Haettu 9. helmikuuta 2021 .

Bibliografia

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Italia - 2002)
  • David Flanagan: JavaScript-versio 1.5 (Apogeo – 2002)
  • Emily A. Vander Veer: JavaScript (CD-ROM-levyllä) (Apogeo - 2001)
  • Roberto Abbate: JavaScriptin oppiminen (Master Editions - 2006)
  • Shelley Powers: Ohjelmointi JavaScriptillä (New Techniques – 2007)
  • Douglas Crockford: JavaScript - tekniikat parhaan koodin kirjoittamiseen (New Techniques - 2009)

Aiheeseen liittyvät tuotteet

Muut projektit

Ulkoiset linkit

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