Cours JavaScript : les Fonctions Mathématiques

Participez au vote ☆☆☆☆☆★★★★★

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>

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>

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>

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>

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>

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>

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>

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

HTML permet d'écrire
JavaScript permet de programmer, c'est-à-dire de gérer l'information

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

Éléments du langage

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

Lire/Ecrire

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 :

d'envoyer une information, de recevoir un booléen

– Exemple :

n Écriture dans une fenêtre : open() + document.write

– Permet d’ouvrir une fenêtre et d’écrire dedans

– Exemple :

Variables

n Déclaration

Types

n Déclaration

Types

n Visibilité des variables :

– Bien que de même nom, les variables "x" sont indépendantes

– Exemple :

Tableau

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 :

Tableau

n Array

– Autre exemple :

n Autre exemple (suite)

– Si on obtient NaN

Cela veut dire que la valeur n’est pas numérique – Dans ce cas, utiliser :
parseInt(moyenner())

– Exemple :

Programme Out2

n Arithmétiques

n De comparaison

– La comparaison se fait entre deux objets de même type

renvoie un booléen : true ou false

n Logique

– Opèrent sur des booléens et renvoient un booléen

n d’affectation

Conditionnelles

n Syntaxe

if (condition booléenne)

{Instructions à exécuter si "oui"} else

{Instructions à exécuter si "non"};

Conditionnelles

n Exemple :

Choix

n Choix multiple switch(x) {

case 1 : instructions 1; break; case 2 : instructions 2; break;

case n : instructions 3; break; default : instructions 4; break;

};

Choix

n Exemple : function preferer(k) {

switch(k) {

case 1 : alert(1); break;

case 2 : alert(2); break;

};

preferer(2);

Itération

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

}

Itération

n Table de multiplication

– Exemple :

Programme iterer1

Itération sous contrôle

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

Fonctions

– Autre exemple

Fonctions prédéfinies

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

Fonctions prédéfinies

n Exemple :

Aujourd'hui Date de votre machine :

Fonctions prédéfinies

n Mathématiques :

Fonctions prédéfinies

n mathématiques : utilisation

Association avec un formulaire

n Utilisation dans un formulaire

– Schéma d’utilisation

Body :

v Contient la définition du formulaire

v Il fait appel aux variables et fonctions définies dans le head

Head :

v Contient les fonctions

Association avec un formulaire

Lire/Écrire :

n Exemple 1 : appel à une fonction de lecture en cliquant sur un bouton du formulaire

Programme In2

n Exemple 1 :

Association avec un formulaire

n Lire un nombre et écrire son double

– Exemple 2 :

Saisie du nombre :
Traitement

v 2*Number(.value);

– Code source complet : ici le code js est dans le formulaire

Programme In3

Entrez un nombre :

voici son double :

Association avec un formulaire

n Exercice

– Mettez le code JavaScript dans une fonction que vous placez dans le Head

n Solution

–

Lire/Écrire

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

Association avec un formulaire

n Conditionnelle

– On cherche à contrôler la lecture des informations de type : nom, prénom et âge à l’enregistrement du formulaire de saisie

Le programme doit redemander l’entrée d’une information si elle est vide

– Le bouton Annuler servira à effacer les informations rentrées

– Exemple :

Conditionnelle

Solution

Nom : Prénom :

Age :

Conditionnelle

Si Alors Sinon

Association avec un formulaire

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 :

Lire/Écrire

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

Lire/Écrire :

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

Applications

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

En cliquant sur Menu 2, des sous-menus apparaissent. Il sont cliquables

variante :

Applications

n Pour lier les menus et les sous-menus : on utilise les listes de définition

– Les listes de définitions comportent deux parties,

un terme et une description

– Pour marquer une liste de définitions, il vous faut trois éléments HTML :

conteneur,

un terme de définition, • et une description de définition– Par exemple :

<dl>

<dt>Grenouille</dt>

<dd>Truc vert humide</dd>

<dt>Lapin</dt>

<dd>Truc chaud et doux</dd>

</dl>

... code ...

Association avec un formulaire

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

Télécharger Plus de Téléchargements