Exercice javascript et HTML : Série 01
Exercice code javascript et HTML
- Exécuter son premier script JavaScript avec un navigateur.
-
Insertion de code javascript
- Il est possible d’insérer du code javascript de plusieurs manières dans une page HTML :
- Interne au document en utilisant l’élément
SCRIPT - Externe au document : le code javascript se trouve dans un fichier séparé portant le plus souvent l’extension .js. On utilise l’attribut
SRCde l’élémentSCRIPTpour préciser le chemin du fichier du script. - Directement dans des éléments HTML en précisant le mot clé javascript :
<a href="javascript:message()">une fonction js</a> -
Exercice 01
-
Énoncé
- Créer le document à partir du code source fourni ci-dessous. Quelle est l’extension à donner à ce document ?
- Tester dans un navigateur. Pourquoi le texte écrit en HTML ne s’affiche-t-il pas tout de suite ?
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
- Soit le fichier HTML :
- Écrire la fonction JavaScript showHxContent (dans un document externe script.js), permettant d’afficher le contenu du div correspondant au titre sur lequel on clique.
- Écrire la fonction JavaScript hideAllDivs permettant de masquer le contenu de tous les div du document.
- Écrire la fonction alertTitle permettant d’afficher (avec la fonction JavaScript alert) le contenu du énième titre, défini par le champ de saisie titre.
- Écrire la fonction deleteTitle permettant d’effacer le contenu du titre défini par le champ title. (suppression du nœud fils de type texte)
- Écrire la fonction defineTitle permettant d’affecter le contenu du titre défini par le champ title avec la valeur “Nouveau titre”. On testera que le titre a ou non déjà une valeur (nœud texte) avant l’ajout, afin de la supprimer si besoin.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 03
-
Énoncé
- Écrire une page HTML contenant un script permettant d’afficher “Bonjour tout le monde”
- Améliorer le script pour qu’il permette de demander le Prénom de l’utilisateur (méthode prompt()) et afficher “Bonjour ‘votre prénom'”.
- Utiliser les méthodes JavaScript prompt() et alert() pour demander à l’utilisateur deux nombres puis afficher leur somme.
- Écrire un script avec les trois variables suivantes:
- pour obtenir le résultat suivant
- 7
25
lundi 7 -
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 04
-
Énoncé
- Créer une page web nommée “identification.html” dont le contenu est décrit ci-dessous:
- Cette page affiche en cliquant sur le bouton Calculez votre moyenne:
- Une boite de dialogue pour saisir la moyenne de chaque trimestre (pour les trois trimestres) comme suit :
- Contrôlez la saisie des trois champs (cin, nom et prénom), si ce n’est pas le cas le script lui demande de remplir toutes les champs.
- Contrôlez la saisie des moyennes si l’utilisateur n’a pas saisie une moyenne valide
- Une moyenne valide est comprise entre 0 et 20
- Dans les autres cas le script lui demande de saisir une moyenne valide
- Trois moyennes doivent être fournies
- Un message d’alert donnant votre moyenne et votre mention comme l’exemple suivant :
- La mention dépend de la moyenne annuelle (MA) calculée
- Si MA<10 alors mention = "C’est peu ! "
- Si 10<=MA<12 alors mention = " Passable"
- Si 12<=MA<14 alors mention = "Assez bien"
- Si 14<=MA<16 alors mention = "Bien"
- Si MA>=16 alors mention = “Excellent”
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 05
-
Énoncé
- Écrire un document HTML contenant un lien définit dans une balise <div>, la couleur de fond du conteneur <div> est #CCCCCC et la bordure est de taille 3px, solide et de couleur #000000.
- Définir une fonction javascript qui sera lancée lors du clic sur le lien et qui permet de modifier le contenu textuelle de la balise par “Salut tout le monde !!” et de changer son style comme suivant :
- Mettre la couleur du fond en rouge
- Modifier la taille de la police à 30px
- Modifier la police à « Comic Sans MS »
- Changer la couleur du texte en blanc
- Mettre le texte en gras
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
Objectif
<HTML>
<HEAD>
<TITLE>Exercice 1 JavaScript</TITLE>
<SCRIPT TYPE="text/javascript">
document.write("<P>Du texte écrit en javascript.</P>");
alert("Hello world ! en javascript");
</SCRIPT>
</HEAD>
<BODY>
<P>Du texte écrit en HTML.</P>
</BODY>
</HTML>Source:inspiré du document http://tvaira.free.fr/web/tp-javascript.pdf
var a="lundi" ;var b=5;var c=2
