Cour Java Script

JavaScript
05/02/12
COUR FAIT PAR BOUAFIA REHABI
Histoire de Javascript
Le langage JavaScript a t cr en 1995 par Brendan Eich pour le compte de la Netscape Communications Corporation En mars 1996, Netscape met en oeuvre le moteur JavaScript dans son navigateur Web Netscape Navigator 2.0. Microsoft ragit alors en dveloppant JScript, qu'il inclut ensuite dans Internet Explorer 3.0 en aot 1996 pour la sortie de son navigateur. Netscape soumet alors JavaScript Ecma International pour standardisation Enfin, l'organisme ECMA, (European Computer Manufactures Association). dcide de crer une norme du noyau de ces langages qui serait accepte par tous .
05/02/12 COUR FAIT PAR BOUAFIA REHABI 2
JavaScript est un langage de programmation de scripts orient objet dont la syntaxe est base sur celle du Java ,C et C++. IL est principalement utilis dans les pages web interactives Les programmes Javascript permettent de rendre dynamique un site internet dvelopp par le langage HTML. Du code JavaScript peut tre intgr directement au sein des pages Web, pour y tre excut sur le poste client. C'est alors le navigateur Web qui prend en charge l'excution de ces programmes appels scripts. Gnralement, JavaScript sert contrler les donnes saisies dans des formulaires HTML, ou interagir avec le document HTML via l'interface Document Object Model, fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML).
Caractristiques de javaScript
Ses principales caractristiques sont : JavaScript est un langage de programmation structure qui concourt enrichir le HTML. Le code JavaScript est intgr compltement dans le code HTML, et interprt par le navigateur client (qui reoit la page). La possibilit d'inclure des programmes dans les pages HTML et de les excuter directement sur le poste client , car elle permet dcharger le serveur de ce travail et ... d'viter les attentes des rponses aux requtes adresses via le Rseau. Il ne peut pas tre excut indpendamment, ce qui le limite comme langage de programmation. javaScript contient des gestionnaires d'vnements : il reconnat et ragit aux demandes de l'utilisateur, comme un clic de la souris, une validation de formulaire, etc... javaScript est diffrent de Java qui est un langage compltement autonome du langage HTML
HTML et JavaScript
la page HTML devra TOUJOURS contenir les deux balises spcifiques et indispensables
<script language="JavaScript"> ............ </script>
Le code JavaScript sintgre de deux manire avec le code HTML

1. Insertion directe dans le code HTML
Le code JavaScript s'insre le plus souvent dans la page HTML elle mme.
C'est la mthode la plus simple et la plus frquemment utilise par les dveloppeurs de sites Internet.
2. Insertion comme un module externe

1. Insertion dans une page HTML

Il existe 2 manires d'insrer du code JavaScript dans une page HTML
1.1 Insertion pour excution directe

<html> Le code s'excute automatiquement <head> lors du chargement de la page HTML <title>..... dans le navigateur en mme temps que </head> <body> le contenu de la page HTML <script s'affiche l'cran. </title>
Le code JavaScript est plac dans le corps mme de la page HTML, entre les balises <body> .......... Et ......... </body>
05/02/12
language="JavaScript"> alert(bonjour); </script> </body> </html>

6
1.2 Insertion et excution vnementielle

Le code javascript est d'abord lu par le navigateur, stock en mmoire, pour ne s'excuter que sur demande, lors du dclenchement dun vnement. Le code JavaScript est plac dans le corps mme de la page HTML, entre les balises <head> .......... et ......... </head>
<html> <head> <title> .......... </title> <script language="JavaScript"> function auRevoir () { alert( Au revoir);} </script> </head> <body onUnload=auRevoir();> Exccution diffre </body> </html>
7
Le code s'excutera seulement lors d'un vnement gnr par intervention de l'utilisateur. Il faut crire le code correspondant cet vnement dans le corps du 05/02/12 document HTML. COUR FAIT PAR BOUAFIA REHABI
2. Insertion par appel de module externe

Il est possible d'utiliser des fichiers externes pour les programmes Javascript. On peut ainsi stocker les scripts dans des fichiers distincts (avec l'extension .js) et les appeler partir d'un fichier Html. Le concepteur peut de cette manire se constituer une bibliothque de script et les appeler la manire des #include du C ou C++. La balise devient
<SCRIPT LANGUAGE='javascript' SRC='http://site.com/javascript.js'> </SCRIPT>
05/02/12
Entre et sortie de donnes avec JavaScript

3 types de boites de messages peuvent tre affichs en utilisant Javascript : Alerte, Confirmation et Invite Mthode alert()
sert afficher lutilisateur des informations simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparatre la bote
Mthode confirm()
permet lutilisateur de choisir entre les boutons OK et Annuler.
Mthode prompt()
La mthode prompt() permet lutilisateur de taper son propre message en rponse la question pose
La mthode document.write permet d crire du code HTML dans la page WEB

Entre et sortie de donnes avec JavaScript

<html> <head> <title> une page simple </title> </head> <body> Bonjour <script language='javascript'> alert('bonjour'); document.write ( prompt('quel est votre nom ?','Indiquer votre nom ici') ); confirm('quel bouton allez-vous choisir ?'); </script> </body> </html>
05/02/12
10
La structure dun script en JavaScript

Rgles gnrales
L'insertion des espaces peut s'effectu n'importe o dans le script Chaque commande doit tre termine par un pointvirgule (;). Un nombre virgule est spar par un point (.) et non par une virgule
Le langage Javascript y est sensible la casse Il existe deux mthodes permettant d'intgrer des commentaires vos scripts.
05/02/12 COUR FAIT PAR BOUAFIA REHABI Placer un double slash (//) devant le texte 11
Les variables (1)

Dclaration et affectation
Le mot-cl var permet de dclarer une ou plusieurs variables.
Aprs la dclaration de la variable, il est possible de lui affecter une valeur par l'intermdiaire du signe d'galit (=). //Dclaration de i, de j et de k. var i, j, k; //Affectation de i. i = 1; //Dclaration et affectation de prix. var prix = 0; //Dclaration et affectation de caractere var caractere = ["a", "b", "c"];
Si une valeur est affecte une variable sans que cette dernire ne soit dclare, alors Javascript la dclare automatiquement.
05/02/12
12
Les variables (2)

Dclaration et affectation
La lecture d'une variable non dclare provoque une erreur Une variable correctement dclare mais dont aucune valeur n'est affecte, est indfinie (undefined).
La porte
les variables peuvent tre globales ou locales. Une variable globale est dclare en dbut de script et est accessible n'importe quel endroit du programme. Une variable locale est dclare l'intrieur d'une fonction et n'est utilisable que dans la fonction elle-mme.
05/02/12
13
Les variables (3)

Contraintes concernant les noms de variables
Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractre "_" (underscore)
Mon_Prenom est un nom valide
Les caractres spciaux et accentus sont interdits (, , , , etc..)

Mon_Prnom n'est pas un nom valide. Il y a un caractre accentu.
Les majuscules et les minuscules ont leur importance.

MonPrenom est diffrent de Monprenom.
Un nom de variable ne peut contenir d'espaces.

Mon Prenom n'est pas un nom de variable correct. Il y a un espace.
Les mots rservs JavaScript ne peuvent tre utiliss 05/02/12 comme noms de variable comme var , function ,. COUR FAIT PAR BOUAFIA REHABI
14
Les variables (4)

Le type dune variable dpend de la valeur stocke dans cette variable. Pas de dclaration de type.
Exemple var maVariable = Philippe; maVariable =10;
trois principaux types de valeurs

String Number : 10^-308 >nombre < 10^308 Les nombres entiers les nombres dcimaux en virgule flottant 3 valeurs spciales : Positive Infinity ou +Infinity (valeur infini positive) Negative Infinity ou Infinity (valeur infinie ngative) Nan (Not a Number) habituellement gnre comme rsultat dune opration mathamatique incohrente
Boolean
deux valeurs littrales : true (vrai) et false (faux).
Valeurs spciales
JavaScript inclut aussi deux types de donnes spciaux :
Null : possde une seule valeur, null, qui signifie labsence de donnes dans une variable Undefined : possde une seule valeur, undifined. Une variable dont le contenu nest pas clair car elle na jamais stock de valeur, pas mme null est dite non dfinie (undifined).
05/02/12
16
LES OPERATEURS
Qu'est-ce qu'un oprateur? Les oprateurs sont des symboles qui permettent de manipuler des variables, c'est--dire effectuer des oprations, les valuer, ... On distingue plusieurs types d'oprateurs: les oprateurs de calcul les oprateurs d'assignation les oprateurs d'incrmentation les oprateurs de comparaison les oprateurs logiques
Les oprateurs de calcul

Les oprateurs de calcul permettent de modifier mathmatiquement la valeur d'une variable
05/02/12
18
Les oprateurs d'assignation

Ces oprateurs permettent de simplifier des oprations telles que ajouter une valeur dans une variable et stocker le rsultat dans la variable. Une telle oprations s'crirait habituellement de la faon suivante par exemple: x=x+2 Avec les oprateurs d'assignation il est possible d'crire cette opration sous la forme suivante: x+=2 Ainsi, si la valeur de x tait 7 avant opration, elle sera de 9 aprs...
05/02/12
19
Les oprateurs d'incrmentation

Ce type d'oprateur permet de facilement augmenter ou diminuer d'une unit une variable. Ces oprateurs sont trs utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un). Un oprateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien x+=1
05/02/12
20
Les oprateurs de comparaison
05/02/12
21
Les oprateurs logiques (boolens)

Ce type d'oprateur permet de vrifier si plusieurs conditions sont vraies ou fausses
05/02/12
22
structure conditionnelle
Qu'est-ce qu'une structure conditionnelle? On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l'interactivit vos scripts par exemple.
05/02/12
23
L'instruction if
L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe diffrente...). Elle permet d'excuter une srie d'instruction si jamais une condition est ralise. La syntaxe de cette expression est la suivante: if (condition ralis) { liste d'instructions }
05/02/12
24
Remarques
la condition doit tre entre des parenthses il est possible de dfinir plusieurs conditions remplir avec les oprateurs ET et OU (&& et ||) par exemple: if ((condition1)&&(condition2)) teste si les deux conditions sont vraies if ((condition1)||(condition2)) excutera les instructions si l'une ou l'autre des deux conditions est vraie s'il n'y a qu'une instruction, les accolades ne sont pas ncessaires...
L'instruction if ... else

L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions excuter en cas de non ralisation de la condition... L'expression if ... else permet d'excuter une autre srie d'instruction en cas de non-ralisation de la condition. La syntaxe de cette expression est la suivante: if (condition ralis) { liste d'instructions } else { autre srie d'instructions }
Remarques
Il est possible de faire un test avec une structure beaucoup moins lourde grce la structure suivante: (condition) ? instruction si vrai : instruction si faux la condition doit tre entre des parenthses Lorsque la condition est vraie, l'instruction de gauche est excute Lorsque la condition est fausse, l'instruction de droite est excute
Les boucles
Les boucles sont des structures qui permettent d'excuter plusieurs fois la mme srie d'instructions jusqu' ce qu'une condition ne soit plus ralise... La faon la plus commune de faire une boucle, est de crer un compteur (une variable qui s'incrmente, c'est-dire qui augmente de 1 chaque tour de boucle) et de faire arrter la boucle lorsque le compteur dpasse une certaine valeur.
05/02/12
28
La boucle for
L'instruction for permet d'excuter plusieurs fois la mme srie d'instructions: c'est une boucle! Dans sa syntaxe, il suffit de prciser le nom de la variable qui sert de compteur (et ventuellement sa valeur de dpart, la condition sur la variable pour laquelle la boucle s'arrte (basiquement une condition qui teste si la valeur du compteur dpasse une limite) et enfin une instruction qui incrmente (ou dcrmente) le compteur. La syntaxe de cette expression est la suivante: for (compteur; condition; modification du compteur) { liste d'instructions }
Exemple
for (i=1; i<6; i++) { Alert(i) } Cette boucle affiche 5 fois la valeur de i, c'est--dire 1,2,3,4,5 Elle commence i=1, vrifie que i est bien infrieur 6, etc... jusqu' atteindre la valeur i=6, pour laquelle la condition ne sera plus ralise, la boucle s'interrompra et le programme continuera son cours.
05/02/12
30
L'instruction while
L'instruction while reprsente un autre moyen d'excuter plusieurs fois la mme srie d'instructions. La syntaxe de cette expression est la suivante: while (condition ralise) { liste d'instructions } Cette instruction excute la liste d'instructions tant que (while est un mot anglais qui signifie tant que) la condition est ralise.
05/02/12
31
Saut inconditionnel
Il peut tre ncessaire de faire sauter la boucle une ou plusieurs valeurs sans pour autant mettre fin celle-ci. La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe gnralement une structure conditionnelle, sinon les lignes situes entre cette instruction et la fin de la boucle seraient obsoltes.
05/02/12
32
Exemple
Imaginons que l'on veuille imprimer pour x allant de 1 10 la valeur de 1/(x-7) ... il est vident que pour x=7 il y aura une erreur. Heureusement, grce l'instruction continue il est possible de traiter cette valeur part puis de continuer la boucle! x=1 while (x<=10) { if (x == 7) { Alert('division par 0'); continue; } a = 1/(x-7); Alert(x); x++ }
Attention Erreurrrrrr
Il y avait une erreur dans ce script... peut-tre ne l'avez-vous pas vue: Lorsque x est gal 7, le compteur ne s'incrmente plus, il reste constamment la valeur 7, il aurait fallu crire: x=1 while (x<=10) { if (x == 7) { Alert('division par 0'); x++; continue; } a = 1/(x-7); Alert(x); x++ }
Arrt inconditionnel
A l'inverse, il peut tre voulu d'arrter prmaturment la boucle, pour une autre conditon que celle prcis dans l'en-tte de la boucle. L'instruction break permet d'arrter une boucle (for ou bien while). Il s'agit, tout comme continue, de l'associer une structure conditionnelle, sans laquelle la boucle ne ferait jamais plus d'un tour! Dans l'exemple de tout l'heure, par exemple si l'on ne savait pas quel moment le dnominateur (x-7) s'annule (bon...OK...pour des quations plus compliques par exemple) il serait possible de faire arrter la boucle en cas d'annulation du dnominateur, pour viter une division par zro! for (x=1; x<=10; x++) { a = x-7; if (a == 0) { Alert('division par 0'); break; } Alert(1/a); 05/02/12 COUR FAIT PAR BOUAFIA REHABI 35 }
Les fonctions
On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal. Javascript contient des fonctions prdfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spcifiques, on appelle ces fonctions des mthodes.
05/02/12
36
La dclaration d'une fonction

Avant d'tre utilise, une fonction doit tre dfinie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est--dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La dfinition d'une fonction s'appelle "dclaration". La dclaration d'une fonction se fait grce au mot cl function selon la syntaxe suivante: function Nom_De_La_Fonction(argument1, argument2, ...) { liste d'instructions } Pour excuter une fonction, il suffit de faire appel elle en crivant son nom (une fois de plus en respectant la casse) suivie d'une parenthse ouverte (ventuellement des arguments) puis d'une parenthse ferme: Nom_De_La_Fonction()
Exemple
function ma_fonction(param1, param2) { .. .. } function mon_autre_fonction() { . ... } Le corps des fonctions et instructions est dlimit par "{" et "}" dans lequel on place la dclaration des variables locales, propres la fonction, ainsi que l'ensemble des traitements. Une fonction aura dans son corps une ou plusieurs instructions return qui permet de renvoyer une valeur ou un objet. L'instruction return n'est pas obligatoire; on a alors affaire une instruction qui ne renvoie pas de valeur.
Le mot-cl this
Lorsque vous fates appel une fonction partir d'un objet, par exemple un formulaire, le mot cl this fait rfrence l'objet en cours et vous vite d'avoir dfinir l'objet en tapant window.objet1.objet2... ainsi lorsque l'on passe l'objet en cours en paramtre d'une fonction, il suffit de taper nom_de_la_fonction(this) pour pouvoir manipuler cet objet partir de la fonction. Pour manipuler les proprits de l'objet il suffira de taper this.propriete (o propriete reprsente bien sr le nom de la proprit).
05/02/12
39
Les oprations sur les chanes

La concatnation
Var chaine = bonjour + FI3/FCD1 ;
Dterminer la longueur dune chane

Var ch1 = bonjour ; Var longueur = ch1.length;
Identifier le nime caractre dune chane

Var ch1 = Rebonjour ! ; Var carac = ch1.charAt(2);
Extraction dune partie de la chane

Var dateDuJour = 04/04/03 Var mois = datteDuJour.substring(3, 5); 3: est lindice du premier caractre de la sou-chane extraire 5 : indice du dernier caractre prendre en considration ; ce caractre ne fera pas partie de la sous-chane extraire
05/02/12
40
Les fonctions prdfinies (1)

eval
Cette fonction excute un code Javascript partir d'une chane de caractres.
...
<SCRIPT LANGUAGE="JavaScript"> function evaluation() { document.formulaire.calcul.value=eval(document.formulaire.saisie.value); } </SCRIPT> ... <FORM NAME="formulaire"> Saisissez une expression mathmatique : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40> <INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()"> <INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40> </FORM>...
isFinite
Dtermine si le parametre est un nombre fini. Renvoie false si ce n'est pas un nombre ou l'infini positif ou infini ngatif.
isNaN
isFinite(240) //retourne true isFinite("Un nombre") //retourne false
dtermine si le parametre nest pas un nombre (NaN : Not a Number).

isNaN("un nombre") //retourne true isNaN(20) //retourne false
parseFloat

analyse une chane de caractres et retourne un nombre dcimal. Si l'argument valu n'est pas un nombre, renvoie NaN (Not a Number).
parseInt
var numero="125"; var nombre=parseFloat(numero); //retourne le nombre 125
analyse une chane de caractres et retourne un nombre entier de la base spcifie. La base peut prendre les valeurs 16 (hexadcimal) 10 (dcimal), 8 (octal), 2 (binaire).
var prix=30.75; var arrondi = parseInt(prix, 10); //retourne 30

Number
convertit l'objet spcifi en valeur numrique
ar jour = new Date("December 17, 1995 03:24:00");//converit la date en millisecon t (Number(jour));
String
convertit l'objet spcifi en chane de caractres
jour = new Date(430054663215);//Convertit le nombre en date Mois jour, Annee etc. alert (String(jour));
Escape retourne la valeur hexadcimale partir d'une chane de caractre code en ISO-Latin-1.
escape("!&") //retourne %21%26%
05/02/12
44
Les Objets (1)

Les objets de JavaScript, sont soit des entits pr dfinies du langage, soit crs par le programmeur. Par exemple, le navigateur est un objet qui s'appelle "navigator". La fentre du navigateur se nomme "window" La page HTML est un autre objet, que l'on appelle "document". Un formulaire l'intrieur d'un "document", est aussi un objet. Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link". etc... Les objets javascript peuvent ragir des "Evnements". Tous les navigateurs ne supportent pas les mmes objets Accs aux proprits dun objet voiture.couleur.value voiture.couleur.value = verte
Les objets (2)

Loprateur New
L'oprateur new est utilis pour crer une nouvelle instance ou un nouveau type d'objet dfini par l'utilisateur ou de l'un des types d'objets prdfinis, Array, Boolean, Date, Function, Image, Number, Object, ou String. nouvel_objet=new type_objet(parametres)
texte = new String("Une chane de caractre");
Les objets (3)

Loprateur Typeof
L'oprateur typeof renvoie une chane de caractres indiquant quel est le type de l'oprande.
var i = 1; typeof i; //retourne number var titre="Les raisins de la colre"; typeof titre; //retourne string var jour = new Date(); typeof jour; //retourne object var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object typeof parseFloat; //retourne function typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.* typeof Math; //retourne function NS 3.*, Opera 3.*
Proprit : length : retourne la longueur de la chane de caractres; Mthodes : anchor( ) : formate la chane avec la balise <A> nomme; b( ) : formate la chane avec la balise <B>; big( ) : formate la chane avec la balise <BIG>; charAt( ) : renvoie le caractre se trouvant une certaine position; charCodeAt( ) : renvoie le code du caractre se trouvant une certaine position; concat( ) : permet de concatner 2 chanes de caractres; fromCharCode( ) : renvoie le caractre associ au code; indexOf( ) : permet de trouver l'indice d'occurrence d'un caractre dans une chane;
L'objet String (1)
L'objet String (2)

italics( ) : formate la chane avec la balise <I>; lastIndexOf( ) : permet de trouver le dernier indice d'occurrence d'un caractre; link( ) : formate la chane avec la balise <A> pour permettre de faire un lien; slice( ) : retourne une portion de la chane; substr( ) : retourne une portion de la chane; substring( ) : retourne une portion de la chane; toLowerCase( ) : permet de passer toute la chane en minuscule; toUpperCase( ) : permet de passer toute la chane en majuscules;
L'objet Array
Proprit :
length : retourne le nombre d'lments du tableau;
Mthodes :
concat( ) : permet de concatner 2 tableaux; join( ) : converti un tableau en chane de caractres; reverse( ) : inverse le classement des lmnts du tableau; slice( ) : retourne une section du tableau; sort( ) : permet le classement des lments du tableau;
L'objet Math (1)

Proprits : E : renvoie la valeur de la constante d'Euler (~2.718); LN2 : renvoie le logarithme nprien de 2 (~0.693); LN10 : renvoie le logarithme nprien de 10 (~2.302); LOG2E : renvoie le logarithme en base 2 de e (~1.442); LOG10E : renvoie le logarithme en base 10 de e (~0.434); PI : renvoie la valeur du nombre pi (~3.14159); SQRT1_2 : renvoie 1 sur racine carre de 2 (~0.707); SQRT2 : renvoie la racine carre de 2 (~1.414);
05/02/12
51
L'objet Math (2)

Mthodes :
abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( ) sont les oprations mathmatiques habituelles; atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses et un point; ceil( ) : retourne le plus petit entier suprieur un nombre; floor( ) : retourne le plus grand entier infrieur un nombre; pow( ) : retourne le rsultat d'un nombre mis une certaine puissance; random( ) : retourne un nombre alatoire entre 0 et 1; round( ) : arrondi un nombre l'entier le plus proche.
L'objet Date (1)

Proprit : aucune; Mthodes : getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(), getHours( ), getMinutes( ), getSeconds( ), getMilliseconds( ): retournent respectivement l'anne complte, l'anne (2chiffres), le mois, le jour de la semaine, le jour du mois, l'heure, les minutes, les secondes et les millisecondes stocks dans l'objet Date; getUTCFullYear( ), getUTCYear( ), retournent respectivement l'anne complte, l'anne (2chiffres), stocks dans l'objet Date en temps universel; setFullYear( ), setYear( ), remplacent respectivement l'anne complte, l'anne (2chiffres), dans l'objet Date;
L'objet Date (2)

setUTCFullYear( ), setUTCYear( ), remplacent l'anne complte, l'anne (2chiffres), dans l'objet Date en temps universel; getTime( ) : retourne le temps stock dans l'objet Date; getTimezoneOffset( ) : retourne la diffrence entre l'heure du client et le temps universel; toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la date en chane de caractre selon la convention GMT, selon la convention locale ou en temps universel;
Les objets du navigateur (1)

L'objet le plus haut dans la hirarchie est window qui correspond la fentre mme du navigateur. L'objet document fait rfrence au contenu de la fentre. document regroupe au sein de proprits l'ensemble des lments HTML prsents sur la page. Pour atteindre ces diffrents lments, nous utiliserons :
soit des mthodes propres l'objet document, comme la mthode getElementById( ), qui permet de trouver l'lment en fonction de son identifiant (ID); soit des collections d'objets qui regroupent sous forme de tableaux Javascript tous les lments de type dtermin.
Les objets du navigateur (2)
05/02/12
56
L'objet window (1)

Proprits : (accessibles avec IE et N)
closed : indique que la fentre a t ferme; defaultStatus : indique le message par dfaut dans la barre de status; document : retourne l'objet document de la fentre; frames : retourne la collection de cadres dans la fentre; history : retourne l'historique de la session de navigation; location : retourne l'adresse actuellement visite; name : indique le nom de la fentre;
L'objet window (2)

navigator : retourne le navigateur utilis; opener : retourne l'objet window qui a cr la fentre en cours; parent : retourne l'objet window immdiatemment suprieur dans la hirarchie; self : retourne l'objet window correspondant la fentre en cours; status : indique le message affich dans la barre de status; top : retourne l'objet window le plus haut dans la hirarchie.
L'objet window (3)

Mthodes :

05/02/12
blur( ) : enlve le focus de la fentre; close( ) : ferme la fentre; focus( ) : place le focus sur la fentre; moveBy( ) : dplace d'une distance; moveTo( ) : dplace la fentre vers un point spcifi; open( ) : ouvre une nouvelle fentre; print( ) : imprime le contenu de la fentre; resizeBy( ) : redimensionne d'un certain rapport; resizeTo( ) : redimensionne la fentre; setTimeout( ) : value une chane de caractre aprs un certain laps de temps.
COUR FAIT PAR BOUAFIA REHABI 59
L'objet document (1)

Proprits :
applets : retourne la collection d'applets java prsente dans le document; cookie : permet de stocker un cookie; domain : indique le nom de domaine du serveur ayant apport le document; forms : retourne la collection de formulaires prsents dans le document; images : retourne la collection d'images prsentes dans le document; links : retourne la collection de liens prsents dans le document;
L'objet document (2)

referrer : indique l'adresse de la page prcdente; title : indique le titre du document.
Mthodes :
close( ) : ferme le document en criture; open( ) : ouvre le document en criture; write( ) : crit dans le document; writeln( ) : crit dans le document et effectue un retour la ligne
L'objet navigator
Proprits
appName : application (Netscape, Internet Explorer) appVersion : numero de version. platform : systme dexploitation (Win32) plugins language mimeTypes JavaEnabled()
Les vnements (1)

Javascript est dpendant des vnements
se produisent lors d'actions diverses sur les objets d'un document HTML.
onLoad; onClick onMouseover onMouseout ...
Il est possible de baser lexcution de fonctions sur des vnements

Les vnements (2)

Evnement onLoad
Se produit lorsque une page web est charge dans la fentre du navigateur Toute la page (y compris les images quelle contient si leur chargement est prvu) doit avoir t charge pour quil ait lieu Cet vnement peut tre associ une image seulement ; auquel cas, il se produit une fois son chargement termin
<HTML><BODY onLoad="alert('page charge');"> Exemple de l'vnement onLoad </BODY></HTML>
Les vnements (3)

Evnement onClick
Se produit lorsque lutilisateur clique sur un lment spcifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc. Ces lments sont capables de rpondre sparment cet vnement Il peut galement tre dclench lorsque lutilisateur clique nimporte o sur la page sil a t associ non pas un lment spcifique, mais llment body tout entier <HTML><BODY> <INPUT TYPE="Button" Value="cliquer ici onClick="alert('Clic')"> </BODY></HTML>
Les vnements (4)

vnement onMouseover
Analogue onClick sauf quil suffit que lutilisateur place le pointeur de sa souris sur lun des lments prcits (lien hypertexte, image, bouton, texte, etc.) pour quil ait lieu
vnement onMouseout
A linverse de onMouseover, cet vnement se produit lorsque le pointeur de la souris quitte la zone de slection dun lment.
<HTML><BODY> <IMG SRC="image.gif" onMouseOver="src='image2.gif';" onMouseOut="src='image.gif';"> </BODY></HTML>
Nommage des objets-lments

Pour pouvoir manipuler un objet en javaScript, il doit possder un nom Pour pouvoir distinguer les diffrents objets-lments dune page web, il suffit de leur donner un nom travers de lattribut NAME
<Table Name= tableau1 > <Table Name= tableau2 > <Form Name = formulaire1 > <Form Name = formulaire2 > <Textarea Name = texte1>
Dans le cas o lobjet serait unique alors pas besoin de nom pour dsigner cet objet
Exemple : le cas de BODY(une seul BODY par document), DOCUMENT (un seul DOCUMENT par fentre)
05/02/12
67
Manipulation des objets

Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi prciser son chemin daccs dans larborescence de la structure
<HTML><BODY onLoad="window.document.formulaire.zone.value='Bonjour';"> <FORM name="formulaire"><INPUT NAME="zone" TYPE="text"> </FORM></BODY></HTML>
Si le nom de la fentre est omis, le navigateur utilisera par dfaut la fentre courante Dans le cas de cadres (frames), il est pertinent de donner le nom de la fentre Il est possible aussi domettre window.document : ladressage russi puisquil ny a quun seul objet document dans la fentre
Les Cookies (1)

Un "Cookie" est une chane de caractres qu'une page HTML (contenant du code JavaScript) peut crire un emplacement UNIQUE et bien dfini sur le disque dur du client. Que faire avec un cookie
Cette chane de caractres ne peut tre lue que par le seul serveur qui l'a gnre. Transmettre des valeurs (contenu de variables) d'une page HTML une autre.
Par exemple, crer un site marchand et constituer un "caddie" pour le client. Caddie qui restera sur son poste et vous permettra d'valuer la facture finale au bout de la commande. Sans faire appel quelque serveur que ce soit.
05/02/12
Personnaliser les pages prsentes l'utilisateur en COUR FAIT PAR BOUAFIA REHABI 69 reprenant par exemple son nom en haut de chaque page.
Les Cookies (2)

Limitations lors de lutilisation des cookies.
On ne peut pas crire autant de cookies que l'on veut sur le poste de l'utilisateur (client dune page). Il y a des limites :
Limites en nombre : Un seul serveur (ou domaine) ne peut pas tre autoris crire plus de 20 cookies. Limites en taille : un cookie ne peut excder 4 Ko. Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout.
O sont stocks les cookies

En gnral, ils sont pour Netscape, dans le rpertoire de l'utilisateur (si il y a des profils diffrents) sous le nom de "cookie.txt". Microsoft Internet Explorer stocke les cookies dans des rpertoires tels que "C:\WINDOWS\Cookies" ou encore "C:\WINDOWS\TEMP\Cookies".
Les Cookies (3)

Structure d'un cookie
Nom=Contenu; expires=expdate; path=Chemin; domain=NomDeDomaine; secure Nom=Contenu;
Sont deux variables suivies d'un ";" . Elles reprsentent l'en-tte du cookie. La variable Nom contient le nom donner au cookie. La variable Contenu contient le contenu du cookie Exemple ma_cookie= oui:visite
05/02/12
71
Les Cookies (4)

Expires= expdate;
Le mot rserv expires suivi du signe "=" (gal). Derrire ce signe, vous mettrez une date d'expiration reprsentant la date laquelle le cookie sera supprim du disque dur du client. La date dexpiration doit tre au format : Wdy, DD-Mon-YYYY HH:MM:SS GMT Utiliser les fonctions de l'objet Date Rgle gnrale : 'indiquer un dlai en nombre de jours (ou d'annes) avant disparition du Cookie.
Les Cookies (5)

path=Chemin; path reprsente le chemin de la page qui a cr le cookie. domain=NomDeDomaine; domain reprsente le nom du domaine de cette mme page secure secure prend les valeurs "true" ou "false" selon que le cookie doit utiliser des protocoles HTTP simples (non scuriss) ou HTTPS (scuriss).
Les arguments path, domain et secure sont facultatifs.

lorsque ces arguments sont omis, les valeurs par dfaut sont prises. Pour secure, la valeur est "False" par dfaut.
Les Cookies (6)

Ecrire un cookie
Un cookie est une proprit de l'objet document (la page HTML charge dans le navigateur) alors lintruction dcriture de cookie est:
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;

var Nom = "MonCookie" ; // nom du cookie var Contenu = "H... Vous avez un cookie sur votre disque !" ; // contenu du cookie var expdate = new Date () ; // cre un objet date indispensable puis rajoutons lui 10 jours d'existence : expdate.setTime (expdate.getTime() + ( 10 * 24 * 60 * 60 * 1000)) ; document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
05/02/12
74
Les Cookies (7)

Lecture d'un cookie
Accder la proprit cookie de l'objet document.
Document.cookie
var LesCookies ; // pour voir les cookies LesCookies = document.cookie ; // on met les cookies dans la variable LesCookies
Modification d'un cookie

Modifier le contenu de la variable Contenu puis rcrire le cookie sur le disque dur du client
Contenu = "Le cookie a t modifi..." ; // nouveau contenu document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ; // criture sur le disque
05/02/12
75
Les Cookies (8)

Suppression d'un cookie
Positionner la date de premption du cookie une valeur
infrieure celle du moment o on l'crit sur le disque.
// on enlve une seconde (a suffit mais c'est ncessaire)
expdate.setTime (expdate.getTime() - (1000)) ;

// criture sur le disque
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
05/02/12
76

Cour Java Script

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cour Java Script

Diunggah oleh

Hak Cipta:

Format Tersedia

JavaScript

COUR FAIT PAR BOUAFIA REHABI

Le code JavaScript sintgre de deux manire avec le code HTML

2. Insertion comme un module externe

1. Insertion dans une page HTML

1.1 Insertion pour excution directe

language="JavaScript"> alert(bonjour); </script> </body> </html>

COUR FAIT PAR BOUAFIA REHABI

1.2 Insertion et excution vnementielle

2. Insertion par appel de module externe

<SCRIPT LANGUAGE='javascript' SRC='http://site.com/javascript.js'> </SCRIPT>

COUR FAIT PAR BOUAFIA REHABI

Entre et sortie de donnes avec JavaScript

La mthode document.write permet d crire du code HTML dans la page WEB

Entre et sortie de donnes avec JavaScript

COUR FAIT PAR BOUAFIA REHABI

La structure dun script en JavaScript

Les variables (1)

COUR FAIT PAR BOUAFIA REHABI

Les variables (2)

COUR FAIT PAR BOUAFIA REHABI

Les variables (3)

Les caractres spciaux et accentus sont interdits (, , , , etc..)

Les majuscules et les minuscules ont leur importance.

Un nom de variable ne peut contenir d'espaces.

Les variables (4)

trois principaux types de valeurs

COUR FAIT PAR BOUAFIA REHABI

Les oprateurs de calcul

COUR FAIT PAR BOUAFIA REHABI

Les oprateurs d'assignation

COUR FAIT PAR BOUAFIA REHABI

Les oprateurs d'incrmentation

COUR FAIT PAR BOUAFIA REHABI

Les oprateurs de comparaison

COUR FAIT PAR BOUAFIA REHABI

Les oprateurs logiques (boolens)

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

L'instruction if ... else

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

COUR FAIT PAR BOUAFIA REHABI

La dclaration d'une fonction

COUR FAIT PAR BOUAFIA REHABI

Les oprations sur les chanes

Dterminer la longueur dune chane

Identifier le nime caractre dune chane

Extraction dune partie de la chane

Les fonctions prdfinies (1)

Les fonctions prdfinies (2)

isFinite(240) //retourne true isFinite("Un nombre") //retourne false

dtermine si le parametre nest pas un nombre (NaN : Not a Number).

Les fonctions prdfinies (3)

var numero="125"; var nombre=parseFloat(numero); //retourne le nombre 125

Les fonctions prdfinies (4)

ar jour = new Date("December 17, 1995 03:24:00");//converit la date en millisecon t (Number(jour));

COUR FAIT PAR BOUAFIA REHABI

Les Objets (1)

Les objets (2)