Cours JS Part2
-
Upload
zhairachannouf -
Category
Documents
-
view
225 -
download
0
description
Transcript of Cours JS Part2
Cours :Développement Web
1
Année universitaire :2014-2015
Enseignants : Mme Z. CHANNOUF
Partie 2
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
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
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;
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)
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
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 " ';
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
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
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"
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);
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
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()
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
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
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
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>.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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