Cours JS Part2

45
Cours :Développement Web 1 Année universitaire :2014-2015 Enseignants : Mme Z. CHANNOUF Partie 2

description

cours javascipt

Transcript of Cours JS Part2

Page 1: Cours JS Part2

Cours :Développement Web

1

Année universitaire :2014-2015

Enseignants : Mme Z. CHANNOUF

Partie 2

Page 2: Cours JS Part2

Sommaire

Les tableaux et l’objet Array

Les chaines de caractères et l’objet String

L’objet Date

L’objet Math

Les formulaires

L’accès aux éléments du formulaire

Exemples

2

Page 3: Cours JS Part2

Deux types de tableaux : ◦ les tableaux classiques : pas de contrainte sur le contenu des cases,

celles-ci sont numérotées à partir de 0 ;

◦ les tableaux associatifs dont la particularité est que les cases ne sont plus indicées par un numéro mais par un texte.

Les tableaux classiques

La déclaration d'un tableau et l'affectation de valeurs à ses cases.

var t = new Array();

t[0] = 2;

t[1] = 3.14;

t[2] = 'coucou';

// autre syntaxe pour définir un tableau

var notes = new Array(10,5,20,14,2);

3

Les tableaux et l’objet Array

Page 4: Cours JS Part2

Les tableaux associatifs

var mails = new Array();

mails[‘ahmad'] = ‘[email protected]';

mails[‘eya'] = ‘[email protected]';

document.write('Mail de Ahmad= '+mails[‘ahmad']);

Propriétés et méthodes de l’objet Array

4

Les tableaux et l’objet Array

Propriété Description

length Retourne le nombre d'éléments contenus dans le tableau

MonTableau.length;

Page 5: Cours JS Part2

5

Méthode Description

concat()

Permet de concaténer plusieurs tableau dans l'ordre de

déclaration

MonTableau.concat(Tableau2, Tableau3);

join()

Retourne une chaîne de caractère contenant tous les éléments

du tableau séparés par le séparateur spécifié (par défaut la

virgule)

MonTableau.join(Separateur)

pop()

Supprime le dernier élément du tableau et retourne sa valeur

MonTableau.pop()

push()

Ajoute les éléments spécifiés et retourne la nouvelle taille du

tableau

TailleTableau = MonTableau.push(valeur1, valeur2)

reverse()

Inverse les éléments du tableau, le dernier élément devenant le

premier et ainsi de suite

MonTableau.reverse()

shift()

Supprime et retourne le premier élément du tableau

MonTableau.shift()

slice()

Génère un nouveau tableau à partir d'une section d'un tableau

existant

MonTableau.slice(IndexDebut,IndexFin)

Page 6: Cours JS Part2

Parcours de tableaux JavaScript : la boucle for in

Cette boucle est dédiée au parcours de tableaux, qu'ils soient simples ou

associatifs :

// syntaxe générale

for (var k in t)

{ // des instructions ici portant sur t[k] }

// ... et sur un exemple

var carnet = new Array();

carnet[‘Ahmad'] = '19 ans';

carnet[‘Eya'] = ‘19 ans';

carnet[‘Mohammed'] = '30 ans';

// affichage des valeurs du tableau

for (var i in carnet)

{ document.write('la clef vaut : ' + i);

document.write(', la valeur associée est : ' + carnet[i]+'<br>'); }

6

Les tableaux et l’objet Array

Page 7: Cours JS Part2

Les chaines de caractères

Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets

" ou l'apostrophe ‘.

7

var chaine1="Bonjour"; var chaine2='Bonjour'; // Ces deux lignes ont le même effet

Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères

Le secret est d'alterner les guillemets et les apostrophes selon les caractères spéciaux à afficher

Il faut veiller à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript

var chaine1="Bonjour l'ami"; var chaine2='Je vous dis "Bonjour " ';

Page 8: Cours JS Part2

Exemple de déclaration incorrecte

Il existe aussi une autre solution

La variable chaine1 contient Je lui dis "Bonjour l'ami".

Javascript a interprété \" comme un guillemet.

8

var chaine1="Je vous dis "Bonjour""; // ici, le " indique la fin de chaîne

var chaine1="Je lui dis \"Bonjour l'ami\" ";

Les chaines de caractères

Page 9: Cours JS Part2

L'opération de base est la concaténation de chaînes

◦ Elle consiste à assembler deux chaînes en une

◦ L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres

◦ La variable chaine contient après ce script "Vive le JavaScript". La concaténation est une opération simple et très utile

9

var chaine1="Vive le "; var chaine2="JavaScript"; var chaine=chaine1+chaine2;

Les chaines de caractères

Page 10: Cours JS Part2

Propriétes et méthodes

Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes.

La propriété length indique le nombre de caractères de la chaîne

chaine.length retourne le nombre de caractères, ici 6 caractères

10

var chaine="azerty";

Les chaines de caractères

La méthode charAt(n) récupère le nième caractère

◦ Attention, le premier caractère a comme indice 0

◦ chaine.charAt(1) retourne "z"

var chaine="azerty"

Page 11: Cours JS Part2

11

Les chaines de caractères

La méthode substring permet d’extraire un morceau d’une chaine. Elle attend 2 paramètres

◦ l'indice du premier caractère (inclus), l'indice du dernier caractère (exclus).

Si les deux paramètres sont inversés, javascript rétablit l'ordre logique

◦ chaine.substring(6,10) et chaine.substring(10,6) sont identiques

Si le deuxième paramètre est omis, la chaîne retournée commence à l'indice indiqué et se termine à la fin de la chaîne.

La question est de récupérer le jour, le mois et l'année dans 3

variables différentes

var date="15/08/2000";

var jour = date.substring(0,2); var mois = date.substring(3,5); var annee = date.substring(6,10);

Page 12: Cours JS Part2

JavaScript offre deux méthodes pour transformer les lettres (et des lettres uniquement) d'un mot en majuscules ou en minuscules

A la fin de ce script, maj contient CECI EST UN TEXTE et min contient ceci est un texte

12

var chaine="Ceci est un texte"; var maj=chaine.toUpperCase(); var min=chaine.toLowerCase();

Les chaines de caractères

Page 13: Cours JS Part2

L’objet Date

13

L’objet Date de Javascript apporte une gestion complète du temps :

Aujourd'hui : Lundi 20Avril 2015, l'horloge de votre ordinateur donne 09h

24min

Il propose des accès aux différentes parties constituant la date ainsi que

des méthodes de manipulation pour effectuer des calculs ou des

modifications.

Fonctions pour récupérer la date getDate(); getMilliseconds(); getSeconds();

getMinutes(); getHours(); getDay();

getMonth(); getYear(); getFullYear(); getTime()

Fonctions pour modifier la date setMilliseconds(valeur); setSeconds(valeur);

setMinutes(valeur); setHours(valeur):;

setDate(valeur); setMonth(valeur);

setYear(valeur); setFullYear(valeur);

setTime(valeur)

Autres fonctions parse(); toGMTString(); toLocaleString()

Page 14: Cours JS Part2

14

Exemple : date.html

<html> <head> <title>Aujourd'hui</title> </head>

<body> Date de votre machine :

<script language="JavaScript">

var aujourd_hui = new Date();

document.write(aujourd_hui.getDate()+' / ');

document.write(aujourd_hui.getMonth()+1+' / ');

document.write(aujourd_hui.getFullYear());

</script>

</body>

</html>

L’objet Date

Page 15: Cours JS Part2

15

En JavaScript, la plupart des fonctions mathématiques sont des

méthodes de l'objet Math.

L'objet Math permet de manipuler les nombres et d'accéder aux

fonctions mathématiques classiques :

- les arrondis round(), abs(), floor(), ceil()

- les fonctions trigonométriques sin(), cos() ...

- le hasard avec random()

L'objet Math contient aussi une importante liste de constantes

mathématiques (PI, ...)

L’objet Math

Page 16: Cours JS Part2

16

Les fonctions de base :

Math.abs(a) : Retourne la valeur absolue de a

Math.round(a) : Retourne l'entier arrondi le plus proche de a

Math.ceil(a) : Retourne l'entier immédiatement supérieur (ou

égal) à a

Math.floor(a) : Retourne l'entier immédiatement inférieur (ou

égal) à a

Math.sqrt(a) : Retourne la racine carrée de a

Math.log(a) : Retourne le logarithme de a

Math.ln(a) : Retourne le logarithme népérien de a

Math.exp(a) : Retourne l'exponentielle de a

Math.pow(a,b) : Retourne a à la puissance b

Math.min(a,b) : Retourne le plus petit des paramètres a ou b

Math.max(a,b) : Retourne le plus grand des paramètres a ou b

L’objet Math

Page 17: Cours JS Part2

17

Les formulaires

Les formulaires sont la base des échanges entre le site et

le visiteur.

JavaScript ne peut pas échanger d'information à partir de

fichier texte ou de base de données.

Pour intégrer des éléments de formulaire, il faut encadrer

les balises par <form> et </form>.

Page 18: Cours JS Part2

18

Création de formulaire

Case à cocher Bouton radio

Champ de texte Password

Zone de texte Bouton

Bouton Reset Bouton Submit Valeur cachée

Les éléments du formulaire

Page 19: Cours JS Part2

Une méthode est une fonction (ou procédure) de traitement de données associée à un objet

Un événement est une fonction (pas une procédure!) toujours associée à un objet mais qui réagit en fonction des interventions de l'utilisateur

◦ Il utilise le clavier pour fournir des infos

◦ Il sélectionne l'objet avec la souris

◦ Il spécifie des valeurs de l'objet avec la souris

Cette notion d'événement est cruciale car elle est la base du fonctionnement des programmes Internet

19

Définition des méthodes et événements

Les éléments du formulaire

Page 20: Cours JS Part2

La balise <form> : Propriétés

20

name Nom du formulaire

action Adresse du script de serveur à exécuter

method Méthode d'appel du script (get ou post)

enctype Type d'encodage du formulaire

target Destination du retour du formulaire

Les éléments du formulaire

submit Déclenche l'action du formulaire

reset Réinitialise avec les valeurs par défaut

onSubmit Détecte la soumission du formulaire

onReset Détecte la réinitialisation

La balise <form> : Méthodes

La balise <form> : Evènements

Page 21: Cours JS Part2

L'objet input est le plus utilisé de tous.

Il permet d'afficher

◦ des champs texte,

◦ des boutons,

◦ des radio-boutons,

◦ des cases à cocher,

◦ le champ caché,

◦ les boutons spéciaux reset et submit.

21

L'élément input

Les éléments du formulaire

Page 22: Cours JS Part2

L'élément input : Propriétés

22

name Nom du champ

type type du champ text, button, radio, checkbox, submit, reset

value Libellé texte

defaultvalue Valeur par défaut du champ (utile avec reset)

size Taille du champ

maxlength Taille maximale du champ de type texte

checked Case à cocher ou radio bouton coché ou non

disabled Grisé (modification impossible par le visiteur)

readOnly Lecture seule

class Nom de la classe de style

style Chaîne de caractères pour le style

Les éléments du formulaire

Page 23: Cours JS Part2

L'élément input : Méthodes

23

focus Donne le focus (ou le curseur ou la main)

blur Enlève le focus

click Simule un clic (sur un bouton)

onFocus Détecte la prise de focus

onBlur Détecte la perte de focus

onClick Détecte le clic souris (sur un bouton)

onChange Détecte les changements

Les éléments du formulaire

L'élément input : Evénements

Page 24: Cours JS Part2

Un champ de texte est défini par la balise input avec un type text

Propriétés acceptées

◦ name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style

Méthodes acceptées

◦ focus, blur

Evénements acceptés

◦ onFocus, onBlur, onChange

24

Les champs de texte

<input type="text">

Les éléments du formulaire

Page 25: Cours JS Part2

Un bouton est défini par la balise input avec un type button

Propriétés acceptées name | value | defaultvalue | size | maxlength | disabled |

readOnly | class | style

Méthodes acceptées focus | blur | click

Événements acceptés onFocus | onBlur | onClick

L'événement le plus utilisé est onClick car il détecte le clic utilisateur.

25

Les Boutons

<input type="button" value="Ceci est un bouton">

Les éléments du formulaire

Page 26: Cours JS Part2

Un radio-button est défini par la balise INPUT avec un type

"radio"

Pour définir un groupe, il faut donner le même nom (champs

name) à tous les radios.

Ainsi, la sélection sera unique pour l'ensemble du groupe.

26

Les Boutons-Radio

<input type="radio" name="sexe" value="homme"> Homme <input type="radio" name="sexe" value="femme" checked>Femme

Les éléments du formulaire

Propriétés acceptées

◦ name | value | checked | disabled | readOnly | class | style

Méthodes acceptées

◦ focus | blur | click

Evénements acceptés

◦ onFocus | onBlur | onClick

Page 27: Cours JS Part2

Une case à cocher est définie par la balise INPUT avec un type

checkbox.

Ici, Majeur et Etudiant sont décochés à l'origine.

Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.

27

Les Cases à Cocher

<input type="checkbox" name="majeur">Majeur <input type="checkbox" name="etudiant">Etudiant

Les éléments du formulaire

Propriétés acceptées

◦ name | checked | disabled | readOnly | class | style

Méthodes acceptées

◦ focus | blur | click

Événements acceptés

◦ onFocus | onBlur | onClick

Page 28: Cours JS Part2

Password se présente comme une zone de texte.

Mais il affiche des * pour cacher le contenu du champ.

Il est aussi impossible de copier le contenu (CTRL+C).

Il est donc adapté à la saisie de mot de passe.

28

<input type="password" name="passe" value="azerty" size=10>

Le password

Les éléments du formulaire

Page 29: Cours JS Part2

Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en aperçoivent.

Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information.

Naturellement, le champ n'apparaît pas!

Propriétés acceptées

name | value | defaultvalue

Remarque : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en JavaScript.

29

<input type="hidden" value="contenu caché" name="cache">

La valeur cachée

Les éléments du formulaire

Page 30: Cours JS Part2

Les boutons reset et submit existent bien!

<form name="formspe" action="javascript:alert('Soumis')">

<input type="text" name="texte" value="Contenu">

<input type="checkbox" checked>Cochez moi !<BR>

<input type="reset" value="RESET">

<input type="submit" value="SUBMIT">

</form>

30

Les boutons spéciaux

Les éléments du formulaire

Page 31: Cours JS Part2

Les listes sont définies par les balises <select></select>

Cette balise définie la zone de la liste. Les lignes de contenu de

la liste sont alimentées par les balises <option></option>

<select name="mono" size=1>

<option value="1">ligne 1</option >

<option value="2">ligne 2</option >

<option value="3">ligne 3</option >

<option value="4">ligne 4</option >

</select>

31

Les menus de selection

Les éléments du formulaire

Page 32: Cours JS Part2

Les listes peuvent se présenter de plusieurs manières, selon leur

propriété.

◦ Sur une ligne : size=1

◦ Sur plusieurs lignes mono-sélection : size=4

◦ Sur plusieurs lignes multi-sélection multiple size=4

32

les menus de selection

Les éléments du formulaire

L’élément option

L'objet option est assez simple

Il peut avoir comme attributs

◦ name, value, selected

selected force la sélection de cette occurrence dans la liste

Page 33: Cours JS Part2

name Nom de la liste size Nombre de lignes à afficher multiple Sélection multiple autorisée

disabled Grisage de la liste class Classe de feuille de style style Style de la liste

33

les menus de selection :Propriétés

add Ajoute un ligne (objet OPTION)

remove Supprime une ligne

focus Donne le focus à la liste

blur Reprend le focus

onChange Détecte la sélection d'une nouvelle ligne

onFocus Détecte la prise de focus

onBlur Détecte la perte de focus

les menus de selection :Méthodes et événements

Les éléments du formulaire

Page 34: Cours JS Part2

L'objet textarea est essentiellement utilisé pour permettre au

visiteur de saisir un texte assez long (message, descriptif...)

<textarea name="texte" rows="5" cols="20">

Ligne 1

Ligne 2

...

</ textarea >

34

Les éléments du formulaire

Les zones de texte multi lignes : Textarea

Page 35: Cours JS Part2

name Nom de la zone

rows Nombre de lignes

cols Nombre de colonnes

disabled Grisage de la zone

readOnly Lecture seule

class Classe de feuille de style

style Style de la liste

35

Textarea :propriétés

Les éléments du formulaire

focus Donne le focus à la zone

blur Reprend le focus

onChange Détecte le changement de contenu

onScroll Détecte le défilement de la zone

onFocus Détecte la prise de focus

onBlur Détecte la perte de focus

Textarea :méthodes et événements

Page 36: Cours JS Part2

Les éléments de formulaire sont des objets javascript

Le formulaire est un élément de l'objet document. Pour accéder au

formulaire géneral, il faut écrire :

document.forms["general"]

ou bien

document.forms[0] ou bien

document.general

elements est le tableau de tous les éléments du formulaire. On peut

accéder à un élément par son nom ou par son indice, ou directement

par son nom.

36

L’accès aux éléments du formulaire

Page 37: Cours JS Part2

Il est préférable d'utiliser le nom des éléments, plutôt que les indices

: les noms sont indépendants de l'organisation du formulaire.

Une fois que l'élément est atteint, il est possible de manipuler ces

propriétés.

Par exemple, pour placer dans la zone de texte le mot NOUVEAU,

il faut juste écrire : document.forms["general"].elements["champ1"].value="NOUVEAU".

Pour donner le focus au champ texte du haut de cette page, il faut

appeler la méthode focus() sur cet élément.

document.forms["general"].elements["champ1"].focus()

37

L’accès aux éléments du formulaire

Page 38: Cours JS Part2

L'accès aux éléments de type INPUT

Les zones de texte:

Imaginons un formulaire appelé monform qui possède un champ

texte appelé monchamp. On accède au contenu du champ par :

document.forms["monform"].elements["monchamp"].value

Ou

document.monform.monchamp.value.

Les boutons:

La propriété value contient le libellé du bouton. Comme pour une

zone de texte, ce libellé est accessible.

38

L’accès aux éléments du formulaire

Page 39: Cours JS Part2

Les cases à cocher:

Pour détecter qu'une case est cochée, il faut utiliser sa

propriété checked.

<FORM>

<INPUT type="checkbox" name="majeur">Majeur

<INPUT type="checkbox" name="etudiant">Etudiant

<INPUT type="button" value="Tester" onClick="alert('Majeur

: '+this.form.majeur.checked+'\nEtudiant :

'+this.form.etudiant.checked);">

</FORM>

checked est de type booléen.

39

L'accès aux éléments de type INPUT

L’accès aux éléments du formulaire

Page 40: Cours JS Part2

L'accès aux éléments de type INPUT

Les radio-boutons:

<HTML> <HEAD>

<SCRIPT>

function choixprop() {

if (form3.choix[0].checked) { alert("Vous avez choisi le choix " +form3.choix[0].value) };

if (form3.choix[1].checked) { alert("Vous avez choisi le choix " +form3.choix[1].value) };

if (form3.choix[2].checked) { alert("Vous avez choisi le choix " +form3.choix[2].value) };

}</SCRIPT> </HEAD>

<BODY>

Entrez votre choix :

<FORM NAME="form3">

<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>

<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>

<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>

<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ? " onClick="choixprop()">

</FORM> </BODY> </HTML>

40

L’accès aux éléments du formulaire

Page 41: Cours JS Part2

L'accès aux éléments de type SELECT

En JavaScript, la structure d'un élément de type SELECT est comme

suit :

name : Nom de la liste

selectedIndex : Indice de la ligne sélectionnée

(ligne 1 : indice=0)

options : Tableau des lignes

length : Nombre de lignes

value : Valeur d'une ligne

text : Libellé d'une ligne

41

L’accès aux éléments du formulaire

Page 42: Cours JS Part2

L'accès aux éléments de type SELECT Exemple:

<SELECT name="liste" size=1>

<OPTION value="valeur ligne 1">Libellé ligne 1</OPTION>

<OPTION value="valeur ligne 2">Libellé ligne 2</OPTION>

<OPTION value="valeur ligne 3">Libellé ligne 3</OPTION>

<OPTION value="valeur ligne 4">Libellé ligne 4</OPTION>

</SELECT>

Pour récupérer l'indice la ligne sélectionnée :

document.monform.liste.selectedIndex

Pour récupérer le nombre de lignes :

document.monform.liste.options.length

Pour récupérer la valeur de la ligne sélectionnée :

document.monform.liste.options[document.monform.list

e.selectedIndex].value

42

L’accès aux éléments du formulaire

Page 43: Cours JS Part2

L'accès aux éléments de type Textarea

Une zone de texte multi-lignes a comme propriété

principale value qui contient le texte de la zone.

Pour récupérer le contenu de la zone, on utilise le classique :

document.forms["nom"].elements["zone"].value

Le "contenu traité" est obtenu par l'appel de la fonction escape() qui

convertit tous les caractères spéciaux et non visibles (tabulations,

retour à la ligne, ...).

escape(document.forms["nom"].elements["zone"].value)

La fonction inverse est unescape().

43

L’accès aux éléments du formulaire

Page 44: Cours JS Part2

Exemple 1 : <script >

function test1() {

if (form.Texte1.value == "") alert("entrez maintenant une chaîne non vide")

}

function test2() {

if (form.Texte2.value == "" || form.Texte2.value.indexOf('@', 0) == -1)

alert("entrez une adresse contenant @");}

function test3() { var erreur = 0 ;

for (var i = 0; i < form.Texte3.value.length ; i++)

{ var chaine = form.Texte3.value.substring (i, i + 1);

if (chaine < "0" || "9" < chaine)

{ erreur=1 ; } }

if (erreur == 1 )

{ alert ("entrez un nombre" ) ; } }

</script> 44

Page 45: Cours JS Part2

Exemple 2 : <script>

function verif_form(){

var temoin = 0;

if(document.formulaire.nom.value == ""){

alert("Le champ \"Nom\" est vide"); return false; }

if(document.formulaire.prenom.value == ""){

alert("Le champ \"Prénom\" est vide"); return false; }

if(document.formulaire.sexe.selectedIndex == 0){

alert("Vous n'avez pas choisi votre sexe"); return false; }

for(i=0;i<document.formulaire.loisir.length;i++){

if(document.formulaire.loisir[i].checked) { ++temoin; }

}

if(temoin != 3) {alert("Vous devez choisir 3 loisirs !"); return false; }

return true;

}</script> 45