Javascript et DOM Introduction Nicolas Chourot Informatique Collège Lionel
Javascript? Langage de programmation allégé Langage interprété par les fureteurs S’intègre dans le HTML Offre l’accès en lecture et en écriture au DOM Ajoute de l’interactivité aux pages web Personnalisation des pages web Validation de formulaires Aucune license exigée pour l’utiliser Base pour AJAX et JQUERY http://www.tutorialspoint.com/javascript/javascript_objects.htm http://fr.scribd.com/doc/19457597/Javascript-Methods
JavaScript, où? Dans l’entête de la page Directement dans le code HTML <head> … <script type="text/javascript"> … fonctions javascript … </script> … </head> Directement dans le code HTML <body> … … appel de fonction javascript … </body> Dans un attribut d’une balise <a href="#" onMouseOver="… appel de fonction javascript …" /> Fichier externe <script type="text/javascript" src ="fichier_de_fonctions_javascript.js">
Fonction document.write(…) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body > <script type="text/javascript"> document.write("<h1>Hello world!</h1>"); </script> </body> </html> <h1>Javascript is fun</h1>
Fonction document.write(…) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> function Message(message) { document.write("<h1>" + message + </h1>"); } </script> </head> <body > <h1>Javascript is fun</h1> Message("Hello world!"); </body> </html>
Source HTML et DOM
Boucles en javascript…
Gestionnaire d’événement de souris OnMouseDown OnMouseUp OnClick OnDblClick http://www.w3schools.com/jsref/dom_obj_event.asp
Gestionnaire d’événement de souris OnMouseMove OnMouseOver OnMouseOut Zone Zone
Démonstration
Liste des gestionnaires d’événement HTML
Lecture CSS via Javascript
Interactivité avec Javascript…
Ajout d’ID programmé et de gestionnaire d’événement
Écriture dynamique du CSS
Propriétés et références dont le nom diverge http://www.journaldunet.com/developpeur/tutoriel/dht/050204-javascript-references-css-proprietes-conversion.shtml
Propriétés et références dont le nom diverge (suite)
Formulaire… <body > <form> <table> <th colspan="2"> <div> Login info... </div></th> <tr> <td>Username: </td><td> <input type="text" id="username"/> </td> <tr> <td>Password: </td><td> <input type="password" id="password"/> </td> </tr> <tr> <td colspan="2"> <button type="button"> Login...</button> </td> </tr> </table> </form> </body>
Avec un peu de style… <style> input { background-color:rgba(255,255,255,0.3); width:130px; font-size:16px; } table tr { background-color:lightblue; font-family:Arial; td:first-child { text-align:right; width:80px; padding:5px; button { margin-right:5px; margin-bottom:5px; table { border:1px solid black; width:240px; border-collapse:collapse; th { height:30px; </style>
Récupérer localement l’information… <script type="text/javascript"> function Show_Login_Info() { username = document.getElementById("username"); password = document.getElementById("password"); alert( "Login info...\n" + "Username = " + username.value + "\n" + "Password = " + password.value ); } </script> <body > <form> <table> <th colspan="2"> <div> Login info... </div></th> <tr> <td>Username: </td><td> <input type="text" id="username"/> </td> <tr> <td>Password: </td><td> <input type="password" id="password"/> </td> </tr> <tr> <td colspan="2"> <button type="button" onclick="Show_Login_Info();"> Login...</button> </td> </tr> </table> </form> </body>