Prototip - Hızlı Kılavuz

Prototip nedir?

Prototip, dinamik web uygulamalarının geliştirilmesini kolaylaştırmayı amaçlayan bir JavaScript Framework'dür. Prototip, Sam Stephenson tarafından geliştirildi.

Prototype, DOM'u çok kolay ve eğlenceli bir şekilde ve aynı zamanda güvenli (tarayıcılar arası) bir şekilde işlemenizi sağlayan bir JavaScript kitaplığıdır.

Scriptaculous ve Rico gibi diğer kütüphaneler, widget'lar ve diğer son kullanıcı öğeleri oluşturmak için Prototype'ın temelleri üzerine inşa edilmiştir.

Prototype -

  • DOM öğelerini ve yerleşik türleri kullanışlı yöntemlerle genişletir.

  • Miras dahil olmak üzere sınıf tarzı OOP için yerleşik desteğe sahiptir.

  • Etkinlik yönetimi için gelişmiş desteğe sahiptir.

  • Güçlü Ajax özelliklerine sahiptir.

  • Tam bir uygulama geliştirme çerçevesi değildir.

  • Widget'lar veya tam bir standart algoritma seti veya G / Ç sistemleri sağlamaz.

Prototip Nasıl Kurulur?

Prototip, prototype.js adı verilen tek bir dosya olarak dağıtılır. Prototip kitaplığını kurmak için aşağıda belirtilen adımları izleyin -

  • En son sürümü kullanışlı bir pakette almak için indirme sayfasına (http://prototypejs.org/download/) gidin .

  • Şimdi, prototype.js dosyasını web sitenizin bir dizinine koyun, örneğin / javascript.

Artık web sayfalarınızda güçlü Prototip çerçevesini kullanmaya hazırsınız.

Prototip Kitaplığı Nasıl Kullanılır?

Şimdi, Prototip komut dosyasını aşağıdaki gibi ekleyebilirsiniz -

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

Misal

JavaScript'inizdeki DOM öğelerini almak için Prototype'ın $ () işlevini nasıl kullanabileceğinizi gösteren basit bir örnek:

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

Çıktı

Neden Bu Eğitim?

Prototype Framework için çok iyi bir dokümantasyon prototypejs.org adresinde mevcuttur, o zaman neden bu eğiticiye başvurulmalıdır!

Cevap şu ki, bu eğitimde en sık kullanılan tüm işlevleri bir araya getirdik. İkinci olarak, tüm faydalı yöntemleri, resmi sitede bulunmayan uygun örneklerle birlikte açıkladık.

Prototype Framework'ün ileri düzey bir kullanıcısıysanız, doğrudan resmi web sitesine atlayabilirsiniz, aksi takdirde bu eğitim sizin için iyi bir başlangıç ​​olabilir ve onu bir referans kılavuzu gibi kullanabilirsiniz.

Şimdi bir Dinamik Web Uygulaması geliştirmek için Prototip'in bizim için özel olarak neler yapabileceğine bakalım.

Çapraz Tarayıcı Desteği

JavaScript programlama yaparken, farklı Web Tarayıcılarını farklı şekilde ele almak gerekir. Prototip Kitaplığı, tüm uyumluluk sorunlarını çözecek şekilde yazılmıştır ve herhangi bir güçlük çekmeden çapraz tarayıcı programlaması yapabilirsiniz.

Belge Nesne Modeli

Prototip, DOM programlamanın bir kısmını kolaylaştıran yardımcı yöntemler sağlar. Prototip kullanarak, DOM'u çok kolay bir şekilde işleyebilirsiniz.

HTML Formları

Ajax ile, sürükle ve bırak gibi diğer girdi mekanizmaları, tarayıcı ve sunucu arasındaki bir görüşmenin parçası olarak kullanılabilir. Geleneksel JavaScript programlamayla, bu girdileri yakalamak ve sunucuya aktarmak zordur. Prototype, HTML formlarıyla çalışmak için bir dizi yardımcı program sağlar.

JavaScript Etkinlikleri

Prototype, olayları kodlarken bazı mükemmel tarayıcılar arası destek sağlar ve ayrıca olay işleme ile çalışmayı kolaylaştırmak için Function nesnesini genişletir.

Ajax Yardımcı Programları

Prototype'ın en önemli özelliği Ajax'ı desteklemesidir. Tüm büyük tarayıcılar, Ajax'ı bir ActiveX bileşeni veya yerel bir JavaScript nesnesi olarak mümkün kılan XMLHttpRequest nesnesinin bir sürümünü destekler.

Bununla birlikte, XMLHttpRequest, HTTP protokolünü çok düşük bir düzeyde ortaya çıkarır, bu da geliştiriciye çok fazla güç verir, ancak aynı zamanda basit şeyler yapmak için çok fazla kod yazmasını gerektirir.

Prototip, Ajax yardımcı nesnelerinin bir hiyerarşisini sağlamak için kendi nesne miras sistemini kullanır; daha genel temel sınıflar, en yaygın Ajax istek türlerinin tek bir satırda kodlanmasına olanak tanıyan daha odaklı yardımcılar tarafından alt sınıflandırılır.

Prototip kitaplığı, önceden tanımlanmış birçok nesne ve yardımcı program işleviyle birlikte gelir. Bu işlevleri ve nesneleri doğrudan JavaScript programınızda kullanabilirsiniz.

Bu yöntemler, verimli Prototip tabanlı JavaScript kodlamanın temel taşlarından biridir. Yöntemlere alışmak için onları incelemek için biraz zaman ayırın.

Bu bölüm, tüm bu yararlı yöntemleri örneklerle detaylandırmaktadır.

S.No. Yöntem ve Açıklama
1. $ ()

Bir dize varsa, belgedeki eşleşen kimliğe sahip öğeyi döndürür; aksi takdirde geçirilen öğeyi döndürür.
2. $$ ()

Rasgele sayıda CSS seçicisini (dizeleri) alır ve bunlardan herhangi biriyle eşleşen genişletilmiş DOM öğelerinin belge sırası dizisini döndürür.
3. A $ ()

Aldığı tek argümanı bir Array nesnesine dönüştürür.
4. F $ ()

Bir form denetiminin değerini döndürür. Bu, Form.Element.getValue öğesinin kullanışlı bir takma adıdır.
5. $ H ()

Nesneleri, ilişkilendirilebilir dizilere benzeyen sıralanabilir Hash nesnelerine dönüştürür.
6. $ R ()

Yeni bir ObjectRange nesnesi oluşturur.
7. $ w ()

Bir dizeyi bir Diziye böler ve tüm boşlukları sınırlayıcı olarak ele alır.
8. Bunları dene

Rasgele sayıda işlevi kabul eder ve bir hata atmayan ilk işlevin sonucunu döndürür.

document.getElementsByClassName

Bu yöntem, className CSS sınıf adına sahip tüm öğeleri alır (ve genişletir) .

Ancak, bu yöntem Prototype'ın son sürümlerinde kullanımdan kaldırılmıştır.

Eleman nesne DOM elemanlarını manipüle için çeşitli işlevler içerir.

Örneklerle birlikte tüm yardımcı program işlevlerinin listesi. Burada tanımlanan tüm yöntemler, $ () işlevi kullanılarak erişilen herhangi bir öğeye otomatik olarak eklenir.

Yani, Element.show ('firstDiv') yazmak; $ ['firstDiv']. show () yazmakla aynıdır;

Prototip Eleman Yöntemi

NOTE - Prototype.js'nin en az 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. absolutize ()

Öğeyi, sayfa düzenindeki konumunu değiştirmeden mutlak konumlandırılmış bir öğeye dönüştürür.
2. addClassName ()

Verilen CSS sınıf adını öğenin sınıf adlarına ekler.
3. addMethods ()

Daha sonra genişletilmiş öğelerin yöntemleri olarak kullanabileceğiniz Element nesnesine kendi yöntemlerinizi karıştırmayı mümkün kılar.
4. bitişik ()

Belirtilen seçicilerle eşleşen geçerli öğenin tüm kardeşlerini bulur.
5. atalar ()

Tüm öğelerin atalarını toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
6. childElements ()

Öğenin tüm alt öğelerini toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
7.

classNames()

Kullanımdan kaldırıldı. Elementin CSS sınıf adlarını okumak ve yazmak için kullanılan bir Numaralandırılabilir nesne olan ClassNames'in yeni bir örneğini döndürür.
8. cleanWhitespace ()

Yalnızca boşluk içeren tüm öğelerin metin düğümlerini kaldırır. Öğeyi döndürür.
9. clonePosition ()

Kaynağın konumunu ve / veya boyutlarını isteğe bağlı bağımsız değişken seçenekleriyle tanımlandığı şekilde öğeye klonlar.
10. cumulativeOffset ()

Belgenin sol üst köşesinden öğenin ofsetlerini döndürür.
11. cumulativeScrollOffset ()

İç içe kaydırmalı kaplarda bir öğenin kümülatif kaydırma uzaklığını hesaplar.
12. descendantOf ()

Öğenin atanın soyundan gelip gelmediğini kontrol eder.
13. torunları()

Tüm öğelerin soyundan gelenleri toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
14. aşağı()

CssRule ile eşleşen elemanın ilk neslini döndürür. Hiçbir cssRule sağlanmazsa, tüm alt öğeler dikkate alınır. Bu kriterlere hiçbir alt öğe uymuyorsa, tanımsız döndürülür.
15. boş()

Öğenin boş olup olmadığını test eder (yani, yalnızca boşluk içerir).
16. uzat ()

Element.Methods ve Element.Methods.Simulated içindeki tüm yöntemlerle öğeyi genişletir.
17. ateş()

Geçerli öğenin hedef olduğu özel bir olay tetikler.
18. firstDescendant ()

Bir öğe olan ilk çocuğu döndürür. Bu, herhangi bir düğümü döndürecek olan firstChild DOM özelliğinin tersidir.
19. getDimensions ()

Bir öğenin hesaplanan genişliğini ve yüksekliğini bulur ve bunları bir nesnenin anahtar / değer çiftleri olarak döndürür.
20.

getElementsByClassName

Kullanımdan kaldırıldı. CSS sınıfı className olan öğenin tüm soyundan gelenleri getirir ve bunları bir genişletilmiş öğeler dizisi olarak döndürür. Lütfen $$ () kullanın.
21.

getElementsBySelector

Kullanımdan kaldırıldı. Rasgele sayıda CSS seçicisi (dizesi) alır ve bunlardan herhangi biriyle eşleşen genişletilmiş öğe dizisi döndürür. Lütfen $$ () kullanın.
22. getHeight ()

Hesaplanan elemanın yüksekliğini bulur ve döndürür.
23. getOffsetParent ()

Öğenin en yakın konumlanmış atasını döndürür. Hiçbiri bulunamazsa gövde öğesi döndürülür.
24. getStyle ()

Öğenin verilen CSS özellik değerini döndürür. Özellik, CSS veya camelize formunda belirtilebilir.
25. getWidth ()

Hesaplanan eleman genişliğini bulur ve döndürür.
26. hasClassName ()

Öğenin verilen CSS sınıf adına sahip olup olmadığını kontrol eder.
27. saklamak()

Öğeyi gizler ve döndürür.
28. tanımla ()

Varsa, öğenin id özniteliğini döndürür veya benzersiz, otomatik oluşturulmuş bir kimliği ayarlar ve döndürür.
29.

immediateDescendants()

Kullanımdan kaldırıldı. Tüm öğenin hemen soyundan gelenleri (yani alt öğeleri) toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür. Lütfen childElements () kullanın.
30. ekle ()

Öğenin önüne, arkasına, üstüne veya altına içerik ekler.
31. incelemek ()

Öğenin hata ayıklamaya yönelik dize gösterimini döndürür.
32. makeClipping ()

Öğenin taşma değerini "gizli" olarak ayarlayarak, zayıf şekilde desteklenen CSS klibi özelliğini simüle eder. Öğeyi döndürür.
33. makePositioned ()

Başlangıç ​​konumu "statik" veya tanımlanmamışsa, öğenin CSS konumunu "göreli" olarak ayarlayarak CSS içeren bloğun kolayca oluşturulmasına izin verir. Öğeyi döndürür.
34. eşleşme()

Öğenin verilen CSS seçiciyle eşleşip eşleşmediğini kontrol eder.
35. Sonraki()

Verilen cssRule ile eşleşen öğenin takip eden kardeşini döndürür.
36. nextSiblings ()

Tüm öğelerin sonraki kardeşlerini toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
37. gözlemek()

Öğeye bir olay işleyicisini kaydeder ve öğeyi döndürür.
38. positionedOffset ()

Öğenin, en yakın konumlandırılmış atasına göre ofsetini döndürür.
39. önceki ()

Verilen cssRule ile eşleşen öğenin önceki kardeşini döndürür.
40. previousSiblings ()

Tüm öğelerin önceki kardeşlerini toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
41. readAttribute ()

Öznitelik belirtilmemişse, öğenin özniteliğinin değerini veya null değerini döndürür.
42. recursivelyCollect ()

İlişkisi özellik tarafından belirtilen öğeleri özyinelemeli olarak toplar.
43. relativize ()

Öğeyi, sayfa düzenindeki konumunu değiştirmeden göreceli olarak konumlandırılmış bir öğeye dönüştürür.
44. Kaldırmak ()

Belgeden öğeyi tamamen kaldırır ve döndürür.
45. removeClassName ()

Öğenin CSS sınıf adını kaldırır ve öğesini döndürür.
46. değiştir ()

Öğeyi html bağımsız değişkeninin içeriğiyle değiştirir ve kaldırılan öğeyi döndürür.
47. scrollTo ()

Pencereyi, öğe, görüntü alanının üst kısmında görünecek şekilde kaydırır. Öğeyi döndürür.
48. seç ()

Rasgele sayıda CSS seçicisi (dizesi) alır ve bunlardan herhangi biriyle eşleşen öğenin genişletilmiş neslinden oluşan bir dizi döndürür.
49. setOpacity ()

Çeşitli tarayıcılarda tutarsızlıklar üzerinde çalışırken bir öğenin görsel opaklığını ayarlar.
50. setStyle ()

Öğenin CSS stil özelliklerini değiştirir.
51. göstermek()

Öğeyi görüntüler ve döndürür.
52. kardeşler()

Öğenin tüm kardeşlerini toplar ve bunları genişletilmiş öğeler dizisi olarak döndürür.
53. stopObserving ()

İşleyicinin kaydını siler ve öğeyi döndürür.
54. geçiş ()

Öğenin görünürlüğünü değiştirir.
55. toggleClassName ()

Öğenin CSS sınıfAdı arasında geçiş yapar ve öğeyi döndürür.
56. undoClipping ()

Öğenin CSS taşma özelliğini, Element.makeClipping () uygulanmadan önceki değere geri ayarlar. Öğeyi döndürür.
57. undoPositioned ()

Öğeyi, Element.makePositioned uygulanmadan önceki durumuna döndürür. Öğeyi döndürür.
58. yukarı ()

Verilen cssRule ile eşleşen elemanın ilk atasını döndürür.
59. Güncelleme()

Öğenin içeriğini sağlanan newContent bağımsız değişkeniyle değiştirir ve öğeyi döndürür.
60. viewportOffset ()

Görüntü alanına göre öğenin X / Y koordinatlarını döndürür.
61. gözle görülür()

Öğenin görünür olup olmadığını belirten bir Boole değeri döndürür.
62. paketlemek()

Bir öğeyi diğerinin içine sarar, ardından sarmalayıcıyı döndürür.
63. writeAttribute ()

Karma veya ad / değer çifti olarak iletilen öznitelikleri ekler, belirtir veya kaldırır.

Prototip, aşağıdakileri sağlamak için yerel JavaScript numaralarını genişletir -

  • Number # succ aracılığıyla ObjectRange uyumluluğu.

  • Sayı # kez olan yakut benzeri sayısal döngüler.

  • Number # toColorPart ve Number # toPaddedString gibi basit yardımcı program yöntemleri.

İşte Numbers ile ilgili örneklerle birlikte tüm işlevlerin listesi.

Prototip Numarası Yöntemi

NOTE - 1.6'nın prototype.js sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. abs ()

Sayının mutlak değerini döndürür.
2. ceil ()

Sayıdan büyük veya ona eşit olan en küçük tamsayıyı döndürür.
3. kat ()

Sayıdan küçük veya ona eşit en büyük tamsayıyı döndürür.
4. yuvarlak ()

Sayıyı en yakın tam sayıya yuvarlar.
5. succ ()

Geçerli + 1 ile tanımlanan geçerli Sayının halefini döndürür. Sayıları Nesne Aralığı ile uyumlu hale getirmek için kullanılır.
6. zamanlar()

Ruby tarzı, normal bir [0..n] döngüsünü kapsüller.
7. toColorPart ()

Sayının 2 basamaklı onaltılık bir temsilini üretir (bu nedenle [0..255] aralığında olduğu varsayılır). CSS renk dizeleri oluşturmak için kullanışlıdır.
8. toJSON ()

Bir JSON dizesi döndürür.
9. toPaddedString ()

Sayıyı, dizenin uzunluğunun en az uzunluğa eşit olması için 0'larla doldurulmuş bir dizeye dönüştürür.

Prototype, String nesnesini önemsizden karmaşığa değişen bir dizi yararlı yöntemle geliştirir.

String ile ilgili örneklerle birlikte tüm fonksiyonların listesi.

Prototip Dizgi Yöntemleri

NOTE - 1.6'nın prototype.js sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. boş()

Dizenin 'boş' olup olmadığını, yani boş mu yoksa sadece boşluk mu içerdiğini kontrol eder.
2. deve boyası ()

Kesik çizgilerle ayrılmış bir dizeyi bir camelCase eşdeğerine dönüştürür. Örneğin, 'foo-bar', 'fooBar'a dönüştürülür.
3. büyük harfle yazmak ()

Bir dizenin ilk harfini büyük harfle yazarken diğerlerinin tümünü küçültür.
4. dasherize ()

Alt çizgi karakterinin ("_") her örneğini kısa çizgi ("-") ile değiştirir.
5. boş()

Dizenin boş olup olmadığını kontrol eder.
6. uçlarıWith ()

Dizenin alt dizeyle bitip bitmediğini kontrol eder.
7. escapeHTML ()

HTML özel karakterlerini varlık eşdeğerlerine dönüştürür.
8. evalJSON ()

Dizedeki JSON'yi değerlendirir ve sonuçta elde edilen nesneyi döndürür.
9. evalScripts ()

Dizede bulunan herhangi bir komut dosyası bloğunun içeriğini değerlendirir. Her komut dosyası tarafından döndürülen değeri içeren bir dizi döndürür.
10. extractScripts ()

Dizede bulunan herhangi bir betik bloğunun içeriğini çıkarır ve bunları bir dizi dizisi olarak döndürür.
11. gsub ()

Dizeyi, belirli bir desenin her geçtiği yerde, normal bir dizeyle, işlevin döndürülen değeriyle veya Şablon dizesiyle değiştirilmiş olarak döndürür.
12. Dahil etmek()

Dizenin bir alt dize içerip içermediğini kontrol eder.
13. incelemek ()

Dizenin hata ayıklamaya yönelik bir sürümünü döndürür.
14. enterpolate ()

Dizeye Şablon olarak davranır ve onu nesnenin özellikleriyle doldurur.
15. isJSON ()

Normal ifadeler kullanarak dizenin geçerli JSON olup olmadığını kontrol eder. Bu güvenlik yöntemi dahili olarak adlandırılır.
16. parseQuery ()

URI benzeri bir sorgu dizesini ayrıştırır ve parametre / değer çiftlerinden oluşan bir nesne döndürür.
17. taramak ()

Verilen desenin her oluşumunda yinelemeye izin verir.
18. ile başlar()

Dizenin alt dizeyle başlayıp başlamadığını kontrol eder.
19. şerit ()

Bir dizenin başındaki ve sonundaki tüm boşlukları çıkarır.
20. stripScripts ()

HTML komut dosyası bloğu gibi görünen herhangi bir şey dizisini çıkarır.
21. stripTags ()

Herhangi bir HTML etiketinin bir dizesini çıkarır.
22. alt()

Modelin ilk sayım oluşumlarını normal bir dizeyle, işlevin döndürülen değeriyle veya Şablon dizesiyle değiştirilmiş bir dize döndürür.
23. succ ()

Dahili olarak ObjectRange tarafından kullanılır. Dizenin son karakterini Unicode alfabesinde aşağıdaki karaktere dönüştürür.
24. zamanlar()

Dize sayım sürelerini birleştirir.
25. sıralamak()

Dizeyi karakter karakter böler ve sonucu içeren bir dizi döndürür.
26. toJSON ()

Bir JSON dizesi döndürür.
27. toQueryParams ()

URI benzeri bir sorgu dizesini ayrıştırır ve parametre / değer çiftlerinden oluşan bir nesne döndürür.
28. kesik ()

Bir dizeyi verilen uzunlukta keser ve ona bir sonek ekler (bunun yalnızca bir alıntı olduğunu gösterir).
29. vurgulamak()

Deve haline getirilmiş bir dizeyi, alt çizgiyle ("_") ayrılmış bir dizi kelimeye dönüştürür.
30. unescapeHTML ()

Etiketleri çıkarır ve özel HTML karakterlerinin varlık biçimlerini normal biçimlerine dönüştürür.
31. filtresini kaldır ()

Ajax JSON veya JavaScript yanıtlarının etrafındaki yorum sınırlayıcılarını çıkarır. Bu güvenlik yöntemi dahili olarak adlandırılır.

Prototip, tüm yerel JavaScript dizilerini birkaç güçlü yöntemle genişletir.

Bu iki şekilde yapılır -

  • Zaten bir ton yöntem getiren Enumerable modülünde karışır.

  • Bu bölümde belgelenen epeyce ekstra yöntem ekler.

Yineleyicileri Kullanma

Prototype tarafından sağlanan önemli bir destek, JavaScript'te java benzeri yineleyici kullanabilmenizdir. Aşağıdaki farkı görün -

Geleneksel bir yazma şekli for döngü -

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

Şimdi Prototip kullanıyorsanız, yukarıdaki kodu aşağıdaki gibi değiştirebilirsiniz -

myArray.each(function(item) {
   // Your code working on item here...
});

Array ile ilgili örneklerle birlikte tüm işlevlerin listesi.

Prototip Dizi Yöntemleri

NOTE - 1.6'nın prototype.js sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. açık()

Diziyi temizler (boş yapar).
2. klon()

Orijinal diziyi olduğu gibi bırakarak dizinin bir kopyasını döndürür.
3. kompakt()

Herhangi bir boş / tanımsız değer olmadan dizinin yeni bir sürümünü döndürür.
4. her biri()

Artan sayısal dizin sırasına göre dizi üzerinde yinelenir.
5. ilk()

Dizideki ilk öğeyi veya dizi boşsa tanımsız olarak döndürür.
6. düzleştirmek()

Dizinin "düz" (tek boyutlu) bir sürümünü döndürür.
7. ()

Var olan bir diziyi klonlar veya dizi benzeri bir koleksiyondan yeni bir tane oluşturur.
8. indeksi()

Dizideki ilk bağımsız değişkenin konumunu döndürür.
9. incelemek ()

Bir dizinin hata ayıklamaya yönelik dize gösterimini döndürür.
10. son()

Dizideki son öğeyi döndürür veya dizi boşsa tanımsız döndürür.
11. azalt ()

Dizileri azaltır: tek öğeli diziler benzersiz öğelerine dönüştürülürken, çok öğeli diziler dokunulmadan döndürülür.
12. tersine çevirmek()

Dizinin ters çevrilmiş sürümünü döndürür. Varsayılan olarak, orijinali doğrudan ters çevirir. Satır içi false olarak ayarlanmışsa, orijinal dizinin bir klonunu kullanır.
13. boyut()

Dizinin boyutunu döndürür.
14. sıralamak()

Bu, Enumerable'dan karma diziye dizinin yerel bir optimizasyonudur.
15. toJSON ()

Bir JSON dizesi döndürür.
16. uniq ()

Bir dizinin kopyasız bir sürümünü üretir. Yineleme bulunmazsa, orijinal dizi döndürülür.
17. olmadan ()

Dizinin, belirtilen değerlerden hiçbirini içermeyen yeni bir sürümünü üretir.

Hash, benzersiz anahtarları değerlere bağlayan ilişkisel bir dizi olarak düşünülebilir. Tek fark, indeks olarak bir sayıyı kullanmak yerine herhangi bir dizeyi indeks olarak kullanabilmenizdir.

Hash Oluşturma

Hash örneği oluşturmanın iki yolu vardır -

  • Yeni JavaScript anahtar kelimesini kullanın .
  • Prototip Fayda fonksiyonu kullanarak $ H .

Boş bir karma oluşturmak için herhangi bir yapıcı yöntemini bağımsız değişken olmadan da çağırırsınız.

Aşağıda hash oluşturmayı, değerleri ayarlamayı ve değerleri basit bir şekilde almayı gösteren örnek verilmiştir -

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototip, Hash'i kolaylıkla değerlendirmek için çok çeşitli yöntemler sunar. Bu eğitim, her yöntemi uygun örneklerle ayrıntılı olarak açıklayacaktır.

İşte Hash ile ilgili tüm yöntemlerin tam listesi.

Prototip Karma Yöntemleri

NOTE - En azından prototype.js'nin 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. klon()

Bir hash klonu döndürür.
2. her biri()

Karmadaki ad / değer çiftlerini yineler.
3. almak()

Hash anahtarının özelliğinin değerini döndürür.
4. incelemek ()

Karmanın hata ayıklamaya yönelik dize gösterimini döndürür.
5. anahtarlar()

Karma için bir anahtar dizisi (yani, özellik adları) sağlar.
6. birleştirmek()

Nesneyi hash ile birleştirir ve bu birleştirmenin sonucunu döndürür.
7. Kaldırmak()

Anahtarları bir hash'den kaldırır ve değerlerini döndürür. Bu yöntem 1.6 sürümünde kullanımdan kaldırılmıştır.
8. Ayarlamak()

Karma anahtarın özelliğini değer olarak ayarlar ve değeri döndürür.
9. toJSON ()

Bir JSON dizesi döndürür.
10. toObject ()

Klonlanmış bir vanilya nesnesi döndürür.
11. toQueryString ()

Bir hash'i URL kodlu sorgu dizesi gösterimine dönüştürür.
12. ayarlanmamış ()

Karma anahtarın özelliğini siler ve değerini döndürür.
13. Güncelleme()

Karmayı nesnenin anahtar / değer çiftleriyle günceller. Orijinal hash değiştirilecek.
14. değerler ()

Bir karmanın değerlerini toplar ve bir dizide döndürür.

Nesne , Prototip tarafından bir ad alanı olarak ve Nesne nesnesini kullanarak ilgili işlevi çağırmak için kullanılır . Bu, aşağıdaki iki şekilde kullanılır -

  • Basit bir geliştiriciyseniz, inceleme veya klonlama gibi mevcut işlevleri kullanabilirsiniz .

  • Prototype gibi kendi nesnelerini yaratmak veya nesneleri karma gibi keşfetmek isteyen biriyseniz, genişlemeye , anahtarlara ve değerlere döneceksiniz .

Prototip Nesne Yöntemleri

NOTE - En azından prototype.js'nin 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. klon()

Yüzeysel kopya kullanarak iletilen nesneyi klonlar (orijinalin tüm özelliklerini sonuca kopyalar).
2. uzat ()

Tüm özellikleri kaynaktan hedef nesneye kopyalar.
3. incelemek ()

Nesnenin hata ayıklamaya yönelik dize gösterimini döndürür.
4. isArray ()

Obj bir diziyse true, aksi takdirde false döndürür.
5. isElement ()

Obj, tip 1 DOM düğümü ise true, aksi takdirde false döndürür.
6. isFunction ()

Obj işlevi türündeyse true, aksi takdirde false döndürür.
7. isHash ()

Obj, Hash sınıfının bir örneğiyse true, aksi takdirde false döndürür.
8. numara()

Obj tip numarası ise true, aksi takdirde false döndürür.
9. isString ()

Obj string türündeyse true, aksi takdirde false döndürür.
10. isUndefined ()

Obj, tanımsız türündeyse doğru, aksi takdirde yanlış döndürür.
11. anahtarlar()

Herhangi bir nesneye bir Hash olarak davranır ve özellik adlarının listesini getirir.
12. toHTML ()

Varsa objenin toHTML yönteminin dönüş değerini döndürür, aksi takdirde nesneyi String.interpret aracılığıyla çalıştırır.
13. toJSON ()

Bir JSON dizesi döndürür.
14. toQueryString ()

Bir nesneyi URL kodlu sorgu dizesi gösterimine dönüştürür.
15. değerler ()

Herhangi bir nesneye Hash olarak davranır ve özellik değerlerinin listesini getirir.

Şablonlar, benzer nesnelerin grubunu biçimlendirmek ve bu nesneler için biçimlendirilmiş çıktı üretmek için kullanılır.

Prototype , iki yöntemi olan bir Template sınıfı sağlar -

  • Template()- Bu, bir şablon nesnesi oluşturmak ve şablonu uygulamak için eval () yöntemini çağırmak için kullanılan bir yapıcı yöntemidir .

  • evaluate() - Bu yöntem, bir nesneyi biçimlendirmek için bir şablon uygulamak için kullanılır.

Biçimlendirilmiş çıktıyı oluşturmak için üç adım vardır.

  • Create a template- Bu, önceden biçimlendirilmiş metin oluşturmayı içerir. Bu metin, biçimlendirilmiş içeriğin yanı sıra#{fieldName}değerler. Bunlar#{fieldName}zaman, gerçek rakam ile değiştirilecektir () değerlendirmek yöntem, gerçek değerler ile çağrılır.

  • Defining actual values- Bu, Anahtarlar ve Değerler biçiminde gerçek değerler oluşturmayı içerir. Bu Anahtarlar şablonda eşlenecek ve karşılık gelen değerlerle değiştirilecektir.

  • Mapping Keys and replacing Values- Bu, eval () ' un çağrılacağı ve biçimlendirilmiş nesnede bulunan tüm anahtarların tanımlanan değerlerle değiştirileceği son adımdır .

Örnek 1

Aşama 1

Bir şablon oluşturun.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

Adım 2

Biçimlendirilmiş bir çıktıya sahip olmak için yukarıdaki nesnede geçirilecek olan değer setimizi hazırlayın.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

Aşama 3

Son adım, şablondaki tüm değerleri doldurmak ve aşağıdaki gibi nihai sonucu üretmektir -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

Öyleyse, tüm bu üç adımı bir araya getirelim -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Çıktı

Numaralandırılabilir sınıf, numaralandırmalar için çok sayıda yararlı yöntem sağlar. Numaralandırmalar, değerler koleksiyonu olarak hareket eden nesnelerdir.

Numaralandırma yöntemleri çoğunlukla dizileri ve karmaları numaralandırmak için kullanılır . Numaralandırma yöntemlerini kullanabileceğiniz ObjectRange ve çeşitli DOM veya AJAX ile ilgili nesnelerin yanı sıra başka nesneler de vardır .

Bağlam Parametresi

Bir yineleyici alan her Enumerable yöntemi, bağlam nesnesini bir sonraki (isteğe bağlı) parametre olarak alır. Bağlam nesnesi, yineleyicinin bağlanacağı şeydir, dolayısıylathis içindeki anahtar kelime nesneyi gösterecektir.

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

Bu, aşağıdaki sonucu verecektir -

Çıktı

{ foo: 0, bar: 1, baz: 2}

Verimli Kullanmak

  • Tüm elemanlarda aynı yöntemi çağırmanız gerektiğinde, invoke () yöntemini kullanın.

  • Tüm elemanlarda aynı özelliği getirmeniz gerektiğinde, pluck () yöntemini kullanın.

  • FindAll / select yöntemler, belirli bir yüklemi eşleşen tüm unsurları almak. Tersine, reject () yöntemi bir yüklemle eşleşmeyen tüm öğeleri alır. Her iki kümeye de ihtiyaç duyduğunuz özel durumda, iki kez döngü yapmaktan kaçınabilirsiniz: sadece partition () yöntemini kullanın .

İşte Numaralandırılabilir ile ilgili tüm yöntemlerin tam listesi.

Prototip Numaralandırılabilir Yöntemler

NOTE - Prototype.js'nin en azından 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. herşey()

Doğrudan veya sağlanan yineleyici tarafından yapılan hesaplama yoluyla, tüm öğelerin boole eşdeğeri true olup olmadığını belirler.
2. hiç()

Doğrudan veya sağlanan yineleyici tarafından yapılan hesaplama yoluyla, en az bir öğenin boolean-true değerine eşdeğer olup olmadığını belirler.
3. toplamak()

Yineleyiciyi her öğeye uygulamanın sonuçlarını döndürür. Harita olarak takma ad ().
4. tespit ()

Yineleyicinin true döndürdüğü ilk öğeyi bulur. Find () yöntemi ile takma ad.
5. her biri()

Tüm öğeleri genel bir şekilde yinelemenize izin verir, ardından Numaralandırılabilir'i döndürür, böylece zincir aramaya izin verir.
6. eachSlice ()

Öğeleri belirli bir boyuta göre parçalar halinde gruplandırır; son yığın muhtemelen daha küçüktür.
7. girdileri()

Daha genel toArray yöntemi için takma ad.
8. bul ()

Yineleyicinin true döndürdüğü ilk öğeyi bulur. Detect () için kolaylık takma adı.
9. hepsini bul()

Yineleyicinin true döndürdüğü tüm öğeleri döndürür. Select () olarak takma ad.
10. grep ()

Filtreyle eşleşen tüm öğeleri döndürür. Yineleyici sağlanırsa, seçilen her öğe için döndürülen değeri üretmek için kullanılır.
11. inGroupsOf ()

Öğeleri, gerekirse son parçayı doldurmak için belirli bir değer kullanarak sabit boyutlu parçalar halinde gruplar.
12. Dahil etmek()

== karşılaştırma operatörüne bağlı olarak, belirli bir nesnenin Numaralandırılabilir'de olup olmadığını belirler. Üye olarak takma ad ().
13. enjekte ()

Yineleyicinin ardışık sonuçlarına dayalı olarak artımlı bir sonuç değeri oluşturur.
14. çağırmak()

Each () veya Collect () için ortak bir kullanım durumu için optimizasyon: tüm öğeler için aynı potansiyel argümanlarla aynı yöntemi çağırmak.
15. harita()

Yineleyiciyi her öğeye uygulamanın sonuçlarını döndürür. Collect () için kolaylık takma adı.
16. max ()

En fazla öğeyi (veya öğe tabanlı hesaplamayı) veya numaralandırma boşsa tanımsız değerini döndürür. Öğeler ya doğrudan ya da önce yineleyici uygulanarak ve döndürülen değerleri karşılaştırarak karşılaştırılır.
17. üye ()

== karşılaştırma operatörüne bağlı olarak, belirli bir nesnenin Numaralandırılabilir'de olup olmadığını belirler. İnclude () için kolaylık takma adı.
18. dk ()

Minimum öğeyi (veya öğe tabanlı hesaplamayı) veya numaralandırma boşsa tanımsız değerini döndürür. Öğeler ya doğrudan ya da önce yineleyici uygulanarak ve döndürülen değerleri karşılaştırarak karşılaştırılır.
19. bölüm ()

Öğeleri iki gruba ayırır: doğru kabul edilenler ve yanlış kabul edilenler.
20. yolmak()

Collect () ortak kullanım durumu için optimizasyon: tüm öğeler için aynı özelliği getirme. Özellik değerlerini döndürür.
21. reddet ()

Yineleyicinin yanlış döndürdüğü tüm öğeleri döndürür.
22. seç ()

FindAll () yöntemi takma adı.
23. boyut()

Numaralandırmanın boyutunu döndürür.
24. göre sırala()

Yineleyici tarafından her bir öğe için hesaplanan ölçütlere göre öğelerin özel sıralı bir görünümünü sağlar.
25. sıralamak()

Numaralandırmanın Dizi temsilini döndürür. Giriş olarak takma ad ().
26. zip ()

Birlikte fermuarlar (bir pantolonun üzerindeki fermuarı düşünün) 2 + sekans, bir dizi tuple sağlar. Her demet, orijinal sıra başına bir değer içerir.

Etkinlik yönetimi, tarayıcılar arası komut dosyası oluşturmanın önündeki en büyük zorluklardan biridir. Her tarayıcının tuş vuruşlarını işlemek için farklı yaklaşımları vardır.

Prototype Framework, tüm tarayıcılar arası uyumluluk sorunlarını ele alır ve sizi olay yönetimiyle ilgili tüm sorunlardan uzak tutar.

Prototype Framework, tümü geçerli olay nesnesini bir argüman olarak alan ve tüm büyük tarayıcılarda istediğiniz bilgileri mutlu bir şekilde üreten yöntemlerle dolu Olay ad alanı sağlar .

Olay ad alanı ayrıca klavyeyle ilgili olaylarda kullanabileceğiniz standartlaştırılmış bir anahtar kod listesi sağlar. Aşağıdaki sabitler ad alanında tanımlanmıştır -

S.No. Anahtar Sabit ve Açıklama
1.

KEY_BACKSPACE

Geri boşluk tuşunu temsil eder.
2.

KEY_TAB

Sekme anahtarını temsil eder.
3.

KEY_RETURN

Dönüş anahtarını temsil eder.
4.

KEY_ESC

Esc anahtarını temsil eder.
5.

KEY_LEFT

Sol anahtarı temsil edin.
6.

KEY_UP

Anahtarı temsil edin.
7.

KEY_RIGHT

Sağ anahtarı temsil edin.
8.

KEY_DOWN

Aşağı tuşunu temsil edin.
9.

KEY_DELETE

Silme anahtarını temsil eder.
10.

KEY_HOME

Ev anahtarını temsil edin.
11.

KEY_END

Bitiş anahtarını temsil edin.
12.

KEY_PAGEUP

Sayfa yukarı anahtarını temsil edin.
13.

KEY_PAGEDOWN

Sayfa aşağı anahtarını temsil eder.

Olaylar Nasıl Yönetilir

Başlamadan önce, bir olay yöntemi kullanmanın bir örneğini görelim. Bu örnek, olayın gerçekleştiği DOM öğesinin nasıl yakalanacağını gösterir.

Misal

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Çıktı

İşte ilgili tüm yöntemlerin tam listesi Event. Büyük olasılıkla çok kullanmaya konum fonksiyonlardır gözlemlemek , eleman ve durdurma .

Prototip Etkinlik Yöntemleri

NOTE - Prototype.js'nin en azından 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. öğe ()

Etkinliğin gerçekleştiği DOM öğesini döndürür.
2. uzat ()

Uzattı olayı Event.Methods bulunan yöntemlerin hepsi ile.
3. findElement ()

Etkinliğin meydana geldiği olandan yukarıya doğru, belirli bir etiket adına sahip ilk DOM öğesini döndürür.
4. isLeftClick ()

Düğmeyle ilgili bir fare olayının "sol" (birincil, gerçekte) düğmeyle ilgili olup olmadığını belirler.
5. gözlemek()

Bir DOM öğesine bir olay işleyicisini kaydeder.
6. işaretçiX ()

Bir fare olayı için mutlak yatay konumu döndürür.
7. pointerY ()

Bir fare olayı için mutlak dikey konumu döndürür.
8. Dur()

Olayın yayılmasını durdurur ve varsayılan eyleminin sonunda tetiklenmesini engeller.
9. stopObserving ()

Bir olay işleyicisinin kaydını siler.
10. unloadCache ()

Gözlem aracılığıyla kaydedilen tüm olay işleyicilerin kaydını siler. Sizin için otomatik olarak kablolanır. 1.6'dan beri mevcut değil.

Prototip, HTML formlarını yönetmenin kolay bir yolunu sağlar. Prototype's Form bir ad alanı ve formla ilgili her şey için bir modüldür, form manipülasyonu ve serileştirme iyiliği ile doludur.

Formları bir bütün olarak ele alan yöntemleri tutarken, alt modülü Form.Element belirli form kontrolleriyle ilgilenir.

İşte ilgili tüm yöntemlerin tam listesi Form Element.

Prototip Form Yöntemleri

NOTE - Prototype.js'nin en azından 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. devre dışı bırak ()

Formu bir bütün olarak devre dışı bırakır. Form kontrolleri görünür ancak düzenlenemez olacaktır.
2. etkinleştirme()

Tamamen veya kısmen devre dışı bırakılmış bir formu etkinleştirir.
3. findFirstElement ()

İlk gizli olmayan, devre dışı bırakılmamış form denetimini bulur.
4. focusFirstElement ()

Formun ilk öğesine klavye odağı verir.
5. getElements ()

Bir formdaki tüm form denetimlerinin bir koleksiyonunu döndürür.
6. getInputs ()

Bir formdaki tüm INPUT öğelerinin bir koleksiyonunu döndürür. Bu özniteliklerde aramayı kısıtlamak için isteğe bağlı tür ve ad bağımsız değişkenlerini kullanın.
7. istek()

Formu bir Ajax aracılığıyla seri hale getirmek ve göndermek için uygun bir yöntem. Formun eylem özniteliğinin URL'sini isteyin. Options parametresi Ajax.Request örneğine iletilerek HTTP yönteminin geçersiz kılınmasına ve ek parametrelerin belirtilmesine izin verilir.
8. Sıfırla()

Bir formu varsayılan değerlerine sıfırlar.
9. seri hale getir ()

Form verilerini Ajax istekleri (varsayılan davranış) için uygun bir dizeye serileştirin veya isteğe bağlı getHash doğru olarak değerlendirilirse, anahtarların form kontrol adları ve değerlerin veri olduğu bir nesne karması.
10. serializeElements ()

Bir form öğeleri dizisini Ajax istekleri için uygun bir dizeye serileştirin (varsayılan davranış) veya isteğe bağlı getHash doğru olarak değerlendirilirse, anahtarların form kontrol adları ve değerlerin veri olduğu bir nesne karması.

JSON'a Giriş

JSON (JavaScript Object Notation), hafif bir veri değişim formatıdır.

  • JSON, insanlar için okuması ve yazması kolaydır.

  • JSON, makinelerin ayrıştırması ve oluşturması için kolaydır.

  • JSON, JavaScript Programlama Dili'nin bir alt kümesini temel alır.

  • JSON, özellikle tüm web üzerindeki API'ler tarafından kullanılır ve Ajax isteklerinde XML'e hızlı bir alternatiftir.

  • JSON, tamamen dilden bağımsız bir metin formatıdır.

Prototip 1.5.1 ve sonraki sürüm, JSON kodlama ve ayrıştırma desteği içerir.

JSON Kodlaması

Prototip, kodlama için aşağıdaki yöntemleri sağlar -

NOTE - En azından prototype.js'nin 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. Number.toJSON ()

Verilen Sayı için bir JSON dizesi döndürür.
2. String.toJSON ()

Verilen Dize için bir JSON dizesi döndürür.
3. Array.toJSON ()

Verilen Dizi için bir JSON dizesi döndürür.
4. Hash.toJSON ()

Verilen Hash için bir JSON dizesi döndürür.
5. Date.toJSON ()

Tarihi bir JSON dizesine dönüştürür (JSON tarafından kullanılan ISO biçimini izleyerek).
6. Object.toJSON ()

Verilen Nesne için bir JSON dizesi döndürür.

Kodlamanız gereken veri türünden emin değilseniz, en iyi seçeneğiniz Object.toJSON'u kullanmaktır -

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

Bu, aşağıdaki sonucu verecektir -

'{"name": "Violet", "occupation": "character", "age": 25}'

Ayrıca, özel nesneler kullanıyorsanız, Object.toJSON tarafından kullanılacak kendi toJSON yönteminizi ayarlayabilirsiniz . Örneğin -

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

Bu, aşağıdaki sonucu verecektir -

'"My name is John and I am 49 years old."'

JSON ayrıştırılıyor

JavaScript'te, JSON ayrıştırması genellikle bir JSON dizesinin içeriği değerlendirilerek yapılır. Prototip, bununla başa çıkmak için String.evalJSON'u tanıtır . Örneğin -

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

Bu, aşağıdaki sonucu verecektir -

"Violet"

JSON'u Ajax ile kullanma

JSON'u Ajax ile kullanmak çok basittir. Yalnızca aktarımın responseText özelliğinde String.evalJSON'u çağırın -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

Verileriniz güvenilmeyen bir kaynaktan geliyorsa, temizlediğinizden emin olun -

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

AJAX'a Giriş

AJAX, Asenkron JavaScript ve XML. AJAX, XML, HTML, CSS ve Java Script yardımıyla daha iyi, daha hızlı ve daha etkileşimli web uygulamaları oluşturmak için yeni bir tekniktir.

AJAX hakkında tam bir anlayış için, lütfen basit AJAX Eğitimimizi inceleyin .

AJAX için Prototip Desteği

Prototip çerçevesi, Ajax çağrılarıyla çok kolay ve eğlenceli bir şekilde ve aynı zamanda güvenli (tarayıcılar arası) başa çıkmanızı sağlar. Prototip ayrıca bir sunucudan döndürülen JavaScript koduyla akıllı bir şekilde ilgilenir ve sorgulama için yardımcı sınıflar sağlar.

Ajax işlevselliği, genel Ajax nesnesinde bulunur . Bu nesne, AJAX isteklerini ve yanıtlarını kolay bir şekilde ele almak için gerekli tüm yöntemleri sağlar.

AJAX İsteği

Gerçek istekler, Ajax.Request () nesnesinin örnekleri oluşturularak yapılır .

new Ajax.Request('/some_url', { method:'get' });

İlk parametre, isteğin URL'sidir; ikincisi, seçenekler karmasıdır. Yöntem seçeneği, kullanılacak HTTP yöntemini ifade eder; varsayılan yöntem POST'tur.

AJAX Yanıtı Geri Aramaları

Ajax istekleri varsayılan olarak eşzamansızdır, yani bir yanıttan gelen verileri işleyecek geri aramalara sahip olmanız gerekir. Geri çağırma yöntemleri, bir istekte bulunurken seçenekler karmasında iletilir -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Burada, hash'de iki geri çağırma geçirilir -

  • onSuccess
  • onFailure

Yukarıdaki iki çağrıdan herhangi biri yanıt durumuna göre buna göre çağrılır. Her ikisine de iletilen ilk parametre , sırasıyla responseText ve responseXML özelliklerini kullanabileceğiniz yerel xmlHttpRequest nesnesidir .

Her iki geri aramayı da belirtebilirsiniz, bir veya hiçbiri - bu size bağlıdır. Mevcut diğer geri aramalar şunlardır:

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

Diğer geri aramaları gönderirken bir istisna olduğunda ateşlenen onException haricinde, hepsi xmlHttpRequest aktarımının belirli bir durumuyla eşleşir .

NOTE- onUninitialized, onLoading, onLoaded ve onInteractive geri aramaları tüm tarayıcılar tarafından tutarlı bir şekilde uygulanmaz. Genel olarak, bunları kullanmaktan kaçınmak en iyisidir.

Prototip AJAX Yöntemleri

Ajax nesnesi , AJAX isteklerini ve yanıtlarını kolay bir şekilde işlemek için gerekli tüm yöntemleri sağlar. AJAX ile ilgili tüm yöntemlerin tam listesi burada.

NOTE - Prototype.js'nin en azından 1.6 sürümüne sahip olduğunuzdan emin olun.

S.No. Yöntem ve Açıklama
1. Ajax Seçenekleri

Bu bir yöntem değildir, ancak tüm AJAX talep edenleri ve geri aramaları tarafından paylaşılan tüm temel seçenekleri ayrıntılarıyla belirtir.
2. Ajax.PeriodicalUpdater ()

Periyodik olarak bir AJAX isteği gerçekleştirir ve bir kapsayıcının içeriğini yanıt metnine göre günceller.
3. Ajax.Request ()

Bir AJAX isteği başlatır ve işler.
4. Ajax.Responders ()

Prototip tabanlı AJAX isteklerinin her adımı hakkında bilgilendirilen küresel dinleyicilerden oluşan bir havuz.
5. Ajax.Response ()

Tüm Ajax geri aramalarının ilk bağımsız değişkeni olarak iletilen nesne.
6. Ajax.Updater ()

Bir AJAX isteği gerçekleştirir ve bir kapsayıcının içeriğini yanıt metnine göre günceller.

Prototip Aralıkları, bir değerler aralığını temsil eder. Bir aralık elde etmenin tercih edilen yolu,$R yardımcı program işlevi.

Aşağıdaki gibi basit bir sözdizimi kullanarak çok sayıda değer oluşturabilirsiniz -

$R(1, 10).inspect();

$R('a', 'e').inspect();

Bu, aşağıdaki sonucu verecektir -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

İnclude () Yöntemi

Bu yöntem, değerin aralığa dahil edilip edilmediğini belirler -

Sözdizimi

Range.include(value);

Geri dönüş değeri

Değer dahil edilirse, aksi takdirde yanlış bir gerçek değer döndürür.

Misal

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Çıktı

Çoğu zaman, bir işlevi belirli bir süre sonra birçok kez yürütmek gerekir. Örneğin, belirli bir süre sonra ekranınızı yenilemek isteyebilirsiniz. Prototip, PeriodicalExecuter nesnesini kullanarak uygulamak için basit bir mekanizma sağlar .

PeriodicalExecuter tarafından sağlanan avantaj , geri arama işlevinin birden çok paralel yürütülmesine karşı sizi korumasıdır.

Periyodik Yürütücü Oluşturma

Yapıcı iki argüman alır -

  • Geri arama işlevi.
  • Yürütmeler arasındaki aralık (saniye cinsinden).

Bir PeriodicalExecuter başlatıldığında, sayfa kaldırılana veya yürütücü stop () yöntemi kullanılarak durdurulana kadar süresiz olarak tetiklenir .

Misal

Aşağıda, "iptal" düğmesine basarak onu durdurana kadar her 5 saniyede bir diyalog kutusu açacak olan örnek verilmiştir.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

Çıktı

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved