Le langage PHP (Hypertext Preprocessor) est un langage de script...
JavaScript est l’un des langages de programmation les plus utilisés pour créer des applications web interactives. L’une des façons les plus courantes d’intégrer du code JavaScript dans une page HTML est d’appeler des fonctions JavaScript directement depuis le code HTML. Cela peut être accompli de plusieurs manières, offrant une grande flexibilité aux développeurs pour créer des sites web dynamiques et réactifs. Dans cet article, nous allons explorer différentes méthodes pour appeler une fonction JavaScript à partir d’un fichier HTML.
L’une des façons les plus simples d’appeler une fonction JavaScript depuis HTML est d’utiliser l’attribut onclick dans une balise HTML. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Appel de fonction JavaScript en HTML</title>
<script>
function maFonction() {
alert("La fonction JavaScript a été appelée !");
}
</script>
</head>
<body>
<button >Dans cet exemple, lorsque le bouton est cliqué, la fonction maFonction() est appelée et affiche une boîte de dialogue avec un message.
Vous pouvez également appeler une fonction JavaScript lorsque la page HTML est chargée en utilisant l’événement onload du corps (<body>) du document HTML. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Appel de fonction JavaScript en HTML</title>
<script>
function maFonction() {
alert("La fonction JavaScript a été appelée !");
}
function chargementPage() {
maFonction();
}
</script>
</head>
<body onload="chargementPage()">
</body>
</html>Dans cet exemple, lorsque la page est entièrement chargée, la fonction chargementPage() est appelée, qui à son tour appelle maFonction().
En dehors de onclick et onload, il existe de nombreux autres événements que vous pouvez utiliser pour appeler des fonctions JavaScript. Par exemple, onmouseover pour déclencher une fonction lorsque le curseur de la souris survole un élément, ou onchange pour déclencher une fonction lorsque la valeur d’un élément de formulaire change.
Une autre approche consiste à utiliser la méthode addEventListener pour ajouter un écouteur d’événement à un élément HTML. Cela permet de séparer le code HTML et JavaScript de manière plus propre. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Appel de fonction JavaScript en HTML</title>
<script>
function maFonction() {
alert("La fonction JavaScript a été appelée !");
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("monBouton").addEventListener("click", maFonction);
});
</script>
</head>
<body>
<button id="monBouton">Appeler la fonction</button>
</body>
</html>Dans cet exemple, la fonction maFonction() est ajoutée comme gestionnaire d’événement lors du chargement du DOM. Cela sépare le code JavaScript de la structure HTML, ce qui le rend plus modulaire et plus facile à maintenir.
<form>
<input type="email" id="emailInput" oninput="validateEmail()">
<span id="emailError" style="display:none;">Adresse e-mail invalide</span>
</form>
<script>
function validateEmail() {
// Logique de validation de l'e-mail
// Afficher le message d'erreur si l'e-mail est invalide
}
</script><button ><img src="thumbnail.jpg" ><div id="chatMessages"></div>
<input type="text" id="messageInput">
<button ><input type="text" id="username">
<input type="password" id="password">
<button ><canvas id="gameCanvas"></canvas>
<script>
// Logique pour gérer le jeu en utilisant le canvas HTML5
</script><div id="dynamicContent">Contenu dynamique</div>
<button ><!-- Intégration de Google Analytics -->
<script>
// Logique pour suivre les interactions des utilisateurs avec le site web
</script>Ces exemples démontrent comment les fonctions JavaScript sont utilisées dans des contextes divers pour créer des expériences interactives et dynamiques sur les pages web.
<form>
<input type="number" id="montantPret" placeholder="Montant du prêt">
<input type="number" id="dureePret" placeholder="Durée du prêt en mois">
<button ><input type="color" id="choixCouleur" onchange="afficherCouleur()">
<div id="affichageCouleur">Couleur sélectionnée</div>
<script>
function afficherCouleur() {
const couleur = document.getElementById("choixCouleur").value;
document.getElementById("affichageCouleur").style.backgroundColor = couleur;
document.getElementById("affichageCouleur").innerText = "Couleur sélectionnée: " + couleur;
}
</script><ul id="listeTaches">
<!-- Les tâches seront ajoutées dynamiquement ici -->
</ul>
<input type="text" id="nouvelleTache" placeholder="Nouvelle tâche">
<button ><input type="number" id="longueurMotDePasse" placeholder="Longueur du mot de passe">
<button ><input type="number" id="caloriesAliment" placeholder="Calories par aliment">
<input type="number" id="quantiteAliment" placeholder="Quantité consommée">
<button >Ces exemples démontrent comment l’appel de fonctions JavaScript depuis des fichiers HTML peut être utilisé pour créer des fonctionnalités interactives et utiles pour les utilisateurs. Que ce soit pour des calculs, des sélecteurs interactifs ou des gestionnaires de tâches, JavaScript offre une flexibilité pour rendre les pages web plus dynamiques et réactives.
Appeler une fonction JavaScript à partir d’un fichier HTML est une opération courante dans le développement web. En utilisant les différentes méthodes décrites dans cet article, vous pouvez rendre vos pages web plus interactives et réactives. Quelle que soit la méthode que vous choisissez, assurez-vous de garder votre code propre, modulaire et facile à comprendre pour faciliter la maintenance et l’évolutivité de votre application web.
Cet article est une partie de la série des Exercices Corrigés en Comptabilité Analytique La…
La comptabilité analytique (ou comptabilité de gestion) est un outil essentiel pour comprendre la rentabilité…
Cet article détaille des exemples de QCM en Gestion de Production 👇 La gestion de…
Le rôle de gestionnaire de stock est crucial dans les entreprises, particulièrement dans les secteurs…
Résoudre des Exercices Corrigés en Rapprochement Bancaire Le rapprochement bancaire est une activité cruciale en…
Le rapprochement bancaire est un processus important pour s'assurer que les enregistrements comptables d'une entreprise…
This website uses cookies.