Cours Javascrip Final

8/2/2019 Cours Javascrip Final

1/56

Azzedine IDY Langage JavaScript 1

Le langage JAVASCRIPT


2/56


PLAN Le langage JavaScript Les objets prdfinis

Les vnements Les objets du noyau

Quelques exemples classiques


3/56


Motivations

Insertion d'instructions de programmationdirectement dans le code des pages HTML Excution de code sur le poste client pour:

amliorer l'interactivit(temps de rponse plus court) amliorer les dbits sur le rseau (viter des envois errons) proposer des pages dynamiques (animation, personnalisation,)

Exemples test d'un formulaire avant envoi animation type texte dfilant affichage dynamique


4/56


Le Langage JavaScript Cr l'origine par Netscape (Netscape2.0) Conu pour traiter localement des vnements provoqus par le

client dplacement du pointeur de souris ou click de souris

soumission d'un formulaire,

JavaScript est un langage interprt(le code du script est analyset excutau fur et mesure

par l'interprte, partie intgrante du navigateur) -problme en casd'erreurs !

base d'objets multi-plateforme


5/56


Le Langage JavaScript JavaScript permet:

de programmer des actions en fonctiond'vnements si la zone de saisie contient un nombre alors

enregistrer la valeur sinon afficher une erreur

d'effectuer des calculs (sans recours auserveur) lire la valeur saisie, la multiplier par 3,14 et

afficher le rsultat


6/56Azzedine IDY Langage JavaScript 6

Le Langage JavaScript

Domaines d'applications: petites applications simples (calculette, outils de conversions,dition automatique de devis, jeu, )

aspects graphiques de l'interface (modification d'images lors du

passage de la souris, gestion de fentres, modification locale dela page HTML, modification de menus) test de validit des donnes sur les lments de l'interface de

saisie vrifier qu'une valeur considre comme obligatoire a bien t saisie vrifier que le champ saisi correspond bien au format demand



Autres langages analogues Le langage VBScript

Propos par Microsoft driv de Visual Basic

Le langage Jscript (microsoft)



Le noyau JavaScript

Au niveau du langage, on distingue: le noyau JavaScript (cur du langage) comportant des

objets prdfinis, des oprateurs, des structures,

un ensemble d'objets associs au navigateur Fentres Documents images,

Il existe aussi la possibilit d'excuter du codeJavaScript sur le serveur (communications avec uneBD) mais l'usage est plus restreint.



Normalisation

ECMA (EuropeanComputer ManufacturersAssociation) a dfini un standard ECMAScript bassur JavaScript1.1

Ce standard, repris par l'ISO, dfinit lescaractristiques du noyau du langage JavaScript1.3 et Jscript3.0 sont conformes cette

norme mais ils ont aussi tous les deux: leurs propres extensions des diffrences au niveau du modle objet du

navigateur



JavaScript n'est pas JAVA !

JavaScript Interprt base d'objets prdfinis

(pas d'hritage) code intgr dans HTML

(visible) typage faible

n'existe pas en dehors duWeb Dbuggage difficile

Java Compil orients objets (dfinition

de classes, hritage) code dans applets (non

visible) typage fort

langage part entire environnement de

dveloppement

Communication possible entre Java et JavaScript grce au plug'inLiveConnect(Netscape) ou aux contrles Active X (Microsoft)



Insertion du code JavaScript 3 mthodes:

utilisation de la balise dclaration de fonction dans l'en-tte entre et

appel de fonction ou excution d'une commande JavaScript

dans insertion d'un fichier JavaScript "externe "

utilisation dans une URL une URL peut tre une excution de fonction JavaScript (entre

ou utilisation de nouveaux attributs de balise pour la

gestion d'vnements utilisateur



Insertion du code JavaScript

function fin() { window.close(); }

document.write('Pour fermer la fentre');

cliquez ici
ou passez la souris surce lien



La balise Introduite pour permettre l'excution de code par le

navigateur Syntaxe gnrale

Attribut LANGUAGE

"JavaScript" par dfaut dans Netscape permet de prciser la version

Attribut SRC permet de charger du code prsent dans un autre fichier

Attributs ARCHIVE et ID utiliss pour la scurisation (signature digitale)


14/56


Insertion d'un fichier externe

document.write('Pour

fermer la fentre');
cliquez ici
ou passez la souris sur

ce lien// fin.jsfunction fin()

{window.close();}


15/56


La balise

Bonne utilisation de la balise

Attention, ce document contient du codeJavaScript non interprt par votrenavigateur


16/56


Le langage JavaScript Des variables faiblement types Des oprateurs et instructions (ceux du langage C) Des mthodes

globales (associes tous les objets) fonctions dfinies par l'utilisateur

Des objets prdfinis (String, Date, Math, )

lis l'environnement (window, document, ) Commentaires comme en langage C

// une seule ligne ou /* plusieurs lignes */

Sparateur d'instructions : ;(ou retour-chariot)


17/56


Oprateurs JavaScript

Ceux du langage C arithmtiques : + -* / % in/ dcrmentation (pr/post indexe) : k++ ++k

logiques : && (ET) | | (OU) ! (NON) bit bit : & (AND) | (OR) ^ (XOR) ~ (Not) dcalages : >> ( droite) >> (non

sign) comparaisons: == != = < > concatnation de chanes : +


18/56


Affectations

affectation simplenom=valeur; affectation conditionnelle

var = (condition) ? exp_alors: exp_sinon;X = (a > b ) ? plus: moins ;

affectation avec opration : += -= *= ...X +=3; // quivaut X=X+3;

ATTENTION : distinguer laffectation (=) et la

comparaison (==)


19/56


Variables JavaScript JavaScript est sensible la casse Dclaration de variables

optionnelle mais fortement conseille avec l'instruction var le type n'est pas prcis lors de la dclaration initialisation possible lors de la dclaration sinon valeur

undefined

Notion de variables locales et globales locales une fonction globales au document HTML

Utilisation d'une variable globale d'un autre document

(autre frame)window.parent.droite.nomvar


20/56


Variables JavaScript

var Age=Math.round(70*Math.random());var Nom;var Prenom=Azzedine';

function affiche(){var Nom=IDY';var Age=Math.round(10*Math.random());document.write(Prenom+ ' ' + Nom + ' ' + Age + ' ans
');}

< / SCRI PT>

< SCRI PT LANGUAGE= "JAVASCRI PT1.2">

document.write(Prenom+ ' ' + Nom + ' ' + Age + ' ans
');affiche();

< / SCRI PT>


21/56


Variables et types Le typage a lieu lors de l'initialisation ou d'une affectation Le type d'une variable peut changer si on lui affecte une valeur

d'un autre type Les types de donnes simples

Nombre (Number)Entier : dcimal ou hexa (0x4F) ou octal (075)Rel (-2.3452E-12)

Boolen (Boolean) : true ou false Chane de caractres (String)

'chaine' ou "chaine "Les codes \t (tabulation) \n ( la ligne) \r (retour chariot)\b (backspace) \f (saut de page) sont reconnus


22/56


Conversion de type Type String = type dominant JavaScript fait des conversions implicites selon les

besoins Exemples

N=12; // N numrique T="34"; // T chane de caractres X=N+T; // X est la chane de caractres "1234 "

Il existe des types particuliers : null, undefined, objet,function et des nombres particuliers : Infinity, -Infinity, NaN(Not a

Number)


23/56


Instructions classiques Instructions de branchement

if (condition) { instructions; } [ else{ instructions; } ] Boucles

for (i=1 ; i


24/56


Instructions classiques Le bloc switch

switch(variable) {case'valeur 1':Code excuter si "variable === 'valeur 1'";

break;case'valeur 2':Code excuter si "variable === 'valeur 2'";break;

case12:Code excuter si "variable === 12";break;

default:Code excuter si tous les autres ont chou;break;}


25/56


Les variables

function nom_f (arg1, , argN) {instruction1;

instructionN;

return valeur;

}arguments non typs

nombre d'arguments non fix par la dclaration


26/56


Les fonctions- exemple// function.js

/* retourne le jour de la semaine si pas d'argument sinon le jour de la semaine

correspondant la date passe en argument jj/mm/aaaa */functionjour(arg_date) {

var date_AMJ;

var Semaine = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi',

'Vendredi', 'Samedi');

if (arg_date) {

// on rcupre arg_date dans un tableau d'entiers

date_JMA = arg_date.split('/');

// on cre un objet Date en fournissant anne, mois (0-11), jour

date_AMJ = new Date(date_JMA[2], date_JMA[1]-1, date_JMA[0]);} else {

// on cre un objet Date avec la date du jour

date_AMJ = new Date();

}

return Semaine[date_AMJ.getDay()];}


27/56


Les objets Pas de classe mais des pseudo-classes

pas de sous-classe

pas d'hritage

uniquement des crations d'objets et la possibilit de

dfinir des proprits "prototype" syntaxe largement inspire de la programmation objet

Objets prdfinis

accs une proprit (objet.proprit)

accs une mthode (objet.mthode)

Cration d'un objet par la dfinition de son constructeur


28/56


Les objets-Exemple// constructeur de l'objet individu

function individu(N, P, D) {// proprits d'un individu

this.nom = N;

this.prenom = P;

this.date = D;

// mthodes d'un individuthis.age = calcul_age;

}

// dfinition de la mthode calcul_age

function calcul_age() {// date du jour

var date_today = new Date();

// date de naissance de l'individu

date_indiv = this.date.split('/');

return age_indiv;

}l

// crer une instance de l'objet individu - appel du constructeur avec trois arguments

Ahmed = new individu(Ahmed', Fatihi', '3/12/75');// modifier une propritAhmed.date = '3/12/78';// appel de la mthode age()document.write(Ahmed.age());// suppression de l'instance Ahmed

delete Ahmed;


29/56


Les objets- La proprit Prototype Toutes les classes JavaScript ont une proprit

particulire "prototype" permettant d'ajouter

une nouvelle proprit ou mthode une classe

Nom_classe.prototype.New_propriete = Valeur_par_defaut;

Nom_classe est une classe prdfinie ou dfinie par l'utilisateur

New_propriete est le nom de la nouvelle proprit ;

elle est cre pour tous les objets dj instancis ; si

elle existe dj, cela permet de lui affecter une valeur par dfaut

Valeur_par_defaut peut tre une rfrence vers une

fonction si on dsire ajouter une nouvelle mthode


30/56


Les tableaux Construire un tableau sans prciser le contenu

var Tab = new Array();

Construire un tableau en prcisant la taille

var Tab = new Array(3);

Initialisation du tableau lors de sa crationvar Tab = new Array(t1, , tN);

les indices varient de 0 N-1 les ti peuvent tre de types diffrents

Proprit length : taille du tableau

Tab.length = N;

La taille du tableau est dynamique


31/56


Les tableaux et objets Un tableau est un objet prdfini qui possde

des proprits et des mthodes

Tableaux associatifs : l'indice peut tre une

chane de caractresTab['nom'] est quivalent Tab.nom

Un objet peut tre considr comme un tableau

associatif - exemple de parcours de l'ensembledes proprits d'un objet :

for (p in window) { // p est une chane de caractres

document.write('window.'+p+'='+window[p]+'
');


32/56


Tableaux et objets

// p est une chane de caractres

for (p in window.location) {

document.writeln('location.' + p + '=' + window.location[p] +'
'); }

document.writeln("");

for (p in window.document) {

document.writeln('document.' + p + '=' + window.document[p] +

'
'); }

document.writeln("");

for (p in window) {

document.writeln('window.' + p + '=' + window[p] + '
'); }


33/56


Les objets prdfinis


34/56


Les objets prdfinis(1) L'objet Global qui dfinit un ensemble de proprits

et mthodes communes tous les objets

les mthodes et proprits de cet objet n'appartiennent

aucune classe et cet objet n'a pas de nom

la seule faon de faire rfrence cet objet est this

chaque variable ou fonction globale est une proprit deGlobal

sur un navigateur client, l'objet window est l'objetGlobalauquel il a t ajout certaines proprits et mthodes

proprits de Global : Infinity, NaN, undifined


35/56


Les objets prdfinis(2)

L'objet Global - quelques mthodes parseFloat(s) et parseInt(s,base) pour les

conversions stringrel ou entier

IsNaN(expr) pour tester une expression numrique eval(s) permet d'valuer une expression JavaScript

contenu dans la chane de caractre s

escape(s) et unescape(s) pour le codage de typeURL - encod

escape("Hello World!"); // retourne "Hello%20World%21"


36/56


Les objets prdfinis(3) Les classes prdfinies du noyau JavaScript

Array - objet pour crer les tableaux Boolean - objet pour crer un Boolen (true ou false)

Date - contient des mthodes de traitement de la date

Function - objet pour crer des fonctions

Math - contient des mthodes et des propritsmathmatiques (sinus, cosinus, racine carre...)

Number - objet pour crer des nombres

Image - objet de gestion dynamique des images

Option - permet la gestion des listes cres avec

dans les formulaires

RegExp - pour l'utilisation des expression rgulires

String - objet pour crer des chanes


37/56


Les objets prdfinis(4) Les objets instancis automatiquement lors du dmarrage du

browser permettent d'accder des informations concernant le navigateur

client, les documents HTML affichs, l'cran de la machine

la classe Navigator

une seule instance objet navigator infos sur nom, version, plug-ins installs,

la classe Window une instance par fentre et frame du document HTML

accs tous les objets crs par des balises HTML

la classe Screen une seule instance objet screen

infos sur largeur et hauteur en pixels, nombre de couleursdisponibles,


38/56


Hirarchie des objets du navigateur


39/56


Hirarchie des objets du navigateur

Une image est contenue dans un document qui est lui mme

contenu dans une fentre...

Un champ de saisie est contenu dans un formulaire qui luimme est contenu dans un document...


40/56


L'objet navigator (1) navigator.appName = Netscape nom du browser

permet de diffrencier les navigateurs

navigator.appVersion = 4.7 [fr] (Win95; I)

informations sur la plate-forme d'excution

navigator.language = fr (2 caractres)

navigator.platform = Win32 type de machine

navigator.appCodeName = Mozilla nom de code

navigator.userAgent = Mozilla/4.7 [fr] (Win95; I)

informations gnrales envoyes au serveur HTTP

chaque requte du navigateur


41/56


L'objet navigator (2)

navigator.plugins = [object PluginArray] tableau des plug-insinstalls sur le navigateur

var p0 = navigator.plugins[0].name;

document.write(navigator.plugins[p0].description);

navigator.mimeTypes = [object MimeTypeArray]

tableau des types mimes reconnus par le navigateur

mimeTypes[0].type nom du type MIME ('image/gif')

mimeTypes[0].description description du type mimeTypes[0].enabledPlugin rfrence vers le plug-in qui gre

ce type

mimeTypes[0].suffixes listes des suffixes de fichiers grs par ce type


42/56


Les problmes dincompatibilit// Vrifie que le navigateur soit au minimum IE4 ou Netscape4

function verifieNav() {

var oldNav = true;navName = navigator.appName;

navVer = parseInt(navigator.appVersion);

if (navName == "Netscape" && navVer >= 4)

oldNav = false;

else if (navName == "Microsoft Internet Explorer" && navVer >= 4)oldNav = false;

if (oldNav)

alert("Passez une version plus rcente de votre navigateur !");

}

if (navigator.appName == "Netscape") {

// Code excuter avec le navigateur Netscape

} else {

// Code excuter avec les autres navigateurs}


43/56


Lobjet screen screen.height hauteur de l'cran en pixels

screen.width largeur de l'cran en pixels

screen.availHeight nombre de pixels disponibles

verticalement (sans les barres de tches, ) screen.availWidth idem horizontalement

screen.pixelDepth nombre de bits utiliss pour

coder la couleur en pixels screen.colorDepth nombre de couleurs disponibles


44/56


Lobjet Window(1) Un objet window pour chaque fentre ou cadre

(zone) ouverte par le navigateur

3 proprits de base

window.history qui contient un tableau des URL

dj visites dans la zone (historique)

window.location qui contient les caractristiques de

l'URL de la zone

window.document qui contient les caractristiques

et tous les objets de la zone


45/56


La classe Window (2) Accs aux objets contenus dans l'objet window

rfrence directe l'objet window de la zone

window.document.bgcolor = 'blue';

rfrence un objet window d'une autre zone par

l'intermdiaire d'une proprit window.top.cadre_droit.document.bgcolor = 'blue';

window.parent.frames[1].document.bgcolor = 'blue';

rfrence un objet window d'une autre zone par

l'intermdiaire d'une variable

var new_window= window.open('test.html');

new_window.document.bgcolor = 'blue';


46/56


Principales proprits de window (1)

document contient des mthodes et

informations sur le document (voir aprs)

history permet d'avoir accs l'historique d'une

page (voir aprs)

location permet d'avoir accs toutes les

informations de l'URL (voir aprs)

external cet objet permet d'avoir accs

certaines proprits du navigateur et de les

modifier, telles que la page d'accueil, les favoris

(IE uniquement)


47/56



frames[ ] permet d'avoir accs aux cadres ; on

peut galement utiliser directement le nom du cadre

parent, self, top permettent d'accder aux autrescadres

defaultStatus permet de prciser la valeur par

dfaut du texte afficher dans la barre d'tat

(quand la souris est sur le fond de la zone) status permet de prciser la valeur du texte

afficher dans la barre d'tat un instant donn


48/56



closed boolen qui permet de savoir si la zone a

t ferme

opener retourne l'objet window qui a ouvert cettefentre (avec la mthode open())

Autres proprits relatives aux caractristiques

de la zone (dimensions, positionnement)

innerHeight, innerWidth, outerHeight, outerWidth,pageXOffset, pageYOffset, screenX, screenY


49/56


Principales mthodes de window (1)

La mthode open()

win = window.open(URL, nom_zone, options);options boolennes (yes ou no) : fullscreen, menubar,

toolbar, scrollbars, status, resizable

options en pixels : height, width, left, top

La mthode close()

window.close();

demande de confirmation l'utilisateur si la zone n'a

pas t ouverte avec open() La mthode alert()

window.alerte(message);

ouvre une fentre d'alerte o s'affiche message avec un bouton

OK qui permet de fermer la fentre


50/56



La mthode focus()

window.focus();rend la zone active La mthode blur()

window.blur();rend la zone non active

La mthode prompt()

chaine = window.prompt(message, valeur_defaut);

ouvre une fentre compose d'un message et d'un

champ de saisie et retourne la valeur saisie

La mthode confirm()bool = window.confirm(message);

ouvre une fentre avec message, boutons OK et

Annuler et retourne true (OK) ou false (Annuler)


51/56



La mthode back()

window.back();renvoie sur la page prcdente

La mthode forward()

window.forward();renvoie sur la page suivante

La mthode home()

window.home();renvoie sur la page d'accueil dubrowser

La mthode stop()window.stop();stoppe le chargement de la zone

La mthode find()

chaine = window.find(chane, casse, sens);


52/56



La mthode print()

permet d'imprimer le document courant comme si l'utilisateuravait cliqu sur le bouton "imprimer"

Les mthodes setTimeout() et clearTimeout()

timeout = window.setTimeout(codeJS, msec);timeout = window.setTimeout(func, msec, arg1,,argN);

window.clearTimeout(timeout);

Les mthodes setInterval() et clearInterval()

idem mais excutions priodiques toutes les msec

interval = window.setInterval(codeJS, msec);

interval = window.setInterval(func, msec, arg1,,argN);

window.clearInterval(interval);


53/56



Les mthodes moveBy() et moveTo()

permettent de dplacer la zonewindow.moveBy(dx,dy); // dx pixels vers la droite, dy vers le bas

window.moveTo(x,y); // (x,y) = coin suprieur gauche

Les mthodes resizeBy() et resizeTo() permettent de

redimensionner la zonewindow.resizeBy(dw,dh); // dw pixels d'augmentation de la largeur

window.resizeTo(l,h); // largeur et hauteur en pixels

Les mthodes scrollBy() et scrollTo()

permettent de faire dfiler la zone

window.scrollBy(dx,dy); // dfilement de dx pixels vers la droite...

window.scrollTo(x,y); // le point (x,y) du document est affich dans le

coin suprieur gauche de la fentre


54/56


Les vnements associs window

onFocus - excuter du code JS quand la fentre

devient active

ou

window.onfocus=f; // f est une fonction ou null

onBlur - idem mais quand la fentre devient

non active

onerror - excuter une fonction quand survient

une erreur dans le code JavaScript

window.onerror=f; // f est une fonction ou null

Et aussi : onload, onunload , onmove,

Exemple: cration dun rollover


55/56


Exemple: cration d un rollover


56/56

BIBLIOGRAPHIE Webmasterin a nutshell, S. Spainhour& R. Eckstein, 3ime dition, O'REILLY,

ISBN 0-596-00357-9 JavaScript, La rfrence, D. Flanagan, 4ime dition en franais, O'REILLY,

ISBN 2-84177-212-8 Cration d'un site Web du dbutant l'expert, Daniel Ichbiah, Eska, ISBN 2-

7472-0227-5 HTML et JavaScript, P. Chalatet Daniel Charnay, Eyrolles, ISBN 2-212-

11157-6 Sites Internet :

http://www.aidejavascript.com/sommaire.php3http://conceptnet.online.fr/accueil.htm

http://www.ac-creteil.fr/util/programmation/javascript/Welcome.html http://www.le-webmestre.net/web/cours/javascript/ http://www.henri-ruch.ch/javascript/cours.asp http://developpementweb.online.fr/index1.html http://www.w3.org/
http://www.aidejavascript.com/sommaire.php3http://conceptnet.online.fr/accueil.htmhttp://www.ac-creteil.fr/util/programmation/javascript/Welcome.htmlhttp://www.le-webmestre.net/web/cours/javascript/http://www.henri-ruch.ch/javascript/cours.asphttp://developpementweb.online.fr/index1.htmhttp://developpementweb.online.fr/index1.htmhttp://www.henri-ruch.ch/javascript/cours.asphttp://www.le-webmestre.net/web/cours/javascript/http://www.ac-creteil.fr/util/programmation/javascript/Welcome.htmlhttp://www.aidejavascript.com/sommaire.php3http://conceptnet.online.fr/accueil.htm