Commencer à utiliser JavaScript
Écrire votre premier programme JavaScript
HTML ne peut pas faire les calculs, ni déterminer si quelqu’un a correctement rempli un formulaire. HTML permet simplement aux gens de lire du texte, de regarder des vidéos, de voir 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éagir aux visiteurs de votre site. JavaScript vous permet donc de rendre vos sites web plus attrayants, plus efficaces et plus utiles.
JavaScript est plus complexe que HTML ou CSS ; l’objectif principal de ce livre est de vous aider à penser davantage comme un programmeur. Un programme JavaScript comporte ce type de symboles ({ } [ ] ; , () !=) et de nombreux mots inconnus (var, null, else if). On peut dire qu’apprendre un langage de programmation ressemble beaucoup à l’apprentissage d’une autre langue. Vous devez apprendre de nouveaux mots et comprendre comment les assembler.
À propos d’un 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 vos e-mails ou créer des pages web. Mais même si les programmes JavaScript, qui sont aussi des scripts, sont plus simples et plus courts, ils partagent beaucoup des mêmes propriétés que des programmes plus complexes.
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.
Lorsque vous voulez créer un programme JavaScript, vous devez déterminer les étapes nécessaires pour atteindre votre objectif. Une fois ces étapes connues, vous traduirez vos idées en code de programmation — les mots et les caractères qui font en sorte 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 à recevoir du HTML, vous devez donc lui indiquer clairement quand du JavaScript arrive en utilisant la balise HTML <script>.
Après avoir ouvert votre console préférée (comme Node.js), il vous suffit d’attacher un script à une page web. Pour lier JavaScript à une page HTML, vous devez utiliser l’élément <script>, dont la balise nous aide à insérer des programmes JavaScript dans n’importe quelle partie du document HTML. Par exemple :
exemple javascript hello world
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert('Hello, world!');
</script>
<p>...After the script.</p>
</body>
</html>Parlons des balises <script> d’ouverture et de fermeture. Si vous voulez ajouter un script à votre page, vous devez commencer par insérer des balises qui contiennent le script lui-même ou un lien vers un fichier externe contenant des scripts. Dans de nombreux cas, vous placerez les balises <script> dans le <head> de la page afin de garder votre code JavaScript bien organisé dans une seule partie de la page web.
L’élément <script> possède quelques attributs que nous n’utilisons plus très souvent aujourd’hui. Mais on peut encore les rencontrer dans du vieux code :
L’attribut type : <script type=…>
Pour avoir un type, l’ancien HTML — HTML4 — exigeait un script. Auparavant, il s’agissait de type="text/javascript", ce qui n’est plus nécessaire aujourd’hui. En dehors de cela, 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 destiné à indiquer la langue du script. Mais comme JavaScript est la langue par défaut, il n’est pas nécessaire de l’utiliser.
Fichiers JavaScript externes
Comme nous l’avons mentionné plus tôt, l’utilisation de la balise <script> vous permet d’ajouter JavaScript à une seule page web. Mais vous devrez aussi créer des scripts que vous souhaitez partager avec toutes les pages de votre site. Or, copier-coller le même code JavaScript dans chaque page n’est pas une très bonne idée, surtout lorsque votre site comporte 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éutilisabilité du code, car un seul fichier JavaScript peut être utilisé dans plusieurs pages HTML. L’extension d’un fichier JavaScript est .js. Si nous voulons utiliser un script externe, nous devons mettre le nom du fichier de script dans l’attribut src (source) d’une balise <script> :
attribut source javascript
<script src="W3DocsScript.js"></script>Avec l’aide de l’attribut src, nous pouvons attacher des fichiers de script à HTML.
attribut source javascript
<script src="/path/W3DocsScript.js"></script>Dans cet exemple, /path/W3DocsScript.js est un chemin absolu pour le script, qui peut aussi fournir un chemin relatif depuis la même page. Par exemple, une valeur src de mon-script.js désigne ce fichier à côté de la page courante.
Nous pouvons aussi donner une URL complète, qui ressemblera à ceci :
url src javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Si nous voulons attacher plusieurs scripts, nous devons utiliser plusieurs balises :
plusieurs balises src javascript
<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 contenir en même temps l’attribut src et du code à l’intérieur. Cela ne fonctionnera tout simplement pas :
balise script avec attribut src
<!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 script externe avec un attribut src, soit un <script> avec du code intégré. Ce n’est qu’ensuite que nous pouvons diviser cet exemple en deux scripts pour qu’il fonctionne :
exemple javascript en deux scripts
<!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 Retour pour créer une nouvelle ligne vide, puis tapez :
alert('Welcome to W3Docs');Félicitations ! Vous avez tapé votre première ligne de code JavaScript. - Puis tapez
</script>. Le code devrait ressembler à ceci :
exemple d’alerte Javascript
<!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’aperçu. 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 écran. Mais si vous voulez afficher un message directement sur une page web à l’aide de JavaScript, vous pouvez utiliser une commande JavaScript intégrée :
- Ouvrez le fichier test2.html dans votre éditeur de texte. Alors que les balises
<script>apparaissent dans le<head>d’une page web, vous pouvez les placer, ainsi que les programmes JavaScript, directement dans le corps de la page. - Sous
<h1>Writing to the document window</h1>, tapez ce code :
exemple d’écriture de document javascript
<!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() ; elle écrit tout ce que vous placez entre les parenthèses ouvrante et fermante. Dans cet exemple, le HTML <p>Hello world!<p> est ajouté à la page : une balise de paragraphe et deux mots.
- Enregistrez maintenant la page et ouvrez-la dans un navigateur web. Comme vous le voyez, la page s’ouvre et « Welcome to 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 offre de nombreuses façons de corriger et d’équilibrer les problèmes HTML, CSS et JavaScript. La console JavaScript est un excellent endroit pour repérer les erreurs et les fautes dans votre code. Elle reconnaît aussi la ligne de votre code où chaque erreur s’est produite.
exemple de journal de console Javascript
<!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.
Pratique
Which of the following statements are true about starting with JavaScript in web development?