Structures, fonctions et tableaux

Programmation Web événementielle

Dr. Alla LO
Expert en IA et BI

2023
Chapitre 3 : Structures, fonctions et tableaux

Objectifs spécifiques : A la suite de ce chapitre, l’étudiant doit être capable de:

1. d’utiliser les structures conditionnelles,

2. d’utiliser les structures de contrôle,
3. simplifier les programmes en utilisant les fonctions ,
4. et de traiter les données en utilisant les tableaux.
Chapitre 3: Structures, fonctions et tableaux

Plan de la séquence :

1. Structures conditionnelles
2. Les structures de contrôle
3. Les fonctions
4. Les tableaux
Le langage JavaScript

Les structures conditionnelles

if ( ... ) { Exemple:
… if(a>=0 ) {
} else { alert("A est positif");
… } else {
} alert("A est négatif");
}

switch( … ) { Exemple:
switch(n) {
case … : { … } break case 1 : { alert("Un"); } break
… case 2 : { alert("Deux"); }
default : { … } break
} default : { … }
}
al@biacalpro.com 4
Le langage JavaScript

Les structures de contrôle

for( … ; … ; … ) { Exemple:
… For(i=1;i<=10;i++)
som = som + i;
}
Exemple:
while( … ) { Som = 0; i=1;
… While (i<=10){
} som = som + i;
}
Exemple:
do { Som = 0; i=1;
… do{
} while( … ); som = som + i;
}while(i<=10);
al@biacalpro.com 5
Le langage JavaScript

Les fonctions
• Une fonction est un bloc de code conçu pour exécuter une tâche particulière.

• Elle est exécutée lorsque qu’elle est appelée depuis le code source ou suite à
un évènement (clic, survol de la souris, etc.).

• En JavaScript comme en C, une fonction peut prendre zéro, un ou plusieurs

arguments.

• Elle peut renvoyer une valeur en sortie ou ne rien renvoyer

• On déclare une fonction par le mot clé function suivie du nom de la fonction

Syntaxe:

function nom (parametre1, parametre2, parametre3) {

code à exécuter
}
al@biacalpro.com 6
Le langage JavaScript

Les fonctions
function salut(){ function calcul(){
alert('bonjour le monde'); var x = 10, y=5, s = x+y;
} return 'la somme est :' +s;
Sans argument et sans valeur de retour
}
Sans argument et avec valeur de retour
function salut(x){ function calcul(x, y){
alert ('bonjour' +x); var s=x+y;
} return s;
Avec argument et sans valeur de retour }
Avec argument et valeur de retour
Attention : L'appel d’une fonction sans
() renverra la définition de la fonction:

al@biacalpro.com 7
Le langage JavaScript

Les fonctions
Les fonctions prédéfinies

• eval : Elle exécute un code JavaScript à partir d'une chaîne de caractères.

...
<script>
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value);
}
<script>
...
<form name="formulaire">
Saisissez une expression mathématique :
<input type="text" name="saisi" maxlength="40" size="40">
<input type="button" value="evaluation" onclick="evaluation()">
<input type="text" name="calcul" maxlength="40" size="40">
</form>
... elhadjimamadou.nguer@uvs.edu.sn 8
Le langage JavaScript

Les fonctions
Les fonctions prédéfinies
• isFinite
Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est
pas un nombre ou l’infini positif ou infini négatif.

isFinite(240) //retourne true

isFinite("Un nombre") //retourne false
• isNaN
Détermine si le paramètre n’est pas un nombre (NaN : Not a Number).

isNaN("un nombre") //retourne true

isNaN(20) //retourne false

al@biacalpro.com 9
Le langage JavaScript

Les fonctions
Les fonctions prédéfinies
• parseFloat
- analyse une chaîne de caractères et retourne un nombre décimal.
- Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).

var numero="125";
var nombre=parseFloat(numero); //retourne le nombre
• parseInt 125
- analyse une chaîne de caractères et retourne un nombre entier de la base
spécifiée.
- La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal),
2 (binaire).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
al@biacalpro.com 10
Le langage JavaScript

Les tableaux
• Un tableau est une variable pouvant contenir d’autres variables ou des
valeurs de même type ou ayant des types distincts.

• La syntaxe : var nom_tableau = [item1, item2, ...];

ou var nom_tableau = new Array(item1, item2, …);

Exemple : var voitures= ["Saab", "Volvo", "BMW"];

ou var cars = new Array("Saab", "Volvo", "BMW");

• Une déclaration peut couvrir plusieurs lignes:

Exemple
var voitures= [
"Saab",
"Volvo",
"BMW"
];
Attention : JavaScript ne supporte pas les tableaux associatifs. 11
Le langage JavaScript

Les tableaux
Accéder aux éléments d'un tableau

• On accède à un élément de tableau en se référant à son indice. Les indices

de tableau commencent par 0.
• Exemple :
Accéder au premier élément de voitures: var nom = voitures[0];
Modifier le premier élément de voitures: voitures[0] = "Opel" ;

Types des tableaux

• Les tableaux constitue un type particulier d'objets. L’opérateur typeof retourne
"objet" pour les tableaux.

• En effet un tableau comme var voitures= ["Saab", "Volvo", "BMW"]; peut être
réécrit sous forme d’objet de la manière suivante :
var voitures= {0:"Saab", 1:"Volvo", 2:"BMW"};
12

al@biacalpro.com
Le langage JavaScript

Les tableaux
Les propriétés et méthodes de tableaux
• La propriété length : elle donne le nombre d’élément d’un tableau.

Exemple : alert(voitures.length); //affiche 3

• Parcourt d’un tableau : Il peut se faire avec la boucle for, while, etc.

Exemple : var taille= voitures.length, txt = "<ul>";

for (i = 0; i < taille; i++) {
text += "<li>" + voitures[i] + "</li>";
}

• La propriété push: C’est la meilleure manière d’ajouter un élément dans un

tableau.
Exemple : voitures.push("Kia");

qui est équivalent à voitures[voitures.length] = "Kia"; 13

al@biacalpro.com
Le langage JavaScript

Les tableaux
Les propriétés et méthodes de tableaux
• Affichage d’un tableau: Elle peut se faire en parcourant le tableau ou en se
référant au nom du tableau.
Exemple : var voitures = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = voitures;
On peut aussi utiliser la méthode forEach()

Exemple :
var voitures, text;
voitures = ["Saab", "Volvo", "BMW"];

text = "<ul>";
voitures.forEach(afficheValeur);
text += "</ul>";

function afficheValeur(val) {
text += "<li>" + val + "</li>";
} 14

al@biacalpro.com
Le langage JavaScript

Les tableaux
Les propriétés et méthodes de tableaux
• Tri d’un tableau : La méthode sort() permet de trier les valeurs d’un tableau.
Exemple : var voitures = ["Saab", "Volvo", "BMW"];
voitures.sort();
document.getElementById("demo").innerHTML = voitures;
• Autres propriétés et méthodes de tableaux
Method Description
concat() Joint deux ou plusieurs tableaux et renvoie une copie des tableaux joints
fill() Remplit les éléments d'un tableau avec une valeur statique
indexOf() Rechercher un élément dans le tableau et retourne sa position
isArray() Vérifie si un objet est un tableau
join() Joint tous les éléments d'un tableau en une chaîne
pop() Supprime le dernier élément d'un tableau et renvoie cet élément
splice() Ajoute / supprime des éléments d'un tableau
toString() Convertit un tableau en chaîne et renvoie le résultat

• Pour avoir la liste complète des méthodes, voir :

https://www.w3schools.com/jsref/jsref_obj_array.asp 15