close

JavaScript

Gezinmeye atla Aramaya atla
JavaScript
programlama dili
Javascript-736400 960 720.png
YazarBrendan Eich
Menşe tarihi1995
En son sürüm1.8.5
paradigmalarOlay ve nesne programlama, işlevsel
Yazıyorgüçsüz
Ortak uzantılar.js
Tarafından etkilenmişŞema , Self , Java , C , Python , Awk , HyperTalk
etkilediActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Referans uygulaması
uygulamaKJS , Rhino , SpiderMonkey , V8 , Presto , Çakra
İnternet sitesigeliştirici.mozilla.org/it/docs/Web/JavaScript

Bilgisayar biliminde JavaScript , web sitelerinde ve web uygulamalarında , çağrılan komut dosyası işlevleri aracılığıyla etkileşimli dinamik efektlerin oluşturulması için istemci tarafı Web programlamasında (daha sonra sunucu tarafına da genişletildi ) yaygın olarak kullanılan olay yönelimli çok paradigmalı bir programlama dilidir . Kullanıcı tarafından kullanılan web sayfasında çeşitli şekillerde sırayla tetiklenen olaylar tarafından ( fare , klavye , sayfa yükleme vb.).

Başlangıçta Netscape Communications'dan Brendan Eich tarafından Mochan ve daha sonra LiveScript adı altında geliştirildi , daha sonra " JavaScript " olarak yeniden adlandırıldı ve Sun Microsystems'in Java diline ( 2010 yılında Oracle'dan satın alındı ) daha yakın bir sözdizimi ile resmileştirildi . İlk kez 1997 yılında ECMA tarafından ECMAScript adı altında standardize edilen en son standart Haziran 2022 tarihli ECMA-262 Sürüm 13 [1] olup aynı zamanda bir ISO standardıdır ( ISO/IEC 16262).

Açıklama

Bu nedenle sunum mantığında kullanılan komut dosyası işlevleri, HTML dosyalarına , JSP sayfalarına veya .js uzantılı özel ayrı dosyalara kolayca eklenebilir ve ardından iş mantığında geri çağrılabilir . Son zamanlarda kullanım alanı, JavaScript, HTML ve CSS'ye dayalı tek bir kaynak kodu kullanarak birden fazla işletim sistemi için uygulamalar oluşturmanın mümkün olduğu Hibrit Uygulamalar (hibrit uygulamalar) olarak genişletilmiştir .

Java, JavaScript ve JScript

LiveScript'ten JavaScript'e isim değişikliği, Netscape'in Netscape Navigator tarayıcısına Java teknolojisi desteğini dahil ettiği sıralarda geldi . [2] İsim seçimi büyük bir karışıklık kaynağı oldu. Java ve JavaScript arasında gerçek bir ilişki yoktur; benzerlikleri esas olarak sözdizimindedir (her iki durumda da C dilinden türetilmiştir ); anlambilimleri oldukça farklıdır ve özellikle nesne modelleri ilgisizdir ve gözle görülür şekilde uyumsuzdur.

JavaScript'in web sayfalarını zenginleştiren bir dil olarak başarısı göz önüne alındığında , Microsoft , JScript olarak bilinen uyumlu bir dil geliştirdi . Ortak spesifikasyonlara duyulan ihtiyaç , çalışmanın başladığı Kasım 1996'dan bu yana sekiz baskısı yayınlanan ECMAScript için ECMA 262 standardının temeliydi [3] .

Yapısal yönler

JavaScript'in ana özellikleri şunlardır:

Diğer ilgi çekici noktalar: İstemci tarafı JavaScript'te kod , sunucuda değil doğrudan istemcide çalışır . Bu yaklaşımın avantajı, özellikle karmaşık komut dosyalarının varlığında bile , iş istemci tarafından yapıldığından web sunucusunun aşırı yüklenme riskini almamasıdır. Bir dezavantajı, özellikle büyük komut dosyaları söz konusu olduğunda, ağdan aktarım süresinin aşırı uzun olabilmesidir. Ayrıca, uzak bir veritabanında depolanan verilere erişim gerektiren herhangi bir bilgi, işlemi fiziksel olarak gerçekleştiren bir dile geri gönderilmeli , ardından sonuçları bir veya daha fazla JavaScript değişkenine döndürmek için; bu tür işlemler, sayfanın kendisinin yeniden yüklenmesini gerektirir. Ancak, AJAX'ın doğuşuyla bu sınırlar büyük ölçüde aşıldı .

Dikkate değer diğer bazı JavaScript özellikleri:

Uyumsuzluk

JavaScript'in çeşitli uygulamaları, HTML'de olduğu gibi, genellikle standartlara uymaz, bunun yerine belirli bir web tarayıcısı ve bunun bir dizi belirli sürümüyle çalışmak üzere oluşturulur. Geçerli ECMAScript standardı teorik olarak tüm JavaScript uygulamalarının temeli olmalıdır, ancak pratikte Mozilla (ve Netscape ) tarayıcıları JavaScript kullanır , Microsoft Internet Explorer JScript kullanır ve Opera ve Safari gibi diğer tarayıcılar genellikle ek olmayan eklerle birlikte diğer ECMAScript uygulamalarını kullanır. JavaScript ve JScript ile uyumluluğa izin veren standart özellikler .

JavaScript ve JScript, resmi ECMAScript standardının parçası olmayan birçok özellik içerir ve ayrıca birkaç özellikten yoksun olabilir. Bunu yaparken kısmen uyumsuzdurlar, bu da senaryo yazarlarının yazılım yazarken bu tür sorunlarla uğraşmak zorunda kalmasına neden olur . İkisinden JavaScript daha standart uyumludur: bu, ECMA standartlarına göre yazılmış bir komut dosyasının özellikle son sürümlerde çoğu tarayıcıda çalışacağı anlamına gelir.

Başka bir etki, her tarayıcının aynı komut dosyasını farklı şekilde ele alabilmesi ve bir tarayıcıda çalışanın diğerinde veya aynı tarayıcının farklı bir sürümünde çalışmayabilmesidir. HTML'de olduğu gibi, bu nedenle standartlara uygun kod yazmanız önerilir. Elbette yıllar içinde, kullanılan tarayıcıdan bağımsız olarak düzgün çalışan JavaScript kodunun yazılmasını basitleştirmek için kullanılabilecek çeşitli kitaplıklar ve çerçeveler oluşturuldu. HTML veya PHP sayfalarında basit komut dosyalarının yazılmasını basitleştirmek için en iyi bilinen ve en yaygın kitaplıklardan biri jQuery'dir , ancak JavaScript'te uygulama yazmak için çok sayıda çerçeve vardır, hatta son derece karmaşık (istemci tarafı ve / veya sunucu tarafı), tamamen göz ardı edilir. son kullanıcının hangi tarayıcıyı kullanacağını tanıma ihtiyacı.

Karşı önlemler

Uyumsuzluklarla başa çıkmak için iki ana teknik vardır: tarayıcı koklama (tam anlamıyla "tarayıcıyı koklama") ve nesne algılama . Komut dosyası oluşturmayı destekleyen yalnızca iki tarayıcı varken, yani Netscape ve Internet Explorer, tarayıcı koklama en popüler teknikti. Platform, tarayıcı ve sürüm bilgilerini döndüren bir dizi istemci özelliğini kontrol ederek, kodun tam olarak hangi tarayıcıda çalıştığını ayırt etmesi mümkün oldu. Internet Explorer, örneğin giderek daha doğru olmayan tarayıcı bilgileri sağlayarak bilgilerini gizlemeye başladığından, daha sonra koklama tekniklerinin uygulanması daha zor hale geldi (Microsoft'un bunun nedenleri uzun süredir tartışılıyor). Daha sonra, tarayıcı koklama, her biri kendi platformu, istemcisi ve sürüm bilgisi olan diğer komut dosyası tarayıcıları pazara girdiğinde karmaşık bir sanat biçimi haline geldi.

Nesne algılama, bir nesnenin özelliğinin varlığının kontrol edilmesine dayanır. 

function  set_image_source ( imageName ,  imageURL ) 
{ 
  // 'document' nesnesinin 'images' özelliğine sahip olup olmadığını test edin 
  if  ( document.images ) { // sadece bir 'images' belge vektörü varsa çalıştırın . resimler [ resimAdı ]. kaynak = imageURL ; } }

Daha karmaşık bir örnek, bağlantılı Boolean testlerinin kullanımına dayanmaktadır :

if  ( belge . gövde  &&  belge . gövde . stil )

Bu durumda, "document.body.style" ifadesi normalde "document.body" özelliğine sahip olmayan bir tarayıcıda hataya neden olur, ancak "&&" operatörünün kullanılması "document.body.style" öğesinin "document.body" yoksa asla çağrılmaz. Test, tembel değerlendirme (lazy değerlendirme) olarak adlandırılan mantıksal ifadelerin değerlendirilmesinin bu özelliğinden yararlanır .

Bugün, bir kullanıcının bir JavaScript hatasıyla asla karşılaşmamasını sağlamak için çeşitli önlemlerde , tarayıcı koklama, nesne algılama ve ECMAScript spesifikasyonu ve CSS gibi standartlara uygunluk kombinasyonu kullanılmaktadır.

Kullanım

Tamamen bağımsız programların yazılmasına izin veren C veya C ++ gibi diğer dillerden farklı olarak , JavaScript esas olarak bir betik dili olarak kullanılır , yani diğer kodlarla entegredir.

Temel fikir, ana bilgisayar programının (betiği barındıran ve yürüten), komut dosyasına iyi tanımlanmış bir API sağlamasıdır; bu, uygulanması ana bilgisayar programının kendisinin sorumluluğunda olan belirli işlemlere erişime izin verir. Komut dosyası yürütüldüğünde, JavaScript dili yapılarının kendileri tarafından amaçlanmayan belirli işlemleri gerçekleştirmesini istemek için ( ana bilgisayar programı ) bu API'ye referanslar kullanır. Bu mekanizma, programın kütüphanelere dayandığı C veya Java gibi dillerde de benimsenmiştir , dilin kendisi tarafından sağlanmayan, G / Ç veya işlevlere çağrıların yürütülmesi gibi işlemleri gerçekleştirmenize izin verir sistem .

JavaScript komut dosyası için bir ana bilgisayar programının tipik (ve belki de en iyi bilinen ve en yaygın) örneği , tarayıcınınkidir . Modern bir tarayıcı normalde bir JavaScript yorumlayıcısı içerir . JavaScript kodunu içeren bir web sayfası ziyaret edildiğinde, tarayıcıda bulunan yorumlayıcı tarafından yürütülür. JavaScript'in bir tarayıcıyla ilişkilendirilmesine izin veren arabirimlere DOM ( İtalyanca Belge Nesne Modeli ) adı verilir . Birçok web sitesi, güçlü dinamik web uygulamaları oluşturmak için istemci tarafı JavaScript teknolojisini kullanır .

JavaScript'in Web ortamında ana kullanımı, yalnızca statik HTML ile mümkün olmayan belirli eylemleri gerçekleştirmek için tarayıcı DOM ile etkileşime giren HTML sayfalarına entegre edilmiş küçük işlevlerin yazılmasıdır : giriş alanlarındaki değerleri kontrol edin, gizleyin veya belirli öğeleri göster vb. Ne yazık ki, W3C tarafından dayatılan DOM standartlarına herkes tarafından her zaman tutarlı ve tutarlı bir şekilde saygı gösterilmez. Farklı tarayıcılar, oluşturma motorlarına bağlı olarak , komut dosyasına farklı nesneler veya yöntemler sunar; bu nedenle, her tarayıcıyla ve hatta aynı tarayıcının çeşitli sürümlerine göre uyumluluğu sağlamak için genellikle bir JavaScript işlevine ek kontroller uygulamak gerekir.

Web'in dışında, JavaScript yorumlayıcıları çeşitli uygulamalara entegre edilmiştir. Adobe Acrobat ve Adobe Reader , PDF dosyalarında JavaScript'i destekler . Birçok popüler web tarayıcısının temelini oluşturan Mozilla platformu , çeşitli ürünlerinin kullanıcı arayüzünü ve işlem mantığını uygulamak için JavaScript'i kullanır. JavaScript yorumlayıcıları, komut dosyası yazılabilir arabirimler olmadan özel uygulamalara da entegre edilmiştir. Son olarak, Microsoft'un Windows Komut Dosyası Ana Bilgisayarı teknolojisi , işletim sistemleri için bir komut dosyası dili olan JavaScript'i (JScript aracılığıyla) destekler .

Bu uygulamaların her biri, ana bilgisayar ortamına erişim sağlayan kendi nesne modelini sağlar ve JavaScript dilinin özü her uygulamada büyük ölçüde değişmeden kalır. Aşağıdakiler de dahil olmak üzere JavaScript dilinin çekirdeğinin birkaç uygulaması vardır:

HTML'de Kullanım

Komut dosyası etiketi (HTML)

Bir HTML sayfasına komut dosyası eklemek için komut dosyası etiketini kullanmanız gerekir . Bu etiket, JavaScript dilinin kendisinin bir parçası değildir, yalnızca bir HTML sayfasında bir "kapsayıcı" görevi görür. 

< komut dosyası  türü = "metin / javascript" > 
// <! [CDATA [ 
JavaScript  ifadeleri ... 
//]]> 
</ komut dosyası >

Bir belge, birkaç kısımda komut dosyası etiketinin tanımına sahip olabilir. Bu etiket aracılığıyla kullanılan sürümü temsil edebilirsiniz ve tarayıcıya bağlı olarak kodun uygun bölümünün yorumlanmasına sahip olacaksınız. Tanımlar aşağıdakiler olabilir: 

< komut dosyası  türü = "metin / javascript" >  ...  </ komut dosyası >
Örnek: Merhaba dünya!

Aşağıdaki örnek, içinde " Merhaba dünya " olan bir uyarı mesajı görüntüler. 

< komut dosyası  türü = "metin / javascript" > 
   uyarı ( 'Merhaba dünya' ); 
< / komut dosyası>

Doğrudan HTML sayfasına "yazmak" için: 

< komut dosyası  türü = "metin / javascript" > 
   belge . yaz ( 'Merhaba dünya' ); 
< / komut dosyası>

JavaScript kaynak kodunun MIME türü , standart olmasa da en application/javascriptçok kullanılanıdır text/javascript.

JavaScript kodunu bir HTML belgesine gömmek için önüne şunu ekleyin: 

< komut dosyası  türü = "metin / javascript" >

ve takip edin: 

</ komut dosyası >

Daha eski tarayıcılar genellikle aşağıdakilerle başlamak için kodu gerektirir: 

  < komut dosyası  dili = "JavaScript"  türü = "metin / javascript" > 
  <! -

ve şununla biter: 

  // ->
   </ komut dosyası >

Yorum işaretçileri <!--... -->kodun HTML belgelerindeki etiketi tanımayan çok eski tarayıcılar tarafından metin olarak görüntülenmemesini sağlamak için gereklidir, <script>LANGUAGE ise eski sürümlerden istenebilecek bir HTML niteliğidir (artık önerilmez). tarayıcılar. Ancak, XHTML/XML belgelerindeki <script> etiketleri, XHTML / XML standartlarına uyan ayrıştırıcılar yorumları görmezden geldiğinden ve ayrıca sembollerle ve komut dosyalarında (örneğin, bunları operatörlerin eksiltmesiyle karıştırmak gibi) sorunlarla karşılaşabileceğinden --, yorum yapıldığında çalışmaz . tamsayılar ve karşılaştırma). XHTML belgeleri daha sonra komut dosyalarını XML'in CDATA bölümleri olarak içermelidir.<>

  < komut dosyası  türü = "metin / javascript" > 
  // <! [CDATA [

ve onları takip ederek 

  //]]>
   </ komut dosyası >

(Bir satırın başındaki '//' sembolleri, komut dosyası tarafından ayrıştırılmasını önlemek <![CDATA[ve ayrıştırılmasını önlemek için bir JavaScript yorumunun başladığını gösterir.)]]>

HTML [1] öğeleri , bir komut dosyası tarafından belirtilen işleyicilerle ilişkilendirilebilecek içsel olaylar içerebilir. Geçerli HTML 4.01 kodunu yazmak için web sunucusu, 'metin / JavaScript' değerine sahip bir 'İçerik-Komut Dosyası Türü' döndürmelidir. Web sunucusu bu amaç için yapılandırılamıyorsa, web sitesi yazarı aşağıdaki ifadeyi belgenin başlık bölümüne yerleştirebilir. 

< meta  http-equiv = "Content-Script-Type"  içerik = "metin / javascript"  />

Web tarayıcılarında sık kullanım

JavaScript, bir web tarayıcısının istemci tarafı komut dosyası oluşturmanın her yönü için kullanılabilir , ancak bazı kullanımlar diğerlerinden daha yaygın hale gelmiştir. Örnekler arasında görüntüleri değiştirme, açılır pencereler oluşturma ve form verilerini doğrulama sayılabilir . Çoğu tarayıcıda, aşağıdaki XHTML kod parçacığı, kullanıcı imleci üzerine getirdiğinde bir görüntünün başka biriyle değiştirilebileceği bir yolu gösterir . Bu etkiye genellikle rollover veya fareyle üzerine gelinmesi denir . Ancak, benzer davranışlar yalnızca CSS kullanılarak da elde edilebilir . 

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

İştirakler

JavaScript kullanımına yeni bir örnek, Web tarayıcılarının favorileri veya favorileri içindeki küçük kod bölümleri olan Bookmarklet'lerdir . Macromedia Flash'ta kullanılan programlama dili ( ActionScript olarak adlandırılır), ECMAScript ile ortak ilişkileri nedeniyle JavaScript'e çok benzer . ActionScript, JavaScript ile hemen hemen aynı sözdizimine sahiptir, ancak nesne modeli [7] çok farklıdır.

OSA için JavaScript (JavaScript OSA veya JSOSA), Mozilla'nın JavaScript 1.5 uygulamasını temel alan Macintosh için bir betik dilidir [8] . Late Night Software tarafından sağlanan ücretsiz bir bileşendir . İşletim sistemi ve üçüncü taraf uygulamalarla etkileşim, bir MacOS nesnesi aracılığıyla yönetilir . Bunun dışında, dil Mozilla uygulamasıyla neredeyse aynıdır. Daha çok kullanılan AppleScript diline bir alternatif olarak önerilmiştir .

Dil öğeleri

Değişkenler

Değişkenler tipik olarak dinamik olarak yazılır, yani basitçe onlara bir değer atayarak veya komutlet kullanılarak tanımlanırlar ; herhangi bir işlevin dışında bildirilenler "küresel" görünürlüktedir veya tüm web sayfasından erişilebilir ; bir fonksiyon içinde bildirilenler, o fonksiyona yerel veya dahilidir. Değişkenleri sayfadan sayfaya geçirmek için geliştirici bir tanımlama bilgisi ayarlayabilir veya bunları saklamak için arka planda gizli bir çerçeve veya pencere kullanabilir.

Nesneler

JavaScript'teki her şey ya ilkel bir değerdir ya da bir nesnedir. Nesneler, benzersizliğe sahip (yalnızca kendilerine eşittirler) ve özellik adlarını değerlerle ilişkilendiren varlıklardır. Bu, bir nesnenin Perl ve Ruby'deki karmalara veya Python , PostScript ve Smalltalk'taki sözlüklere benzer bir ilişkisel vektör olduğu anlamına gelir .

JavaScript'in birkaç tür önceden tanımlanmış nesnesi vardır, özellikle Array , Boolean ( Boolean ), Date (tarih ve saat içeren nesneler), Function ( function ), Math (matematiksel hesaplamalarda kullanılan fonksiyonları içeren nesne), Number (sayılar) , Object ( nesneler ), RegExp ( normal ifadeler ) ve String ( dizeler ). Diğer nesneler, dil tarafından değil, yürütme ortamı tarafından tanımlanan "misafir nesnelerdir". Bir tarayıcıda, tipik ana bilgisayar nesneleri DOM'a aittir : pencere ( pencere ), form (maske), bağlantı ( bağlantı ) vb.

JSDOM.gif

Bir kurucu tanımlayarak nesneleri tanımlayabilirsiniz. JavaScript, prototip tabanlı nesne yönelimli bir dildir. Bu, kalıtımın sınıflar arasında değil nesneler arasında olduğu anlamına gelir (JavaScript'te sınıf yoktur). Nesneler, prototiplerinden özellikleri devralır.

Oluşturulduktan sonra ayrı nesnelere ek özellikler veya yöntemler eklenebilir. Bunu tek bir kurucu tarafından oluşturulan tüm örnekler için yapmak için prototype, prototip nesnesine erişmek için yapıcı özelliğini kullanabilirsiniz.

Örnek: Bir nesne oluşturma 

// yapıcı 
işlev  Nesnem ( öznitelikA ,  öznitelikB ) 
{ 
  bu . öznitelikA  =  öznitelikA 
  bu . nitelikB  =  nitelikB 
}
 
// bir Object oluştur 
obj  =  new  MyObject ( 'red' ,  1000 )
 
// bir nesne 
uyarısı özniteliğine erişin ( nesne . öznitelikA )
 

// ilişkisel vektör uyarısının gösterimiyle bir özniteliğe erişin ( obj [ "attributeA" ])

Kalıtımı simüle et

JavaScript'teki nesnelerin hiyerarşisi taklit edilebilir. Örneğin: 

fonksiyon  Temel () 
{ 
  bu . Geçersiz kıl  =  _Geçersiz kıl ; 
  bu . BaseFunction  =  _BaseFunction ;
 
  function  _Override () 
  { 
    alert ( "Temel :: Geçersiz Kıl ()" ); 
  }

  function  _BaseFunction () 
  { 
    uyarı ( "Base :: BaseFunction ()" ); 
  } 
}
 
fonksiyon  Türet () 
{ 
   bu . Geçersiz kıl  =  _Geçersiz kıl ; 
   function  _Override () 
   { 
     alert ( "Derive :: Override()" ); 
   } 
}

sürüklenme _ prototip  =  yeni  Temel ();
 
d  =  yeni  Türet (); 
d . Geçersiz kıl (); 
d . TemelFonksiyon ();

çıktıyla sonuçlanacaktır: 

Türetme :: Geçersiz kıl ()
Temel :: BaseFunction ()

Önceden tanımlanmış nesneler

JavaScript, nesnelerin tanımlanmasına izin vermenin yanı sıra, komut dosyalarınız için kullanılabilecek bir dizi nesne sağlar:

Dizi

Bir dizi, tamsayılar ve isteğe bağlı türdeki değerler arasındaki bir ilişkidir. JavaScript'te, tüm nesneler tamsayıları ve değerleri ilişkilendirebilir, ancak diziler, tamsayı dizinlerini kullanmak için özel davranışlara ve özel yöntemlere sahip özel bir nesne türüdür (örneğin join, ve slice) push.

lengthDizilerin , vektörde kullanılan en büyük indeksten her zaman daha büyük olması garanti edilen bir özelliği vardır. Daha da büyük bir dizine sahip bir özellik oluşturursanız, otomatik olarak güncellenir. Özelliğe daha küçük bir sayı yazmak, lengthdaha büyük dizinleri kaldırır. Bu özellik, vektörleri diğer nesnelerden ayıran tek özel özelliktir.

Dizi öğeleriyle, nesne özelliklerine erişmek için normal gösterimi kullanabilirsiniz: 

  myArray[1]
  myArray["1"]

Bu iki gösterim eşdeğerdir. Sayının alternatif bir temsiliyle nokta gösterimi veya dizeleri kullanamazsınız: 

  myArray.1(sözdizimi hatası)
   myArray(1)(yanlış sözdizimi, yalnızca Internet Explorer tarafından izin verilir)
   myArray["01"]( ile aynı değil myArray[1])

Bir vektörün bildirimi, açık bir gösterim veya yapıcı kullanabilir Array: 

 myArray = [0,1,,,4,5];(4 elemanlı 6
  myArray = new Array(0,1,2,3,4,5);uzunluğunda vektör) (6 uzunluğunda ve 6 elemanlı vektör)
  myArray = new Array(365);(365 uzunluğunda boş vektör)

Diziler , yalnızca tanımlanmış öğelerin belleği kullanması için uygulanır ; bunlar "dağınık vektörler"dir. Diğer nesnelerde olduğu gibi yalnızca bu iki öğe için boşluk ayarlayın myArray[10] = 'qualcosa've kullanın. myArray[57] = 'qualcosaltro'Dizinin uzunluğu her zaman 58 olarak bildirilecektir.

Kontrol yapıları ve koşullar

if ... else

IF kontrol yapısı İtalyanca SE'ye karşılık gelir

Parantez içindeki ifade sadece ve sadece koşul doğru olarak değerlendirilirse yürütülür, aksi takdirde ELSE'de yer alan ifade yürütülür. 

  eğer (koşul)
  {
     Talimatlar;
  }

  eğer (koşul)
  {
     Talimatlar;
  }
  başka
  {
     Talimatlar;
  }

Döngü sırasında 

  while (koşul)
  {
     Talimatlar;
  }

Yap ... while döngüsü 

  yapmak
  {
     Talimatlar;
  } while (koşul);

Döngü için 

  for ([ilk ifade]; [koşul]; [artış ifadesi])
  {
     Talimatlar;
  }

Döngü için ...

Bu döngü, bir nesnenin (veya bir vektörün öğelerinin) tüm özelliklerinden geçer. 

  for ( nesnedeki değişken )
  {
     Talimatlar;
  }

Döngünün ... için

Bu döngü, bir nesnenin (veya bir vektörün öğelerinin) tüm değerlerinden geçer. 

  for ( nesnenin değişkeni )
  {
     Talimatlar;
  }

İfadeyi değiştir 

  geçiş (ifade)
  {
     vaka değeri1:
        Talimatlar;
        ara ;
     durum değeri2:
        Talimatlar;
        ara ;
     varsayılan  :
        Talimatlar;
  }

Fonksiyonlar

Bir işlev , bir argüman listesi (muhtemelen boş) olan ve bir ada sahip olabilen (gerekli olmasa da) bir talimat bloğudur . Bir işlev, return ifadesi aracılığıyla bir değer döndürebilir . 

  işlev (boş olabilir)
  {
     Talimatlar;
     dönüş ifadesi;
  }

Bir işlev çağrılırken iletilen argümanların sayısı, mutlaka işlev tanımındaki argümanların sayısına eşit olmak zorunda değildir (başka bir deyişle, işlev çağrılırken, yani. mevcut parametrelerin özellikleri ). İşlev içinde, argümanlar listesine vektör aracılığıyla da başvurulabilir arguments(ikincisi, calleeişlevin kendisine bir işaretçiyi temsil eden özelliğe sahiptir).

Her işlev, temel bir nesne türü olan Function öğesinin bir örneğidir. İşlevler, diğer nesneler gibi oluşturulabilir ve atanabilir: 

   var myFunc1 = new Function ("uyarı ('Merhaba')");
   var myFunc2 = myFunc1;
   myFunc2 ();

çıktı olarak üretir: 

   Merhaba

Kullanıcıyla etkileşim

Bir JavaScript komut dosyasının bir web sayfasındaki kullanıcıyla etkileşime girebileceği diğer teknikler arasında şunlar yer alır:

  • HTML DOM'a erişerek düzenlenebilir HTML form öğeleri ;
  • Uyarı iletişim kutusu
  • İletişim kutusunu onayla
  • İstemi iletişim kutusu
  • Tarayıcı durum çubuğu
  • Standart çıktı ("konsol")

Not: iletişim kutuları Opera tarayıcısıyla çalışmaz; hata yoktur, sadece yürütülmezler.

Video Yazma Yöntemleri (Standart Çıkış)

Ekrana (yani betiğin bulunduğu sayfaya) yazmak için document.write() yöntemini kullanabilirsiniz; görüntülenecek dizeler, '+' birleştirme operatörü kullanılarak birleştirilebilir: 

< html > 
< head > 
< script  type = "text / javascript" > 
<!  - Komut dosyasını eski tarayıcılardan gizle     

// Bu fonksiyon, seçilen genişlikte yatay bir çizgi oluşturur. 
işlev  çubuğu ( genişlikPct ) 
{ 
  belge . write ( "<saat hizalama = 'sol' genişlik = '"  +  genişlikPct  +  "%' />" ); 
}

// Bu işlev, belirli bir düzeyin başlığından önce gelen metni oluşturur. 
işlev  çıktısı ( headLevel ,  headText ,  metin ) 
{ 
  belge . write ( "<h"  +  headLevel  +  ">"  +  headText  +  "</ h"  +  headLevel  +  "> <p>"  +  metin  +  "</p>" ); 
}

// Gizlenecek kodun sonu -> 
< / script> 
< / head> 
< body > 
< script  type = "text / javascript" > 
<! -  Komut dosyasını eski tarayıcılardan gizle     

bar ( 25 ) 
çıktı ( 2 ,  "JavaScript Kuralları!" ,  "JavaScript kullanmak kolaydır ..." )

// Gizlenecek kodun sonu -> 
< / script>

< p > Bu  ,  yukarıdaki kod tarafından oluşturulandan farklı olarak normal  HTML'dir . _ _ _ < / p>        

< / gövde> 
< / html>

Etkinlikler

Metin öğeleri, bir ECMAScript olay işleyicisi kaydedilmişse bir eylemi tetikleyebilecek çeşitli olayların kaynağı olabilir. HTML'de bu olay işleyicileri genellikle doğrudan HTML etiketi içinde anonim olarak tanımlanan işlevlerdir. Bir komut dosyasındaki bir olayı çağırmanın sözdizimi aşağıdaki gibidir: 

konu . olay  =  işleyici ;

Çeşitli etkinlik kategorileri vardır:

  1. Fare düğmeleriyle etkinleştirilebilen olaylar
  2. Fare hareketleriyle etkinleştirilebilen olaylar
  3. Fareyi sürükleyerek etkinleştirilebilen olaylar (sürükle ve bırak)
  4. Kullanıcı tarafından klavye ile etkinleştirilebilen olaylar
  5. Kullanıcı değişiklikleriyle etkinleştirilebilen olaylar
  6. "Yangın" ile ilgili olaylar
  7. Nesneler yüklenerek etkinleştirilebilen olaylar
  8. Pencere hareketleriyle etkinleştirilebilen olaylar
  9. Belirli düğmelere bağlı olaylar
  10. Diğer ve yeni etkinlik türleri

Fare düğmeleriyle etkinleştirilebilen olaylar

Etkinlik listesi:

  1. onClick : bir nesneye tıklandığında etkinleştirilir;
  2. onDblClick : çift tıklama ile etkinleştirilir;
  3. onMouseDown : sol fare düğmesine basıldığında etkinleştirilir;
  4. onMouseUp : önceden basılan farenin sol düğmesini kaldırdığınızda etkinleştirilir;
  5. onContextMenu : ContextMenu'yu açarak farenin sağ düğmesi tıklandığında etkinleştirilir.

Çift tıklama, diğerlerini kapsayan bir olaydır ve daha doğrusu, fare aşağı, fare yukarı, tıklatma sırasında art arda etkinleşir.

Uygulama etiketi

A, ADRES, APPLET, ALAN, B, BDO, BÜYÜK, BLOCKQUOTE, BODY, BUTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, GİRİŞ tipi = düğme, GİRİŞ tipi = onay kutusu, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = radyo, GİRİŞ tipi = sıfırlama, GİRİŞ tipi = gönder, GİRİŞ tipi = metin , 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, TABLO, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Fare hareketleriyle etkinleştirilebilen olaylar

Etkinlik listesi:

  1. onMouseOver : fare bir nesnenin üzerine geldiğinde etkinleştirilir;
  2. onMouseOut : fare bir nesneden hareket ettiğinde etkinleştirilir;
  3. onMouseMove : fare işaretçisini hareket ettirir, ancak bu olay sık sık meydana geldiğinden (farenin kullanımı sıktır), varsayılan olarak mevcut değildir, sadece daha sonra açıklanacak olan olay yakalama ile birleştirilir.
Uygulama etiketi

A, ADRES, APPLET, ALAN, B, BDO, BÜYÜK, BLOCKQUOTE, BODY, BUTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, GİRİŞ tipi = düğme, GİRİŞ tipi = onay kutusu, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = radyo, GİRİŞ tipi = sıfırlama, GİRİŞ tipi = gönder, GİRİŞ tipi = metin , 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, TABLO, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Fareyi sürükleyerek etkinleştirilebilen olaylar (sürükle ve bırak)

Etkinlik listesi:

  1. onDragDrop : bir kullanıcı tarayıcı penceresinde bir nesneyi sürüklediğinde veya üzerine bir dosya bıraktığında tetiklenen olay;
  2. onMove : bir nesne bir pencereyi veya çerçeveyi hareket ettirdiğinde etkinleştirilir;
  3. onDragStart : kullanıcı bir nesneyi sürüklemeye başlar başlamaz olay etkinleştirilir;
  4. onDrag : fare bir nesneyi veya bir metin seçimini aynı tarayıcının penceresine, hatta başka bir pencereye veya hatta Masaüstüne sürüklediğinde etkinleştirilir;
  5. onDragEnter : kullanıcı bir nesneyi aynı veya başka bir tarayıcının geçerli bir hedefine sürüklediği anda etkinleştirilir;
  6. onDragOver : kullanıcı bir nesneyi barındırmak için geçerli bir hedef üzerine sürüklediğinde etkinleştirilir ve önceki olaya benzer, ancak bundan sonra etkinleştirilir;
  7. onDragLeave : kullanıcı bir nesneyi barındırmak için uygun bir hedef üzerine sürüklediğinde etkinleştirilir, ancak serbest bırakılmaz;
  8. onDragEnd : sürükleme tamamlandıktan sonra kullanıcı nesneyi bıraktığında tetiklenir.
  9. onDrop : bir sürükleme işleminin ardından fare fare düğmesini kaldırdığında etkinleştirilir;
Uygulama etiketi

A, ADRES, APPLET, ALAN, B, BDO, BÜYÜK, BLOCKQUOTE, BODY, BUTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, GİRİŞ tipi = düğme, GİRİŞ tipi = onay kutusu, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = radyo, GİRİŞ tipi = sıfırlama, GİRİŞ tipi = gönder, GİRİŞ tipi = metin , 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, TABLO, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Kullanıcı tarafından klavye ile etkinleştirilebilen olaylar

Etkinlik Listesi:

  1. onKeyPress : bir kullanıcı bir tuşa basıp bıraktığında veya hatta basılı tuttuğunda bile tetiklenen olay;
  2. onKeyDown : tuşa basıldığında etkinleştirilir;
  3. onKeyUp : basılan bir tuş bırakıldığında etkinleşen olay;
  4. onHelp : kullanıcı F1 tuşuna bastığında etkinleştirilir;

Kullanıcı değişiklikleriyle tetiklenebilen olaylar

onChange

Bir form veya form alanının içeriği değiştirildiğinde veya artık seçilmediğinde tetiklenir. FileUpload, Select, Text, TextArea nesneleri ile de kullanılır.

Örnek: 

< input  type = "text"  value = "E-posta adresini girin"  name = "userEmail"  onChange = validateInput ( this . value )  /> 
< script  type = "text / javascript" > 
  bu . benimForm . kullanıcıE-postası . odak (); 
  bu . benimForm . kullanıcıE-postası . seçin ();
 
  function  validateInput () 
  { 
    userInput  =  new  String (); 
    userInput  =  bu . benimForm . kullanıcıE-postası . değer ; 
    if  ( userInput .match ( " @" )) alert ( " İlginiz için teşekkürler." ); else uyarısı ( "Lütfen göndermeden önce e-posta bilgilerinizin doğru olup olmadığını kontrol edin" ); } < / komut dosyası>
onCellChange

Bir veritabanındaki bir öğe değiştirildiğinde etkinleştirilir, bu özellik için JavaScript ile kesinlikle ilgili olmayan bir kullanımı vardır;

onPropertyChange

Bir öğenin sahipliği değiştiğinde tetiklenen olay;

onReadyStateChange

Bir öğenin yükleme durumu değiştiğinde tetiklenen olay, olay örneğin bir öğenin yüklendiğini doğrulamak için yararlıdır.

Uygulama etiketi

A, ADRES, APPLET, ALAN, B, BDO, BÜYÜK, BLOCKQUOTE, BODY, BUTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, GİRİŞ tipi = düğme, GİRİŞ tipi = onay kutusu, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = radyo, GİRİŞ tipi = sıfırlama, GİRİŞ tipi = gönder, GİRİŞ tipi = metin , 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, TABLO, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

"Yangın" ile ilgili olaylar

onFocus

Bu işleyici onBlur'un tersidir, bu nedenle kullanıcı bir alana girdiğinde etkinleştirilir;

onBlur

Fare işaretçisi veya imleç, fare veya SEKME karakterini kullanarak geçerli pencereden çıktığında etkinleştirilir. Ancak modüllere uygulanan bu işleyici, etiketi kontrol içeren alandan çıkılırsa başlar;

Örnek 

 E-posta  adresini  girin < input  type = "text"  value = ""  name = "userEmail"  onBlur = addCheck () > 
< script  type = "text / javascript" > 
function  addCheck () 
{ 
  alert ( "Lütfen e-posta ayrıntılarınızın doğru olup olmadığını kontrol edin göndermeden önce " ) 
} 
< /script>
onSeçim

Bir metin kutusu içindeki metni fare ile veya SHIFT tuşunu basılı tutup Ok tuşlarıyla seçerek seçtiğinizde etkinleştirilebilir;

onSelectStart

Bir olay seçmeye başladığınızda etkinleştirilir;

onbeforeEditFocus

Bu, DesignMode'dayken, zaten seçime sahip olan bir nesneye çift tıklama veya tıklama ile etkinleştirilir;

onLoseCapture

Bir nesne fare yakalamayı kaybettiğinde tetiklenir.

Uygulama etiketi

A, ADRES, APPLET, ALAN, B, BDO, BÜYÜK, BLOCKQUOTE, BODY, BUTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, GİRİŞ tipi = düğme, GİRİŞ tipi = onay kutusu, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = radyo, GİRİŞ tipi = sıfırlama, GİRİŞ tipi = gönder, GİRİŞ tipi = metin , 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, TABLO, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Nesneler yüklenerek etkinleştirilebilen olaylar

onLoad

Bu işleyici, çoğunlukla pencereler ve görüntüler olmak üzere nesnelerin yüklenmesinde çalışır;

onUnload

Bir öncekinin tam tersidir ve başka bir pencereyi yüklemek için bir pencereden ayrıldığınızda veya aynısını yeniden yüklemek için (yenile düğmesiyle) çalışır;

onAbort

onAbort olayının işleyicisi, kullanıcının bir nesnenin yüklenmesini engellemesi veya bir görüntünün yüklenmesini engellemesi durumunda bazı kodlar belirtmenize izin verir.

Bu işleyici aşağıdaki olay özelliklerini kullanır.

Örnek 

  < img  name =  "myPic"  SRC =  "images / myPic.gif"  onAbort =  "alert ('Görüntü yüklemesi iptal edildi!')" >
onError

Bir nesnenin yüklenmesi bir hataya neden olduğunda etkinleştirilir, ancak bunun nedeni tarayıcının değil kodun bir sözdizimi hatasıysa, bu nedenle sayfanın bir görüntüsünün yanlış bir bağlantısı üzerinde çalışır, ancak yanlış bir bağlantı üzerinde çalışmaz. tam sayfanın yükleme bağlantısı. Opera, artık kullanılmayan bu olayı işlemez: doğru hata işleme için try ... catch yapısı kullanılır;

onBeforeUnload

Bu işleyici onUnload ile aynı şekilde çalışır ancak bir an önce yüklenir;

onStop

Bu işleyici, tarayıcı durdurma anahtarıyla sayfanın yüklenmesini durdurduğunuzda çalışır ve bundan önce ancak onBeforeUnload'dan sonra onUnload yüklemesiyle aynı şekilde çalışmalıdır.

Uygulama etiketi
  1. onLoad Bu işleyici <BODY> ve <FRAMESET> etiketleriyle ve JavaScript 1.1 tarafından ayrıca <IMG> ile birlikte kullanılırken Explorer'da ayrıca <SCRIPT>, <LINK>, <EMBED>, <APPLET> etiketlerini eklemek gerekir . JavaScript 1.2'de <LAYER> etiketi Netscape'e de eklenir.
  2. onUnload Bu işleyici, Internet Explorer'da da <BODY> ve <FRAMESET> etiketleriyle birlikte kullanılır.
  3. onAbort Bu işleyici, Internet Explorer'da da yalnızca <IMG> etiketiyle kullanılır.
  4. onError Bu işleyici yalnızca <IMG> etiketi ve Pencere ile, Internet Explorer'da ise <OBJECT> ve <STYLE> ile kullanılır.
  5. onBeforeUnload Bu işleyici, Internet Explorer'da da <BODY> etiketleriyle birlikte kullanılır.
  6. onStop Bu işleyici, Internet Explorer'da da <BODY> etiketleriyle birlikte kullanılır.

Pencere hareketleriyle etkinleştirilebilen olaylar

Etkinlik Listesi:

  1. onResize: Bu işleyici, kullanıcı bir pencereyi veya çerçeveyi veya özellikle Explorer için, bir katman gibi yüksekliği ve genişliği veya hatta konumu sabitlenmiş bir nesneyi küçülttüğünde veya büyüttüğünde etkinleştirilir;
  2. onScroll: PGUP ve PGDOWN tuşlarını kullanarak fare ile veya ayrıca doScroll yöntemi ile sayfa kaydırıldığında etkinleştirilir.
Uygulama etiketi

A, ADRES, APPLET, B, BÜYÜK, BLOCKQUOTE, BUTON, MERKEZ, CITE, KOD, özel, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, Hn, HR, I, IMG, GİRİŞ tipi = buton, GİRİŞ tipi = dosya, GİRİŞ tipi = resim, GİRİŞ tipi = şifre, GİRİŞ tipi = sıfırla, GİRİŞ tipi = gönder, GİRİŞ tipi = metin, ISINDEX, KBD, ETİKET, LEGEND, LI, LISTING, MARQUEE , MENÜ, NESNE, OL, P, PRE, S, SAMP, SELECT, KÜÇÜK, SPAN, STRIKE, GÜÇLÜ, ALT, SUP, TABLO, TEXTAREA, TT, U, UL, VAR, pencere, XMP

Belirli düğmelerle ilgili olaylar

  1. onSubmit: Bu işleyici, bir formun Gönder düğmesine tıklanarak etkinleştirilir;
  2. onReset: Bu işleyici, bir formun İptal düğmesine tıklanarak etkinleştirilir.
Uygulama etiketi

Yalnızca Form nesnesine uygulanabilir işleyici.

Hata işleme

JavaScript'in daha yeni sürümleri ( Internet Explorer 5 ve Netscape 6'da kullanılanlardan başlayarak ) bir hata işlemetry... catch yapısı olasılığını içerir .

Yapı , bir hata veya deyim tarafından oluşturulan istisnalarıtry ... catch ... finally yakalar . Sözdizimi aşağıdaki gibidir: throw

try  { 
   // İstisnaların oluşturulabileceği deyimler 
}  catch  ( error )  { 
   // İstisna durumunda çalıştırılacak deyimler 
}  son olarak  { 
   // Her iki durumda da daha sonra çalıştırılacak deyimler 
}

Başlangıçta, blok içindeki ifadeler yürütülür try. Bir istisna atılırsa, komut dosyasının kontrol akışı, istisnanın bir argüman olarak sunulmasıyla hemen catch blok ifadelerine iletilir error. Aksi takdirde, blok catchatlanır. Blok catchbittiğinde veya tryherhangi bir istisna atılmadan blok sonuna kadar yürütüldüğünde, bloktaki talimatlar yürütülür finally.

HTML5 ile entegrasyon

HTML5'in doğuşuyla birlikte JavaScript birçok yenilik kazandı [9] :

Konuşma tanıma

Kullanıcı, yazmak yerine bir form içinde konuşabilir:

< input  type = "text"  x - webkit - konuşma  /> 
var  tanıma  =  new  SpeechRecognition (); 
var  konuşmaRecognitionList  =  new  SpeechGrammarList ();

Sistem bildirimleri

Image
Web sayfası, bunlar gibi başka grafik türleri içerebilir. Bunlar sistem bildirimleri değildir.

Sistem bildirimleri, mevcut sayfanın dışında veya tarayıcı şu anda ön planda olmasa bile kısa bir mesaj görüntüleyerek kullanıcının dikkatini çekmek için tasarlanmıştır. Potansiyel istilaları göz önüne alındığında, bunları yalnızca site zaten kullanıcıdan belirli bir onay almışsa kullanmak mümkündür. [10] [11]

Sistem bildirimleri, adından da anlaşılacağı gibi, mevcut cihazla tutarlı bir şekilde entegre edilir (masaüstünde genellikle bir açılır penceredir , mobilde genellikle bildirim çubuğundadır, vb.). [11] [10]

Aşağıda, sistem bildirimleri için izin istemek ve birini görüntülemek için iki düğmeli minimal bir örnek verilmiştir. 

< button  id = "btn-soring" > İzin iste </ düğmesi > 
< button  id = "btn-notify" > Bildirimi göster </ düğmesi >

< komut dosyası >> 
düğme arama 
var  btnAsking  =  belge . getElementById (  'btn-soruyor'  ); 
var  btnNotify  =  belge . getElementById (  'btn-bildirim'  );

// tıklamadan sonra 
btnAsking izinleri talebini başlatır . addEventListener (  'tık' ,  function ()  { 
    Bildirim . requestPermission (); 
}  );

// tıkladıktan sonra bir 
btnNotify bildirimi gösteriyorum . addEventListener (  'tık' ,  function ()  { 
    yeni  Bildirim (  "Yeni bildirim!"  ); 
}  ); 
</ komut dosyası >

Resmi belgelerin derinleştirilmesi, aşağıdakiler de dahil olmak üzere daha fazla iyi uygulamanın gerçekleştirilmesine olanak tanır:

  • desteğin doğrulanması (örneğin , iOS'ta Safari , büyük destek sağlayamamasıyla ünlüdür) [12] [11]
  • önceki rızaya saygı (birden fazla rıza talebinde bulunmaktan kaçının)
  • muhalefete saygı (rıza yoksa bildirimleri açmaya çalışmaktan kaçının)

İzin isteğinin başlatılması, yalnızca kullanıcıyla bir etkileşimin ardından (bir düğmenin tıklanması gibi) gerçekleşmelidir. Birçok modern tarayıcı, etkileşim olmadığında yerel bildirimler için izin isteği açılır penceresinin açılmasını bile yasaklar. [11]

Düzenlenebilir içerik

Değişiklikler gerçek uzak web sayfasında kaydedilmeyecek, ancak yalnızca kullanıcının tarayıcısında görünecek olsa bile , kullanıcının web sayfasını bir WYSIWYG editörünün içindeymiş gibi değiştirme imkanı:

< div  contenteditable = " true " > 
Bu  metin  kullanıcı tarafından  düzenlenebilir  . < /div> belgesi . execCommand ( "defaultParagraphSeparator" , false , "p" );

Dışarı sürükleyin

Dosyaları bir web sayfasından bilgisayarınıza veya başka bir cihaza sürükleyip bırakın:

<a href =  "src / star.mp3" draggable = "true" class = "dragout" data - downloadurl = "MIMETYPE: FILENAME: ABSOLUTE_URI_TO_FILE"> indir < / a > var dosyalar = belge . querySelectorAll ( '.dragout' ); for ( var i = 0 , dosya ; dosya = dosyalar [ i ] ; ++ i ) { dosya . addEventListener ( 'dragstart' , function ( e ) { e . dataTransfer . setData ( 'DownloadURL' , bu . veri kümesi . downloadurl ); }, false ); }

Dosya Sistemi API'si

JavaScript kullanarak korumalı alanlı bir dosya sistemine zaman uyumsuz olarak bir dosya yazın:

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

    fileEntry . createWriter ( işlev ( yazar )  {  .

        yazar . onwrite  =  fonksiyon ( e )  {  ...  }; 
        yazar . onerror  =  fonksiyon ( e )  {  ...  };

        var  bb  =  new  BlobBuilder (); 
        bb . append ( 'Merhaba Dünya!' );

        yazar . write ( bb.getBlob ( ' metin / düz' ));

    },  opt_errorHandler ); 
  } 
},  opt_errorHandler );

Coğrafi konum

Kullanıcının bir uygulamaya veya bir web sayfasına pozisyonunu beyan etme imkanı:

if  ( navigator.coğrafi konum ) { navigator . _ coğrafi konum . getCurrentPosition ( function ( pozisyon ) { var latLng = yeni google . maps _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ ; map .setCenter ( latLng ) ; }, errorHandler ); }

Cihaz Oryantasyonu

Yerçekimi çekimi ile ilgili olarak cihazın yönelimindeki değişiklikleri gösteren verileri rapor edin. Özellikle, cep telefonları gibi taşınabilir cihazlar, bu bilgiyi, ekranı dik duracak şekilde otomatik olarak döndürmek için kullanabilir ve cihaz döndürüldüğünde, genişliği Majestelerinden daha büyük olacak şekilde web içeriğinin tam ekran görüntüsünü sunar.

pencere . addEventListener ( 'aygıt yönelimi' ,  işlev ( olay )  { 
  var  a  =  olay . alfa ; 
  var  b  =  olay . beta ; 
  var  g  =  olay . gamma ; 
},  yanlış );

Yerel Depolama, Uygulama Önbelleği ve Kota API'si

İnternet bağlantısı olmasa bile daha önce görüntülenen web sayfalarına göz atabilme:

kaydet Düğmesi . addEventListener ( 'tıklama' ,  işlev  ()  { 
  pencere . localStorage . setItem ( 'değer' ,  alan . değer ); 
  pencere . localStorage . setItem ( 'zaman damgası' ,  ( yeni  Tarih ())) getTime ()); 
},  false ); 
metin alanı . değer  =  pencere . yerelDepolama . getItem ( 'değer' );

< html  manifest = "cache.appcache" > 
pencere . uygulama Önbelleği . addEventListener ( 'updateready' ,  function ( e )  { 
  if  ( pencere . applicationCache . durum  ==  pencere . applicationCache . UPDATEREADY )  { 
    pencere . applicationCache . swapCache (); 
    if  ( onaylayın ( 'Bu sitenin yeni bir sürümü mevcut. Yükle o? ' ))  { 
      pencere . konum . yeniden yükle (); 
    } 
  } 
},  false );

Web SQL Veritabanı

SQL ile entegre yeni işlevler :

var  db  =  pencere . openDatabase ( "DBAdı" ,  "1.0" ,  "açıklama" ,  5 * 1024 * 1024 );  // 5MB 
db . işlem ( function ( tx )  { 
  tx . executeSql ( "Sınamadan SEÇ * SEÇ" ,  [],  SuccessCallback ,  errorCallback ); 
});

Dizine alınmış DB

Bu API, yüksek performanslı veri aramalarını sağlamak için dizinleri kullanır. Web depolama, daha az miktarda veri depolamak için kullanışlı olsa da, daha büyük miktarlarda yapılandırılmış veri depolamak için daha az kullanışlıdır. IndexedDB bir çözüm sunar.

var  idbRequest  =  pencere . indekslenmişDB . open ( 'Veritabanı Adı' ); 
idbRequest . onsuccess  =  fonksiyon ( olay )  { 
  var  db  =  olay . srcElement . sonuç ; 
  var  işlem  =  db . işlem ([],  IDBTransaction . READ_ONLY ); 
  var  curRequest  =  işlem . objectStore ( 'ObjectStore Adı' ). openCursor (); 
  curRequest . başarı  =  ...; 
};

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( kullanılmış ,  kalan )  { 
    konsol . log ( "Kullanılan kota:"  +  kullanılmış  +  ", kalan kota:"  +  kalan ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( kullanılmış )  { 
    konsol . log ( "Kullanılan kota:"  +  kullanılan  +  ", kalan kota:"  +  kalan ); 
  } 
);

Web Çalışanları

Web sayfasının performansını artırın:

var  işçi  =  yeni  Çalışan ( 'task.js' ); 
işçi . onmessage  =  fonksiyon ( olay )  {  uyarı ( olay . veri );  }; 
işçi . postMessage ( 'veri' ); 
görev . js : 
öz . onmessage  =  function ( olay )  { 
  // Biraz iş yap. 
  öz . postMessage ( "recv'd:"  +  event . data ); 
};

Web Soketi

Web üzerinden iki yönlü tam çift yönlü iletişim: Hem sunucu hem de istemci herhangi bir zamanda veya hatta aynı anda veri gönderebilir. HTTP başlıklarının ek yükü olmadan yalnızca verilerin kendisi gönderilir, bu da bant genişliğini önemli ölçüde azaltır.

var  socket  =  new  WebSocket ( 'www.sito.it' ); 
soket . onopen  =  fonksiyon ( olay )  { 
  soket . gönder ( 'Merhaba' ); 
}; 
soket . onmessage  =  fonksiyon ( olay )  {  uyarı ( olay . veri );  } 
soket . onclose  =  fonksiyon ( olay )  {  uyarı ( 'kapalı' );  }

Tam ekran web sayfaları 

if  ( elem.webkitRequestFullScreen ) { elem . _ _ webkitRequestFullScreen ( Element . ALLOW_KEYBOARD_INPUT ); } else if ( elem . mozRequestFullScreen ) { öğe . mozRequestFullScreen (); } else if ( requestFullScreen öğesi ) { öğe . requestFullScreen (); } : tam ekran - ata : kök { taşma : gizli ; _ } : tam ekran - ata { z - dizini : otomatik ; _ dönüştürme : yok ; geçiş : yok ; } ön : tam ekran { arka plan rengi : beyaz ; _ }

Yeni seçiciler (DOM API) 

var  el  =  belge . getElementById ( 'bölüm1' ); 
el . odak (); 
var  els  =  belge . getElementsByTagName ( 'div' ); 
el [ 0 ]. odak (); 
var  els  =  belge . getElementsByClassName ( 'bölüm' ); 
el [ 0 ]. odak (); 
var  els  =  belge . querySelectorAll ( "ul li: nth-child (tek)" ); 
var  tds  =  belge . querySelectorAll ( "table.test> tr> td" ); 
var  el  =  belge . querySelector ( "table.test> tr> td" );

Özelleştirilebilir nitelikler 

< div  id = "out"  data - id = "good"  data - name = "joe"  data - screen - name = "user1" > < / div> 
var  el  =  belge . sorguSeçici ( '#çıkış' ); 
el . setAttribute ( 'data-foo' ,  'bar' ); 
var  html  =  []; 
for  ( el . veri kümesindeki var  anahtarı  ) { html . push ( tuş , ':' , el . veri kümesi [ tuş ], '<br>' ); } el . innerHTML = html . katıl ( '' ); Çıktı : id : iyi isim : joe screenName : user1 foo : bar

Element.classList

Kullanım classList, bir öğenin sınıf listesine boşlukla sınırlandırılmış bir dize olarak erişmeye bir alternatiftir element.className.

< div  id = "main"  class = "yuvarlak gölge" > < / div> 
var  el  =  belge . sorguSeçici ( '#main' ). sınıfListesi ; 
el . ekle ( 'vurgula' ); 
el . kaldır ( 'gölge' ); 
el . geçiş ( 'vurgu' );

konsol . log ( el . içerir ( 'vurgu' ));  // yanlış 
konsol . log ( el . içerir ( 'gölge' ));  // yanlış 
konsol . log ( el . classList . toString ()  ==  el . className ); 
// çıktı: 
< div  id = "ana"  sınıf = "yuvarlak" > < / div>

Geçmiş API'si

Tam sayfa yenilemeye gerek kalmadan bir web sitesinin URL'sini değiştirme olanağı sunar . Bu, bir sayfanın bölümlerini, içeriğin belirgin şekilde farklı olacağı ve yeni bir URL'yi garanti edecek şekilde JavaScript ile yüklemek için kullanışlıdır.

bağlantı . addEventListener ( 'tıklama' ,  işlev ( olay )  { 
  geçmiş . pushState ( 'İletişim Sayfası Formu' ,  'İletişim Sayfası' ,  '/ iletişim' ); 
}); 
pencere . addEventListener ( 'popstate' ,  function ( olay )  { 
  belge . sorguSelector ( 'h1' . innerHTML  =  olay . durum ; 
});

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( kullanılmış ,  kalan )  { 
    konsol . log ( "Kullanılan kota:"  +  kullanılmış  +  ", kalan kota:"  +  kalan ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( kullanılmış )  { 
    konsol . log ( "Kullanılan kota:"  +  kullanılan  +  ", kalan kota:"  +  kalan ); 
  } 
);

3B web'de JS

JavaScript, 3D web arayüzleri oluşturmak için kütüphaneler ve çerçeveler içerir [13] .

WebGL örneği
WebGL örneği
function  ana ()  { 
  const  tuval  =  belge . sorguSeçici ( "#glCanvas" ); 
  const  gl  =  tuval . getContext ( "webgl" ); 
  if  ( gl  ===  null )  { 
    uyarı ( "Tarayıcınızı güncelleyin" ); 
    dönüş ; 
  } 
  g . clearColor ( 0.0 ,  0.0 ,  0.0 ,  1.0 ); 
  gl . temizle ( gl . COLOR_BUFFER_BIT ); 
} 
pencere . yük  =  ana ;

Alternatifler

HTML 5 ve CSS 3'ün doğuşuyla birlikte [14] [15] [16] [17] [18] [19] [20] 'nin oluşturulması gibi bazı olasılıklar :

  • galeriler / resim ve video slaytları
  • ipucu
  • açılır, sekme, akordeon ve geçiş menüleri
  • metin, bağlantılar ve resimler üzerinde fareyle üzerine gelindiğinde efektler
  • "Yapışkan" gezinme (sayfa kaydırılsa bile bir öğenin sabit kalmasına izin verebilirsiniz)
  • Tarayıcı kaydırma çubukları olmadan içeriğin yatay olarak kaydırılması
  • Aşamalı yükleme çubukları
  • Araç
  • sürükle ve bırak
  • hesap makineleri

HTML 4 ve CSS 2 [14] ile genellikle imkansız olan JavaScript kullanılmadan uygulanabilirler .

JavaScript Kullanıcı Arayüzü Örnekleri

Notlar

  1. ^ ECMA-262 13. Baskı , 262.ecma-international.org adresinde .
  2. ^ JavaScript'in Kısa Tarihi , Auth0 - Blog'da . Erişim tarihi: 28 Şubat 2020 .
  3. ^ ECMA-262 standardı
  4. ^ David Flanagan, JavaScript - Kılavuz , Milan, Apogeo, 2000, s.1, ISBN  88-7303-627-9 .
  5. ^ David Flanagan, JavaScript - Kılavuz , Milan, Apogeo, 2000, s.53, ISBN  88-7303-627-9 .
  6. ^ David Flanagan, JavaScript - Kılavuz , Milan, Apogeo, 2000, ISBN  88-7303-627-9 .
  7. ^ Flex Quick Start - Veri modellerini tanımlama | Adobe Developer Connection , adobe.com'da . Erişim tarihi: 28 Şubat 2020 .
  8. ^ Matt Neuburg , AppleScript: The Definitive Guide: Mac'inizde Komut Dosyası Oluşturma ve Otomatikleştirme , "O'Reilly Media, Inc.", 4 Ocak 2006, ISBN  978-1-4493-7915-5 . Erişim tarihi: 28 Şubat 2020 .
  9. ^ github.com'da slayt . _
  10. ^ a b Developer.mozilla.org adresindeki Bildirimler API'sini kullanma . _ 23 Haziran 2022'de alındı .
  11. ^ a b c d Notification.permission , developer.mozilla.org adresinde . _ _ 23 Haziran 2022'de alındı .
  12. ^ Bildirim API'si : requestPermission , caneuse.com'da . 23 Haziran 2022'de alındı .
  13. ^ 20 Etkileşimli 3D JavaScript Kitaplıkları ve Çerçeveleri - Bashooka , bashooka.com'da , 30 Mayıs 2019. Erişim tarihi : 18 Şubat 2021 .
  14. ^ a b JavaScript yerine CSS ile yapabileceğiniz 5 şey , LogRocket Blog , 29 Ekim 2019. Erişim tarihi : 9 Şubat 2021 .
  15. ^ ( TR ) 49 CSS Galerisi , Free Frontend'de . 9 Şubat 2021'de alındı .
  16. ^ LiveCode - HTML5 - Hesap Makinesi Uygulama Demosu , livecode.com'da . 9 Şubat 2021'de alındı .
  17. ^ Andrea Pacchiarotti, JavaScript ve jQuery olmadan HTML ve CSS'de Duyarlı menü , Andrea pacchiarotti üzerinde . 9 Şubat 2021'de alındı .
  18. ^ Web Tasarım Envato Tuts + 'da CSS ile Büyülü, Hareketli Araç İpuçları Nasıl Yapılır . 9 Şubat 2021'de alındı .
  19. ^ Web.dev'deki HTML5 Sürükle ve Bırak API'sini kullanarak . 9 Şubat 2021'de alındı .
  20. ^ Dosya Yükleme Düğmesi Nasıl Oluşturulur , w3schools.com adresinde . 9 Şubat 2021'de alındı .

Kaynakça

  • Michel Dreyfus: JavaScript (Addison Wesley Longman İtalya - 2002)
  • David Flanagan: JavaScript sürüm 1.5 (Apogeo - 2002)
  • Emily A. Vander Veer: JavaScript (CD-ROM ile) (Apogeo - 2001)
  • Roberto Abbate: JavaScript Öğrenmek (Master Editions - 2006)
  • Shelley Powers: JavaScript'te Programlama (New Techniques - 2007)
  • Douglas Crockford: JavaScript - En iyi kodu yazma teknikleri (New Techniques - 2009)

İlgili öğeler

Diğer projeler

Dış bağlantılar

" https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=129571785 " adresinden alındı