close

JavaScript

Ugrás a navigációhoz Ugrás a kereséshez
JavaScript
programozási nyelv
Javascript-736400 960 720.png
SzerzőBrendan Eich
Származási dátum1995
Legújabb verzió1.8.5
ParadigmákEsemény és objektum programozás, funkcionális
Gépelésgyenge
Gyakori kiterjesztések.js
BefolyásoltaSéma , Self , Java , C , Python , Awk , HyperTalk
Ez befolyásoltaActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Referencia megvalósítás
VégrehajtásKJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Weboldaldeveloper.mozilla.org/it/docs/Web/JavaScript

A számítástechnikában a JavaScript egy eseményorientált többparadigmás programozási nyelv , amelyet gyakran használnak a kliens oldali webes programozásban (később a szerveroldalra is kiterjesztve ) interaktív dinamikus effektusok létrehozására webhelyeken és webes alkalmazásokban meghívott parancsfájl - függvényeken keresztül. események , amelyeket a felhasználó különféle módokon váltott ki a használt weboldalon ( egér , billentyűzet , oldalbetöltés stb.).

Eredetileg a Netscape Communications munkatársa, Brendan Eich fejlesztette ki Mochan néven, majd LiveScript néven , később „ JavaScript ” névre keresztelték, és a Sun Microsystems Java nyelvéhez ( amelyet 2010- ben szereztek be az Oracle -től) egy szintaxissal formálták . Az ECMA először 1997-ben szabványosította ECMAScript néven , a legújabb, 2022 júniusában kelt szabvány az ECMA-262 Edition 13 [1] , és egyben ISO szabvány is ( ISO / IEC 16262).

Leírás

A prezentációs logikában használt script-függvények kényelmesen beilleszthetők HTML - fájlokba , JSP - oldalakba vagy speciális, .js kiterjesztésű , különálló fájlokba, majd visszahívhatók az üzleti logikában . Felhasználási területét a közelmúltban kiterjesztették az úgynevezett hibrid alkalmazásokra (hibrid alkalmazások), amelyekkel több operációs rendszerre is lehet alkalmazásokat készíteni egyetlen forráskóddal JavaScript, HTML és CSS alapúak .

Java, JavaScript és JScript

A névváltoztatás LiveScriptről JavaScriptre körülbelül akkor történt, amikor a Netscape beépítette a Java technológia támogatását Netscape Navigator böngészőjébe . [2] A névválasztás nagy zűrzavar forrásának bizonyult. A Java és a JavaScript között nincs valódi kapcsolat; hasonlóságuk főleg a szintaxisban van (mindkét esetben a C nyelvből származik ); szemantikája meglehetősen eltérő, és különösen tárgymodelljeik nem kapcsolódnak egymáshoz és észrevehetően összeegyeztethetetlenek.

Tekintettel a JavaScript, mint a weboldalak gazdagítására szolgáló nyelv sikerére, a Microsoft kifejlesztett egy kompatibilis nyelvet, a JScriptet . A közös specifikációk szükségessége volt az ECMAScript ECMA 262 szabvány alapja, amelyből nyolc kiadás jelent meg a munka 1996. novemberi kezdete óta [3] .

Szerkezeti szempontok

A JavaScript főbb jellemzői a következők:

Egyéb érdekességek: Az ügyféloldali JavaScriptben a kód közvetlenül az ügyfélen fut , nem a szerveren . Ennek a megközelítésnek az az előnye, hogy még különösen összetett szkriptek jelenléte esetén sem fenyegeti a webszerver túlterhelését, mivel a munkát az ügyfél végzi. Hátránya, hogy különösen nagy szkriptek esetén a hálózatról történő átviteli idő túlságosan meghosszabbodhat. Továbbá minden olyan információt, amelyhez hozzá kell férni egy távoli adatbázisban tárolt adatokhoz, vissza kell küldeni egy olyan nyelvre, amely fizikailag végrehajtja a tranzakciót , hogy az eredményeket visszaadja egy vagy több JavaScript-változónak; az ilyen műveletekhez magának az oldalnak újbóli betöltése szükséges. Ezeket a korlátokat azonban az AJAX megszületésével nagyrészt átlépték .

Néhány további figyelemre méltó JavaScript funkció:

Inkompatibilitás

A JavaScript különféle implementációi, ahogyan a HTML esetében már megtörtént, gyakran nem felelnek meg a szabványoknak, hanem úgy vannak kialakítva, hogy egy adott webböngészővel és annak meghatározott verzióival működjenek. A jelenlegi ECMAScript -szabványnak elméletileg minden JavaScript-megvalósítás alapja kell, hogy legyen, de a gyakorlatban a Mozilla (és a Netscape ) böngészők JavaScriptet használnak , a Microsoft Internet Explorer a JScript -et, más böngészők, például az Opera és a Safari pedig más ECMAScript -megvalósításokat használnak , gyakran további nem szabványos funkciók, amelyek lehetővé teszik a JavaScript- és JScript- kompatibilitást .

A JavaScript és a JScript számos olyan funkciót tartalmaz, amelyek nem részei a hivatalos ECMAScript-szabványnak, és előfordulhat, hogy számos szolgáltatástól mentesek. Ennek során ezek részben inkompatibilisek, ami miatt a forgatókönyvíróknak ilyen problémákkal kell megküzdeniük szoftverek írásakor . A kettő közül a JavaScript inkább szabványkompatibilis: ez azt jelenti, hogy az ECMA szabványok szerint írt szkript a legtöbb böngészővel működik, különösen a legújabb verziókban.

Egy másik hatás az, hogy minden böngésző eltérően kezelheti ugyanazt a szkriptet, és ami az egyik böngészőben működik, az nem biztos, hogy működik a másikban vagy ugyanazon böngésző különböző verzióiban. A HTML-hez hasonlóan ezért ajánlott a szabványoknak megfelelő kódot írni. Természetesen az évek során különféle könyvtárak és keretrendszerek jöttek létre, amelyek segítségével leegyszerűsíthető a JavaScript kód írása, amely a használt böngészőtől függetlenül megfelelően működik. Az egyik legismertebb és legelterjedtebb könyvtár a HTML- vagy PHP-oldalakon belüli egyszerű szkriptek írásának leegyszerűsítésére a jQuery , miközben számos, akár rendkívül kifinomult (kliens- és/vagy szerveroldali) keretrendszer létezik az alkalmazások JavaScript-ben történő írására. annak felismerése, hogy a végfelhasználó melyik böngészőt fogja használni.

Ellenintézkedések

Két fő technika létezik az összeférhetetlenség kezelésére: a böngésző szippantása (szó szerint "a böngésző szippantása") és az objektumészlelés . Amikor csak két böngésző támogatta a szkriptet, nevezetesen a Netscape és az Internet Explorer, a böngésző szippantása volt a legnépszerűbb technika. Számos ügyféltulajdonság ellenőrzésével, amelyek platform-, böngésző- és verzióinformációkat adtak vissza, lehetővé vált, hogy a kód pontosan megállapítsa, melyik böngészőben fut. a későbbi szippantási technikák megvalósítása nehezebbé vált, mivel az Internet Explorer elkezdte álcázni az információit, például egyre pontatlanabb böngészőinformációk megadásával (a Microsoft indokait régóta vitatják). Később is a böngészők szaglászása bonyolult művészeti formává vált, amikor más script-böngészők is megjelentek a piacon, mindegyik saját platform-, kliens- és verzióinformációval.

Az objektumészlelés egy objektum tulajdonságának meglétének ellenőrzésén alapul. 

function  set_image_source ( imageName ,  imageURL ) 
{ 
  // Tesztelje, hogy a 'document' objektum rendelkezik-e 'images' tulajdonsággal 
  , ha  ( document . images ) 
  { 
    // csak akkor fut, ha létezik 'images' 
    dokumentumvektor . képek [  imageName  ]. src  =  képURL ; 
  } 
}

Egy összetettebb példa linkelt Boole -tesztek használatán alapul :

if  ( dokumentum . törzs  &&  dokumentum . törzs . stílus )

Ebben az esetben a "document.body.style" kifejezés általában hibát okoz egy olyan böngészőben, amely nem rendelkezik "document.body" tulajdonsággal, de az "&&" operátor használata biztosítja, hogy a "document.body.style " soha nem hívott if" document.body "nem létezik. A teszt kihasználja a logikai kifejezések értékelésének ezt a sajátosságát, amelyet lusta értékelésnek (szó szerint "lusta értékelés") neveznek.

Manapság a böngésző szippantása, az objektumészlelés és a szabványoknak való megfelelés, például az ECMAScript specifikáció és a CSS kombinációját használják különféle intézkedésekben annak biztosítására, hogy a felhasználó soha ne találkozzon JavaScript-hibával.

Használat

Más nyelvektől eltérően, mint például a C vagy C ++, amelyek teljesen önálló programok írását teszik lehetővé, a JavaScriptet főként szkriptnyelvként használják , integrálva , vagyis más kódon belül.

Az alapötlet az, hogy a gazdaprogram (a szkriptet üzemeltető és végrehajtó) egy jól definiált API -val látja el a szkriptet , amely lehetővé teszi a hozzáférést bizonyos műveletekhez, amelyek végrehajtása maga a gazdaprogram feladata . A parancsfájl végrehajtása során erre az API-ra hivatkozva kéri meg (a gazdaprogramot ), hogy olyan konkrét műveleteket hajtson végre, amelyeket maguk a JavaScript nyelvi konstrukciók nem szántak. Ezt a mechanizmust olyan nyelveken is alkalmazzák, mint például a C vagy a Java , amelyekben a program olyan könyvtárakra támaszkodik , amelyeket maga a nyelv nem biztosít, és amelyek lehetővé teszik olyan műveletek végrehajtását, mint az I / O vagy a függvényrendszerek hívásainak végrehajtása. .

A JavaScript-szkript gazdaprogramjának tipikus (és talán a legismertebb és leggyakoribb) példája a böngésző programja . A modern böngészők általában JavaScript értelmezőt tartalmaznak . Ha meglátogatunk egy JavaScript kódot tartalmazó weboldalt , azt a böngészőben található tolmács végrehajtja. Azokat a felületeket, amelyek lehetővé teszik, hogy a JavaScript kapcsolódjon egy böngészőhöz, DOM -nak ( olaszul Document Object Model ) hívják . Sok webhely kliensoldali JavaScript technológiát használ hatékony dinamikus webalkalmazások létrehozására .

A JavaScript fő felhasználási módja a webes környezetben a HTML oldalakba integrált kis függvények írása, amelyek interakcióba lépnek a böngésző DOM-mal, hogy olyan műveleteket hajtsanak végre, amelyek a statikus HTML -lel nem lehetségesek : ellenőrizze az értékeket a beviteli mezőkben, rejtse el vagy bizonyos elemek megjelenítése stb. Sajnos a W3C által előírt DOM-szabványokat nem mindig tartja tiszteletben mindenki következetesen és következetesen. A különböző böngészők, renderelő motorjuktól függően , különböző objektumokat vagy metódusokat tesznek ki a szkriptnek, ezért gyakran szükség van további vezérlők implementálására egy JavaScript-funkcióhoz, hogy biztosítsuk a kompatibilitást az egyes böngészőkkel, sőt, akár ugyanazon böngésző különböző verziói szerint is.

A weben kívül a JavaScript-tolmácsok számos alkalmazásba integrálva vannak. Az Adobe Acrobat és az Adobe Reader támogatja a JavaScriptet PDF - fájlokban . A Mozilla platform , amely számos népszerű webböngésző alapját képezi, JavaScriptet használ különféle termékei felhasználói felületének és tranzakciós logikájának megvalósításához. A JavaScript-értelmezések a szkriptelhető felületek nélküli, védett alkalmazásokba is be vannak építve. Végül a Microsoft Windows Script Host technológiája támogatja a JavaScriptet (a JScripten keresztül), amely egy szkriptnyelv az operációs rendszerek számára .

Ezen alkalmazások mindegyike saját objektummodellt biztosít, amely hozzáférést biztosít a gazdagéphez, és a JavaScript nyelv magja nagyrészt változatlan marad minden alkalmazásban. A JavaScript nyelv magjának számos megvalósítása létezik, többek között:

Használat HTML-ben

Script tag (HTML)

Ha szkriptet szeretne beszúrni egy HTML-oldalba, akkor a szkriptcímkét kell használnia . Ez a címke nem része magának a JavaScript nyelvnek, csak „tárolóként” szolgál egy HTML-oldalon belül. 

< script  type = "text / javascript" > 
// <! [CDATA [ 
JavaScript  utasítások ... 
//]]> 
</ script >

Egy dokumentumnak több részből állhat a script címke meghatározása. Ezen a címkén keresztül képviselheti a használt verziót, és böngészőtől függően megkaphatja a kód megfelelő részének értelmezését. A meghatározások a következők lehetnek: 

< script  type = "text / javascript" >  ...  </ script >
Példa: Hello világ!

A következő példa egy figyelmeztető üzenetet jelenít meg a „ Hello world ” felirattal. 

< script  type = "text / javascript" > 
   alert ( 'Hello world' ); 
< / script>

Közvetlen "írás" a HTML oldalra: 

< script  type = "text / javascript" > 
   dokumentum . write ( 'Hello world' ); 
< / script>

A JavaScript-forráskód MIME-típusaapplication/javascript , de a leggyakrabban használt text/javascript, bár nem szabványos.

Ha JavaScript kódot szeretne beágyazni egy HTML dokumentumba, előzze meg: 

< script  type = "text / javascript" >

és követi: 

</ script >

A régebbi böngészők általában a következő kóddal kezdődnek: 

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

és így végződik: 

  // ->
   </ script >

A megjegyzésjelzők <!--... -->azért szükségesek, hogy a kódot ne jelenítsék meg szövegként a nagyon régi böngészők, amelyek nem ismerik fel a címkét <script>a HTML dokumentumokban, míg a LANGUAGE egy HTML attribútum (ma már nem ajánlott), amely a régiektől kérhető. böngészők. Az XHTML / XML dokumentumokban a <script> címkék azonban nem működnek, ha megjegyzéseket fűznek hozzá, mivel az XHTML / XML szabványoknak megfelelő elemzők figyelmen kívül hagyják a megjegyzéseket --, és problémákba ütközhetnek a szimbólumokkal <és >a szkriptekkel (például összetévesztve őket a egész számok és összehasonlítás). Az XHTML dokumentumoknak ezután tartalmazniuk kell a szkripteket az XML CDATA részeként , előtaggal ellátva 

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

és követve őket 

  //]]>
   </ script >

(A sor elején lévő „//” szimbólumok egy JavaScript-megjegyzés kezdetét jelzik, hogy megakadályozzák <![CDATA[, ]]>hogy a szkript elemezze.)

A HTML [1] elemek tartalmazhatnak olyan belső eseményeket, amelyek egy szkript által meghatározott kezelőhöz társíthatók. Érvényes HTML 4.01 kód írásához a webszervernek egy "Content-Script-Type" értéket kell visszaadnia "text / JavaScript" értékkel. Ha a webszerver nem konfigurálható erre a célra, a weboldal készítője a következő utasítást helyezheti el a dokumentum fejléc részében 

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

Gyakori használat webböngészőben

A JavaScript a webböngésző kliensoldali parancsfájljainak minden aspektusához használható , de egyes felhasználási módok szélesebb körben elterjedtek, mint mások. Ilyen például a képek cseréje, a felugró ablakok létrehozása és az űrlapadatok érvényesítése . A legtöbb böngészőben az alábbi XHTML -kódrészlet megmutatja, hogyan lehet egy képet lecserélni egy másikra, amikor a felhasználó ráviszi a kurzort . Ezt az effektust gyakran áthúzásnak vagy egérmutatónak nevezik . Hasonló viselkedés azonban csak CSS használatával is elérhető . 

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

Leányvállalatok

A JavaScript használatának új példája a könyvjelzők , amelyek kis kódrészletek a könyvjelzőkben vagy a webböngészők kedvencei között. A Macromedia Flash -ben használt programozási nyelv (az úgynevezett ActionScript ) erősen hasonlít a JavaScript-re, az ECMAScripttel való közös kapcsolatuk miatt . Az ActionScript szintaxisa majdnem ugyanaz, mint a JavaScript, de az objektummodell [7] nagyon eltérő.

A JavaScript for OSA (JavaScript OSA vagy JSOSA) a Mozilla JavaScript 1.5 implementációján alapuló szkriptnyelv Macintoshhoz [8] . Ez egy ingyenes komponens, amelyet a Late Night Software tett elérhetővé . Az operációs rendszerrel és a harmadik féltől származó alkalmazásokkal való interakciót egy MacOS objektum kezeli . Ettől eltekintve a nyelv gyakorlatilag megegyezik a Mozilla implementációjával. Javasolták a gyakran használt AppleScript nyelv alternatívájaként .

Nyelvi elemek

Változók

A változók tipikusan dinamikusan vannak beírva, vagyis egyszerűen érték hozzárendelésével vagy a parancslet használatával definiálhatók ; a funkciókon kívül deklaráltak "globális" láthatóságban vannak, vagy elérhetők a teljes weboldalról ; a függvényen belül deklaráltak lokálisak vagy az adott függvényen belüliek. A változók oldalról oldalra történő átadásához a fejlesztő cookie -t állíthat be, vagy rejtett keretet vagy ablakot használhat a háttérben a tároláshoz.

Objektumok

A JavaScriptben minden primitív érték vagy objektum. Az objektumok egyediséggel rendelkező entitások (csak önmagukkal egyenlők), és tulajdonságneveket értékekkel társítanak. Ez azt jelenti, hogy egy objektum egy asszociatív vektor , amely hasonló a Perl és Ruby hash-eihez , vagy a Python , PostScript és Smalltalk szótáraihoz .

A JavaScript többféle előre definiált objektummal rendelkezik, nevezetesen tömb , logikai ( logikai ), dátum (dátumot és időt tartalmazó objektumok), függvény ( függvények ), matematikai (matematikai számításokban használt függvényeket tartalmazó objektum), szám (számok) , objektum ( objektumok ), RegExp ( reguláris kifejezések ) és String ( karakterláncok ). A többi objektum a "vendég objektumok", amelyeket nem a nyelv, hanem a végrehajtási környezet határoz meg. A böngészőben a tipikus gazdagép objektumok a DOM -hoz tartoznak : ablak ( ablak ), űrlap (maszk), hivatkozás ( link ) stb.

JSDOM.gif

A konstruktor meghatározásával objektumokat definiálhat. A JavaScript egy prototípus-alapú objektum-orientált nyelv. Ez azt jelenti, hogy az öröklődés az objektumok között történik, nem az osztályok között (a JavaScript-nek nincsenek osztályai). Az objektumok prototípusaik tulajdonságait öröklik.

További tulajdonságok vagy metódusok adhatók hozzá az egyes objektumokhoz azok létrehozása után. Ehhez az egyetlen konstruktor által létrehozott összes példány esetében használhatja a prototypekonstruktor tulajdonságot a prototípus objektum eléréséhez.

Példa: Objektum létrehozása 

// konstruktor 
függvény  MyObject ( attribútumA ,  attribútumB ) 
{ 
  this . attribútumA  =  attribútumA 
  ez . attribútumB  =  attribútumB 
}
 
// objektum létrehozása 
obj  =  new  MyObject ( 'piros' ,  1000 )
 
// hozzáférés az obj 
alert attribútumához ( obj . attribútumA )
 
// hozzáférés egy attribútumhoz az asszociatív vektorfigyelmeztetés jelölésével 
( obj [ " attributeA" ])

Az öröklődés szimulálása

Az objektumok hierarchiája a JavaScriptben emulálható. Például: 

function  Base () 
{ 
  this . Felülbírálás  =  _Felülbírálás ; 
  ezt . BaseFunction  =  _BaseFunction ;
 
  function  _Override () 
  { 
    alert ( "Base :: Override ()" ); 
  }

  function  _BaseFunction () 
  { 
    alert ( "Base :: BaseFunction ()" ); 
  } 
}
 
function  Derive () 
{ 
   this . Felülbírálás  =  _Felülbírálás ; 
   function  _Override () 
   { 
     alert ( "Derive :: Override ()" ); 
   } 
}

Drift . prototípus  =  new  Base ();
 
d  =  új  származék (); 
d . Felülbírálás (); 
d . BaseFunction ();

a következő kimenetet eredményezi: 

Levezetés :: Felülbírálás ()
Alap :: BaseFunction ()

Előre meghatározott objektumok

Amellett, hogy lehetővé teszi az objektumok meghatározását, a JavaScript számos objektumot biztosít, amelyek használhatók a szkriptekhez:

Array

A tömb egész számok és tetszőleges típusú értékek közötti asszociáció. A JavaScriptben minden objektum társíthat egész számokat és értékeket, de a tömbök az objektumok speciális típusai, amelyek sajátos viselkedéssel és speciális módszerekkel rendelkeznek az egész indexek használatára (pl.,, joinés slice) push.

A tömbök olyan tulajdonsággal rendelkeznek length, amely garantáltan mindig nagyobb, mint a vektorban használt legnagyobb index. A rendszer automatikusan frissíti, ha még nagyobb indexű tulajdonságot hoz létre. Ha kisebb számot ír be a tulajdonságba, lengthakkor a nagyobb indexek törlődnek. Ez a tulajdonság a vektorok egyetlen különleges tulajdonsága, amely megkülönbözteti őket a többi objektumtól.

A tömbelemekkel normál jelölést használhat az objektumtulajdonságok eléréséhez: 

  myArray[1]
  myArray["1"]

Ez a két jelölés egyenértékű. Nem használhat pontjelölést vagy karakterláncokat a szám alternatív ábrázolásával: 

  myArray.1(szintaktikai hiba)
   myArray(1)(helytelen szintaxis, csak az Internet Explorer által engedélyezett)
   myArray["01"](nem ugyanaz, mint myArray[1])

Egy vektor deklarációja használhat explicit jelölést vagy a konstruktort Array: 

 myArray = [0,1,,,4,5];(6 hosszúságú, 4 elemű
  myArray = new Array(0,1,2,3,4,5);vektor) (6 és 6 elemű vektor)
  myArray = new Array(365);(365 hosszúságú üres vektor)

A tömbök úgy vannak megvalósítva , hogy csak meghatározott elemek használnak memóriát; ezek "szórt vektorok". Csak ehhez a két elemhez állítson be myArray[10] = 'qualcosa'és használjon helyet, mint bármely más objektumnál. myArray[57] = 'qualcosaltro'A tömb hossza mindig 58 lesz.

Vezérlőszerkezetek és feltételes feltételek

if ... else

Az IF vezérlési struktúra olaszul SE-nek felel meg

A kapcsos zárójelben lévő utasítás csak és csak akkor kerül végrehajtásra, ha a feltétel kiértékelése igaz, ellenkező esetben az ELSE-ben lévő utasítás kerül végrehajtásra. 

  ha (feltétel)
  {
     utasítás;
  }

  ha (feltétel)
  {
     utasítás;
  }
  más
  {
     utasítás;
  }

While ciklus 

  míg (feltétel)
  {
     utasítás;
  }

Csináld... while ciklus 

  csináld
  {
     utasítás;
  } while (feltétel);

For ciklus 

  for ([kezdeti kifejezés]; [feltétel]; [kifejezés növelése])
  {
     utasítás;
  }

A ciklushoz ... in

Ez a hurok átmegy egy objektum (vagy egy vektor eleme) összes tulajdonságán. 

  for (változó az objektumban)
  {
     utasítás;
  }

For ... of loop

Ez a hurok egy objektum (vagy egy vektor eleme) összes értékén fut keresztül. 

  for ( objektum változója )
  {
     utasítás;
  }

Switch utasítás 

  kapcsoló (kifejezés)
  {
     esetérték1 :
        utasítás;
        szünet ;
     esetérték2 :
        utasítás;
        szünet ;
     alapértelmezett  :
        utasítás;
  }

Funkciók

A függvény egy utasításblokk , argumentumlistával (esetleg üres), és amelynek lehet neve (bár ez nem szükséges). Egy függvény a return utasításon keresztül adhat vissza értéket . 

  funkció (lehet üres is)
  {
     utasítás;
     visszatérési kifejezés;
  }

A függvény meghívásakor átadott argumentumok számának nem feltétlenül kell egyenlőnek lennie a függvénydefiníció argumentumainak számával (vagyis a formális paraméterek számát nem feltétlenül kell figyelembe venni a függvény meghívásakor, azaz a az aktuális paraméterek specifikációja ). A függvényen belül az argumentumok listájára is hivatkozhatunk a vektor segítségével arguments(ez utóbbi rendelkezik calleemagára a függvényre mutató mutató tulajdonsággal).

Minden függvény a Function egy példánya , amely egy alapvető objektumtípus. A függvények létrehozhatók és hozzárendelhetők, mint bármely más objektum: 

   var myFunc1 = new Function ("figyelmeztetés ('Hello')");
   var myFunc2 = myFunc1;
   myFunc2 ();

kimenetként állítja elő: 

   Szia

Interakció a felhasználóval

Az egyéb technikák között, amelyekkel a JavaScript-szkript kölcsönhatásba léphet a felhasználóval egy weboldalon belül, a következők:

  • HTML űrlapelemek , szerkeszthetők a HTML DOM elérésével;
  • Figyelmeztetés párbeszédpanel
  • Megerősítő párbeszédpanel
  • Prompt párbeszédpanel
  • Böngésző állapotsora
  • Normál kimenet ("konzol")

Megjegyzés: a párbeszédpanelek nem működnek az Opera böngészővel; nincs hiba, csak nem hajtják végre.

Videóírási módszerek (standard kimenet)

A képernyőre (azaz arra az oldalra, ahol a szkript található) írhatunk a document.write () metódussal; a megjelenítendő karakterláncok a '+' összefűzési operátorral fűzhetők össze: 

< html > 
< fej > 
< script  type = "text / javascript" > 
<!  - Szkript elrejtése  az elavult böngészők elől    

// Ez a függvény a kiválasztott szélességű vízszintes vonalat hoz létre. 
függvénysor  ( widthPct ) { document . _ write ( "<hr align = 'left' width = '" + widthPct + "%' />" ); }

      


// Ez a függvény szöveget generál, amelyet egy adott szintű cím előz meg. 
függvény  kimenete ( fejszint ,  fejszöveg ,  szöveg ) 
{ 
  dokumentum . write ( "<h"  +  headLevel  +  ">"  +  headText  +  "</ h"  +  headLevel  +  "> <p>"  +  szöveg  +  "</p>" ); 
}

// Elrejtendő kód vége -> 
< / script> 
< / head> 
< body > 
< script  type = "text / javascript" > 
<! -  Szkript elrejtése  az elavult böngészők elől    

bar ( 25 ) 
kimenet ( 2 ,  "JavaScript szabályok!" ,  "A JavaScript használata egyszerű..." )

// Elrejteni kívánt kód vége -> 
< / script>

< p > Ez  egy  normál  HTML ,  ellentétben  a fenti kód által generáltal  . _ _ < /p>     

< / body> 
< / html>

Események

A szöveges elemek különféle események forrásai lehetnek, amelyek műveletet indíthatnak el, ha ECMAScript eseménykezelőt regisztráltak . A HTML-ben ezek az eseménykezelők gyakran közvetlenül a HTML-címkén belül anonimként definiált függvények. A szkriptben lévő esemény meghívásának szintaxisa a következő: 

Tárgy . esemény  =  kezelő ;

Az eseményeknek több kategóriája van:

  1. Az egérgombokkal aktiválható események
  2. Egérmozdulatokkal aktiválható események
  3. Az egér húzásával aktiválható események (fogd és vidd)
  4. A felhasználó által a billentyűzettel aktiválható események
  5. Felhasználói módosításokkal aktiválható események
  6. A "tűzhöz" kapcsolódó események
  7. Objektumok betöltésével aktiválható események
  8. Az ablakmozgással aktiválható események
  9. Egyes gombokhoz kapcsolódó események
  10. Egyéb és új típusú rendezvények

Az egérgombokkal aktiválható események

Események listája:

  1. onClick : akkor aktiválódik, amikor egy objektumra kattintunk;
  2. onDblClick : dupla kattintással aktiválható;
  3. onMouseDown : az egér bal gombjának lenyomásakor aktiválódik;
  4. onMouseUp : akkor aktiválódik, amikor felemeli az előzőleg lenyomott bal egérgombot;
  5. onContextMenu : akkor aktiválódik, ha a jobb egérgombbal kattintunk a ContextMenu megnyitásakor.

A dupla kattintás egy olyan esemény, amely magába foglalja a többit, és hogy pontos legyek, egymás után aktiválódik onmousedown, onmouseup, onclick.

Alkalmazáscímke

A, CÍM, APPLET, TERÜLET, B, BDO, BIG, BLOCK QUOTE, BODY, GOMB, FELIRAT, KÖZÉP, CITE, KÓD, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = gomb, INPUT type = checkbox, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = rádió, INPUT type = reset, INPUT type = elküldés, INPUT type = szöveg , 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

Egérmozdulatokkal aktiválható események

Események listája:

  1. onMouseOver : akkor aktiválódik, amikor az egeret egy objektum fölé viszi;
  2. onMouseOut : akkor aktiválódik, amikor az egér elmozdul egy objektumról;
  3. onMouseMove : mozgatja az egérmutatót, de mivel ez az esemény gyakran előfordul (gyakori az egér használata), alapból nem elérhető, hanem csak eseményrögzítéssel kombinálva, amiről később lesz szó.
Alkalmazáscímke

A, CÍM, APPLET, TERÜLET, B, BDO, BIG, BLOCK QUOTE, BODY, GOMB, FELIRAT, KÖZÉP, CITE, KÓD, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = gomb, INPUT type = checkbox, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = rádió, INPUT type = reset, INPUT type = elküldés, INPUT type = szöveg , 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

Az egér húzásával aktiválható események (drag and drop)

Események listája:

  1. onDragDrop : esemény akkor indul el, amikor a felhasználó áthúz egy objektumot a böngészőablakban, vagy ha egy fájlt ejt rá;
  2. onMove : akkor aktiválódik, amikor egy objektum mozgat egy ablakot vagy egy keretet;
  3. onDragStart : esemény aktiválódik, amint a felhasználó elkezdi húzni egy objektumot;
  4. onDrag : akkor aktiválódik, amikor az egér egy objektumot vagy szöveget ugyanannak a böngészőnek az ablakába, vagy akár egy másikba, vagy akár az Asztalra húz;
  5. onDragEnter : aktiválódik, amint a felhasználó egy objektumot ugyanannak vagy egy másik böngészőnek egy érvényes célpontjára húz;
  6. onDragOver : akkor aktiválódik, amikor a felhasználó egy objektumot egy érvényes célpontra húz, hogy tárolja azt, és hasonló az előző eseményhez, de azután aktiválódik;
  7. onDragLeave : akkor aktiválódik, amikor a felhasználó ráhúz egy objektumot a tárolására alkalmas célpontra, de nem szabadul fel;
  8. onDragEnd : akkor aktiválódik, amikor a felhasználó eldobja az objektumot a húzás befejezése után.
  9. onDrop : akkor aktiválódik, amikor az egér felemeli az egérgombot egy húzási művelet után;
Alkalmazáscímke

A, CÍM, APPLET, TERÜLET, B, BDO, BIG, BLOCK QUOTE, BODY, GOMB, FELIRAT, KÖZÉP, CITE, KÓD, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = gomb, INPUT type = checkbox, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = rádió, INPUT type = reset, INPUT type = elküldés, INPUT type = szöveg , 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

A felhasználó által a billentyűzettel aktiválható események

Események listája:

  1. onKeyPress : esemény akkor indul el, amikor a felhasználó megnyom és elenged egy billentyűt, vagy akár lenyomva tartja;
  2. onKeyDown : a gomb lenyomásakor aktiválódik;
  3. onKeyUp : esemény, amely akkor aktiválódik, amikor a lenyomott billentyűt felengedik;
  4. onHelp : akkor aktiválódik, amikor a felhasználó megnyomja az F1 billentyűt;

Felhasználói módosítások által kiváltható események

onChange

Akkor aktiválódik, ha egy űrlap vagy űrlapmező tartalma megváltozik, vagy már nincs kiválasztva. FileUpload, Select, Text, TextArea objektumokkal is használható.

Példa: 

< input  type = "text"  value = "E-mail cím megadása"  name = "userEmail" onChange  = validateInput ( this . value ) /  > 
< script  type = "text / javascript" > 
  this . myForm . userEmail . fókusz (); 
  ezt . myForm . userEmail . válassz ();
 
  function  validateInput () 
  { 
    userInput  =  new  String (); 
    userInput  =  ez . myForm . userEmail . érték ; 
    if  ( userInput . match ( "@" )) 
      alert ( "Köszönjük érdeklődését." ); 
    else 
      alert ( "Elküldés előtt ellenőrizze e-mail adatai helyességét" ); 
  } 
< / script>
onCellChange

Aktiválódik, amikor egy adatbázis elemet módosítanak, ehhez a tulajdonsághoz van olyan felhasználása, amely nem kapcsolódik szorosan a JavaScripthez;

onPropertyChange

Az esemény akkor indul el, amikor egy elem tulajdonjoga megváltozik;

onReadyStateChange

Egy elem betöltési állapotának megváltozásakor aktiválódó esemény, az esemény hasznos például annak ellenőrzésére, hogy egy elem betöltődött-e.

Alkalmazáscímke

A, CÍM, APPLET, TERÜLET, B, BDO, BIG, BLOCK QUOTE, BODY, GOMB, FELIRAT, KÖZÉP, CITE, KÓD, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = gomb, INPUT type = checkbox, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = rádió, INPUT type = reset, INPUT type = elküldés, INPUT type = szöveg , 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

A "tűzhöz" kapcsolódó események

onFocus

Ez a kezelő az onBlur ellentéte, tehát akkor aktiválódik, amikor a felhasználó belép egy mezőbe;

onBlur

Akkor aktiválódik, amikor az egérmutató vagy a kurzor az egér vagy a TAB karakter használatával kilép az aktuális ablakból. Modulokra alkalmazva azonban ez a kezelő elindul, ha kilép abból a mezőből, amelynek címkéje a vezérlőt tartalmazza;

Példa 

Írja be az e-  mail  címet  < input  type = "text"  value = ""  name = "userEmail"  onBlur = addCheck () > 
< script  type = "text / javascript" > 
function  addCheck () 
{ 
  alert ( "Kérjük, ellenőrizze az e-mail adatait elküldése előtt " ) 
} 
< / script>
onSelect

Aktiválható, ha egy szövegdobozban szöveget jelöl ki akár az egérrel, akár a SHIFT lenyomva tartásával és a nyílbillentyűkkel történő kiválasztással;

onSelectStart

Akkor aktiválódik, amikor elkezd kiválasztani egy eseményt;

onbeforeEditFocus

Ez egy dupla kattintással vagy egy olyan objektumra való kattintással aktiválható, amely már rendelkezik a kijelöléssel, ha ez DesignMode-ban van;

onLoseCapture

Akkor aktiválódik, ha egy objektum elveszíti az egérrögzítést.

Alkalmazáscímke

A, CÍM, APPLET, TERÜLET, B, BDO, BIG, BLOCK QUOTE, BODY, GOMB, FELIRAT, KÖZÉP, CITE, KÓD, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = gomb, INPUT type = checkbox, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = rádió, INPUT type = reset, INPUT type = elküldés, INPUT type = szöveg , 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

Objektumok betöltésével aktiválható események

onLoad

Ez a kezelő objektumok, főleg ablakok és képek betöltésében működik;

onUnload

Ellentéte az előzőnek, és akkor működik, ha elhagysz egy ablakot egy másik betöltéséhez, vagy akár ugyanannak az újratöltéséhez (a frissítés gombbal);

onAbort

Az onAbort esemény kezelője lehetővé teszi bizonyos kód megadását arra az esetre, ha a felhasználó blokkolja egy objektum betöltését, vagy blokkolja egy kép betöltését.

Ez a kezelő a következő eseménytulajdonságokat használja.

Példa 

  < img  name =  "myPic"  SRC =  "images / myPic.gif"  onAbort =  "figyelmeztetés ('A kép betöltése megszakadt!')" >
onError

Akkor aktiválódik, ha egy objektum betöltése hibát okoz, de csak akkor, ha ez a kód szintaktikai hibája és nem a böngésző hibája miatt működik, így az oldal képének hibás hivatkozásán működik, de nem teljes oldal betöltő linkje. Az Opera nem kezeli ezt az eseményt, ami mára már elavult: a try ... catch konstrukciót a helyes hibakezeléshez használják;

onBeforeUnload

Ez a kezelő ugyanúgy működik, mint az onUnload, de egy pillanattal előtte tölt be;

onStop

Ez a kezelő akkor működik, ha leállítja az oldal betöltését a böngésző stop gombjával, és ugyanúgy kell működnie, mint az onUnload betöltés előtt, de az onBeforeUnload után.

Alkalmazáscímke
  1. onLoad Ezt a kezelőt a <BODY> és <FRAMESET> címkékkel, a JavaScript 1.1-et pedig az <IMG> címkékkel használja, míg az Intézőben a <SCRIPT>, <LINK>, <EMBED>, <APPLET> címkék hozzáadása is szükséges . A JavaScript 1.2-ben a <LAYER> címke a Netscape-ben is hozzáadásra kerül.
  2. onUnload Ez a kezelő a <BODY> és <FRAMESET> címkékkel együtt használatos az Internet Explorerben is.
  3. onAbort Ez a kezelő csak az <IMG> címkével használható az Internet Explorerben is.
  4. onError Ez a kezelő csak az <IMG> címkével és az ablakkal használható, míg az Internet Explorerben az <OBJECT> és a <STYLE> funkcióval is.
  5. onBeforeUnload Ez a kezelő a <BODY> címkékkel együtt használatos az Internet Explorerben is.
  6. onStop Ez a kezelő a <BODY> címkékkel együtt használatos az Internet Explorerben is.

Ablakmozgással aktiválható események

Események listája:

  1. onResize: Ez a kezelő akkor aktiválódik, amikor a felhasználó kicsinyít vagy maximalizál egy ablakot vagy keretet, vagy különösen az Intéző esetében egy objektumot, amelynek magassága és szélessége, vagy akár pozíciója rögzített, például egy réteg;
  2. onScroll: akkor aktiválódik, amikor az oldalt görgeti akár az egérrel a PGUP és a PGDOWN gombokkal, akár a doScroll módszerrel.
Alkalmazáscímke

A, CÍM, APPLET, B, BIG, BLOCKQUOTE, GOMB, KÖZÉP, CITE, KÓD, egyéni, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, Hn, HR, I, IMG, INPUT type = gomb, INPUT type = file, INPUT type = image, INPUT type = jelszó, INPUT type = reset, INPUT type = send, INPUT type = text, 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, ablak, XMP

Egyes gombokhoz kapcsolódó események

  1. onSubmit: Ez a kezelő az űrlapon található Submit gombra kattintva aktiválható;
  2. onReset: ez a kezelő egy űrlap Mégse gombjára kattintva aktiválható.
Alkalmazáscímke

A kezelő csak a Form objektumra vonatkozik.

Hibakezelés

A JavaScript újabb verziói (az Internet Explorer 5-től és a Netscape 6-tól kezdve) tartalmazzák a hibakezelésitry... catch konstrukció lehetőségét .

A konstrukció try ... catch ... finallyelkapja a hiba vagy utasítás által kiváltott kivételeketthrow . A szintaxisa a következő: 

try  { 
   // Utasítások, ahol kivételeket lehet dobni 
}  catch  ( hiba )  { 
   // Kivétel esetén végrehajtandó utasítások 
}  végül  { 
   // Utasítások, amelyeket később kell végrehajtani mindkét esetben 
}

Kezdetben a blokkon belüli utasítások végrehajtásra kerülnek try. Kivétel esetén a szkript vezérlőfolyama azonnal átkerül a catch blokk utasításoknak, és a kivétel argumentumként elérhetővé válik error. Ellenkező esetben a blokk catchkimarad. Ha a blokk catchbefejeződött, vagy a blokk trya végéig végrehajtásra kerül, kivétel nélkül, a blokkban lévő utasítások végrehajtásra kerülnek finally.

Integráció HTML5-tel

A HTML5 megszületésével a JavaScript számos újítást szerzett [9] :

Beszédfelismerés

A felhasználó írás helyett beszélhet egy űrlapon belül:

< input  type = "text"  x - webkit - beszéd  /> 
var  felismerés  =  new  SpeechRecognition (); 
var  voiceRecognitionList  =  new  SpeechGrammarList ();

Rendszerértesítések

Image
A weboldal más típusú grafikákat is tartalmazhat, például ezeket. Ezek nem rendszerértesítések.

A rendszerértesítések célja, hogy felhívják a felhasználó figyelmét, rövid üzenetet jelenítsenek meg az aktuális oldalon kívül, vagy akkor is, ha a böngésző éppen nincs előtérben. Tekintettel potenciális invazivitásukra, használatuk csak akkor lehetséges, ha az oldal már megkapta a felhasználó külön hozzájárulását. [10] [11]

A rendszerértesítések, amint a neve is sugallja, következetesen integrálva vannak az aktuális eszközzel (asztali számítógépen gyakran előugró ablak , mobilon gyakran az értesítési sávban stb.). [11] [10]

Az alábbiakban egy minimális példa látható két gombbal, a rendszerértesítések engedélyeinek kérésére és az egyik megjelenítésére. 

< button  id = "btn-asking" > Engedélyek kérése </ button > 
< button  id = "btn-notify" > Értesítés megjelenítése </ button >

< script > 
// gomb keresése 
var  btnAsking  =  document . getElementById (  'btn-asking'  ); 
var  btnNotify  =  dokumentum . getElementById (  'btn-notify'  );

// a kattintás után elindítja a 
btnAsking engedélyek kérését . addEventListener (  'kattintás' ,  function ()  { 
    Notification . requestPermission (); 
}  );

// a kattintás után megjelenik egy 
btnNotify értesítés . addEventListener (  'kattintás' ,  function ()  { 
    new  Notification (  "Új értesítés!"  ); 
}  ); 
</ script >

A hivatalos dokumentáció elmélyítése további jó gyakorlatok megvalósítását teszi lehetővé, többek között:

  • a támogatás ellenőrzése (például az iOS Safari arról híres, hogy nem ér el nagy támogatást) [12] [11]
  • a korábbi hozzájárulás tiszteletben tartása (kerülje a többszöri beleegyezési kérést)
  • az ellenvélemény tiszteletben tartása (beleegyezés hiányában kerülje az értesítések megnyitásának kísérletét)

Az engedélykérés elindítása csak a felhasználóval való interakciót (például egy gombnyomást) követően történhet meg. Sok modern böngésző még a beleegyezési kérés előugró ablakának megnyitását is tiltja a natív értesítésekhez, ha nem történt interakció. [11]

Szerkeszthető tartalom

Lehetőség a felhasználó számára, hogy úgy módosítsa a weboldalt, mintha egy WYSIWYG szerkesztőben lenne, még akkor is, ha a változtatások nem kerülnek mentésre a valódi távoli weboldalon, hanem csak a felhasználó böngészőjében láthatók:

< div  contenteditable = "true " > 
Ezt  a szöveget  a  felhasználó szerkesztheti  . < / div> dokumentum . execCommand ( "defaultParagraphSeparator" , false , "p" );

Húzza ki

Húzza át a fájlokat egy weboldalról számítógépére vagy más eszközére:

<a href =  "src / star.mp3" draggable = "true" class = "dragout" data - downloadurl = "MIMETÍPUS: FÁJLNÉV: ABSOLUTE_URI_TO_FILE"> letöltés < / a > var files = document . querySelectorAll ( '.dragout' ); for ( var i = 0 , fájl ; fájl = fájlok [ i ] ; ++ i ) { fájl . addEventListener ( ' dragstart ' , function ( e ) { e . dataTransfer . setData ( 'DownloadURL' , this . dataset . downloadurl ); }, false ); }

Fájlrendszer API

Írjon aszinkron fájlt egy sandbox fájlrendszerbe JavaScript használatával:

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

    fileEntry . createWriter ( function ( writer )  {  .

        író . onwrite  =  függvény ( e )  {  ...  }; 
        író . hiba  =  függvény ( e )  {  ...  };

        var  bb  =  új  BlobBuilder (); 
        bb . append ( 'Hello World!' );

        író . write ( bb.getBlob ( ' text / plain' ));

    },  opt_errorHandler ); 
  } 
},  opt_errorHandler );

Geolocation

Lehetőség, hogy a felhasználó bejelentse pozícióját egy alkalmazásban vagy egy weboldalon:

if  ( navigátor . földrajzi helymeghatározás )  { 
  navigátor . földrajzi helymeghatározás . getCurrentPosition ( function ( pozíció )  { 
    var  latLng  =  új  google . térképek . LatLng ( 
        pozíció . koordináták . szélesség ,  pozíció . koordináták . hosszúság ); var marker = új google . térképek . Marker ( { pozíció : latLng , térkép : térkép } ) térkép . setCenter ( latLng ); } , errorHandler ); }

Eszköz orientáció

Jelenítse meg azokat az adatokat, amelyek jelzik az eszköz orientációjának változását a gravitáció vonzásához képest. Különösen a hordozható eszközök, például a mobiltelefonok használhatják ezeket az információkat a kijelző automatikus elforgatására, hogy függőlegesen maradjanak, és teljes képernyős nézetben jelenítsék meg a webes tartalmat, amikor az eszközt elforgatják úgy, hogy a szélessége nagyobb, mint az őfelsége.

ablak . addEventListener ( 'eszköz orientáció' ,  függvény ( esemény )  { 
  var  a  =  esemény . alfa ; 
  var  b  =  esemény . béta ; 
  var  g  =  esemény . gamma ; 
},  false );

Helyi tárhely, alkalmazás-gyorsítótár és kvóta API

A korábban megtekintett weboldalak böngészése internetkapcsolat nélkül is:

mentés gomb . addEventListener ( 'click' ,  function  ()  { 
  window . localStorage . setItem ( 'érték' ,  terület . érték ); 
  window . localStorage . setItem ( 'timestamp' ,  ( new  Date ())) getTime ()); 
},  false ); 
textarea . érték  =  ablak . localStorage . getItem ( 'érték' );

< html  manifest = "cache.appcache" > 
ablak . ApplicationCache . addEventListener ( 'updateready' ,  function ( e )  { 
  if  ( window . applicationCache . status  ==  window . applicationCache . UPDATEREADY )  { 
    window . applicationCache . swapCache (); 
    if  ( megerősítés ( 'A webhely új verziója elérhető. Betöltés it? ' ))  { 
      window . location . reload (); 
    } 
  } 
},  false );

Web SQL Database

SQL -be ​​integrált új funkciók :

var  db  =  ablak . openDatabase ( "DBName" ,  "1.0" ,  "leírás" ,  5 * 1024 * 1024 );  // 5 MB 
db . tranzakció ( function ( tx )  { 
  tx . executeSql ( "SELECT * FROM test" ,  [],  sikerCallback ,  errorCallback ); 
});

Indexelt DB

Ez az API indexeket használ az adatok nagy teljesítményű keresésének lehetővé tételére. Míg a webes tárolás hasznos kisebb adatmennyiség tárolására, kevésbé hasznos nagyobb mennyiségű strukturált adatok tárolására. Az IndexedDB megoldást kínál.

var  idbRequest  =  ablak . indexedDB . open ( 'Adatbázis neve' ); 
idbRequest . onsuccess  =  függvény ( esemény )  { 
  var  db  =  esemény . srcElement . eredmény ; 
  var  tranzakció  =  db . tranzakció ([],  IDBTransaction . READ_ONLY ); 
  var  curRequest  =  tranzakció . objectStore ( 'ObjectStore neve' ). openCursor (); 
  curRequest . siker  =  ...; 
};

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( használt ,  fennmaradó )  { 
    console . log ( "Felhasznált kvóta:"  +  használt  +  ", fennmaradó kvóta:"  +  fennmaradó ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( use ) { console . log ( " Felhasznált kvóta:" + használt + ", fennmaradó kvóta:" + fennmaradó ); } );

Webmunkások

Növelje a weboldal teljesítményét:

var  worker  =  new  Worker ( 'task.js' ); 
munkás . onmessage  =  function ( esemény )  {  alert ( esemény . adat );  }; 
munkás . postMessage ( 'data' ); 
feladat . js : 
self . onmessage  =  function ( esemény )  { 
  // Dolgozz egy kicsit. 
  önmaga . postMessage ( "recv'd:"  +  esemény . adat ); 
};

Web Socket

Kétirányú full-duplex kommunikáció az interneten keresztül: A szerver és a kliens is bármikor vagy akár egyszerre is küldhet adatokat. Csak maguk az adatok kerülnek elküldésre, a HTTP-fejlécek túlterhelése nélkül, ami drámaian csökkenti a sávszélességet.

var  socket  =  new  WebSocket ( 'www.sito.it' ); 
aljzat . onopen  =  function ( esemény )  { 
  socket . küld ( 'Hello' ); 
}; 
aljzat . onmessage  =  function ( esemény )  {  alert ( esemény . adat );  } 
aljzat . onclose  =  function ( esemény )  {  alert ( 'zárt' );  }

Teljes képernyős weboldalak 

if  ( elem . webkitRequestFullScreen ) { elem . webkitRequestFullScreen ( Elem . ALLOW_KEYBOARD_INPUT ); } else if ( elem . mozRequestFullScreen ) { elem . mozRequestFullScreen (); } else if ( requestFullScreen elem ) { elem . requestFullScreen (); } : teljes képernyő -- őse : root { túlcsordulás : rejtett ; _ } : teljes képernyő - ős { z - index : auto ; _ transzformáció : nincs ; átmenet : nincs ; } pre : teljes képernyő { háttérszín : fehér ; _ _ _ }

Új szelektorok (DOM API) 

var  el  =  dokumentum . getElementById ( 'szakasz1' ); 
el . fókusz (); 
var  els  =  dokumentum . getElementsByTagName ( 'div' ); 
els [ 0 ]. fókusz (); 
var  els  =  dokumentum . getElementsByClassName ( 'szakasz' ); 
els [ 0 ]. fókusz (); 
var  els  =  dokumentum . querySelectorAll ( "ul li: n-edik gyermek (páratlan)" ); 
var  tds  =  dokumentum . querySelectorAll ( "tábla.teszt> tr> td" ); 
var  el  =  dokumentum . querySelector ( "tábla.teszt> tr> td" );

Testreszabható attribútumok 

< div  id = "out"  data - id = "jó"  data - name = "joe"  data - screen - name = "user1" > < / div> 
var  el  =  dokumentum . querySelector ( '#out' ); 
el . setAttribute ( 'data-foo' ,  'bar' ); 
var  html  =  []; 
for  ( var  key  in  el . dataset )  { 
  html . push ( kulcs ,  ':' ,  el . adathalmaz [ kulcs ],  '<br>' ); 
} 
el . innerHTML  =  html . csatlakozás ( '' ); 
Kimenet : 
id :  jó 
név :  joe 
screenName :  user1 
foo :  bar

Element.classList

A használat classListegy alternatíva egy elem osztálylistájának szóközzel elválasztott karakterláncként való elérésére a következőn keresztül element.className.

< div  id = "fő"  class = "lekerekített árnyék" > < / div> 
var  el  =  dokumentum . querySelector ( '#fő' ). osztálylista ; 
el . add ( 'kiemelés' ); 
el . remove ( 'árnyék' ); 
el . toggle ( 'kiemelés' );

konzol . log ( el . tartalmazza ( 'kiemelés' ));  // hamis 
konzol . log ( el . tartalmazza ( 'árnyék' ));  // hamis 
konzol . log ( el . classList . toString ()  ==  el . osztálynév ); 
// kimenet: 
< div  id = "fő"  class = "kerekített" > < / div>

History API

Lehetővé teszi egy webhely URL -címének megváltoztatását az oldal teljes frissítése nélkül. Ez akkor hasznos, ha az oldal egyes részeit JavaScripttel töltik be oly módon, hogy a tartalom észrevehetően eltérő legyen, és garantálja az új URL-t.

link . addEventListener ( 'kattintás' ,  függvény ( esemény )  { 
  előzmények . pushState ( 'Kapcsolatfelvételi oldal' ,  'Kapcsolatfelvétel' ,  '/ kapcsolat' ); 
}); 
ablak . addEventListener ( 'popstate' ,  function ( esemény )  { 
  document . querySelector ( 'h1' ). innerHTML  =  esemény . állapot ; 
});

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( használt ,  fennmaradó )  { 
    console . log ( "Felhasznált kvóta:"  +  használt  +  ", fennmaradó kvóta:"  +  fennmaradó ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( use ) { console . log ( " Felhasznált kvóta:" + használt + ", fennmaradó kvóta:" + fennmaradó ); } );

JS a 3D weben

A JavaScript könyvtárakat és keretrendszereket tartalmaz a 3D webes felületek létrehozásához [13] .

WebGL példa
WebGL példa
function  main ()  { 
  const  canvas  =  document . querySelector ( "#glCanvas" ); 
  const  gl  =  vászon . getContext ( "webgl" ); 
  if  ( gl  ===  null )  { 
    alert ( "Frissítse böngészőjét" ); 
    visszatérés ; 
  } 
  gl . clearColor ( 0.0 ,  0.0 ,  0.0 ,  1.0 ); 
  gl . törlés ( gl . COLOR_BUFFER_BIT ); 
} 
ablak . betöltés  =  main ;

Alternatívák

A HTML 5 és a CSS 3 megszületésével néhány lehetőség, például a [14] [15] [16] [17] [18] [19] [20] létrehozása :

JavaScript használata nélkül is megvalósíthatók, ami a HTML 4 és CSS 2 esetében gyakran lehetetlen volt [14] .

JavaScript UI példák

Jegyzetek

  1. ^ ECMA-262 13. kiadás , 262.ecma-international.org .
  2. ^ A JavaScript rövid története az Auth0 - Blogon . Letöltve: 2020. február 28 .
  3. ^ ECMA-262 szabvány
  4. ^ David Flanagan, JavaScript – Az útmutató , Milánó, Apogeo, 2000, 1. o., ISBN  88-7303-627-9 .
  5. ^ David Flanagan, JavaScript – Az útmutató , Milánó, Apogeo, 2000, 53. o., ISBN  88-7303-627-9 .
  6. ^ David Flanagan, JavaScript – Az útmutató , Milánó, Apogeo, 2000, ISBN  88-7303-627-9 .
  7. ^ Flex gyorsindítás – Adatmodellek meghatározása | Adobe Developer Connection , az adobe.com webhelyen . Letöltve: 2020. február 28 .
  8. ↑ Matt Neuburg , AppleScript: Végleges útmutató: Scripting and Automating Your Mac , "O'Reilly Media, Inc.", 2006. január 4., ISBN  978-1-4493-7915-5 . Letöltve: 2020. február 28 .
  9. ^ dia , a github.com oldalon .
  10. ^ a b Az Notifications API használatával a developer.mozilla.org webhelyen . Letöltve: 2022. június 23 .
  11. ^ a b c d Notification.permission , a developer.mozilla.org címen . _ _ Letöltve: 2022. június 23 .
  12. ^ Értesítés API : requestPermission , a caneuse.com oldalon . Letöltve: 2022. június 23 .
  13. ^ 20 Interaktív 3D JavaScript-könyvtárak és keretrendszerek – Bashooka , a bashooka.com oldalon , 2019. május 30. Letöltve : 2021. február 18 ..
  14. ^ a b 5 dolog, amit JavaScript helyett CSS-sel is megtehetsz a LogRocket Blogon , 2019. október 29-én . Letöltve 2021. február 9-én .
  15. ^ ( EN ) 49 CSS -galéria , a Free Frontenden . Letöltve: 2021. február 9 .
  16. ^ LiveCode - HTML5 - Calculator App Demo , a livecode.com oldalon . Letöltve: 2021. február 9 .
  17. ^ Andrea Pacchiarotti, Reszponzív menü HTML-ben és CSS-ben JavaScript és jQuery nélkül , Andrea pacchiarottinál . Letöltve: 2021. február 9 .
  18. ^ Hogyan készítsünk varázslatos, animált eszköztippeket CSS -sel a Web Design Envato Tuts+-on . Letöltve: 2021. február 9 .
  19. ^ A HTML5 Drag and Drop API használatával a web.dev oldalon . Letöltve: 2021. február 9 .
  20. ^ Fájlfeltöltési gomb létrehozása a w3schools.com oldalon . Letöltve: 2021. február 9 .

Bibliográfia

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Olaszország – 2002)
  • David Flanagan: JavaScript 1.5-ös verzió (Apogeo – 2002)
  • Emily A. Vander Veer: JavaScript (CD-ROM-mal) (Apogeo – 2001)
  • Roberto Abbate: JavaScript tanulása (Master Edition – 2006)
  • Shelley Powers: Programozás JavaScriptben (új technikák – 2007)
  • Douglas Crockford: JavaScript – A legjobb kód megírásának technikái (New Techniques – 2009)

Kapcsolódó elemek

Egyéb projektek

Külső linkek

Letöltve innen: " https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=129571785 "