[PDF] Formation en Programmation JavaScript pdf | Cours informatique

(1)

introduction types fonctions structures conversions objets

javascript :

´

el´

ements du langage

(2)

au programme...

1 introduction 2 types 3 fonctions 4 structures 5 conversions 6 objets

(3)

au programme...

(4)

javascript

pr´esentation partielle, et parfois partiale

Javascript

un langage fonctionnel `a objet `a base de prototypes

oui, mais encore...

(5)

javascript

Javascript

oui, mais encore...

(6)

javascript

Javascript

oui, mais encore...

(7)

un langage de scripts, interpr´et´e

les scripts peuvent être placés dans les documents HTML le navigateur possède un interprète javascript

le code javascript permet

d’agir sur les propriétés des éléments d’un document HTML de manipuler l’arbre DOM

⇒ dynamicit´e du document affich´e

exemples : diaporama – extraction couleurs

(8)

les scripts peuvent ˆetre plac´es dans les documents HTML

le navigateur poss`ede un interpr`ete javascript

(9)

(10)

(11)

d’agir sur les propriétés des éléments d’un document HTML

de manipuler l’arbre DOM

(12)

(13)

(14)

(15)

int´

egration de javascript dans la page html

on utilise l’élément script, dans le corps ou l’entête du document. 2 cas de figure possibles :

code javascript directement plac´e dans le corps du fichier html :

<script type="text/javascript">

... code javascript ici

</script>

code javascript dans un fichier séparé précisé par l’attribut src de l’élément script :

<script src="unFichier.js" type="text/javascript"> </script>

exemples : code dans html – code dans fichier

NB : flux de chargement du fichier html

(16)

int´

egration de javascript dans la page html

</script>

(17)

int´

egration de javascript dans la page html

</script>

(18)

int´

egration de javascript dans la page html

</script>

(19)

int´

egration de javascript dans la page html

</script>

(20)

int´

egration de javascript dans la page html

</script>

(21)

int´

egration de javascript dans la page html

</script>

(22)

un style de programmation imp´

eratif

variables, types de donn´ees,

structures de contrôles : séquences, conditionnelles et itératives modularisation : fonctions

objets

Si vous connaissez un autre langageimp´eratif

une nouvelle syntaxe

quelques différences dans les règles de fonctionnement de nouvelles fonctions primitives à apprendre

(23)

un style de programmation imp´

eratif

objets

(24)

un style de programmation imp´

eratif

structures de contrôles : séquences, conditionnelles et itératives

modularisation : fonctions

objets

(25)

un style de programmation imp´

eratif

objets

(26)

un style de programmation imp´

eratif

objets

(27)

un style de programmation imp´

eratif

objets

(28)

un style de programmation imp´

eratif

objets

(29)

un style de programmation imp´

eratif

objets

quelques diff´erences dans les r`egles de fonctionnement

de nouvelles fonctions primitives `a apprendre

(30)

un style de programmation imp´

eratif

objets

(31)

au programme...

(32)

au programme...

(33)

types primitifs

boolean

2 constantestrue,false

op´erateurs : n´egation !, et logique&&, ou logiquek

number

pas de s´eparation nette entre entiers et flottants

op´erateurs : +,-,*,/(division flottante),%(reste de la division)

-Infinity,Infinity

string

pas de type caract`ere s´epar´e de string,

il faut consid´erer des chaˆınes de longueur 1

les chaˆınes se notent entre " ou ’ : "exemple",’un autre’

op´erateur de concat´enation : +

+ objetString=⇒ nombreuses m´ethodes

(34)

types primitifs

boolean

number

string

(35)

types primitifs

boolean

number

string

(36)

types primitifs

boolean

number

op´erateurs : +,-,*,/(division flottante), %(reste de la division)

-Infinity,Infinity string

(37)

types primitifs

boolean

number

(38)

types primitifs

boolean

number

(39)

types primitifs

boolean

number

string

(40)

types primitifs

boolean

number

(41)

types primitifs

boolean

number

(42)

types primitifs

boolean

number

(43)

types primitifs

boolean

number

(44)

types primitifs

boolean

number

(45)

variables

d´eclaration

Il faut déclarer les variables à l’aide du mot-clef var. Une variable doit être déclarée avant d’être utilisée.

affectation

L’op´erateur d’affectation se note =.

Une variable non initialis´ee a pour valeur nullou undefined

types-variables-et-predicats.js

(46)

variables

d´eclaration

Il faut déclarer les variables à l’aide du mot-clef var. Une variable doit être déclarée avant d’être utilisée.

affectation

L’op´erateur d’affectation se note =.

Une variable non initialis´ee a pour valeur nullou undefined

types-variables-et-predicats.js

(47)

au programme...

(48)

au programme...

(49)

fonctions

valeur de type fonction

le mot-clef function permet de d´efinir une donn´ee de type fonction,

on précise entre parenthèses lesparamètre formels, séparés par des virgules,

le corps de la fonction est not´e entre accolades,

la valeur de retour d’une fonction est pr´ecis´ee par return,

return n’est pas obligatoire (⇒ valeur retour = undefined)

function

(param1, param2, ...) {

... corps de la fonction

return expression;

}

(50)

fonctions

function(param1, param2, ...)

{

}

(51)

fonctions

function(param1, param2, ...) {

}

(52)

fonctions

function(param1, param2, ...) {

}

(53)

fonctions

appel et nommage

on appelle une fonction en précisant lesparamètres effectifs entre parenthèses

on peut nommer une fonction en d´efinissant une variable dont la valeur est de type fonction

exemple-fonction.js

(54)

fonctions

appel et nommage

on appelle une fonction en précisant lesparamètres effectifs entre parenthèses

on peut nommer une fonction en d´efinissant une variable dont la valeur est de type fonction

exemple-fonction.js

(55)

autre syntaxe

1 // ´eqv `a : 2 f u n c t i o n e x e m p l e ( x , y ) { // var e x e m p l e = f u n c t i o n ( x , y ) { 3 v a r v a l e u r = x + y ; 4 r e t u r n 2* v a l e u r + 1 ; 5 } 6 7 e x e m p l e (2 ,3) ; // v a u t 11

(56)

r`

egle de port´

ee

locale et globale

toute d´efinition de variable dans une fonction estlocale `a la fonction

une variable locale masque une variable globale de mˆeme nom

exemple-portee.js – avec debugger

(57)

au programme...

(58)

au programme...

(59)

s´

equence et bloc

s´equence

On construit une s´equence d’instructions en les s´eparant par un ; .

bloc d’instructions

Un bloc d’instructions en s´equence se note entre accolades. Un bloc d’instructions est une instruction.

!

Contrairement `bloc ne définit pas de rà de nombreux langages, en javascript unegle de portée. La seule règle de portée se situe au niveau des fonctions.

(60)

s´

equence et bloc

s´equence

!

(61)

s´

equence et bloc

s´equence

!

(62)

structure conditionnelle

if (condition) {

s´equence d’instructions si true

} else {

s´equence d’instructions si false

}

var collatz = function(i) { if (i % 2 == 0) { return i/2; } else { return 3*i+1; } }

la partie elsen’est pas obligatoire

false,0,"", NaN, null,undefined valent false, tout le reste vaut true

(63)

structures it´

eratives : pour

for (var i = inf; i < max ; i=i+1) { // i=i+1 s’´ecrit aussi i++ s´equence d’instructions } 1 v a r s o m m e E n t i e r s = f u n c t i o n( b o r n e M a x ) { 2 v a r s o m m e = 0; 3 for (v a r i = 0 ; i < b o r n e M a x ; i = i +1) { 4 s o m m e = s o m m e + i ; 5 } 6 r e t u r n s o m m e ; 7 } 8 9 s o m m e E n t i e r s ( 1 0 0 ) ; // s o m m e v a u t 4 9 5 0

(64)

structures it´

eratives : tant que

while ( condition ) { s´equence d’instructions } 1 v a r s o m m e C h i f f r e s = f u n c t i o n( n ) { 2 v a r r e s u l t = 0; 3 w h i l e ( n > 0) { 4 r e s u l t = r e s u l t + ( n % 10) ; 5 n = M a t h . f l o o r ( n / 1 0 ) ; 6 } 7 r e t u r n r e s u l t ; 8 } 9 s o m m e C h i f f r e s ( 1 2 3 4 5 ) ; // v a u t 15 do { s´equence d’instructions } while (condition) avec debugger

(65)

tant que et pour

Une boucle pour peut toujours s’´ecrire sous la forme d’une boucle tant que.

pour i variant de borne inf `a borne sup r´ep´eter

corps de boucle

≡

i ← borne inf

tant que i ≤ borne sup r´ep´eter debutBloc

corps de boucle i ← i + 1

finBloc

En javascript les boucles for sont des while d´eguis´ees :

for ( init; condition ; increment ) { s´equence d’instructions } ≡ init; while (condition ) { s´equence d’instructions; increment; }

(66)

tant que et pour

Une boucle pour peut toujours s’´ecrire sous la forme d’une boucle tant que.

pour i variant de borne inf `a borne sup r´ep´eter

corps de boucle

≡

i ← borne inf

tant que i ≤ borne sup r´ep´eter debutBloc

corps de boucle i ← i + 1

finBloc

En javascript les boucles for sont des while d´eguis´ees :

for ( init; condition ; increment ) { s´equence d’instructions } ≡ init; while (condition ) { s´equence d’instructions; increment; }

(67)

On peut donc aussi ´ecrire :

1 v a r s o m m e C h i f f r e s = f u n c t i o n( n ) { 2 for (v a r r e s u l t =0; n > 0; n = M a t h . f l o o r ( n /1 0 ) ) { 3 r e s u l t = r e s u l t + ( n % 10) ; 4 } 5 r e t u r n r e s u l t ; 6 } 7 s o m m e C h i f f r e s ( 1 2 3 4 5 ) ; // v a u t 15 mais cela ne veut pas dire que l’on doit le faire...

(68)

au programme...

(69)

au programme...

(70)

conversions de types

javascript est (tr`es) souple sur la notion de typage.

javascrit applique « automatiquement » certaines conversions de type sur les valeurs lorsque le contexte le n´ecessite :

vers le typeboolean(cf. remarque pr´ec´edente) vers le typestring

vers le typenumber

a une incidence sur la notion d’´egalit´e

(71)

conversion en bool´

een et en chaˆıne de caract`

eres

1 v a r v a l e u r B o o l e e n n e = f u n c t i o n( val ) { 2 if ( val ) { // d a n s ce c o n t e x t e v a l e u r b o o l ´e e n n e a t t e n d u e 3 r e t u r n " ’ "+ val +" ’ est c o n v e r t i en t r u e "; // c h a i n e a t t e n d u e 4 } 5 e l s e { 6 r e t u r n " ’ "+ val +" ’ est c o n v e r t i en f a l s e "; 7 } 8 } 9 10 v a l e u r B o o l e e n n e (" a b c d ") ; // - > ’ a b c d ’ est c o n v e r t i en t r u e 11 v a l e u r B o o l e e n n e (" ") ; // - > ’ ’ est c o n v e r t i en f a l s e 12 13 v a r x ; 14 v a l e u r B o o l e e n n e ( x ) ; // - > ’ u n d e f i n e d ’ est c o n v e r t i en f a l s e 15 x = 0; 16 v a l e u r B o o l e e n n e ( x ) ; // - > ’0 ’ est c o n v e r t i en f a l s e 17 x = 1; 18 v a l e u r B o o l e e n n e ( x ) ; // - > ’1 ’ est c o n v e r t i en t r u e

(72)

conversion en nombre

une chaˆıne dont les caract`eres repr´esentent un nombre est convertie en ce nombre

NB : dans un expression avec l’op´erateur + c’est la conversion vers chaˆıne qui l’emporte

NaN : Not a Number

valeur de conversion pour toute expression qui ne peut ˆetre convertie en un nombre

peut se tester avec fonction isNaN.

1 " 1 2 . 5 "*3; // - > 3 7 . 5 2 " 99 "-5; // - > 94 3 4 " 99 "+5 // - > " 9 9 5 " /!\ 5 6 " d e u x "*3; // - > NaN 7 i s N a N(" d e u x "*3) ; // - > t r u e

(73)

parseInt

et

parseFloat

convertissent une chaˆıne en nombre (entier ou flottant) seul le premier nombre dans la chaˆıne est retourné, les autres caractères (y compris correspondant à des nombres) sont ignorés si le premier caractère ne peut être converti en un nombre, le résultat sera NaN

les espaces en tˆete sont ignor´es

1 p a r s e F l o a t (" 1 . 2 4 ") ; // - > 1 . 2 4 2 p a r s e I n t (" 42 ") ; // - > 42 3 p a r s e I n t (" 42 est la r e p o n s e ") ; // - > 42 4 p a r s e I n t (" 42 est la r e p o n s e ") ; // - > 42 5 p a r s e I n t (" 42 e s t l a r e p o n s e ") ; // - > 42 6 p a r s e I n t (" 42 43 44 ") ; // - > 42 7 p a r s e I n t (" r e p o n s e = 42 ") ; // - > NaN

(74)

´

egalit´

es ´

etranges

!

Du fait de la conversion, dans certains cas des valeurs detypes différents peuvent être considérées égales.

1 1 == " 1 " // - > t r u e

2 10 != " 10 " // - > f a l s e

3 1 == " un " // - > f a l s e

4 0 == f a l s e // - > t r u e

5 " 0 " == f a l s e // - > t r u e /!\ a l o r s que "0" se c o n v e r t i t en t r u e

L’opérateur === teste à la fois le type et la valeur (négation !==).

1 1 === " 1 " // - > f a l s e

2 0 === f a l s e // - > f a l s e

3 10 === 9 + 1 ; // - > t r u e

4

5 1 !== " 1 "; // - > t r u e

(75)

au programme...

(76)

au programme...

(77)

objets

les objets possèdent des méthodes (= fonctions) une méthode s’invoque sur un objet

on utilise la « notation point´ee » exexmple : avec l’objet String

1 v a r s = n e w S t r i n g (" t i m o l e o n ") ; // c r ´e a t i o n d ’ un o b j e t S t r i n g 2 v a r sub = s . s u b s t r i n g (2 ,6) ; // sub v a u t " m o l e " 3 s . c h a r A t (4) ; // v a u t " l " 4 s . l e n g t h ; // v a u t 8 5 6 // c o n v e r s i o n des v a l e u r s s t r i n g v e r s o b j e t S t r i n g 7 " a b r a c a d a b r a ". c h a r A t (2) ; // v a u t " r " 8 " a b r a c a d a b r a ". s u b s t r i n g (4 ,8) ; // v a u t " c a d a "

(78)

window et document

Pour un document chargé dans un navigateur, 2 variables objet sont définies par défaut :

window représente la fenêtre du navigateur dans laquelle le document est chargé.

L’objet window est l’objet de base. Un objet window par onglet.

document représente le document DOM chargé dans la fenêtre.

(79)

premi`

eres interactions avec document html

en attendant mieux...

window.alert affiche une « popup » d’information

window.prompt

affiche une boˆıte de dialogue avec une zone de saisie de texte a pour r´esultat le texte saisi

attention : le r´esultat est de typestring, pr´evoir des conversions avec

parseIntouparseFloat si n´ecessaire.

document.writeet document.writeln

´

ecrit du texte dans le flux html

le texte écrit est interprété par le navigateur

attention : efface le contenu du document si le flux doit ˆetre r´eouvert

⇒ne pas utiliser pour modifier un document, uniquement lors de sa cr´eation ! (en fait ne pas utiliser du tout...)

exemples 1 –2 –3 –4

(80)

premi`

eres interactions avec document html

window.prompt

´

(81)

premi`

eres interactions avec document html

window.prompt

affiche une boˆıte de dialogue avec une zone de saisie de texte

a pour r´esultat le texte saisi

´

(82)

premi`

eres interactions avec document html

window.prompt

´

(83)

premi`

eres interactions avec document html

window.prompt

´

(84)

premi`

eres interactions avec document html

window.prompt

document.write et document.writeln

´

⇒ne pas utiliserpour modifier un document, uniquement lors de sa cr´eation ! (en fait ne pas utiliser du tout...)

(85)

premi`

eres interactions avec document html

window.prompt

´

(86)

premi`

eres interactions avec document html

window.prompt

´

(87)

premi`

eres interactions avec document html

window.prompt

´

(88)

premi`

eres interactions avec document html

window.prompt

´

(89)