Créer une page web dynamique avec jQuery

La création d’une page web statique peut limiter l’interactivité et l’engagement des utilisateurs.

Cela peut entraîner une expérience utilisateur monotone et réduire l’efficacité de la présentation des informations.

Dans cet article, découvrez comment jQuery peut transformer votre page en une expérience interactive et captivante.

Table de matière

Code HTML pour page web pizzéria CSS header dynamique avec jQuery HTML modale et formulaire login Concevoir modale CSS interactivité Script jQuery pour page dynamique FAQ Conclusion

Formation Maîtriser jQuery : Les Fondamentaux de Manière Pratique

Apprenez les bases de jQuery à travers des projets pratiques et engageants.

Dans cet article, vous aurez l’opportunité de mettre en pratique bien de notions vues un peu plus tôt en jQuery en créant une page web dynamique de pizzéria. Soulignons que la pratique est une base essentielle pour une meilleure compréhension des langages Informatiques.

Code HTML pour page web pizzéria

Dans l’entame de la réalisation de cette page web de pizzéria, l’idée sera donc de créer un header qui va contenir un titre de niveau 1 (h1), un paragraphe et un bouton et le développer au fur et à mesure afin de fournir une page web complète.

Je vous laisse donc réaliser cela en ayant toujours comme leitmotiv, sans la pratique, je ne comprendrai rien du tout.

Vous avez ici le code HTML nécessaire pour faire cela et en même temps la possibilité de le comparer au votre

				
					
 <!DOCTYPE html>
<html lang="fr">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pizzéria</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-ddcc1af3-f273-4345-a0fb-eff1b019ca2a: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ddcc1af3-f273-4345-a0fb-eff1b019ca2a: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ddcc1af3-f273-4345-a0fb-eff1b019ca2a","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<header>
<h1>La pizzéria</h1>
<p>Connectez-vous afin de pouvoir commander votre pizza</p>
<button>se connecter</button>
</header>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"4c1d833dee","url":"https:\/\/blog.alphorm.com\/creer-page-web-dynamique-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Vous aurez dans votre navigateur ceci :

Bravo si vous avez pu avoir le même résultat. Vous vous rendez compte que pratiquer soi-même facilite la compréhension.

Après cela, il va falloir faire la mise en forme du header pour offrir une page web conviviale aux utilisateurs.

CSS header dynamique avec jQuery

Pour donc styliser le header, créez d’abord un fichier « style.css » dans un dossier « css » et ensuite appuyez-vous sur toutes vos connaissances en CSS pour donner une forme agréable au header.

Voici le tout le code requis pour pouvoir réaliser cela et avec en commentaire des explications claires pour vous permettre de comprendre le fonctionnement et pourquoi pas le réaliser vous-même.

				
					
 /* Importer les polices de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Seymour+One&display=swap');
/**
* Styles du body
*
* Styles pour l'élément body, y compris la famille de police, la marge et l'image d'arrière-plan.
*/
body {
font-family: 'Roboto', sans-serif;
margin: 0;
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
/*** HEADER ***********/
/**
* Styles d'en-tête
*
* Styles pour l'élément d'en-tête, y compris l'alignement du texte, la famille de polices et les couleurs.
*/
header {
text-align: center;
}
header h1 {
font-family: 'Seymour One', sans-serif;
font-size: 3rem;
color: #c0392b;
text-shadow: 0 0 10px #f3f3f3;
}
header p {
font-size: 1.4rem;
color: #f3f3f3;
text-shadow: 0 0 10px #333;
margin-bottom: 35px;
}
header button {
background-color: #d35400;
cursor: pointer;
padding: 9px 25px;
font-size: 1.3rem;
text-transform: capitalize;
letter-spacing: 1px;
border: none;
border-radius: 50px;
color: #f3f3f3;
box-shadow: 0 0 3px #999;
transition: 1s;
}
header button:hover {
transform: translateY(-10px);
background-color: #e67e22;
}
/*** HEADER ***********/

Une fois dans votre navigateur, vous verrez un changement total de votre page web grâce à la mise en forme avec CSS

Nous allons de ce part ajouter le code du formulaire de la fenêtre de la modale et l’exploiter par la suite.

Après qu’un utilisateur ait cliqué sur le bouton «se connecter », une fenêtre modale dans lequel on mettra un formulaire de connexion s’ouvrira. Nous allons donc réaliser ça ensemble.

HTML modale et formulaire login

Alors pour la modale, il sera question de juste créer des champs de login et de mot de passe avec un bouton de type submit. Je vous laisse donc le réaliser vous-même. Allez, ce n’est pas quelque chose de compliqué.

Vous pourriez faire la comparaison avec le code-ci :

				
					
 <section>
<div>
<p class="closed"><i class="fa-solid fa-circle-xmark"></i></p>
<p class="centrer"><i class="fa-solid fa-pizza-slice"></i></p>
<form action="" method="post">
<label for="login">login</label>
<input type="text" name="login" id="login">
<label for="pass">pass</label>
<input type="password" name="pass" id="pass">
<input type="submit" value="entrer">
</form>
</div>
</section>

NB : vous devrez ajouter votre code juste après le header

Vous remarquerez l’apparition de toutes vos manipulations du formulaire sur l’image suivante :

Ensemble, nous allons à travers ce formulaire concevoir la fenêtre modale.

Concevoir modale CSS interactivité

Pour la conception donc de la fenêtre modale, il s’agira de faire la mise en forme du formulaire sur la page web avec le CSS.

Vous devez donc ajouter le code suivant à votre fichier CSS pour réaliser cela.

				
					
 /*** SECTION ***********/
/**
* Section Styles
*
* Styles pour l'élément section, y compris la couleur de fond, la position et l'affichage.
*/
section {
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section div {
background-color: #ecf0f1;
width: 350px;
padding: 20px;
border-radius: 10px;
}
section label {
text-transform: capitalize;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 1px;
}
section input {
display: block;
width: 100%;
margin-top: 5px;
margin-bottom: 20px;
padding: 12px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #bbb;
outline: none;
}
section input[type="submit"] {
background-color: #d35400;
cursor: pointer;
font-size: 1.5rem;
text-transform: capitalize;
letter-spacing: 1px;
border: none;
color: #f3f3f3;
transition: 1s;
}
section input[type="submit"]:hover {
background-color: #e67e22;
}
/**
* Utility Classes
*
* Classes utilitaires pour styliser les éléments, y compris l'alignement du texte et la taille de la police.
*/
.closed {
text-align: right;
margin: 0;
}
.centrer {
text-align: center;
font-size: 5rem;
margin: 0;
margin-bottom: 25px;
color: #999;
}
.fa-circle-xmark {
cursor: pointer;
color: #333;
}
.fa-circle-xmark:hover {
color: #999;
}
/*** SECTION ***********/

Vous verrez comment à travers CSS la fenêtre modale a pris forme.

C’est bien beau, n’est-ce-pas ? Et bien nous allons y ajouter de l’interactivité avec jQuery.

Script jQuery pour page dynamique

Pour rendre donc dynamique notre page web, nous allons développer notre script jQuery en se basant sur toutes nos connaissances déjà acquises jusqu’à maintenant.

Créez donc un fichier « script.js » dans un dossier JS et développer le script permettant de rendre comme expliqué un peu plus haut la page web dynamique.

Vous pourriez comparer votre code à celui-ci :

				
					
 /**
* Ce script masque toutes les sections lors du chargement de la page, puis ajoute des écouteurs d'événements
* au bouton d'en-tête et à l'icône « X » pour afficher et masquer les sections, respectivement.
* <i class="fa-circle-xmark">X</i>
*
*/
$(document).ready(function() {
$('section').hide();
$('header button').click(function() {
$('section').show();
});
$('.fa-circle-xmark').click(function() {
$('section').hide();
});
});

Question : A quoi sert la méthode d’événement click ?

NB : n’oubliez pas d’appeler votre fichier JS et jQuery dans votre « index.html ».

Après tout ceci, vous verrez qu’une fois le bouton « se connecter » cliqué, la fenêtre modale contenant le formulaire pour la pizzéria s’ouvrira. Quel dynamisme

Pour conclure cet exercice de jQuery, nous avons exploré les fondamentaux de cette bibliothèque JavaScript populaire, notamment la sélection et la manipulation d’éléments DOM, la gestion des événements, ainsi que les effets d’animation. L’utilisation de jQuery simplifie considérablement l’écriture de code JavaScript, rendant les interactions web plus fluides et réactives. En maîtrisant ces concepts de base, vous êtes désormais mieux équipé pour enrichir vos projets web avec des fonctionnalités interactives et dynamiques. N’oubliez pas que jQuery, tout en étant puissant, est une des nombreuses options disponibles pour le développement front-end moderne, et qu’il est important de choisir les outils les mieux adaptés à vos besoins spécifiques. Continuez à explorer, expérimenter et affiner vos compétences pour créer des expériences utilisateur exceptionnelles. Un petit conseil, explorez davantage de notions en jQuery et vous aurez plein la vue sur vos pages web.

Référence : Il existe plusieurs plateformes en ligne où vous pourrez pratiquer jQuery à travers des exercices interactifs, des tutoriels et des projets. Voici quelques-unes des plus populaires :
Khan Academy – jQuery
iamvdo
CodePen
Ces plateformes offrent une variété de ressources pour apprendre et pratiquer jQuery, avec des approches différentes qui peuvent convenir à différents styles d’apprentissage.

Méthode	Description
.hide()	Elle est utilisée pour masquer les éléments sélectionnés de la page, en l’occurrence la section
.show()	Elle est utilisée pour afficher les éléments sélectionnés qui ont été précédemment masqués avec .hide()
.click()	Elle est utilisée pour attacher un gestionnaire d’événements au clic d’un élément ou pour déclencher un événement de clic sur un élément sélectionné en l’occurrence au bouton d’en-tête et à l’icône « X » pour afficher et masquer les sections, respectivement.

Découvrez ci-dessous un aperçu interactif de l’exercice grâce à l’intégration du CodePen, où vous pouvez tester et explorer le code directement :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment créer une page web dynamique avec jQuery?

Pour créer une page web dynamique avec jQuery, commencez par structurer votre HTML pour définir les éléments de base de votre page, tels que les en-têtes et les formulaires. Ensuite, utilisez CSS pour styliser ces éléments, en veillant à ce que la mise en page soit conviviale. Enfin, intégrez jQuery pour ajouter de l’interactivité, comme l’affichage et la dissimulation de fenêtres modales, en utilisant des méthodes telles que .hide() et .show(). Cela améliore l’expérience utilisateur en rendant votre page plus réactive et interactive.

Quel est le rôle du CSS dans une page web dynamique?

Le CSS joue un rôle essentiel dans la création d’une page web dynamique en définissant le style et la mise en forme de la page. Dans le contexte d’une pizzéria, CSS est utilisé pour donner une apparence attrayante aux éléments HTML, tels que les en-têtes et les boutons. Il permet d’ajuster l’alignement, les couleurs, les polices et les effets de transition, ce qui contribue à améliorer l’esthétique et l’expérience utilisateur globale de la page web.

Comment intégrer un formulaire de connexion avec une fenêtre modale?

Pour intégrer un formulaire de connexion dans une fenêtre modale, commencez par créer le formulaire HTML avec des champs de saisie pour le login et le mot de passe. Utilisez CSS pour styliser la modale, en ajustant sa taille, sa position et son apparence visuelle. Enfin, appliquez jQuery pour gérer l’ouverture et la fermeture de la modale, en ajoutant des événements de clic pour afficher le formulaire lorsque l’utilisateur interagit avec un bouton spécifique. Cela crée une expérience utilisateur fluide et interactive.

Pourquoi utiliser jQuery pour les interactions web?

jQuery est utilisé pour simplifier les interactions web en facilitant la manipulation du DOM, la gestion des événements et les effets d’animation. Il fournit une syntaxe concise pour sélectionner et modifier les éléments HTML, rendant les tâches complexes plus accessibles. Dans le développement d’une page web dynamique, jQuery permet de créer des fonctionnalités interactives telles que l’affichage de modales, la validation de formulaires et l’ajout d’effets visuels, améliorant ainsi l’interactivité et la réactivité de la page.

Quels sont les avantages de pratiquer jQuery?

Pratiquer jQuery offre plusieurs avantages, notamment l’amélioration de vos compétences en développement front-end et la capacité à créer des interfaces utilisateur interactives. En vous exerçant, vous vous familiarisez avec les méthodes de sélection et de manipulation d’éléments, la gestion des événements et l’animation, ce qui vous permet de rendre vos projets web plus dynamiques. De plus, jQuery est largement utilisé et soutenu par une vaste communauté, ce qui vous permet d’accéder facilement à des ressources et des solutions pour vos défis de développement.

Conclusion

En intégrant ces techniques, vous avez enrichi votre page web avec des fonctionnalités dynamiques. Quelle autre fonctionnalité aimeriez-vous explorer pour améliorer l’interactivité de vos projets web?