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.
Ce qu'il vous faut
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.
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>
Évènement onClick associé à un bouton
<div id="moreBtn" onClick="messageWindow()">
SHOW MORE
</div>
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.
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 <script></script> dans la section <head></head> pour importer la bibliothèque dans la page.
<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>
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.
