Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Javascript et DOM Introduction Nicolas Chourot Informatique
Collège Lionel
2
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
4
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">
5
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>
6
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>
7
Source HTML et DOM
8
Boucles en javascript…
9
Gestionnaire d’événement de souris
OnMouseDown OnMouseUp OnClick OnDblClick
10
Gestionnaire d’événement de souris
OnMouseMove OnMouseOver OnMouseOut Zone Zone
11
Démonstration
12
Liste des gestionnaires d’événement HTML
13
Lecture CSS via Javascript
15
Interactivité avec Javascript…
16
Ajout d’ID programmé et de gestionnaire d’événement
17
Écriture dynamique du CSS
18
Propriétés et références dont le nom diverge
19
Propriétés et références dont le nom diverge (suite)
20
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>
21
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>
22
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>
Présentations similaires
