Technologies Web JavaScript PhD. Wajdi GARALI INSAT 2010 Cette présentation donnera probablement...

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


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


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


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


Propriété des objets– Une propriété est un attribut, une

caractéristique, une description de l'objetwindow.document.bgColor ="blue"

W.GARALI 13


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


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

Technologies Web JavaScript PhD. Wajdi GARALI INSAT 2010 Cette présentation donnera probablement...

Documents

Transcript of Technologies Web JavaScript PhD. Wajdi GARALI INSAT 2010 Cette présentation donnera probablement...