¶ Découverte du langage JavaScript
L'objectif de cette activité est de prendre en main de langage de programme JavaScript et de découvrir son fonctionnement au sein des pages Web
¶ Exercice 1 - Les outils de développement
Dans un premier temps, télécharger le fichier HTML disponible ci-dessous. Ce fichier est une page web assez simple qui servir de base pour cet exercice.
Question 1 - Ouvrir ce fichier avec navigateur web (Chrome ou Firefox).
Question 2 - Ouvrir les outils de développement depuis les paramètres ou en appuyant sur la touche F12.
Question 3 - Se rendre dans l'onglet Console.
À partir de cette fenêtre, vous avez accès à un interpréteur JavaScript qui permet :
- D'écrire du JavaScript à la volée pour faire des tests.
- De voir les erreurs de votre programme.
- D'afficher des messages de débug.
Question 4 - Essayer les instructions suivantes afin de prendre en main la syntaxe du JavaScript
¶ Exercice 2 - Manipulation des éléments HTML
Dans cet exercice, on s'intéresse à la récupération des éléments HTML (grâce aux différents sélecteurs) et à leur modification.
On utilisera toujours le même fichier de l'exercice 1 ainsi que la console de développement.
Question 1 - Essayer les instructions suivantes qui permettent de changer la couleur du 1er titre.
let titre1 = document.getElementById('titre1');
titre1.style.color = 'red';
Dans cet exemple, on utilise l'identififiant
titre1pour selectionner le titre de la page.
Question 2 - Écrire les instructions permettant de modifier le style de premier titre :
- Mettre le fond en noir.
- Mettre la taille de police à 25px.
- Mettre une marge interne (padding) de 25px.
Question 3 - Essayer les instructions suivantes qui permettent d'ajouter un élément dans la liste
let nouveau_item = document.createElement("li");
nouveau_item.innerHTML = "COBOL";
let liste = document.getElementById('liste_langages');
liste.appendChild(nouveau_item);
Question 4 - Écrire les instructions permettant d'ajouter le langage C++ à la liste.
Question 5 - Écrire l'instruction permettant d'ajouter un paragraphe avec le texte « Bonjour le monde » à la fin de la page.
Vous aurez besoin de la fonction appendChild() pour ajouter un élément à la fin du <body>.
Question 6 - Recharger la page avec F5. L'environnement JavaScript a-t-il été conservé ?
¶ Exercice 3 - La gestion d'évènements
Dans cet exercice, on utilisera un fichier avec l'extension.js pour écrire notre code JavaScript.
Question 1 - Dans le même dossier que la page HTML, créer un fichier script.js. Ce fichier contiendra notre code JavaScript.
Question 2 - Dans le fichier HTML, ajouter la ligne suivante dans le balise <head>.
<script src="script.js"></script>
Cette ligne permet de lier la page HTML avec le fichier javascript.
Question 3 - Dans le fichier script.js, ajouter les instructions suivantes qui permettant d'afficher un message dans la console lorsqu'on clique sur le bouton. Essayer le bon fonctionnement du script.
document.addEventListener("DOMContentLoaded", main);
function main(){
document.getElementById('dire_bonjour').addEventListener('click', hello);
}
function hello(){
console.log('Hello World !');
}
- La fonction
mainest exécutée quand l'évènementDOMContentLoadedest déclenchée, c'est-à-dire quand la page a fini de charger. C'est dans cette fonctionmainqu'il faut ajouter vos instructions..
Question 4 - Ajouter un bouton avec comme texte « Mettre le titre en rouge » dans le fichier HTML.
Question 5 - Écrire le code permettant de changer la couleur du premier titre en rouge lorsqu'on clique sur le bouton ajouté à la question précédente.