SlideShare une entreprise Scribd logo
09/06/2015Formation en Développement WEB
Formation en Développement WEB
[JavaScrip]
09/06/2015Formation en Développement WEB
Les bases de JavaScript
Les bases de
JavaScript
09/06/2015Formation en Développement WEB
Les bases de JavaScript - Plan
› Introduction
› Le rôle de JavaScript
› Intégrer JavaScript ans une page web
› Les règles de syntaxe du code
› Constantes et Variables
› Types de données
› Les opérateurs
› Les structures de contrôle
› Les boîtes de dialogue
› les Tableaux
› les chaines de caractères
› les Dates
› Les expressions régulières
› Les Fonctions
› Gestion des exceptions
› la Programmation Orientée Objet
09/06/2015Formation en Développement WEB
Les bases de JavaScript - Introduction
Le JavaScript est la partie client d’un langage de scriptage. Développer par netscape, le
JavaScript est utilisé avec le HTML pour la création d'un site Web.
Initialement les pages Web ont été conçues uniquement avec le html. Le html qui n'est rien
d'autre que des pages statiques. L'interaction avec l'utilisateur et les changements
dynamiques ne sont pas possible avec le html. Un problème résolu avec la venue des
langages de script.
Le JavaScript fonctionne avec la plupart des navigateurs principaux tels que l'Internet
Explorer, Mozilla, Firefox, Netscape, Opera, Safari et plus encore.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Le rôle de JavaScript
› Contrôler dynamiquement une page web (lire, modifier, supprimer des éléments) au
niveau du navigateur. La page web chargée, elle est manipulée au niveau du client sans
nouvel échange avec le serveur.
› Lire/écrire un cookie
› Utiliser des événements afin de déclencher des actions dans la page web, sans
communication avec le serveur (ex : afficher du texte, une image suite à un click ou au
survol d'une zone).
JavaScript ne pet pas:
- lire des informations contenues sur le serveur (c'est le travail de PHP, Java, Perl...)
- lire des informations contenues sur le poste client (à l'exception des cookies). (ouf !).
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Intégrer JavaScript ans une page web
Il est théoriquement possible d'insérer du code Javascript dans le HEADER ou n'importe où
dans le BODY d'une page web.
Dans le fichier HTML: Entre des balises <script type="text/javascript>...</script>
Dans un fichier externe: On appellera un fichier Javascript externe "nom_de_fichier.js"
dans le HEADER comme suit :<script src= " script.js" type="text/javascript"></script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les règles de syntaxe du code
Pour bien débuter en JavaScript le respect de ces règles est fondamental, car ce langage
est peu souple et n’autorise pas d’erreurs
La casse: Une des principales difficultés de JavaScript réside dans le fait que c’est un
langage sensible à la casse, c’est à dire qu’il différencie les majuscules des minuscules.
Les commentaires: L’ajout de commentaires dans un bloc de code JavaScript s’effectue de
manière mono-ligne " //commentaire " ou multi-lignes " /*commentaire*/ ".
Le point-virgule: Chaque ligne de code JavaScript se termine généralement par un point-
virgule sauf exception de syntaxe.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Constantes et Variables
Pour faire simple, une variable est un espace de stockage sur votre ordinateur permettant
d'enregistrer tout type de données, que ce soit une chaîne de caractères, une valeur
numérique ou bien des structures un peu plus particulières.
Déclarer une variable: c’est tout simplement lui réserver un espace de stockage en
mémoire. Il est important de préciser que le nom d'une variable ne peut contenir que des
caractères alphanumériques. Autre chose : le nom de la variable ne peut pas commencer
par un chiffre.
// Variable initialisée avec une chaîne de caractères
var variable1 = "mon texte d’initialisation";
// Variable non initialisée
var variable2;
// Définition de plusieurs variables en une seule instruction
var variable3 = 2, variable4 = "mon texte d’initialisation";
09/06/2015Formation en Développement WEB
Les bases de JavaScript – La portée des Variables
Lorsqu’on affecte une variable, nous pouvons manipuler la valeur affectée à cette variable.
Elle nous est donc accessible. Cependant, cette accessibilité dépend de l’endroit où la
variable a été affectée. On parle donc de la portée de la variable.
› Une variable déclarée en dehors de toute fonction peut être utilisée n’importe où dans
le script. On parle alors de VARIABLE GLOBALE.
› Une variable déclarée dans une fonction aura une portée limitée à cette seule fonction,
c’est-à-dire quelle est inutilisable ailleurs. On parle alors de VARIABLE LOCALE.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Le Typage
JavaScript est un langage non typé. Cela signifie que le type d’une variable est défini
uniquement au moment de l’exécution.
L’interpréteur JavaScript a la responsabilité de créer la valeur du bon type en fonction de
l’initialisation ou de l’affectation. Le langage n’impose pas l’initialisation des variables au
moment de leur création. Cependant il y a quelques types préexistants.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Types de données
Les types de données principales (primitives) sont :
› String: suite de un ou plusieurs caractères Unicode, utilisé pour représenter du texte
› Number: en JavaScript un nombre peut être un entier ou un réel, en interne il es toujours
représenté comme un réel.
› Boolean: est une valeur de vérité, elle spécifie si la condition est vrai ou non. il ne reconnaît que les
deux littéraux true et false.
Les types de données composites (référence) sont : Dans JavaScript, les objets et les
tableaux sont gérés quasiment de la même manière, car les tableaux sont simplement un
type particulier d'objet.
› Object: est un ensemble de correspondances entre des clés et des valeurs. Les clés sont
représentées par des chaînes ou des symboles. Les valeurs peuvent être de n'importe quel type.
› Tableau: est un ensemble d'éléments contigus repérés par leur indice, qui est un nombre entier.
Les types de données spéciaux sont :
› Null: ce type n'a qu'une seule valeur (Null), null n'est pas identiques à 0.
› Indéfini: La valeur undefined est retournée lorsque vous utilisez une propriété d'objet qui n'existe
pas, ou une variable qui a été déclarée, mais à qui aucune valeur n'a été affectée.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Types de données
Il se peut que vous ayez un jour ou l'autre besoin de tester l'existence d'une variable ou
d'en vérifier son type. Dans ce genre de situations, l'instruction typeof est très utile, voici
comment l'utiliser :
var number = 2;
alert(typeof number); // Affiche : « number »
var text = 'Mon texte';
alert(typeof text); // Affiche : « string »
var aBoolean = false;
alert(typeof aBoolean); // Affiche : « boolean »
alert(typeof nothing); // Affiche : « undefined »
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur les variables
<script>
var var_globale="globale";
var test;
function locale(){
var var_local="locale";
var_globale="globale modifié";
return var_local;
}
test = locale();
function test_var(){
alert(var_globale);
alert(test);
alert("la valeur local:"+typeof(var_local));
}
</script>
<script>
var var_chaine="une chaine de caractère";
var var_numeric=1981;
var var_boolean=true;
alert("type : var_chaine est: "+typeof(var_chaine));
alert("type : var_numeric est: "+typeof(var_numeric));
alert("type : var_boolean est: "+typeof(var_boolean));
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Précédemment nous avons vus les variables, maintenant nous allons voir comment les
manipuler ou les évaluer. Pour se faire Javascript a mis à notre disposition un ensemble
d'opérateurs classés en 5 groupes:
› Les opérateurs de calcul (arithmétiques);
› Les opérateurs de comparaison;
› Les opérateurs associatifs;
› Les opérateurs logiques;
› Les opérateurs d'incrémentation.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Les opérateurs de calcul (arithmétiques):
Ils nous permettent de manipuler des Nombres.
Dans les exemples, la valeur initiale de x sera toujours égale à 11
Signe Nom Signification Exemple Résultat
+ plus addition x + 3 14
- moins soustraction x - 3 8
* multiplié par multiplication x*2 22
/ divisé par division x/2 5.5
% modulo reste de la division x%5 1
= a la valeur affectation x=5 5
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Les opérateurs de comparaison:
Retourne une valeur booléenne indiquant le résultat de la comparaison.
Signe Nom Exemple Résultat
== égal x==11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> supérieur x>11 false
=< supérieur ou égal x>=11 true
!= différent x!=11 false
=== strictement égal a ==='11' false
!== strictement différent a !== '11' true
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Les opérateurs associatifs:
Le but de ces opérateurs et de simplifier les affectations:
Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.
Signe Description Exemple Signification Résultat
+= plus égal x+=y x=x+y 16
-= moins égal x-=y x=x-y 6
*= multiplié égal x*=y x=x*y 55
/= divisé égal x/=y x=x/y 2.2
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Les opérateurs logiques:
Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou plusieurs
conditions.
Signe Nom Exemple Signification
&& et (condition1) && (condition2) (condition1) et (condition2)
|| ou (condition1) || (condition2) (condition1) ou (condition2)
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les opérateurs
Les opérateurs d'incrémentation:
Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité.
Signe Exemple Signification
++ A=A++ A=A+1
-- A=A-- A=A-1
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
Les structures de contrôle alternatives (ou conditionnelles) et itératives (ou répétitives)
nécessitent l’usage d’un test spécifique appelé condition. La condition est une expression
dont le résultat de son évaluation prend toujours ses valeurs dans l’ensemble des
booléens (true ou false).
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
Les structures alternatives (ou conditionnelles)
On appelle structure alternative ou conditionnelle l’ensemble des instructions (le
traitement) qui sont réalisées si une condition est vraie ou non. Les structures
conditionnelles nécessitent l’usage d’un test appelé condition.
if (condition)
{
liste d'instructions // si la condition
réalisée (vraie)
}else{
autre série d'instructions // si la
condition n’est pas réalisée (fausse)
}
L'instruction if ... else
switch(expression) {
case Valeur1:
code block
break;
case Valeur1 :
code block
break;
default:
default code block
}
L'instruction switch
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur Les structures de contrôle
<script>
var var_chaine="une chaine de caractère";
var var_numeric=1981;
var var_boolean=true;
var var_date= new Date();
var Montype = typeof(var_numeric);
switch(Montype.toString()) {
case 'object':
alert("type OBJECT");
break;
case 'string' :
alert("type STRING");
break;
case 'number' :
alert("type NUMBER");
break;
case 'boolean' :
alert("type BOOLEAN");
break;
}
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
Les structures itératives (ou répétitives : les boucles)
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série
d'instructions jusqu'à ce qu'une condition ne soit plus réalisée.
La façon la plus commune de faire une boucle, est de créer un compteur et de faire
arrêter la boucle lorsque le compteur dépasse une certaine valeur.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
La boucle for
Cette instruction crée une boucle qui se base sur trois expressions. Ces expressions sont
entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter
dans la boucle.
for ([initialisation]; [condition]; [expression_finale])
insruction
for (var i = 0; i < 9; i++) {
i *= i;
alert(‘la valeur de i * i est:’+ i);
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
while (condition) {
instruction
}
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
La boucle while
Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test
est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la
boucle.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les structures de contrôle
do
instruction
while (condition);
var i = 0;
do {
i ++;
document.write(i);
} while (i < 5);
La boucle do...while
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La
condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette
boucle sera exécutée au moins une fois.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur Les structures de contrôle
<script>
var Nbr_Max=10;
var iterateur_p=0;
var iterateur_m=Nbr_Max;
for(iterateur_p=0; iterateur_p<Nbr_Max; iterateur_p++){
iterateur_m--;
alert(iterateur_m);
alert(p);
}
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les boîtes de dialogue
Définition
Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un
événement, et qui permet:
› Soit d'avertir l'utilisateur
› Soit le confronter à un choix
› Soit lui demander de compléter un champ pour récupérer une information
Javascript propose trois types différents de boîte de dialogue, dont l'utilisation se
rapporte à une de celles décrites ci-dessus.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les boîtes de dialogue
Boîte de dialogue alert()
Permet d'afficher une boîte de dialogue de type avertissement, ne laissant à l'utilisateur
que la possibilité d'appuyer sur un bouton Ok.
function ExempleAlert(){
alert(« Message d’alert :n Boîte de dialogue Alert");
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les boîtes de dialogue
Boîte de dialogue confirm()
Permet comme la méthode alert d'afficher un message, mais ajoute des options de
réponse qui peuvent être adaptées pour effectuer des confirmations ou annulations.
function ExempleConfirm(){
if (confirm(« êtes-vous un Web développeur?")){
alert("Vous venez de cliquer sur le bouton :n OK");
} else{
alert("Vous venez de cliquer sur le bouton :n Annuler");
}
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les boîtes de dialogue
Boîte de dialogue prompt()
Permet d'ouvrir une boîte de dialogue pour demander une saisie à l'utilisateur. Elle est
composée d'un message (premier paramètre de la méthode)), d'une zone de saisie de
type text et de deux boutons "Ok" et "Annuler".
function ExemplePrompt(){
var prenom = prompt('Saisissez votre prénom',‘Mohammed');
if (prenom != null && prenom != ""){
alert(" Votre Prénom:n"+ prenom );
} else{
alert(" Valeur par défaut");
}
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur les boîtes de dialogue
<script>
var prenom = prompt('Saisissez votre prénom',"Prénom");
if (prenom != null && prenom != ""){
alert(" Votre Prénom:n"+ prenom );
} else if (confirm("Vous avez oublier de remplir le prénom?")){
alert("Vous venez de cliquer sur le bouton :n OK");
} else{
alert("Vous venez de cliquer sur le bouton :n Annuler");
}
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs,
appelées items. Chaque item est accessible au moyen d'un indice et dont la
numérotation commence à partir de 0.
Déclarer un tableau
On utilise bien évidemment var pour déclarer un tableau, mais la syntaxe pour définir les
valeurs est spécifique :
Var MyTab1 = [element0, element1, ..., elementN];
Var MyTab2 = new Array(element0, element1[, ...[, elementN]]);
Var MyTab3 = new Array(10);
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Parcourir un tableau
Le principe pour parcourir un tableau est simple : il faut faire autant d'itérations qu'il y a
d'items. Le nombre d'items d'un tableau se récupère avec la propriété length, exactement
comme pour le nombre de caractères d'une chaîne de caractères. À chaque itération, on va
avancer d'un item dans le tableau, en utilisant la variable de boucle i : à chaque itération,
elle s'incrémente, ce qui permet d'avancer dans le tableau item par item. Voici un exemple :
for (var i = 0; i < myArray.length; i++) {
alert(myArray[i]);
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Opérations sur les tableaux
Transformer en String: Array.join()
Récupérer les valeurs d'un tableau sous la forme d'une String
var tab = [true,2,5,"d","2 m","c"];
alert(tab.join("|"));// Affiche: true|2|5|d|2 m|c
Rassembler plusieurs tableaux: Array.concat()
Permet d'additionner à un tableau d'autres tableaux
var tab = [1,2];
var tab1 = [3,4];
var tab2 = [5,6];
alert(tab.concat(tab1,tab2)); // Affiche: 1,2,3,4,5,6
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Opérations sur les tableaux
Supprimer un élément depuis un tableau
Supprimer le premier élément: Array.shift()
Supprimer le dernier élément: Array.pop()
var tab = [1,2,4,7];
alert(tab.shift());//Affiche: 1
alert(tab);//Affiche: 2,4,7
alert(tab.pop());//Affiche: 7
alert(tab);//Affiche: 2,4
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Opérations sur les tableaux
Insérer une ou plusieurs valeurs dans un tableau
Insérer des valeurs au début: Array.unshift()
Insérer des valeurs à la fin: Array.push()
var tab = [1,2,4,7];
alert(tab.unshift(O,9));//Affiche: 6, la langueur du tableau
alert(tab.push(23,12));//Affiche: 8, la langueur du tableau
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Opérations sur les tableaux
Insérer, modifier, ou supprimer une ou plusieurs valeurs dans un tableau: Array.splice()
splice( début, quantité, liste de valeur )
- début: position où commence l'insertion ou suppression.
- quantité: nombre d'éléments a supprimer ou à modifier à partir de début,
- liste de valeur: un ou une liste de valeurs séparées par une ","
var tab = [1,2,3,4,5];
//Exemple de modification
alert(tab.splice(1,2,"a","b"));//Affiche: 2,3. Les éléments modifiés
alert(tab); //1,a,b,4,5
//Exemple de Suppression
alert(tab.splice(1,2));//Affiche: 2,3. Les éléments supprimés
alert(tab); //1,4,5
//Exemple d'ajout :
alert(tab.splice(1,0,"a","b"));
alert(tab); //1,a,b,4,5
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Tableaux
Opérations sur les tableaux
Trier ou inverser l’ordre des éléments d’un tableau
Trier les éléments d’un tableau : Array. sort()
Inverser l'ordre des éléments d’un tableau : Array. reverse()
var tab = ["1",3","2","4","5"];
tab. reverse();
alert(tab); //Affiche: 5,4,3,2,1
tab. sort();
alert(tab); //Affiche: 1,2,3,4,5
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur les Tableaux
<script>
var etudiant=new Array();
etudiant[0]=["Ahmad",12];
etudiant[1]=["Anas",15.5];
etudiant[2]=["Samira",13];
etudiant[3]=["Fatima",17];
etudiant[4]=["Idris",9];
var total=0;
for (var i=0; i<etudiant.length; i++){
total+=parseFloat(etudiant[i][1]);
document.write("la moyenne de "+etudiant[i][0]+" est: <b>"+etudiant[i][1]+"</b><br/>");
}
var moy =total/i;
document.write('<br/>La moyenne de la class : <b>'+moy+'</b>')
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les chaines de caractères
String est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères.
Les chaînes de caractères sont utiles pour représenter des données textuelles. Les
opérations les plus fréquentes qui concernent les chaînes de caractères sont : la
vérification de leur longueur( str.length ), la concaténation de plusieurs chaînes grâce
aux opérateurs + et +=, étudier la présence et la position de fragments de chaînes avec
les méthodes indexOf et substring.
Pour créer une chaîne de caractères, on utilise généralement cette syntaxe :
var MonChaine = "Chaîne de caractères primitive";
var MonObjetChaine = new String("Chaîne de caractères");
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les chaines de caractères
str.charAt(index); // index est un entier
Opérations sur les chaînes de caractères
La méthode charAt() renvoie le caractère à la position spécifiée.
str.concat(string2, string3[, ..., stringN]);
La méthode concat() combine le texte de deux chaînes et renvoie une nouvelle chaîne
ainsi formée.
La méthode slice() extrait une section de la chaine de caractères et renvoie une nouvelle
chaine de caractères.
str.slice(Début[, fin]); // le paramètre fin est facultatif
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les chaines de caractères
str.split([separateur][, limit]); // limit est le nombre de sous-chaînes à retourner
Opérations sur les chaînes de caractères
La méthode split() divise à l'aide d'un séparateur un objet String en un tableau de sous-
chaînes.
str.substring(indexDebut[, indexFin]);
La méthode substring() retourne un extrait d'une chaine, selon un index de début et,
soit un index de fin, soit la fin de la chaîne.
La méthode Substr() renvoie les caractères d'une chaîne à partir de la position spécifiée
et pour la longueur spécifiée.
str. Substr(Début[, Longueur]);
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les chaines de caractères
str. indexOf([ChaineRecherchée][, indexDebut]);
Opérations sur les chaînes de caractères
La méthode indexOf retourne pour la chaîne de caractère sur laquelle a été appelée,
l'index de la première occurrence pour la valeur renseignée, en commençant la recherche
à partir de indexDebut
str. lastIndexOf([ChaineRecherchée][, indexDebut]);
La méthode lastIndexOf retourne pour la chaîne de caractère sur laquelle a été appelée,
l'index de la dernière occurrence pour la valeur renseignée, La recherche est effectuée en
partant de la fin (sens inverse de lecture) en commençant à partir de indexDebut
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les chaines de caractères
str.toUpperCase();
Opérations sur les chaînes de caractères
La méthode toUpperCase() retourne la valeur de la chaîne appelante convertie en
majuscules.
str.toLowerCase();
La méthode toLowerCase() retourne la chaîne passé en paramètre convertie en
minuscule.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Dates
new Date();
new Date(timestamp);
new Date(dateString);
new Date(année, mois, jour [, heure, minutes, secondes, millisecondes ]);
L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la
gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on
peut toujours utiliser.
L'objet Date nous fournit un grand nombre de méthodes pour lire ou écrire une date. Il y
en a d'ailleurs tellement que nous n'allons en voir qu'une infime partie.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Manipuler les Dates
Ce tableau récapitule les méthodes principales. Toutes les méthodes commençant par
get se fondent sur les paramètres régionaux
Méthode Description
getDate Retourne le jour du mois de la date courante.
getDay Retourne le jour de la semaine de la date courante.
getFullYear Retourne l’année de la date courante.
getHours Retourne les heures de l’heure courante.
getMilliseconds Retourne les millisecondes de l’heure courante.
getMinutes Retourne les minutes de l’heure courante.
getMonth Retourne le mois de la date courante.
getSeconds Retourne les secondes de l’heure courante.
getTime Détermine le nombre représentant la date en millisecondes.
getTimezoneOffset Détermine le décalage horaire par rapport à l’heure GMT.
getYear Retourne l’année de la date courante sur deux caractères pour les années précédant 2000.
setXXX Toutes les méthodes getXXX ont des méthodes setXXX correspondantes.
toGMTString Retourne la date GMT sous forme de chaînes de caractères.
toLocaleString Retourne la date sous forme de chaînes de caractères en utilisant les paramètres régionaux.
toSource Retourne un objet littéral représentant la date.
toString Retourne la date sous forme de chaîne de caractères.
valueOf Retourne la date sous forme de nombre.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur les Dates
Créer une fonction JavaScript qui affiche les date sous les formats suivants:
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Définition
Le langage JavaScript propose différentes fonctionnalités afin de mettre en œuvre les
expressions régulières.
Une expression régulière correspond à une notation compacte et puissante qui décrit de
manière concise un ensemble de chaînes de caractères. Elle peut notamment être
appliquée à une chaîne de caractères afin de déterminer si elle correspond à des critères
particuliers. Elle obéit à une syntaxe particulière et interprète spécifiquement différents
symboles.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Forme littérale
JavaScript permet de définir une expression régulière sous forme littérale par
l’intermédiaire du symbole "/". Cette définition comporte deux parties : l’expression
proprement dite et les propriétés relatives à son application.
Il existe deux propriétés relatives à l’application des expressions régulières :
› La valeur g: qui spécifie que toutes les occurrences dans la chaîne doivent être
utilisées. Si elle n’est pas spécifiée, seule la première occurrence est utilisée.
› La valeur i: qui spécifie que la recherche n’est pas sensible à la casse.
var chaine = "Ceci est un test";
var expression = /test/gi;
var chaineCorrespond = expression.test(chaine);
/* chaineCorrespond contient true puisque la chaîne correspond à l’expression régulière */
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Syntaxe
Le tableau suivant récapitule les symboles utilisables pour les expressions régulières.
Caractère d’option Fonction
” ” Aucune option définie.
”g” Force une recherche globale.
”i” Ne tient pas compte de la casse des caractères.
”gi” Associe les options i et g.
Les caractères d’ensemble
Caractère outil Fonction
[xyz] Correspond à un ensemble de caractères (ici xyz), placé entre les crochets.
[xz] Correspond à un ensemble de caractères en minuscules entre x et z.
[XZ] Correspond à un ensemble de caractères en majuscules entre X et Z.
[09] Correspond à un ensemble de caractères entre 0 et 9
[^xz] Interdit les caractères suivants ^ (ici x et z).
d Correspond à un chiffre. Équivalent à [09].
D Interdit les chiffres de 0 à 9. Équivalent à [^09].
Les caractères de groupement
( ) Permet de grouper des caractères formant alors un sous motif.
Les caractères de répétition
* Le caractère peut apparaître un nombre indéfini de fois.
+ Le caractère doit apparaître au moins une fois.
? Le caractère doit apparaître zéro ou une fois.
{x} Le caractère doit apparaître le nombre de fois équivalent à x.
{x,z} Le caractère doit apparaître au moins x fois et au plus z fois.
x | z Le caractère peut être x ou z.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Syntaxe (suite)
Le tableau suivant récapitule les symboles utilisables pour les expressions régulières.
Les caractères de positionnement
Caractère outil Fonction
^ Précise le début de l’expression dans la chaîne de caractères.
$ Précise la fin de l’expression dans la chaîne de caractères.
b Précise le début de mot.
B Précise la fin de mot.
(x) Trouve la chaîne et retient sa position.
Le caractère de choix
x | z Le caractère peut être x ou z.
Les caractères spéciaux
. Correspond à tout caractère.
 Indique que le caractère suivant n’est pas spécial.
f Correspond à un saut de page.
n Correspond à un saut de ligne.
r Correspond à un retour chariot.
t Correspond à une tabulation.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Méthodes utilisables
Nous nous intéressons dans cette section aux méthodes utilisables avec les expressions
régulières.
Méthode Description
exec Retourne la première occurrence correspondant à l’expression régulière dans la chaîne.
test
Détermine si des occurrences sont contenues dans la chaîne de caractères en paramètre
pour l’expression régulière.
match
Retourne les différentes sous-chaînes (sous forme de tableau) de caractères
correspondant à l’expression régulière dans la chaîne de caractères initiale
search Retourne la position de la première occurrence correspondant à l’expression régulière.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les expressions régulières
Exemples d’application:
var chaine = "Ceci est une chaine de test";
var expression = /test$/g;
var retour = expression.test(chaine);
// retour contient la valeur true
chaine = "Ceci est une chaine de test.";
retour = expression.test(chaine);
// retour contient désormais la valeur false
var chaine = "Ceci est une chaine de test";
var expression = /test$/g;
var sousChaines = expression.exec(chaine);
// sousChaines est un tableau contenant un
seul élément, « test »
var chaine = "Ceci est une chaine de test";
var expression = /chaine|test/g;
var sousChaines = chaine.match(expression);
/* sousChaines est un tableau contenant les
valeurs « chaine » et « test » */
var chaine = "Ceci est une chaine de test";
var expression = /chaine|test/g;
var position = chaine. search(expression);
// position contient la valeur 13
La méthode test() La méthode exec()
La méthode match() La méthode search()
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur Les expressions régulières
<script language="javascript">
var cin_format = /^[a-zA-Z]{1,2}[0-9]{2,10}$/gi;
var saisieCIN=prompt("Saisissez votre CIN: ");
alert(cin_format.test(saisieCIN));
var DATE_format = /^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-_]([0]?[1-9]|[1][0-2])[./-_]([0-9]{4}|[0-9]{2})$/;
var saisieDate=prompt("Saisissez votre date de naissance: ");
alert(DATE_format.test(saisieDate));
var EMAIL_format = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$/;
var saisieEMAIL=prompt("Saisissez votre Email: ");
alert(EMAIL_format.test(saisieEMAIL));
var tel_format = /^[0]?[6][0-9][1-9]|[5][2|3][0-9]?d{6}$/gi;
var saisieTel=prompt("Saisissez votre Tel: ");
alert(tel_format.test(saisieTel));
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur Les expressions régulières
<script language="javascript">
var chaine = "voila mon email est bba@bba.ma de test";
var expression = /bba@bba.ma|test/g;
var sousChaines = chaine.match(expression);
alert(sousChaines);
var expression = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}/g;
var position2 = chaine.search(expression);
alert(position2);
var chaine3 = "voila mon email est bba@bba.ma de test et aussi un autre cccn@cccccccc.com";
var expression = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}/g;
var position3 = expression.exec(chaine3);
alert(position3);
</script>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les Fonctions
Introduction
Les fonctions représentent le concept de base de la programmation JavaScript afin de
modulariser les traitements.
Nous verrons que les fonctions constituent la clé de voûte du développement objet en
JavaScript.
Le mot-clé function permet de mettre en œuvre les fonctions selon la syntaxe suivante :
function nomDeLaFonction(parametre1, parametre2, ...) {
//Code de la fonction
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les Fonctions
Identification de fonction
Le langage JavaScript n’utilise pas les signatures pour identifier les fonctions et se fonde
uniquement sur leurs noms. Ainsi, deux fonctions globales ou d’un même objet
possédant le même nom ne peuvent coexister avec ce langage. enfaite l’interprétateur
JavaScript utilise toujours celle qui a été définie en dernier, ignorant toutes les
précédentes.
function maFonction(parametre1, parametre2) {
return parametre1+" - "+parametre2;
}
function maFonction(parametre1) {
return parametre1;
}
var retour = maFonction("param1", "param2"); // Affiche
parametre1
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les Fonctions
Gestion des arguments
JavaScript met à disposition la liste des arguments passés à une fonction dans une
variable particulière. Nommée arguments, cette variable est implicitement définie pour
chaque fonction. Le développeur peut donc l’utiliser directement dans le code des
fonctions.
Cette fonctionnalité de JavaScript permet de supporter plusieurs signatures de méthodes
et ainsi de contourner le problème lié au nombre d'arguments.
function maFonction() {
if( arguments.length == 1 ) {
return arguments[0];
}
if( arguments.length == 2 ) {
return arguments[0]+" - "+arguments[1];
}
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les Fonctions
Méthodes de la classe Function
La class Function de JavaScript propose deux méthodes supplémentaires d’appelle de
fonctions. Ces méthodes sont :
› La méthode apply() appelle une fonction en lui passant une valeur this et des
arguments sous forme d'un tableau (ou d'un objet semblable à un tableau).
› La méthode call() réalise un appel à une fonction avec une valeur this et les
arguments fournis individuellement.
var nombresTab = [5, 6, 2, 3, 7];
var v = MaFonction.apply(this, nombres);
Var v1=2; Var v2=34; Var v4=7;
var v = MaFonction.call(this, v1,v2,v3);
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP sur Les Fonctions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>Test Fonction</title>
</head>
<body>
<p id="demo"></p>
<script>
function findMax() {
var i, max = 0;
for(i = 0; i < arguments.length; i++) {
if (parseInt(arguments[i]) > max) {
max = arguments[i];
}
}
return max;
}
var recupParam=prompt("Entrer des chiffres séparés par des virgules: ");
var tab = recupParam.split(",");
document.getElementById("demo").innerHTML = findMax.apply(this, tab);
</script>
</body>
</html>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Les Closures
Définition
En rapport avec les fonctions JavaScript propose d'autres fonctionnalités permettent le
support des Closures.
Une closure est une fonction JavaScript particulière, qui utilise directement des variables
définies en dehors de la portée de son code. Ce mécanisme est souvent utilisé par des
fonctions définies dans d’autres fonctions, comme l’illustre le code suivant :
function uneFonction(parametre) {
function uneClosure(unAutreParametre) {
return "Les paramètres sont: "
+parametre+", "+ unAutreParametre;
}
return uneClosure;
}
var retour = uneFonction("Mon paramètre");
var valeurRetour = retour("Mon autre paramètre");
// valeurRetour contient « Les paramètres sont: Mon paramètre, Mon autre paramètre »
09/06/2015Formation en Développement WEB
Les bases de JavaScript – TP Formulaire
<script>
function surligne(champ, erreur){
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}
function verifNomPrenom(champ){
if(champ.value.length < 2 || champ.value.length > 25){
surligne(champ, true);
return false;
}else{
surligne(champ, false);
return true;
}
}
function verifMail(champ){
var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$/;
if(!regex.test(champ.value)){
surligne(champ, true);
return false;
}else{
surligne(champ, false);
return true;
}
}
function verifAge(champ){
var age = parseInt(champ.value);
if(isNaN(age) || age < 5 || age > 111){
surligne(champ, true);
return false;
}else{
surligne(champ, false);
return true;
}
}
function verifForm(f){
var nomOk = verifNomPrenom(f.nom);
var prenomOk = verifNomPrenom(f.prenom);
var mailOk = verifMail(f.email);
var ageOk = verifAge(f.age);
if(nomOk && prenomOk && mailOk && ageOk){
alert("formulaire OK ;-) ");
return true;
}else{
alert("Veuillez remplir correctement tous les champs");
return false;
}
}
</script>
<body >
<form action="#" methode="post" onsubmit="return verifForm(this)">
<p>
Nom : <input type="text" name="nom"
onblur="verifNomPrenom(this)" /><br />
Prénom : <input type="text" name="prenom"
onblur="verifNomPrenom(this)" /><br />
E-mail : <input type="text" name="email" size="30"
onblur="verifMail(this)" /><br />
Âge : <input type="text" name="age" size="2" onblur="verifAge(this)"
/> ans<br />
<input type="submit" value="Valider" />
</p>
</form>
</body>
</html>
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Gestion des exceptions
Introduction
La gestion des anomalies d’exécution est un aspect très important de la programmation.
Une approche méthodique à ce sujet de la part des développeurs permet d’obtenir du
code plus robuste et lisible à la fois.
Dans le contexte des langages de programmation, un système de gestion d’exceptions
permet de gérer les conditions exceptionnelles pendant l’exécution du programme.
Lorsqu’une exception se produit, l’exécution normale du programme est interrompue et
l’exception est traitée.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Gestion des exceptions
Erreurs et exceptions
Une erreur est une anomalie de fonctionnement, une condition imprévue durant
l’exécution d’un programme, qui rend impossible sa continuation et demande que des
actions soient entreprises pour réparer la défaillance, comme par exemple :
– une division par zéro ;
– une tentative d’ouvrir un fichier qui n’existe pas ;
– l’utilisation d’une référence nulle pour accéder à un objet.
Tout programme en exécution peut être sujet à des conditions qui pourraient, si non
gérées, provoquer des erreurs. Ces conditions, en elles mêmes, ne sont pas des bugs,
mais des conditions particulières (exceptions) dans le déroulement normal d’une partie
d’un programme. Tel l’impossibilité d’ouvrir un fichier.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – Gestion des exceptions
Attraper les exceptions
JavaScript offre la même syntaxe que Java pour gérer les exceptions, au moyen des mots
clés try, catch et finally. Le premier définit le bloc d’interception des exceptions, le
second les traitements à réaliser en cas de levée d’exceptions et le dernier les traitements
à exécuter, que des exceptions soient levées ou non.
Le code suivant décrit la façon de gérer les exceptions (nous faisons volontairement
appel à une méthode testException inexistante afin de déclencher une exception) :
try {
testException(); //Cette méthode est inexistante!
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée : "+error.name);
alert("Message de l’exception levée : "+error.message);
} finally {
alert("Passage dans finally");
}
09/06/2015Formation en Développement WEB
Les bases de JavaScript – la Programmation Orientée Objet
Le langage JavaScript offre la possibilité de mettre en œuvre la plupart des concepts
objet, tels que l’héritage et le polymorphisme. Les développeurs peuvent tirer parti de
ces mécanismes pour augmenter la qualité, la lisibilité et la modularité de leurs
applications JavaScript.
La façon de mettre en œuvre les concepts objet est spécifique à ce langage, et est
essentiellement fondée sur les fonctions et closures de JavaScript.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: Concepts généraux
Classes et objets: Le concept central de la programmation objet est la classe. Composée
d’attributs et de méthodes, ces derniers permettent de définir respectivement les états et
les comportements de la classe.
Instances et objets: Une classe n’est pas utilisable directement dans une application, car
elle correspond à un concept abstrait. Les applications travaillent sur des objets ou
instances correspondant à des occurrences de classes.
Encapsulation et visibilité: L’encapsulation revient à interdire l’accès à certains éléments
d’une classe afin de protéger ses états et fonctionnements internes. Les attributs de
classe ne doivent pas être exposés directement à l’extérieur. C’est la raison pour laquelle
la mise en œuvre d’accesseurs constitue une bonne pratique de conception.
Niveau de visibilité Description
Par défaut Seules les sous-classes ont accès aux éléments de la classe.
Privé Les entités externes n’ont pas accès aux éléments de la classe.
Protégé Seules les sous-classes ont accès aux éléments de la classe.
Public Les entités externes ont accès aux éléments de la classe.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: Concepts généraux
L’héritage: Par souci de modularité, les langages orientés objet mettent en œuvre des
mécanismes d’héritage. Ces derniers permettent de définir des sous-classes afin
d’enrichir et de bénéficier d’attributs et de méthodes de classes existantes.
Le polymorphisme: Les mécanismes de polymorphisme permettent à une application
de voir une instance sous différentes formes. Le polymorphisme est intimement lié aux
mécanismes de transtypage, qui permettent de convertir le type d’une instance, quand
c’est possible, en un autre type.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: et JavaScript
En résumé
Nous avons décrit dans cette section les principaux concepts de la programmation
orientée objet.
Le langage JavaScript n’est pas un langage orienté objet, mais il permet
néanmoins de mettre en œuvre quelques concepts décrits au cours des sections
précédentes.
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: et JavaScript
Mot clé this
Le mot clé this est également important dans la mise en œuvre de la programmation
orientée objet en JavaScript. Il est utilisé dans une méthode afin de référencer l'instance
sur laquelle est exécutée cette méthode. Il faut néanmoins faire attention lorsque l'on
utilise this dans une fonction qui n'est pas rattachée à un objet car soit une erreur se
produit ou des champs possèdent des valeurs non définies. L'exemple suivant illustre la
mise en œuvre de ce mot clé:
var maFonction = function() {
alert("attribut: " + this.attribut);
};
maFonction(); // Affiche la valeur undefined car this.attribut ne peut être résolu
// Création de l'objet obj1 et affectation de maFonction
var obj1 = {
attribut: "valeur1",
methode: maFonction
}
obj1.methode(); // Affiche la valeur de attribut, à savoir valeur1
// Création de l'objet obj2 et affectation de maFonction
var obj2 = {
attribut: "valeur2",
methode: maFonction
}
obj2.methode(); // Affiche la valeur de attribut2, à savoir valeur2
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: Structures des objets avec JavaScript
Structure simple
En JavaScript, le mot clé new peut être utilisé en se fondant sur une fonction afin
d'initialiser un objet. L'initialisation est réalisée en utilisant les éléments contenus dans la
fonction, ces derniers peuvent être aussi bien des attributs que des méthodes. Le code
suivant illustre la mise en œuvre d'une classe JavaScript en utilisant ce principe:
function MaClasse(parametre1, parametre2) {
this.attribut1 = parametre1;
this.attribut2 = parametre2;
this.methode = function() {
alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
}
}
var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chaîne de caractères contenant les valeurs des attributs
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: Structures des objets avec JavaScript
Prototypage
Le prototypage correspond à spécifier une sorte de modèle indépendamment du constructeur
afin d'initialiser chaque objet à sa création. Comme nous l'avons mentionné rapidement
précédemment, la spécification de ce modèle se réalise en se fondant sur la propriété
prototype de la classe Function.
Il convient donc ainsi de toujours de créer une fonction constructeur comme précédemment
afin de définir une classe. Cependant, contrairement à l'approche précédente, les éléments de
la classe ne sont plus tous définis dans cette fonction.
Le code suivant illustre l'adaptation de la classe MaClasse précédemment mise en œuvre en
se fondant sur le prototypage:
function MaClasse(parametre1, parametre2) {
this.attribut1 = parametre1;
this.attribut2 = parametre2;
}
MaClasse.prototype = {
methode: function() {
alert("Attributs: " + this.attribut1 + ", " + this.attribut2);
}
}
var obj = new MaClasse("valeur1", "valeur2");
alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1
obj.methode(); // Affiche la chaîne de caractères contenant les valeurs des attributs
09/06/2015Formation en Développement WEB
Les bases de JavaScript – POO: Structures des objets avec JavaScript
Combinaison des deux approches
Dans cette approche, l'initialisation de la propriété prototype est réalisée dans le code du
constructeur de la classe, ceci offrant la possibilité d'avoir accès à toutes les variables et
méthodes de cette fonction particulière. Par contre, les principes décris dans les différentes
approches restent vrais. Les méthodes définies directement dans le constructeur seront
dupliquées alors que celles positionnées sur le prototype non.
Le seul point subtil de cette approche est de forcer la propriété prototype à n'être initialisée
qu'une seule et unique fois la première fois que le constructeur est appelé. Pour ce faire, il
suffit d'ajouter une propriété personnalisée directement sur le constructeur de la manière
suivante:
function MaClasse() {
this.attribut = "valeur";
if( typeof MaClasse.initialized == "undefined" ) {
MaClasse.prototype.methode = function() {
alert("Attribut: " + this.attribut);
};
MaClasse.initialized = true;
}
}
var obj = new MaClasse();
alert(obj.attribut); // Affiche la valeur de l'attribut attribut
obj.methode();// Fonctionne correctement car la méthode a été ajoutée au prototype
09/06/2015Formation en Développement WEB 09/06/2015Formation en Développement WEB

Contenu connexe

Tendances

Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
ENSET, Université Hassan II Casablanca
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
Abdelouahed Abdou
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
ENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
YaminaGh1
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
ENSET, Université Hassan II Casablanca
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Thibault Martinez
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
Julio Bitencourt
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
ENSET, Université Hassan II Casablanca
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
TheBest Icanbe
 

Tendances (20)

Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Cours java
Cours javaCours java
Cours java
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 

Similaire à Javascript pour les Développeurs WEB

cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
YounesOuladSayad1
 
Formation java script
Formation java scriptFormation java script
Formation java script
Romdhani Asma
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
PROFPROF11
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
Mouna Dhaouadi
 
API JSP2 avec Java EE.pdf
API JSP2 avec Java EE.pdfAPI JSP2 avec Java EE.pdf
API JSP2 avec Java EE.pdf
ramadanmahdi
 
js.pdf
js.pdfjs.pdf
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdf
rachidimstapha
 
Initiation au langage PHP
Initiation au langage PHPInitiation au langage PHP
Initiation au langage PHP
Faouzia Benabbou
 
Chapitre 4 Java script
Chapitre 4 Java scriptChapitre 4 Java script
Chapitre 4 Java script
Manel Ben Sassi
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
MarwenJAZI
 
Introduction java
Introduction javaIntroduction java
Introduction java
Fouad Root
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124
Mejdeddine Bouzouita
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
JS Bournival
 
cha4c1jsp.docx
cha4c1jsp.docxcha4c1jsp.docx
cha4c1jsp.docx
ssuser9d2f89
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 

Similaire à Javascript pour les Développeurs WEB (20)

cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
Formation java script
Formation java scriptFormation java script
Formation java script
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
API JSP2 avec Java EE.pdf
API JSP2 avec Java EE.pdfAPI JSP2 avec Java EE.pdf
API JSP2 avec Java EE.pdf
 
js.pdf
js.pdfjs.pdf
js.pdf
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdf
 
Initiation au langage PHP
Initiation au langage PHPInitiation au langage PHP
Initiation au langage PHP
 
Chapitre 4 Java script
Chapitre 4 Java scriptChapitre 4 Java script
Chapitre 4 Java script
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
 
Introduction java
Introduction javaIntroduction java
Introduction java
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
 
Chapter1
Chapter1Chapter1
Chapter1
 
cha4c1jsp.docx
cha4c1jsp.docxcha4c1jsp.docx
cha4c1jsp.docx
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 

Javascript pour les Développeurs WEB

  • 1. 09/06/2015Formation en Développement WEB Formation en Développement WEB [JavaScrip]
  • 2. 09/06/2015Formation en Développement WEB Les bases de JavaScript Les bases de JavaScript
  • 3. 09/06/2015Formation en Développement WEB Les bases de JavaScript - Plan › Introduction › Le rôle de JavaScript › Intégrer JavaScript ans une page web › Les règles de syntaxe du code › Constantes et Variables › Types de données › Les opérateurs › Les structures de contrôle › Les boîtes de dialogue › les Tableaux › les chaines de caractères › les Dates › Les expressions régulières › Les Fonctions › Gestion des exceptions › la Programmation Orientée Objet
  • 4. 09/06/2015Formation en Développement WEB Les bases de JavaScript - Introduction Le JavaScript est la partie client d’un langage de scriptage. Développer par netscape, le JavaScript est utilisé avec le HTML pour la création d'un site Web. Initialement les pages Web ont été conçues uniquement avec le html. Le html qui n'est rien d'autre que des pages statiques. L'interaction avec l'utilisateur et les changements dynamiques ne sont pas possible avec le html. Un problème résolu avec la venue des langages de script. Le JavaScript fonctionne avec la plupart des navigateurs principaux tels que l'Internet Explorer, Mozilla, Firefox, Netscape, Opera, Safari et plus encore.
  • 5. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Le rôle de JavaScript › Contrôler dynamiquement une page web (lire, modifier, supprimer des éléments) au niveau du navigateur. La page web chargée, elle est manipulée au niveau du client sans nouvel échange avec le serveur. › Lire/écrire un cookie › Utiliser des événements afin de déclencher des actions dans la page web, sans communication avec le serveur (ex : afficher du texte, une image suite à un click ou au survol d'une zone). JavaScript ne pet pas: - lire des informations contenues sur le serveur (c'est le travail de PHP, Java, Perl...) - lire des informations contenues sur le poste client (à l'exception des cookies). (ouf !).
  • 6. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Intégrer JavaScript ans une page web Il est théoriquement possible d'insérer du code Javascript dans le HEADER ou n'importe où dans le BODY d'une page web. Dans le fichier HTML: Entre des balises <script type="text/javascript>...</script> Dans un fichier externe: On appellera un fichier Javascript externe "nom_de_fichier.js" dans le HEADER comme suit :<script src= " script.js" type="text/javascript"></script>
  • 7. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les règles de syntaxe du code Pour bien débuter en JavaScript le respect de ces règles est fondamental, car ce langage est peu souple et n’autorise pas d’erreurs La casse: Une des principales difficultés de JavaScript réside dans le fait que c’est un langage sensible à la casse, c’est à dire qu’il différencie les majuscules des minuscules. Les commentaires: L’ajout de commentaires dans un bloc de code JavaScript s’effectue de manière mono-ligne " //commentaire " ou multi-lignes " /*commentaire*/ ". Le point-virgule: Chaque ligne de code JavaScript se termine généralement par un point- virgule sauf exception de syntaxe.
  • 8. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Constantes et Variables Pour faire simple, une variable est un espace de stockage sur votre ordinateur permettant d'enregistrer tout type de données, que ce soit une chaîne de caractères, une valeur numérique ou bien des structures un peu plus particulières. Déclarer une variable: c’est tout simplement lui réserver un espace de stockage en mémoire. Il est important de préciser que le nom d'une variable ne peut contenir que des caractères alphanumériques. Autre chose : le nom de la variable ne peut pas commencer par un chiffre. // Variable initialisée avec une chaîne de caractères var variable1 = "mon texte d’initialisation"; // Variable non initialisée var variable2; // Définition de plusieurs variables en une seule instruction var variable3 = 2, variable4 = "mon texte d’initialisation";
  • 9. 09/06/2015Formation en Développement WEB Les bases de JavaScript – La portée des Variables Lorsqu’on affecte une variable, nous pouvons manipuler la valeur affectée à cette variable. Elle nous est donc accessible. Cependant, cette accessibilité dépend de l’endroit où la variable a été affectée. On parle donc de la portée de la variable. › Une variable déclarée en dehors de toute fonction peut être utilisée n’importe où dans le script. On parle alors de VARIABLE GLOBALE. › Une variable déclarée dans une fonction aura une portée limitée à cette seule fonction, c’est-à-dire quelle est inutilisable ailleurs. On parle alors de VARIABLE LOCALE.
  • 10. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Le Typage JavaScript est un langage non typé. Cela signifie que le type d’une variable est défini uniquement au moment de l’exécution. L’interpréteur JavaScript a la responsabilité de créer la valeur du bon type en fonction de l’initialisation ou de l’affectation. Le langage n’impose pas l’initialisation des variables au moment de leur création. Cependant il y a quelques types préexistants.
  • 11. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Types de données Les types de données principales (primitives) sont : › String: suite de un ou plusieurs caractères Unicode, utilisé pour représenter du texte › Number: en JavaScript un nombre peut être un entier ou un réel, en interne il es toujours représenté comme un réel. › Boolean: est une valeur de vérité, elle spécifie si la condition est vrai ou non. il ne reconnaît que les deux littéraux true et false. Les types de données composites (référence) sont : Dans JavaScript, les objets et les tableaux sont gérés quasiment de la même manière, car les tableaux sont simplement un type particulier d'objet. › Object: est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles. Les valeurs peuvent être de n'importe quel type. › Tableau: est un ensemble d'éléments contigus repérés par leur indice, qui est un nombre entier. Les types de données spéciaux sont : › Null: ce type n'a qu'une seule valeur (Null), null n'est pas identiques à 0. › Indéfini: La valeur undefined est retournée lorsque vous utilisez une propriété d'objet qui n'existe pas, ou une variable qui a été déclarée, mais à qui aucune valeur n'a été affectée.
  • 12. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Types de données Il se peut que vous ayez un jour ou l'autre besoin de tester l'existence d'une variable ou d'en vérifier son type. Dans ce genre de situations, l'instruction typeof est très utile, voici comment l'utiliser : var number = 2; alert(typeof number); // Affiche : « number » var text = 'Mon texte'; alert(typeof text); // Affiche : « string » var aBoolean = false; alert(typeof aBoolean); // Affiche : « boolean » alert(typeof nothing); // Affiche : « undefined »
  • 13. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur les variables <script> var var_globale="globale"; var test; function locale(){ var var_local="locale"; var_globale="globale modifié"; return var_local; } test = locale(); function test_var(){ alert(var_globale); alert(test); alert("la valeur local:"+typeof(var_local)); } </script> <script> var var_chaine="une chaine de caractère"; var var_numeric=1981; var var_boolean=true; alert("type : var_chaine est: "+typeof(var_chaine)); alert("type : var_numeric est: "+typeof(var_numeric)); alert("type : var_boolean est: "+typeof(var_boolean)); </script>
  • 14. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Précédemment nous avons vus les variables, maintenant nous allons voir comment les manipuler ou les évaluer. Pour se faire Javascript a mis à notre disposition un ensemble d'opérateurs classés en 5 groupes: › Les opérateurs de calcul (arithmétiques); › Les opérateurs de comparaison; › Les opérateurs associatifs; › Les opérateurs logiques; › Les opérateurs d'incrémentation.
  • 15. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Les opérateurs de calcul (arithmétiques): Ils nous permettent de manipuler des Nombres. Dans les exemples, la valeur initiale de x sera toujours égale à 11 Signe Nom Signification Exemple Résultat + plus addition x + 3 14 - moins soustraction x - 3 8 * multiplié par multiplication x*2 22 / divisé par division x/2 5.5 % modulo reste de la division x%5 1 = a la valeur affectation x=5 5
  • 16. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Les opérateurs de comparaison: Retourne une valeur booléenne indiquant le résultat de la comparaison. Signe Nom Exemple Résultat == égal x==11 true < inférieur x<11 false <= inférieur ou égal x<=11 true > supérieur x>11 false =< supérieur ou égal x>=11 true != différent x!=11 false === strictement égal a ==='11' false !== strictement différent a !== '11' true
  • 17. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Les opérateurs associatifs: Le but de ces opérateurs et de simplifier les affectations: Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5. Signe Description Exemple Signification Résultat += plus égal x+=y x=x+y 16 -= moins égal x-=y x=x-y 6 *= multiplié égal x*=y x=x*y 55 /= divisé égal x/=y x=x/y 2.2
  • 18. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Les opérateurs logiques: Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou plusieurs conditions. Signe Nom Exemple Signification && et (condition1) && (condition2) (condition1) et (condition2) || ou (condition1) || (condition2) (condition1) ou (condition2)
  • 19. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les opérateurs Les opérateurs d'incrémentation: Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité. Signe Exemple Signification ++ A=A++ A=A+1 -- A=A-- A=A-1
  • 20. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle Les structures de contrôle alternatives (ou conditionnelles) et itératives (ou répétitives) nécessitent l’usage d’un test spécifique appelé condition. La condition est une expression dont le résultat de son évaluation prend toujours ses valeurs dans l’ensemble des booléens (true ou false).
  • 21. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle Les structures alternatives (ou conditionnelles) On appelle structure alternative ou conditionnelle l’ensemble des instructions (le traitement) qui sont réalisées si une condition est vraie ou non. Les structures conditionnelles nécessitent l’usage d’un test appelé condition. if (condition) { liste d'instructions // si la condition réalisée (vraie) }else{ autre série d'instructions // si la condition n’est pas réalisée (fausse) } L'instruction if ... else switch(expression) { case Valeur1: code block break; case Valeur1 : code block break; default: default code block } L'instruction switch
  • 22. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur Les structures de contrôle <script> var var_chaine="une chaine de caractère"; var var_numeric=1981; var var_boolean=true; var var_date= new Date(); var Montype = typeof(var_numeric); switch(Montype.toString()) { case 'object': alert("type OBJECT"); break; case 'string' : alert("type STRING"); break; case 'number' : alert("type NUMBER"); break; case 'boolean' : alert("type BOOLEAN"); break; } </script>
  • 23. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle Les structures itératives (ou répétitives : les boucles) Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série d'instructions jusqu'à ce qu'une condition ne soit plus réalisée. La façon la plus commune de faire une boucle, est de créer un compteur et de faire arrêter la boucle lorsque le compteur dépasse une certaine valeur.
  • 24. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle La boucle for Cette instruction crée une boucle qui se base sur trois expressions. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle. for ([initialisation]; [condition]; [expression_finale]) insruction for (var i = 0; i < 9; i++) { i *= i; alert(‘la valeur de i * i est:’+ i); }
  • 25. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle while (condition) { instruction } var n = 0; var x = 0; while (n < 3) { n++; x += n; } La boucle while Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
  • 26. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les structures de contrôle do instruction while (condition); var i = 0; do { i ++; document.write(i); } while (i < 5); La boucle do...while Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
  • 27. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur Les structures de contrôle <script> var Nbr_Max=10; var iterateur_p=0; var iterateur_m=Nbr_Max; for(iterateur_p=0; iterateur_p<Nbr_Max; iterateur_p++){ iterateur_m--; alert(iterateur_m); alert(p); } </script>
  • 28. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les boîtes de dialogue Définition Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet: › Soit d'avertir l'utilisateur › Soit le confronter à un choix › Soit lui demander de compléter un champ pour récupérer une information Javascript propose trois types différents de boîte de dialogue, dont l'utilisation se rapporte à une de celles décrites ci-dessus.
  • 29. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les boîtes de dialogue Boîte de dialogue alert() Permet d'afficher une boîte de dialogue de type avertissement, ne laissant à l'utilisateur que la possibilité d'appuyer sur un bouton Ok. function ExempleAlert(){ alert(« Message d’alert :n Boîte de dialogue Alert"); }
  • 30. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les boîtes de dialogue Boîte de dialogue confirm() Permet comme la méthode alert d'afficher un message, mais ajoute des options de réponse qui peuvent être adaptées pour effectuer des confirmations ou annulations. function ExempleConfirm(){ if (confirm(« êtes-vous un Web développeur?")){ alert("Vous venez de cliquer sur le bouton :n OK"); } else{ alert("Vous venez de cliquer sur le bouton :n Annuler"); } }
  • 31. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les boîtes de dialogue Boîte de dialogue prompt() Permet d'ouvrir une boîte de dialogue pour demander une saisie à l'utilisateur. Elle est composée d'un message (premier paramètre de la méthode)), d'une zone de saisie de type text et de deux boutons "Ok" et "Annuler". function ExemplePrompt(){ var prenom = prompt('Saisissez votre prénom',‘Mohammed'); if (prenom != null && prenom != ""){ alert(" Votre Prénom:n"+ prenom ); } else{ alert(" Valeur par défaut"); } }
  • 32. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur les boîtes de dialogue <script> var prenom = prompt('Saisissez votre prénom',"Prénom"); if (prenom != null && prenom != ""){ alert(" Votre Prénom:n"+ prenom ); } else if (confirm("Vous avez oublier de remplir le prénom?")){ alert("Vous venez de cliquer sur le bouton :n OK"); } else{ alert("Vous venez de cliquer sur le bouton :n Annuler"); } </script>
  • 33. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au moyen d'un indice et dont la numérotation commence à partir de 0. Déclarer un tableau On utilise bien évidemment var pour déclarer un tableau, mais la syntaxe pour définir les valeurs est spécifique : Var MyTab1 = [element0, element1, ..., elementN]; Var MyTab2 = new Array(element0, element1[, ...[, elementN]]); Var MyTab3 = new Array(10);
  • 34. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Parcourir un tableau Le principe pour parcourir un tableau est simple : il faut faire autant d'itérations qu'il y a d'items. Le nombre d'items d'un tableau se récupère avec la propriété length, exactement comme pour le nombre de caractères d'une chaîne de caractères. À chaque itération, on va avancer d'un item dans le tableau, en utilisant la variable de boucle i : à chaque itération, elle s'incrémente, ce qui permet d'avancer dans le tableau item par item. Voici un exemple : for (var i = 0; i < myArray.length; i++) { alert(myArray[i]); }
  • 35. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Opérations sur les tableaux Transformer en String: Array.join() Récupérer les valeurs d'un tableau sous la forme d'une String var tab = [true,2,5,"d","2 m","c"]; alert(tab.join("|"));// Affiche: true|2|5|d|2 m|c Rassembler plusieurs tableaux: Array.concat() Permet d'additionner à un tableau d'autres tableaux var tab = [1,2]; var tab1 = [3,4]; var tab2 = [5,6]; alert(tab.concat(tab1,tab2)); // Affiche: 1,2,3,4,5,6
  • 36. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Opérations sur les tableaux Supprimer un élément depuis un tableau Supprimer le premier élément: Array.shift() Supprimer le dernier élément: Array.pop() var tab = [1,2,4,7]; alert(tab.shift());//Affiche: 1 alert(tab);//Affiche: 2,4,7 alert(tab.pop());//Affiche: 7 alert(tab);//Affiche: 2,4
  • 37. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Opérations sur les tableaux Insérer une ou plusieurs valeurs dans un tableau Insérer des valeurs au début: Array.unshift() Insérer des valeurs à la fin: Array.push() var tab = [1,2,4,7]; alert(tab.unshift(O,9));//Affiche: 6, la langueur du tableau alert(tab.push(23,12));//Affiche: 8, la langueur du tableau
  • 38. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Opérations sur les tableaux Insérer, modifier, ou supprimer une ou plusieurs valeurs dans un tableau: Array.splice() splice( début, quantité, liste de valeur ) - début: position où commence l'insertion ou suppression. - quantité: nombre d'éléments a supprimer ou à modifier à partir de début, - liste de valeur: un ou une liste de valeurs séparées par une "," var tab = [1,2,3,4,5]; //Exemple de modification alert(tab.splice(1,2,"a","b"));//Affiche: 2,3. Les éléments modifiés alert(tab); //1,a,b,4,5 //Exemple de Suppression alert(tab.splice(1,2));//Affiche: 2,3. Les éléments supprimés alert(tab); //1,4,5 //Exemple d'ajout : alert(tab.splice(1,0,"a","b")); alert(tab); //1,a,b,4,5
  • 39. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Tableaux Opérations sur les tableaux Trier ou inverser l’ordre des éléments d’un tableau Trier les éléments d’un tableau : Array. sort() Inverser l'ordre des éléments d’un tableau : Array. reverse() var tab = ["1",3","2","4","5"]; tab. reverse(); alert(tab); //Affiche: 5,4,3,2,1 tab. sort(); alert(tab); //Affiche: 1,2,3,4,5
  • 40. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur les Tableaux <script> var etudiant=new Array(); etudiant[0]=["Ahmad",12]; etudiant[1]=["Anas",15.5]; etudiant[2]=["Samira",13]; etudiant[3]=["Fatima",17]; etudiant[4]=["Idris",9]; var total=0; for (var i=0; i<etudiant.length; i++){ total+=parseFloat(etudiant[i][1]); document.write("la moyenne de "+etudiant[i][0]+" est: <b>"+etudiant[i][1]+"</b><br/>"); } var moy =total/i; document.write('<br/>La moyenne de la class : <b>'+moy+'</b>') </script>
  • 41. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les chaines de caractères String est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères. Les chaînes de caractères sont utiles pour représenter des données textuelles. Les opérations les plus fréquentes qui concernent les chaînes de caractères sont : la vérification de leur longueur( str.length ), la concaténation de plusieurs chaînes grâce aux opérateurs + et +=, étudier la présence et la position de fragments de chaînes avec les méthodes indexOf et substring. Pour créer une chaîne de caractères, on utilise généralement cette syntaxe : var MonChaine = "Chaîne de caractères primitive"; var MonObjetChaine = new String("Chaîne de caractères");
  • 42. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les chaines de caractères str.charAt(index); // index est un entier Opérations sur les chaînes de caractères La méthode charAt() renvoie le caractère à la position spécifiée. str.concat(string2, string3[, ..., stringN]); La méthode concat() combine le texte de deux chaînes et renvoie une nouvelle chaîne ainsi formée. La méthode slice() extrait une section de la chaine de caractères et renvoie une nouvelle chaine de caractères. str.slice(Début[, fin]); // le paramètre fin est facultatif
  • 43. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les chaines de caractères str.split([separateur][, limit]); // limit est le nombre de sous-chaînes à retourner Opérations sur les chaînes de caractères La méthode split() divise à l'aide d'un séparateur un objet String en un tableau de sous- chaînes. str.substring(indexDebut[, indexFin]); La méthode substring() retourne un extrait d'une chaine, selon un index de début et, soit un index de fin, soit la fin de la chaîne. La méthode Substr() renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée. str. Substr(Début[, Longueur]);
  • 44. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les chaines de caractères str. indexOf([ChaineRecherchée][, indexDebut]); Opérations sur les chaînes de caractères La méthode indexOf retourne pour la chaîne de caractère sur laquelle a été appelée, l'index de la première occurrence pour la valeur renseignée, en commençant la recherche à partir de indexDebut str. lastIndexOf([ChaineRecherchée][, indexDebut]); La méthode lastIndexOf retourne pour la chaîne de caractère sur laquelle a été appelée, l'index de la dernière occurrence pour la valeur renseignée, La recherche est effectuée en partant de la fin (sens inverse de lecture) en commençant à partir de indexDebut
  • 45. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les chaines de caractères str.toUpperCase(); Opérations sur les chaînes de caractères La méthode toUpperCase() retourne la valeur de la chaîne appelante convertie en majuscules. str.toLowerCase(); La méthode toLowerCase() retourne la chaîne passé en paramètre convertie en minuscule.
  • 46. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Dates new Date(); new Date(timestamp); new Date(dateString); new Date(année, mois, jour [, heure, minutes, secondes, millisecondes ]); L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. L'objet Date nous fournit un grand nombre de méthodes pour lire ou écrire une date. Il y en a d'ailleurs tellement que nous n'allons en voir qu'une infime partie.
  • 47. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Manipuler les Dates Ce tableau récapitule les méthodes principales. Toutes les méthodes commençant par get se fondent sur les paramètres régionaux Méthode Description getDate Retourne le jour du mois de la date courante. getDay Retourne le jour de la semaine de la date courante. getFullYear Retourne l’année de la date courante. getHours Retourne les heures de l’heure courante. getMilliseconds Retourne les millisecondes de l’heure courante. getMinutes Retourne les minutes de l’heure courante. getMonth Retourne le mois de la date courante. getSeconds Retourne les secondes de l’heure courante. getTime Détermine le nombre représentant la date en millisecondes. getTimezoneOffset Détermine le décalage horaire par rapport à l’heure GMT. getYear Retourne l’année de la date courante sur deux caractères pour les années précédant 2000. setXXX Toutes les méthodes getXXX ont des méthodes setXXX correspondantes. toGMTString Retourne la date GMT sous forme de chaînes de caractères. toLocaleString Retourne la date sous forme de chaînes de caractères en utilisant les paramètres régionaux. toSource Retourne un objet littéral représentant la date. toString Retourne la date sous forme de chaîne de caractères. valueOf Retourne la date sous forme de nombre.
  • 48. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur les Dates Créer une fonction JavaScript qui affiche les date sous les formats suivants:
  • 49. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Définition Le langage JavaScript propose différentes fonctionnalités afin de mettre en œuvre les expressions régulières. Une expression régulière correspond à une notation compacte et puissante qui décrit de manière concise un ensemble de chaînes de caractères. Elle peut notamment être appliquée à une chaîne de caractères afin de déterminer si elle correspond à des critères particuliers. Elle obéit à une syntaxe particulière et interprète spécifiquement différents symboles.
  • 50. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Forme littérale JavaScript permet de définir une expression régulière sous forme littérale par l’intermédiaire du symbole "/". Cette définition comporte deux parties : l’expression proprement dite et les propriétés relatives à son application. Il existe deux propriétés relatives à l’application des expressions régulières : › La valeur g: qui spécifie que toutes les occurrences dans la chaîne doivent être utilisées. Si elle n’est pas spécifiée, seule la première occurrence est utilisée. › La valeur i: qui spécifie que la recherche n’est pas sensible à la casse. var chaine = "Ceci est un test"; var expression = /test/gi; var chaineCorrespond = expression.test(chaine); /* chaineCorrespond contient true puisque la chaîne correspond à l’expression régulière */
  • 51. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Syntaxe Le tableau suivant récapitule les symboles utilisables pour les expressions régulières. Caractère d’option Fonction ” ” Aucune option définie. ”g” Force une recherche globale. ”i” Ne tient pas compte de la casse des caractères. ”gi” Associe les options i et g. Les caractères d’ensemble Caractère outil Fonction [xyz] Correspond à un ensemble de caractères (ici xyz), placé entre les crochets. [xz] Correspond à un ensemble de caractères en minuscules entre x et z. [XZ] Correspond à un ensemble de caractères en majuscules entre X et Z. [09] Correspond à un ensemble de caractères entre 0 et 9 [^xz] Interdit les caractères suivants ^ (ici x et z). d Correspond à un chiffre. Équivalent à [09]. D Interdit les chiffres de 0 à 9. Équivalent à [^09]. Les caractères de groupement ( ) Permet de grouper des caractères formant alors un sous motif. Les caractères de répétition * Le caractère peut apparaître un nombre indéfini de fois. + Le caractère doit apparaître au moins une fois. ? Le caractère doit apparaître zéro ou une fois. {x} Le caractère doit apparaître le nombre de fois équivalent à x. {x,z} Le caractère doit apparaître au moins x fois et au plus z fois. x | z Le caractère peut être x ou z.
  • 52. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Syntaxe (suite) Le tableau suivant récapitule les symboles utilisables pour les expressions régulières. Les caractères de positionnement Caractère outil Fonction ^ Précise le début de l’expression dans la chaîne de caractères. $ Précise la fin de l’expression dans la chaîne de caractères. b Précise le début de mot. B Précise la fin de mot. (x) Trouve la chaîne et retient sa position. Le caractère de choix x | z Le caractère peut être x ou z. Les caractères spéciaux . Correspond à tout caractère. Indique que le caractère suivant n’est pas spécial. f Correspond à un saut de page. n Correspond à un saut de ligne. r Correspond à un retour chariot. t Correspond à une tabulation.
  • 53. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Méthodes utilisables Nous nous intéressons dans cette section aux méthodes utilisables avec les expressions régulières. Méthode Description exec Retourne la première occurrence correspondant à l’expression régulière dans la chaîne. test Détermine si des occurrences sont contenues dans la chaîne de caractères en paramètre pour l’expression régulière. match Retourne les différentes sous-chaînes (sous forme de tableau) de caractères correspondant à l’expression régulière dans la chaîne de caractères initiale search Retourne la position de la première occurrence correspondant à l’expression régulière.
  • 54. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les expressions régulières Exemples d’application: var chaine = "Ceci est une chaine de test"; var expression = /test$/g; var retour = expression.test(chaine); // retour contient la valeur true chaine = "Ceci est une chaine de test."; retour = expression.test(chaine); // retour contient désormais la valeur false var chaine = "Ceci est une chaine de test"; var expression = /test$/g; var sousChaines = expression.exec(chaine); // sousChaines est un tableau contenant un seul élément, « test » var chaine = "Ceci est une chaine de test"; var expression = /chaine|test/g; var sousChaines = chaine.match(expression); /* sousChaines est un tableau contenant les valeurs « chaine » et « test » */ var chaine = "Ceci est une chaine de test"; var expression = /chaine|test/g; var position = chaine. search(expression); // position contient la valeur 13 La méthode test() La méthode exec() La méthode match() La méthode search()
  • 55. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur Les expressions régulières <script language="javascript"> var cin_format = /^[a-zA-Z]{1,2}[0-9]{2,10}$/gi; var saisieCIN=prompt("Saisissez votre CIN: "); alert(cin_format.test(saisieCIN)); var DATE_format = /^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-_]([0]?[1-9]|[1][0-2])[./-_]([0-9]{4}|[0-9]{2})$/; var saisieDate=prompt("Saisissez votre date de naissance: "); alert(DATE_format.test(saisieDate)); var EMAIL_format = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$/; var saisieEMAIL=prompt("Saisissez votre Email: "); alert(EMAIL_format.test(saisieEMAIL)); var tel_format = /^[0]?[6][0-9][1-9]|[5][2|3][0-9]?d{6}$/gi; var saisieTel=prompt("Saisissez votre Tel: "); alert(tel_format.test(saisieTel)); </script>
  • 56. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur Les expressions régulières <script language="javascript"> var chaine = "voila mon email est bba@bba.ma de test"; var expression = /bba@bba.ma|test/g; var sousChaines = chaine.match(expression); alert(sousChaines); var expression = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}/g; var position2 = chaine.search(expression); alert(position2); var chaine3 = "voila mon email est bba@bba.ma de test et aussi un autre cccn@cccccccc.com"; var expression = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}/g; var position3 = expression.exec(chaine3); alert(position3); </script>
  • 57. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les Fonctions Introduction Les fonctions représentent le concept de base de la programmation JavaScript afin de modulariser les traitements. Nous verrons que les fonctions constituent la clé de voûte du développement objet en JavaScript. Le mot-clé function permet de mettre en œuvre les fonctions selon la syntaxe suivante : function nomDeLaFonction(parametre1, parametre2, ...) { //Code de la fonction }
  • 58. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les Fonctions Identification de fonction Le langage JavaScript n’utilise pas les signatures pour identifier les fonctions et se fonde uniquement sur leurs noms. Ainsi, deux fonctions globales ou d’un même objet possédant le même nom ne peuvent coexister avec ce langage. enfaite l’interprétateur JavaScript utilise toujours celle qui a été définie en dernier, ignorant toutes les précédentes. function maFonction(parametre1, parametre2) { return parametre1+" - "+parametre2; } function maFonction(parametre1) { return parametre1; } var retour = maFonction("param1", "param2"); // Affiche parametre1
  • 59. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les Fonctions Gestion des arguments JavaScript met à disposition la liste des arguments passés à une fonction dans une variable particulière. Nommée arguments, cette variable est implicitement définie pour chaque fonction. Le développeur peut donc l’utiliser directement dans le code des fonctions. Cette fonctionnalité de JavaScript permet de supporter plusieurs signatures de méthodes et ainsi de contourner le problème lié au nombre d'arguments. function maFonction() { if( arguments.length == 1 ) { return arguments[0]; } if( arguments.length == 2 ) { return arguments[0]+" - "+arguments[1]; } }
  • 60. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les Fonctions Méthodes de la classe Function La class Function de JavaScript propose deux méthodes supplémentaires d’appelle de fonctions. Ces méthodes sont : › La méthode apply() appelle une fonction en lui passant une valeur this et des arguments sous forme d'un tableau (ou d'un objet semblable à un tableau). › La méthode call() réalise un appel à une fonction avec une valeur this et les arguments fournis individuellement. var nombresTab = [5, 6, 2, 3, 7]; var v = MaFonction.apply(this, nombres); Var v1=2; Var v2=34; Var v4=7; var v = MaFonction.call(this, v1,v2,v3);
  • 61. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP sur Les Fonctions <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test Fonction</title> </head> <body> <p id="demo"></p> <script> function findMax() { var i, max = 0; for(i = 0; i < arguments.length; i++) { if (parseInt(arguments[i]) > max) { max = arguments[i]; } } return max; } var recupParam=prompt("Entrer des chiffres séparés par des virgules: "); var tab = recupParam.split(","); document.getElementById("demo").innerHTML = findMax.apply(this, tab); </script> </body> </html>
  • 62. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Les Closures Définition En rapport avec les fonctions JavaScript propose d'autres fonctionnalités permettent le support des Closures. Une closure est une fonction JavaScript particulière, qui utilise directement des variables définies en dehors de la portée de son code. Ce mécanisme est souvent utilisé par des fonctions définies dans d’autres fonctions, comme l’illustre le code suivant : function uneFonction(parametre) { function uneClosure(unAutreParametre) { return "Les paramètres sont: " +parametre+", "+ unAutreParametre; } return uneClosure; } var retour = uneFonction("Mon paramètre"); var valeurRetour = retour("Mon autre paramètre"); // valeurRetour contient « Les paramètres sont: Mon paramètre, Mon autre paramètre »
  • 63. 09/06/2015Formation en Développement WEB Les bases de JavaScript – TP Formulaire <script> function surligne(champ, erreur){ if(erreur) champ.style.backgroundColor = "#fba"; else champ.style.backgroundColor = ""; } function verifNomPrenom(champ){ if(champ.value.length < 2 || champ.value.length > 25){ surligne(champ, true); return false; }else{ surligne(champ, false); return true; } } function verifMail(champ){ var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$/; if(!regex.test(champ.value)){ surligne(champ, true); return false; }else{ surligne(champ, false); return true; } } function verifAge(champ){ var age = parseInt(champ.value); if(isNaN(age) || age < 5 || age > 111){ surligne(champ, true); return false; }else{ surligne(champ, false); return true; } } function verifForm(f){ var nomOk = verifNomPrenom(f.nom); var prenomOk = verifNomPrenom(f.prenom); var mailOk = verifMail(f.email); var ageOk = verifAge(f.age); if(nomOk && prenomOk && mailOk && ageOk){ alert("formulaire OK ;-) "); return true; }else{ alert("Veuillez remplir correctement tous les champs"); return false; } } </script> <body > <form action="#" methode="post" onsubmit="return verifForm(this)"> <p> Nom : <input type="text" name="nom" onblur="verifNomPrenom(this)" /><br /> Prénom : <input type="text" name="prenom" onblur="verifNomPrenom(this)" /><br /> E-mail : <input type="text" name="email" size="30" onblur="verifMail(this)" /><br /> Âge : <input type="text" name="age" size="2" onblur="verifAge(this)" /> ans<br /> <input type="submit" value="Valider" /> </p> </form> </body> </html>
  • 64. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Gestion des exceptions Introduction La gestion des anomalies d’exécution est un aspect très important de la programmation. Une approche méthodique à ce sujet de la part des développeurs permet d’obtenir du code plus robuste et lisible à la fois. Dans le contexte des langages de programmation, un système de gestion d’exceptions permet de gérer les conditions exceptionnelles pendant l’exécution du programme. Lorsqu’une exception se produit, l’exécution normale du programme est interrompue et l’exception est traitée.
  • 65. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Gestion des exceptions Erreurs et exceptions Une erreur est une anomalie de fonctionnement, une condition imprévue durant l’exécution d’un programme, qui rend impossible sa continuation et demande que des actions soient entreprises pour réparer la défaillance, comme par exemple : – une division par zéro ; – une tentative d’ouvrir un fichier qui n’existe pas ; – l’utilisation d’une référence nulle pour accéder à un objet. Tout programme en exécution peut être sujet à des conditions qui pourraient, si non gérées, provoquer des erreurs. Ces conditions, en elles mêmes, ne sont pas des bugs, mais des conditions particulières (exceptions) dans le déroulement normal d’une partie d’un programme. Tel l’impossibilité d’ouvrir un fichier.
  • 66. 09/06/2015Formation en Développement WEB Les bases de JavaScript – Gestion des exceptions Attraper les exceptions JavaScript offre la même syntaxe que Java pour gérer les exceptions, au moyen des mots clés try, catch et finally. Le premier définit le bloc d’interception des exceptions, le second les traitements à réaliser en cas de levée d’exceptions et le dernier les traitements à exécuter, que des exceptions soient levées ou non. Le code suivant décrit la façon de gérer les exceptions (nous faisons volontairement appel à une méthode testException inexistante afin de déclencher une exception) : try { testException(); //Cette méthode est inexistante! } catch(error) { alert("Une exception a été levée"); alert("Nom de l’exception levée : "+error.name); alert("Message de l’exception levée : "+error.message); } finally { alert("Passage dans finally"); }
  • 67. 09/06/2015Formation en Développement WEB Les bases de JavaScript – la Programmation Orientée Objet Le langage JavaScript offre la possibilité de mettre en œuvre la plupart des concepts objet, tels que l’héritage et le polymorphisme. Les développeurs peuvent tirer parti de ces mécanismes pour augmenter la qualité, la lisibilité et la modularité de leurs applications JavaScript. La façon de mettre en œuvre les concepts objet est spécifique à ce langage, et est essentiellement fondée sur les fonctions et closures de JavaScript.
  • 68. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: Concepts généraux Classes et objets: Le concept central de la programmation objet est la classe. Composée d’attributs et de méthodes, ces derniers permettent de définir respectivement les états et les comportements de la classe. Instances et objets: Une classe n’est pas utilisable directement dans une application, car elle correspond à un concept abstrait. Les applications travaillent sur des objets ou instances correspondant à des occurrences de classes. Encapsulation et visibilité: L’encapsulation revient à interdire l’accès à certains éléments d’une classe afin de protéger ses états et fonctionnements internes. Les attributs de classe ne doivent pas être exposés directement à l’extérieur. C’est la raison pour laquelle la mise en œuvre d’accesseurs constitue une bonne pratique de conception. Niveau de visibilité Description Par défaut Seules les sous-classes ont accès aux éléments de la classe. Privé Les entités externes n’ont pas accès aux éléments de la classe. Protégé Seules les sous-classes ont accès aux éléments de la classe. Public Les entités externes ont accès aux éléments de la classe.
  • 69. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: Concepts généraux L’héritage: Par souci de modularité, les langages orientés objet mettent en œuvre des mécanismes d’héritage. Ces derniers permettent de définir des sous-classes afin d’enrichir et de bénéficier d’attributs et de méthodes de classes existantes. Le polymorphisme: Les mécanismes de polymorphisme permettent à une application de voir une instance sous différentes formes. Le polymorphisme est intimement lié aux mécanismes de transtypage, qui permettent de convertir le type d’une instance, quand c’est possible, en un autre type.
  • 70. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: et JavaScript En résumé Nous avons décrit dans cette section les principaux concepts de la programmation orientée objet. Le langage JavaScript n’est pas un langage orienté objet, mais il permet néanmoins de mettre en œuvre quelques concepts décrits au cours des sections précédentes.
  • 71. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: et JavaScript Mot clé this Le mot clé this est également important dans la mise en œuvre de la programmation orientée objet en JavaScript. Il est utilisé dans une méthode afin de référencer l'instance sur laquelle est exécutée cette méthode. Il faut néanmoins faire attention lorsque l'on utilise this dans une fonction qui n'est pas rattachée à un objet car soit une erreur se produit ou des champs possèdent des valeurs non définies. L'exemple suivant illustre la mise en œuvre de ce mot clé: var maFonction = function() { alert("attribut: " + this.attribut); }; maFonction(); // Affiche la valeur undefined car this.attribut ne peut être résolu // Création de l'objet obj1 et affectation de maFonction var obj1 = { attribut: "valeur1", methode: maFonction } obj1.methode(); // Affiche la valeur de attribut, à savoir valeur1 // Création de l'objet obj2 et affectation de maFonction var obj2 = { attribut: "valeur2", methode: maFonction } obj2.methode(); // Affiche la valeur de attribut2, à savoir valeur2
  • 72. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: Structures des objets avec JavaScript Structure simple En JavaScript, le mot clé new peut être utilisé en se fondant sur une fonction afin d'initialiser un objet. L'initialisation est réalisée en utilisant les éléments contenus dans la fonction, ces derniers peuvent être aussi bien des attributs que des méthodes. Le code suivant illustre la mise en œuvre d'une classe JavaScript en utilisant ce principe: function MaClasse(parametre1, parametre2) { this.attribut1 = parametre1; this.attribut2 = parametre2; this.methode = function() { alert("Attributs: " + this.attribut1 + ", " + this.attribut2); } } var obj = new MaClasse("valeur1", "valeur2"); alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1 obj.methode(); // Affiche la chaîne de caractères contenant les valeurs des attributs
  • 73. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: Structures des objets avec JavaScript Prototypage Le prototypage correspond à spécifier une sorte de modèle indépendamment du constructeur afin d'initialiser chaque objet à sa création. Comme nous l'avons mentionné rapidement précédemment, la spécification de ce modèle se réalise en se fondant sur la propriété prototype de la classe Function. Il convient donc ainsi de toujours de créer une fonction constructeur comme précédemment afin de définir une classe. Cependant, contrairement à l'approche précédente, les éléments de la classe ne sont plus tous définis dans cette fonction. Le code suivant illustre l'adaptation de la classe MaClasse précédemment mise en œuvre en se fondant sur le prototypage: function MaClasse(parametre1, parametre2) { this.attribut1 = parametre1; this.attribut2 = parametre2; } MaClasse.prototype = { methode: function() { alert("Attributs: " + this.attribut1 + ", " + this.attribut2); } } var obj = new MaClasse("valeur1", "valeur2"); alert("Attribut1: " + obj.attribut1); // Affiche la valeur de l'attribut attribut1 obj.methode(); // Affiche la chaîne de caractères contenant les valeurs des attributs
  • 74. 09/06/2015Formation en Développement WEB Les bases de JavaScript – POO: Structures des objets avec JavaScript Combinaison des deux approches Dans cette approche, l'initialisation de la propriété prototype est réalisée dans le code du constructeur de la classe, ceci offrant la possibilité d'avoir accès à toutes les variables et méthodes de cette fonction particulière. Par contre, les principes décris dans les différentes approches restent vrais. Les méthodes définies directement dans le constructeur seront dupliquées alors que celles positionnées sur le prototype non. Le seul point subtil de cette approche est de forcer la propriété prototype à n'être initialisée qu'une seule et unique fois la première fois que le constructeur est appelé. Pour ce faire, il suffit d'ajouter une propriété personnalisée directement sur le constructeur de la manière suivante: function MaClasse() { this.attribut = "valeur"; if( typeof MaClasse.initialized == "undefined" ) { MaClasse.prototype.methode = function() { alert("Attribut: " + this.attribut); }; MaClasse.initialized = true; } } var obj = new MaClasse(); alert(obj.attribut); // Affiche la valeur de l'attribut attribut obj.methode();// Fonctionne correctement car la méthode a été ajoutée au prototype
  • 75. 09/06/2015Formation en Développement WEB 09/06/2015Formation en Développement WEB