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()
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).
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 :<button>, B : innerHTML et document.get Element By Id (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.
Exercice :
Pour chaque série, ouvrez un nouveau fichier.html contenant le code de base cidessous (balises html de base et balise <script> permettant d’introduire du code en javascript):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>modele_html_js</title> <script type="text/javascript"> </script> </head> <body> </body> </html>
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.
Interactions Html Javascript (404 KO) (Cours PDF)