Introduction
Introduction au JavaScript
29/07/2009
2222 lectures
0 commentaire
3.67/5 (3 votes)
Bienvenue dans les cours de JavaScript. Dans ce cours, nous allons d'abord voir très brièvement ce qu'est le JavaScript et à quoi il sert. Ensuite, nous verrons comment insérer du JavaScript dans une page Web.
Pour la petite histoire, le JavaScript est un langage de script permettant d'exécuter des instructions du côté client, donc qui s'exécutera sur le poste du navigateur et non sur le serveur (contrairement au PHP par exemple). Le JavaScript s'utilise conjointement au DOM; Grâce à ces deux technologies, il va être très facile de développer des script JavaScript permettant de modifier des éléments de votre page Web selon certaines critères. Je n'ententrai pas dans les détails concernant le DOM car ce n'est pas le sujet, cependant, vous pourrez trouver une bonne explication sur le sujet à l'adresse suivante : https://developer.mozilla.org/fr/Le_DOM_et_JavaScript.
Passons maintenant à la pratique. Par défaut, la page HTML la plus simple possible est composée du code suivant :
Bon jusque là, rien de bien nouveau, nous avons vu ce que représentait ce code dans les cours concernant le XHTML sur ce site. Maintenant, nous allons voir comment insérer du code JavaScript dans cette page. Le code Javascript que nous allons ajouter est simple et permettra simplement d'afficher le message "Je suis du code JavaScript" dans une boite de dialogue. Vous devez savoir qu'il existe deux manières d'insérer du JavaScript dans une page et plusieurs endroits possibles. Commençons d'abord par les emplacements.
Le premier emplacement possible d'insertion des script JavaScript est entre les balises head. Effectivement, un script JavaScript ne peut être exécuté que s'il a été entièrement chargé (logique), il est donc primordiale que la page charge le script le plus tôt possible. Nous recommandons donc, dans la mesure du possible, de placer tous vos script entre les balises head. Bien évidemment, cela n'est pas toujours possible, effectivement, parfois le code JavaScript est généré par un autre langage (PHP par exemple) et ne peut donc pas être inséré entre les balises head. Dans ce cas, il vous est possible de mettre le JavaScript où vous le désirez. Enfin, le troisième emplacement est un emplacement forcé. Effectivement, il est possible d'exécuter des actions lorsque le texte d'une zone de texte change par exemple, dans ce cas là, il faudra mettre le JavaScript dans l'event handler de cette zone de texte. Ne vous attardez pas sur ce dernier emplacement, nous en reparlerons dans les prochains cours.
Passons maintenant aux manières d'inclure du JavaScript dans une page Web. La première manière consiste à insérer simplement le code JavaScript tel quel entouré de balise script. Ceci est une bonne façon de procéder lorsqu'il y a peu de code JavaScript. Dès qu'il commence à y avoir beaucoup de ligne de code, il est recommandé d'utiliser la deuxième solution, à savoir, mettre le code JavaScript dans un autre fichier que nous incluerons ensuite à la page HTML. Un détail auquel il faut être attentif est qu'en mettant le script directement dans la page, l'utilisateur pourra le visualiser en regardant la source de la page. Cela sera également possible si vous isolez le code dans un fichier à part, mais cela prendra légéremment plus longtemps. Effectivement, l'utilisateur devra repérer la ligne permettant d'inclure le fichier JavaScript à la page, récupérer le chemin d'accès vers ce fichier et faire un copier/coller de ce chemin dans un navigateur pour finalement télécharger votre fichier.
Regardons ce code :
Comme vous le voyez, nous devons encadrer le code JavaScript de balise script pour indiquer que nous incluons du script. Il existe d'autre langage de script Web (je pense notamment au vbscript), il faut donc ajouter l'attribut language et indiquer JavaScript pour signaler à la page que le code sera interpreté comme du JavaScript. Nous avons ensuite l'attribut type qui permet d'indiquer le type de contenu du script. Mettez text/javascript pour que votre page soit valide XHTML. Ici, nous nous contentons de faire appel à la fonction alert permettant d'afficher une phrase à l'écran. En affichant votre page, vous devriez obtenir ceci :
Comme vous le voyez, la phrase passée en paramètre de la fonction apparaît bien à l'écran. Ne vous inquiètez pas si vous ne comprenez pas tous les termes que nous utilisons, cela viendra bien assez vite au fur et à mesure que vous lirez ces cours. N'oubliez pas que nous avons placé le code JavaScript entre les balises head car celui-ci est statique (non dynamique), mais nous aurions fort bien pu le placer entre les balises body.
L'autre solution pour inclure un script est de le placer dans un autre fichier. Créez donc un nouveau fichier dans lequel vous insérerez le code suivant :
Enregistrez ce fichier dans le même répertoire que votre page et nommez le test.js. Revenez ensuite dans votre page et insérez-y le code suivant :
Comme vous le voyez, ici, nous insérons encore la balise script mais l'utilisons légéremment différement. Nous utilisons en effet l'attribut src qui permet de définir le chemin d'accès vers le fichier de script à charger. Ici, nous tapons donc test.js étant donné que le fichier se trouve dans le même répertoire que la page. Nous utilisons toujours l'attribut language pour indiquer que le langage du script sera du JavaScript et enfin, nous utilisons la balise type pour indiquer le type du script.
Comme vous le voyez, ce n'est pas très compliqué d'insérer du JavaScript dans une page Web. Ici, nous avons vu les deux manières différentes de le faire, nous allons maintenant voir les différentes places ou nous pouvons le déclarer. Bien entendu, nous pouvez utiliser du JavaScript entre les balises head, comme nous venons de le voir, mais vous pouvez également l'utiliser n'importe où entre les balises body de votre page. Ainsi, nous pourrions avoir ceci :
Cependant, étant donné que l'inclusion du script se trouve dans la balise body, il est nécessaire que la page charge tout ce qui se trouve avant l'inclusion du script. En effet, dans l'exemple précédent, tant que la page n'aura pas chargé le texte "Hello", il lui sera impossible d'exécuter le script. Donc, dans la mesure du possible, essayez de mettre le plus de script possible entre les balises head. La dernière solution pour insérer du code JavaScript (ou plutôt d'en appeler) est dans les événements JavaScript des éléments HTML. Nous verrons cela dans la partie concernant les événements car c'est une notion trop large que pour la couvrir dans ce cours d'introduction.
Pour la petite histoire, le JavaScript est un langage de script permettant d'exécuter des instructions du côté client, donc qui s'exécutera sur le poste du navigateur et non sur le serveur (contrairement au PHP par exemple). Le JavaScript s'utilise conjointement au DOM; Grâce à ces deux technologies, il va être très facile de développer des script JavaScript permettant de modifier des éléments de votre page Web selon certaines critères. Je n'ententrai pas dans les détails concernant le DOM car ce n'est pas le sujet, cependant, vous pourrez trouver une bonne explication sur le sujet à l'adresse suivante : https://developer.mozilla.org/fr/Le_DOM_et_JavaScript.
Passons maintenant à la pratique. Par défaut, la page HTML la plus simple possible est composée du code suivant :
Bon jusque là, rien de bien nouveau, nous avons vu ce que représentait ce code dans les cours concernant le XHTML sur ce site. Maintenant, nous allons voir comment insérer du code JavaScript dans cette page. Le code Javascript que nous allons ajouter est simple et permettra simplement d'afficher le message "Je suis du code JavaScript" dans une boite de dialogue. Vous devez savoir qu'il existe deux manières d'insérer du JavaScript dans une page et plusieurs endroits possibles. Commençons d'abord par les emplacements.
Le premier emplacement possible d'insertion des script JavaScript est entre les balises head. Effectivement, un script JavaScript ne peut être exécuté que s'il a été entièrement chargé (logique), il est donc primordiale que la page charge le script le plus tôt possible. Nous recommandons donc, dans la mesure du possible, de placer tous vos script entre les balises head. Bien évidemment, cela n'est pas toujours possible, effectivement, parfois le code JavaScript est généré par un autre langage (PHP par exemple) et ne peut donc pas être inséré entre les balises head. Dans ce cas, il vous est possible de mettre le JavaScript où vous le désirez. Enfin, le troisième emplacement est un emplacement forcé. Effectivement, il est possible d'exécuter des actions lorsque le texte d'une zone de texte change par exemple, dans ce cas là, il faudra mettre le JavaScript dans l'event handler de cette zone de texte. Ne vous attardez pas sur ce dernier emplacement, nous en reparlerons dans les prochains cours.
Passons maintenant aux manières d'inclure du JavaScript dans une page Web. La première manière consiste à insérer simplement le code JavaScript tel quel entouré de balise script. Ceci est une bonne façon de procéder lorsqu'il y a peu de code JavaScript. Dès qu'il commence à y avoir beaucoup de ligne de code, il est recommandé d'utiliser la deuxième solution, à savoir, mettre le code JavaScript dans un autre fichier que nous incluerons ensuite à la page HTML. Un détail auquel il faut être attentif est qu'en mettant le script directement dans la page, l'utilisateur pourra le visualiser en regardant la source de la page. Cela sera également possible si vous isolez le code dans un fichier à part, mais cela prendra légéremment plus longtemps. Effectivement, l'utilisateur devra repérer la ligne permettant d'inclure le fichier JavaScript à la page, récupérer le chemin d'accès vers ce fichier et faire un copier/coller de ce chemin dans un navigateur pour finalement télécharger votre fichier.
Regardons ce code :
Comme vous le voyez, nous devons encadrer le code JavaScript de balise script pour indiquer que nous incluons du script. Il existe d'autre langage de script Web (je pense notamment au vbscript), il faut donc ajouter l'attribut language et indiquer JavaScript pour signaler à la page que le code sera interpreté comme du JavaScript. Nous avons ensuite l'attribut type qui permet d'indiquer le type de contenu du script. Mettez text/javascript pour que votre page soit valide XHTML. Ici, nous nous contentons de faire appel à la fonction alert permettant d'afficher une phrase à l'écran. En affichant votre page, vous devriez obtenir ceci :
Comme vous le voyez, la phrase passée en paramètre de la fonction apparaît bien à l'écran. Ne vous inquiètez pas si vous ne comprenez pas tous les termes que nous utilisons, cela viendra bien assez vite au fur et à mesure que vous lirez ces cours. N'oubliez pas que nous avons placé le code JavaScript entre les balises head car celui-ci est statique (non dynamique), mais nous aurions fort bien pu le placer entre les balises body.
L'autre solution pour inclure un script est de le placer dans un autre fichier. Créez donc un nouveau fichier dans lequel vous insérerez le code suivant :
Enregistrez ce fichier dans le même répertoire que votre page et nommez le test.js. Revenez ensuite dans votre page et insérez-y le code suivant :
Comme vous le voyez, ici, nous insérons encore la balise script mais l'utilisons légéremment différement. Nous utilisons en effet l'attribut src qui permet de définir le chemin d'accès vers le fichier de script à charger. Ici, nous tapons donc test.js étant donné que le fichier se trouve dans le même répertoire que la page. Nous utilisons toujours l'attribut language pour indiquer que le langage du script sera du JavaScript et enfin, nous utilisons la balise type pour indiquer le type du script.
Comme vous le voyez, ce n'est pas très compliqué d'insérer du JavaScript dans une page Web. Ici, nous avons vu les deux manières différentes de le faire, nous allons maintenant voir les différentes places ou nous pouvons le déclarer. Bien entendu, nous pouvez utiliser du JavaScript entre les balises head, comme nous venons de le voir, mais vous pouvez également l'utiliser n'importe où entre les balises body de votre page. Ainsi, nous pourrions avoir ceci :
Cependant, étant donné que l'inclusion du script se trouve dans la balise body, il est nécessaire que la page charge tout ce qui se trouve avant l'inclusion du script. En effet, dans l'exemple précédent, tant que la page n'aura pas chargé le texte "Hello", il lui sera impossible d'exécuter le script. Donc, dans la mesure du possible, essayez de mettre le plus de script possible entre les balises head. La dernière solution pour insérer du code JavaScript (ou plutôt d'en appeler) est dans les événements JavaScript des éléments HTML. Nous verrons cela dans la partie concernant les événements car c'est une notion trop large que pour la couvrir dans ce cours d'introduction.
0 commentaires
Ajouter un commentaire