Le JavaScript et les mathématiques :
Dans ce chapitre nous allons traiter les différentes fonctions liés aux mathématiques pour le Java Script. Il faut préciser que ce langage n'est pas conçut pour des traitements de ce type car c'est un langage lent car il est interprété. Par ailleurs pour la création de scripts, tel qu'ils soient il est obligé d'utiliser des fonctions mathématiques pour des calculs qui ne sont pas forcement compliqués.
Toutes les fonctions mathématiques sont regroupées dans l'objet Math. Cette objet est nécessaire pour l'utilisation des fonctions mathématiques mais aussi l'utilisation de constante mathématiques. Chacun des sous-chapitres de ce chapitre traitera une méthode de l'objet Math.
La constante E :
La constante E peut être récupérée de l'objet Math de la façon suivante :
<HTML>
<HEAD>
<TITLE>Exemple n°001, L'objet Math avec la méthode E</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("La constante e est égale à "+Math.E)
</SCRIPT>
</BODY>
</HTML>
Le seul élément de nouveau dans ce script c'est Math.E qui sert donc à renvoyer la constante E qui est ici affiché. Voici ce que donne l'exemple 001 :
La constante PI
Cette méthode est du même style que la méthode E sauf que l'on met PI à la place pour récupérer la valeur de la constante PI. Voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°002, L'objet Math avec la méthode PI</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("La constante pi est égale à "+Math.PI)
</SCRIPT>
</BODY>
</HTML>
Ce qui donne à l'affichage :
Logarithme :
Voici un tableau avec 4 autres constantes liés au logarithme prédéfini dans l'objet Math :
Méthode : utilité
LN2 renvoie le logarithme népérien de 2
LN10 renvoie le logarithme népérien de 10
LN10E renvoie le logarithme décimal de e
LN2E renvoie le logarithme base 2 de e
abs() :
Cette méthode sert à renvoyer la valeur absolue d'un nombre, voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°003, L'objet Math avec la méthode abs()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
a = -99
document.write("La valeur absolue de la variable a qui vaut "+a+" est "+Math.abs(a))
</SCRIPT>
</BODY>
</HTML>
Ce qui affiche à l'écran :
sqrt() :
Cette méthode sert à renvoyer la racine carré d'un nombre, en voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°004, L'objet Math avec la méthode sqrt()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
a = 25
document.write("La racine carré de la variable a qui vaut "+a+" est "+Math.sqrt(a))
</SCRIPT>
</BODY>
</HTML>
qui affiche à l'écran :
pow() :
Cette méthode prends 2 arguments : un nombre et son exposant et elle renvoie la nouvelle valeur, en voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°005, L'objet Math avec la méthode pow()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
a = 5
b = 3
document.write("La valeur "+a+" avec l'exposant "+b+" est égale à "+Math.pow(a, b))
</SCRIPT>
</BODY>
</HTML>
Ce qui s'affiche dans le browser est :
log() :
Cette fonction sert à renvoyer le logarithme népérien d'un nombre .
exp() :
Cette fonction prends comme argument un nombre qui représente l'exposant de la constante E et sert à renvoyer le résultat du calcul c'est-à-dire e exposant argument de la fonction.
cos() :
Cette fonction sert à renvoyer le cosinus d'un angle, exprimé en radians.
sin() :
Cette fonction sert à renvoyer le sinus d'un angle, exprimé en radians.
tan() :
Cette fonction sert à renvoyer la tangente d'un angle, exprimé en radians.
random() :
Cette fonction sert à renvoyer un nombre aléatoire compris entre 0 et 1 . Voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°006, L'objet Math avec la méthode random()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
a = Math.random()
document.write("La valeur aléatoire est : "+a)
</SCRIPT>
</BODY>
</HTML>
Voici deux exemples d'affichage du programme :
round() :
Cette fonction sert à arrondir un nombre à la valeur la plus proche, voici un exemple :
<HTML>
<HEAD>
<TITLE>Exemple n°007, L'objet Math avec la méthode round()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
a = 15.56
b = 15.23
document.write("La valeur "+a+" arrondit donne "+Math.round(a)+" et la valeur "+b+" donne "+Math.round(b))
</SCRIPT>
</BODY>
</HTML>
L'affichage est le suivant :
ceil() :
Cette fonction sert à renvoyer le plus petit entier supérieur à celui passé en argument. Par exemple, si on passe 15,2 à cette fonction, elle retournera 16.
floor() :
Cette fonction sert à renvoyer le plus grand entier inférieur à celui passé en argument. Par exemple si on passe 15,76 à cette fonction, elle retournera 15.
max() :
Cette fonction sert à renvoyer le plus grand nombre, des deux nombres passé en paramètre de cette fonction. Par exemple, si on passe 5 et 13 en paramètre de cette fonction, elle retournera 13.
min() :
Cette fonction sert à renvoyer le plus petit nombre, des deux nombres passé en paramètre de cette fonction. Par exemple, si on passe 5 et 13 en paramètre de cette fonction, elle retournera 5.
Voilà, nous avons passé en revus les méthodes les plus importantes de cette objet Math. Vous serez maintenant capable de les utiliser dans vos futurs scripts. Il en existe d'autres mais elles se spécialisent très vite dans un domaine particulier des mathématiques.
... ... ... ...
n JavaScript
– Langage de script incorporé dans le HTML
– Historiquement, premier langage de script pour le Web
– Apporte des améliorations au HTML
n Qualités :
– Disponible sur les navigateurs actuels et gratuit
n Défauts :
– Interprété et donc très lent, pas de débogueur
n A quoi ressemble un script ?
– C’est une portion de code qui vient s'insérer dans une page HTML
– Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript – Balises annonçant le code Javascript :
n Code interprété ou compilé ?
– Dès que le navigateur rencontre la balise
n Les commentaires
– Pour mettre en commentaires toute une ligne, on utilise le double slash:
// Tous les caractères derrière le // sont ignorés
– Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le
*/:
/* Toutes les lignes comprises entre ces repères sont ignorées par l'interpréteur de code */
n prompt()
– ouvre une boîte de dialogue avec une zone de saisie et 2 bouton : OK et Annuler, rend l’information lue
n alert ()
– permet d’écrire un message dans une fenêtre
– Exemple :
Programme In1
n Résultat
n document.write :
– Permet d’écrire directement dans la fenêtre HTML
– Exemple :
Programme Out1
n document.write pour écrire le contenu de variable
Exemple :
Programme Out2
n Confirm ()
– Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK et Annuler. Elle permet :
– Exemple :
– Permet d’ouvrir une fenêtre et d’écrire dedans
– Exemple :
n Visibilité des variables :
– Bien que de même nom, les variables "x" sont indépendantes
– Exemple :
n Array
– Le type des éléments : nombres, chaînes, booléens,
– La dimension 1, 2, ou 3, : tab(7) ; tab(x,y) ; tab(A,B,C) ;
– Les indices : souvent des nombres entiers
– Exemple :
n Array
– Autre exemple :
n Autre exemple (suite)
– Si on obtient NaN
– Exemple :
Programme Out2
n De comparaison
– La comparaison se fait entre deux objets de même type
n Logique
– Opèrent sur des booléens et renvoient un booléen
n d’affectation
n Syntaxe
if (condition booléenne)
{Instructions à exécuter si "oui"} else
{Instructions à exécuter si "non"};
n Exemple :
n Choix multiple switch(x) {
case 1 : instructions 1; break; case 2 : instructions 2; break;
case n : instructions 3; break; default : instructions 4; break;
};
n Exemple : function preferer(k) {
switch(k) {
case 1 : alert(1); break;
case 2 : alert(2); break;
};
};
preferer(2);
n For
for (valeur de départ ; contrôle pour sortie ; progression )
{ Instructions à itérer }
n Exemple
for (i=1;i<=5;i++) {
Instructions à répéter
}
n Table de multiplication
– Exemple :
Programme iterer1
n while
– Syntaxe :
while(condition) {
suite d’instructions;
}
– Exemple : i=0; while(i<=10) {
suite d’instructions; i++;
}
– function maFonction(x, toto) {
instructions;
return valeur du résultat;
}
– Exemple
– Autre exemple
n Dates
– Javascript peut gérer le temps :
– Aujourd'hui : mardi 16 août 2005, l'horloge de votre ordinateur donne 13h 24min
– Il vous propose plusieurs fonctions prédéfinies
n Exemple :
Aujourd'hui Date de votre machine :
n Mathématiques :
n mathématiques : utilisation
n Utilisation dans un formulaire
– Schéma d’utilisation
v Contient la définition du formulaire
v Il fait appel aux variables et fonctions définies dans le head
v Contient les fonctions
n Exemple 1 : appel à une fonction de lecture en cliquant sur un bouton du formulaire
Programme In2
n Exemple 1 :
n Lire un nombre et écrire son double
– Exemple 2 :
v 2*Number(.value);
– Code source complet : ici le code js est dans le formulaire
Programme In3
Entrez un nombre :
voici son double :
– Mettez le code JavaScript dans une fonction que vous placez dans le Head
–
n Questionnaire à choix multiple
– Écrire un formulaire qui permet de réaliser un choix et d’afficher ce choix – Exemple :
Vous êtes pour l'informatique ?
oui
non
abstention
n Conditionnelle
– On cherche à contrôler la lecture des informations de type : nom, prénom et âge à l’enregistrement du formulaire de saisie
– Le bouton Annuler servira à effacer les informations rentrées
– Exemple :
Solution
Nom : Prénom :
Age :
Si Alors Sinon
n Exercice
– Vérifier la validité des noms par rapport à une liste de noms rangés dans un tableau
n Solution
–
n Autre exemple de lecture par formulaire HTML
– Choisir parmi une liste et afficher le choix
classique
jazz
rock
pop
n Résultat :
n On voudrait créer le formulaire suivant
– Entrée : on sélectionne une page en HTML
– Résultat : on l’affiche
n Le code
page1
page2
page3
page4
n Autre exemple : cacher montrer une image
– Créer un formulaire avec deux boutons : cacher, montrer
n Le code
//On initialise au début à une image vide
n Autre variante
– Ici, on clique sur une image pour avoir son nom inscrit
n Le code
n Création de menus
– On cherche à créer des menus hiérarchiques, comme cidessous
– En passant sur un menu, il passe au gris clair
variante :
n Pour lier les menus et les sous-menus : on utilise les listes de définition
– Les listes de définitions comportent deux parties,
– Pour marquer une liste de définitions, il vous faut trois éléments HTML :
conteneur,
<dl>
<dt>Grenouille</dt>
<dd>Truc vert humide</dd>
<dt>Lapin</dt>
<dd>Truc chaud et doux</dd>
</dl>
... code ...
n Exercice : réaliser le formulaire suivant
– En cliquant sur le bouton Pays, on affiche une liste de noms de pays, en cliquant sur Capitales, on affiche une liste de capitales
n Solution :
Association avec un formulaire
n Exercice : réaliser le formulaire suivant
– Il s’agit de calculer la moyenne d’un élève ou d’une matière
n Solution
