HTML, CSS et Javascript
1 j'aime3,040 vues
Ce document présente une introduction au World Wide Web et à son fonctionnement, incluant les concepts de client-serveur et les langages utilisés comme HTML, CSS et JavaScript. Il détaille également des éléments techniques tels que les URL, les protocoles de communication, et les structures de documents HTML. Enfin, il aborde les techniques de formatage et l'insertion de divers éléments multimédias et interactifs dans des pages web.
HTML, CSS et Javascript
- 1. IN20 Informatique Séance 7 HTML, CSS et Javascript Sébastien Combéfis, Quentin Lurkin lundi 26 octobre 2015
- 2. Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International.
- 3. Rappels Manipulation de fichiers texte et binaire Ouverture et fermeture du fichier Lecture et écriture d’un fichier Gestion des erreurs d’entrée/sortie Encodage de l’information Encodage des caractères, standard Unicode Sérialisation avec le module pickle Stockage bas niveau avec le module struct 3
- 4. Objectifs Comprendre le World Wide Web (WWW) Identification des ressources avec des URLs Principe du client-serveur Couches principales de l’Internet Langages du web Création de documents avec HTML (HyperText Markup Language) Définition de styles avec CSS (Cascading Style Sheet) Aspect dynamique côté client avec Javascript 4
- 6. World Wide Web (WWW) Espace d’informations contenant des ressources Documents texte et autres ressources Ressources liées entre elles par des liens hypertextes Identification des ressources par des URLs Bref historique Inventé par Paul Otlet (visionnaire) en 1934 Inventé par Tim Berners-Lee en 1989 Premier navigateur web en 1990 avec l’aide de Robert Cailliau 6
- 7. Personnages clés Paul Otlet 1868–1944 (BE) Sir Tim Berners-Lee 1955– (UK) Robert Cailliau 1947– (BE) 7
- 8. Internet (1) Système composé d’un ensemble de réseaux interconnectés Relie des milliards de machines entre elles Lancé en Californie en 1969 (ARPANET) Premier échange d’un message électronique entre deux machines Premières connexions intercontinentales en 1988 (NORDUnet) Réseau d’échange de données pour cinq pays nordiques d’Europe Supporte de nombreuses ressources et services WWW, app, e-mail, téléphonie, partage de fichiers, jeu en ligne... 8
- 10. Client/Serveur Communication entre un client et un serveur 1 Le client se connecte au serveur 2 Le serveur accepte la connexion 3 Le client et le serveur communiquent 1 Le client envoie une requête au serveur 2 Le serveur analyse la requête et répond au client La connexion peut être fermée par le client ou le serveur Internet 10
- 11. Serveur web Serveur utilisé pour publier des sites web Communication avec ce serveur à l’aide du protocole HTTP Support d’autres protocoles pour offrir d’autres services Envoi d’e-mails, streaming, transfert de fichiers... Serveur web publics reliés à Internet Certains serveurs web sont privés et limités à un réseau local 11
- 12. Uniform Resource Locator (URL) Une URL référence une ressource web sur un réseau Localisation sur le réseau et mécanisme pour la récupérer Plusieurs mécanismes d’accès possibles http indique une page web ftp utilisé pour le transfert de fichier mailto permet l’envoi d’un e-mail jdbc permet d’accéder à une base de données ... 12
- 13. HyperText Transfer Protocol (HTTP) Protocole de communication de données pour le WWW Coordonné par l’Internet Engineering Task Force (ETF) et le Word Wide Web Consortium (W3C) Utilisation d’hyperliens entre des nœuds Permet de naviguer à travers le web Protocole de type requête-réponse Construit suivant une architecture client/serveur 13
- 14. HTML
- 15. HyperText Markup Language (HTML) Langage de balisage pour représenter des pages web Fichier texte permettant d’écrire de l’hypertexte Plusieurs autres roles Information sémantique par rapport au contenu Information de mise en forme du contenu Inclusion de ressources multimédia (image, formulaire...) 15
- 16. Historique HTML 2.0 (24 novembre 1995) Le W3C publie HTML 3.2 (14 janvier 1997) Le W3C reprend le travail sur HTML, arrête par l’IETF Trois variantes de HTML 4.0 (18 décembre 1997) HTML 4.0 strict, transitional et frameset HTML 5 publié comme recommandation W3C (28 octobre 2014) Modernisation de la version 4 avec support multimédia, des images SVG, du MathML... 16
- 17. Élement et balise Élément du document délimité par des balises Typiquement une balise ouvrante et une balise fermante Balise formée par le nom de l’élément entouré de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernière balise ouverte = première balise fermée 1 <h1 >Titre de premier niveau </h1 > 2 3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p> 17
- 18. Élement et balise Élément du document délimité par des balises Typiquement une balise ouvrante et une balise fermante Balise formée par le nom de l’élément entouré de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernière balise ouverte = première balise fermée 1 <h1 >Titre de premier niveau </h1 > 2 3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p> 17
- 19. Attribut Ajout d’attribut pour configurer l’élément Se placent dans la balise ouvrante Un attribut est composé d’une clé et d’une valeur Valeur entre guillemets doubles, et parfois optionnelle 1 <p title=" Information complémentaire ">Passez la souris sur ce paragraphe pour avoir des informations complémentaires .</p> 2 3 <p><a href="http :// www.google.be">Faire une recherche </a></p> 18
- 20. Attribut Ajout d’attribut pour configurer l’élément Se placent dans la balise ouvrante Un attribut est composé d’une clé et d’une valeur Valeur entre guillemets doubles, et parfois optionnelle 1 <p title=" Information complémentaire ">Passez la souris sur ce paragraphe pour avoir des informations complémentaires .</p> 2 3 <p><a href="http :// www.google.be">Faire une recherche </a></p> 18
- 21. Entête et corps Déclaration du type de document au début du fichier <!DOCTYPE html> pour l’HTML 5 Le document est déclaré avec l’élément html Entête du document (méta information) avec head Corps du document (contenu visible) avec body 1 <! DOCTYPE html > 2 3 <html > 4 <head > 5 <title >Tuyaux examen IN20 </ title > 6 </head > 7 <body > 8 <p>Un seul tuyau : comprendre la matière !</p> 9 </body > 10 </html > 19
- 22. Entête et corps Déclaration du type de document au début du fichier <!DOCTYPE html> pour l’HTML 5 Le document est déclaré avec l’élément html Entête du document (méta information) avec head Corps du document (contenu visible) avec body 1 <! DOCTYPE html > 2 3 <html > 4 <head > 5 <title >Tuyaux examen IN20 </ title > 6 </head > 7 <body > 8 <p>Un seul tuyau : comprendre la matière !</p> 9 </body > 10 </html > 19
- 23. Titre Plusieurs niveaux de titre (de 1 à 6) Au maximum un seul titre de niveau 1 par page Utilisation des éléments h1 à h6 1 <h1 >CU20 Cuisinologie </h1 > 2 3 <h2 >Chapitre 1 : Dépieauter la bête </h2 > 4 5 <p>Identifiez d’abord où est la peau ... </p> 6 7 <h2 >Chapitre 2 : Température optimale du four </h2 > 8 9 <p>Le gradient de température doit être Lipschitz continu ... </p> 20
- 24. Titre Plusieurs niveaux de titre (de 1 à 6) Au maximum un seul titre de niveau 1 par page Utilisation des éléments h1 à h6 1 <h1 >CU20 Cuisinologie </h1 > 2 3 <h2 >Chapitre 1 : Dépieauter la bête </h2 > 4 5 <p>Identifiez d’abord où est la peau ... </p> 6 7 <h2 >Chapitre 2 : Température optimale du four </h2 > 8 9 <p>Le gradient de température doit être Lipschitz continu ... </p> 20
- 25. Section et paragraphe Insertion d’une section avec l’élément section Possède un titre, plusieurs paragraphes et des sous-sections Paragraphe inséré grâce à l’élément p 1 <section > 2 <h1 >Série du mois </h1 > 3 4 <p>La série du mois est American Horror Story. Il y a déjà 5 saisons à cette série , pour un total de 54 épisodes .</p> 5 6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p> 7 </section > 21
- 26. Section et paragraphe Insertion d’une section avec l’élément section Possède un titre, plusieurs paragraphes et des sous-sections Paragraphe inséré grâce à l’élément p 1 <section > 2 <h1 >Série du mois </h1 > 3 4 <p>La série du mois est American Horror Story. Il y a déjà 5 saisons à cette série , pour un total de 54 épisodes .</p> 5 6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p> 7 </section > 21
- 27. Lien hypertexte Lien hypertexte vers une ressource avec l’élément a Lien typiquement identifié par une URL Attribut href pour spécifier la cible du lien Le texte du lien doit décrire la page liée Éviter des « ici », ou « cliquez ici », ou encore « ce lien »... 1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p> 22
- 28. Lien hypertexte Lien hypertexte vers une ressource avec l’élément a Lien typiquement identifié par une URL Attribut href pour spécifier la cible du lien Le texte du lien doit décrire la page liée Éviter des « ici », ou « cliquez ici », ou encore « ce lien »... 1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p> 22
- 29. Formatage (1) Formatage de base de texte dans un paragraphe Texte en gras avec l’élément b Texte important avec l’élément strong Texte en italique avec l’élément i Texte emphasé avec l’élément em Positionnement du texte dans le texte Texte en indice avec l’élément sub Texte en exposant avec l’élément sup 23
- 30. Formatage (2) 1 <p>Le <b>sel </b>, c’est un ion Na <sup >+</sup > et un Cl <sup >-</sup >.</p> 2 <p>Mais le seul <strong >n’est pas électrique </ strong >, encore heureux !</p> 3 <p>D’abord <sup >dessus </sup >, et puis <sub >dessous </sub >.</p> 24
- 31. Image Insertion d’une image avec l’élément img Chemin vers l’image identifié par une URL, ou en relatif Trois attributs pour configurer l’image Attribut src pour spécifier le chemin de l’image Attributs width et height pour les dimensions (pixels) Attribut alt pour un texte alternatif Balise orpheline, pas de balise fermante 1 <img src="wololo.png" alt="Wololo" width="480" height="360" /> 25
- 32. Image Insertion d’une image avec l’élément img Chemin vers l’image identifié par une URL, ou en relatif Trois attributs pour configurer l’image Attribut src pour spécifier le chemin de l’image Attributs width et height pour les dimensions (pixels) Attribut alt pour un texte alternatif Balise orpheline, pas de balise fermante 1 <img src="wololo.png" alt="Wololo" width="480" height="360" /> 25
- 33. Tableau Insertion d’un tableau avec l’élément table Un tableau est décrit par des lignes composées de cellules Lignes représentées par l’élément tr et cellule par td ou th 1 <table > 2 <tr > 3 <th >Nom </th > 4 <th >Prénom </th > 5 </tr > 6 <tr > 7 <td >Louis </td > 8 <td >Breyne </td > 9 </tr > 10 </table > 26
- 34. Tableau Insertion d’un tableau avec l’élément table Un tableau est décrit par des lignes composées de cellules Lignes représentées par l’élément tr et cellule par td ou th 1 <table > 2 <tr > 3 <th >Nom </th > 4 <th >Prénom </th > 5 </tr > 6 <tr > 7 <td >Louis </td > 8 <td >Breyne </td > 9 </tr > 10 </table > 26
- 35. Liste Insertion d’une liste numérotée ou non avec l’élément ul ou ol Chaque élément de la liste est inséré avec l’élément li Insertion d’une liste de définitions avec l’élément dl Mot inséré avec l’élément dt et définition avec dd 1 <p>Quand mon réveil sonne le matin ... </p> 2 <ol > 3 <li >Je le prolonge de 10 minutes </li > 4 <li >Quand il resonne , j’ouvre les yeux et j’attends un peu </li > 5 <li >Je me dis ensuite que je vais me lever </li > 6 <li >En fait non , je me rendors </li > 7 </ol > 27
- 36. Liste Insertion d’une liste numérotée ou non avec l’élément ul ou ol Chaque élément de la liste est inséré avec l’élément li Insertion d’une liste de définitions avec l’élément dl Mot inséré avec l’élément dt et définition avec dd 1 <p>Quand mon réveil sonne le matin ... </p> 2 <ol > 3 <li >Je le prolonge de 10 minutes </li > 4 <li >Quand il resonne , j’ouvre les yeux et j’attends un peu </li > 5 <li >Je me dis ensuite que je vais me lever </li > 6 <li >En fait non , je me rendors </li > 7 </ol > 27
- 37. Formulaire Insertion d’un formulaire avec l’élément form Le fomulaire se construit ensuite à l’aide de widgets Deux attributs pour configurer le formulaire Attribut method pour spécifier la méthode d’envoi Attribut action identifie la page de traitement 1 <form method="post" action="login.php"> 2 <p>Pseudo : <input type="text" name="pseudo" /></p> 3 <p>Mot de passe : <input type="password" name="password" /></p> 4 <p><input type="submit" value="Se connecter" /></p> 5 </form > 28
- 38. Formulaire Insertion d’un formulaire avec l’élément form Le fomulaire se construit ensuite à l’aide de widgets Deux attributs pour configurer le formulaire Attribut method pour spécifier la méthode d’envoi Attribut action identifie la page de traitement 1 <form method="post" action="login.php"> 2 <p>Pseudo : <input type="text" name="pseudo" /></p> 3 <p>Mot de passe : <input type="password" name="password" /></p> 4 <p><input type="submit" value="Se connecter" /></p> 5 </form > 28
- 39. Élement structurel Délimiter un bloc dans le document HTML Dans le texte avec l’élément span Et comme un bloc séparé du texte avec div Utilisé pour du style (CSS) ou du contenu dynamique (JS) 1 <div id=" moviedetail "> 2 <dl > 3 <dt >Information </dt > 4 <dd ><span id="movietitle" ></span > (<span id="movieyear" ></ span >) </dd > 5 </dl > 6 <dl > 7 <dt >Casting </dt > 8 <dd ><span id=" moviecasting " ></span ></dd > 9 </dl > 10 </div > 29
- 40. Élement structurel Délimiter un bloc dans le document HTML Dans le texte avec l’élément span Et comme un bloc séparé du texte avec div Utilisé pour du style (CSS) ou du contenu dynamique (JS) 1 <div id=" moviedetail "> 2 <dl > 3 <dt >Information </dt > 4 <dd ><span id="movietitle" ></span > (<span id="movieyear" ></ span >) </dd > 5 </dl > 6 <dl > 7 <dt >Casting </dt > 8 <dd ><span id=" moviecasting " ></span ></dd > 9 </dl > 10 </div > 29
- 41. CSS
- 42. Cascading Style Sheets (CSS) Langage de description de la présentation de documents Fichier texte décrivant des règles de mise en page Historique des différentes versions publiées CSS1 avec une cinquantaine de propriété (17 décembre 1996) Environ 70 nouvelles propriétés dans CSS2 (mai 1998) Découpe en 50 modules dans CSS 3 (premier draft en juin 1999) 31
- 43. Lien avec HTML Trois manières d’attacher des règles de style Directement avec l’attribut style sur un élément Avec l’élément style dans la partie head Dans un fichier séparé, avec l’extension .css Style depuis des fichiers externes avec l’élément link <link rel="stylesheet" href="mystyle.css" type="text/css" /> 32
- 44. Syntaxe Règle CSS composée de deux parties Le sélecteur définit le(s) élément(s) affecté(s) Le(s) déclaration(s) contiennent les règles Les règles s’appliquent en cascade aux éléments imbriqués Une déclaration se compose d’une propriété et d’une valeur 1 h1 { 2 color: red; 3 border: 1px solid blue; 4 } 5 6 p { 7 text - decoration : underline; 8 } 33
- 45. Syntaxe Règle CSS composée de deux parties Le sélecteur définit le(s) élément(s) affecté(s) Le(s) déclaration(s) contiennent les règles Les règles s’appliquent en cascade aux éléments imbriqués Une déclaration se compose d’une propriété et d’une valeur 1 h1 { 2 color: red; 3 border: 1px solid blue; 4 } 5 6 p { 7 text - decoration : underline; 8 } 33
- 46. Sélecteur Sélection directe d’un élément en mentionnant son nom h1 {...} Sélectionner un élément unique par son identifiant form#login {...} ou #login {...} Sélectionner tous les éléments d’une classe p.firstpara {...} ou .firstpara {...} Sélection multiple de plusieurs éléments h1, div.content, #submit {...} 34
- 47. Dimension Largeur et hauteur d’un élément avec width et height Ces propriétés forcent la taille de l’élément Tailles minimales et maximales avec min-width, max-width... Utiles lorsque l’utilisateur redimensionne la fenêtre Dimensions typiquement renseignées en pixels D’autres unités possibles comme l’em par exemple 35
- 48. Marges et padding On peut régler les marges sur les quatre côtés On a accès aux marges top, bottom, right et left On peut régler le padding également sur les quatre côtés Le padding correspond à la marge intérieure 1 div { 2 border: 1px solid; 3 margin -left: 50px; 4 padding -top: 20px; 5 padding -left: 50px; 6 width: 100 px; 7 } 36
- 49. Marges et padding On peut régler les marges sur les quatre côtés On a accès aux marges top, bottom, right et left On peut régler le padding également sur les quatre côtés Le padding correspond à la marge intérieure 1 div { 2 border: 1px solid; 3 margin -left: 50px; 4 padding -top: 20px; 5 padding -left: 50px; 6 width: 100 px; 7 } 36
- 50. Pseudo-classe Une pseudo-classe fait référence à un état d’un élément Par exemple un lien déjà visité, le premier fils... Quelques exemples :hover pour la souris par dessus un lien :first-child pour le premier élément du type uniquement 1 tr:first -child { 2 background -color: #999; 3 } 4 tr:nth -of -type (2n) { 5 background -color: green; 6 } 37
- 51. Pseudo-classe Une pseudo-classe fait référence à un état d’un élément Par exemple un lien déjà visité, le premier fils... Quelques exemples :hover pour la souris par dessus un lien :first-child pour le premier élément du type uniquement 1 tr:first -child { 2 background -color: #999; 3 } 4 tr:nth -of -type (2n) { 5 background -color: green; 6 } 37
- 52. Pseudo-élément Un pseudo-élément fait référence à une partie d’un élément Par exemple la première lettre, ligne... Quelques exemples ::first-letter pour la première lettre ::selection pour la partie sélectionnée 1 p:: first -letter { 2 margin -top: -3px; 3 font -size: 30pt; 4 font -weight: bold; 5 float: left; 6 } 7 p:: selection { 8 background -color: magenta; 9 } 38
- 53. Pseudo-élément Un pseudo-élément fait référence à une partie d’un élément Par exemple la première lettre, ligne... Quelques exemples ::first-letter pour la première lettre ::selection pour la partie sélectionnée 1 p:: first -letter { 2 margin -top: -3px; 3 font -size: 30pt; 4 font -weight: bold; 5 float: left; 6 } 7 p:: selection { 8 background -color: magenta; 9 } 38
- 54. JavaScript
- 55. JavaScript (JS) Langage de script de haut niveau, non typé et interprété Le JavaScript est exécuté côté client, par le browser Langage orientée objet à prototype Bref historique des différentes versions Créé en 1995 par Brendan Eich (pour le compte de Netscape) Adoption d’un standard ECMAScript en juin 1997 Troisième version d’ECMAScript en 1999 (JavaScript 1.5) 40
- 56. Lien avec HTML Deux manières d’attacher du code JavaScript Avec l’élément script Dans un fichier séparé, avec l’extension .js Code depuis des fichiers externes avec l’élément script <script src="myscript.js" type="text/javascript"></script> 41
- 57. Affichage Programme qui affiche un message de bienvenue Code exécuté au moment où celui-ci est chargé par le navigateur Inclusion du script à l’endroit où on souhaite l’exécuter 1 window.alert(’Hello Marcin!’); 1 <p>Bienvenue sur ce site !</p> 2 3 <script src="helloworld.js" type="text/javascript" ></script > 42
- 58. Affichage Programme qui affiche un message de bienvenue Code exécuté au moment où celui-ci est chargé par le navigateur Inclusion du script à l’endroit où on souhaite l’exécuter 1 window.alert(’Hello Marcin!’); 1 <p>Bienvenue sur ce site !</p> 2 3 <script src="helloworld.js" type="text/javascript" ></script > 42
- 59. Variable et opérations Déclaration d’une variable avec le mot réservé var Les variables possèdent un type dynamique Données de type nombre entier, flottant, booléen... Une variable peut changer de type en cours d’exécution 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 window.alert(succeeded); // Affiche false 7 window.alert(’Moyenne de ’ + mean); // Affiche Moyenne de 37.5 43
- 60. Instruction if-else if-else Exécution conditionnelle de blocs avec if-else if-else Un bloc de code est délimité avec des accolades Blocs else if et bloc else optionnels 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 if (succeeded) { 7 window.alert(’Réussi avec une moyenne de ’ + mean + ’%’); 8 } else { 9 window.alert(’Dommage , raté :-(’); 10 } 44
- 61. Modification de la page On peut accéder aux éléments de la page pour les modifier Avec la fonction document.getElementById On modifie ensuite le contenu avec la propriété innerHTML 1 <p>Bienvenue sur ce site !</p> 2 <p id="result" ></p> 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 var p = document . getElementById (’result ’); 7 if (succeeded) { 8 p.innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’; 9 } else { 10 p.innerHTML = ’Dommage , raté :-(’; 11 } 45
- 62. Modification de la page On peut accéder aux éléments de la page pour les modifier Avec la fonction document.getElementById On modifie ensuite le contenu avec la propriété innerHTML 1 <p>Bienvenue sur ce site !</p> 2 <p id="result" ></p> 1 var max = 20; 2 var score = 7.5; 3 var succeeded = score >= 10; 4 var mean = score / max * 100; 5 6 var p = document . getElementById (’result ’); 7 if (succeeded) { 8 p.innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’; 9 } else { 10 p.innerHTML = ’Dommage , raté :-(’; 11 } 45
- 63. Instruction while Répéter un bloc tant qu’une condition est vraie avec while Attention aux boucles infinies si la condition est toujours vraie Construction du résultat avec une chaine de caractères Génération de contenu HTML depuis le JavaScript 1 var result = ’’; 2 var i = 1; 3 4 while (i <= 10) { 5 result += i + ’ x 2 = <b>’ + (i * 2) + ’</b><br />’; 6 i += 1; 7 } 8 document . getElementById (’result ’).innerHTML = result; 46
- 64. Instruction while Répéter un bloc tant qu’une condition est vraie avec while Attention aux boucles infinies si la condition est toujours vraie Construction du résultat avec une chaine de caractères Génération de contenu HTML depuis le JavaScript 1 var result = ’’; 2 var i = 1; 3 4 while (i <= 10) { 5 result += i + ’ x 2 = <b>’ + (i * 2) + ’</b><br />’; 6 i += 1; 7 } 8 document . getElementById (’result ’).innerHTML = result; 46
- 65. Réaction à un évènement Association d’une action à un élément (une fonction) Par exemple, l’évènement onclick 1 <a id="dontclick">Ne me cliquez pas !</p> 1 var cnt = 0; 2 link = document . getElementById (’dontclick ’); 3 link.onclick = function () { 4 cnt += 1; 5 window.alert("Pas cliquer que c’était mis ... (déjà " + cnt + " clics)"); 6 } 47
- 66. Réaction à un évènement Association d’une action à un élément (une fonction) Par exemple, l’évènement onclick 1 <a id="dontclick">Ne me cliquez pas !</p> 1 var cnt = 0; 2 link = document . getElementById (’dontclick ’); 3 link.onclick = function () { 4 cnt += 1; 5 window.alert("Pas cliquer que c’était mis ... (déjà " + cnt + " clics)"); 6 } 47