docSéance 3 Javascript/DHTML
download 
Plainte Transcription
Séance 3 Javascript/DHTML
Séance 3 Javascript/DHTML Informatique M2 Nils Schaefer ([email protected]) Nils Schaefer Informatique M2 Langage Javascript ● Vrai langage de programmation – Exécution côté client ● Apporter du dynamisme aux pages HTML ● Syntaxe générale similaire au C/C++, Java ● Dans le fond, rien à voir avec Java ● Prise en compte de la casse ● Utilisé sur la grande majorité des sites Web ● Meilleure compatibilité entre les navigateurs qu'il y a quelques années x/x Nils Schaefer Informatique M2 Variables ● Typage dynamique des variables ● Déclaration facultative : var i; ● Types de base – Nombres entiers – Nombres réels – Booléens (true et false) – Chaînes de caractères – Tableaux ● ● Exemple : var tab=new Array(); Longueur d'un tableau : tab.length x/x Nils Schaefer Informatique M2 Expressions ● Possède une valeur ● Utilisation des parenthèses ( ) ● Opérateurs numériques : + - * / % – ● Opérateurs booléens : == != && || < <= >= > – ● Exemple : (5 + 8) * 9 - i Exemple : 5 * i > 10 && 10 – i == 2 Opérateur de concaténation : + – Exemple : "bonjour" + "tout" + "le" + "monde" x/x Nils Schaefer Informatique M2 Instructions ● Réalise une action ● Affectation : = += -= *= /= – Exemple : i = (7 * (j + 3)) /2 ● Bloc d'instructions { ... } ● Structure conditionnelle – if(test) { ... } else { ... } x/x Nils Schaefer Informatique M2 Instructions de boucle ● Boucle « Pour » – ● Boucle « Tant que » – ● Exemple : for(i=0 ; i<10 ; i++) { … } Exemple : while(i>10) { ... } Boucle « Faire tant que » – Exemple : do { ... } while(i>10) ; ● continue : passe à l'itération suivante ● break : sort de la boucle x/x Nils Schaefer Informatique M2 Interactions avec l'utilisateur ● fonction alert : message dans une fenêtre – ● alert('Bienvenue sur le site'); fonction prompt : récupérer une données en provenance de l'utilisateur – d=prompt('Quel est votre nom ?','Je ne sais pas !!!'); – d contient le texte saisi x/x Nils Schaefer Informatique M2 Fonctions ● ● Sous programme – Similaire à la notion de fonction en mathématiques – Retourne une valeur (vaut quelque chose) Exemple – function somme(n) { s=0; for(i=1;i<=n;i++) { s=s+i; } return s; } Nils Schaefer x/x Informatique M2 Procédures ● Sous programme – ● Fait quelque chose Exemple – function affiche_double(n) { alert(2*n) ; } x/x Nils Schaefer Informatique M2 Interactions entre HTML et Javascript ● Balises <SCRIPT> ... </SCRIPT> – Type : identification du langage de script utilisé ● – Language : similaire à Type (déprécié) ● – ● ● Exemple : text/javascript Exemple : Javascript Src : désignation d'un fichier de code externe Le code Javascript est placé à l'intérieur des balises Localisation – En-tête : <HEAD> ... </HEAD> – Corps : <BODY> ... </BODY> Nils Schaefer Informatique M2 x/x Programmation événementielle ● Réaction de la page HTML à des événements de l'utilisateur – Survol avec la souris – Clic à un endroit – ... ● Code Javascript situé directement dans du HTML ● Exécution de code Javascript – Généralement une fonction x/x Nils Schaefer Informatique M2 Evénements ● onClick : événement de clic – ● onMouseOver : événement de survol – ● <INPUT Type=text onChange="alert('Modif');"> ... onLoad : chargement de la page – ● <DIV ... onMouseOver="alert('Bonjour');"> ... </DIV> onChange : modification – ● <DIV ... onClick="alert('Bonjour');"> ... </DIV> <BODY onLoad="alert('Bienvenue');"> ... ... x/x Nils Schaefer Informatique M2 Réaction à un événement ● ● Le code Javascript doit être placé entre les " " Même s'il est possible de placer tout le code Javascript souhaité pour réaliser l'action on passe plutôt par l'utilisation d'une procédure. <script type="text/javascript"> function ActionA() { // Code à exécuter lors du clic sur le div } </script> <div onclick="ActionA() ;">Mon beau div</div> Nils Schaefer Informatique M2 x/x Accès à un élément ● ● Chaque élément de la page HTML est accessible – Plusieurs méthodes – En fonction de l'objectif Utilisation de la structure du document – ● Utilisation de l'identifiant d'une balise – ● Parcours du document comme un arbre (XHTML) Plus direct et plus simple Fonction getElementById de l'objet document – Ex (partie HTML) : <p id="MonP"> … </p> – Ex (partie JS) : document.getElementById('MonP') x/x ● Nils Schaefer Informatique M2 Cas d'un élément de formulaire ● Propriété value pour accéder au contenu du champ ● Exemple (Partie HTML) <FORM action=script.php> Nom : <INPUT Type=text Name=nom id=c1><BR> … </FORM> ● Exemple (Partie Javascript) // Récupère le contenu du champ dans la variable a a=document.getElementById('c1').value ; // Affiche dans le champ le contenu de la variable a document.getElementById('c1').value=a ; Nils Schaefer Informatique M2 x/x Données d'une balise ● Les données (tout le contenu) d'une balise sont accessibles en Javascript ● Propriété innerHTML ● Exemple (Partie HTML) <h1 id=t1>Mon titre de <u>niveau 1</u></h1> ● Exemple (Partie Javascript) // Récupérer les données de la balise dans a a=document.getElementById('t1').innerHTML; // Remplacer les données de la balise par a document.getElementById('t1').innerHTML=a; x/x Nils Schaefer Informatique M2 Style d'une balise ● Les styles peuvent être manipulés en Javascript – ● Juste une remarque le - n'est pas utilisable car il représente la soustraction donc on le retire et on met en majuscule le caractère suivant – ● Propriété style Ex : background-color devient backgroundColor Exemple (Partie HTML) <h1 id=t1>Mon titre</h1> ● Exemple (Partie Javascript) document.getElementById('t1').style.color='red'; x/x Nils Schaefer Informatique M2 Objets du navigateur ● Plusieurs objets – Navigator : navigateur lui-même – Window : la fenêtre qui contient la page HTML – Frame : le cadre qui contient la page HTML – History : l'historique de la consultation – Document : la page HTML – Les liens hypertextes – Les ancres – Les formulaires – Les images x/x Nils Schaefer Informatique M2
