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 sont possibles grâce: 1) aux appels de fonctions javascript depuis la section 1) aux appels de fonctions javascript depuis la section section section INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT appel de fonction

Les interactions entre le code en javascript et la section sont possibles grâce: 2) à laccès aux attributs dune balise (pour les modifier et/ou lire leurs valeurs) via lidentifiant de la balise (id) et linstruction document.getElementById(id) section section INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT Ex: modification dun attribut dune balise à laquelle on accède par son identifiant (id)

Les interactions entre le code en javascript et la section sont possibles grâce: 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é. section section INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT Ex: appel à une fonction permettant de récupérer les coordonnées du curseur de la souris

1) Lapprentissage 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 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 et PRESENTATION DE LA SEQUENCE DE COURS OBJECTIFS DES EXERCICES + THEORIE 2) Compréhension des concepts généraux de ces interactions (vue densemble 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 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()

PRESENTATION DE LA SEQUENCE DE COURS DEROULEMENT DU COURS Présentation de lexercice 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 et, 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, lenseignant 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 dune fonction avec onload et

B. Affichage dans la page html :innerHTML et document.getElementById(id)

C. Collecte dinformation :

D. Modification des attributs dune image

E. Utilisation de SetTimeout() et SetInterval()

F. Utilisation de lobjet event

G. Eléments actifs (input)

H. Modification des attributs dune cellule de tableau ( )

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) quil existe initialement une balise dans la partie à linté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. 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: 2) Accéder au contenu de la balise par linstruction 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) Exemple:

Remarque: Le contenu dune balise peut lui-même contenir des balises. B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)

innerHTML de de innerHTML innerHTML Exemples de contenus de balises: Ceci est un pingouin. B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)

Ceci est un pingouin. Quel serait le code équivalent du code ci-dessous avec linstruction document.getElementById("id_div").innerHTML="Ceci nest plus un tableau."? Ceci nest plus un tableau. ATTENTION! id et document.getElementById("id_div").innerHTML sont des strings! Ceci est un pingouin. B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id)

Ceci est un pingouin. Quelle est la valeur de la variable txt si sa définition est var txt=document.getElementById("id_tr").innerHTML? txt= " Ceci est un pingouin. " B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id) Ceci est un pingouin.

Ceci est un pingouin. Ceci est un pingouin. Quel serait le code équivalent du code ci-dessous avec les instructions var nbreP=6 document.getElementById("id_h3").innerHTML= "Il y a"+nbreP+"pingouins au sommet de la montagne."? Il y a 6 pingouins au sommet de la montagne. 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 au lti.epfl.ch Page d'accueil sur