Programmation JavaScript/Dojo/Hello World

Un livre de Wikilivres.
Aller à : navigation, rechercher
Programmation JavaScript
Programmation JavaScript
Sommaire
  1. Introduction 100 percent.svg
  2. Présentation
  3. Syntaxe 50%.svg
    1. Ligne d'instruction 100 percent.svg
    2. Ordre d'évaluation 100 percent.svg
    3. Bloc d'instructions 100 percent.svg
    4. Identificateurs 100 percent.svg
    5. Expression littérale 100 percent.svg
    6. Commentaire 100 percent.svg
    7. Mots réservés et constantes 100 percent.svg
    8. Variables 100 percent.svg
    9. Opérateurs 100 percent.svg
    10. Structures de contrôle 75%.svg
    11. Fonctions utilisateur 100 percent.svg
    12. Évènement 75%.svg
  4. Objets prédéfinis 00%.svg
    1. window 25%.svg
    2. document 25%.svg
    3. navigator 25%.svg
    4. Array 100 percent.svg
    5. Boolean 00%.svg
    6. Date 25%.svg
    7. Error 00%.svg
    8. Function 00%.svg
    9. Math 25%.svg
    10. Number 25%.svg
    11. Object 00%.svg
    12. String 25%.svg
    13. Element 25%.svg
    14. RegExp 00%.svg
  5. Fonctions prédéfinies
  6. Mise en œuvre
  7. Programmation avancée
    1. Opérateurs de bits 00%.svg
    2. Programmation objet 00%.svg
    3. Gestion d'évennements 00%.svg
    4. Exceptions et erreurs 00%.svg
    5. Interface DOM 00%.svg
    6. Objets Microsoft 00%.svg
    7. Applets Java 00%.svg
    8. Notation JSON 00%.svg
    9. AJAX 00%.svg
  8. Frameworks
    1. Dojo
      1. Hello World
      2. Widgets
      3. Ressources
    2. jQuery
    3. Node.js
    4. React
  9. Tests
    1. Ava
    2. Jest
    3. Selenium
  10. Débogage
  11. Références25%.svg
Modifier ce modèle ce sommaire


Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs de Dojo. Il se base sur http://dojo.jot.com/WikiHome/Tutorials/HelloWorld.

Notes[modifier | modifier le wikicode]

Il est important que la version 0.4.0 ou supérieure soit utilisée. Elle peut être trouvée à cette adresse :

http://download.dojotoolkit.org/release-0.4.0/

Initialiser Dojo[modifier | modifier le wikicode]

Créer l'arborescence suivante :

- HelloWorldTutorial/
   |
   |---- js/
         |
         ---- dojo/

télécharger la dernière version de dojo et la décompresser dans le répertoire HelloWorld/js/dojo/

Vous devriez alors avoir la structure suivante : ('..' indique qu'il y a plus de répertoire)

   - HelloWorldTutorial/
   |
   |-- js/
         |
         -- dojo/
              |
              -- build.txt
              -- CHANGELOG
              -- demos
                   |
                   -- ..
              -- dojo.js
              -- dojo.js.uncompressed.js
              -- iframe_history.html
              -- LICENSE
              -- README
              -- src/
                   |
                   -- ..

Pour commencer[modifier | modifier le wikicode]

Nous allons maintenant créer une page html de base qui servira à appeler toute les fonctionnalitées de Dojo que nous utiliserons par la suite.

<html>
 <head>
   <title>Dojo: Hello World!</title>
   <!-- SECTION 1 -->
   <script type="text/javascript" src="js/dojo/dojo.js"></script>
 </head>
 <body>
 </body>
</html>

Créer un bouton gadget[modifier | modifier le wikicode]

Nous allons créer un bouton gadget (widget en anglais, c'est ce terme qui est utilisé par Dojo) avec le texte Hello world. Dans ce cas ci, trois option sont disponible (mouseOut, mouseOver, et mouseDown), qui enrichissent considérablement l'expérience de l'utilisateur !

La première chose à faire est de demander à Dojo de charger le module correspondant.

Dans l'en-tête (<head> jusqu'à </head>), placer la section correspondante :

<!-- SECTION 2 -->
 <script type="text/javascript">
  // Charge le code de Dojo relatif aux fonctions de chargement des widgets
    dojo.require("dojo.widget.*");
  // Charge le code de Dojo relatif au bouton gadget
    dojo.require("dojo.widget.Button");
 </script>

Le premier dojo.require instruit dojo d'inclure les fonctions widget (gadgets) (Attention cela ne charge pas tout les widgets!) ; c'est les lignes d'instructions du second dojo.require qui charge le bouton. Si vous oubliez la deuxième ligne, vous aurez un bouton en HTML.

Après avoir fait ces changements, insérer ce code suivant à l'intérieur des balises <body> et </body>

<button dojoType="Button" widgetId="helloButton">Salut tout le monde!</button>

L'élément clé à percevoir ici est le dojoType. Le type est ici un bouton, mais nous pourrions mettre un input à la place.

Le widgetId identifie le bouton. Il peut être remplacé par simplement id .

Pour mettre plusieurs bouton avec la même phrase, il faut copier cette ligne et changer l'id.