Post on 04-Apr-2015
Technologies Web
JavaScriptPhD. Wajdi GARALI
INSAT 2010
W.GARALI 2
IntroductionLes programmes Javascript permettent de
rendre dynamique une page WebContrairement à 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 3
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 4
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 5
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 6
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 7
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'>
</SCRIPT>
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 8
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 9
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 10
Javascript (Structure)
W.GARALI 11
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 12
Javascript (Structure)
Propriété des objets– Une propriété est un attribut, une
caractéristique, une description de l'objetwindow.document.bgColor ="blue"
W.GARALI 13
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 14
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 15
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 16
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 17
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 18
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 19
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 20
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 21
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