Enseignant: Mr HICHRI RIADH Matière : STI
Le langage JavaScript
Les limites du langage HTML :
HTML + CSS permettent de créer un site Web statique (manque d’interactivité),
Absence des structures algorithmiques (conditionnelles et itératives),
Absence de la programmation procédurale (sous programmes, variables, ….),
Absence d’interfaçage avec les bases de données
Q1) Créer la page "[Link]" puis tester les différentes manières d’introduire le script javaScript.
1- Insertion pour exécution directe :
Le code s’exécute automatiquement lors de chargement de la page HTML au niveau du navigateur.
Exemple1
<body>
<script> alert("Ce message est affiché automatiquement");</script>
</body>
2- Exécution en fonction d’un événement :
Lors d’un événement généré par intervention de l’utilisateur (onClick, onmouseOver, …),
Soit provoqué par l’intervention du navigateur (chargement d’une page HTML : onLoad).
Exemple2 : onClick
<head>
<script>
function afficher( )
{ alert("Ce message s’affiche lorsque vous avez cliquez sur le lien 'Cliquer ici' ");}
</script>
</head>
<body>
<a href="#" onClick="afficher()">Cliquer ici</a>
</body>
Exemple3 : onLoad
Les méthodes d’affichages :
1. Méthode alert
<body onLoad =alert('Bonjour Mr alert');>
2. Méthode confirm
<body onLoad =confirm('Bonjour Mr confirm');>
3. Méthode [Link]
<body onLoad =[Link]('Bonjour Melle write');>
4. Méthode [Link]
<body onLoad =[Link]('Bonjour Madame console');>
5. Méthode [Link]("id").innerHTML
Année Scolaire : 2025-2026 1
Enseignant: Mr HICHRI RIADH Matière : STI
<head>
<script>
function message( ){
[Link]('nom').innerHTML=" Salut pour tout le monde";}
</script>
</head>
<body onLoad =message( )>
<p id="nom"></p>
</body>
3- Appel du code JS à partir d’un fichier externe d’extension .js
On peut faire appel aux Scripts JS écrits dans un fichier externe qui portent l’extension .js dans
notre page HTML.
L’intérêt de cette procédure est de réutiliser ces codes dans d’autres pages HTML.
Q2) Créer le fichier "[Link]"
Q3) Ajouter dans la page "[Link]", le lien "Un langage de script qui rend une page web interactive"
permettant d’appeler la fonction reponse( ) lorsque vous cliquer sur le lien hypertexte.
<a href ="#" onclick="reponse( )">Un langage de script qui rend une page web interactive </a>
<div id = "res" ></div>
Q4) Créer la fonction reponse( ), permettant d’afficher "JavaScript" colorée en rouge dans le bloc div
ayant l’id "res" de la page "[Link]".
L’appel du fichier "[Link]" s’écrit soit entre <head></head> soit entre <body> </body>
<script src = "[Link]" ></script>
La lecture des données via la méthode : prompt
Q5) Créer la page "[Link]" permettant d’appeler une fonction "lecture( )" lors du chargement de
la page.
Q6) Développer dans le fichier "[Link]", la fonction "lecture( )", qui demande :
D’introduire votre nom par affectation (utiliser la variable nom),
D’introduire votre prénom par la méthode prompt (utiliser la variable prenom),
D’afficher le message "Bonjour Mr/Mme :" suivis par votre nom et prénom.
L’appel de la fonction "lecture( )" se fait lors du chargement de la page "[Link]"
function lecture() {
var nom ="Hichri"
var prenom = prompt("Quel est votre prénom ?");
alert("Bonjour Mr/Mme : " + nom+" "+prenom);
}
Année Scolaire : 2025-2026 2
Enseignant: Mr HICHRI RIADH Matière : STI
4- Accéder aux éléments dans une page web
a) Accès par id
[Link]("id_Elément") ;
b) Accès par name
[Link]("Name_Elément") ;
Cette méthode retourne une liste d’éléments, meme s’il n’y a qu’un seul élément avec ce
name.
Pour accéder à un élément précis, on utilise l’indice [0], [1], etc.
5- Modifier le contenu d’un élément dans une page web
[Link]("id_Elément").innerHTML = nouveau contenu ;
6- Interagir avec les éléments d’un formulaire
a) Lire et modifier un champ :
Lire la valeur d’un champ
Var variable = [Link]("id_Champ").value ;
Modifier la valeur d’un champ
[Link]("id_Champ").value = valeur ;
Rendre un champ en lecture seulement
[Link]("id_Champ").readonly = true ;
b) Travailler avec les case à cocher et boutons radio
Vérifier si la case est cochée
[Link]("id_Champ").checked ;
cocher une case
[Link]("id_Champ").checked = true ;
décocher une case
[Link]("id_Champ").checked = falsee ;
c) Travailler avec les listes déroulantes
Récupérer l’indice de l’option sélectionnée dans une liste
[Link]("id_liste").selectedIndex ;
selectedIndex retourne un entire correspondant à l’indice de l’option sélectionnée.
Le premier élément a l’indice 0.
Si aucune option n’est sélectionnée, retourne -1
Année Scolaire : 2025-2026 3
Enseignant: Mr HICHRI RIADH Matière : STI
Récupérer la valeur de l’option sélectionnée dans une liste
[Link]("id_liste").value;
Value retourne la valeur de l’option actuellement sélectionnée.
Si la valeur value n’est pas définie dans une option, value retourne le texte affiché de l’option.
Si aucune option n’est sélectionnée, value retourne la valeur de la première option par défaut.
Récupérer la valeur de l’option d’indice i dans une liste
Var L = [Link]("id_liste ") ;
Var valeur = [Link][i].value ;
d) Désactiver/Activer un élément dans le formulaire
Désactiver un élément
[Link]("id_Elément").disabled = true ;
Activer un élément
[Link]("id_Elément").disabled = false ;
7- Les événements
Les événements permettent de rendre les pages web interactives en répondant aux actions des
utilisateurs.
a) Onblur
L’événement onblur se déclenche lorsqu’un élément perd le focus. Il est souvent utilisé
dans les formulaires pour faire des vérifications dès que l’utilisateur quitte un champ.
Utilisable sur input, textarea, select, button…
Exemple
<Input type="text” id=”nom” onblur=”f1()” placeholder=”Entrer votre nom”>
Quand l’utilisateur tape quelque chose puis quitte le champ, la fonction f1() s’exécute
automatiquement.
b) Onfocus
L’événement onfocus se déclenche lorsqu’un élément reçoit le focusse.
Utilisable sur input, textarea, select, button…
Exemple
<Input type="text” id=”nom” onfocus=”f1()” placeholder=”Entrer votre nom”>
Quand l’utilisateur clique dans la zone de texte, la fonction f1() s’exécute
automatiquemse déclenche dès que l’utilisateur tape,ent.
c) Onclick
Se déclenche lorsqu’un utilisateur clique sur un élément
Peut etre appliqué sur presque tous les éléments HTML (bouton, image, paragraphe, etc)
Exemple
<a id=”lien1” onclick=”f1()” href=”#”> Lien1 </a>
Quand l’utilisateur clique sur ce lien, la fonction f1() s’exécute automatiquement.
Année Scolaire : 2025-2026 4
Enseignant: Mr HICHRI RIADH Matière : STI
d) Oninput
Se déclenche dès que l’utilisateur tape, colle, supprime ou modifie le contenu (il n’attend
pas que le champ perd le focus).
Il est utilisé principalement sur les champs de formulaire (input, textarea)
Exemple
<Input type="text” id=”nom” oninput=”f1()” placeholder=”Entrer votre nom”>
A chaque caractère que l’utilisateur tape, la fonction f1() s’exécute automatiquement.
e) Onchange
Se déclenche lorsqu’un élément de formulaire change de valeur ET que l’utilisateur quitte
cet élément (perd le focus).
Il s’utilise avec des champs comme :<input> (text, number, checkbox, radio),
<textarea>,<select>
f) Onload
Se déclenche lorsque la page ou un élément est complétement chargé.
Exemple :
<body onload=”f1()”>
La fonction f1() sera exécutée dès que la page HTML est entièrement chargée ;
Année Scolaire : 2025-2026 5
