Javascript

Javascript : les bases du langage

Technologies du Web 1

Jean-Christophe Routier
Licence 1 SESI
Université Lille 1

Université Lille 1 - Licence 1 SESI Technologies du Web 1 1

 Javascript

Javascript

I présentation partielle, et parfois partiale

Javascript
un langage fonctionnel à objet à base de prototypes

I un langage de scripts, interprété

I les scripts peuvent être placés dans les documents html
I le navigateur possède un interprète javascript
I le code javascript permet
I d’agir sur les propriétés des éléments
I de manipuler l’arbre DOM
I ⇒ dynamicité du document affiché

Université Lille 1 - Licence 1 SESI Technologies du Web 1 2

 Javascript

Intégration de javascript dans la page html

2 cas de figure possibles :

I code javascript directement placé dans le corps du fichier html :

<script type="text/javascript">
... code javascript ici
</script>

I code javascript dans un fichier séparé chargé à l’aide de la balise

script et de son attribut src :
<script src="unFichier.js" type="text/javascript">
</script>

NB : flux de chargement du fichier html

Université Lille 1 - Licence 1 SESI Technologies du Web 1 3
 Javascript

Un style de programmation impératif

Programmation impérative
Capitaliser ce qui a été vu en InitProg et API1.

I variables
I structures de contrôles : conditionnelles et itératives

I une nouvelle syntaxe

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

Université Lille 1 - Licence 1 SESI Technologies du Web 1 4

 Javascript

Types primitifs

I boolean
I 2 constantes true, false
I opérateurs : négation !, et logique &&, ou logique k
I number
I pas de séparation nette entre entiers et flottants
I opérateurs : +, -, *, / (division flottante), % (reste de la division)
I -Infinity, Infinity
I string
I pas de type caractère séparé de string,
il faut considérer des chaı̂nes de longueur 1
I les chaı̂nes se notent entre " ou ’ : "exemple", ’un autre’
I opérateur de concaténation : +
I + objet String =⇒ nombreuses méthodes

Université Lille 1 - Licence 1 SESI Technologies du Web 1 5

 Javascript

Variables

Déclaration
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érateur d’affectation se note =.
Une variable non initialisée a pour valeur null ou undefined

var x ;
x = 12;
var texte = " timoleon " ;
console . log ( x ) ; // 12
var y ;
console . log ( y ) ; // undefined
console . log ( z ) ; // Re ferenceE rror : z is not defined

Université Lille 1 - Licence 1 SESI Technologies du Web 1 6

 Javascript

Quelques prédicats

var x = 1;
x == 1; // vaut true
x != 1; // vaut false

var s = " timoleon " ;

s == " timoleon " ; // vaut true
s != " javascript " ; // vaut true

var y = 12;
x > y; // vaut false
x <= y ; // vaut true

s < " abracadabra " ; // vaut false

" un " >= " deux " ; // vaut true

var z ;
z == null ; // vaut true
z == u n d e f i n e d ; // vaut true
z = 1;
z == null ; // vaut false

Université Lille 1 - Licence 1 SESI Technologies du Web 1 7

 Javascript

Fonctions

Valeur de type fonction

I le mot-clef function permet de définir une donnée de type fonction,

I on précise entre parenthèses les paramètre formels séparés par des

virgules,
I le corps de la fonction est noté entre accolades,
la valeur de retour d’une fonction est précisé par return
return n’est pas obligatoire (dans ce cas valeur retour = undefined)

f u n c t i on (x , y ) {
var valeur = x + y ;
return 2* valeur + 1 ;
}

f u n c t i on ( x ) {
alert ( " la valeur est " + x ) ;
}

Université Lille 1 - Licence 1 SESI Technologies du Web 1 8

 Javascript

Fonctions

Définition et appel
I définir une fonction c’est définir une variable dont la valeur est de type
fonction
I on appelle une fonction en précisant les paramètres effectifs entre
parenthèses

var exemple = f u n c t i o n (x , y ) {
var valeur = x + y ;
return 2* valeur + 1 ;
}

exemple (2 ,3) ; // vaut : 11

exemple ; // vaut : function (x , y ) { ...

Université Lille 1 - Licence 1 SESI Technologies du Web 1 9

 Javascript

Autre syntaxe

// éqv à :
f u n c t i o n exemple (x , y ) { // var exemple = function (x , y ) {
var valeur = x + y ;
return 2* valeur + 1 ;
}

exemple (2 ,3) ; // vaut 11

Université Lille 1 - Licence 1 SESI Technologies du Web 1 10

 Javascript

Règle de portée

Locale et globale
I toute définition de variable dans une fonction est locale à la fonction.

I une variable locale masque une variable globale de même nom.

var timo = 12; // déf . globale , timo vaut 12

var leon = -5; // déf . globale , timo vaut -5
var exemple = f u n c t i o n () { // déf . globale de exemple
var timo = 2; // déf . locale , timo vaut 2
var valeur = 10 ; // déf . locale , valeur vaut 10
return 2* valeur + timo + leon ; // valeur : 2*10 + 2 - 5 = 17
}

exemple () ; // vaut 17
timo ; // vaut 12
leon ; // vaut -5
valeur ; // Erreur : valeur non définie

Université Lille 1 - Licence 1 SESI Technologies du Web 1 11

 Javascript

Séquence et bloc

Séquence
Les instructions se terminent par un ; .

Bloc d’instructions
Un bloc d’instructions en séquence se note entre accolades.
Un bloc d’instructions est une instruction.

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

Université Lille 1 - Licence 1 SESI Technologies du Web 1 12

 Javascript

Structure conditionnelle

if (condition) { var collatz = function(i) {

séquence d’instructions si true if (i % 2 == 0) {
} return i/2;
else { }
séquence d’instructions si false else {
} return 3*i+1;
}
}

I la partie else n’est pas obligatoire

I false, 0, "", NaN, null, undefined valent false,

tout le reste vaut true

Université Lille 1 - Licence 1 SESI Technologies du Web 1 13

 Javascript

Structures itératives : pour

for (var i = inf ; i < max ; i=i+1 ) { // i=i+1 s’écrit aussi i++
séquence d’instructions
}

var sommeEntiers = f u n c t i o n ( borneMax ) {

var somme = 0;
for ( var i = 0 ; i < borneMax ; i = i +1) {
somme = somme + i ;
}
return somme ;
}

sommeEntiers (100) ; // somme vaut 4950

Université Lille 1 - Licence 1 SESI Technologies du Web 1 14

 Javascript

Structures itératives : tant que

while ( condition ) {
séquence d’instructions
}

var sommeChiffres = f u n c t i o n ( n ) {
var result = 0;
while ( n > 0) {
result = result + ( n % 10) ;
n = Math . floor ( n /10) ;
}
return result ;
}
sommeChiffres (12345) ; // vaut 15

do {
séquence d’instructions
} while (condition )

Université Lille 1 - Licence 1 SESI Technologies du Web 1 15

 Javascript

tant que et pour

Une boucle pour peut toujours s’écrire sous la forme d’une boucle tant que.
i ← borne inf
tant que i ≤ borne sup répéter
pour i variant de borne inf à borne sup répéter ≡ debutBloc
corps de boucle corps de boucle
i ←i+1
finBloc

En javascript les boucles for sont des while déguisées :

init;
for ( init ; condition ; increment ) { while (condition ) {
séquence d’instructions
≡ séquence d’instructions;
} increment;
}

Université Lille 1 - Licence 1 SESI Technologies du Web 1 16

 Javascript

On peut donc aussi écrire :

var sommeChiffres = f u n c t i o n ( n ) {
for ( var result =0; n > 0; n = Math . floor ( n /10) ) {
result = result + ( n % 10) ;
}
return result ;
}
sommeChiffres (12345) ; // vaut 15

mais cela ne veut pas dire que l’on doit le faire...

Université Lille 1 - Licence 1 SESI Technologies du Web 1 17

 Javascript

Conversions

I javascript est (très) souple sur la notion de typage.

I javascrit applique « automatiquement » certaines conversions de type
sur les valeurs lorsque le contexte le nécessite :
I vers le type boolean (cf. remarque précédente)
I vers le type string
I vers le type number
I a une incidence sur la notion d’égalité

Université Lille 1 - Licence 1 SESI Technologies du Web 1 18

 Javascript

Conversion en booléen et en chaı̂ne

var v al eu rB o ol ee nn e = f u n c t i o n ( val ) {
if ( val ) { // dans ce contexte valeur booléenne attendue
return " ’" + val + " ’ est converti en true " ; // chaine attendue
}
else {
return " ’" + val + " ’ est converti en false " ;
}
}

v al eu rB o ol ee nn e ( " abcd " ) ; // -> ’ abcd ’ est converti en true

v al eu rB o ol ee nn e ( " " ) ; // -> ’’ est converti en false

var x ;
v al eu rB o ol ee nn e ( x ) ; // -> ’ undefined ’ est converti en false
x = 0;
v al eu rB o ol ee nn e ( x ) ; // -> ’0 ’ est converti en false
x = 1;
v al eu rB o ol ee nn e ( x ) ; // -> ’1 ’ est converti en true

Université Lille 1 - Licence 1 SESI Technologies du Web 1 19

 Javascript

Conversion en nombre

I une chaı̂ne dont les caractères représente un nombre est convertie en

ce nombre
NB : dans un expression avec l’opérateur + c’est la conversion vers
chaı̂ne qui l’emporte
I NaN : Not a Number
valeur de conversion pour toute expression qui ne peut être convertie
en un nombre
peut se tester avec fonction isNaN.
" 12.5 " *3; // -> 37.5
" 99 " -5; // -> 94

" 99 " +5 // -> "995" /!\

" deux " *3; // -> NaN

isNaN ( " deux " *3) ; // -> true

Université Lille 1 - Licence 1 SESI Technologies du Web 1 20

 Javascript

parseInt et parseFloat

I convertissent une chaı̂ne en nombre (entier ou flottant)

I seul le premier nombre dans la chaı̂ne est retourné, les autres
caractères (y compris correspondant à des nombres) sont ignorés
I si le premier caractère ne peut être converti en un nombre, le résultat
sera NaN
I les espaces en tête sont ignorés
parseFloat ( " 1.24 " ) ; // -> 1.24
parseInt ( " 42 " ) ; // -> 42
parseInt ( " 42 est la reponse " ) ; // -> 42
parseInt ( " 42 est la reponse " ) ; // -> 42
parseInt ( " 42 estlareponse " ) ; // -> 42
parseInt ( " 42 43 44 " ) ; // -> 42
parseInt ( " reponse = 42 " ) ; // -> NaN

Université Lille 1 - Licence 1 SESI Technologies du Web 1 21

 Javascript

Egalités étranges

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

1 == " 1 " // -> true

10 != " 10 " // -> false
1 == " un " // -> false
0 == false // -> true
" 0 " == false // -> true /!\ alors que "0" se convertit en false

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

1 === " 1 " // -> false
0 === false // -> false
10 === 9+1; // -> true

1 !== " 1 " ; // -> true

Université Lille 1 - Licence 1 SESI Technologies du Web 1 22

 Javascript

Objets

I les objets possèdent des méthodes (= fonctions)

I une méthode s’invoque sur un objet
I on utilise la « notation pointée »

Ex : avec l’objet String

var s = new String ( " timoleon " ) ; // création d ’ un objet String
var sub = s . substring (2 ,6) ; // sub vaut " mole "
s . charAt (4) ; // vaut " l "
s . length ; // vaut 8

// conversion des valeurs string vers objet String

" abracadabra " . charAt (2) ; // vaut " r "
" abracadabra " . substring (4 ,8) ; // vaut " cada "

Université Lille 1 - Licence 1 SESI Technologies du Web 1 23

 Javascript

Premiers liens avec document html

En attendant mieux...
I window.alert affiche une « popup » d’information
I window.prompt
I affiche une boı̂te de dialogue avec une zone de saisie de texte
I a pour résultat le texte saisi
Attention : le résultat est de type string, prévoir des conversions
avec parseInt ou parseFloat si nécessaire.
I document.write et document.writeln
I écrit du texte dans le flux html
I le texte écrit est interprété par le navigateur
Attention : efface le contenu du document si le flux doit être réouvert
⇒ ne pas utiliser dans une fonction !

Université Lille 1 - Licence 1 SESI Technologies du Web 1 24