1 / 33

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. PRESENTATION DE LA SEQUENCE DE COURS. INTERET DE CE SUJET. Première grande difficulté du cours. Importance de la compréhension de ce sujet pour la suite du cours

talor
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Présentation de la séquence de cours sur les interactions HTML-javascript Laure Walser, 11 juin 2010

  2. PRESENTATION DE LA SEQUENCE DE COURS INTERET DE CE SUJET Première grande difficulté du cours Importance de la compréhension de ce sujet pour la suite du cours (canvas, objets, etc.), sujet incontournable Concepts généraux à introduire: But de l'interaction html-javascript ( page interactive) Concept d'interaction et "outils" associés Vision d'ensembledu programme

  3. Les interactions entre le code en javascript et la section <body> sont possibles grâce: 1) aux appels de fonctions javascript depuis la section <body> INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT appel de fonction section <head> section <body>

  4. 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) via l’identifiant de la balise (id) et l’instruction document.getElementById(id) INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT Ex: modification d’un attribut d’une balise à laquelle on accède par son identifiant (id) section <head> section <body>

  5. 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 concernant la manière (souris/touches du clavier) dont un objet a été sélectionné. INTRODUCTION: INTERACTIONS HTML-JAVASCRIPT Ex: appel à une fonction permettant de récupérer les coordonnées du curseur de la souris section <head> section <body>

  6. PRESENTATION DE LA SEQUENCE DE COURS CONCEPTION GENERALE DU PROJET 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: Série A : appel d'une fonction avec onload et <button> Série B : affichage dans la page html: innerHTML et document.getElementById(id) etc. 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

  7. PRESENTATION DE LA SEQUENCE DE COURS CONCEPTION GENERALE DU PROJET (suite) 3) L'hétérogénéité de la classe est gérée en divisant chaque série en: 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 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

  8. PRESENTATION DE LA SEQUENCE DE COURS OBJECTIFS DES EXERCICES + THEORIE 1) Maîtrise des principales instructions permettant de rendre une page html dynamique en utilisant les interactions entre les sections <body> et <script>  Séries de petits exercices évolutifs portant chacune sur un nouveau concept 2) Compréhension des concepts généraux de ces interactions (“vue d’ensemble“ du programme).  Intégration des codes des petits exercices dans le cadre d'un projet regroupant tous les concepts découverts en 1)

  9. PRESENTATION DE LA SEQUENCE DE COURS PRE-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()

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

  11. PRESENTATION DE LA SEQUENCE DE COURS Exemple d'introduction pour la série A.

  12. PRESENTATION DE LA SEQUENCE DE COURS Exemple d'introduction pour la série A.

  13. PRESENTATION DE LA SEQUENCE DE COURS Exemple d'introduction pour la série A.

  14. A. Appel d’une fonction avec onload et <button>

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

  16. C. Collecte d’information :<input/>

  17. D. Modificationdes attributs d’une image

  18. E. Utilisation deSetTimeout() et SetInterval()

  19. F. Utilisation de l’objet “event”

  20. G. Eléments actifs (input)

  21. H. Modification des attributsd’une cellule de tableau (<td>)

  22. I. Utilisation de « this »

  23. J. Ecriture du code complet du jeu

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

  25. Exemple: 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.

  26. Exemple: Pour faire apparaître le texte directement dans la page html, il faut: B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id) 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.

  27. Exemple: Pour faire apparaître le texte directement dans la page html, il faut: B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id) 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".

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

  29. innerHTML de <div> innerHTML de <tr> innerHTML de <h3> B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id) 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>

  30. ATTENTION! id et document.getElementById("id_div").innerHTML sont des strings! Quel serait le code équivalent du code ci-dessous avec l’instruction document.getElementById("id_div").innerHTML="Ceci n’est plus un tableau."? 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"> Ceci n’est plus un tableau. </div>

  31. Quelle est la valeur de la variable txt si sa définition est var txt=document.getElementById("id_tr").innerHTML? 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> txt= " <td id = "id_td"><h3 id = "id_h3">Ceci est un pingouin.<img src='images/pingouin.png' id='pingouin’/></h3></td> "

  32. B. AFFICHAGE DANS LA PAGE HTML: innerHTML ET document.getElementById(id) 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."? <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"> Il y a 6 pingouins au sommet de la montagne. </h3> </td> </tr> </table> </div>

  33. PRESENTATION DE LA SEQUENCE DE COURS ACCES A LA SEQUENCE DE COURS Page d'accueil au lti.epfl.ch Page d'accueil sur www.ocinfo.ch

More Related