Définition
JavaScript est un langage de programmation de scripts
C’est un langage orienté objet inspiré de nombreux langages dont
Java mais il reste très différent de celui-ci.
Le langage est maintenant une implémentation de la norme
ECMA-262 (standard ECMAScript).
Le langage a été créé en 1995 par Brendan Eich, membre de la fondation
Mozilla, pour le compte de Netscape Communications Corporation.
2 / 21
Présentation de JavaScript
Côté client :
• Le code javaScript est exécuté par le
navigateur Web.
Côté serveur :
• On peut maintenant utiliser JavaScript sur le
serveur grâce à l'interpréteur Node.js
Comment exécuter javaScript
Dans ce cours javaScript sera utilisé
comme un langage côté client
Pour exécuter javaScript, nous avons besoin du
navigateur (il contient un interpréteur de javaScript),
de la page web qui contiendra le code javascript.
Faiblesses:
• non sécurisé
• peut être désactivé par le client
• Dépend du navigateur
Ce que javaScript peut faire:
Contenu vide du body
Après exécution
exemple
Ajouter du contenu à
la page web
Ce que javaScript peut faire:
Modifier le style du div
Après le clicexemple
Modifier le style de la
page web
Ce que javaScript peut faire:
Calcul le nbre de clic
Si on clique plus
d’une fois
Traiter un formulaire
exemple
Les scripts Javascript :
Sont de simples fichiers ”texte” (extension
conseillée .js) à créer avec un éditeur de texte.
Les scripts en Javascript sont ”débogables” avec l’outil kit de développement du navigateur et tout simplement avec la ”Console d’erreurs” de ce navigateur.
10 / 21
Présentation de JavaScript
Deboguer les scripts Javascript
11 / 21
Présentation de JavaScript
Pour ouvrir le kit de développement de votre
navigateur, appuyez sur la touche F12
Puis ouvrez la console en cliquant sur l'onglet
correspondant en haut du kit.
Balises spécifiques indispensables
<script> code ici </script>
JavaScript désactivé
<noscript> Cette page n’utilise pas JavaScript
</noscript>
insertion de code JS dans la page web
<!DOCTYPE HTML
<html><head>
<title>test JS</title><script src="script.js"></script>
</head><body>
<script
function affiche_date(){var aujourdhui = new Date();
alert(aujourdhui.toLocaleString());}
</script><noscript><p>activez JS !</p></noscript><div>
<h1>Test jS</h1>
<a href="javascript:affiche_date()">date</a>
<form action="test.php"><div><input type="button" value="clic" onclick="pair()"></div>
</form></div>
</body></html>
function pair(){nb = prompt('entrez un nombre', ''); (nb%2 == 0) ? alert('pair') : alert('impair');}
mercredi26 octobre 2011 23:10:18
script.js
entrez un nombreimpair
Le code peut être placé dans:
(1) fichier externe .js
(2) élément script
(3) attribut contenant URL
(4) attribut événementiel
2
1
3
4
hello
•Voir un exemple
1
2
4
3
1
Entrée et sortie de données avec JavaScript
<html><head>
<title> une page simple </title>
<script >
alert (" une alerte déclenchée par le script");
</script>
</head>
<body>
</body></html>
– 1. Méthode alert()• La méthode alert(TEXTE) sert à afficher à l’utilisateur des informations
simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte
Entrées/Sorties
Entrée et sortie de données avec JavaScript
<html>
<head>
<title> une page simple </title>
<script language =" javascript ">
prompt( (" quel est votre nom ?" );
</script>
</head>
<body>
</body>
/html>
Entrées/Sorties
Entrée et sortie de données avec JavaScript
• 3. Méthode confirm()
• La méthode confirm() permet à l’utilisateur de choisir entre les boutons OK et Annuler.
Entrées/Sorties
Entrée et sortie de données avec JavaScript
– Méthode confirm()
<html>
<head>
<title> une page simple </title>
</head>
<body>
<script>
confirm( (" c’est votre choix ? ");
</script>
</body>
/html>
Entrées/Sorties
Une alternative à alert() qui bloque le chargement
de la page, on peut utiliser console.log().
Entrées/Sorties
exemple
Entrée et sortie de données avec JavaScript
– Méthode Write()
• La méthode write() permet à l’utilisateur
d’afficher des informations sur le document
ouvert.
•Précautions exemple
Entrées/Sorties
bases du langage
var ne = 0; var age = 0; var txt = '';
/* tant que l'utilisateur n'a pas saisi uneannee correcte afficher boite dialogue */
do {ne = prompt('annee ', '');
} while ( !exp.test(ne ) || (ne > annee_courante));
age = annee_courante - ne;
marque de fin d’instruction
marques
de bloc
commentaires
txt= 'vous avez ' + age + ' ans';
(age%10 == 0) ? alert(txt+' ... nouvelle decennie') : alert(txt);
opérateur conditionnel
ternaire
variable
types booleannumberstring objectnullundefined
opérateursaffectation
= += -= *= /= %=
logiques ! && ||
relationnels
< <= > >= == != === !==
arithmétiques + -
*/ %
concaténation +
autres opérateurs
Règles sur les noms de variables
• ne peut contenir que des caractères alphanumériques, c-à-d les lettres de A à Z et les chiffres de 0 à 9.
• peut également contenir l'underscore _ et le dollar $.
• ne peut pas commencer par un chiffre. Ne peut pas utiliser de mots-clés utilisé par JavaScript.
• Attention JavaScript est un langage sensible à la casse.
• Javascript est faiblement (dynamiquement) typé.
bases du langage
La méthode typeof : Permet de déterminer le type d'une variable.
• var Nombre = 2;
– Chaine = typeof Nombre // chaine contient "number"
• var UnTexte = "un texte exemple";
– Chaine = typeof UnTexte // chaine contient "string"
• var UnBooleen = true;
– Chaine = typeof UnBooleen // chaine contient "boolean"
• Chaine = typeof UneVariable // la variable UneVariable n'est pas
initialisée // la chaine contient "undefined "
bases du langage
Valeurs particulières • null permet d'initialiser les variables.
• undefined correspond à la valeur d'une variable non initialisée ou d'une propriété non existante pour un
objet.
• NaN: valeur de conversion pour toute expression qui ne peut être convertie en un nombre
Peut se tester avec fonction isNaN
bases du langage
Typage des variables à l’affectationvar v ;
window.alert("Type de " + v + " : " + typeof v) ;
v = 12 ;
window.alert("Type de " + v + " : " + typeof v) ;
v = 12.42 ;
window.alert("Type de " + v + " : " + typeof v) ;
v = 'hello' ;
window.alert("Type de " + v + " : " + typeof v) ;
v = true ;
window.alert("Type de " + v + " : " + typeof v) ;
undefined
number
number
string
boolean
bases du langage
Portée des variables
bases du langage
function f (x, y) {
if (y !=0)
{ let result = x/y; };
return result; // erreur, result n'est pas défini
}
Déclaration avec let: introduit un scope par bloc
Portée des variables : illustrationvar a = 'contenu variable a' ;
function f() {
b = 'contenu variable b' ;
var c = 'contenu variable c' ;
window.alert("Dans f() a est de type " + typeof a) ;
window.alert("Dans f() b est de type " + typeof b) ;
window.alert("Dans f() c est de type " + typeof c) ;
window.alert("Dans f() i est de type " + typeof i) ;
}
function g() {
for (var i=0; i<1; i++) { document.write(i) ; }
window.alert("Dans g() a est de type " + typeof a) ;
window.alert("Dans g() b est de type " + typeof b) ;
window.alert("Dans g() c est de type " + typeof c) ;
window.alert("Dans g() i est de type " + typeof i) ;
}
window.alert("Au niveau global a est de type " + typeof a) ;
window.alert("Au niveau global b est de type " + typeof b) ;
window.alert("Au niveau global c est de type " + typeof c) ;
window.alert("Au niveau global i est de type " + typeof i) ;
f() ;
g() ;
string
undefined
undefined
undefined
string
string
string
undefined
string
string
undefined
number
exemple
bases du langage
Concaténation Conversion de typeParticularité de l'opérateur + :En plus de faire des additions, cet opérateur permet de faire des
opérations sur les chaines de caractères : la concaténation.
Exemple :
var Chaine1 = 'bonjour', Chaine2 = 'le monde';var Chaine3 = Chaine1 + " " + Chaine2;
// Chaine3 contient "bonjour le monde"
bases du langage
Conversion de type
Attention au type des variables lorsque vous utilisez l'opérateur +
Exemple
var Chaine = "Voici le résultat de 2x4 : " ;
Res = Chaine + 2*4;
Alert(Res);
bases du langage
Conversion de type
• " 12.5 " *3; // -> 37.5
• "99" -5; // -> 94
• "99"+5 ; // -> "995"
• " 1sz2" *4; // -> NaN
• " deux " *3; // -> NaN
• isNaN (" deux " *3) ; // -> true
• (" 2 " ==2); // -> true
• (" 2 " = ==2); // -> false
bases du langage
Conversion de typeparseInt()
parseFloat()
Chaine entier
Chaine flottant
bases du langage
parseFloat (" 1.24 "); // -> 1.24
parseInt ("42") ; // -> 42
parseInt ("42 est la reponse ") ; // -> 42
parseInt ("42 43 44"); // -> 42
parseInt (" reponse = 42"); // -> NaN
Les constantesIl est parfois nécessaire de définir une valeur une seule fois pour l'utiliser
en lecture sans jamais la modifier.
JavaScript propose pour cela le mot-clé const.
Exemple :
const Chaine= " Bonjour "
const Chaine= " Bonsoir "
bases du langage
bases du langage
while (expr){
…
}
do{
…
} while (expr);
for (exp1 ; exp2 ; exp3){
...
}
for (var i in objet){
...
}
Instructions
conditionnelles
if (expr){
// code si expression true
}
else {
// code si expression false
}
var today = new Date();
switch (today.getDay()){
case 0 :
case 6 : jour = "week-end"; break;
case 1 :
case 2 :
case 4 :
case 5 : jour = "semaine"; break;
case 3 : jour = "mercredi"; break;
default : jour = "non defini"; } alert(jour);
Instructions itératives
Instructions
d’interruption :break, continue
<input type="text" name="nb1"> +
<input type="text" name="nb2"> =
<input type="text" name="res">
<input type="button" value="calculer"
onclick="res.value = nb1.value + nb2.value">
<input type="button" value="calculer" onclick="res.value = parseFloat(nb1.value) +
parseFloat(nb2.value)">
bases du langage
Chaînes de caractères
Création
var ch1 = new String('hello !');
var ch2 = 'hello !';
ch2 = "test";
Caractères spéciaux
Caractère d’échappement : \
Caractères espacement : \n \t\f
Propriétés
Taille d’une chaîne : length
Méthodes
substring, toLowerCase, toUpperCase
split, …
Conversion :
bases du langage
Fonctions
Déclaration
function nom_fonction([arg1,...,argN]){
...
return expression; // optionnel
}
Appel
nom_fonction(arg1, arg2) ;
Méthodes
ceil, floor, round min, max randomabs, sqrt, powtrigonométrie : sin, cos, …
alert(Math.ceil(7.48));alert(Math.random());
bases du langage
Fonction anonyme
Une fonction peut être enfermée dans une
variable, puis ensuite appeler cette variable
comme une fonction.
bases du langage
Table
auxCréation
var tab1 = new Array(val1, val2, …);
var tab2 = *val1, val2, …+;
var tab3 = new Array();
• var tab = new Array(125, 'hello', false);
• tab[0] = 'xxx';
• var contenu = '';• for (var i=0; i < tab.length; i++){
contenu += tab[i]+', ';• }
• alert(contenu);
• contenu = ''; tab.reverse(); for (i in tab){
• contenu += tab[i]+', ';
• }
• alert(contenu);
Méthodes
join, reverse, sort, …
Propriétés
Taille d’un tableau : length
Accès
tab[i] avec i >= 0
Parcours
for, for in, while
125 hello false
xxx hello false
2
length : 3
0 1
xxx, hello, false,
false hello xxx
false, hello, xxx,
•On peut utiliser le mot clef new et créer un
objet à partir de Object() ;
•On peut créer un objet littéral ;
•On peut définir un constructeur puis créer des
objets à partir de celui-ci.
Création d’objets
bases du langage