Prototipe - Gambaran Umum

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.