Prototype - Aperçu

Qu'est-ce que le prototype?

Prototype est un Framework JavaScript qui vise à faciliter le développement d'applications Web dynamiques. Le prototype a été développé par Sam Stephenson.

Prototype est une bibliothèque JavaScript, qui vous permet de manipuler le DOM de manière très simple et amusante, tout en étant sûre (cross-browser).

Scriptaculous et d'autres bibliothèques, telles que Rico, s'appuient sur les fondations de Prototype pour créer des widgets et d'autres éléments destinés aux utilisateurs finaux.

Prototype -

Étend les éléments DOM et les types intégrés avec des méthodes utiles.
Prise en charge intégrée de la POO de style classe, y compris l'héritage.
A un support avancé pour la gestion des événements.
Possède de puissantes fonctionnalités Ajax.
N'est pas un cadre de développement d'applications complet.
Ne fournit pas de widgets ou un ensemble complet d'algorithmes standard ou de systèmes d'E / S.

Comment installer le prototype?

Prototype est distribué sous la forme d'un fichier unique appelé prototype.js. Suivez les étapes mentionnées ci-dessous pour configurer la bibliothèque de prototypes -

Allez sur la page de téléchargement (http://prototypejs.org/download/) pour récupérer la dernière version dans un package pratique.
Maintenant, placez le fichier prototype.js dans un répertoire de votre site Web, par exemple / javascript.

Vous êtes maintenant prêt à utiliser le puissant framework Prototype dans vos pages Web.

Comment utiliser la bibliothèque de prototypes?

Maintenant, vous pouvez inclure le script Prototype comme suit -

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

Exemple

Voici un exemple simple montrant comment vous pouvez utiliser la fonction $ () de Prototype pour obtenir des éléments DOM dans votre JavaScript -

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

Production

Pourquoi ce tutoriel?

Une très bonne documentation pour Prototype Framework est disponible sur prototypejs.org alors pourquoi se référer à ce tutoriel!

La réponse est que nous avons rassemblé toutes les fonctionnalités les plus couramment utilisées dans ce didacticiel. Deuxièmement, nous avons expliqué toutes les méthodes utiles ainsi que des exemples appropriés, qui ne sont pas disponibles sur le site officiel.

Si vous êtes un utilisateur avancé de Prototype Framework, vous pouvez accéder directement au site officiel, sinon ce tutoriel pourrait être un bon début pour vous et vous pouvez l'utiliser comme un manuel de référence.