Présentation de la séquence de cours sur les interactions
HTML-javascript
Laure Walser, 11 juin 2010
Première grande difficulté du cours
PRESENTATION DE LA SEQUENCE DE COURS
INTERET DE CE SUJET
But de l'interaction html-javascript ( page interactive)
Importance de la compréhension de ce sujet pour la suite du cours
(canvas, objets, etc.), sujet incontournable
Concept d'interaction et "outils" associés
Concepts généraux à introduire:
Vision d'ensemble du programme
Les interactions entre le code en javascript et la section <body> sont possibles grâce:1) aux appels de fonctions javascript depuis la section <1) aux appels de fonctions javascript depuis la section <bodybody>>
section <section <headhead>>
section <section <bodybody>>
INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT
appel de fonction
Les interactions entre le code en javascript et la section <body> sont possibles grâce:2) à l’accès aux attributs d’une balise (pour les modifier et/ou lire leurs valeurs) 2) à l’accès aux attributs d’une balise (pour les modifier et/ou lire leurs valeurs) via l’identifiant de la balise (via l’identifiant de la balise (idid) et l’instruction ) et l’instruction document.getElementById(id)document.getElementById(id)
section <section <headhead>>
section <section <bodybody>>
INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT
Ex: modification d’un attribut d’une balise à
laquelle on accède par son identifiant
(id)
Les interactions entre le code en javascript et la section <body> sont possibles grâce:3) aux objets de type “event” qui permettent de transmettre des informations 3) aux objets de type “event” qui permettent de transmettre des informations concernant la manière (souris/touches du clavier) dont un objet a été sélectionné.concernant la manière (souris/touches du clavier) dont un objet a été sélectionné.
section <section <headhead>>
section <section <bodybody>>
INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT
Ex: appel à une fonction permettant de récupérer les coordonnées du
curseur de la souris
1) L’apprentissage est réalisé sur la base de neuf séries de petits exercices, chaque série permettant de découvrir un nouveau concept:
PRESENTATION DE LA SEQUENCE DE COURS
CONCEPTION GENERALE DU PROJET
etc.
Série A : appel d'une fonction avec onload et <button>
Série B : affichage dans la page html: innerHTML et document.getElementById(id)
2) Chaque série est:
précédée d'une introduction(avec vision concrète de l'effet du nouveau concept)
suivie d'une synthèse théorique(sur transparents)
présentées par l'enseignant
€
⎫ ⎬ ⎭
PRESENTATION DE LA SEQUENCE DE COURS
CONCEPTION GENERALE DU PROJET (suite)
3-6 exercices en noir: doivent être terminés en classe, indispensables pour poursuivre la série suivante
1-4 exercices en gris: à faire en classe ou à la maison, indépendants de la série suivante
3) L'hétérogénéité de la classe est gérée en divisant chaque série en:
4) Le but final des exercices est présenté dès le premier cours et sert de fil conducteur aux exercices et aux transparents théoriques. La maîtrise de tous les exercices (noirs et gris) de toutes les séries permet de réaliser ce programme final:
Jeu des montagnes et des pingouins
1) Maîtrise des principales instructions permettant de rendre une page html dynamique en utilisant les interactions entre les sections <body> et <script>
PRESENTATION DE LA SEQUENCE DE COURS
OBJECTIFS DES EXERCICES + THEORIE
2) Compréhension des concepts généraux de ces interactions (“vue d’ensemble“ du programme).
Séries de petits exercices évolutifs portant chacune sur un nouveau concept
Intégration des codes des petits exercices dans le cadre d'un projet regroupant tous les concepts découverts en 1)
Langage HTML
PRESENTATION DE LA SEQUENCE DE COURS
PRE-REQUIS
Feuilles de styles CSS
Bases de Javascript :o Définition de variableso Définition de fonctionso Appel de fonctionso Utilisation de fonctions mathématiques (ex : Math.random())o Les boucles (for, while, switcho Les expressions booléenneso Les chaînes de caractèreso Les tableaux et opérations sur les tableauxo Les dateso Les appels différés ou périodiques (SetTimeout() et SetInterval())o Interactions simples html/JS : fonctions alert() et prompt()
PRESENTATION DE LA SEQUENCE DE COURS
DEROULEMENT DU COURS
Présentation de l’exercice final (jeu des montagnes et des pingouins).
Présentation de l'introduction théorique générale (positions des différents langages dans une page html, concept d'interaction entre les sections <body> et <script>, etc.)
Pour chaque série d'exercices (A.I.):
1) L'enseignant introduit le nouveau concept en écrivant concrètement le code devant les élèves et en montrant son effet dans la page html.
2) Les élèves font les exercices en noir de la série. Les plus avancés commencent les exercices en gris.
3) Lorsque tous les élèves ont terminé les exercices en noir, l’enseignant revient sur le concept utilisé en présentant la théorie sur transparents.
4) Les exercices en gris sont donnés en devoirs pour le cours suivant.
PRESENTATION DE LA SEQUENCE DE COURS
Exemple d'introduction pour la série A.
PRESENTATION DE LA SEQUENCE DE COURS
Exemple d'introduction pour la série A.
PRESENTATION DE LA SEQUENCE DE COURS
Exemple d'introduction pour la série A.
A. Appel d’une fonction avec onload et <button>
B. Affichage dans la page html :innerHTML et
document.getElementById(id)
C. Collecte d’information :<input/>
D. Modificationdes attributs d’une image
E. Utilisation deSetTimeout() et SetInterval()
F. Utilisation de l’objet “event”
G. Eléments actifs (input)
H. Modification des attributsd’une cellule de tableau (<td>)
I. Utilisation de « this »
J. Ecriture du code complet du jeu
B. Affichage dans la page html :innerHTML et
document.getElementById(id)
La fonction “alert” fait apparaître un texte dans une fenêtre surgissante (pop-up), séparée de la page html.
Exemple:
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
Pour faire apparaître le texte directement dans la page html, il faut:
1) qu’il existe initialement une balise dans la partie <body> à l’intérieur de laquelle le texte peut apparaître. Pour distinguer cette balise des autres balises, il faut lui attribuer un identifiant (id), qui est une string propre à cette balise.
Exe
mp
le:
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
Pour faire apparaître le texte directement dans la page html, il faut:
2) Accéder au contenu de la balise par l’instruction document.getElementById(id).innerHTML et introduire le texte souhaité avec document.getElementById(id).innerHTML= "texte".
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
Exe
mp
le:
Remarque: Le contenu d’une balise peut lui-même contenir des balises.
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
innerHTMLinnerHTMLde <div>de <div>
innerHTMLinnerHTMLde <tr>de <tr>
innerHTMLinnerHTMLde <h3>de <h3>
Exemples de contenus de balises:
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
Quel serait le code équivalent du code ci-dessous avec l’instruction
document.getElementById("id_div").innerHTML="Ceci n’est plus un tableau."?
<div id = "id_div"> Ceci n’est plus un tableau.</div>
ATTENTION! id et document.getElementById("id_div").innerHTML sont des strings!
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
Quelle est la valeur de la variable txt si sa définition est
var txt=document.getElementById("id_tr").innerHTML?
txt= " <td id = "id_td"><h3 id = "id_h3">Ceci est un pingouin.<img src='images/pingouin.png' id='pingouin’/></h3></td> "
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Ceci est un pingouin. <img src='images/pingouin.png' id='pingouin’/> </h3> </td> </tr> </table></div>
Quel serait le code équivalent du code ci-dessous avec les instructions
var nbreP=6document.getElementById("id_h3").innerHTML=
"Il y a"+nbreP+"pingouins au sommet de la montagne."?
<div id = "id_div"> <table id = "id_table"> <tr id = "id_tr"> <td id = "id_td"> <h3 id = "id_h3"> Il y a 6 pingouins au sommet de la montagne. </h3> </td> </tr> </table></div>
B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)
PRESENTATION DE LA SEQUENCE DE COURS
ACCES A LA SEQUENCE DE COURS
Page d'accueil aulti.epfl.ch
Page d'accueil surwww.ocinfo.ch