Javascript Javascript : les bases du langage Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Universit´ e Lille 1 Universit´ e Lille 1 - Licence 1 SESI Technologies du Web 1 1
Javascript
Javascript : les bases du langage
Technologies du Web 1
Jean-Christophe RoutierLicence 1 SESI
Universite Lille 1
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 1
Javascript
Javascript
I presentation partielle, et parfois partiale
Javascriptun langage fonctionnel a objet a base de prototypes
I un langage de scripts, interpreteI les scripts peuvent etre places dans les documents htmlI le navigateur possede un interprete javascript
I le code javascript permetI d’agir sur les proprietes des elementsI de manipuler l’arbre DOMI ⇒ dynamicite du document affiche
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 2
Javascript
Integration de javascript dans la page html
2 cas de figure possibles :I code javascript directement place dans le corps du fichier html :
<script type="text/javascript">... code javascript ici</script>
I code javascript dans un fichier separe charge a l’aide de la balisescript et de son attribut src :
<script src="unFichier.js" type="text/javascript"></script>
NB : flux de chargement du fichier html
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 3
Javascript
Un style de programmation imperatif
Programmation imperativeCapitaliser ce qui a ete vu en InitProg et API1.
I variablesI structures de controles : conditionnelles et iteratives
I une nouvelle syntaxeI quelques differences dans les regles de fonctionnementI de nouvelles fonctions a apprendre
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 4
Javascript
Types primitifs
I booleanI 2 constantes true, falseI operateurs : negation !, et logique &&, ou logique ‖
I numberI pas de separation nette entre entiers et flottantsI operateurs : +, -, *, / (division flottante), % (reste de la division)I -Infinity, Infinity
I stringI pas de type caractere separe de string,
il faut considerer des chaınes de longueur 1I les chaınes se notent entre " ou ’ : "exemple", ’un autre’I operateur de concatenation : +I + objet String =⇒ nombreuses methodes
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 5
Javascript
Variables
DeclarationIl faut declarer les variables a l’aide du mot-clef var.Une variable doit etre declaree avant d’etre utilisee.
AffectationL’operateur d’affectation se note =.Une variable non initialisee a pour valeur null ou undefined
1 var x;2 x = 12;3 var texte = "timoleon";4 console.log(x); // 125 var y;6 console.log(y); // undefined7 console.log(z); // ReferenceError: z is not defined
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 6
Javascript
Quelques predicats
1 var x = 1;2 x == 1; // vaut true3 x != 1; // vaut false45 var s = "timoleon";6 s == "timoleon"; // vaut true7 s != "javascript"; // vaut true89 var y = 12;
10 x > y; // vaut false11 x <= y; // vaut true1213 s < "abracadabra"; // vaut false14 "un" >= "deux"; // vaut true1516 var z;17 z == null; // vaut true18 z == undefined; // vaut true19 z = 1;20 z == null; // vaut false
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 7
Javascript
Fonctions
Valeur de type fonctionI le mot-clef function permet de definir une donnee de type fonction,I on precise entre parentheses les parametre formels separes par des
virgules,I le corps de la fonction est note entre accolades,
la valeur de retour d’une fonction est precise par returnreturn n’est pas obligatoire (dans ce cas valeur retour = undefined)
1 function(x, y) {2 var valeur = x+y;3 return 2* valeur + 1 ;4 }56 function(x) {7 alert("la valeur est "+x);8 }
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 8
Javascript
Fonctions
Definition et appelI definir une fonction c’est definir une variable dont la valeur est de type
fonctionI on appelle une fonction en precisant les parametres effectifs entre
parentheses
1 var exemple = function(x, y) {2 var valeur = x+y;3 return 2* valeur + 1 ;4 }56 exemple (2,3); // vaut : 1178 exemple; // vaut : function(x,y) { ...
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 9
Javascript
Autre syntaxe
1 // eqv a :2 function exemple (x, y) { // var exemple = function(x,y) {3 var valeur = x+y;4 return 2* valeur + 1 ;5 }67 exemple (2,3); // vaut 11
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 10
Javascript
Regle de portee
Locale et globaleI toute definition de variable dans une fonction est locale a la fonction.I une variable locale masque une variable globale de meme nom.
1 var timo = 12; // def. globale , timo vaut 122 var leon = -5; // def. globale , timo vaut -53 var exemple = function () { // def. globale de exemple4 var timo = 2; // def. locale , timo vaut 25 var valeur = 10 ; // def. locale , valeur vaut 106 return 2* valeur + timo + leon; // valeur : 2*10 + 2 - 5 = 177 }89 exemple (); // vaut 17
10 timo; // vaut 1211 leon; // vaut -512 valeur; // Erreur : valeur non definie
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 11
Javascript
Sequence et bloc
SequenceLes instructions se terminent par un ; .
Bloc d’instructionsUn bloc d’instructions en sequence se note entre accolades.Un bloc d’instructions est une instruction.
AttentionContrairement a de nombreux langages, un bloc ne definit pas de regle deportee.La seule regle de portee se situe au niveau des fonctions.
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 12
Javascript
Structure conditionnelle
if (condition) {sequence d’instructions si true
}else {
sequence d’instructions si false}
var collatz = function(i) {if (i % 2 == 0) {
return i/2;}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
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 13
Javascript
Structures iteratives : pour
for (var i = inf ; i < max ; i=i+1) { // i=i+1 s’ecrit aussi i++sequence d’instructions
}
1 var sommeEntiers = function(borneMax) {2 var somme = 0;3 for(var i = 0 ; i < borneMax ; i=i+1) {4 somme = somme + i;5 }6 return somme;7 }89 sommeEntiers (100); // somme vaut 4950
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 14
Javascript
Structures iteratives : tant que
while ( condition ) {sequence d’instructions
}
1 var sommeChiffres = function(n) {2 var result = 0;3 while (n > 0) {4 result = result + (n % 10);5 n = Math.floor(n/10);6 }7 return result;8 }9 sommeChiffres (12345); // vaut 15
do {sequence d’instructions
} while (condition )
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 15
Javascript
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 repetercorps de boucle
≡i ← borne inftant que i ≤ borne sup repeterdebutBloc
corps de bouclei ← i + 1
finBloc
En javascript les boucles for sont des while deguisees :
for ( init ; condition ; increment ) {sequence d’instructions
}
≡init;while (condition ) {sequence d’instructions;increment;
}
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 16
Javascript
On peut donc aussi ecrire :1 var sommeChiffres = function(n) {2 for(var result =0; n > 0; n = Math.floor(n/10)) {3 result = result + (n % 10);4 }5 return result;6 }7 sommeChiffres (12345); // vaut 15
mais cela ne veut pas dire que l’on doit le faire...
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 17
Javascript
Conversions
I javascript est (tres) souple sur la notion de typage.I javascrit applique « automatiquement » certaines conversions de type
sur les valeurs lorsque le contexte le necessite :I vers le type boolean (cf. remarque precedente)I vers le type stringI vers le type number
I a une incidence sur la notion d’egalite
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 18
Javascript
Conversion en booleen et en chaıne
1 var valeurBooleenne = function(val) {2 if (val) { // dans ce contexte valeur booleenne attendue3 return "’"+val+"’ est converti en true"; // chaine attendue4 }5 else {6 return "’"+val+"’ est converti en false";7 }8 }9
10 valeurBooleenne("abcd"); // -> ’abcd’ est converti en true11 valeurBooleenne(""); // -> ’’ est converti en false1213 var x;14 valeurBooleenne(x); // -> ’undefined ’ est converti en false15 x = 0;16 valeurBooleenne(x); // -> ’0’ est converti en false17 x = 1;18 valeurBooleenne(x); // -> ’1’ est converti en true
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 19
Javascript
Conversion en nombre
I une chaıne dont les caracteres represente un nombre est convertie ence nombreNB : dans un expression avec l’operateur + c’est la conversion verschaıne qui l’emporte
I NaN : Not a Numbervaleur de conversion pour toute expression qui ne peut etre convertieen un nombrepeut se tester avec fonction isNaN.
1 "12.5"*3; // -> 37.52 "99" -5; // -> 9434 "99"+5 // -> "995" /!\56 "deux"*3; // -> NaN7 isNaN("deux"*3); // -> true
Universite 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 retourne, les autres
caracteres (y compris correspondant a des nombres) sont ignoresI si le premier caractere ne peut etre converti en un nombre, le resultat
sera NaNI les espaces en tete sont ignores
1 parseFloat("1.24"); // -> 1.242 parseInt("42"); // -> 423 parseInt("42 est la reponse"); // -> 424 parseInt(" 42 est la reponse"); // -> 425 parseInt("42 estlareponse"); // -> 426 parseInt("42 43 44"); // -> 427 parseInt("reponse = 42"); // -> NaN
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 21
Javascript
Egalites etranges
AttentionDu fait de la conversion, dans certains cas des valeurs de types differentspeuvent etre considerees egales.
1 1 == "1" // -> true2 10 != "10" // -> false3 1 == "un" // -> false4 0 == false // -> true5 "0" == false // -> true /!\ alors que "0" se convertit en false
L’operateur === teste a la fois le type et la valeur (negation !==).1 1 === "1" // -> false2 0 === false // -> false3 10 === 9+1; // -> true45 1 !== "1"; // -> true
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 22
Javascript
Objets
I les objets possedent des methodes (= fonctions)I une methode s’invoque sur un objetI on utilise la « notation pointee »
Ex : avec l’objet String1 var s = new String("timoleon"); // creation d’un objet String2 var sub = s.substring (2,6); // sub vaut "mole"3 s.charAt (4); // vaut "l"4 s.length; // vaut 856 // conversion des valeurs string vers objet String7 "abracadabra".charAt (2); // vaut "r"8 "abracadabra".substring (4,8); // vaut "cada"
Universite 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’informationI window.prompt
I affiche une boıte de dialogue avec une zone de saisie de texteI a pour resultat le texte saisi
Attention : le resultat est de type string, prevoir des conversionsavec parseInt ou parseFloat si necessaire.
I document.write et document.writelnI ecrit du texte dans le flux htmlI le texte ecrit est interprete par le navigateur
Attention : efface le contenu du document si le flux doit etre reouvert⇒ ne pas utiliser dans une fonction !
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 24