Programmation JavaScript/Programmer en deux minutes

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

JavaScript est un langage exécuté par le navigateur web, à l'affichage d'une page web. (il est surtout utilisé pour ça)

Créer ce document HTML (le nom du fichier se terminera généralement par .html) puis l'ouvrir avec un navigateur.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
   <head>
      <script type="text/javascript">

          alert(prompt("bonjour le monde !"));

      </script>
   </head>

   <body>
      Corps de la page.
   </body> 
</html>

Le navigateur prompte et alerte puis affiche le corps du document. Félicitations, vous avez écrit vos premières instructions JavaScript dans un document HTML !

Note : La plupart des navigateurs exécuteront sans problème ce code simplifié :

<body>
   Corps de la page.
   <script type="text/javascript">
          alert(prompt("bonjour le monde !"));
   </script>
</body>

Une minute[modifier | modifier le wikicode]

Une page web est un document composé d'une tête et d'un corps (<html> <head></head> <body></body> </html>).
Le corps du document est affiché à l'écran tandis que la tête contient le titre de la page, son favicon, ses mots-clés, etc. (pour un exemple, afficher le code source de cette page (on peut souvent utiliser le raccourci clavier Ctrl + U))

La tête et le corps d'un document html peuvent contenir des instructions JavaScript :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
   <head>
   </head>
 
   <body>
      Corps.
   
      <script type="text/javascript">
          alert(prompt("bonjour le monde !"));
      </script>
   </body> 
</html>

A l'ouverture de ce document, le navigateur affiche le corps puis prompt et alert.

une minute trente : une fonction JavaScript[modifier | modifier le wikicode]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
   <head>
      <script type="text/javascript">
          function Prompt_et_alert() {
               alert(prompt("bonjour le monde !"));
          }
      </script>
   </head>
 
   <body>
      <a onmouseout="Prompt_et_alert();"> <!-- une ancre balise un hyperlien -->
      Corps.
      </a>

   </body> 
</html>

La fonction est définie en tête de document et est exécutée lorsque la souris sort de l'ancre (onmouseout).

deux minutes[modifier | modifier le wikicode]

Afin d'aller plus loin, munissez votre navigateur d'un outil tel Firebug.

Pour apprendre à manipuler cet outil, introduisez une erreur dans votre document, par exemple en oubliant un des guillemets ", et vérifiez la présence de l'erreur dans la console JavaScript.

Félicitation, vous êtes paré pour écrire davantage d'instructions !

En deux minutes :

  1. Une page wiki
  2. Compteur en temps réel des dépenses militaires.
  3. Tout un site web dans un seul document.
  4. Neige dans la fenêtre du navigateur.

Voir aussi[modifier | modifier le wikicode]


Voir aussi le livre : Programmer en deux minutes.