TP 4 : Javascript
JavaScript (JS) est un langage de script léger et interprété, connu pour être utilisé dans le
développement web. Il permet de créer des pages web interactives et peut être exécuté dans le
navigateur de l'utilisateur sans avoir besoin d'être compilé.
• Étape 1: Structure de Base HTML
Commencez par créer la structure de base de votre fichier HTML nommé [Link].
<!DOCTYPE html>
<html>
<head>
<title>Application JavaScript</title>
</head>
<body>
<div id="app"></div>
<script>
// Le JavaScript viendra ici
</script>
</body>
</html>
• Étape 2: Afficher un Message de Bienvenue
Ajoutons un message de bienvenue qui s'affichera au chargement de la page.
[Link]("app").innerHTML = "<h1>Bienvenue dans notre application
JavaScript !</h1>";
• Étape 3: Demander le Nom de l'Utilisateur
Utilisons prompt pour demander le nom de l'utilisateur et stockons-le dans une variable.
let nomUtilisateur = prompt("Quel est votre nom ?");
• Étape 4: Afficher un Message Personnalisé
Page 1|7
Utilisons le nom de l'utilisateur pour afficher un message personnalisé.
• [Link]("app").innerHTML += "<p>Bonjour, " + nomUtilisateur +"
!</p>";
• Étape 5: Ajouter un Bouton pour Réinitialiser
Ajoutons un bouton qui permet à l'utilisateur de réinitialiser le message.
<button id="resetButton">Réinitialiser</button>
• Étape 6: Ajouter un Gestionnaire d'Événements
Ajoutons un gestionnaire d'événements pour réagir au clic sur le bouton de réinitialisation.
[Link]("resetButton").addEventListener("click", function () {
[Link]("app").innerHTML = "<h1>Bienvenue dans notre application
JavaScript !</h1>";
[Link]("app").innerHTML += "<button
id='resetButton'>Réinitialiser</button>";
addResetButtonEventListener(); // Nous allons définir cette fonction juste après
});
• Étape 7: Définir la Fonction pour Ajouter le Gestionnaire d'Événements
Pour éviter le problème où le gestionnaire d'événements ne fonctionnerait plus après la
réinitialisation, nous définissons une fonction pour ajouter le gestionnaire d'événements, et
nous l'appelons initialement et après chaque réinitialisation.
function addResetButtonEventListener() {
[Link]("resetButton").addEventListener("click", function () {
[Link]("app").innerHTML = "<h1>Bienvenue dans notre application
JavaScript !</h1>";
[Link]("app").innerHTML += "<button
id='resetButton'>Réinitialiser</button>";
addResetButtonEventListener(); // Assure que le gestionnaire d'événements est
réajouté après la réinitialisation
});
}
• Étape 8: Combiner le Tout
Maintenant, combinons toutes ces parties dans le script <script> de notre fichier HTML.
<!DOCTYPE html>
<html>
<head>
<title>Application JavaScript</title>
Page 2|7
</head>
<body>
<div id="app"></div>
<script>
[Link]("app").innerHTML = "<h1>Bienvenue dans notre
application JavaScript !</h1>";
let nomUtilisateur = prompt("Quel est votre nom ?");
[Link]("app").innerHTML += "<p>Bonjour, " + nomUtilisateur
+ " !</p>";
[Link]("app").innerHTML += "<button
id='resetButton'>Réinitialiser</button>";
function addResetButtonEventListener() {
[Link]("resetButton").addEventListener("click",
function () {
[Link]("app").innerHTML = "<h1>Bienvenue dans notre
application JavaScript !</h1>";
[Link]("app").innerHTML += "<button
id='resetButton'>Réinitialiser</button>";
addResetButtonEventListener();
});
}
addResetButtonEventListener(); // Appel initial pour ajouter le gestionnaire
d'événements
</script>
</body>
</html>
Avec ce travail, vous avez construit une petite application web interactive avec JavaScript,
étape par étape. Vous pouvez continuer à explorer et à expérimenter avec JavaScript pour
ajouter plus de fonctionnalités et de dynamisme à vos pages web.
Page 3|7
Continuons à enrichir notre application en y ajoutant de nouvelles fonctionnalités. Nous allons
introduire un formulaire pour que l'utilisateur puisse entrer son âge, et ensuite, nous afficherons
un message personnalisé en fonction de cette information. De plus, nous ajouterons une
fonctionnalité pour changer la couleur de fond de notre application.
• Étape 9: Ajouter un Formulaire pour l'Âge
Ajoutons un formulaire HTML pour permettre à l'utilisateur de saisir son âge.
<form id="ageForm">
<label for="age">Entrez votre âge :</label>
<input type="number" id="age" name="age" min="1" max="100">
<input type="submit" value="Soumettre">
</form>
• Étape 10: Traiter la Soumission du Formulaire
Ajoutons un gestionnaire d'événements JavaScript pour traiter la soumission du formulaire et
afficher un message en fonction de l'âge de l'utilisateur.
[Link]("ageForm").addEventListener("submit", function(event) {
[Link](); // Empêche le formulaire de soumettre réellement, ce qui
rafraîchirait la page
var age = [Link]("age").value;
var messageAge = "";
if (age < 18) {
messageAge = "Vous êtes mineur.";
} else {
messageAge = "Vous êtes majeur.";
}
[Link]("app").innerHTML += "<p>" + messageAge + "</p>";
});
• Étape 11: Ajouter une Fonction pour Changer la Couleur de Fond
Ajoutons un bouton pour changer la couleur de fond de l'application et une fonction JavaScript
correspondante.
<button id="changeColorButton">Changer la couleur de fond</button>
Ajoutons une fonction JavaScript correspondante.
[Link]("changeColorButton").addEventListener("click", function() {
var colors = ["#FFC0CB", "#FFD700", "#ADFF2F", "#40E0D0", "#BA55D3"];
var randomColor = colors[[Link]([Link]() * [Link])];
Page 4|7
[Link] = randomColor;
});
• Étape 12: Organiser le Code JavaScript
Pour rendre le code plus propre et organisé, regroupons toutes les fonctions et gestionnaires
d'événements JavaScript dans une fonction d'initialisation et appelons-la lorsque la page est
chargée.
<!DOCTYPE html>
<html>
<head>
<title>Application JavaScript</title>
</head>
<body>
<div id="app"></div>
<script>
function initializeApp() {
[Link]("app").innerHTML = "<h1>Bienvenue dans notre
application JavaScript !</h1>" +
"<form id='ageForm'>" +
"<label for='age'>Entrez votre âge :</label>" +
"<input type='number' id='age' name='age' min='1' max='100'>" +
"<input type='submit' value='Soumettre'>" +
"</form>" +
"<button id='resetButton'>Réinitialiser</button>" +
"<button id='changeColorButton'>Changer la couleur de
fond</button>";
addResetButtonEventListener();
addAgeFormEventListener();
addChangeColorButtonEventListener();
}
function addResetButtonEventListener() {
[Link]("resetButton").addEventListener("click",
function () {
initializeApp();
});
}
function addAgeFormEventListener() {
[Link]("ageForm").addEventListener("submit", function
(event) {
[Link]();
Page 5|7
var age = [Link]("age").value;
[Link]("app").innerHTML += (age < 18) ? "<p>Vous
êtes mineur.</p>" : "<p>Vous êtes majeur.</p>";
});
}
function addChangeColorButtonEventListener() {
[Link]("changeColorButton").addEventListener("click",
function () {
var colors = ["#FFC0CB", "#FFD700"
, "#ADFF2F", "#40E0D0", "#BA55D3"];
[Link] = colors[[Link]([Link]() *
[Link])];
});
} // Appel initial pour lancer l'application
[Link]=initializeApp;
</script>
</body>
</html>
Ce code crée une application web interactive où l'utilisateur peut interagir à travers un
formulaire, changer dynamiquement le contenu de la page, et modifier l'apparence de
l'interface. En structurant le code de cette manière, vous rendez votre application plus
modulaire et plus facile à maintenir ou à étendre avec de nouvelles fonctionnalités.
Travail à faire :
• Ajouter une feuille de style nommée [Link] et
l'utiliser dans ce formulaire afin d'obtenir une
présentation finale satisfaisante.
• Intégrer d'autres événements liés aux composants
input, en affichant pour chacun un message d'alerte
Page 6|7
(alert()) indiquant le déclenchement de l'événement
concerné.
Page 7|7
