technologies du web 1javascript javascript i pr´esentation partielle, et parfois partiale...

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


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


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


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


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


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


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 }


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) { ...


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


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


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.


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


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


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 )


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;

}


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...


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


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


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


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


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


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"


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 !


technologies du web 1javascript javascript i pr´esentation partielle, et parfois partiale...

Documents