Présentation de la séquence de cours sur les interactions HTML-javascript

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)




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é.




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:


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

€

⎫ ⎬ ⎭


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

http://www.ocinfo.ch/laure/info/chapitre_3/solutions/final.html

1) Maîtrise des principales instructions permettant de rendre une page html dynamique en utilisant les interactions entre les sections <body> et <script>


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


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()


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.


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:


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".


Exe

mp

le:

Remarque: Le contenu d’une balise peut lui-même contenir des balises.


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>



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!




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> "





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>



ACCES A LA SEQUENCE DE COURS

Page d'accueil aulti.epfl.ch

Page d'accueil surwww.ocinfo.ch

http://lti.epfl.ch/~walser/index.html

http://www.ocinfo.ch/laure/index.html

Présentation de la séquence de cours sur les interactions HTML-javascript

Documents

Transcript of Présentation de la séquence de cours sur les interactions HTML-javascript