Upload
arharrab
View
15
Download
3
Embed Size (px)
DESCRIPTION
HTML4 Et CSS2.1 JavaScript
Citation preview
10/03/2015 Formation en Développement WEB
Formation en Développement WEB
[Le Web Statique] HTML, CSS, et JavaScript
10/03/2015 Formation en Développement WEB
Les bases de JavaScript
Les bases de
JavaScript
10/03/2015 Formation 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
10/03/2015 Formation 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.
10/03/2015 Formation 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 !).
10/03/2015 Formation 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>
10/03/2015 Formation 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.
10/03/2015 Formation 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";
10/03/2015 Formation 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/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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 »
10/03/2015 Formation 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>
10/03/2015 Formation 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.
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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)
10/03/2015 Formation 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
10/03/2015 Formation 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).
10/03/2015 Formation 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
10/03/2015 Formation 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>
10/03/2015 Formation 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.
10/03/2015 Formation 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);
}
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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>
10/03/2015 Formation 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.
10/03/2015 Formation 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");
}
10/03/2015 Formation 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");
}
}
10/03/2015 Formation 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");
}
}
10/03/2015 Formation 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>
10/03/2015 Formation 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);
10/03/2015 Formation 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]);
}
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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>
10/03/2015 Formation 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");
10/03/2015 Formation 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
10/03/2015 Formation 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]);
10/03/2015 Formation 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
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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:
10/03/2015 Formation 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.
10/03/2015 Formation 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 */
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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()
10/03/2015 Formation 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>
10/03/2015 Formation en Développement WEB
Les bases de JavaScript – TP sur Les expressions régulières
<script language="javascript">
var chaine = "voila mon email est [email protected] de test";
var expression = /[email protected]|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 [email protected] de test et aussi un autre [email protected]";
var expression = /[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}/g;
var position3 = expression.exec(chaine3);
alert(position3);
</script>
10/03/2015 Formation 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
}
10/03/2015 Formation 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
10/03/2015 Formation 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];
}
}
10/03/2015 Formation 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);
10/03/2015 Formation 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>
10/03/2015 Formation 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 »
10/03/2015 Formation 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>
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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");
}
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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.
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation 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
10/03/2015 Formation en Développement WEB 10/03/2015 Formation en Développement WEB