![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/video-camera-icon-e1569660652387.png\"){kind=icon}
<\/figure>\n\n\n\nCette premi\u00e8re activit\u00e9 nous montre bien la s\u00e9paration entre le contenu qui est g\u00e9r\u00e9 par le code HTML et le style par le code CSS.<\/p>\n\n\n\n HTML<\/strong> : H<\/strong>yperT<\/strong>ext M<\/strong>arkupL<\/strong>angage <\/p>\n\n\n\n Une page web est un type de document. HTML est un langage de description des pages web bas\u00e9 sur des balises destin\u00e9es au navigateur.<\/p>\n\n\n\n CSS<\/strong> : C<\/strong>ascading S<\/strong>tyle S<\/strong>heet (feuille de style)<\/p>\n\n\n\n Au langage HTML on associe le langage CSS pour la mise en forme.<\/p>\n\n\n\n DOM<\/strong> : D<\/strong>ocument O<\/strong>bject M<\/strong>odel ou DOM<\/p>\n\n\n\n Le DOM est un arbre cr\u00e9\u00e9 par le navigateur pour repr\u00e9senter la page.La racine de l’arbre est <html><\/p>\n\n\n 2)Javascript : un langage de programmation pour les pages web<\/strong><\/p>\n\n\n\n Dans cette seconde activit\u00e9 nous avons vu comment manipuler un document hml en javascript gr\u00e2ce \u00e0 des identifiants attribu\u00e9s aux balises.La m\u00e9thode JavaScript getElementById() nous a permis de r\u00e9cup\u00e9rer les informations d’une balise identifi\u00e9e par son id pour effectuer des modifications.<\/p>\n\n\n\n Si vous souhaitez aller plus loin :cliquez ici<\/a><\/p>\n\n\n\n C’est le DOM qui permet au script d’examiner et de modifier le contenu affich\u00e9 par le navigateur web. <\/p>\n\n\n\n Vous avez ci-dessous une repr\u00e9sentation du DOM de la page de l’activit\u00e9 2. <\/p>\n\n\n\n En 1995 Brendan Eich cr\u00e9e le langage javascript. Aujourd’hui, presque toutes les pages Web contiennent du code JavaScript. JavaScript est un langage de programmation associ\u00e9 au langage HTML.<\/p>\n\n\n\n Le d\u00e9veloppeur internet code ses pages HTML en y int\u00e9grant des sources JavaScript. Le visiteur, par l’interm\u00e9diaire de son navigateur, charge le code des pages. <\/p>\n\n\n\n C’est le navigateur (cot\u00e9 client) qui interpr\u00e8te les codes HTML et JavaScript. <\/p>\n\n\n\n JavaScript est un langage objet et \u00e9v\u00e9nementiel. Le d\u00e9veloppeur peut cr\u00e9er des objets sur la page, avec des propri\u00e9t\u00e9s et des m\u00e9thodes et leur associer des actions en fonction d’\u00e9v\u00e9nements d\u00e9clench\u00e9s par le visiteur (passage de souris, clic, saisie clavier, etc…) <\/p>\n\n\n 3)Exemples d’interactions avec l’utilisateur<\/strong><\/p>\n\n\n\n Dans ce qui suit nous allons simplement survoler ce langage. Pour vous aider vous pourrez trouvez toutes les r\u00e9f\u00e9rences dont vous avez besoin sur w3school : cliquer ici<\/a> <\/p>\n\n\n\n Vous devez prendre des notes au cours de la s\u00e9ance pour pouvoir produire une fiche papier (langage javascript ) qui sera relev\u00e9e.<\/p>\n\n\n\n 3-1)Gestion d’un clic de souris<\/strong><\/p>\n\n\n\n![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/retenir-e1569656528481.jpg\")
<\/figure>\n\n\n\n
\n\n\n![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/activite.png\")
Activit\u00e9 2 :html + javascript<\/strong>\n\nPour ajouter du code javascript dans une page html il suffit d’\u00e9crire le code entre deux balises:\n\n<script>…..<\/script><\/strong>\n\nPar la suite on placera le code javascript dans un fichier s\u00e9par\u00e9.\n\n \t
\n\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>tjs003<\/title>\t\n <\/head>\n <body>\n <h3 id=\"date\"><\/h3>\n <h4 id=\"TITRE\" ><\/h4>\n <p id=\"texte\"><\/p>\n \n <\/body>\n <script >\n var jour = new Date();\n document.getElementById(\"date\").innerHTML = jour;\n document.getElementById(\"TITRE\").innerHTML=\"BONJOUR !\";\t\t\t\n document.getElementById(\"texte\").style.color = \"#FF00AF\";\n document.getElementById(\"texte\").innerHTML=\"Hello World !\";\n <\/script>\t\t\n\n<\/html><\/pre>\n \n\nCliquez ici pour ouvrir la page distante<\/a>\n\npour tester des exemples en ligne: https:\/\/www.w3schools.com\/js\/js_htmldom_elements.asp<\/a>\n\n \n\n \n\n\n\n
![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/11\/domjshtml.png\")
<\/figure>\n\n\n\n<\/figure>\n\n\n
\n\n\n![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/images.jpg\")
<\/figure><\/div>\n\n\n\n
\n\n\nActivit\u00e9 3 : Un bouton pour interagir<\/strong>\n\n
\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>tjs004<\/title>\t\n <\/head>\n<body>\n\n<p>Cliquez sur le bouton pour enregistrer votre pseudo<\/p>\n\n<button onclick=\"myFunction()\">Cliquez<\/button>\n\n<p id=\"test\"><\/p>\n\n<script>\nfunction myFunction() {\n var nom = prompt(\"Entrez votre nom\",\"pseudo\");\n document.getElementById(\"test\").innerHTML =\n \"Bonjour \" + nom;\n }\n\n<\/script>\n\n<\/body>\n<\/html><\/pre>\nboutons : https:\/\/www.w3schools.com\/js\/js_variables.asp<\/a>\n\nvariables :https:\/\/www.w3schools.com\/tags\/tag_button.asp<\/a>\n\nprompt() : https:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp<\/a>\n\n \n\nComprendre puis modifier le programme en modifiant l’\u00e9v\u00e9nement d\u00e9clencheur de l’interaction avec l’utilisateur.\n\nVous trouverez d’autres \u00e9v\u00e9nements HTML ici<\/a>\n\nLe m\u00eame programme se trouve sur un serveur web distant :\n\nCliquez ici<\/a>\n\n![\"\"](\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/dom4.png\")
\n\n \n\n\n\n