INTERACTIONS HTML-JAVASCRIPT - ocinfo.ch

interactions html-javascript
1 Pré-requis : . Langage HTML . Feuilles de styles CSS . Bases de Javascript : o Définition de variables
o Définition de fonctions
o Appel de fonctions
o Utilisation de fonctions mathématiques (ex : Math.random())
o Les boucles (for, while, switch
o Les expressions booléennes
o Les chaînes de caractères
o Les tableaux et opérations sur les tableaux
o Les dates
o Les appels différés ou périodiques (SetTimeout() et
SetInterval())
o Interactions simples html/JS : fonctions alert() et prompt()
2 Objectifs : . Maîtriser les principales instructions permettant de rendre une
page html dynamique en utilisant les interactions entre le
langage javascript et les balises html
. Comprendre les concepts généraux de ces interactions ("vue
d'ensemble" du programme). 3 Conception du cours : L'apprentissage sera réalisé sur la base de séries de petits exercices,
chaque série permettant de découvrir un ou deux nouveaux concepts
(A :, B : innerHTML et document.getElementById(id), etc.). La
maîtrise de tous les exercices (noirs et gris) permettra de réaliser
l'exercice final (jeu des montagnes et des pingouins). Les concepts théoriques seront présentés par l'enseignant au fur et à
mesure de leur apparition dans les exercices. 4 Exercice : Pour chaque série, ouvrez un nouveau fichier.html contenant le code de base
ci-dessous (balises html de base et balise permettant d'introduire
du code en javascript):



modele_html_js





Chaque exercice (1), 2), 3)...) à l'intérieur d'une série donnée est résolu
dans un même fichier (éventuellement lié à une feuille de style externe) en
le testant (dans Firefox) et en le modifiant au fur et à mesure. Les exercices en noir sont résolus en classe. Les élèves qui ont de
l'avance commencent les exercices en gris, qui seront donnés en devoirs à
la maison.
1 Appel d'une fonction avec onload et 1) A l'aide d'une seule ligne de code dans la partie , faites
apparaître une fenêtre « alert » annonçant: (Bravo! Votre pingouin a
réussi son ascension!( 2) Modifiez la partie en introduisant l'instruction « alert »
dans une fonction nommée resultatAscension() qui est appelée au-
dessous de sa définition. 3) Modifiez le programme pour que la fonction resultatAscension() soit
appelée depuis la balise au moment où la page html est chargée. 4) Modifiez le programme pour que la fonction resultatAscension() soit
appelée depuis la balise au moment où vous cliquez avec la
souris dans la page html. 5) Faites apparaître un bouton (balise ) (Afficher le résultat de
l'ascension( sur la page html. Modifiez le programme pour que la
fonction resultatAscension() soit appelée au moment où vous cliquez
sur ce bouton. 6) Créez une feuille de style externe (nommée styles_A.css) dans laquelle
vous attribuez à une grandeur (height, width), une couleur
(background-color) et un texte (font-family, font-size) qui vous
paraissent adéquats. 7) Copiez quatre fois le bouton (Afficher le résultat de l'ascension(.
Remplacez dans chacun des boutons l'attribut onclick par onmousedown,
onmousemove, onmouseup ou ondblclick en indiquant ce choix dans le
texte du bouton (par ex., (Afficher le résultat de l'ascension
(ondblclick)(.
Testez les effets respectifs de ces attributs. 8) Créez un bouton (Début (instant t0)( et un bouton (Lecture du
chronomètre( qui appellent les fonctions demarrerChrono() et
lectureChrono() respectivement. Un clic sur le premier bouton lance un
chronomètre interne qui démarre à l'instant t0; un clic sur le second
bouton mesure l'instant t1 et affiche, dans une fenêtre « alert », le
temps dt qui s'est écoulé entre les instants t0 et t1. Les
instructions suivantes vous seront utiles pour créer le chronomètre : var laDate = new Date()
t=laDate.getTime() 2 Affichage dans la page html :
innerHTML et document.getElementById(id) 9) Créez un bouton nommé (Afficher les résultats du jeu( qui appelle la
fonction resJeu(); cette fonction affiche une fenêtre « alert » :
(Vous avez gagné !(. 10) Créez une ayant un id nommé (prenom_res( dans la partie
de votre programme. (Pour que la ne disparaisse pas quand elle
est vide, remplissez-la initialement avec la valeur ( (, qui
signifie (non breakable space() et modifiez la fonction resJeu() pour
qu'elle affiche le texte (Vous avez gagné !( non pas dans une fenêtre
« alert » mais dans le innerHTML de la . Pour y parvenir,
utilisez l'instruction suivante qui donne accès au contenu de la
balise d'id=(prenom_res(: document.getElementById((prenom_res().innerHTML 11) Modifiez la fonction resJeu() pour que le texte soit affiché dans la
en format titre . 12) Modifiez la fonction resJeu() pour que le texte affiché dans la
en format titre soit aléatoirement "Bravo ! Vous avez gagné !(,
(Essayez encore ! Vous avez une réponse fausse !( ou (Révisez vos
classiques ! Vous avez plusieurs réponses fausses !(. 13) Faites suivre les textes (Essayez encore ! Vous avez une réponse
fausse !( et (Révisez vos classiques ! Vous avez plusieurs réponses
fausses !( d'un bouton (Nouveau résultat( qui appelle la fonction
resJeu().
3 Collecte d'information : 14) Dans la partie : Créez une ayant un id nommé (prenom_res(
et contenant initialement le texte (Entrez votre prénom pour commencer
la première partie: ( et un bouton (Entrer le prénom( qui appelle une
fonction nommée premierePartie(). Cette fonction ouvre une fenêtre
« prompt » qui vous demande votre prénom (( variable prenom), puis
affiche dans la : (prenom, vous pouvez commencer
la partie.( 15) Placez une balise entre le texte (Entrez votre prénom pour
commencer la première partie:( et le bouton (Entrer le prénom(. Cette
possède les attributs suivants : un id=(prenom( et une
maxlength="30".
Modifiez la fonction premierePartie() pour qu'elle aille lire la valeur de
la variable prenom dans la fenêtre de l' (au lieu de la lire
dans la fenêtre « prompt » qui disparaît du programme) en utilisant
l'instruction suivante : document.getElementById((prenom().value 16) Faites disparaître le bouton (Entrer le prénom( et appelez la fonction
premierePartie() directement avec la touche « backspace » dans la
fenêtre d' en introduisant l'événement suivant: onkeypress='if(event.keyCode==13) premierePartie()' 17) Placez une deuxième avec un id=(nom( et une maxlength=(30( à
la suite de la précédente et modifiez le texte d'introduction pour que
l'utilisateur doive entrer son prénom et son nom puis appuyer sur
« backspace » pour appeler la fonction premierPartie(). Modifiez cette
fonction pour qu'elle lise le prénom et le nom et qu'elle affiche dans
la : (prenom nom, vous pouvez commencer la partie.(. Si l'un au
moins des deux champs d'input est vide, un message d'erreur apparaît
via une fenêtre « alert ». 18) Introduisez des valeurs initiales dans vos (par exemple vos
propres prénom et nom) en précisant value=(...( dans la balise
d'. 19) Créez un bouton ( Initialiser( qui appelle une fonction init() ;
cette dernière choisit aléatoirement un prénom (resp. un nom) dans une
liste contenant quatre prénoms (resp. noms) et vient les placer dans
les (prenom( et (nom(.
20) Créez un fichier nommé fcts_utilitaires.js contenant les fonctions
utilitaires suivantes :
function $(id) {
return document.getElementById(id)
}
function remplirHTML(id,txt) {
$(id).innerHTML = txt
} Appelez ce fichier en introduisant dans la partie de votre document
html :
et réécrivez le code de C.6) en utilisant ces fonctions.
4 Modification des attributs d'une image 21) Faites apparaître l'image pingouin_grand.png : et créez une feuille de style externe (nommée styles_DEF.css) qui sera
appelée dans les codes des exercices des séries D, E et F et qui
contient les instructions suivantes : img{
position:absolute;
left:100px;
top:50px;
width:10%;
}
img#pingouin{
visibility:visible;
}
img#pingouin_rouge,img#pingouin_vert,img#pingouin_jaune{