Numérique et Sciences Nom :
Informatiques
Prénom :
Séquence 06 – Langage JavaScript
LANGAGE JAVASCRIPT
Problématique du T.P.
Comment dynamiser une page web en réagissant à des évènements ?
Capacités développées dans ce T.P. Savoirs et Savoir-faire associés
➡ Identifier les différents composants graphiques - Modalités de l’interaction entre
permettant d’interagir avec une application Web. l’homme et la machine.
➡ Identifier les événements que les fonctions associées - Événements
aux différents composants graphiques sont capables de
traiter.
- Interaction avec l’utilisateur
➡ Analyser et modifier les méthodes exécutées lors d’un dans une page Web.
clic sur un bouton d’une page Web.
Conditions de l’étude Les centres d’intérêts.
Durée de la 2 heures
séance : Histoire de l’informatique
Matériel Représentation des
- Logiciel « Visual Studio Code »
spécifique : données : types et valeurs
de base
Représentation des
données : types construits
Documents de
- Fichier « poème.html »
consultation :
Traitement de données en
tables
Interactions entre l’homme
et la machine sur le web
Pré requis : - Séquence 01 – Langage HTML.
Architectures matérielles
et systèmes d’exploitation
Langage et programmation
Documents à
rendre :
Algorithmique
22/01/2025
836594578.docx Numérique et Sciences Informatiques Page n°1 /5
Numérique et Sciences Nom :
Informatiques
Prénom :
Séquence 06 – Langage JavaScript
ACTIVITE 1 : MISE EN SITUATION
1.1Qu’est-ce que le langage Javascript
JavaScript est un langage développé en 1995 par Brendan EICH pour le navigateur « Web
Netscape Navigator ». Un interpréteur de scripts JavaScript est, aujourd’hui, intégrer à
l’ensemble des navigateurs web.
Il est principalement utilisé pour gérer l’interactivité (côté client) entre la page web et
l’utilisateur via des clics, des réactions au survol de la souris, effectuer des apparitions de
fenêtres, etc. Le langage JavaScript, étudié sommairement ici, permet notamment de mettre en
place ce que l’on nomme des évènements.
1.2Comment insérer du code JavaScript dans une page web
Les navigateurs décryptent le langage HTML, il faut donc placer le code JS entre les deux
balises ouvrante et fermante <script> et </script> et plutôt à la fin du document pour éviter
que le script ne se déclenche avant le chargement de la page. L’attribut type n’est pas
obligatoire :
<script type="text/javascript">
</script>
Il y a une deuxième façon d’utiliser le code JavaScript, celle que nous utiliserons. Elle
consiste à d’écrire le code dans un fichier externe (au format .js). Il faudra alors appeler ce
fichier et écrire dans la page HTML l’instruction suivante entre les balises <head> et </head> :
<script type="text/javascript" src="fichier.js"></script>
1.3Premier essai en JavaScipt
Une première instruction alert(), qui prend en paramètre une chaîne de caractères et qui
permet de l’afficher dans une boîte de dialogue.
On donne : Un poste informatique avec les logiciels « Visual Studio Code »
Le fichier « poème.html »
On demande :
1. Lancer le logiciel « Visual Studio Code ». Sur la page de bienvenue, cliquer sur « Ajouter un
dossier d’espace de travail » et sélectionner le dossier dans le lequel vous avez téléchargé
le fichier « poème.html ».
2. Créer un nouveau fichier nommé « script.js » et insérez-y le code suivant avec un message
de bienvenue :
alert("Message de bienvenue");
N’oubliez pas le « ; » à la fin de la ligne, c’est une particularité de la syntaxe JS.
3. Insérer le code suivant dans le fichier HTML entre les balises <head> et </head>, de
préférence à la fin du code.
<script type="text/javascript" src="script.js"></script>
4. Enregistrez vos fichiers et ouvrez le fichier « poème.html » dans un navigateur web.
22/01/2025
836594578.docx Numérique et Sciences Informatiques Page n°2 /5
Numérique et Sciences Nom :
Informatiques
Prénom :
Séquence 06 – Langage JavaScript
ACTIVITE 2 : LES FONCTIONS
2.1 Qu’est-ce qu’une fonction
Une fonction est un morceau de programme (« un sous-programme ») qui permet de
réaliser une tâche bien spécifique. Les règles de bonnes pratiques veulent que les actions soient
réalisées dans des fonctions.
Nous allons donc modifier le code JS pour insérer l’instruction alert() dans une fonction.
Une fonction est représentée par le mot clé « function » suivi de son nom, suivi de parenthèses et
suivi d’accolades qui encapsulent le code qu’elle exécute.
On donne : Un poste informatique avec les logiciels « Visual Studio Code »
Les fichiers « poème.html » et « script.js »
On demande :
1. modifier le fichier « script.js » en insérant l’instruction « alert() » dans une fonction
« bienvenue » comme ceci :
function bienvenue(){
let prenom = prompt("Quel est votre prénom ?");
alert("Bonjour " + prenom);
//alert("Bonjour " + prompt("Quel est votre prénom ?"));
}
Notez qu’en Javascript, la déclaration des variables est obligatoire et se fait en
utilisant le mot clé « let ». L’instruction « prompt() » est un autre exemple de
boite de dialogue tout comme l’instruction « confirm() ».
La ligne verte est un commentaire en JS qui vous indique qu’il existe une manière
plus succincte de réaliser la même chose sans utiliser de variable.
2. Modifier le fichier « poème.html » en insérant un attribut « onload » dans la balise body.
<body onload="bienvenue()">
3. Testez dans votre navigateur web.
ACTIVITE 3 : LES EVENEMENTS
3.1 Réponse à un clic sur un évènement
Il s’agit de l’interaction la plus simple. Un élément avec l’attribut « onclick » déclenche
une fonction lorsqu’il reçoit un clic.
Dans l’exemple suivant, la fonction « description » sera déclenchée lorsque l’on cliquera
sur une photo d’Arthur Rimbaud.
On donne : Un poste informatique avec les logiciels « Visual Studio Code »
Les fichiers « poème.html » et « script.js »
On demande :
1. Recherchez une photo d’Arthur Rimbaud sur Internet (« ArthurRimbaud.jpg » par exemple)
et placée-là dans le même répertoire que le fichier « poème.html ».
22/01/2025
836594578.docx Numérique et Sciences Informatiques Page n°3 /5
Numérique et Sciences Nom :
Informatiques
Prénom :
Séquence 06 – Langage JavaScript
2. Modifiez le fichier « poème.html » en insérant une image entre les balises <head> et
</head> ou entre les balises <body> et </body>, comme vous voulez.
<img src="ArthurRimbaud.jpg" alt="Arthur Rimbaud" title="Arthur Rimbaud"
onclick="description()" />
Prenez l’habitude de renseigner les attributs « alt » et « title ».
3. Modifier le fichier « script.js » en y ajoutant une fonction « description » qui permettra
d’afficher, dans une boite de dialogue, une mini biographie d’Arthur Rimbaud que vous
trouverez facilement sur Internet.
4. Testez dans votre navigateur web puis modifiez l’attribut « onclick » par les attributs
« onmouseover » et « onmouseout ».
Avec une petite recherche sur Internet vous pourrez, sans problème, remplacer
l’action sur l’image par une action sur un bouton.
3.2 Choix dans une liste déroulante
Il s’agit d’ajouter une petite liste déroulante « <select…> … </select> » qui, associée à
une fonction JS « selection », permettra, à l’utilisateur, de changer la couleur de fond de la page
HTML.
On donne : Un poste informatique avec les logiciels « Visual Studio Code »
Les fichiers « poème.html » et « script.js »
On demande :
1. Effectuez une recherche sur Internet pour récupérer la syntaxe des listes
déroulantes en HTML. Ajoutez le code obtenu dans la partie body de votre page
HTML et modifiez-le pour que l’utilisateur puisse avoir 3 choix de couleurs.
Ajoutez-lui des attributs « id » et « onchange », c’est très
important.
2. Créer en JS la fonction « selection » suivante :
function selection(){
// ...
let liste = document.getElementById('choix');
if(liste.selectedIndex == 0){
document.body.style.background = 'beige';
}
else if(liste.selectedIndex == 1){
document.body.style.background = 'azure';
}
else{
document.body.style.background = 'ivory';
}
}
Prenez le temps d’étudier le code de cette fonction et notez qu’en Javascript, la
déclaration des variables se fait en utilisant le mot clé « let ».
3. Remplacer les « ... » par un commentaire qui explique ce que réalise cette fonction.
22/01/2025
836594578.docx Numérique et Sciences Informatiques Page n°4 /5
Numérique et Sciences Nom :
Informatiques
Prénom :
Séquence 06 – Langage JavaScript
Avec une petite recherche sur Internet vous pourrez, sans problème, ajouter à
cette liste déroulante une (des) case(s) à cocher « checkbox », des boutons radio
« radio », un texte « label », un champ de saisi de texte « input », ….
3.3 Modifier le contenu de la page HTML
Vous devez modifier le code précédent pour que l’utilisateur puisse modifier les
caractéristiques de l’auteur en y ajoutant ses dates de naissance et de décès et en modifiant la
couleur du texte.
On donne : Un poste informatique avec les logiciels « Visual Studio Code »
Les fichiers « poème.html » et « script.js »
On demande :
1. Dans le code HTML, ajouter un identifiant (id) au texte que l’on doit modifier.
2. En vous inspirant du code ci-dessous, ajouter, dans votre code HTML, un petit formulaire
qui demande à l’utilisateur de renseigner la date de naissance et la date de décès de
l’auteur (1854 – 1891).
<form>
<div>
<label>Veuillez choisir un nom d'utilisateur :</label>
<input type="text" id="id_nom" name="nom">
</div>
<div>
<input type="button" value="Valider" onclick="valider()">
</div>
</form>
3. Ajouter une fonction JS qui va gérer l’évènement :
a. Associer l’élément champ texte de saisi à une variable
b. Récupérer le contenu du texte à modifier grâce à la méthode « .textContent ».
c.Ajouter au texte à modifier la valeur du champ texte de saisi (« element.value ») grâce
à la méthode « .innerHTML ».
d. Changer la couleur du texte modifié à l’aide de la méthode « .style.color ».
3.4 Quelques évènements passe-partout
Voici une liste d'autres évènements qui s'appliquent à la plupart des objets :
ondblclick : lors d'un clic / double clic sur l'élément en question.
onkeypress : lorsqu'on appuie sur une touche du clavier avec cet élément
sélectionné.
onkeydown et onkeyup : lorsqu'une touche du clavier est enfoncée / relâchée
avec cet élément sélectionné.
onmousemove : lors d'un déplacement de la souris au-dessus de cet élément.
onmousedown et onmouseup : lorsque le bouton de la souris est enfoncé /
relâché sur cet élément.
22/01/2025
836594578.docx Numérique et Sciences Informatiques Page n°5 /5
