HTML4 Et CSS2.1 JavaScript P2

10/03/2015 Formation en Développement WEB

Formation en Développement WEB

[Le Web Statique] HTML, CSS, et JavaScript


Les bases de JavaScript

Les bases de

JavaScript


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


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.


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


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>


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.


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";


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.


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.


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.


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 »


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>


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.



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



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



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



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)



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


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



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


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>



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.



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);

}



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.



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.


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>


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.



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");

}



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");

}

}



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");

}

}


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>


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);



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]);

}



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




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




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




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




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


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>


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");



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



str.split([separateur][, limit]); // limit est le nombre de sous-chaînes à retourner


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]);



str. indexOf([ChaineRecherchée][, indexDebut]);


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



str.toUpperCase();


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.


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.


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.


Les bases de JavaScript – TP sur les Dates

Créer une fonction JavaScript qui affiche les date sous les formats suivants:


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.



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 */



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.



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.



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.



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 expression = /test$/g;

var sousChaines = expression.exec(chaine);

// sousChaines est un tableau contenant un

seul élément, « test »


var expression = /chaine|test/g;

var sousChaines = chaine.match(expression);

/* sousChaines est un tableau contenant les

valeurs « chaine » et « 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()


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>


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>


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

}



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



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];

}

}



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);


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>


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 »


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


return false;

}else{


return true;

}

}

function verifAge(champ){

var age = parseInt(champ.value);

if(isNaN(age) || age < 5 || age > 111){


return false;

}else{


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>


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.



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.



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");

}


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.


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.


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.


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.


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


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



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



}

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



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

HTML4 Et CSS2.1 JavaScript P2

Documents

Transcript of HTML4 Et CSS2.1 JavaScript P2