Cours Javascript

Cours Javascript
I) Introduction :
JavaScript est un langage interprt par le navigateur. Le JavaScript est un langage client , c'est--dire excut chez l'utilisateur lorsque la page Web est charge. Il a pour but de dynamiser les sites Internet. Le JavaScript est un langage sensible la casse ( case sensitive ). JavaScript est un langage objet : chaque objet possde des mthodes (ou fonctions), des proprits et .... des objets. Dans une page Web, l'objet le plus lev dans la hirarchie est la fentre du navigateur : window. Cet objet window contient entre autres l'objet document qui lui mme contient tous les objets contenus dans la page Web (paragraphes, formulaires, etc...). En plus de ces objets, il existe des objets crs par l'utilisateur. Les mthodes sont des fonctions qui permettent d'agir sur certaines proprits de l'objet, les proprits contiennent les paramtres d'un objet.
II) Utilisation dans une page HTML

On peut utiliser le code javascript dans : soit utiliser la balise < SCRIPT>, soit utiliser un fichier externe < SCRIPT SRC="fichier.js">, soit dans un attribut de balise, soit en gestion d vnements. Linterprtation du code JavaScript se fait au fur et à mesure de sa lecture dans la page ou lors du dclenchement dvnements par lutilisateur. Exemple :
<html> <head> <title>Glups</title> </head> <body> <h1>Glups</h1> Avec un bon navigateur <script language="JavaScript1.2"> document.writeln("(comme "+navigator.appName+")") ; </script> on peut raliser des documents personnaliss et mme dynamiques. </body> </html>
III) Syntaxe
III-1) Les variables a) syntaxe des variables On declare une variable en javascript en utilisant le mot cl var nomDeVariable JavaScript reconnat les types primitifs suivants : les nombres : 42 ou 3.1415 les boolens : true ou false les chanes : "Bonjour !" null
Il ny a pas de distinction entre entiers et rels. Les identificateurs doivent commencer par une lettre ou un suivi par des lettres, des chiffres ou des _ . b) La conversion JavaScript tant faiblement type les variables ne sont pas associes à un type particulier. Exemple : var i = 42 i = "Bonsoir" Dans une expression faisant intervenir des nombres et des chanes les nombres sont convertis en chane. Exemple : p = "Jai commande " + 1 + "aspirateur et " + 3 + "assiettes." Fonction de conversion :
parseFloat (for conversion to a floating-point number) or parseInt (for string-to-integer conversion).

Exemple 1
parseFloat('1.45kg') parseFloat('77.3') parseFloat('077.3') parseFloat('0x77.3') parseFloat('.3') parseFloat('0.1e6') // // // // // // 1.45 77.3 77.3 0 0.3 100000
Exemple 2
parseInt('123.45') parseInt('77') parseInt('077',10) parseInt('77',8) parseInt('077') parseInt('77',16) parseInt('0x77') parseInt('099') parseInt('99',8) parseInt('0.1e6') parseInt('ZZ',36) // // // // // // // // // // // 123 77 77 63 (= 7 + 7*8) 63 (= 7 + 7*8) 119 (= 7 + 7*16) 119 (= 7 + 7*16) 0 (9 is not an octal digit) NaN (0 in very old browsers e.g. IE3) 0 1295 (= 35 + 35*36)
c) La porte dune variable Globale : la variable est visible depuis nimporte quel endroit. Locale : la variable nest visible que dans la fonction courante. Pour dclarer une variable locale à une fonction il faut utiliser le mot-cl var. d) Les littraux
Les entiers
Les entiers peuvent etre exprimes en base 8, 10 ou 16. Sil commence par 0 sa base est 8. Sil commence par 0x ou 0X sa bse est 16. Sinon sa base est 10.
Les rels
Utilisent . pour la virgule et e ou E pour la partie exposant.
Les chanes
On peut utiliser " ou pour dlimiter une chane. Quelques caractres spciaux peuvent tre utiliss à lintrieur : \ n pour un saut de ligne, \ r pour un retour au dbut de ligne, \ t pour une tabulation.
III-2) Les oprateurs

a)Les oprateurs logiques && cest le ET logique || le OU logique ! le NON logique b) Les oprateurs de comparaison == teste l egalit != teste linegalit > plus grand que < plus petit que > = plus grand ou gal < = plus petit ou gal c) Les oprateurs sur les chanes + Concatnation += Concatnation et affectation. c) Les oprateurs spciaux ? : (expressions conditionnelles). La forme est condition ? val1 : val2. Lorsque la condition est vraie la valeur de cette expression est val1, sinon val2. Exemple : mm=(age>=18) ?"majeur" :"mineur"
III-3) Les instructions a) Les commentaires

Deux formes possibles : // commentaire jusquen fin de ligne /* commentaire jusquà */
b) La dclaration de variables
Syntaxe : var nom1 [= valeur1] [..., nomN [= valeurN] ]. Par exemple : var i = 0, j = 2
c) La dclaration de fonctions
Existe sous deux formes syntaxiques possibles : function nom() { instructions } function nom(param1,...,paramN) { instructions } Par exemple :
function f(a,b,c) { var i = 1 }
e) Linstruction return
Permet de sortir dune fonction en cours en retournant une valeur à lappelant. Deux formes syntaxiques : return return expression
f) La boucle do ... while

Permet de r ealiser un bloc dinstructions tant quune certaine condition reste vraie. La forme est : do instruction-ou-bloc while(condition). Exemple : var s = 0, i = 0 do { s += i++ } while ( i <= 10 )
g) La boucle for
Ralise litration dun bloc dinstructions. La syntaxe est :
for (initialisation ;condition ;incrmentation) instruction-ou-bloc.

Exemple : for (var s=0,i=0; i<=10; i++) s += i ;
h) La boucle for ... in

Itrer un bloc dinstruction sur lensemble des proprits dun objet. Syntaxe : for (variable in objet) instruction-ou-bloc Exemple : document.writeln("<H1>Les proprits de mon navigateur</P>"); for (var i in navigator) document.writeln("<P>"+i+"="+navigator[i]+"</P>") Qui produit le rsultat : Les proprits de mon navigateur userAgent=Mozilla/4.76 [en] (X11; U; SunOS 5.6 sun4u) appCodeName=Mozilla appVersion=4.76 [en] (X11; U; SunOS 5.6 sun4u) appName=Netscape language=en platform=SunOS5.5.1 securityPolicy=US & CA domestic policy plugins=[object PluginArray] mimeTypes=[object MimeTypeArray] i) Le branchement multiple
switch
Permet dexcuter des instructions selectionns par la valeur dune expression. Par exemple : switch(i) { case 1: // qqe chose break case 2: // autre chose break default: // encore autre chose break }
j) La boucle while
Tant quune certaine condition est vrifie une instruction ou un bloc est execut e. Syntaxe : while (condition) instruction-ou-bloc .
k) Linstruction delete
Permet de supprimer une proprit dun objet, ou un lment dans un tableau. Trois formes sont possibles : delete objet.proprit delete objet[indice]
Par exemple :
t = new Array(1,2,3) for (var i=0; i<t.length; i++) { document.writeln(t[i]); } delete t[1]; document.writeln("<P>"); for (var i=0; i<t.length; i++) { document.writeln(t[i]); } Rsultat : 123 1 undefined 3
Boite de dialogue
Une bote de dialogue est une fentre qui s'affiche au premier plan suite un vnement, et qui permet

Soit d'avertir l'utilisateur Soit le confronter un choix Soit lui demander de complter un champ pour rcuprer une information
1)
La mthode alert()
La mthode alert() permet d'afficher dans une bote toute simple compose d'une fentre et d'un boutonOK le texte qu'on lui fournit en paramtre. Ds que cette bote est affiche, l'utilisateur n'a d'autre alternative que de cliquer sur le bouton OK.
2) La
mthode confirm()
La mthode confirm() est similaire la mthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la mthode renvoie la valeur true. Elle renvoie false dans le cas contraire...
3) La mthode prompt()
La mthode prompt est un peu plus volue que les deux prcdentes puisqu'elle fournit un moyen simple de rcuprer une information provenant de l'utilisateur, on parle alors de bote d'invite. La mthode prompt()requiert deux arguments : le texte d'invite la chane de caractres par dfaut dans le champ de saisie
IV) Le modle objet

IV-1) Objets et proprits Chaque objet possde un ensemble de proprits. La notation pour accder à lune dentre elle est : objet.propriet. Pour dfinir une proprit il suffit de lui associer une valeur : personne = new Object(); personne.nom = "Dupont" personne.prenom = "Jean" function toutvoir(o,s) { var result = "" for (var i in o) result += "<P>" + s + "." + i + " = " + o[i] return result }
lappel à toutvoir(personne,"p") produit le r sultat : p.nom = Dupont p.prenom = Jean IV-2)Fonctions Une fonction dfinit une entit de calcul. La syntaxe est : function <nom> ( <liste de paramètres> ) { <suite dinstructions> } Exemple : function somme(n) { var r = 0 ; for (var i = 1; i <= n; i++) r += i ; return r ; } document.writeln("<P>" + somme(10)); produit : Les arguments dune fonction sont accessibles à lintrieur de celle-ci en utilisant la proprit arguments qui est un tableau. Le premier argument est dindice 0 et il y en a arguments.length : function voirArguments() { var r = "" for (var i=0; i < voirArguments.arguments.length; i++) r += "Arg[" + i + "]=" + voirArguments.arguments[i] + " (de type " + typeof(voirArguments.arguments[i]) + ")<BR>" return r } document.writeln("<P>" + voirArguments("un","deux","trois",4)); produit : Arg[0]=un (de type string) Arg[1]=deux (de type string) Arg[2]=trois (de type string) Arg[3]=4 (de type number) IV-3)Mthodes Une mthode est une fonction associe à un objet. Pour raliser cette association il suffit dutiliser la syntaxe suivante : < objet>.< mthode> = < fonction>. Le mot-cl this permet de faire rfrence à lobjet courant. Exemple : function observe() { var result = "" for (var i in this) result += "<P>" + i + " = " + this[i] return result } p.maFonction = observe;
document.writeln(p.maFonction()); dont le rsultat est : p.nom = Dupont p.prenom = Jean p.maFonction = function observe(s) { var result = ""; for (var i in this) { result += "<P>" + s + "." + i + " = " + this[i]; } return result; } IV-4) La cration dobjets Bien que de nombreux objets soient dfinis par lenvironnement dexcution, il est videmment possible de crer de nouveaux objets. Pour cela il faut : dfinir un type dobjets en crant une fonction correspondante, crer une instance de ce type en utilisant : new function personne(nom,prenom) { this.nom = nom; this.prenom = prenom; } p = new personne("Dupont","Jean") Il est videmment possible de crer autant dobjets que lon dsire. Une proprit dun objet peut etre un autre objet. Exemple : function bureau(numero,proprietaire) { this.numero = numero this.proprietaire = proprietaire } p = new personne("Dupont","Jean"); b = new bureau("117",p); document.writeln("<P>"+toutvoir(p,"p")); document.writeln("<P>"+toutvoir(b,"b")); produit : p.nom = Dupont p.prenom = Jean b.numero = 117 b.proprietaire = [object Object] Dautre part on peut aussi rajouter dynamiquement des proprits aux objets à tout instant : p = new personne("Dupont","Jean"); b = new bureau("117",p); document.writeln("<P>"+toutvoir(p,"p")); document.writeln("<P>"+toutvoir(b,"b")); p2 = new personne("Durand","Jeanne"); p2.sexe = "F"; document.writeln("<P>"+toutvoir(p2,"p")); produit : p.nom = Dupont p.prenom = Jean
b.numero = 117 b.proprietaire = [object Object] p2.nom = Durand p2.prenom = Jeanne p2.sexe = F Attention : cela ne permet que dajouter des proprits à une instance particulire... Pour ajouter une proprit à tous les objets (existants ou futurs) dune classe il faut ajouter une proprit à la proprit prototype. Dfinition de mthode On peut maintenant dfinir des mthodes pour lobjet : function voirBureau() { return "Le bureau numro " + this.numero + " est affect à " + this.proprietaire.affiche() } function voirPersonne() { return this.prenom + " " + this.nom } b = new bureau(117,p); bureau.prototype.affiche = voirBureau ; personne.prototype.affiche = voirPersonne ; document.writeln("<P>"+b.affiche()); produit : Le bureau numro 117 est affect à Jean Dupont
V) Les Objets et fonction prdfinis

V-1) Les String : LES FONCTIONS DE MANIPULATION DES STRINGS charAt > charAt(n) n, entier, n<string.lenth-1, n>=O Retourne le caractre en position n dans la chane. indexof > indexof("chaine_de_caracteres") Retourne lindice du premier caractre correspondant "chaine_de_caractres" ou -l sil est absent. Indexof("chaine_de_caracteres",n) indique en plus un point de dpart. LastlndexOf > lastlndexOf("chaine_de_caractres") idem mais retourne lindice le plus lev substring > substring(n1,n2) Extrait la chaine de caractres comprise entre les deux indices n1 et n2. substr substring(position,longuer) La mthode retourne une sous-chane commenant l'index dont la position est donne en argument et de la longueur donne en paramtre.
concat(ch1,ch2,) Permet de concatner les chanes passes en paramtre, c'est-dire de les joindre bout bout. toLowerCase Transforme la chane de caractres en minuscules. to UpperCase Transforme la chane de caractres en majuscules. LA MISE AU FORMAT HTML Certaines fonctions permettent dajouter une string un ensemble de codes HTML automatiquement. anchor > anchor(URL) Cre une ancre HTML laide de lURL donne en argument. Exemple : "texte_lien". anchor(URL) Est quivalent : <A href=URL> texte_lien </A>. chain.slice(index1[,-index2]) Si index2 est absent, sous chane de chain comprise entre index1 et la fin de chane incluse. Si index2 est prsent, sous chane de chain comprise entre index1 et la fin de chane index2 exclue. Ex :
var abc="ABCDEABCDEF"; Affiche CDEABC : alert(abc.slice(2, -3)); Affiche CDEABCDEF : alert(abc.slice(2));
split(caractre de sparation) permet de convertir dune chane de caratres vers un tableau ex : var str="How are you doing today?"; var n=str.split(" "); rultat ca sera : un tableau qui contient les valeurs suivantes: How,are,you,doing,today?
V-2) Les Dates et les heures L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de faon native dans Javascript, et que l'on peut toujours utiliser. La syntaxe pour crer un objet-date peut tre une des suivantes :
Nom_de_l_objet = new Date()
cette syntaxe permet de stocker la date et l'heure actuelle
Nom_de_l_objet = new Date("Date au format standard")
les paramtres sont une chane de caractre suivant scrupuleusement la notation GMT standard, ex: Wed, 28 Jul 1999 15:15:20 GMT
Nom_de_l_objet = new Date("jour, mois date anne heures:minutes:secondes")
les paramtres sont une chane de caractre suivant scrupuleusement la notation cidessus
Nom_de_l_objet = new Date(anne, mois, jour)
les paramtres sont trois entiers spars par des virgules. Les paramtres omis sont mis zro par dfaut
Nom_de_l_objet = new Date(anne, mois, jour, heures, minutes, secondes[, millisecondes])
les paramtres sont six entiers spars par des virgules. Les paramtres omis sont mis zro par dfaut
b)connatre la date
Les mthodes dont le nom commence par le radical get (mot anglais qui signifie rcuprer) permettent de renvoyer une partie de l'objet Date : Mthode getDate() Description Permet de rcuprer la valeur du jour du mois Permet de rcuprer la getDay() valeur du jour de la semaine pour la date spcifie Type de valeurs retourne L'objet retourn est un entier (entre 1 et 31) qui correspond au jour du mois : L'objet retourn est un entier qui correspond au jour de la semaine :

0: dimanche 1: lundi ...
L'objet retourn est un entier qui Permet de rcuprer la getFullYear() valeur de l'ann sur 4 chiffres pour la date passe en paramtre </script> getHours() Permet de rcuprer la valeur de l'heure Permet de rcuprer le getMilliseconds() nombre de millisecondes L'objet retourn est un entier (entre 0 et 23) qui correspond l'objet Date. L'objet retourn est un entier (entre 0 et 999) qui correspond aux millisecondes de l'objet pass en paramtre. L'objet retourn est un entier (entre 0 et 59) qui correspond aux minutes de l'objet Date. L'objet retourn est un entier (entre 0 et 11) qui correspond au mois : correspond l'anne (XXXX) : <script language="Javascript">
getMinutes()
Permet de rcuprer la valeur des minutes Permet de rcuprer le numro du mois
getMonth()
0: janvier 1: fvrier ...
getSeconds()
Permet de rcuprer le nombre de secondes Permet de rcuprer le
L'objet retourn est un entier (entre 0 et 59) qui correspond aux secondes de l'objet pass en paramtre. L'objet retourn est un entier. Cette mthode est trs utile pour convertir des dates, soustraire ou ajouter deux dates, etc. L'objet retourn est un entier, il reprsente le nombre de minutes de dcalage L'objet retourn est un entier qui
getTime()
nombre de millisecondes depuis le 1erjanvier 1970 Retourne la diffrence
getTimezoneOffset()
entre l'heure locale et l'heure GMT (Greenwich Mean Time)
Permet de rcuprer la getYear() valeur de l'ann sur 2 chiffres pour l'objet Date.
correspond l'ann (XX) : <script language="Javascript">
</script>
Modifier le format de la date

Les deux mthodes suivantes ne permettent de travailler que sur l'heure actuelle (objet Date()) leur syntaxe est donc fige :
Mthode
Description Permet de convertir une date
Type de valeurs retourne L'objet retourn est une chane de caractre du type : Wed, 28 Jul 1999 15:15:20 GMT L'objet retourn est une chane de
toGMTString()
en une chane de caractres au format GMT
toLocaleString() Permet de convertir une date
en une chane de carctres au format local
caractre dont la syntaxe dpend du systme, par exemple : 28/07/99 15:15:20
Modifier la date
Les mthodes dont le nom commence par le radical set (mot anglais qui signifie rgler) permettent de modifier une valeur :
Mthode setDate(X)
Description Permet de fixer la valeur du jour du mois
Type de valeur en paramtre Le paramtre est un entier (entre 1 et 31) qui correspond au jour du mois Le paramtre est un entier qui correspond
setDay(X)
Permet de fixer la valeur du jour de la semaine
au jour de la semaine :

0: dimanche 1: lundi ...
setHours(X)
Permet de fixer la valeur de l'heure Permet de fixer la valeur des minutes
Le paramtre est un entier (entre 0 et 23) qui correspond l'heure Le paramtre est un entier (entre 0 et 59) qui correspond aux minutes Le paramtre est un entier (entre 0 et 11)
setMinutes(X)
setMonth(X)
Permet de fixer le numro du mois
qui correspond au mois : 0: janvier 1: fvrier ... Le paramtre est un entier reprsentant le
setTime(X)
Permet d'assigner la date nombre de millisecondes depuis le 1er janvier 1970

Cours Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Cours Javascript

II) Utilisation dans une page HTML

parseFloat (for conversion to a floating-point number) or parseInt (for string-to-integer conversion).

III-2) Les oprateurs

III-3) Les instructions a) Les commentaires

function f(a,b,c) { var i = 1 }

f) La boucle do ... while

for (initialisation ;condition ;incrmentation) instruction-ou-bloc.

h) La boucle for ... in

IV) Le modle objet

V) Les Objets et fonction prdfinis

Nom_de_l_objet = new Date()

cette syntaxe permet de stocker la date et l'heure actuelle

Nom_de_l_objet = new Date("Date au format standard")

Nom_de_l_objet = new Date("jour, mois date anne heures:minutes:secondes")

Nom_de_l_objet = new Date(anne, mois, jour)

Nom_de_l_objet = new Date(anne, mois, jour, heures, minutes, secondes[, millisecondes])

0: dimanche 1: lundi ...

Permet de rcuprer la valeur des minutes Permet de rcuprer le numro du mois

0: janvier 1: fvrier ...

Permet de rcuprer le nombre de secondes Permet de rcuprer le

nombre de millisecondes depuis le 1erjanvier 1970 Retourne la diffrence

entre l'heure locale et l'heure GMT (Greenwich Mean Time)

correspond l'ann (XX) : <script language="Javascript">

Modifier le format de la date

Description Permet de convertir une date

en une chane de caractres au format GMT

toLocaleString() Permet de convertir une date

en une chane de carctres au format local

caractre dont la syntaxe dpend du systme, par exemple : 28/07/99 15:15:20

Description Permet de fixer la valeur du jour du mois

Permet de fixer la valeur du jour de la semaine

0: dimanche 1: lundi ...

Permet de fixer la valeur de l'heure Permet de fixer la valeur des minutes

Permet de fixer le numro du mois

Permet d'assigner la date nombre de millisecondes depuis le 1er janvier 1970

Vous aimerez peut-être aussi