Prototipe - Panduan Cepat

Apa itu Prototipe?

Prototipe adalah Kerangka JavaScript yang bertujuan untuk memudahkan pengembangan aplikasi web dinamis. Prototipe dikembangkan oleh Sam Stephenson.

Prototipe adalah pustaka JavaScript, yang memungkinkan Anda untuk memanipulasi DOM dengan cara yang sangat mudah dan menyenangkan yang juga aman (lintas-browser).

Scriptaculous dan pustaka lainnya, seperti Rico dibangun di atas fondasi Prototipe untuk membuat widget dan hal-hal pengguna akhir lainnya.

Prototype -

  • Memperluas elemen DOM dan tipe bawaan dengan metode yang berguna.

  • Memiliki dukungan bawaan untuk OOP bergaya kelas termasuk warisan.

  • Memiliki dukungan lanjutan untuk manajemen acara.

  • Memiliki fitur Ajax yang kuat.

  • Bukan kerangka pengembangan aplikasi yang lengkap.

  • Tidak menyediakan widget atau kumpulan lengkap algoritme standar atau sistem I / O.

Bagaimana cara menginstal Prototipe?

Prototipe didistribusikan sebagai file tunggal yang disebut prototype.js. Ikuti langkah-langkah yang disebutkan di bawah ini untuk menyiapkan pustaka prototipe -

  • Pergi ke halaman unduh (http://prototypejs.org/download/) untuk mendapatkan versi terbaru dalam paket yang nyaman.

  • Sekarang, letakkan file prototype.js di direktori website Anda, misal / javascript.

Anda sekarang siap menggunakan kerangka Prototipe yang kuat di halaman web Anda.

Bagaimana Cara Menggunakan Prototipe Library?

Sekarang, Anda dapat memasukkan skrip Prototipe sebagai berikut -

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

Contoh

Berikut adalah contoh sederhana yang menunjukkan bagaimana Anda dapat menggunakan fungsi $ () Prototipe untuk mendapatkan elemen DOM di JavaScript Anda -

<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>

Keluaran

Mengapa Tutorial Ini?

Dokumentasi yang sangat bagus untuk Kerangka Prototipe tersedia di prototypejs.org lalu mengapa harus merujuk ke tutorial ini!

Jawabannya adalah kami telah menggabungkan semua fungsi yang paling umum digunakan dalam tutorial ini. Kedua, kami telah menjelaskan semua metode yang berguna beserta contoh yang sesuai, yang tidak tersedia di situs resmi.

Jika Anda adalah pengguna tingkat lanjut Kerangka Prototipe, maka Anda dapat langsung melompat ke situs web resmi, jika tidak tutorial ini bisa menjadi awal yang baik untuk Anda dan Anda dapat menggunakannya seperti manual referensi.

Sekarang mari kita lihat apa yang dapat dilakukan Prototipe khusus untuk kita mengembangkan Aplikasi Web Dinamis.

Dukungan Lintas Browser

Saat melakukan pemrograman JavaScript, diperlukan untuk menangani Browser Web yang berbeda secara berbeda. Prototipe Library telah ditulis sedemikian rupa sehingga menangani semua masalah kompatibilitas dan Anda dapat melakukan pemrograman lintas browser tanpa kesulitan.

Model Objek Dokumen

Prototipe menyediakan metode pembantu yang meringankan beberapa ketegangan pemrograman DOM. Menggunakan Prototipe, Anda dapat memanipulasi DOM dengan sangat mudah.

Formulir HTML

Dengan Ajax, mekanisme input lain seperti drag and drop, dapat digunakan sebagai bagian dari percakapan antara browser dan server. Dengan pemrograman JavaScript konvensional, sulit untuk menangkap input ini dan meneruskannya ke server. Prototipe menyediakan seperangkat utilitas untuk bekerja dengan formulir HTML.

Acara JavaScript

Prototipe menyediakan beberapa dukungan lintas-browser yang sangat baik saat melakukan pengkodean acara, dan juga memperluas objek Fungsi untuk membuatnya mudah bekerja dengan penanganan acara.

Utilitas Ajax

Fitur terpenting dari Prototipe adalah dukungannya untuk Ajax. Semua browser utama mendukung versi objek XMLHttpRequest yang memungkinkan Ajax, baik sebagai komponen ActiveX atau sebagai objek JavaScript asli.

XMLHttpRequest, bagaimanapun, mengekspos protokol HTTP pada tingkat yang sangat rendah, yang memberi pengembang banyak kekuatan, tetapi juga mengharuskannya untuk menulis banyak kode untuk melakukan hal-hal sederhana.

Prototipe menggunakan sistem pewarisan objeknya sendiri untuk menyediakan hierarki objek pembantu Ajax, dengan kelas dasar yang lebih umum disubkelas oleh pembantu yang lebih terfokus yang memungkinkan jenis permintaan Ajax yang paling umum dikodekan dalam satu baris.

Pustaka Prototipe hadir dengan banyak objek yang telah ditentukan dan fungsi utilitas. Anda dapat menggunakan fungsi dan objek tersebut secara langsung dalam pemrograman JavaScript Anda.

Metode ini adalah salah satu pilar dari pengkodean JavaScript berbasis Prototipe yang efisien. Luangkan waktu untuk mempelajarinya agar terbiasa dengan metodenya.

Bab ini merinci semua metode yang berguna ini dengan contoh.

S.No. Metode & Deskripsi
1. $ ()

Jika diberikan dengan string, mengembalikan elemen dalam dokumen dengan ID yang cocok; jika tidak mengembalikan elemen yang diteruskan.
2. $$ ()

Mengambil jumlah acak pemilih CSS (string) dan mengembalikan larik urutan dokumen dari elemen DOM diperpanjang yang cocok dengan salah satunya.
3. $ A ()

Mengonversi argumen tunggal yang diterimanya menjadi objek Array.
4. $ F ()

Mengembalikan nilai dari kontrol formulir. Ini adalah alias praktis dari Form.Element.getValue.
5. $ H ()

Mengubah objek menjadi objek Hash yang tak terhitung banyaknya yang menyerupai array asosiatif.
6. $ R ()

Membuat objek ObjectRange baru.
7. $ w ()

Memisahkan string menjadi Array, memperlakukan semua spasi sebagai pembatas.
8. Coba ini

Menerima jumlah fungsi yang berubah-ubah dan mengembalikan hasil dari yang pertama yang tidak menimbulkan kesalahan.

document.getElementsByClassName

Metode ini mengambil (dan memperluas) semua elemen yang memiliki nama kelas CSS className .

Namun, metode ini sudah tidak digunakan lagi di versi terbaru Prototipe.

The Element objek menyediakan berbagai fungsi utilitas untuk memanipulasi elemen dalam DOM.

Berikut adalah daftar semua fungsi utilitas dengan contoh. Semua metode yang ditentukan di sini secara otomatis ditambahkan ke elemen apa pun yang diakses menggunakan fungsi $ ().

Jadi, menulis Element.show ('firstDiv'); sama seperti menulis $ ('firstDiv'). show ();

Metode Elemen Prototipe

NOTE - Pastikan Anda memiliki setidaknya prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. absolutisasi ()

Mengubah elemen menjadi elemen yang diposisikan secara absolut tanpa mengubah posisinya di tata letak halaman.
2. addClassName ()

Menambahkan nama kelas CSS yang diberikan ke nama kelas elemen tersebut.
3. addMethods ()

Memungkinkan untuk menggabungkan metode Anda sendiri ke objek Elemen, yang nantinya dapat Anda gunakan sebagai metode elemen yang diperluas.
4. berdekatan()

Menemukan semua saudara dari elemen saat ini yang cocok dengan selektor yang ditentukan.
5. leluhur ()

Mengumpulkan semua leluhur elemen dan mengembalikannya sebagai larik elemen yang diperluas.
6. childElements ()

Mengumpulkan semua anak elemen dan mengembalikannya sebagai larik elemen yang diperluas.
7.

classNames()

Tidak digunakan lagi. Mengembalikan instance baru dari ClassNames, sebuah objek Enumerable yang digunakan untuk membaca dan menulis nama kelas CSS dari elemen.
8. cleanWhitespace ()

Menghapus semua node teks elemen, yang hanya berisi spasi. Mengembalikan elemen.
9. clonePosition ()

Menggandakan posisi dan / atau dimensi sumber ke elemen seperti yang ditentukan oleh opsi argumen opsional.
10. cumulativeOffset ()

Mengembalikan offset elemen dari sudut kiri atas dokumen.
11. cumulativeScrollOffset ()

Menghitung offset gulir kumulatif dari sebuah elemen dalam wadah gulir bersarang.
12. descendantOf ()

Memeriksa apakah elemen tersebut adalah keturunan leluhur.
13. keturunan ()

Mengumpulkan semua turunan elemen dan mengembalikannya sebagai array elemen yang diperluas.
14. turun()

Mengembalikan turunan pertama elemen yang cocok dengan cssRule. Jika tidak ada cssRule yang disediakan, semua turunan dianggap. Jika tidak ada turunan yang cocok dengan kriteria ini, undefined dikembalikan.
15. kosong()

Menguji apakah elemen kosong (yaitu, hanya berisi spasi).
16. memperpanjang()

Memperluas elemen dengan semua metode yang terdapat dalam Element.Methods dan Element.Methods.Simulated.
17. api()

Mengaktifkan peristiwa khusus dengan elemen saat ini sebagai targetnya.
18. firstDescendant ()

Mengembalikan anak pertama yang merupakan elemen. Ini berlawanan dengan properti DOM firstChild, yang akan mengembalikan simpul mana pun.
19. getDimensions ()

Menemukan lebar dan tinggi yang dihitung dari sebuah elemen dan mengembalikannya sebagai pasangan kunci / nilai dari sebuah objek.
20.

getElementsByClassName

Tidak digunakan lagi. Mengambil semua turunan elemen, yang memiliki kelas CSS className dan mengembalikannya sebagai larik elemen yang diperluas. Harap gunakan $$ ().
21.

getElementsBySelector

Tidak digunakan lagi. Mengambil jumlah acak dari pemilih CSS (string) dan mengembalikan larik turunan tambahan dari elemen yang cocok dengan salah satunya. Harap gunakan $$ ().
22. getHeight ()

Menemukan dan mengembalikan tinggi elemen yang dihitung.
23. getOffsetParent ()

Mengembalikan posisi leluhur terdekat dari elemen. Jika tidak ada yang ditemukan, elemen body dikembalikan.
24. getStyle ()

Mengembalikan nilai properti CSS dari elemen. Properti dapat ditentukan dalam bentuk CSS atau camelized-nya.
25. getWidth ()

Menemukan dan mengembalikan lebar terhitung elemen.
26. hasClassName ()

Memeriksa apakah elemen memiliki nama kelas CSS yang diberikan.
27. menyembunyikan()

Menyembunyikan dan mengembalikan elemen.
28. mengenali()

Mengembalikan atribut id elemen jika ada, atau menyetel dan mengembalikan id unik yang dibuat secara otomatis.
29.

immediateDescendants()

Tidak digunakan lagi. Mengumpulkan semua turunan langsung elemen (yaitu, anak) dan mengembalikannya sebagai larik elemen yang diperluas. Harap gunakan childElements ().
30. memasukkan()

Menyisipkan konten sebelum, sesudah, di atas, atau di bawah elemen.
31. memeriksa()

Mengembalikan representasi string berorientasi debug dari elemen.
32. makeClipping ()

Mensimulasikan properti klip CSS yang tidak didukung dengan baik dengan menyetel nilai luapan elemen ke 'tersembunyi'. Mengembalikan elemen.
33. makePositioned ()

Memungkinkan pembuatan CSS yang berisi blok dengan mudah dengan mengatur posisi CSS elemen ke 'relative' jika posisi awalnya adalah 'statis' atau tidak ditentukan. Mengembalikan elemen.
34. pertandingan()

Memeriksa apakah elemen cocok dengan pemilih CSS yang diberikan.
35. lanjut()

Mengembalikan saudara berikut dari elemen yang cocok dengan cssRule yang diberikan.
36. nextSiblings ()

Mengumpulkan semua saudara elemen berikutnya dan mengembalikannya sebagai larik elemen yang diperluas.
37. mengamati()

Mendaftarkan penangan kejadian pada elemen dan mengembalikan elemen.
38. positionOffset ()

Mengembalikan offset elemen yang relatif ke posisi leluhur terdekatnya.
39. sebelumnya ()

Mengembalikan saudara sebelumnya dari elemen yang cocok dengan cssRule yang diberikan.
40. sebelumnyaSiblings ()

Mengumpulkan semua saudara elemen sebelumnya dan mengembalikannya sebagai larik elemen yang diperluas.
41. readAttribute ()

Mengembalikan nilai atribut elemen atau null jika atribut belum ditentukan.
42. recursivelyCollect ()

Mengumpulkan elemen secara rekursif yang hubungannya ditentukan oleh properti.
43. relativize ()

Mengubah elemen menjadi elemen dengan posisi relatif tanpa mengubah posisinya di tata letak halaman.
44. hapus ()

Menghapus elemen sepenuhnya dari dokumen dan mengembalikannya.
45. removeClassName ()

Menghapus className CSS elemen dan mengembalikan elemen.
46. ganti ()

Mengganti elemen dengan konten argumen html dan mengembalikan elemen yang dihapus.
47. scrollTo ()

Menggulir jendela sehingga elemen muncul di bagian atas viewport. Mengembalikan elemen.
48. Pilih()

Mengambil jumlah pemilih CSS (string) yang berubah-ubah dan mengembalikan larik turunan elemen yang diperluas yang cocok dengan salah satunya.
49. setOpacity ()

Menyetel opasitas visual suatu elemen saat mengatasi ketidakkonsistenan di berbagai browser.
50. setStyle ()

Mengubah properti gaya CSS elemen.
51. menunjukkan()

Menampilkan dan mengembalikan elemen.
52. saudara kandung ()

Mengumpulkan semua saudara elemen dan mengembalikannya sebagai larik elemen yang diperluas.
53. stopObserving ()

Membatalkan pendaftaran penangan dan mengembalikan elemen.
54. beralih ()

Mengalihkan visibilitas elemen.
55. toggleClassName ()

Mengalihkan nama kelas CSS elemen dan mengembalikan elemen.
56. undoClipping ()

Set properti elemen CSS overflow kembali ke nilai sebelum Element.makeClipping () diterapkan. Mengembalikan elemen.
57. undoPositioned ()

Setel elemen kembali ke keadaan sebelum Element.makePositioned diterapkan padanya. Mengembalikan elemen.
58. naik()

Mengembalikan leluhur pertama elemen yang cocok dengan cssRule yang diberikan.
59. memperbarui()

Mengganti konten elemen dengan argumen newContent yang disediakan dan mengembalikan elemen.
60. viewportOffset ()

Mengembalikan koordinat X / Y elemen yang berhubungan dengan viewport.
61. terlihat()

Mengembalikan Boolean yang menunjukkan apakah elemen terlihat atau tidak.
62. membungkus()

Membungkus elemen di dalam elemen lain, lalu mengembalikan pembungkusnya.
63. writeAttribute ()

Menambah, menentukan, atau menghapus atribut yang diteruskan sebagai hash atau pasangan nama / nilai.

Prototipe memperluas nomor JavaScript asli untuk menyediakan -

  • Kompatibilitas ObjectRange, melalui Number # succ.

  • Putaran numerik mirip Ruby dengan Number # times.

  • Metode utilitas sederhana seperti Number # toColorPart dan Number # toPaddedString.

Berikut adalah daftar semua fungsi dengan contoh yang berhubungan dengan Bilangan.

Metode Nomor Prototipe

NOTE - Pastikan Anda memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. abs ()

Mengembalikan nilai absolut dari angka tersebut.
2. ceil ()

Mengembalikan bilangan bulat terkecil yang lebih besar dari atau sama dengan angka tersebut.
3. lantai()

Mengembalikan bilangan bulat terbesar kurang dari atau sama dengan angka.
4. bulat()

Membulatkan angka ke bilangan bulat terdekat.
5. succ ()

Mengembalikan penerus Nomor saat ini, seperti yang didefinisikan oleh + 1. Saat ini digunakan untuk membuat nomor kompatibel dengan ObjectRange.
6. waktu()

Mengenkapsulasi loop [0..n] reguler, gaya Ruby.
7. toColorPart ()

Menghasilkan representasi heksadesimal 2 digit dari bilangan tersebut (yang oleh karena itu diasumsikan berada dalam kisaran [0..255]). Berguna untuk menyusun string warna CSS.
8. toJSON ()

Mengembalikan string JSON.
9. toPaddedString ()

Mengonversi angka menjadi string yang diisi 0 sehingga panjang string setidaknya sama dengan panjangnya.

Prototipe menyempurnakan objek String dengan serangkaian metode yang berguna mulai dari yang sepele hingga yang kompleks.

Berikut adalah daftar semua fungsi dengan contoh yang berhubungan dengan String.

Metode String Prototipe

NOTE - Pastikan Anda memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. kosong()

Memeriksa apakah string itu 'kosong', artinya kosong atau hanya berisi spasi.
2. unta ()

Mengonversi string yang dipisahkan oleh tanda hubung menjadi setara camelCase. Misalnya, 'foo-bar' akan diubah menjadi 'fooBar'.
3. kapitalisasi ()

Menggunakan huruf besar pada huruf pertama dari sebuah string dan menurunkan huruf besar lainnya.
4. dasherize ()

Mengganti setiap kemunculan karakter garis bawah ("_") dengan tanda hubung ("-").
5. kosong()

Memeriksa apakah string kosong.
6. berakhir dengan()

Memeriksa apakah string diakhiri dengan substring.
7. escapeHTML ()

Mengonversi karakter khusus HTML ke entitasnya yang setara.
8. evalJSON ()

Mengevaluasi JSON dalam string dan mengembalikan objek yang dihasilkan.
9. evalScripts ()

Mengevaluasi konten dari setiap blok skrip yang ada dalam string. Mengembalikan larik berisi nilai yang dikembalikan oleh setiap skrip.
10. extractScripts ()

Mengekstrak konten blok skrip apa pun yang ada dalam string dan mengembalikannya sebagai larik string.
11. gsub ()

Mengembalikan string dengan setiap kemunculan pola tertentu diganti dengan string biasa, nilai yang dikembalikan dari fungsi, atau string Template.
12. termasuk ()

Memeriksa apakah string berisi substring.
13. memeriksa()

Mengembalikan versi berorientasi debug dari string.
14. menambah()

Memperlakukan string sebagai Templat dan mengisinya dengan properti objek.
15. isJSON ()

Memeriksa apakah string tersebut adalah JSON yang valid dengan menggunakan ekspresi reguler. Metode keamanan ini dipanggil secara internal.
16. parseQuery ()

Mengurai string kueri seperti URI dan mengembalikan objek yang terdiri dari pasangan parameter / nilai.
17. scan ()

Memungkinkan iterasi atas setiap kemunculan pola yang diberikan.
18. dimulai dengan()

Memeriksa apakah string dimulai dengan substring.
19. mengupas()

Menghapus semua spasi di depan dan di belakangnya dari sebuah string.
20. stripScripts ()

Menghapus string apa pun yang tampak seperti blok skrip HTML.
21. stripTags ()

Menghapus string tag HTML apa pun.
22. sub()

Mengembalikan string dengan kejadian hitungan pertama dari pola yang diganti dengan string biasa, nilai yang dikembalikan dari fungsi, atau string Templat.
23. succ ()

Digunakan secara internal oleh ObjectRange. Mengonversi karakter terakhir dari string ke karakter berikut dalam alfabet Unicode.
24. waktu()

Menyatukan jumlah string berkali-kali.
25. toArray ()

Memisahkan string karakter demi karakter dan mengembalikan array dengan hasilnya.
26. toJSON ()

Mengembalikan string JSON.
27. toQueryParams ()

Mengurai string kueri seperti URI dan mengembalikan objek yang terdiri dari pasangan parameter / nilai.
28. memotong()

Memotong string ke panjang yang diberikan dan menambahkan akhiran padanya (menunjukkan bahwa itu hanya kutipan).
29. menggarisbawahi()

Mengonversi string unta menjadi serangkaian kata yang dipisahkan oleh garis bawah ("_").
30. unescapeHTML ()

Menghapus tag dan mengubah bentuk entitas dari karakter HTML khusus ke bentuk normalnya.
31. unfilterJSON ()

Menghapus pembatas komentar di sekitar tanggapan Ajax JSON atau JavaScript. Metode keamanan ini dipanggil secara internal.

Prototipe memperluas semua array JavaScript asli dengan beberapa metode yang ampuh.

Ini dilakukan dengan dua cara -

  • Ini bercampur dalam modul Enumerable, yang sudah membawa banyak metode.

  • Itu menambahkan beberapa metode tambahan, yang didokumentasikan di bagian ini.

Menggunakan Iterator

Salah satu dukungan penting yang diberikan oleh Prototype adalah Anda dapat menggunakan java seperti iterator di JavaScript. Lihat perbedaannya di bawah -

Cara penulisan tradisional a for putaran -

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

Sekarang jika Anda menggunakan Prototype, maka Anda dapat mengganti kode di atas sebagai berikut -

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

Berikut adalah daftar semua fungsi dengan contoh yang berhubungan dengan Array.

Metode Array Prototipe

NOTE - Pastikan Anda memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. bersih()

Menghapus array (membuatnya kosong).
2. klon()

Mengembalikan duplikat dari larik, membiarkan larik asli tetap utuh.
3. kompak ()

Mengembalikan versi baru dari larik, tanpa nilai nol / tidak ditentukan.
4. setiap()

Iterasi di atas larik dalam urutan indeks numerik menaik.
5. pertama()

Mengembalikan item pertama dalam larik, atau tidak ditentukan jika larik kosong.
6. meratakan()

Mengembalikan versi larik "datar" (satu dimensi).
7. dari()

Mengkloning array yang ada atau membuat yang baru dari koleksi mirip array.
8. Indeks()

Mengembalikan posisi kemunculan pertama argumen dalam larik.
9. memeriksa()

Mengembalikan representasi string berorientasi debug dari sebuah larik.
10. terakhir()

Mengembalikan item terakhir dalam larik, atau tidak ditentukan jika larik kosong.
11. mengurangi()

Mengurangi array: array satu elemen diubah menjadi elemen uniknya, sementara array multi-elemen dikembalikan tanpa tersentuh.
12. balik()

Mengembalikan versi larik yang dibalik. Secara default, secara langsung membalikkan aslinya. Jika sebaris disetel ke false, menggunakan tiruan dari larik asli.
13. ukuran()

Mengembalikan ukuran larik.
14. toArray ()

Ini hanyalah pengoptimalan lokal dari toArray campuran dari Enumerable.
15. toJSON ()

Mengembalikan string JSON.
16. uniq ()

Menghasilkan larik versi bebas duplikat. Jika tidak ada duplikat yang ditemukan, array asli dikembalikan.
17. tanpa()

Menghasilkan versi baru dari larik yang tidak berisi nilai apa pun yang ditentukan.

Hash dapat dianggap sebagai array asosiatif yang mengikat kunci unik ke nilai. Satu-satunya perbedaan adalah Anda dapat menggunakan string apa pun sebagai indeks daripada hanya menggunakan angka sebagai indeks.

Membuat Hash

Ada dua cara untuk membuat instance Hash -

  • Gunakan kata kunci JavaScript baru .
  • Menggunakan fungsi Prototipe Utilitas $ H .

Untuk membuat hash kosong, Anda juga memanggil salah satu metode konstruktor tanpa argumen.

Berikut adalah contoh yang menunjukkan cara membuat hash, mengatur nilai dan mendapatkan nilai dengan cara yang sederhana -

// 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');

Prototipe menyediakan berbagai metode untuk mengevaluasi Hash dengan mudah. Tutorial ini akan menjelaskan setiap metode secara rinci dengan contoh yang sesuai.

Berikut adalah daftar lengkap dari semua metode yang terkait dengan Hash.

Metode Hash Prototipe

NOTE - Pastikan setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. klon()

Menampilkan tiruan hash.
2. setiap()

Iterasi di atas pasangan nama / nilai di hash.
3. Dapatkan()

Mengembalikan nilai properti kunci hash.
4. memeriksa()

Mengembalikan representasi string berorientasi debug dari hash.
5. kunci ()

Menyediakan Array kunci (yaitu, nama properti) untuk hash.
6. menggabungkan()

Menggabungkan objek ke hash dan mengembalikan hasil gabungan itu.
7. menghapus()

Menghapus kunci dari hash dan mengembalikan nilainya. Metode ini sudah tidak digunakan lagi di versi 1.6.
8. set()

Menyetel properti kunci hash menjadi nilai dan mengembalikan nilai.
9. toJSON ()

Mengembalikan string JSON.
10. toObject ()

Mengembalikan objek vanilla kloning.
11. toQueryString ()

Mengubah hash menjadi representasi string kueri yang dienkode URL-nya.
12. tidak disetel ()

Menghapus properti kunci hash dan mengembalikan nilainya.
13. memperbarui()

Memperbarui hash dengan pasangan kunci / nilai objek. Hash asli akan diubah.
14. nilai ()

Mengumpulkan nilai hash dan mengembalikannya dalam array.

Objek digunakan oleh Prototipe sebagai namespace dan untuk memanggil fungsi terkait menggunakan objek Objek. Ini digunakan dengan dua cara berikut -

  • Jika Anda adalah developer sederhana, Anda dapat menggunakan fungsi yang sudah ada seperti inspect atau clone .

  • Jika Anda adalah orang yang ingin membuat objek sendiri seperti yang dilakukan Prototipe, atau menjelajahi objek seolah-olah hash, akan beralih ke perluasan , kunci dan nilai .

Metode Objek Prototipe

NOTE - Pastikan setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. klon()

Kloning objek yang diteruskan menggunakan salinan dangkal (menyalin semua properti asli ke hasil).
2. memperpanjang()

Menyalin semua properti dari sumber ke objek tujuan.
3. memeriksa()

Mengembalikan representasi string berorientasi debug dari objek.
4. isArray ()

Mengembalikan nilai benar jika obj adalah larik, salah jika tidak.
5. isElement ()

Mengembalikan nilai benar jika obj adalah simpul DOM tipe 1, salah jika sebaliknya.
6. isFunction ()

Mengembalikan nilai benar jika obj berjenis fungsi, salah jika sebaliknya.
7. isHash ()

Mengembalikan nilai benar jika obj adalah turunan dari kelas Hash, salah jika sebaliknya.
8. isNumber ()

Mengembalikan nilai benar jika obj berjenis nomor, salah jika sebaliknya.
9. isString ()

Mengembalikan nilai benar jika obj berjenis string, salah jika sebaliknya.
10. isUndefined ()

Mengembalikan nilai true jika obj berjenis undefined, false sebaliknya.
11. kunci ()

Memperlakukan objek apa pun sebagai Hash dan mengambil daftar nama propertinya.
12. toHTML ()

Mengembalikan nilai kembalian metode toHTML obj jika ada, jika tidak menjalankan obj melalui String.interpret.
13. toJSON ()

Mengembalikan string JSON.
14. toQueryString ()

Mengubah objek menjadi representasi string kueri yang dienkode URL-nya.
15. nilai ()

Memperlakukan objek apa pun sebagai Hash dan mengambil daftar nilai propertinya.

Templat digunakan untuk memformat grup objek serupa dan untuk menghasilkan output yang diformat untuk objek ini.

Prototipe menyediakan kelas Template , yang memiliki dua metode -

  • Template()- Ini adalah metode konstruktor, yang digunakan untuk membuat objek template dan memanggil metode evalu () untuk menerapkan template.

  • evaluate() - Metode ini digunakan untuk menerapkan template untuk memformat objek.

Ada tiga langkah yang terlibat untuk membuat keluaran yang diformat.

  • Create a template- Ini melibatkan pembuatan teks yang telah diformat sebelumnya. Teks ini berisi konten yang diformat bersama dengan#{fieldName}nilai-nilai. Ini#{fieldName}nilai akan diganti dengan nilai aktual ketika metode evalu () akan dipanggil dengan nilai aktual.

  • Defining actual values- Ini melibatkan pembuatan nilai aktual dalam bentuk Kunci dan Nilai. Kunci ini akan dipetakan dalam template dan akan diganti dengan nilai yang sesuai.

  • Mapping Keys and replacing Values- Ini adalah langkah terakhir di mana evaluasi () akan dipanggil dan semua kunci yang tersedia dalam objek yang diformat akan diganti dengan nilai yang ditentukan.

Contoh 1

Langkah 1

Buat template.

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

Langkah 2

Siapkan kumpulan nilai kita, yang akan diteruskan pada objek di atas untuk mendapatkan keluaran yang telah diformat.

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 ];

LANGKAH 3

Langkah terakhir adalah mengisi semua nilai di template dan menghasilkan hasil akhir sebagai berikut -

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

Jadi, mari gabungkan ketiga langkah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Keluaran

Kelas Enumerable menyediakan sekumpulan besar metode yang berguna untuk enumerasi. Enumerasi adalah objek yang bertindak sebagai kumpulan nilai.

Metode pencacahan sebagian besar digunakan untuk menghitung larik dan hash . Ada objek lain seperti ObjectRange dan berbagai objek terkait DOM atau AJAX di mana Anda dapat menggunakan metode enumerasi.

Parameter Konteks

Setiap metode Enumerable yang menggunakan iterator juga menggunakan objek konteks sebagai parameter (opsional) berikutnya. Objek konteks adalah tempat iterator akan diikat, jadithis kata kunci di dalamnya akan mengarah ke objek.

var myObject = {};

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

myObject;

Ini akan menghasilkan hasil sebagai berikut -

Keluaran

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

Menggunakannya secara Efisien

  • Saat Anda perlu memanggil metode yang sama pada semua elemen, gunakan metode invoke () .

  • Saat Anda perlu mengambil properti yang sama pada semua elemen, gunakan metode pluck () .

  • Metode findAll / select mengambil semua elemen yang cocok dengan predikat yang diberikan. Sebaliknya, metode reject () mengambil semua elemen yang tidak cocok dengan sebuah predikat. Dalam kasus khusus di mana Anda membutuhkan kedua set, Anda dapat menghindari perulangan dua kali: cukup gunakan metode partition () .

Berikut adalah daftar lengkap dari semua metode yang terkait dengan Enumerable.

Metode yang Dapat Dihitung Prototipe

NOTE - Pastikan Anda setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. semua()

Menentukan apakah semua elemen setara boolean dengan true, baik secara langsung atau melalui komputasi oleh iterator yang disediakan.
2. apa saja()

Menentukan apakah setidaknya satu elemen setara boolean dengan true, baik secara langsung atau melalui komputasi oleh iterator yang disediakan.
3. mengumpulkan()

Mengembalikan hasil penerapan iterator ke setiap elemen. Alias ​​sebagai map ().
4. mendeteksi ()

Menemukan elemen pertama yang iteratornya mengembalikan true. Alias ​​oleh metode find ().
5. setiap()

Ini memungkinkan Anda mengulang semua elemen secara umum, lalu mengembalikan Enumerable, sehingga memungkinkan pemanggilan berantai.
6. eachSlice ()

Kelompokkan item dalam potongan berdasarkan ukuran tertentu, dengan potongan terakhir mungkin lebih kecil.
7. entri ()

Alias ​​untuk metode toArray yang lebih umum.
8. Temukan()

Menemukan elemen pertama yang iteratornya mengembalikan true. Alias ​​kemudahan untuk mendeteksi ().
9. Temukan semua()

Mengembalikan semua elemen yang iteratornya mengembalikan true. Alias ​​sebagai select ().
10. grep ()

Mengembalikan semua elemen yang cocok dengan filter. Jika iterator disediakan, itu digunakan untuk menghasilkan nilai yang dikembalikan untuk setiap elemen yang dipilih.
11. inGroupsOf ()

Kelompokkan item dalam potongan berukuran tetap, menggunakan nilai tertentu untuk mengisi potongan terakhir jika perlu.
12. termasuk ()

Menentukan apakah suatu objek ada di Enumerable atau tidak, berdasarkan operator perbandingan ==. Alias ​​sebagai anggota ().
13. menyuntikkan()

Secara bertahap membangun nilai hasil berdasarkan hasil iterator yang berurutan.
14. memohon()

Optimasi untuk kasus penggunaan umum each () atau collect (): memanggil metode yang sama, dengan potensi argumen yang sama, untuk semua elemen.
15. peta()

Mengembalikan hasil penerapan iterator ke setiap elemen. Alias ​​kemudahan untuk mengumpulkan ().
16. maks ()

Mengembalikan elemen maksimum (atau komputasi berbasis elemen), atau tidak ditentukan jika enumerasi kosong. Elemen akan dibandingkan secara langsung, atau dengan terlebih dahulu menerapkan iterator dan membandingkan nilai yang dikembalikan.
17. anggota()

Menentukan apakah suatu objek ada di Enumerable atau tidak, berdasarkan operator perbandingan ==. Alias ​​kemudahan untuk include ().
18. min ()

Mengembalikan elemen minimum (atau komputasi berbasis elemen), atau tidak ditentukan jika enumerasi kosong. Elemen akan dibandingkan secara langsung, atau dengan terlebih dahulu menerapkan iterator dan membandingkan nilai yang dikembalikan.
19. partisi ()

Membagi elemen dalam dua kelompok: yang dianggap benar, dan yang dianggap salah.
20. memetik()

Pengoptimalan untuk kasus penggunaan umum collect (): mengambil properti yang sama untuk semua elemen. Mengembalikan nilai properti.
21. menolak()

Mengembalikan semua elemen yang iteratornya mengembalikan false.
22. Pilih()

Alias ​​untuk metode findAll ().
23. ukuran()

Mengembalikan ukuran pencacahan.
24. Sortir dengan()

Menyediakan tampilan elemen yang diurutkan secara kustom berdasarkan kriteria yang dihitung, untuk setiap elemen, oleh iterator.
25. toArray ()

Mengembalikan representasi Array dari enumerasi. Alias ​​sebagai entri ().
26. zip()

Zip bersama-sama (pikirkan zip pada sepasang celana panjang) 2 + urutan, menyediakan serangkaian tupel. Setiap tupel berisi satu nilai per urutan asli.

Manajemen acara adalah salah satu tantangan terbesar untuk mencapai pembuatan skrip lintas browser. Setiap browser memiliki pendekatan berbeda untuk menangani penekanan tombol.

Prototipe Framework menangani semua masalah kompatibilitas lintas browser dan membuat Anda bebas dari semua masalah yang terkait dengan manajemen acara.

Kerangka kerja Prototipe menyediakan ruang nama Peristiwa , yang penuh dengan metode, yang semuanya mengambil objek peristiwa saat ini sebagai argumen, dan dengan senang hati menghasilkan informasi yang Anda minta, di semua browser utama.

Ruang nama acara juga menyediakan daftar standar kode kunci yang dapat Anda gunakan dengan acara terkait keyboard. Konstanta berikut ditentukan di namespace -

S.No. Konstanta & Deskripsi Kunci
1.

KEY_BACKSPACE

Mewakili kunci spasi belakang.
2.

KEY_TAB

Mewakili tombol tab.
3.

KEY_RETURN

Mewakili kunci pengembalian.
4.

KEY_ESC

Mewakili kunci esc.
5.

KEY_LEFT

Mewakili kunci kiri.
6.

KEY_UP

Mewakili kunci.
7.

KEY_RIGHT

Mewakili kunci yang benar.
8.

KEY_DOWN

Mewakili kunci bawah.
9.

KEY_DELETE

Mewakili kunci hapus.
10.

KEY_HOME

Mewakili kunci rumah.
11.

KEY_END

Mewakili kunci putus.
12.

KEY_PAGEUP

Mewakili kunci halaman ke atas.
13.

KEY_PAGEDOWN

Mewakili kunci halaman bawah.

Bagaimana Menangani Acara

Sebelum kita mulai, mari kita lihat contoh penggunaan metode event. Contoh ini menunjukkan cara menangkap elemen DOM tempat peristiwa terjadi.

Contoh

<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>

Keluaran

Berikut adalah daftar lengkap dari semua metode yang terkait Event. Fungsi yang paling sering Anda gunakan adalah mengamati , elemen , dan berhenti .

Metode Peristiwa Prototipe

NOTE - Pastikan Anda setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. elemen()

Mengembalikan elemen DOM tempat kejadian terjadi.
2. memperpanjang()

Memperluas acara dengan semua metode yang terdapat dalam Event.Methods.
3. findElement ()

Mengembalikan elemen DOM pertama dengan nama tag tertentu, lebih tinggi dari yang mana peristiwa terjadi.
4. isLeftClick ()

Menentukan apakah peristiwa mouse terkait tombol adalah tentang tombol "kiri" (utama, sebenarnya).
5. mengamati()

Mendaftarkan penangan kejadian pada elemen DOM.
6. pointerX ()

Mengembalikan posisi horizontal absolut untuk acara mouse.
7. pointerY ()

Mengembalikan posisi vertikal absolut untuk acara mouse.
8. berhenti()

Menghentikan penyebaran acara dan mencegah tindakan defaultnya dipicu pada akhirnya.
9. stopObserving ()

Membatalkan pendaftaran penangan acara.
10. unloadCache ()

Batalkan pendaftaran semua penangan acara yang terdaftar melalui observasi. Kabel otomatis untuk Anda. Tidak tersedia sejak 1.6.

Prototipe menyediakan cara mudah untuk mengelola formulir HTML. Bentuk Prototipe adalah namespace dan modul untuk semua hal yang berhubungan dengan bentuk, dikemas dengan manipulasi form dan kebaikan serialisasi.

Meskipun memegang metode yang menangani formulir secara keseluruhan, Sub modul Formulir. Elemen berurusan dengan kontrol formulir tertentu.

Berikut adalah daftar lengkap dari semua metode yang terkait Form Element.

Metode Bentuk Prototipe

NOTE - Pastikan Anda setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. nonaktifkan ()

Menonaktifkan formulir secara keseluruhan. Kontrol formulir akan terlihat tetapi tidak dapat diedit.
2. memungkinkan()

Mengaktifkan formulir yang dinonaktifkan sepenuhnya atau sebagian.
3. findFirstElement ()

Menemukan kontrol formulir non-tersembunyi dan non-nonaktif pertama.
4. focusFirstElement ()

Memberi fokus keyboard ke elemen pertama formulir.
5. getElements ()

Mengembalikan kumpulan dari semua kontrol formulir dalam formulir.
6. getInputs ()

Mengembalikan koleksi semua elemen INPUT dalam formulir. Gunakan tipe opsional dan argumen nama untuk membatasi pencarian pada atribut ini.
7. permintaan()

Metode praktis untuk membuat serial dan mengirimkan formulir melalui Ajax.Request ke URL atribut tindakan formulir. Parameter opsi diteruskan ke instance Ajax.Request, memungkinkan untuk mengganti metode HTTP dan menentukan parameter tambahan.
8. setel ulang ()

Menyetel ulang formulir ke nilai defaultnya.
9. membuat serial ()

Menyerialkan data formulir ke string yang sesuai untuk permintaan Ajax (perilaku default) atau, jika getHash opsional mengevaluasi ke true, hash objek di mana kunci adalah nama dan nilai kontrol formulir adalah data.
10. serializeElements ()

Menyerialkan larik elemen formulir ke string yang sesuai untuk permintaan Ajax (perilaku default) atau, jika getHash opsional bernilai true, hash objek di mana kunci adalah nama dan nilai kontrol formulir adalah data.

Pengantar JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan.

  • JSON mudah dibaca dan ditulis oleh manusia.

  • JSON mudah diurai dan dibuat oleh mesin.

  • JSON didasarkan pada subset dari Bahasa Pemrograman JavaScript.

  • JSON terutama digunakan oleh API di seluruh web dan merupakan alternatif cepat untuk XML dalam permintaan Ajax.

  • JSON adalah format teks yang sepenuhnya tidak bergantung pada bahasa.

Prototipe 1.5.1 dan versi yang lebih baru, memiliki fitur encoding JSON dan dukungan parsing.

Pengkodean JSON

Prototipe menyediakan metode berikut untuk pengkodean -

NOTE - Pastikan memiliki setidaknya prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. Number.toJSON ()

Mengembalikan string JSON untuk Nomor yang diberikan.
2. String.toJSON ()

Mengembalikan string JSON untuk String yang diberikan.
3. Array.toJSON ()

Mengembalikan string JSON untuk Array yang diberikan.
4. Hash.toJSON ()

Mengembalikan string JSON untuk Hash yang diberikan.
5. Date.toJSON ()

Mengonversi tanggal menjadi string JSON (mengikuti format ISO yang digunakan oleh JSON).
6. Object.toJSON ()

Mengembalikan string JSON untuk Objek yang diberikan.

Jika Anda tidak yakin dengan jenis data yang perlu Anda encode, taruhan terbaik Anda adalah menggunakan Object.toJSON jadi -

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

Ini akan menghasilkan hasil sebagai berikut -

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

Selain itu, jika Anda menggunakan objek khusus, Anda dapat menyetel metode toJSON Anda sendiri, yang akan digunakan oleh Object.toJSON . Misalnya -

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);

Ini akan menghasilkan hasil sebagai berikut -

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

Mengurai JSON

Dalam JavaScript, penguraian JSON biasanya dilakukan dengan mengevaluasi konten string JSON. Prototipe memperkenalkan String.evalJSON untuk menangani ini. Misalnya -

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

Ini akan menghasilkan hasil sebagai berikut -

"Violet"

Menggunakan JSON dengan Ajax

Menggunakan JSON dengan Ajax sangat mudah. Cukup panggil String.evalJSON pada properti responseText transport -

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

Jika data Anda berasal dari sumber yang tidak tepercaya, pastikan untuk membersihkannya -

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

Pengantar AJAX

AJAX adalah singkatan dari Asinkronis JavaScript dan XML. AJAX adalah teknik baru untuk membuat aplikasi web yang lebih baik, lebih cepat, dan lebih interaktif dengan bantuan XML, HTML, CSS, dan Java Script.

Untuk pemahaman lengkap tentang AJAX, silakan melalui Tutorial AJAX sederhana kami .

Dukungan Prototipe untuk AJAX

Kerangka prototipe memungkinkan Anda menangani panggilan Ajax dengan cara yang sangat mudah dan menyenangkan yang juga aman (lintas-browser). Prototipe juga menangani secara cerdas dengan kode JavaScript yang dikembalikan dari server dan menyediakan kelas pembantu untuk polling.

Fungsionalitas Ajax terdapat dalam objek Ajax global . Objek ini menyediakan semua metode yang diperlukan untuk menangani permintaan dan tanggapan AJAX dengan cara yang mudah.

Permintaan AJAX

Permintaan sebenarnya dibuat dengan membuat instance objek Ajax.Request () .

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

Parameter pertama adalah URL permintaan; yang kedua adalah hash opsi. Opsi metode mengacu pada metode HTTP yang akan digunakan; metode default adalah POST.

AJAX Response Callbacks

Permintaan Ajax secara default asynchronous, yang berarti Anda harus memiliki callback yang akan menangani data dari respons. Metode callback diteruskan dalam hash opsi saat membuat permintaan -

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...') }
});

Di sini, dua callback diteruskan dalam hash -

  • onSuccess
  • onFailure

Salah satu dari dua panggilan di atas dipanggil berdasarkan status respons. Parameter pertama yang diteruskan ke keduanya adalah objek xmlHttpRequest asli tempat Anda dapat menggunakan properti responseText dan responseXMLnya masing-masing.

Anda dapat menentukan kedua panggilan balik, satu atau tidak sama sekali - terserah Anda. Callback lain yang tersedia adalah -

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

Semuanya cocok dengan status tertentu dari transpor xmlHttpRequest , kecuali untuk onException, yang diaktifkan saat ada pengecualian saat mengirimkan callback lainnya.

NOTE- Callback onUninitialized, onLoading, onLoaded, dan onInteractive tidak diterapkan secara konsisten oleh semua browser. Secara umum, sebaiknya hindari menggunakan ini.

Metode Prototipe AJAX

Objek Ajax menyediakan semua metode yang diperlukan untuk menangani permintaan dan tanggapan AJAX dengan cara yang mudah. Berikut adalah daftar lengkap dari semua metode yang berhubungan dengan AJAX.

NOTE - Pastikan Anda setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. Opsi Ajax

Ini bukan metode tetapi merinci semua opsi inti yang dibagikan oleh semua pemohon dan panggilan balik AJAX.
2. Ajax.PeriodicalUpdater ()

Secara berkala melakukan permintaan AJAX dan memperbarui konten penampung berdasarkan teks respons.
3. Ajax.Request ()

Memulai dan memproses permintaan AJAX.
4. Ajax.Responders ()

Repositori pendengar global yang diberi tahu tentang setiap langkah permintaan AJAX berbasis Prototipe.
5. Ajax.Response ()

Objek diteruskan sebagai argumen pertama dari semua permintaan callback Ajax.
6. Ajax.Updater ()

Melakukan permintaan AJAX dan memperbarui konten penampung berdasarkan teks respons.

Prototype Ranges mewakili interval nilai. Cara yang disukai untuk mendapatkan kisaran adalah dengan menggunakan$R fungsi utilitas.

Anda dapat membuat sejumlah besar nilai menggunakan sintaks sederhana sebagai berikut -

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

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

Ini akan menghasilkan hasil sebagai berikut -

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

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

Metode include ()

Metode ini menentukan apakah nilai termasuk dalam kisaran -

Sintaksis

Range.include(value);

Nilai Kembali

Jika nilai disertakan, maka mengembalikan nilai benar jika tidak salah.

Contoh

<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>

Keluaran

Fungsi berkali-kali diperlukan untuk menjalankan fungsi setelah jangka waktu tertentu. Misalnya, Anda mungkin ingin menyegarkan layar Anda setelah waktu tertentu. Prototipe menyediakan mekanisme sederhana untuk mengimplementasikannya menggunakan objek PeriodicalExecuter .

Keuntungan yang diberikan oleh PeriodicalExecuter adalah melindungi Anda dari beberapa eksekusi paralel dari fungsi callback.

Membuat PeriodicalExecuter

Konstruktor membutuhkan dua argumen -

  • Fungsi panggilan balik.
  • Interval (dalam detik) antara eksekusi.

Setelah diluncurkan, PeriodicalExecuter terpicu tanpa batas waktu, hingga halaman dibongkar atau eksekutif dihentikan menggunakan metode stop () .

Contoh

Berikut ini adalah contoh yang akan memunculkan kotak dialog setelah setiap 5 detik hingga Anda akan menghentikannya dengan menekan tombol "batal '.

<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>

Keluaran

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