ARTICLE DU TUTORIEL

Avancé

10 min

Présentation de JavaScript

Apprenez à utiliser JavaScript et jQuery pour ajouter de l'interactivité dans vos pages web.

JavaScript est un langage de script et un standard web ouvert compatible avec les principaux navigateurs. Vous pouvez l’utiliser pour ajouter de l’interactivité et des fonctionnalités dans une page web. jQuery est une bibliothèque JavaScript qui facilite l’ajout d’éléments d’interface utilisateur, d’effets et d’animations dans les web pages. Veillez à télécharger les fichiers du projet pour pouvoir suivre ce tutoriel.

Avant de commencer

Téléchargez et enregistrez les fichiers du projet. Ouvrez step-1-intro-js.html dans Dreamweaver et affichez le code source en mode Fractionner.

1

Ajout d’une alerte JavaScript

Pour se former à JavaScript, le mieux est de commencer par la fonction alert, qui vous aidera à comprendre le fonctionnement de base des scripts. La fonction alert affiche un message d’alerte dans une boîte de dialogue. Avec JavaScript, vous devez d’abord définir la fonction (l’action qui a lieu), puis l’évènement déclencheur. Un évènement est ce qui se produit (un clic sur un bouton ou une tabulation à partir d’un champ, par exemple) et déclenche l’exécution de la fonction.

Insérez la fonction alert dans les balises au sein de la section et nommez-la messageWindow. Associez ensuite l’évènement onClick au bouton au bas de la page pour appeler le message d’alerte lorsque l’utilisateur clique dessus.

Code HTML dans une section head



....

Évènement onClick associé à un bouton


SHOW MORE

Prévisualisation des modifications dans un navigateur

Cliquez sur Fichier > Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez tester le code JavaScript.

Vous devrez enregistrer vos fichiers pour voir les modifications.

2

Présentation de jQuery

jQuery est une bibliothèque JavaScript avec des fonctions préintégrées qui facilitent l’ajout d’interactivité, d’animations et autres effets dans votre page sans nécessiter énormément de code JavaScript. En mode Création dans Dreamweaver, pensez à vérifier les widgets jQuery disponibles sous Insertion > jQuery UI ou jQuery Mobile.

Notez que vous pouvez ajouter vos propres scripts jQuery dans une page. Consultez le site web jqueryui.com pour voir les autres interactions, widgets et effets qu’il est possible d’ajouter.

Ouverture du deuxième fichier d’exemple

Ouvrez step-2-intro-js.html dans Dreamweaver et affichez le code source en mode Fractionner.

Ajout d'une animation jQuery

Nous allons ajouter une fonction jQuery pour afficher/masquer une section de contenu sur une page et voir comment utiliser jQuery sur une page web. Vous pouvez télécharger et installer jQuery, ou référencer la bibliothèque jQuery hébergée par Google ou Microsoft. Dans cet exemple, nous allons utiliser la bibliothèque hébergée par Google. Il est en effet plus rapide d’inclure la bibliothèque que de l’installer séparément, et le nombre de fichiers à gérer est moins important.

Insérez des balises dans la section pour importer la bibliothèque dans la page.

Ajoutez ensuite la fonction slideToggle pour afficher et masquer la section de texte sur la page quand l’utilisateur clique sur le bouton. Dans le code ci-dessous, #moreBtn est l’identifiant du bouton sur lequel l’utilisateur clique pour que la fonction slideToggle s’exécute. #content3 est l’identifiant de la balise

qui apparaît et disparaît lorsque l’utilisateur clique sur le bouton.

Prévisualisation des modifications dans un navigateur

Cliquez sur Fichier > Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez tester le code JavaScript.

Pensez à enregistrer les fichiers pour voir les modifications.


22 juillet 2022

Essayez ces tutoriels avec Dreamweaver

Créez des pages web modernes en responsive design.