JavaScript PhD. Wajdi GARALI INSAT 2010 Cette présentation donnera probablement lieu à des discussions d'où ressortiront des propositions d'action. Utilisez PowerPoint pour noter ces actions au cours de la présentation. En mode Diaporama, cliquez avec le bouton droit de la souris. Cliquez sur Aide-mémoire. Cliquez sur l'onglet Liste d'actions. Tapez les actions à mesure qu'elles sont proposées. Cliquez sur OK pour fermer la boîte de dialogue. Une diapositive Liste d'actions sera automatiquement créée à la fin de votre présentation. Technologies Web JavaScript PhD. Wajdi GARALI INSAT 2010
Introduction Les programmes Javascript permettent de rendre dynamique une page Web Contrairement à une applet Java qui est un programme compilé, les scripts écrits en Javascript sont interprétés Le Javascript est un langage de script simplifié orienté objet Le Java, représenté par un ou plusieurs fichiers autonomes dont l'extension sera *.class ou *.jar, alors que le JavaScript est écrit directement au sein du document HTML sous forme d'un script encadré par des balises HTML spéciales. W.GARALI
Introduction Le langage JavaScript a été initialement élaboré par Netscape en association avec Sun Microsystem. Plus tard, Microsoft développera son propre langage Javascript: JScript. Tout comme, le language HTML, le Javascript est standardisé par un comité spécialisé, en l'occurrence l'ECMA (European Computer Manufactures Association). W.GARALI
Javascript (Présentation) La balise <SCRIPT> <SCRIPT LANGUAGE="Javascript"> </SCRIPT> Association d'une procédure à un événement: l'usage de la balise script n'est pas toujours obligatoire. C’est le cas des événements Javascript (par exemple onClick) où il faut simplement insérer le code à l'intérieur de la commande Html comme un attribut de celle-ci. L'événement fera appel à la fonction Javascript lorsque la commande Html sera activée. Exemple: <INPUT type=button value="Cliquez ici" onclick="traiteClic();"> W.GARALI
Javascript (Présentation) Liste non exhaustive des évenements onclick Clic souris (équivaut à onmousedown + onmouseup). ondblclick Double clic souris. onmousedown Bouton souris enfoncé. onmouseup Bouton souris relaché. onmouseover Objet survolé par souris. onmouseout Fin de survol objet par souris. onmousemove Déplacement souris. onkeydown Touche du clavier enfoncée. onkeyup Touche du clavier relachée. onload Document ouvert et entièrement chargé. onunload Document en instance de fermeture. W.GARALI
Javascript (Présentation) Où inclure le code dans la page HTML? Pas de place spécifique. Le navigateur traite la page HTML de haut en bas, par conséquent toute instruction ne pourra être exécutée que si le navigateur possède à ce moment précis tous les éléments nécessaires à son exécution. Prendre l'habitude de déclarer systématiquement (lorsque cela sera possible) un maximum d'éléments dans les balises d'en-tête W.GARALI
Javascript (Présentation) Extension .js pour scripts externes <SCRIPT LANGUAGE='javascript‘ SRC='http://site.com/javascript.js'> </SCRIPT> <SCRIPT LANGUAGE='javascript‘ SRC=‘scripts/calendrier.js'> Les scripts sont stockés dans des fichiers distincts (avec l'extension .js) et ils sont appelés à partir d'un fichier HTML. Les instructions sont écrites telle quelles, la balise SCRIPT n’est pas autorisée dans le fichier source W.GARALI
Javascript (Présentation) Première instruction Javascript Utilisation de alert("votre texte"); Cette instruction affiche le message « votre texte » dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer ce bouton. <html> <body> <script LANGUAGE='javascript'> alert ("MessageBox"); </script> </body> </html> W.GARALI
Javascript (Présentation) Remarques: Les points-virgules à la fin de chaque instruction Javascript: obligatoire que si on a plusieurs instruction sur une ligne. Recommandés. Javascript est case sensitive. Ainsi il faudra écrire alert() et non Alert(). Les caractères accentués comme é ou à ne peuvent être employés que dans les chaînes de caractères c.-à-d. dans votre texte de notre exemple. Guillemets " ou l'apostrophe ' sont interprétés par le compilateur à condition de ne pas les mélanger. Ainsi alert("...') cause une erreur. Pour utiliser des guillemets dans vos chaînes de caractères, tapez \" ou \' pour les différencier vis à vis du compilateur. W.GARALI
Javascript (Structure) W.GARALI
Javascript (Structure) Nommage des objets Si les objets ont été pourvu d ’un nom (attribut name) ils peuvent être nommés directement par ce nom document.MonFormulaire.BoutonEnvoi Dans le cas inverse il peuvent être nommés par le nom générique indicé document.form[2].button[4] W.GARALI
Javascript (Structure) Propriété des objets Une propriété est un attribut, une caractéristique, une description de l'objet window.document.bgColor ="blue" W.GARALI
Javascript (Structure) Méthode A chaque objet est associé un ensemble de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. window.document.write("Hello"); W.GARALI
Javascript (Structure) Méthode de l’objet document Afficher du texte: Pour appeler la méthode write() du document document.write(); Pour associer du texte (chaînes de caractères) et des variables, on utilise l'instruction write("Le résultat est " + resultat); On peut utiliser les balises HTML pour agrémenter ce texte: write("<B>Le résultat est</B>" + resultat); ou write ("<B>" + "Le résultat est " + "</B>" + resultat) W.GARALI
Javascript (Structure) Les nombres décimaux doivent être séparés par un point (.) comme le montre ces exemples : var PI = 3.141592654; var prix = 2.50; En ce qui concerne la casse, le langage Javascript y est extrêmement sensible var START = "début"; var Start = "un"; var start = "Un"; var start = 0; W.GARALI
Javascript (Structure) Le langage Javascript reconnaît plusieurs types de valeurs : Les nombres entiers ou à virgule flottante comme "42" ou "3.14159". Les valeurs logiques (Booléen), true (vrai) et false (faux). Les caractères comme 'a', '5' '.', etc.. Les chaînes de caractères comme "Bonjour !". Null, un mot-clé spécial symbolisant une valeur nulle; le null est aussi une valeur primitive. Parce que JavaScript est sensible à la casse, null n'est pas le même comme le Null, le NULL, ou une autre variante. W.GARALI
Javascript (Variables) Dans le langage Javascript, les variables peuvent être globales ou locales. Une variable globale est déclarée en début de script et est accessible à n'importe quel endroit du programme. Une variable locale est déclarée à l'intérieur d'une fonction et n'est utilisable que dans la fonction elle-même. var int = 0 //Variable globale. function nomFonction () { var i = 1; //Variable locale. ... } W.GARALI
Javascript (Variables) Le mot-clé var permet de déclarer une ou plusieurs variables. Après la déclaration de la variable, il est possible de lui affecter une valeur par l'intermédiaire du signe d'égalité (=). //Déclaration de i, de j et de k. var i, j, k; //Déclaration et affectation de caractere var caractere = ["a", "b", "c"]; W.GARALI
Javascript (Variables) variable.big(); Les quatre instructions Javascript suivantes sont équivalentes : str="Something"; //str est une variable document.write("<BIG>"+str+"</BIG>"); document.write('<BIG>Something</BIG>'); document.write(str.big()); document.write("Something".big()); variable.small(); variable.blink(); variable.bold(); variable.italics(); W.GARALI
Javascript (Variables) variable.fontcolor(color); L'emploi de .fontcolor(color) affichera la variable comme si elle était comprise entre les balises HTML <FONT COLOR="color"> </FONT>. Les quatre instructions Javascript suivantes sont équivalentes : str1="Some words"; str2="red"; document.write("<FONT COLOR='red'>" +str1+"</FONT>"); document.write("<FONT COLOR='red'>"+"Something</FONT>"); document.write(str1.fontcolor(str2)); document.write(str1.fontcolor("red")); W.GARALI
Travail demandé Dossier sur les fonctions prédéfinie en javascript (Windows. , alert(), etc.) Appel de la fonction, arguments, retour Utilisation Imprimé écran du résultat (si possible) Exercices recommandés : http://infospace.discutforum.com/t226-exercices-javascript W.GARALI