JavaScript - Test Prototype

Test de la bibliothèque Framework JavaScript - Prototype

Référencer Prototype

Pour tester une bibliothèque JavaScript, vous devez la référencer dans une page web.

Pour référencer une bibliothèque, utilisez la balise <script> avec son attribut src défini sur l'URL de la bibliothèque :

Référencer Prototype

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> </head> <body> </body> </html>

Description de Prototype

Les fonctions fournies par Prototype rendent la programmation du DOM HTML plus facile.

Comme jQuery, Prototype dispose également de sa propre fonction $().

La fonction $() accepte la valeur id d'un élément DOM HTML (ou un élément DOM) et ajoute de nouvelles fonctionnalités à l'objet DOM.

Contrairement à jQuery, Prototype n'a pas de méthode ready() pour remplacer window.onload(). À la place, Prototype ajoute des extensions au navigateur et au DOM HTML.

En JavaScript, vous pouvez affecter une fonction pour gérer l'événement de chargement de window :

Méthode JavaScript :

function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Bonjour Prototype"; } onload=myFunction;

L'approche équivalente de Prototype est différente.

À la manière de Prototype :

function myFunction() { $("h01").insert("Bonjour Prototype !"); } Event.observe(window,"load",myFunction);

Event.observe() accepte trois paramètres :

  • L'objet DOM HTML ou BOM (modèle objet du navigateur) que vous souhaitez gérer
  • L'événement que vous souhaitez gérer
  • La fonction que vous souhaitez appeler

Tester Prototype

Veuillez essayer l'exemple suivant :

Exemple

<!DOCTYPE html> <html> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> <script> function myFunction() { $("h01").insert("Bonjour Prototype !"); } Event.observe(window,"load",myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>

Essayez-le »

Veuillez réessayer cet exemple :

Exemple

<!DOCTYPE html> <html> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> <script> function myFunction() { $("h01").writeAttribute("style","color:red").insert("Bonjour Prototype !"); } Event.observe(window,"load",myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>

Testez-le »

Comme vous pouvez le voir dans les exemples ci-dessus, comme jQuery, Prototype permet la syntaxe de chaînage.

Le chaînage est un moyen pratique d'effectuer plusieurs tâches sur le même objet.

Autres extensions