Défi n°
Créer une page avec 3 boutons qui permettent de choisir la couleur de fond de la page parmi 3 couleurs.
Défi n°
Créer une page avec une zone retangulaire qui change de couleur quand on la survole.
Le JavaScript s'insère à l'aide de la balise <script>.
Exemple :
<script type="text/JavaScript"></script>
Pour pouvoir faire référence à une balise html, il faut définir l'identité de cette balise.
Exemples :
<div id="maZone"></div>
<button id="btn1">Cliquer</button>
La référence à cette balise se fait de la façon suivante :
document.querySelector('#maZone')
document.querySelector('#btn1')
document.querySelector('#maZone').style.color="red";
document.querySelector('#maZone').style.color="rgb(255,0,0)";
document.querySelector('#maPage').style.backgroundColor="rgb(255,0,0)";
document.querySelector('#monParag').style.fontSize="16px";
Les styles en javascript s'écrivent sans le - et avec des majuscules pour séparer les mots.
Les valeurs que l'on attribue aux styles sont toujours des chaines de caractères entre " ".
addEventListener) AfficherChaque action de l'utilisateur, génère des événements lors desquels les différents programmes éxécutent des actions.
Ainsi, pour le navigateur, un click sur un élément particulier de la page, le déplacement de la souris, la fermeture de la page... sont autant d'événements qu'il est possible de reprogrammer.
Voici quelques exemples d'événements associés aux éléments d'une page HTML : click, mouseover, mouseout, keypress...
Dans le html :
<body id="page">
<button id="btn">Cliquer</button>
</body>
Dans la balise <script> :
document.querySelector('#btn').addEventListener('click', function() {
document.querySelector('#page').style.backgroundColor = 'red';
});
|
Défi n°Créer une page avec 3 boutons qui permettent de choisir la couleur de fond de la page parmi 3 couleurs. |
Défi n°Créer une page avec une zone retangulaire qui change de couleur quand on la survole. |
|
|---|
innerHTML) AfficherLe contenu d'une balise peut être modifié à l'aide de la propriété innerHTML de cette balise. Attention : le nouveau contenu remplace le précédent.
Exemple :
document.querySelector('#baliseAffichage').innerHTML = "Bravo !";
Le contenu que l'on affecte à la balise peut être du langage HTML.
Exemple :
document.querySelector('#baliseAffichage').innerHTML = "Bravo ! <em>Bravo !</em>";
|
Défi n°Créer une page avec 2 boutons qui permettent d'afficher du texte différent dans une balise. |
 |
|---|
Les variables sont des espaces de la mémoire auxquels on donne un nom pour pouvoir y stocker de l'information et la réutiliser.
Exemple de code pour déclarer une variable :
var maVariable;
Exemple de code pour donner une valeur à une variable :
maVariable = 8;
|
Défi n°Créer un "Compteur de clic", c'est à dire une page avec 1 bouton et une zone d'affichage dont la valeur augmante de 1 à chaque clic. Ajouter ensuite un deuxième bouton de remise à zero. |
 |
|---|
Les chaines de caractères sont des ensembles de caractères. En programmation elles s'écrivent entre guillemet "" ou ''
Le signe + utilisé entre deux chaines colle les chaines
Exemples simples :
"abc" + "def" //Renvoie "abcdef"
45 + "px" //Renvoie "45px"
45 + 8 + "px" //Renvoie "53px"
Exemples avec des variables :
maVariable = 8;
maChaine = maVariable + "px" //maChaine vaut "8px"
prenom = "Jean";
parole = "Je m'appelle " + prenom + ". Et vous ?" //parole vaut "Je m'appelle Jean. Et vous ?"
Pour pouvoir faire des calculs avec des chaines, il faut les transformer en nombre. Pour cela, on utilise parseInt() ou parseFloat()
maChaine = "8.5ab";
monEntier = parseInt(maChaine) //monEntier vaut 8
monNombre = parseFloat(maChaine) //monNombre vaut 8,5
|
Défi n°Créer une page avec du texte et 2 boutons qui permettent d'augmenter et diminuer la taille de la police. |
|
|---|
Math.random()) AfficherL'objet Math propose de nombreuses méthodes et propriétés souvent utiles en programmation.
Celles qui vont nous intéresser ici sont :
Math.random() //Retourne un nombre décimal entre 0 (inclus) et 1 (exclu)
Math.floor(nombre) //Retourne l'arrondi par défaut de nombre
Math.ceil(nombre) //Retourne l'arrondi par excès de nombre
Code pour un nombre entier aléatoire entre 0 et 9
Math.floor(Math.random()*10)
Code pour un nombre entier aléatoire entre 1 et 10
Math.ceil(Math.random()*10)
|
Défi n°Créer une page avec un bouton qui permet de simuler le lancement de deux dés. |
Défi n°Créer une page avec 1 bouton qui permet de changer aléatoirement la couleur du fond de la page et d'afficher les valeurs des composantes RVB de cette couleur. |
|
|---|
if) Afficherif ( //test ) {
//Instructions si test est vrai
} else {
//Instructions si test est vrai
}
Les principaux opérateurs de comparaison sont :
=== pour vérifier une égalité stricte,
== pour vérifier une égalité,
!= pour vérifier une différence,
<, >, <=, >=.
|
Défi n°Créer une page avec un bouton qui permet de basculer l'affichage de "texte blanc sur fond noir" à "texte noir sur fond blanc" et inversement. |
Défi n°Créer une page permettant de jouer à ChiFouMi contre l'ordinateur. |
|
|---|
style.display, style.visibility et disabled) Afficherdocument.querySelector('#maBalise').style.visibility = "hidden" //pour masquer
document.querySelector('#maBalise').style.visibility = "visible"; //pour afficher
document.querySelector('#maBalise').style.display = "none"; //pour masquer
document.querySelector('#maBalise').style.display = "block"; //pour afficher une balise de type block
document.querySelector('#maBalise').style.display="inline"; //pour afficher une balise de type texte
Remarque : le blocage ne se fait pas à l'aide des styles, mais avec la propriété disabled des balises button et input.
document.querySelector('#monBouton').disabled=true; //pour bloquer
document.querySelector('#monBouton').disabled=false; //pour débloquer
|
Défi n°Créer une page avec des zones de couleurs et des boutons de façon à mettre en évidence la différence entre " |
Défi n°Créer une page avec 1 bouton qui se bloque au bout de 3 clics. Ajouter ensuite un deuxième bouton de déblocage. |
|
|---|
La saisie d'une information par l'utilisateur se fait à l'aide de la balise <input type="text" />
<input id="zoneDeSaisie" type="text" value="Texte initial" />
Pour récupérer l'information saisie par l'utilisateur dans le javascript il faut utiliser la propriété value de la balise <input type="text" />.
var saisie;
saisie = document.querySelector('#zoneDeSaisie').value
La propriété value d'une balise <input> est toujours une chaine de caractère. Pour pouvoir faire des calculs, il faut la transformer en nombre. Pour cela, on utilise parseInt() ou parseFloat().
monEntier = parseInt(document.querySelector('#zoneDeSaisie').value)
monNombre = parseFloat(document.querySelector('#zoneDeSaisie').value)
Le blocage d'une zone de saisie se fait à l'aide de la propriété disabled de la balise <input />
document.querySelector('#zoneDeSaisie').disabled = true; //pour bloquer
document.querySelector('#zoneDeSaisie').disabled = false; //pour débloquer
|
Défi n°Changer la couleur de fond de la page à partir de trois informations saisies par l'utilisateur : le niveaux du rouge, le niveau du vert et le niveau du bleu. |
Défi n°Créer un petit jeu où l'ordinateur choisi un nombre au hasard et l'utilisateur doit le deviner avec uniquement les indications "trop grand" ou "trop petit" fournies par l'ordinateur. |
|
|---|