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

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.

Téléchargement et enregistrement des fichiers du projet
Téléchargement et enregistrement des fichiers du projet

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 <script></script> au sein de la section <head></head> 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

<head>
<script>
function messageWindow() {
  alert("We will show more in Step 2!");
}
</script>
....
</head>

Définition de la fonction alert
Définition de la fonction alert

Événement onClick associé à un bouton

<div id="moreBtn" onClick="messageWindow()">
SHOW MORE
</div

Définition de l’événement
Définition de l’événement

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.

Test du code JavaScript dans un navigateur
Test du code JavaScript dans un navigateur

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.

Accès à jQuery
Accès aux widgets jQuery

Ouverture du deuxième fichier d’exemple

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

Ouverture du deuxième fichier d’exemple
Ouverture du deuxième fichier d’exemple

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 <script></script> dans la section <head></head> pour importer la bibliothèque dans la page.

Ajout d’une fonction jQuery
Ajout d’une fonction jQuery

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

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 <div> qui apparaît et disparaît lorsque l’utilisateur clique sur le bouton.

<script>
  $(document).ready(function(){
    $("#moreBtn").click(function(){
    $("#content3").slideToggle("slow")
    });
  });
</script>

Utilisation de balises <script>
Utilisation de balises <script>

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.

Prévisualisation des modifications dans un navigateur
Prévisualisation des modifications dans un navigateur
Enregistrement des fichiers pour visualiser les modifications
Enregistrement des fichiers pour visualiser les modifications
04/13/2018
Cette page vous a-t-elle été utile ?