w3docs logo

Commencez à utiliser Javascript

Rédiger votre premier programme JavaScript

HTML ne peut pas faire les mathématiques, il ne peut pas déterminer si quelqu'un a correctement rempli un formulaire. HTML permet simplement aux gens de lire le texte, de regarder des vidéos, de regarder des images et de cliquer sur des liens. Vous avez besoin de JavaScript pour ajouter de l'intelligence à vos pages Web afin qu'elles puissent répondre aux visiteurs de votre site. Ainsi, JavaScript vous permet de rendre vos sites Web plus attrayants, efficaces et utiles.

JavaScript est plus complexe que HTML ou CSS, le principal objectif de ce livre est de vous aider à penser plus comme un programmeur. Un programme JavaScript a ce genre de symboles ({ } [ ] ; , () !=) et de nombreux mots inconnus (var, null, else if). Nous pouvons dire que l'apprentissage d'un langage de programmation ressemble beaucoup à l'apprentissage d'une autre langue. Vous devez apprendre de nouveaux mots et comprendre comment les assembler.

À propos de Programme informatique?

Ajouter JavaScript à une page Web signifie que vous écrivez un programme informatique. De nombreux programmes JavaScript sont beaucoup plus simples que les programmes que vous utilisez pour lire des e-mails, créer des pages Web. Mais malgré tout, les programmes JavaScript, qui sont également des scripts, sont plus simples et plus courts et partagent de nombreuses propriétés des programmes plus compliqués.

Si vous voulez afficher un message de bienvenue en utilisant le nom du visiteur de la page Web : “Bienvenue, John Doe!”, vous devez faire plusieurs choses:

  • Demander le nom du visiteur;
  • Obtenir la réponse du visiteur;
  • Afficher le message sur la page Web.

Quand vous voulez créer un programme JavaScript, vous devez déterminer les étapes nécessaires pour atteindre votre objectif. Une fois que vous connaissez les étapes, vous traduirez vos idées en code de programmation - les mots et les caractères qui font que le navigateur Web se comporte comme vous le souhaitez.

Comment ajouter JavaScript à une Page

Les navigateurs Web peuvent comprendre HTML et CSS et convertir ces langages en un affichage visuel à l'écran. Le navigateur Web s'attend à du HTML, vous devez donc clairement indiquer au navigateur quand JavaScript arrive en utilisant la balise <script>.

Après avoir ouvert votre console préférée (comme Node.js), vous n'avez qu'à attacher un script à une page Web. Pour lier Javascript à la page HTML, vous devez utiliser l'élément <script>, cette balise nous aide à insérer des programmes Javascript dans n'importe quelle partie du document HTML. Par exemple:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>

Discutons des balises <script> d'ouverture et de fermeture. Si vous voulez ajouter un script à votre page, vous devriez commencer par insérer des balises, qui incluent le script lui-même ou un lien vers un fichier externe, qui contient des scripts. Dans de nombreux cas, vous mettrez les balises <script> dans la <head> de la page pour garder votre code JavaScript intelligemment organisé dans une partie de la page Web.

L'élément <script> a quelques attributs, que nous n'utilisons pas si souvent de nos jours. Mais nous pouvons quand même les rencontrer dans l'ancien code:

L'attribut type: <script type=…>

Pour avoir un type, le vieux HTML - HTML4, nécessitait un script. Auparavant, c'était type="text/javascript", ce qui n'est plus nécessaire de nos jours. À part ça, la norme HTML moderne a complètement changé la signification de cet attribut. Aujourd'hui, nous pouvons l'utiliser pour les modules JavaScript. Mais nous parlerons des modules plus tard, car c'est un sujet avancé.

L'attribut language: <script language=…>

L'attribut présenté ci-dessus était censé montrer le langage du script. Mais comme JavaScript est le langage par défaut, il n'est pas nécessaire de l'utiliser.

Fichiers JavaScript externes

Comme nous l'avons mentionné précédemment, l'utilisation de la balise <script> vous permet d'ajouter JavaScript à une seule page Web. Mais vous aurez également besoin de créer des scripts que vous voulez partager avec toutes les pages de votre site. Mais simplement copier et coller le même code JavaScript dans chaque page n'est pas une bonne idée, surtout lorsque vous avez un site avec des centaines de pages.

En bref, nous utilisons des scripts externes lorsque nous avons beaucoup de code JavaScript. De cette façon, nous obtenons la réutilisation du code, car un seul fichier JavaScript peut être utilisé dans plusieurs pages html. L'extension pour le fichier JavaScript est .js. Si nous voulons utiliser un script externe, nous devons mettre le nom du fichier script dans l'attribut src (source) d'une balise <script>:

<script src="W3DocsScript.js"></script>

Avec l'aide de l'attribut src, nous pouvons attacher des fichiers de script à HTML.

<script src="/path/W3DocsScript.js"></script>

Dans cet exemple /path/W3DocsScript.js est un chemin absolu pour le script, qui peut également fournir un chemin relatif à partir de la même page. Par exemple, src="W3DocsScript.js" signifie un fichier "W3DocsScript.js".

Nous pouvons aussi donner une URL complète, qui ressemblera à:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Si nous voulons attacher plusieurs scripts, nous devrions utiliser plusieurs balises:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>
...

Si src est défini, le contenu du script sera ignoré. Cela signifie qu'une seule balise <script> ne peut pas avoir en même temps l'attribut src et le code à l'intérieur. Ça ne marchera tout simplement pas:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>

Nous devons choisir soit un externe <script src="…"> ou un <script> régulier avec du code. Seulement après cela, nous pouvons diviser cet exemple en deux scripts pour qu'il fonctionne:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>

Votre premier programme JavaScript

Commençons à programmer, votre premier programme sera très simple:

  • Ouvrez un simple fichier HTML dans votre éditeur de texte préféré.
  • Avant la balise de fermeture </body> cliquez sur une ligne vide et tapez : <script>
  • Appuyez sur la touche Return pour créer une nouvelle ligne vierge, et tapez : alert('Bienvenue à W3Docs');

    Félicitations! Vous avez tapé votre première ligne de code JavaScript.

  • Ensuite, tapez </script>. Le code devrait ressembler à ceci: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
  • Activez un navigateur Web et ouvrez le fichier test1.html pour l'apercevoir. Remarquez que la page est vide lorsque l'alerte apparaît.
  • En cliquant sur le bouton OK de la boîte d'alerte, vous la fermerez. Après la disparition de la boîte d'alerte, la page Web apparaîtra dans la fenêtre du navigateur.

Écrire du texte sur une page Web

Le script de la section précédente est apparu au milieu de votre moniteur. Mais si vous voulez imprimer un message directement sur une page Web en utilisant JavaScript, vous pouvez intégré la commande JavaScript:

  • Ouvrez le fichier test2.html dans votre éditeur de texte.

    Bien que les balises <script> apparaissent dans la <head> d'une page Web, vous pouvez les mettre et les programmes JavaScript directement dans le corps de la page.

  • En dessous de <h1> Écriture dans la fenêtre du document </h1>, tapez ce code: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>

    Document.write() est une commande JavaScript comme la fonction alert(), il écrit ce que vous placez entre les parenthèses d'ouverture et de fermeture. Dans cet exemple le HTML <p>Bonjour monde!<p> est ajouté à la page: une balise de paragraphe et deux mots.

  • Maintenant, enregistrez la page et ouvrez-la dans un navigateur Web.

Comme vous le voyez, la page s'ouvre et “Bienvenue à w3Docs” apparaît sous le titre.

La console JavaScript de Chrome

De nombreux développeurs Web préfèrent utiliser le navigateur Chrome de Google. Son attribut DevTools vous donne de nombreuses façons de corriger et d'équilibrer les problèmes de HTML, CSS et JavaScript. La console JavaScript est un excellent endroit pour traquer les erreurs et les erreurs dans votre code. Elle reconnaît également la ligne de votre code où chaque erreur s'est produite.

<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>

Cliquez sur le bouton du menu Personnaliser pour ouvrir la console JavaScript et choisissez Outils→Console JavaScript. Ou utilisez le raccourci clavier Ctrl+Shift+J (Windows) ou ⌘-Option-J (Mac) etc.

Heure du Quiz : Testez Vos Compétences!

Prêt à relever le défi de ce que vous avez appris ? Plongez dans nos quiz interactifs pour approfondir votre compréhension et renforcer vos connaissances de manière ludique.

❮ Précédent Suivant ❯
Trouvez-vous cela utile?