L3 EMO & EQE 2015-2016 - Calendrier des cours

La « pensée » du Dilun, d'an 20 a viz Du 2017 , 23h39m35s :
Drugs may be the road to nowhere, but at least they're the scenic route!

Semaine du dredi 13 janbier 2017 : TD n°1 (Cumul=3h)

Avant-propos

HTML5

  • En-tête d'une page HTML5
    Pour passer les tests du W3C une page doit avoir la structure suivante :
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta charset="utf-8">
        <title>Un titre si possible intelligent...</title>
      </head>
      <body>
        ....
        ....
      </body>
    </html>
    
    À comparer avec celui nécessaire pour xHTML visible dans la section 2.5 du poly.
    Contrairement à xHTML, l'utilisation des majuscules & minuscules n'est pas différenciée en HTML5.
  • Quelques balises de base (dans leur version la plus simple) valables dans toutes les versions de (x)HTML(5): <h1>, <h2>, etc., <p>, <ul>, <ol>, <li>, <span>, <div> (section 2.6 du poly).
  • Application directe
    Réalisez les trois pages site01x.html, site02x.html et site03x.html, en adaptant à votre situation. Vos pages doivent absolument passer avec succès les tests du W3C. Vous ne vous occuperez bien entendu pas du tout de la présentation : ce sera fait avec l'étude des CSS.
    Remarque : Si vous voulez les modifier en y intégrant vos propres loisirs, réels ou inventés, vous pourrez trouver les noms d'un grand nombre de collections sur les pages http://www.vignobletiquette.com/collec/nom_coll.htm, http://capsules.musa.free.fr/Collections05.html, ou http://christophe.giordani.free.fr/collections.htm.
    Sur les machines des salles pédagogiques, vous enregistrez vos pages sous votre répertoire www et vous les visualisez dans le navigateur à l'adresse
    http://hebergement-peda.univ-lille3.fr/~votreLogin/chemin
    chemin est le chemin relatif vers votre page depuis www
  • Suite...
    Sur la première page, les mots « Licence MIASHS » (ou ce par quoi vous les aurez remplacés) devront être un lien vers une page institutionnelle de votre choix, en rapport avec votre licence (la page de l'université, cette page-ci, la page de l'UFR MIME, etc.), tandis que les mots « Machin Chose » (ou ce que vous aurez mis à la place) devront être un lien vers la page d'accueil que votre voisin est en train de réaliser en même temps que vous.
Dernière modification : 5/2/2017

Semaine du dredi 20 janbier 2017 : TD n°2 (Cumul=6h)

Fin de l'exercice précédent

  • Sur la première page, les mots « Licence MIASHS » (ou ce par quoi vous les aurez remplacés) devront être un lien vers une page institutionnelle de votre choix, en rapport avec votre licence (la page de l'université, cette page-ci, la page de l'UFR MIME, etc.), tandis que les mots « Machin Chose » (ou ce que vous aurez mis à la place) devront être un lien vers la page d'accueil que votre voisin est en train de réaliser en même temps que vous.

Acid Test

Si vous ne comprenez pas pourquoi les informaticiens vous cassent la tête en essayant de vous expliquer qu'Internet Explorer c'est vraiment pas bon, utilisez l'Acid Test, pour tester la compatibilité de votre navigateur avec les standards du W3C (l'organisme mondial chargé d'élaborer et de gérer les standards du web) :

Gestion des couleurs en HTML et CSS

CSS

Dernière modification : 5/2/2017

Semaine du dredi 27 janbier 2017 : TD n°3 (Cumul=9h)

Le contrôle n°1 aura lieu le lundi 6 mars, de 15h30 à 17h, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

CSS

Exercice

Compléments CSS

  • Propriétés des liens
    a:link { /* pour les liens sans particularités */ }
    a:visited { /* pour les liens déjà visités */ }
    a:hover { /* pour les liens survolés par le pointeur de la souris */ }
    a:visited:hover { /* pour les liens déjà visités, survolés par le pointeur de la souris */ }
    a:active { /* au moment du clic */ }
    Rappel : hover existe pour n'importe quelle balise.)
Dernière modification : 5/2/2017

Semaine du dredi 3 fébrier 2017 : TD n°4 (Cumul=12h)

Rappel : Le contrôle n°1 aura lieu le lundi 6 mars, de 15h30 à 17h, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

Compléments CSS

  • Signature
    http://mammouthland.free.fr/cours/css/cours5.php
  • Feuilles de style différentes pour l'écran et l'impression
    Deux solutions :
    • Deux fichiers (ou plus) différents, et mettre dans l'en-tête de la page :
      <link rel="stylesheet" href="fichierCSSgénérale" media="all" />
      <link rel="stylesheet" href="fichierCSSécran" media="screen" />
      <link rel="stylesheet" href="fichierCSSimprimante" media="print" />
    • Un seul fichier et le structurer ainsi :
      @media all {
      /* Ce qui concerne tous les medias */
      }
      @media print {
      /* Ce qui concerne uniquement l'impression */
      }
      @media screen {
      /* Ce qui concerne uniquement l'écran */
      }
  • Propriétés des liens
    a:link { /* pour les liens sans particularités */ }
    a:visited { /* pour les liens déjà visités */ }
    a:hover { /* pour les liens survolés par le pointeur de la souris */ }
    a:visited:hover { /* pour les liens déjà visités, survolés par le pointeur de la souris */ }
    a:active { /* au moment du clic */ }
    Rappel : hover existe pour n'importe quelle balise.)
  • La propriété display
    Trois valeurs particulières (mais il y en a d'autres) : none, block, et inline.
    Vous pouvez tester ici.

Bonus

  • Les bugs d'Internet Explorer, les contourner, les utiliser : voir le chapitre 14 du poly.

HTML5

  • Nouveautés en HTML5 : nous nous concentrerons sur les nouvelles balises qui apportent de la sémantique au texte. Vous pourrez comprendre la philosophie derrière HTML5 en vous polongeant dans le livre Dive into HTML5 : http://diveintohtml5.info/. (Voir la page https://fr.wikipedia.org/wiki/HTML5 pour une simple liste de toutes les nouveautés.)
    • main : Définit le contenu principal de la page, il doit être unique dans la page.
    • section : Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
    • nav : Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
    • article : Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
    • aside : Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
    • hgroup : La balise <hgroup> n'existe plus en HTML5 (février 2013). Eh oui, ce sont des choses qui arrivent quand on travaille sur un truc pas entièrement finalisé.
    • mark : Définit un texte marqué. Surligneur de texte.
    • header : Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
    • footer : Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

    Vous trouverez sur le web de nombreuses images illustrant l'utilisation de ces balises, comme par exemple celle-ci qui provient de Alsacréation :

    Imbrication des balises de base en HTML5

    Inconvénients : Ces balises ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

  • Compatibilité : comme dit précédemment, les balises HTML5 ne sont pas forcément compatibles avec tous les navigateurs, et en particulier toutes les anciennes versions de IE.

    Les navigateurs autres que IE se contentent d'ignorer les balises qu'ils ne connaissent pas. Votre page ne sera pas présentée selon vos souhaits, mais le contenu sera là quand même.
    IE, lui, ignore le texte qui se trouvent dans de telles balises... Votre page risque d'être intégralement vide... Gênant...

    Pour vous protéger, vous pouvez placer les fichiers html5shiv.js et html5shiv-printshiv.js dans votre répertoire, et ajouter le code suivant dans vos pages web, juste avant </head> :

          <!--[if lt IE 9]>
             <script src="html5shiv.js"></script>
             <script src="html5shiv-printshiv.js"></script>
          <![endif]-->        
      

Réglages de Web Developer

  • Vérifiez que votre version de Web Developer est bien réglée : dans le menu Outils cliquez sur réglez les outils, et vérifier que le standard choisi est bien CSS3 (voir capture d'écran ci-dessous).
    Si ce n'est pas le cas, Web Developer trouvera des « fausses » erreurs dans les exemples de l'exercice suivant, ainsi que dans votre travail.... régler Web Developer pour CSS3

Exercice d'application

  • Réalisez ce site: Les girafes.
    Ce n'est pas forcément un modèle à essayer de reproduire aveuglément, mais plutôt un exemple destiné à vous donner des idées et vous montrer quelques possibilités des CSS. Vous pouvez utiliser vos propres idées.
  • Vous pouvez ensuite améliorer votre travail grâce à un menu déroulant, comme dans cette version-ci.
  • Ajoutez une feuille de style pour l'impression, de façon à ce que les articles (les pages) s'impriment correctement et sobrement, sans les menus et autres décorations.
Dernière modification : 5/2/2017

Semaine du dredi 10 fébrier 2017 : TD n°5 (Cumul=15h)

Rappel : Le contrôle n°1 aura lieu le lundi 6 mars, de 15h30 à 17h, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

Finir l'exercice

  • Réalisez ce site: Les girafes.
    Ce n'est pas forcément un modèle à essayer de reproduire aveuglément, mais plutôt un exemple destiné à vous donner des idées et vous montrer quelques possibilités des CSS. Vous pouvez utiliser vos propres idées.
  • Vous pouvez ensuite améliorer votre travail grâce à un menu déroulant, comme dans cette version-ci.
  • Ajoutez une feuille de style pour l'impression, de façon à ce que les articles (les pages) s'impriment correctement et sobrement, sans les menus et autres décorations.
Dernière modification : 11/2/2017

Semaine du dredi 17 fébrier 2017 : TD n°6 (Cumul=18h)

Rappel : Le contrôle n°1 aura lieu le lundi 6 mars, de 15h30 à 17h, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

HTML5 – Multimédia

Images

La balise qui permet d'inclure une image dans une page web (en tant que contenu de la page, et non en tant que fond d'écran) est la balise img.

Sa syntaxe minimale est :

<img src="URL_de_l_image alt="descriptif_court" />

L'attribut alt est obligatoire. Il contiendra un descriptif (court de préférence) de l'image qui sera affiché quand l'image ne pourra pas être utilisée (réseau trop lent, dispositif de visualisation ne permettant pas l'affichage des images, etc.).

L'attribut src indique l'URL du fichier image à utiliser.

On ne devrait a priori utiliser que PNG, JPG et GIF, qui sont des formats compressés définis spécifiquement pour le web, ainsi que SVG qui est un format vectoriel. Même si certains autres formats peuvent fonctionner sur certains navigateurs, ce n'est pas une bonne idée de les utiliser.

Il existe aussi le nouveau format WebP développé par Google. Mais il ne fait pas l'unanimité actuellement, et plusieurs navigateurs ne le reconnaissent pas. Vous pouvez en savoir plus sur Wikipedia. Vous pouvez tester si votre navigateur sait utiliser le format WebP sur cette page : https://developers.google.com/speed/webp/gallery. Google Chrome reconnaît bien entendu parfaitement le format WebP.

Il existe d'autres attributs (voir par exemple http://www.w3schools.com/tags/tag_img.asp). On évitera bien entendu les attributs de présentation qui sont des survivances des anciennes versions de HTML : tout ce qui est présentation, comme d'habitude, doit être réservé aux CSS.

Attention : la balise img est une balise inline. Pour centrer une image sur une ligne, écrire « img {text-align:center;} » dans la CSS n'aura aucun effet. Il faudra inclure la balise img dans une balise block (p, div, etc.) et appliquer text-align:center à cette balise block.

Audio

HTML5 a apporté une énorme amélioration à la gestion des fichiers audios et vidéos. Jusque là l'utilisation de tels fichiers dans une page web tenait beaucoup de la loterie : aucune certitude que la machine cliente soit capable de lire le fichier, aucune certitude que les bons codecs ou les bons plugins (Flash ou autre) soient installés...

La balise pour l'audio est tout simplement audio.

Sa syntaxe est :

<audio attributs_éventuels>
   <source src="URL_d_un_fichier_son" type="format_audio">
   <source src="URL_d_un_fichier_son" type="format_audio">
   etc.
   Votre navigateur n'est pas compatible avec la balise AUDIO.
</audio>

Le texte (ici : « Votre navigateur n'est pas compatible etc. ») s'affichera pour les navigateurs qui ne savent pas utiliser la balise audio.

Les balises source permettent de préciser plusieurs versions possibles du fichier, pour que le navigateur puisse choisir celle qui lui convient le mieux. Les types autorisés sont audio/mpeg (MP3), audio/ogg (Ogg) et audio/wav (Wav).

Les principaux attributs possibles sont :

  • autoplay : Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.
  • controls : Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
  • loop : Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
  • volume : Le volume de la partie audio, fournie comme une valeur flottante comprise entre 0.0 (silencieux) et 1.0 (le volume le plus élevé).
Un exemple

Un exemple en MP3, avec controls et loop :

Le code source correspondant est :

<audio controls loop>
    <source src="media/ManuCornet-DistanceEtTemps.mp3" type="audio/mpeg">
    Votre navigateur n'est pas compatible avec la balise AUDIO.
</audio>
Le même exemple, mais...

Le même, en faisant intervenir la CSS :

En fait, peu de modifications possibles : taille, bord, couleur de fond, alignement.

Si l'attribut controls n'est pas utilisé, aucun affichage n'est fait. Il faudra alors utiliser autoplay, voire même loop.

La musique ci-dessus est libre de droit et provient de http://www.auboutdufil.com/index.php?id=33#downloads.
Il s'agit de « Distance et Temps » de Manu Cornet (site web http://www.manucornet.net/).
Licence : Creative Commons : http://creativecommons.org/licenses/by-nc-sa/2.5/.
Un autre exemple

Un autre exemple en OGG :

Le code source correspondant est :

<audio controls loop>
    <source src="media/MarkerBeacon-Blaster.ogg" type="audio/mpeg">
    Votre navigateur n'est pas compatible avec la balise AUDIO.
</audio>
La musique ci-dessus est libre de droit et provient de http://www.auboutdufil.com/index.php?id=180#downloads.
Il s'agit de « Blaster » de Marker Beacon (site web http://marker.beacon.free.fr/).
Licence : Creative Commons : http://creativecommons.org/licenses/by-nc-sa/2.5/.

Vidéo

La balise video a un comportement très proche de celui la balise audio.

Sa syntaxe est :

<video attributs_éventuels>
   <source src="URL_d_un_fichier_video" type="format_video">
   <source src="URL_d_un_fichier_video" type="format_video">
   etc.
   Votre navigateur n'est pas compatible avec la balise VIDEO.
</video>

En plus des attributs existant pour video (par exemple autoplay, controls, loop entre autres), on trouve aussi height et width pour contrôler la taille de l'image.

Les types autorisés sont video/mp4 (MP4), video/ogg (Ogv) et video/WebM (WebM).

Un exemple, avec un fichier MOV

Le code source correspondant est :

<video controls preload style="width:50%;">
   <source src="media/GOPR6239.mov" type="video/ogg">
   <source src="media/GOPR6239.mp4" type="video/mp4">
   Votre navigateur n'est pas compatible avec la balise VIDEO.
</video>
La vidéo ci-dessus est libre de droit et provient de https://www.videvo.net/video/green-turtle/5503/.
Il s'agit de « GoPro footage of a green turtle, taken while diving in Liuqiu, Taiwan. ».
Licence : Videvo Standard License.
Un autre exemple, avec un fichier MP4

Le code source correspondant est (vous remarquerez que la taille est définie par CSS) :

<video controls preload style="width:50%;">
   <source src="media/VID_20160517_175443.mp4" type="video/mp4">
   Votre navigateur n'est pas compatible avec la balise VIDEO.
</video>
La vidéo ci-dessus est libre de droit et provient de https://www.videvo.net/video/clouds-time-lapse/5147/.
Il s'agit de « A time-lapse of clouds from the top of a mountain. ».
Licence : Videvo Standard License.

JavaScript

Présentation

Une grande partie de ce texte provient des pages citées dans les liens ci-dessous.

Javascript a été créé par Netscape (le nom était livescript au départ) pour développer des applications internet et, par la même occasion, pour étendre les possibilités du HTML.
Il s'agit d'un langage léger et orienté objet, permettant d'écrire des scripts.
Attention : il ne faut pas confondre Java et Javascript ! Java est un langage de programmation développé par SUN et non un langage de script comme Javascript. De plus, les scripts écrits avec Javascript sont interprétés par le navigateur et incorporés dans le code HTML, ce qui n'est pas le cas du langage Java.

Quelques bonnes lectures :

Plus loin :

Les événements

Exemple avec les événements de base :

  1. <input type="button"
  2.        value="au départ..."
  3.        id="monbouton"
  4.        onMouseOver="this.value='souris présente'"
  5.        onMouseOut="this.value='souris absente'"
  6.        onFocus="this.value='focus'"
  7.        onBlur="this.value='j\'ai perdu le focus'"
  8.        onClick="this.value='ça chatouille...'" >
Ce que cela donne
Il existe d'autres événements :
  • onChange : on quitte une zone que l'utilisateur a modifiée (un champ d'un formulaire par exemple) ;
  • onLoad : une page est chargée ;
  • onSelect : sélectionner un champ d'un formulaire ;
  • onSubmit : soumettre un formulaire (envoyer) ;
  • onUnload : quitter la page.

Objets de base

Exemple
Page
Formulaire
Bouton
Texte
 
 
 
On atteindra le texte du bouton par document.nom_du_formulaire.nom_du_bouton.value

On pourra aussi accéder à un élément par getElementById(identifiant).

Ainsi on pourra modifier le texte du bouton de l'exemple précédent par :

  1. <span onMouseOver="getElementById('monbouton').value='Je suis au dessus...';"
  2.       onMouseOut="getElementById('monbouton').value='Je n\'y suis plus';">
  3.    <em>Passer au dessus de cette phrase et regardez le bouton précédent</em>
  4. </span>
Ce que cela donne
Passer au dessus de cette phrase et regardez le bouton précédent

Conséquence : une action quelque part peut sans difficulté avoir un effet ailleurs.

Plusieurs actions

Il possible d'exécuter plusieurs actions lors de l'activation d'un événement :
  1. <input type="button" id="deuxA" value="Passez ici..."
  2.        onMouseOver="this.value='Une action...';getElementById('deuxB').value='Une autre action...';"
  3.        onMouseOut="this.value='Passez ici...';getElementById('deuxB').value='Celui-ci n\'a pas d\'effet';" />
  4. <input type="button" id="deuxB" value="Celui-ci n'a pas d'effet">
Ce que cela donne

Exercices

  1. Réaliser une page HTML contenant quatre boutons :
    • si on clique sur le premier, un message s'affiche dans le deuxième ;
    • si on clique sur le deuxième, un message s'affiche dans le troisième ;
    • si on clique sur le troisième, un message s'affiche dans le quatrième ;
    • si on clique sur le quatrième, un message s'affiche dans le premier.
    (Une solution, ou une autre.)
  2. Les événements onClick, onMouseOut, onMouseOver, etc. peuvent s'appliquer à autre chose que des boutons.
    Écrire une page HTML comportant 2 boutons (appelés 1 et 2) et un texte (appelé 3). Utiliser les différents événements pour modifier le texte des boutons au clic et au survol des boutons et du texte. (Solution.)
Dernière modification : 18/2/2017

Semaine du dredi 10 môrs 2017 : TD n°7 (Cumul=21h)

JavaScript

Retour sur les exercices

  1. Réaliser une page HTML contenant quatre boutons :
    • si on clique sur le premier, un message s'affiche dans le deuxième ;
    • si on clique sur le deuxième, un message s'affiche dans le troisième ;
    • si on clique sur le troisième, un message s'affiche dans le quatrième ;
    • si on clique sur le quatrième, un message s'affiche dans le premier.
    (Une solution, ou une autre.)
  2. Les événements onClick, onMouseOut, onMouseOver, etc. peuvent s'appliquer à autre chose que des boutons.
    Écrire une page HTML comportant 2 boutons (appelés 1 et 2) et un texte (appelé 3). Utiliser les différents événements pour modifier le texte des boutons au clic et au survol des boutons et du texte. (Solution.)

Écrire dans le texte

  1. <script>
  2.   document.write('Ce texte n\'est pas dans le code source HTML, et ce calcul non plus : '+(5+8));
  3. </script>
Ce que cela donne

Bien entendu, en jouant sur les mots, le texte peut quand même être considéré comme « étant dans le code source HTML », puisqu'il a bien fallu écrire le code JavaScript dans la page HTML. Ce qu'il faut comprendre dans cette phrase c'est qu'on n'a pas écrit la ligne telle quelle dans le code HTML, mais que c'est bien le programme JavaScript qui a fait le travail. On pourait imaginer un programme (plus complexe, et hors de nos capacités pour l'instant) qui va chercher des données ailleurs (base de données, fichier, etc.) et les utilise pour écrire de lui-même le code HTML.

Attention, la fonction document.write ne peut pas modifier une page déjà affichée (on verra plus tard la fonction innerHtml qui permet de réaliser cela).

Des boîtes : un bouton

  1. <span onMouseOver="alert('Quelqu\'un est passé par là...');"><em>Passer au dessus de cette phrase</em></span>
Ce que cela donne
Passer au dessus de cette phrase

Des boîtes : saisie

  1. <input type="button" value="Cliquez ici..." name="unbouton"
  2.         onClick="this.value='Vous avez tapé : '+prompt('Tapez quelque chose');">
Ce que cela donne

Des boîtes : deux boutons

  1. <input type="button" value="Cliquez ici..." name="unbouton"
  2.         onClick="this.value='Cliquez ici... (Votre choix&nbsp;: '+confirm('Êtes vous d\'accord avec ça')+')';">
Ce que cela donne

Exercices

  1. Créer une alerte qui affiche « Hello World ! » en utilisant alert(). (Solution.)
  2. Utiliser la fonction prompt() pour demander son prénom à l'utilisateur et afficher dans une boîte alerte « Bonjour ….. » avec le prénom entré. (Solution.)
  3. Demander à l'utilisateur deux nombres et afficher leur somme avec prompt() et alert() (vous devrez convertir le nombre entré en entier avec parseInt()). (Solution.)
  4. Un champ input de type text (c'est-à-dire <input type="text" ...>) est en fait une zone de saisie. Utiliser de tels champs pour construire une calculatrice élémentaire. (Solution.)

Variables

L’essentiel du travail effectué par un programme d’ordinateur consiste à manipuler des données. Ces données peuvent être très diverses (tout ce qui est numérisable, en fait), mais dans la mémoire de l’ordinateur elles se ramènent toujours en définitive à une suite finie de nombres binaires.

Pour pouvoir accéder aux données, le programme d’ordinateur (quel que soit le langage dans lequel il est écrit) fait abondamment usage d’un grand nombre de variables de différents types.

Une variable apparaît dans un langage de programmation sous un nom de variable à peu près quelconque (voir ci-après), mais pour l’ordinateur il s’agit d’une référence désignant une adresse mémoire, c’est-à-dire un emplacement précis dans la mémoire vive.

À cet emplacement est stockée une valeur bien déterminée. C’est la donnée proprement dite, qui est donc stockée sous la forme d’une suite de nombres binaires, mais qui n’est pas nécessairement un nombre aux yeux du langage de programmation utilisé. Cela peut être en fait à peu près n’importe quel « objet » susceptible d’être placé dans la mémoire d’un ordinateur, par exemple : un nombre entier, un nombre réel, un nombre complexe, un vecteur, une chaîne de caractères typographiques, un tableau, une fonction, etc.

En JavaScript les noms des variables doivent obligatoirement commencer par une lettre ou le symbole « _ », suivi d'une suite de lettres, de chiffres ou du symbole « _ ».

Nous pouvons définir une variable et lui affecter une valeur. Les termes « affecter une valeur » ou « assigner une valeur » à une variable sont équivalents. Ils désignent l’opération par laquelle on établit un lien entre le nom de la variable et sa valeur (son contenu).

En JavaScript comme dans de nombreux autres langages, l’opération d’affectation est représentée par le signe « = ».

Pour utiliser la valeur d'une variable il suffit de l'appeler par son nom.

Vous pouvez aussi aller lire le cours de Fabien Torre.

Exemple récapitulatif

demoJS-01.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8">
  5.     <title>JavaScript, exemple n°1</title>
  6.   </head>
  7.   <body>
  8.     <h1>JavaScript, exemple n°1</h1>
  9.    
  10.     <script>
  11.       document.writeln("Hello world<br/>");
  12.            
  13.       // pour marquer une séparation sur la page vue dans le navigateur
  14.       document.writeln ("\n<hr/>\n");
  15.      
  16.       prenom = 'Toto';
  17.       document.write("salut ");
  18.       document.writeln(prenom);
  19.       document.writeln("<p>ça va aujourd'hui ?</p>");
  20.       document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  21.      
  22.       // pour marquer une séparation sur la page vue dans le navigateur
  23.       document.writeln ("\n<hr/>\n");
  24.  
  25.       prenom = 'Marcel';
  26.       document.writeln("salut "+prenom+"<p>ça va aujourd'hui ?</p>\n<p>oui, ça va aujourd\'hui !</p>");
  27.  
  28.       // pour marquer une séparation sur la page vue dans le navigateur
  29.       document.writeln ("\n<hr/>\n");
  30.  
  31.       x = 5 ;
  32.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  33.       x = 7 ;
  34.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  35.       x = 12 ;
  36.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  37.  
  38.     </script>
  39.   </body>
  40. </html>
  41.  

Fonctions

Une fonction peut renvoyer un résultat...
  1. <script>
  2. function carre (x) {
  3.    return x*x;
  4. }
  5. </script>
... ou pas (c'est ce qu'on appelle une procédure dans d'autres langages) :
  1. <script>
  2. function afficher (prenom) {
  3.    document.write("salut ");
  4.    document.writeln(prenom);
  5.    document.writeln("<p>ça va aujourd'hui ?</p>");
  6.    document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  7.    document.writeln();
  8. }
  9. </script>

Plus d'informations sur le cours de Fabien Torre.

Autre version de l'exemple récapitulatif

demoJS-02.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8">
  5.     <title>JavaScript, exemple n°2</title>
  6.   </head>
  7.   <body>
  8.     <h1>JavaScript, exemple n°2</h1>
  9.    
  10.     <script>
  11.       // ===================================================
  12.       // Pour marquer une séparation sur la page vue dans le navigateur
  13.       function ligne () {
  14.         document.writeln ("\n<hr/>\n");
  15.       }
  16.       // ===================================================
  17.       // Afficher pour un prénom
  18.       function afficher (prenom) {
  19.         document.write("salut ");
  20.         document.writeln(prenom);
  21.         document.writeln("<p>ça va aujourd'hui ?</p>");
  22.         document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  23.         document.writeln();
  24.       }
  25.       // ===================================================
  26.       function carre (x) {
  27.         return 'Le carré de ' + x + ' est ' + (x*x) + '.<br/>' ;
  28.       }
  29.       // ===================================================
  30.  
  31.       afficher ('Toto');
  32.       ligne ();
  33.       lui = 'Marcel';
  34.       afficher (lui)
  35.       ligne ();
  36.       Georges = 'Henri';
  37.       afficher (Georges);
  38.       ligne ();
  39.       document.writeln( carre(2) );
  40.       document.writeln( carre(5), carre(10), carre(3) );
  41.     </script>
  42.   </body>
  43. </html>
  44.  
Dernière modification : 13/3/2017

Semaine du dredi 17 môrs 2017 : TD n°8 (Cumul=24h)

Variables en Javascript

L’essentiel du travail effectué par un programme d’ordinateur consiste à manipuler des données. Ces données peuvent être très diverses (tout ce qui est numérisable, en fait), mais dans la mémoire de l’ordinateur elles se ramènent toujours en définitive à une suite finie de nombres binaires.

Pour pouvoir accéder aux données, le programme d’ordinateur (quel que soit le langage dans lequel il est écrit) fait abondamment usage d’un grand nombre de variables de différents types.

Une variable apparaît dans un langage de programmation sous un nom de variable à peu près quelconque (voir ci-après), mais pour l’ordinateur il s’agit d’une référence désignant une adresse mémoire, c’est-à-dire un emplacement précis dans la mémoire vive.

À cet emplacement est stockée une valeur bien déterminée. C’est la donnée proprement dite, qui est donc stockée sous la forme d’une suite de nombres binaires, mais qui n’est pas nécessairement un nombre aux yeux du langage de programmation utilisé. Cela peut être en fait à peu près n’importe quel « objet » susceptible d’être placé dans la mémoire d’un ordinateur, par exemple : un nombre entier, un nombre réel, un nombre complexe, un vecteur, une chaîne de caractères typographiques, un tableau, une fonction, etc.

En JavaScript les noms des variables doivent obligatoirement commencer par une lettre ou le symbole « _ », suivi d'une suite de lettres, de chiffres ou du symbole « _ ».

Nous pouvons définir une variable et lui affecter une valeur. Les termes « affecter une valeur » ou « assigner une valeur » à une variable sont équivalents. Ils désignent l’opération par laquelle on établit un lien entre le nom de la variable et sa valeur (son contenu).

En Javascript comme dans de nombreux autres langages, l’opération d’affectation est représentée par le signe « = ».

Pour utiliser la valeur d'une variable il suffit de l'appeler par son nom.

Vous pouvez aussi aller lire le cours de Fabien Torre.

Exemple récapitulatif

demoJS-01.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8">
  5.     <title>JavaScript, exemple n°1</title>
  6.   </head>
  7.   <body>
  8.     <h1>JavaScript, exemple n°1</h1>
  9.    
  10.     <script>
  11.       document.writeln("Hello world<br/>");
  12.            
  13.       // pour marquer une séparation sur la page vue dans le navigateur
  14.       document.writeln ("\n<hr/>\n");
  15.      
  16.       prenom = 'Toto';
  17.       document.write("salut ");
  18.       document.writeln(prenom);
  19.       document.writeln("<p>ça va aujourd'hui ?</p>");
  20.       document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  21.      
  22.       // pour marquer une séparation sur la page vue dans le navigateur
  23.       document.writeln ("\n<hr/>\n");
  24.  
  25.       prenom = 'Marcel';
  26.       document.writeln("salut "+prenom+"<p>ça va aujourd'hui ?</p>\n<p>oui, ça va aujourd\'hui !</p>");
  27.  
  28.       // pour marquer une séparation sur la page vue dans le navigateur
  29.       document.writeln ("\n<hr/>\n");
  30.  
  31.       x = 5 ;
  32.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  33.       x = 7 ;
  34.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  35.       x = 12 ;
  36.       document.writeln ("Le carré de " + x + " est " + (x*x) + ".<br/>") ;
  37.  
  38.     </script>
  39.   </body>
  40. </html>
  41.  

Fonctions en Javascript

Une fonction peut renvoyer un résultat...
  1. <script>
  2. function carre (x) {
  3.    return x*x;
  4. }
  5. </script>
... ou pas (c'est ce qu'on appelle une procédure dans d'autres langages) :
  1. <script>
  2. function afficher (prenom) {
  3.    document.write("salut ");
  4.    document.writeln(prenom);
  5.    document.writeln("<p>ça va aujourd'hui ?</p>");
  6.    document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  7.    document.writeln();
  8. }
  9. </script>

Plus d'informations sur le cours de Fabien Torre.

Autre version de l'exemple récapitulatif

demoJS-02.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8">
  5.     <title>JavaScript, exemple n°2</title>
  6.   </head>
  7.   <body>
  8.     <h1>JavaScript, exemple n°2</h1>
  9.    
  10.     <script>
  11.       // ===================================================
  12.       // Pour marquer une séparation sur la page vue dans le navigateur
  13.       function ligne () {
  14.         document.writeln ("\n<hr/>\n");
  15.       }
  16.       // ===================================================
  17.       // Afficher pour un prénom
  18.       function afficher (prenom) {
  19.         document.write("salut ");
  20.         document.writeln(prenom);
  21.         document.writeln("<p>ça va aujourd'hui ?</p>");
  22.         document.writeln('<p>oui, ça va aujourd\'hui !</p>');
  23.         document.writeln();
  24.       }
  25.       // ===================================================
  26.       function carre (x) {
  27.         return 'Le carré de ' + x + ' est ' + (x*x) + '.<br/>' ;
  28.       }
  29.       // ===================================================
  30.  
  31.       afficher ('Toto');
  32.       ligne ();
  33.       lui = 'Marcel';
  34.       afficher (lui)
  35.       ligne ();
  36.       Georges = 'Henri';
  37.       afficher (Georges);
  38.       ligne ();
  39.       document.writeln( carre(2) );
  40.       document.writeln( carre(5), carre(10), carre(3) );
  41.     </script>
  42.   </body>
  43. </html>
  44.  

Modifier le code HTML avec Javascript

La fonction innerHTML permet de modifier le code HTML à l'intérieur de la page.

demoJS-03.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8">
  5.     <title>JavaScript, exemple n°3</title>
  6.   </head>
  7.   <body>
  8.     <h1>JavaScript, exemple n°3</h1>
  9.  
  10.     <div id="unDiv"></div>  
  11.    
  12.     <input type="button" value="Cliquez ici pour ajouter un tableau"
  13.             onClick="getElementById('unDiv').innerHTML='<table><tr><th>xx</th><td>yy</td></table>';"><br/>
  14.  
  15.     <input type="button" value="Cliquez ici pour ajouter une image"
  16.             onClick="getElementById('unDiv').innerHTML='<img src=\'13.jpg\' alt=\'une image\'>';"><br/>
  17.  
  18.     <input type="button" value="Cliquez ici pour vider la zone"
  19.             onClick="getElementById('unDiv').innerHTML='';">
  20.  
  21.   </body>
  22. </html>
  23.  

Interaction de Javascript avec les CSS

  1. <script>
  2. function change(elt) {
  3.   if (document.body.style.color=='blue') {
  4.      document.body.style.color='orange';
  5.      document.body.style.backgroundImage='none';
  6.      document.body.style.backgroundColor='#aaaaff';
  7.   } else  {
  8.      document.body.style.color='blue';
  9.      document.body.style.backgroundColor='yellow';
  10.      document.body.style.backgroundImage='none';
  11.   }
  12.   elt.value='Cliquer ici : '+document.body.style.color+'/'+document.body.style.backgroundColor;
  13. }
  14. </script>
  15. Un peu de couleurs...
  16. <input type="button" id="boutonCSS" value="cliquer ici..." onClick="change(this)">
Ce que cela donne
Un peu de couleurs...

Exercices

  1. Changer la couleur de fond et la couleur de texte sur un cycle de trois en appuyant sur un bouton (Solution.)
  2. Construire une page dont certains objets changent de couleur de texte et de fond quand on passe dessus. (Solution.)
  3. Changer une image au survol. (Solution.)

Timer en Javascript

  1. <script>
  2. function changeCouleur () {
  3.   if (document.body.style.backgroundColor=='orange') {
  4.     document.body.style.backgroundImage='none';
  5.     document.body.style.backgroundColor='yellow';
  6.   } else  {
  7.     document.body.style.backgroundImage='none';
  8.     document.body.style.backgroundColor='orange';
  9.   }
  10.   document.getElementById('off').value='Arrêter : '+document.body.style.backgroundColor;
  11. }
  12. </script>
  13. <input value="Démarrer" type="button" id="on"
  14.        onClick="monTimer=setInterval(changeCouleur,1000);">
  15. <input value="Arrêter" type="button" id="off"
  16.        onClick="clearInterval(monTimer);">
Ce que cela donne

Exercice

  1. La fonction suivante calcule l'heure à l'instant où elle est appelée :
    function mon_heure() {
    	var d = new Date();
    	var heure = d.getHours();
    	var minute = d.getMinutes();
    	var seconde = d.getSeconds();
    	var t = heure + ":" + minute + ":" + seconde;
    	document.leform.monheure.value = t;
        }
    Utilisez-la pour créer une zone qui indique l'heure en permanence à la seconde près. (Solution.)
Dernière modification : 20/3/2017

Semaine du dredi 24 môrs 2017 : TD n°9 (Cumul=27h)

Exercices

  1. Changer la couleur de fond et la couleur de texte sur un cycle de trois en appuyant sur un bouton (Solution.)
  2. Construire une page dont certains objets changent de couleur de texte et de fond quand on passe dessus. (Solution.)
  3. Changer une image au survol. (Solution.)

Timer en Javascript

  1. <script>
  2. function changeCouleur () {
  3.   if (document.body.style.backgroundColor=='orange') {
  4.     document.body.style.backgroundImage='none';
  5.     document.body.style.backgroundColor='yellow';
  6.   } else  {
  7.     document.body.style.backgroundImage='none';
  8.     document.body.style.backgroundColor='orange';
  9.   }
  10.   document.getElementById('off2').value='Arrêter : '+document.body.style.backgroundColor;
  11. }
  12. </script>
  13. <input value="Démarrer" type="button" id="on2"
  14.        onClick="monTimer=setInterval(changeCouleur,1000);">
  15. <input value="Arrêter" type="button" id="off2"
  16.        onClick="clearInterval(monTimer);">
Ce que cela donne

Exercice

  1. La fonction suivante calcule l'heure à l'instant où elle est appelée :
    function mon_heure() {
    	var d = new Date();
    	var heure = d.getHours();
    	var minute = d.getMinutes();
    	var seconde = d.getSeconds();
    	var t = heure + ":" + minute + ":" + seconde;
    	document.leform.monheure.value = t;
        }
    Utilisez-la pour créer une zone qui indique l'heure en permanence à la seconde près. (Solution.)

Un exemple récapitulatif

demoJS-recap.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="fr">
  4.     <meta charset="utf-8" />
  5.     <title>Calcul de factorielle</title>
  6.     <script>
  7.        function factorielle (n) {
  8.          if(n<0) {
  9.            alert("Valeur inférieure à 0 !");
  10.          } else {
  11.            if (n==0) {
  12.              return 1;
  13.            } else {
  14.             return n*factorielle(n-1);
  15.            }
  16.          }
  17.        }
  18.  
  19.        function affiche_factorielle() {
  20.          var k = parseInt(document.getElementById('valeur').value);
  21.          document.getElementById('resultat').innerHTML = factorielle(k);
  22.        }
  23.     </script>
  24.   </head>
  25.   <body>
  26.     <input type="button" value="Factorielle" onclick="affiche_factorielle();">
  27.     <input type="text" id="valeur"> = <span id="resultat"></span>
  28.   </body>
  29. </html>
  30.  

La balise canvas

La balise canvas (HTML5) représente une zone de dessin pouvant afficher des graphiques qu'on réalisera en utilisant JavaScript.

Un cours complet est disponible à https://www.alsacreations.com/tuto/lire/1484-introduction.html.

Premier essai : des traits

On commence par définir la zone du dessin, en précisant si on veut la largeur (width) et la hauteur (height).
On lui attribue un identifiant (id) pour que JavaScript puisse y accéder par la suite pour les dessins.

C'est getElementById() qui va permettre d'aller chercher et cibler l'élément canvas identifié par son attribut id unique (ici mon_canvas), puis la méthode getContext() de l'élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir (nous nous contenterons de 2D), et de quelles fonctions il pourra disposer. Le contexte sera l'élément central de gestion de canvas.

Dans ce premier exemple on explore les dessins simples : tracer des segments de droite...

Vous pourrez trouver des explications sur le système de coordonnées à https://www.alsacreations.com/tuto/lire/1484-introduction.html.

canvas01.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Canvas-01</title>
  6.   </head>
  7.   <body>
  8.     <h1>Canvas-01</h1>
  9.  
  10.     <canvas id="mon_canvas"
  11.             width="350"
  12.             height="350"
  13.             style="border:red thin solid;">
  14.       Votre navigateur ne supporte malheureusement pas la balise
  15.       &lt;canvas&gt;. Vous ne pouvez pas voir ce qui est prévu.
  16.     </canvas>
  17.  
  18.     <script>
  19.       var c = document.getElementById("mon_canvas");
  20.       var ctx = c.getContext("2d");
  21.      
  22.       ctx.beginPath();      // Début du chemin
  23.       ctx.moveTo(50,50);    // Le tracé part du point 50,50
  24.       ctx.lineTo(200,200);  // Un segment est ajouté vers 200,200
  25.       ctx.moveTo(200,50);   // Puis on saute jusque 200,50
  26.       ctx.lineTo(50,200);   // Puis on trace jusque 50,200
  27.       ctx.closePath();      // Fermeture du chemin (facultative)
  28.       ctx.stroke();
  29.     </script>
  30.  
  31.   </body>
  32. </html>
  33.  

Premiers exercices

  1. Dessiner un cadre à 50 pixels du bord. (Solution.)
  2. Idem, mais chaque tracé d'un trait est déclenché par un bouton. (Solution, ou mieux, avec une fonction.)
  3. Construire un télécran élémentaire.
    Remarques :
    • Pour trouver les symboles en forme de flèche, demandez « entités HTML » à votre moteur de recherche préféré.
    • Pour effacer le contenu du canvas, utilisez « ctx.clearRect(0,0,350,350) ».
    (Solution.)
Dernière modification : 3/4/2017

Semaine du dredi 31 môrs 2017 : TD n°10 (Cumul=30h)

canvas, premiers exercices

  1. Dessiner un cadre à 50 pixels du bord. (Solution.)
  2. Idem, mais chaque tracé d'un trait est déclenché par un bouton. (Solution, ou mieux, avec une fonction.)
  3. Construire un télécran élémentaire.
    Remarques :
    • Pour trouver les symboles en forme de flèche, demandez « entités HTML » à votre moteur de recherche préféré.
    • Pour effacer le contenu du canvas, utilisez « ctx.clearRect(0,0,350,350) ».
    (Solution.)

Contours et remplissage

On agit sur les couleurs de contour et de remplissage avec fill() et stroke().

Les propriétés du dessin sont definies par fillStyle et strokeStyle (sans parenthèses, ce ne sont pas des fonctions mais des propriétés).

canvas05.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Canvas-05</title>
  6.   </head>
  7.   <body>
  8.     <h1>Canvas-05</h1>
  9.  
  10.     <canvas id="mon_canvas"
  11.             width="350"
  12.             height="350"
  13.             style="border:red thin solid;">
  14.       Votre navigateur ne supporte malheureusement pas la balise
  15.       &lt;canvas&gt;. Vous ne pouvez pas voir ce qui est prévu.
  16.     </canvas>
  17.  
  18.     <br/>
  19.    
  20.     <script>
  21.       var c = document.getElementById("mon_canvas");
  22.       var ctx = c.getContext("2d");
  23.    
  24.       ctx.lineJoin = "round";      //  Pour des jointures arrondies
  25.       ctx.lineCap = "round";       //  Pour des fins de ligne arrondies
  26.      
  27.       // Voile du bateau
  28.       ctx.beginPath();             //  Début du chemin
  29.       ctx.moveTo(150,80);          //  Le tracé part du point 150,80
  30.       ctx.lineTo(300,230);         //  Un segment est ajouté vers 300,230
  31.       ctx.lineTo(150,230);         //  Un segment est ajouté vers 150,230
  32.       ctx.closePath();             //  Fermeture du chemin
  33.       ctx.fillStyle = "lightblue"; //  Définition de la couleur de remplissage
  34.       ctx.fill();                  //  Remplissage du dernier chemin tracé
  35.      
  36.       // Coque du bâteau
  37.       ctx.beginPath();             //  Début pour un autre chemin
  38.       ctx.moveTo(50,250);
  39.       ctx.lineTo(100,300);
  40.       ctx.lineTo(250,300);
  41.       ctx.lineTo(300,250);
  42.       ctx.fillStyle = "peru";
  43.       ctx.strokeStyle = "sienna";  //  Définition de la couleur de contour
  44.       ctx.lineWidth = 5;           //  Définition de la largeur de ligne
  45.       ctx.fill();                  //  Application du remplissage
  46.       ctx.stroke();                //  Application du contour
  47.      
  48.       //  Mât
  49.       ctx.beginPath();
  50.       ctx.moveTo(140,50);
  51.       ctx.lineTo(140,250);
  52.       ctx.lineWidth = 10;
  53.       ctx.stroke();
  54.     </script>
  55.   </body>
  56. </html>
  57.  

La souris

Ce premier exemple vous permet de voir comment récupérer les coordonnées d'un clic.

Remarque : event est un objet qui contient les caractéristiques du dernier événement qui s'est produit (clic de souris, appui sur une touche, etc.).

canvas06.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Canvas-06</title>
  6.   </head>
  7.   <body>
  8.     <h1>Canvas-06</h1>
  9.  
  10.     <canvas id="mon_canvas"
  11.             width="350"
  12.             height="350"
  13.             style="border:red thin solid;"
  14.             onmousedown="clicSouris(event);" >
  15.       Votre navigateur ne supporte malheureusement pas la balise
  16.       &lt;canvas&gt;. Vous ne pouvez pas voir ce qui est prévu.
  17.     </canvas>
  18.  
  19.     <script>
  20.       function clicSouris(e) {
  21.         document.getElementById("resultats").innerHTML ="Clic en X="+e.clientX+" et en Y="+e.clientY;
  22.       }
  23.     </script>
  24.    
  25.     <div id="resultats"></div>  <!-- pour afficher les coordonnées du clic -->
  26.   </body>
  27. </html>
  28.  

Vous pouvez remarquer qu'il y a un décalage. En fait on obtient les coordonnées du clic par rapport à la page, et non pas dans le canvas. Il va falloir convertir le résultat en récupérant la position du canvas.

canvas07.html
[cacher les numéros de lignes]
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Canvas-07</title>
  6.   </head>
  7.   <body>
  8.     <h1>Canvas-07</h1>
  9.  
  10.     <canvas id="mon_canvas"
  11.             width="350"
  12.             height="350"
  13.             style="border:red thin solid;"
  14.             onmousedown="clicSouris(this,event);" >
  15.       Votre navigateur ne supporte malheureusement pas la balise
  16.       &lt;canvas&gt;. Vous ne pouvez pas voir ce qui est prévu.
  17.     </canvas>
  18.  
  19.     <script>
  20.       function clicSouris(c,e) {
  21.         var c = document.getElementById("mon_canvas");
  22.         var ctx = c.getContext("2d");
  23.         // Position absolue du clic (par rapport à la page)
  24.         xAbs = e.clientX ;
  25.         yAbs = e.clientY ;
  26.         // Position du canvas
  27.         xCan = c.offsetLeft ;
  28.         yCan = c.offsetTop ;
  29.         // Position relative du clic (par rapport au canvas)
  30.         xRel = e.clientX-c.offsetLeft ;
  31.         yRel = e.clientY-c.offsetTop ;
  32.         // Affichage des coordonnées
  33.         document.getElementById("resultats").innerHTML =
  34.                          "Clic en X="+xAbs+" et en Y="+yAbs+".<br/>"
  35.                        + "Le canvas  est en X="+xCan+" et en Y="+yCan+".<br/>"
  36.                        + "Position relative du clic en X="+xRel+" et en Y="+yRel+".";
  37.         // Dessin au clic
  38.         ctx.arc(xRel, yRel, 2, 0, 2*Math.PI, false);
  39.         ctx.fill();
  40.         ctx.closePath();
  41.  
  42.       }
  43.     </script>
  44.    
  45.     <div id="resultats"></div>  <!-- pour afficher les coordonnées du clic -->
  46.   </body>
  47. </html>
  48.  

Exercices

  1. Dessiner à la souris dans le canvas. (Solution.)
  2. Space Invaders, première version.
    Les instructions suivantes permettent de construire l'image d'un alien (alien) positionné en (x,y) :
    1. ctx.fillRect(x,y+4,1,3);
    2.  
    3. ctx.fillRect(x+1,y+2,1,2);
    4.  
    5. ctx.fillRect(x+2,y,1,1);
    6. ctx.fillRect(x+2,y+2,1,5);
    7.  
    8. ctx.fillRect(x+3,y+1,1,2);
    9. ctx.fillRect(x+3,y+4,1,2);
    10. ctx.fillRect(x+3,y+7,1,1);
    11.  
    12. ctx.fillRect(x+4,y+2,1,4);
    13. ctx.fillRect(x+4,y+7,1,1);
    14.  
    15. ctx.fillRect(x+5,y+2,1,4);
    16.  
    17. ctx.fillRect(x+6,y+2,1,4);
    18. ctx.fillRect(x+6,y+7,1,1);
    19.  
    20. ctx.fillRect(x+7,y+1,1,2);
    21. ctx.fillRect(x+7,y+4,1,2);
    22. ctx.fillRect(x+7,y+7,1,1);
    23.  
    24. ctx.fillRect(x+8,y,1,1);
    25. ctx.fillRect(x+8,y+2,1,5);
    26.  
    27. ctx.fillRect(x+9,y+2,1,2);
    28.  
    29. ctx.fillRect(x+10,y+4,1,3);
    Utilisez-les pour produire un alien dans un canvas. (Solution.)
  3. Space Invaders, deuxième version.
    Transformez les instructions en une fonction dont les paramètres sont x et y, et utilisez-la pour dessiner plusieurs aliens. (Solution.)
  4. Space Invaders, troisième version.
    Transformez la fonction pour qu'elle puisse afficher des aliens à différentes échelles. (Solution.)
  5. Space Invaders, quatrième version.
    Utilisez un timer pour faire déplacer des aliens. (Solution.)
  6. Space Invaders, cinquième version.
    Améliorez le programme pour que les aliens n'aient pas tous la même couleur et pour qu'ils ne se déplacent pas tous dans le même sens. (Solution.)
Dernière modification : 2/4/2017

Semaine du dredi 7 averil 2017 : TD n°11 (Cumul=33h)

Le contrôle n°2 aura lieu dans la semaine du 2 mai, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

canvas, exercices

  1. Dessiner à la souris dans le canvas. (Solution.)
  2. Space Invaders, première version.
    Les instructions suivantes permettent de construire l'image d'un alien (alien) positionné en (x,y) :
    1. ctx.fillRect(x,y+4,1,3);
    2.  
    3. ctx.fillRect(x+1,y+2,1,2);
    4.  
    5. ctx.fillRect(x+2,y,1,1);
    6. ctx.fillRect(x+2,y+2,1,5);
    7.  
    8. ctx.fillRect(x+3,y+1,1,2);
    9. ctx.fillRect(x+3,y+4,1,2);
    10. ctx.fillRect(x+3,y+7,1,1);
    11.  
    12. ctx.fillRect(x+4,y+2,1,4);
    13. ctx.fillRect(x+4,y+7,1,1);
    14.  
    15. ctx.fillRect(x+5,y+2,1,4);
    16.  
    17. ctx.fillRect(x+6,y+2,1,4);
    18. ctx.fillRect(x+6,y+7,1,1);
    19.  
    20. ctx.fillRect(x+7,y+1,1,2);
    21. ctx.fillRect(x+7,y+4,1,2);
    22. ctx.fillRect(x+7,y+7,1,1);
    23.  
    24. ctx.fillRect(x+8,y,1,1);
    25. ctx.fillRect(x+8,y+2,1,5);
    26.  
    27. ctx.fillRect(x+9,y+2,1,2);
    28.  
    29. ctx.fillRect(x+10,y+4,1,3);
    Utilisez-les pour produire un alien dans un canvas. (Solution.)
  3. Space Invaders, deuxième version.
    Transformez les instructions en une fonction dont les paramètres sont x et y, et utilisez-la pour dessiner plusieurs aliens. (Solution.)
  4. Space Invaders, troisième version.
    Transformez la fonction pour qu'elle puisse afficher des aliens à différentes échelles. (Solution.)
  5. Space Invaders, quatrième version.
    Utilisez un timer pour faire déplacer des aliens. (Solution.)
  6. Space Invaders, cinquième version.
    Améliorez le programme pour que les aliens n'aient pas tous la même couleur et pour qu'ils ne se déplacent pas tous dans le même sens. (Solution.)

XML, généralités

Voir le cours de Fabien Torre.

Résumé des grosses différences avec HTML5 :

  • la première ligne doit être de la forme <?xml version="1.0" encoding="iso-8859-1" ?> ; les deux attributs spécifient la version de XML utilisée (1.0 ou 1.1) et le codage des caractères (utf-8 par défaut) ;
  • respecter la casse : on peut utiliser majuscules et minuscules dans les noms de balises mais une fois qu'un nom d'élément a été fixé, il faut s'y tenir, la balise <cv> ne pourra être fermée ni par </Cv> ni par </CV> ;

SVG, généralités

Une grande partie de ce texte provient de l'article Scalable Vector Graphics sur Wikipedia.

Le Scalable Vector Graphics (en français « graphique vectoriel adaptable »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML, et développé à partir de 1999 par un groupe de sociétés au sein du W3C. (Une image vectorielle est redimensionnable sans perte de qualité, contrairement à une image matricielle.)

Les coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML. Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths), qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés de couleurs de motifs, ou de filtres.

Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des scripts qui peuvent être intégrés dans le SVG.

Certains environnements graphiques l’utilisent pour la gestion et l’affichage d’icônes, et d’interface, comme X.org, GNOME, KDE ou certains téléphones portables.

Des logiciels graphiques permettent de modifier facilement chaque forme, par exemple en déplaçant des points, ou en changeant la couleur des traits... Il en est de même pour le texte qui peut être modifié sans toucher aux formes, ce qui facilite grandement la modification de schémas.

Un exemple de graphique simple :

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  3.   <title>Exemple simple de figure SVG</title>
  4.   <desc>
  5.     Cette figure est un rectangle,
  6.     un segment de droite et un cercle.
  7.   </desc>
  8.  
  9.   <rect width="100" height="80" x="0" y="70" fill="green" />
  10.   <line x1="5" y1="5" x2="250" y2="95" stroke="red" />
  11.   <circle cx="90" cy="80" r="50" fill="blue" />
  12.   <text x="180" y="60">Un texte</text>
  13. </svg>
  14.  
Ce que cela donne
exemple SVG : 01.svg

Un exemple plus complexe (cette image de provient de la page https://commons.wikimedia.org/wiki/File%3APlates_tect2_fr.svg) :

tectonique des plaques

Comment ?

De nombreux logiciels graphiques permettent de produire du SVG (Inkscape, OpenOffice Draw, Adobe Illustrator, etc.).

Mais nous ne travaillerons que dans un environnement purement textuel : un éditeur de texte quelconque, le but de ce cours étant de faire découvrir les langages qui font le web.

Inclure du SVG dans une page web

La plupart des navigateurs récents sachant traiter les images SVG, rien de plus simple : vous créez un fichier d'extension svg, et vous l'incluez comme n'importe quelle image avec la balise img.

Ainsi l'image ci-dessus a été incluse par <img src="media/Plates_tect2_fr.svg" alt="tectonique des plaques" style="width:50%;">.

Vous pouvez l'inclure vous-même dans vos pages par <img src="http://grappa.univ-lille3.fr/~gonzalez/enseignement/2016-2017/emoeqe3/media/Plates_tect2_fr.svg" alt="tectonique des plaques" style="width:50%;">.

Quoi ?

Qu'est-ce qu'on peut faire en SVG ?

Vous trouverez des réponses en explorant les cours suivants :

  • le cours d'Olivier Carton (Université Paris Diderot)
  • le cours d'OpenClassRoom,
  • l'exposé d'Olivier Bousquet (ESIPE).

SVG, exercices élémentaires

Remarque n°1 : Toutes les images des exercices suivants (et quelques autres) sont regroupées sur une seule page en liste, ou en galerie.
Remarque n°2 : La plupart des images suivantes proviennent de travaux d'étudiants, sous la conduite de Fabien Torre.
  1. Dessinez un rectangle. ( Solution. Rectangle (001.svg) )
  2. Dessinez un cercle et une ellipse. ( Solution. Une ellipse et un cercle (003.svg) )
  3. Dessinez un rectangle colorié. ( Solution. Un rectangle colorié (005.svg) )
Dernière modification : 5/4/2017

Semaine du dredi 28 averil 2017 : TD n°12 (Cumul=36h)

Le contrôle n°2 aura lieu dans la semaine du 2 mai, dans les conditions suivantes :
  • sur feuille,
  • tous documents PAPIER autorisés,
  • aucun document électronique (liseuse, tablette, ordinateur, téléphone, etc.).

SVG, plus sérieux

Remarque n°1 : Toutes les images des exercices suivants (et quelques autres) sont regroupées sur une seule page en liste, ou en galerie.
Remarque n°2 : La plupart des images suivantes proviennent de travaux d'étudiants, sous la conduite de Fabien Torre.
  1. Un trèfle. ( Solution. Trèfle (trefle.svg) )
  2. Un robot. ( Solution. Un robot (robot.svg) )
  3. Un bonhomme de neige. ( Solution. Un bonhomme de neige (bonhomme.svg) )
  4. Une fleur. ( Solution. Fleur (fleur.svg) )
  5. Une épée. ( Solution. Épée (epee.svg) )
  6. Une coccinelle. ( Solution. coccinelle.svg )
  7. Des dés. ( Solution. Dés (des.svg) )
  8. Un lapin rose. ( Solution. Lapin SVG (lapin-gabriel.svg) )
  9. Danger. ( Solution. Attention, danger (danger.svg) )
  10. Smiley. ( Solution. Smiley (smiley.svg) )
  11. Vrouumm. ( Solution. Vroum ! (vrouuum.svg) )
  12. Snoopy. ( Solution. Snoopy (snoopy.svg) )
  13. Un lapin marron. ( Solution. SVG : petit lapin marron ! (lapin-marron.svg) )

SVG, un peu plus loin (animations)

  1. Un pingouin. ( Solution. Un pingouin (pingouin.svg) )
  2. Un clown. ( Solution. Un clown (clown.svg) )
  3. Une maison. ( Solution. Une maison (maison.svg) )
  4. Mickey. ( Solution. Mickey (mickey.svg) )
  5. Un chat avec un chapeau. ( Solution. Chat et chapeau (chat-chapeau.svg) )

Si vous vous ennuyez vraiment...

  1. Une antenne. ( Solution. Fersehturm Berlin SVG (antenne.svg) )
  2. Hulk n'est pas content. ( Solution. HULK! (hulk.svg) )
  3. Rubik's cube. ( Solution. Rubik's cube (rubiks.svg) )
  4. Platine vinyle. ( Solution. Vinyle (vinyle.svg) )
Dernière modification : 20/4/2017
Dernière modification : 7/2/2017