Vingt-cinq Bascules - Le site
Contents
1. qui fixe par exemple largeur et hauteur des pi ces contenant les chiffres ou de la case vide ainsi que leurs styles d encadrement 13 18 On peut aussi d finir un style comme une couleur de fond qui s applique tout le corps du texte avec une r gle de la forme body ou pr ciser le style des boutons avec button Attention Ne pas attendre d avoir termin le codage pour effectuer des v rifications Il est imp ratif apr s chaque modification de sauvegarder les deux fichiers index html et style css puis de recharger imm diatement le fichier index html dans votre navigateur Internet pour contr ler tout de suite la validit du code modifi Vous tes maintenant satisfait du rendu de votre page Web Cependant vos styles semblent fig s On va voir maintenant qu il est possible de modifier l affichage par programme 4 3 code js un programme cod en JavaScript On va maintenant cr er un nouveau fichier de texte que l on va nommer par exemple code js Il va contenir un programme crit dans le langage JavaScript et qui est interpr t par les navigateurs Internet On travaille maintenant sur trois fichiers en parall le index html d crit paragraphe 4 1 style css d crit paragraphe 4 2 et code js notre nouveau fichier Avant de commencer la programmation on va d abord lier notre page HTML index html notre fichier code js Pour cela on va ajouter dans l en t te de2. 4 8 Lu pes sa mi imac ge 14 4 3 2 Initialisation du programme 15 433 D bug Alerte JavaScript sos sos a sce a Mure de Bee te 15 4 3 4 Modification d un objet du DOM 15 dur Aptomda BOOM 22 ca es de de M ten a he die dk i 16 4 3 6 Mod lisation du jeu 17 43 7 Que faire de plus se stresse gead 4 4 18 Table des figures Bravo c est gagn a amp D Page d accueil du Taquim oo s aeaa 144484 reu ph paai a dy et pe Fen tre associ e au DOM Rendu obtenu avec une feuille de style CSS Structure d un widget graphique FIGURE 1 Bravo c est gagn 2 18 1 Taquin Ce jeu qui fut publi en 1879 aux tats Unis par Sam Loyd a connu un engouement consid rable comparable en son temps celui que connu le Rubik s Cube un si cle plus tard Le Taquin de Sam Loyd Le jeu se pr sente comme une bo te de 16 cases 4x 4 dans lesquelles sont plac es 15 pi ces num rot es Une case restant vide les pi ces peuvent glisser horizontalement ou verticalement Le but du jeu apr s avoir m lang les pi ces num rot es est de les faire glisser pour remettre les num ros dans l ordre de 1 15 2 Projet On demande de r aliser une application Web interactive qui permet de simuler ce jeu FIGURE 2 Page d accuei
3. JavaScript associ au DOM avec sa liste de propri t s Chaque attribut de balise correspond une propri t de l objet et le texte contenu entre les deux balises est la valeur de la propri t innerHTML Ensuite partir de chaque objet du DOM un l ment graphique widget est affich dans la fen tre du navigateur Ainsi dans la suite de cette documentation quand on fait r f rence un l ment du DOM on consid re indiff remment l objet du DOM la balise et son contenu ou le widget graphique qui le repr sente Nous avons vu dans ce paragraphe 4 1 comment d finir la page HTML On verra dans le paragraphe suivant 4 2 comment modifier l affichage et ensuite au paragraphe 4 3 page 14 comment r agir aux interactions de l utilisateur et animer la page Web 4 2 style css une feuille de styles cod e en CSS On va maintenant cr er un nouveau fichier de texte que l on va nommer par exemple style css Il sera cod au format CSS 9 18 Le langage CSS Cascading Style Sheets est un langage qui permet de d clarer le style d affichage des divers l ments d une page HTML On travaillera donc sur deux fichiers en parall le index html d crit au paragraphe pr c dent et style css Avant de commencer la r daction de notre feuille de style on va d abord lier notre page HTML index html notre feuille de style style css Pour cela on va ajouter dans l en t te de notre document HTML une balise l
4. L objet obtenu est affect la variable globale div_message d clar avant la fonction en d but de programme 2 en affectant la propri t innerHTML de cet objet du DOM div_message le texte html contenu entre les balises lt div gt et lt div gt de la division est modifi ainsi que l aspect graphique de son widget 4 3 5 Action du bouton Le principe est le m me que pour l initialisation on ajoute cette fois dans la balise lt button gt du fichier index html un nouvel attribut onclick qui a pour valeur une instruction JavaScript ici un appel de la fonction nouvellePartie lt button onclick nouvellePartie gt Nouvelle partie lt button gt Cet appel de fonction sera ex cut si l utilisateur clique sur le bouton Ensuite on d finit dans le fichier code js une nouvelle fonction JavaScript function nouvellePartie rien pour l instant Nous allons maintenant coder l action du bouton On va par exemple afficher un message comme vous de jouer avec l instruction div_message innerHTML vous de jouer qui utilise la variable globale div_message affect e dans la fonction init pr c dente On peut aussi par exemple remettre chaque cellule du jeu sa valeur initiale On rapelle qu on a d fini pr c demment la classe chiffre pour les cellules contenant un num ro et la classe vide pour la cellule qui ne contient pas de num ro On propose par exemple la d finition suivante de la
5. encodage du contenu du document par exemple content text html charset iso 8859 1 Le format iso 8859 1 aussi nomm iso latin 1 est un encodage usuel de fichier texte Dans ce cas on placera dans l en t te le code suivant lt meta http equiv content type content text html charset iso 8859 1 gt Mais si on dispose d un diteur de texte qui le permet on pr f rera utiliser un encodage plus moderne UTF 8 qui donne acc s tous les caract res Unicode Dans ce cas on placera dans l en t te le code suivant lt meta http equiv content type content text html charset utf 8 gt On peut aussi d finir dans l en t te le texte qui est affich dans la barre de titre de la fen tre du navigateur l aide des balises lt title gt et lt title gt Le code HTML de l en t te du document peut ainsi prendre la forme suivante lt html gt lt head gt lt meta http equiv content type content text html charset utf 8 gt lt title gt Taquin lt title gt lt head gt lt body gt Corps du document lt body gt lt html gt partir de maintenant le code tant ainsi r dig il est fortement conseill d ouvrir le fichier index html dans un navigateur Internet pour voir ce qui est affich puis de recommencer de m me la suite de chaque nouvelle modification apport au code pour contr ler si tout se passe comme pr vu Attention il est indispensable de v rifier en permanence le travail
6. lt tr gt lt td gt a lt td gt lt td gt bbbb lt td gt pd ce code va afficher a FREE lt tr gt AAAAA B lt td gt AAAAA lt td gt lt td gt B lt td gt lt tr gt lt table gt On peut ajouter dans la balise lt table gt une liste attributs valeurs qui permet de modifier le rendu de l affichge L attribut align permet de fixer l alignement horizontal de la table dans la fen tre du navigateur Il peut prendre les valeurs left qui est la valeur par d faut right ou center Les principaux attributs pr d finis de mise en forme sont les suivants border d finit l paisseur du trait qui encadre les cellules cellspacing d finit l espace entre les cellules de la grille cellpadding d finit l espace entre le cadre de la cellule et le texte La valeur de ces attributs est un entier entre guillemets qui repr sente un nombre de pixels Par exemple lt table border 1 cellspacing 5 cellpadding 2 gt lt tr gt lt td gt Ligne 1 Colonne 1 lt td gt lt td gt Ligne 1 Colonne 2 lt td gt lt tr gt lt tr gt lt td gt Ligne 2 Colonne 1 lt td gt lt td gt Ligne 2 Colonne 2 lt td gt lt tr gt lt table gt Ligne 1 Colonne 1 Ligne 1 Colonne 2 ce code va afficher Ligne 2 Colonne 1 Ligne 2 Colonne 2 Notre Taquin se joue sur une grille 4 x 4 4 1 5 La balise lt button gt On veut que l utilisateur dispose d un b
7. notre document HTML une balise lt script gt avec sa liste attributs valeurs sous la forme lt script charset utf 8 type text javascript src code js gt lt script gt Les diff rents attributs sont charset utf 8 indique le mode d encodage du fichier type text javascript pr cise le langage src code js donne le nom du fichier JavaScript louverture du fichier index html dans un navigateur Internet les deux fichiers auxi liaires style css et code js sont aussi ouverts automatiquement et interpr t s 4 3 1 Le langage JavaScript Le langage JavaScript est un langage de programmation interpr t par le navigateur Il comporte deux aspects la programmation g n rale et des fonctions d acc s au DOM Il permet donc de consulter et de modifier volont les propri t s de tous les objets du DOM et comme toute modification se r percute imm diatement sur l affichage dans la fen tre du navigateur des changements d affichage dynamiques sont possibles De plus JavaScript permet de prendre en compte les v nements comme les clics de souris que l utilisateur peut provoquer sur la page Web Ainsi il devient possible de modifier l aspect graphique de la page en fonction des actions de l utilisateur On ne va pas faire un cours de programmation mais seulement indiquer comment proc der partir d exemples simples Le projet pourra alors tre termin en s inspirant de ces exemples Attention Ne
8. sent Figure 5 et repris ci dessous Par d faut le rectangle du widget adapte ses dimensions pour se coller autour du texte qu il encadre On peut cependant modifier tous les param tres width largeur unit s mm cm px pixels exemple width 55mm height hauteur exemple height 25px padding espace entre le texte et la bordure unit s mm cm px et exemple padding 20px margin espace autour de la bordure exemple margin 10px 25 10px 254 Pour padding et margin il y a deux formes possibles Si une seule mesure est fournie elle s applique aux 4 c t s de rectangle Mais il est possible de donner 4 valeurs distinctes qui repr sentent successivement les espaces top right bottom left au dessus droite au dessous et gauche Si on utilise comme unit cela repr sente un pourcentage de la largeur de la fen tre ce qui significatif uniquement gauche et droite Propri t s typographiques Elles permettent de modifier le mode d criture et l aspect des textes text align alignement horizontal du texte dans le rectangle cette propri t concerne les balises lt div gt valeurs center left right exemple text align center font style style typographique du texte valeurs normal italic exemple font style italic font weight graisse paisseur typographique des caract res du texte valeurs normal bold bolder et lighter exemple font weight bo
9. Projet ISN Le Taquin de Sam Loyd Une application Web de jeu interactif 14 septembre 2013 Projet de Terminale S pour la sp cialit Informatique et Sciences du Num rique Ce document pr sente bri vement les langages HTML CSS et JavaScrip mais seuls les l ments de ces langages n cessaires la r alisation du projet y sont d crits plus en d tails Table des mati res 1 2 Taquin 3 Projet 3 Plan de travail 4 3 1 Les outils n cessaires 4 3 2 Les fichi rs amp Cr er e ssec eare onreine pese t s m 4 Cr ation des fichiers du projet 5 4 1 index html une page Web cod e en HTML 5 41141 Lelansage HTML so coret 4 w reto Elta mourut 5 4 1 2 En t te du document 6 ALS Corps du document se s Las N e nd bp ia dates he 7 41 4 La balise lt table 444 44 44i444um46aeutamaegrrsascet 7 41 5 La balise lt button s e suis 4 gba ge isa 8 416 Le DOM Document Object Model 44 4 ccoo rzereorrorss 8 42 style css une feuille de styles cod e en USB o 9 Ani DST CoD ro Li ii a ai a a A E i a 10 4 2 2 Balises HTML objets du DOM widgets graphiques 11 42 3 D claration de propri t cos os sa we soni ea e b e ur 12 A24 D titiondessiyl s o lt s 4 44 e me de 4 a ut dia 13 4 3 code js un programme cod en JavaScript 14 48 1 Le langage JavaScript 4 eu
10. aragraphes c est dire les textes crits entre lt p gt et lt p gt Si le s lecteur est un nom pr c d de le style s applique au contenu de l unique objet du DOM associ la balise quelque soit son tag dont l attribut id a pour valeur le nom pr fix par le Cet identificateur ne doit figurer que dans une unique balise de la page HTML Par exemple si on a la r gle vert background color green et si dans le code HTML on a une balise identifi e par vert son contenu sera affich sur fond vert Comme par exemple cette division lt div id vert gt lt div gt Si le s lecteur est un nom pr c d de le style s applique au contenu de touts les objets du DOM associ s aux balises quelque que soit leurs tags dont l attribut class a pour valeur le nom pr fix par le point Par exemple si on a la r gle gras font weight bold le texte contenu dans toutes les balises de classe gras quelque soit les tags sera affich en gras 10 18 Comme les balises suivantes lt p class gras gt lt p gt ou lt table class gras gt lt table gt 4 2 2 Balises HTML objets du DOM widgets graphiques Revenons sur l exemple qui pr sente le DOM affich Figure 3 Dans cet exemple le naviga teur utilise un style par d faut Voici comment on peut modifier ce style pour obtenir le rendu de droite de la Figure 4 FIGURE 4 Rendu obtenu avec une feuille de style CSS e
11. as d afficher des num ros Il faut que l utilisateur ait l impression de faire glisser les pi ces lui m me selon la r gle du jeu Il faut donc cr er un mod le abstrait du Taquin et aussi un acc s individuel chacun des 16 widgets des cellules du jeu De plus il faut conna tre leurs coordonn es et donner l utilisateur la possibilit s de cliquer sur chaque widget pour provoquer la simulation des d placements Le mod le abstrait du jeu doit d crire l tat actuel du jeu comme un tableau 4x4 des num ros des cellules La structure lin aire de notre variable globale td_piece contenant la liste des objets du DOM associ s aux bascules ne convient pas Il nous faut plut t un tableau 4x4 correspondant aux positions des pi ces sur la grille affich e Nous allons d abord fixer la valeur de l attribut id et ajouter un attribut onclic chaque cellule lt td gt de la grille lt td id C00 onclick clicPiece 0 0 gt lt td gt lt td id C01 onclick clicPiece 0 1 gt lt td gt lt td id C33 onclick clicPiece 3 3 gt lt td gt Ainsi la fonction init va pouvoir r cup rer dans des variables globales l aide de la m thode document getElementByld les objets du DOM que notre programme a besoin de contr ler Par exemple div_message pour la zone de message et td_cellule pour le tableau 4x4 des cellules de la grille Les cellules de la grille sont identifi es par C00 CO1 etc On peut construire ces nom
12. donner des conseils suivre Dans la rubrique Page Web du site ISN une application Web interactive permet d ef fectuer des tests simples sur le langage CSS http mathmac free fr PageWeb App1iCSS index html On rappelle qu il va falloir modifier en parall le les deux fichiers index html et style css et v rifier continuellement Pour le titre de la page probablement plac entre lt h1 gt et lt h1 gt une r gle du type de celle qu on vient de voir ci dessus sera directement crite dans le fichier style css Par contre pour s lectionner le message de mode d emploi probablement plac dans une division il faudra identifier cette division en ajoutant un attribut id dans la balise lt div gt et donc modifier d abord le fichier index html Par exemple lt div id message gt lt div gt Ensuite on pourra ajouter au fichier style css une nouvelle r gle de d clarations de style de la forme Hmessage De m me comme il y a 16 cellules dans la grille du jeu des pi ces contenant un chiffre et une case vide Pour d finir les styles de ces cellules il va falloir d finir des classes On ajoute d abord dans le fichier index html un attribut class pour chaque cellule de la grille Par exemple lt td class chiffre gt 5 lt td gt ou lt td class vide gt lt td gt On ajoute ensuite au fichier style css deux nouvelles r gles de d claration de style de la forme chiffre ou vide
13. effectu Pour cela on enregistre les fichiers modifi s et on ouvre le fichier index html dans le navigateur Internet pour contr ler le rendu 6 18 4 1 3 Corps du document Le corps du document contient tout ce que l on d sire afficher dans notre page Web titres textes images boutons etc On d crira uniquement dans ce paragraphe les balises HTML utiles la r alisation du projet Les l ments indispensables au puzzle seront d abord d finis simplement puis leur style graphique sera am lior ensuite comme on le proposera au paragraphe 4 2 page 9 Mise en page du texte Tout le texte plac dans le corps d une page HTML est affich sur une seule ligne en flot continu c est dire sans tenir compte des espaces en surnombre ou des sauts de lignes pr sents dans le code Les seuls retours la ligne sont ceux qui sont effectu s automatiquement quand le bord droit de la fen tre est atteint Quelques balises pr d finies permettent cependant un peu mise en page Il est possible de fractionner la page du document en paragraphes en pla ant les diff rents textes entre les balises lt p gt et lt p gt Il est aussi possible de fractionner la page en divisions en crivant entre les balises lt div gt et lt div gt Une division peut contenir non seulement du texte mais aussi d autres l ments graphiques comme les listes les tables les images les boutons etc Il y aussi des balises pr d finies
14. fonction nouvellePartie var td_cellule la liste de tous les objets de tag lt td gt function nouvellePartie var k div_message innerHTML vous de jouer td_cellule document getElementsByTagName td for k 0 k lt td_cellule length k 1 if k lt 15 td_cellule k innerHTML DR td_cellule k className vide else td_cellule k innerHTML String k 1 td_cellule k className chiffre L appel de la m thode document getElementsByTagName td retourne la liste de tous les objets du DOM correspondant une balise lt td gt lt td gt ce qui repr sente l ensemble des 16 cellules de notre grille de jeu 16 18 Pour les 15 premi res cellules de la grille on fixe le num ro comme contenu de la cellule et on fixe la valeur de la classe chiffre La derni re cellule est vide et a pour classe vide Comme on trouve dans la feuille de style les d clarations de styles chiffre et vide qui d finissent en CSS la g om trie cadre largeur hauteur de chaque type de cellule le programme ci dessus dessine automatiquement la grille de jeu initiale H las ce n est pas la bonne solution car lors du jeu les cellules doivent pouvoir changer individuellement En effet il faut aussi pouvoir simuler les mouvement des pi ces du jeu Nous allons revenir l initialisation dans le paragraphe suivant 4 3 6 Mod lisation du jeu Pour jouer il ne suffit p
15. ive Voir paragraphe 4 3 page 14 4 Cr ation des fichiers du projet 4 1 index html une page Web cod e en HTML On commence par cr er un fichier de texte au format HTML qui sera la page d entr e de l application Comme il est d usage sur le Web on nomme ce fichier index html Si on ouvre ce fichier dans un navigateur Internet on verra la page Web que l on d sire publier 4 1 1 Le langage HTML Le langage HTML Hyper Text Markup Language est un langage qui permet de structurer un texte ordinaire l aide de balises tag en anglais Cette section propose une initiation au langage HTML limit e ce qui est utile pour le projet On trouvera de nombreuses informations sur Internet Dans la rubrique Page Web du site ISN une application Web interactive permet d ef fectuer des tests simples sur le langage HTML http mathmac free fr PageWeb AppliHTML index html L ensemble du code est compris entre lt htm1 gt la balise qui marque le d but du document et lt html gt la balise de fin du document Un document est constitu d un en t te plac entre les balises lt head gt et lt head gt suivie d un corps de texte plac entre les balises lt body gt et lt body gt Le code HTML du document a donc la forme suivante lt html gt lt head gt En t te du document lt head gt lt body gt Corps du document lt body gt lt html gt On pr cise au paragraphe 4 1 2 page 6 quelles so
16. l du Taquin 3 18 Cette application sera constitu e de 3 fichiers 1 une page HTML pour visualiser le Taquin 2 une feuille de style CSS pour enjoliver l affichage 3 un programme JavaScript pour simuler le jeu et g rer les v nements On trouvera des informations utiles dans la rubrique Page Web du site ISN Sp cialit Informatique et Sciences du Num rique http mathmac free fr PWAccueil html 3 Plan de travail Une application Web se pr sente comme un dossier qui peut tre t l vers sur un serveur distant contenant un site Web Cependant cette application peut fonctionner et tre mise au point en local sur un ordinateur personnel Le dossier cr er contiendra au minimum trois fichiers de textes cod s selon des formats diff rents et que l on va r diger successivement 3 1 Les outils n cessaires Pour r aliser ce projet et cr er ces fichiers il faut utiliser Un diteur de texte brut c est dire sans option de mise en page Il est cependant pr f rable d utiliser un diteur pr vu pour la programmation de code et qui offre au moins la colorisation syntaxique Un navigateur Internet dans lequel on ouvre le projet pour en contr ler le fonctionne ment La plupart de navigateurs Internet disposent de divers outils de d veloppement qui peuvent se r v ler utiles lors de la mise au point du projet Comme navigateur Internet on conseille d utiliser Firefox http www mozi
17. ld font size taille des caract res du texte valeurs xx small x small smaller small medium large larger x large et xx large exemple font size x large 12 18 font family famille des caract res du texte valeurs serif sans serif monospace et fantasy exemple font family monospace Propri t s d coratives Elles permettent de d finir des encadrement ou de modifier les couleurs des widgets color couleur du texte couleur voir ci dessous exemple color red background color couleur du fond du widget exemple background color yellow border bordure du widget exemple border 1px blue solid Les valeurs de couleurs sont aqua black blue fushia gray green lime marron navy olive purple red silver teal white yellow mais on peut aussi d finir la couleur par son code RVB hexad cimal On crit le caract re suivi de 3 chiffres hexa 0 F pour Rouge Vert et Bleu Par exemple rouge F00 vert 0FO bleu 00F blanc FFF noir 000 Pour la bordure la propri t border est suivie de trois param tres l paisseur du trait la couleur du trait et le type de trait choisi parmi les valeurs suivantes dotted pointill dashed tiret ou solid plein 4 2 4 D finition des styles Passons maintenant la r daction de la feuille de style qui va contenir une liste de r gles comme celle qu on vient de voir ci dessus On ne va pas donner de solution mais simplement
18. lla org fr firefox Pour v rifier les codes et les programmes cr s on peut ajouter Firefox le module Firebug qui fournit des outils de d veloppement http ww getfirebug com Ces outils sont indispensables pour la mise au point d une application Web En effet pour ne pas interrompre trop souvent la navigation sur Internet les navigateurs sont extr mement robustes Ils ne signalent pas la plupart de erreurs provoqu es par des pages HTML incorrectes ou par les bugs dans les programmes Le navigateur ne se bloque pas souvent m me s il peut faire n importe quoi Il faut donc contr ler attentivement son travail l aide de ces outils de d veloppement qui proposent entre autres une console d erreurs 3 2 Les fichiers cr er Il y a trois fichiers de texte cr er dans un m me dossier 1 Le fichier index html cod en HTML contient la description de la page Web affich e dans le navigateur Cette page devra pr senter au moins 4 18 un titre un message de mode d emploi ou de compte rendu de jeu une grille de jeu interactive un bouton permettant de lancer une nouvelle partie Voir paragraphe 4 1 page 5 2 Le fichier style css cod en CSS contient les d clarations des styles des diff rents l ments affich s dans la page Web Voir paragraphe 4 2 page 9 3 Le fichier code js cod en JavaScript contient le programme qui g re le fonctionne ment de l application Web interact
19. n Fen tre e 8 00 Fen tre er Sans style Titre Avec style Clic Clic Il suffit d crire ce code dans la feuille de style h1 margin 10px 25px 10px 25px border 5px blue solid padding 20px background color yellow text align center color maroon Par d faut le navigateur affiche dans la fen tre les widgets comme un flot continu de gauche droite et de haut en bas de rectangles de diff rentes tailles Sur la Figure 5 on voit un widget contenant le mot Texte et sur lequel sont not es les diff rentes propri t s qui permettent de pr ciser les dimensions de son rectangle Cette figure permet de comprendre la r gle de d claration de style pr sent e ci dessus FIGURE 5 Structure d un widget graphique ee E E 2 margin border padding background color m on _ P Texte ne i Le _ width color Chaque navigateur donne toutes ces propri t s des valeurs par d faut qu il est possible de modifier dans la feuille de style Pour bien comprendre cet exemple voici maintenant une description des d clarations de propri t s usuelles 11 18 4 2 3 D claration de propri t Les noms des propri t s sont des noms pr d finis du langage CSS On va donc d crire les propri t s CSS usuelles et les valeurs qu elles peuvent prendre Propri t s g om triques Elles permettent de fixer les dimensions des widgets selon le mod le pr
20. nt les indications techniques fournir dans l en t te du document pour afficher correctement la page Web On pr sente au paragraphe 4 1 3 page 7 les balises HTML utiles pour le codage du corps du document qui d finit la page Web 5 18 4 1 2 En t te du document L en t te du document contient des informations techniques concernant le mode d affichage du texte de la page Web dans la fen tre du navigateur Les balises lt meta gt permettent de donner des indications au navigateur pour lui permettre d afficher correctement la page propos e Il est fortement conseill de placer dans l en t te au moins une balise lt meta gt pour pr ciser le mode d encodage du texte ce qui est important pour que les caract res accentu s soient correctement affich s dans le navigateur Cette balise doit contenir ce qu on appelle une liste attribut valeur Une liste attribut valeur peut figurer dans toute balise HTML C est un texte ins r entre le nom de la balise et le signe gt qui la termine Un couple attribut valeur est un nom d attribut suivi du signe suivi d une valeur d attribut crite entre guillemets doubles Les diff rents couples attribut valeur doivent tre s par s par des espaces Dans notre projet http equiv content type sera le premier couple attribut valeur de notre balise lt meta gt il pr cise que cette balise concerne le contenu du document Un second couple attribut valeur pr cise le type et l
21. outon sur lequel cliquer pour m langer les pi ces et jouer une nouvelle partie Le texte figurant dans le bouton sera crit entre les balises lt button gt et lt button gt Pour modifier le style du bouton voir paragraphe 4 2 page 9 Pour d finir l action ex cuter lorsque l utilisateur effectue un clic sur le bouton on se reportera au paragraphe 4 3 5 page 16 4 1 6 Le DOM Document Object Model Remarque Le mod le du DOM pr sent dans ce document est simplifi Il s agit du mod le contr l par le langage JavaScript 8 18 Le code html affich ci dessous gauche peut tre repr sent sch matiquement par un arbre sous la forme affich e droite ht lt html gt lt head gt lt title gt Fen tre lt title gt head lt head gt title lt body gt innerHTML Fen tre body lt h1 gt Titre lt h1 gt lt div id commande gt lt button gt Clic lt button gt h1 div lt div gt innerHTML Titre id commande lt body gt lt htm1 gt button innerHTML Clic Cet arbre constitue ce qu on appelle le Mod le Objet du Document en anglais Document Object Model et en abr g le DOM Le rendu associ au DOM et affich par le navigateur est visible Figure 3 FIGURE 3 Fen tre associ e au DOM 600 Fen tre gt Titre Clic En r sum partir de chaque balise du document HTML est cr un objet
22. pas oublier apr s chaque modification de sauvegarder les trois fichiers et de recharger imm diatement le fichier index html dans le navigateur Internet pour contr ler le bon fonctionnement de l ensemble Les outils de d veloppement sont ici indispensables pour cela 14 18 4 3 2 Initialisation du programme La premi re chose faire est d initialiser le programme Pour cela il faut cr er une fonction JavaScript nomm e par exemple init et l appeler d s que la page HTML est charg e On va ajouter dans la balise lt body gt du fichier index html un nouvel attribut onload qui a pour valeur une instruction JavaScript ici un appel de la fonction d initialisation lt body onload init gt Cet appel de fonction sera ex cut apr s chargement de de la page Web Ensuite on d finit dans le fichier code js la fonction JavaScript function init rien pour l instant Pour l instant cette fonction ne fait rien comme l indique le commentaire En JavaScript tout ce qui suit jusqu la fin de la ligne est un commentaire ignor l ex cution Apr s enregistrement des deux fichiers index html et code js on recharge la page dans le navigateur et on utilise la console d erreur de l outil de d veloppement pour v rifier que tout s est bien pass M me s il ne s est rien pass il y aurait pu y avoir une erreur si le code avait t mal crit 4 3 3 D bug Alerte JavaScript Voici une
23. petite astuce Pour tre certain que l initia lisation a bien eu lieu remplacer le commentaire dans la fonction init par le code alert init a t ex cut Ceci provoquera lors du chargement du fichier index html l afichage d un dialogue d alerte JavaScript init a t ex cut L instruction alert message peut ainsi tre plac e dans toute zone de programme chaque fois qu il est utile de voir ce qui s y passe 4 3 4 Modification d un objet du DOM Nous avons pr vu dans la page d accueil un message de mode d emploi ou de compte rendu de jeu qui sera donc modifi en cours de jeu Nous avons pu cr er une division identifi e pour en d finir le style par exemple lt div id message gt Bonjour lt div gt Pour afficher au d part Clic pour rendre les cases rouges la place de Bonjour il nous faut trouver l objet du DOM qui repr sente cette division et en modifier le contenu On peut faire a ainsi var div_message function init div_message document getElementByld message div_message innerHTML Clic pour remettre les num ros dans l ordre Il y a maintenant deux instructions dans la fonction init 1 document est une variable globale pr d finie de JavaScript qui donne acc s au DOM 15 18 La m thode getElementByld message qui est appel e retourne l objet du DOM identifi par le couple attribut valeur id message d une balise HTML
24. pour afficher six niveaux de titres lt hi gt section lt h1 gt lt h2 gt sous section lt 2 gt et ainsi de suite jusqu lt h6 gt lt h6 gt Le navigateur attribue tous ces textes plac s entre des balises des styles d affichage particuliers pr d finis On verra plus loin au paragraphe 4 2 page 9 que le mode d affichage ou rendu du code HTML peut toutefois tre modifi l aide d une feuille de style L application Web disponible sur le site ISN et d j signal e page 5 permet de tester rapidement le rendu propos par d faut par votre navigateur Internet pour les diff rentes balises HTML http mathmac free fr PageWeb AppliHTML index html On peut commencer coder la page du projet crire le titre crire un message de mode d emploi ou de compte rendu de jeu Ne pas oublier de tester chaque tape Il reste maintenant placer les l ments du jeu c est dire une grille de jeu de 4 lignes de 4 colonnes un bouton permettant de lancer une nouvelle partie 4 1 4 La balise lt table gt Elle permet d aligner des textes sur une grille structur e en lignes et colonnes Entre les balises lt table gt et lt table gt chaque ligne est d finie ente des balises lt tr gt et lt tr gt et dans chaque ligne les colonnes sont d finies entre des balises lt td gt et lt td gt Par exemple le code HTML suivant 7 18 lt table gt
25. qu e videment pour que le Taquin fonctionne la fonction clicPiece doit modifier l tat des cellules Il ne faut pas oublier non plus de v rifier chaque clic si le but est atteint c est dire si les num ros sont bien ordonn s Dans ce cas il est bon d afficher un message de victoire Il ne reste donc plus qu coder cette fonction function clicPiece li co ici on modifie la table cellule en d pla ant les num ros et en respectant la r gle du jeu actualiserAffichage D bug Si vous rencontrez des difficult s de mise au point n oubliez pas de programmer des alertes de d bug comme celle propos e page 15 au paragraphe 4 3 3 vos clavier 4 3 7 Que faire de plus Votre projet est termin Il ne vous reste plus qu jouer De nombreuses autres possibilit s d am liorations de l interface sont possibles en modifiant la page Web index html ou la feuille de style style css Mais on peut aussi penser compter les clics de l utilisateur et en afficher le nombre 18 18
26. s par programme Par exemple la cellule de num ro de ligne li et de num ro colonne co aura pour identificateur C String 1i String co On peut ainsi r cup rer les widgets des bascules dans une table td_bascule index e par les lignes et les colonnes var td_cellule for li 0 li lt 4 li 1 td_cellulelli 1 for co 0 co lt 4 co 1 td_cellule li co document getElementByld C String 1i String co La fonction d initialisation pourra ainsi r cup rer les l ments du DOM pourra ensuite initialiser le mod le avec une nouvelle variable globale cellule qui contiendra par exemple un tableau 4x4 des num ros des pi ces 17 18 Ne pas confondre le tableau 4x4 td_cellule des objets du DOM les widgets repr sentant les cellules du jeu avec le tableau cellule repr sentant les num ros actuels de ces cellules Ainsi td_cellule 2 1 r f rence le widget de la cellule de la ligne 3 colonne 2 de la grille on indexe partir de 0 et cellule 2 1 est le num ro de la pi ce plac e dans cette cellule La modification des num ros dans le mod le n a pas d effet visuel imm diat On pourra alors pr voir une fonction actualiserAffichage qui modifiera le style d affichage de chaque cellule en fonction de son tat actuel Jouons enfin Lorsque l utilisateur clique sur une case du jeu la fonction clicPiece est appel e avec pour arguments les coordonn e de la cellule cli
27. t link gt lien avec sa liste attributs valeurs sous la forme lt link rel stylesheet type text css href style css gt Les diff rents attributs sont rel stylesheet indique qu il s agit d une feuille de style type text css pr cise le type de codage href style css donne le nom du fichier de la feuille de style Maintenant l ouverture du fichier index html dans un navigateur Internet le fichier auxiliaire style css est aussi automatiquement ouvert et interpr t 4 2 1 Le langage CSS Une feuille de style CSS est un fichier texte qui contient des r gles de d clarations de style appliquer aux l ments d une page Web Chaque r gle de d clarations de style est compos e d un s lecteur suivi d une liste de d clarations de propri t s entre accolades sous la forme s lecteur propri t valeur propri t valeur S lecteur Le s lecteur indique sur quels objets du DOM va porter le style d fini Il y a trois types de s lecteurs tag un simple nom de balise ou tag identificateur un nom pr c d de classe un nom pr c d de un point Chaque s lecteur fournit une liste d un ou plusieurs objets s lectionn s dans le DOM Si le s lecteur est un nom de balise ou tag le style s applique au contenu de tous les objets du DOM associ s aux balises portant ce nom Par exemple la r gle p color red provoque l affichage en rouge de tous les p
Download Pdf Manuals
Related Search