- Créer et effectuer des opérations sur des tableaux
- Utiliser les différentes boîtes de dialogue en javascript
Introduction
Nous avons appris à créer et manipuler des variables en JavaScript. Si l’on voudrait enregistrer les notes d’une classe de 45 élèves il nous est très pénible de créer 45 variables et faire à chaque fois des affectations. Javascript nous offre cependant la possibilité de créer des tableaux dans lesquels nous pouvons stocker autant de données que nous voulons à partir d’une seule variable.I- LES TABLEAUX EN JAVASCRIPT
Un tableau (Array en anglais) est une variable qui contient plusieurs valeurs appelés items. Chaque valeur est accessible par son indice appelé index.1- Création d’un tableau
La création d’un tableau se fait comme n’importe quel objet. On utilise l’instruction new, on invoque le nom du constructeur puis on indique en paramètre du constructeur le nombre maximum N des éléments à insérer dans le tableau.var Tableau = new Array(N) ; N représente le nombre max des éléments à insérer dans le tableau. EX : var tab = new Array(10) ; ici nous venons de créer un nouveau tableau de pouvant contenir 10 éléments.
NB : on peut déclarer un tableau en lui affectant directement des valeurs EX :
var MonTableau = ["élément1","élément2","élémentN"];
2- Affectation d’un tableau
Pour affecter un tableau, il suffit d’affecter une valeur x à un item en précisant sont index.Syntaxe : var MonTableau = new Array(N);
MonTableau[i] = x
Exemple var MonTableau = new Array(10);
MonTableau[0] = 65 ; ici on insère la valeur 65 à l’indice 0 du tableau correspondant au premier élément du tableau.
3- Remplissage du tableau
Pour remplir un tableau, on se sert des indices. Par exemple pour un tableau dans lequel on veut insérer les 7 jours de la semaine, on fera comme suit :<script type="text/javascript">
var monTableau = new Array(7);
monTableau[0] = "Dimanche";
monTableau[1] = "Lundi";
monTableau[2] = "Mardi";
monTableau[3] = "Mercredi";
monTableau[4] = "Jeudi";
monTableau[5] = "Vendredi";
monTableau[6] = "Samedi";
</script>
Si nous voulons connaitre la taille du tableau, nous devons utiliser l’instruction monTableau.length
Pour donc afficher la taille de notre tableau précédent, on utilisera l’instruction
document.write(monTableau.length) et le programme affiche donc 7 sur la page.
L’utilisation de la méthode ci-dessus de vient pénible si l’on voudrait insérer des valeurs dans un tableau de plusieurs éléments. Il est donc nécessaire d’utiliser une boucle. La boucle conseillée est for. syntaxe :
<script type="text/javascript">
var MonTableau = new Array(3);
for (var i = 0; i < MonTableau.length; i++) {
MonTableau[i] = prompt("Entrez la valeur de l'indice "+i);
}
</script>
On pouvait remplacer MonTableau.lenth par 3.
Ce code permet de parcourir le tableau et d’y insérer directement des valeurs entrées par l’utilisateur.
4- Affichage d’un tableau
L’affichage d’un tableau n’est point différent de l’affichage des autres variables. On peut afficher dans une boîte de dialogue comme sur la page. Il est donc possible d’afficher le tableau élément par élément ou afficher tout le tableau en une seule instruction. Pour afficher le premier élément d’un tableau, on utilise son indice qui est 0. On peut écrire alert(MonTableau[0]); ou document.write(MonTableau[0]) ;Si l’on voudrait afficher tout le tableau, il suffit de faire alert(MonTableau); ou document.write(MonTableau) ;
II- LES BOITES DE DIALOGUE
1- Les boîtes de demande d’informations (saisie)
Une boite de saisie d’informations permet de recueillir des informations saisies par l’utilisateur pour ensuite les manipuler. La fonction prompt() est la celle permettant la saisie des données. Nous l’avons vu plus tôt.2- Les boites d’alertes
Les alertes permettent de prévenir l’utilisateur sur certains faits. Pour réaliser une alerte on utilise la fonction alert() vue précédemment.3- Les boites de demande de confirmation
Nous pouvons souhaiter que l’utilisateur confirme la réalisation de certains évènements comme la fermeture d’une page. Dans ce cas, on utilise la fonction confirm() qui retourne true si l’utilisateur accepte et false sinon. EX :<script type="text/javascript">
var age = confirm("Vous avez plus de 18 ans ?");
if (age) { alert("Vous êtes déja majeur !");
}else
alert("Vous êtes encore mineur");
</script>
Précédent
Suivant
Aucun commentaire:
Enregistrer un commentaire
Posez votre question ici