DEVELOPPEMENT WEB
JAVASCRIPT - INTRODUCTION

Afficher une fenêtre en cliquant sur un bouton

Si le HTML permet d'afficher du texte ou des images, le JavaScript permet de modifier l'affichage en fonction d'événements survenant dans la page. Nous allons créer un bouton sur lequel cliquer, pour afficher un message.

Recopiez le programme ci-dessous :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function afficher() {
      alert("Tout va bien!");
    }
  </script>
</head>

<body>
  <p>Cliquez sur le bouton ci-dessous :</p>
  <input type="button" value="OK" onclick="afficher();">
</body>

</html>

Ici, le programme en JavaScript est placé entre les balises <head> et </head>. Sauvegardez avec l'extension .html et au format utf-8. En cliquant sur le bouton OK, vous appelez la fonction afficher() qui fait apparaître une petite fenêtre avec un message.

L'exemple ci-dessous montre qu'il est possible de placer le programme en JavaScript dans un fichier à part.

Fichier index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="prevenir.js"></script>
</head>

<body>
  <p>Cliquez sur le bouton ci-dessous :</p>
  <input type="button" value="OK" onclick="afficher();">
</body>

</html>

Fichier prevenir.js :

function afficher() {
  alert("Tout va bien!");
}

Automatiser un calcul

Modifiez le programme précédent, comme ci-dessous.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function calculer() {
      x=document.getElementById("nb_a").value;
      y=document.getElementById("nb_b").value;
      z=x*y+3;
      document.getElementById("resultat").value=z;
    }
  </script>
</head>

<body>
  <p>a = <input id="nb_a"></p>
  <p>b = <input id="nb_b"></p>
  <input type="button" value="CALCULER" onclick="calculer();">
  <p>a x b + 3 = <input id="resultat"></p>
</body>

</html>

Testez votre programme : Vous disposez là d'une solution pour automatiser vos calculs!

Addition de chaînes de caractères

Au lieu d'effectuer l'opération x*y+3, effectuez une simple addition : x+y. Que constatez-vous? Les résultats obtenus ne sont pas corrects!

En fait, x=document.getElementById("nb_a").value; signifie que la variable x prend comme valeur une chaîne de caractères au lieu d'un nombre. Ci-dessous, les lignes x=x*1; et y=y*1; transforment les chaînes de caractères en nombres :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function calculer() {
      x=document.getElementById("nb_a").value;
      y=document.getElementById("nb_b").value;
      x=x*1;
      y=y*1;
      z=x+y;
      document.getElementById("resultat").value=z;
    }
  </script>
</head>

<body>
  <p>a = <input id="nb_a"></p>
  <p>b = <input id="nb_b"></p>
  <input type="button" value="CALCULER" onclick="calculer();">
  <p>a + b = <input id="resultat"></p>
</body>

</html>

Complément

Conversion d'une chaîne de caractères en nombre

Il existe d'autres manières de transformer une chaîne de caractères en nombre. Exemples :

x = x-0;
x = +x;
x = parseFloat(x);

Mise en forme des nombres

Il n'est pas toujours utile d'écrire tous les chiffres d'un résultat. Voici deux solutions pour les supprimer.

Chiffres après la virgule

La méthode round() de l'objet Math, autrement dit la fonction Math.round(), retourne le nombre arrondi à l'entier le plus proche. L'exemple ci-dessous permet de conserver deux chiffres après la virgule.

a = 12.34567;
b = Math.round(a*100)/100;
alert(b);

Chiffres significatifs

La méthode toPrecision() de l'objet Number retourne une chaîne de caractères représentant le nombre avec la précision choisie. L'exemple ci-dessous montre comment garder trois chiffres significatifs.

a = 12.34567;
b = a.toPrecision(3);
alert(b);

Affichage des résultats

Une solution assez récente pour afficher un résultat est d'utiliser la balise <output>. Elle offre une présentation différente. En reprenant l'exemple ci-dessus :

<p>a = <input id="nb_a"></p>
<p>b = <input id="nb_b"></p>
<input type="button" value="CALCULER" onclick="calculer();">
<p>a + b = <output id="resultat">Résultat du calcul</output></p>

Une autre solution consiste à utiliser la balise générique <span> et la propriété innerHTML :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function calculer() {
      x=document.getElementById("nb_a").value*1;
      y=document.getElementById("nb_b").value*1;
      z=x+y;
      document.getElementById("resultat").innerHTML=z;
    }
  </script>
</head>

<body>
  <p>a = <input id="nb_a"></p>
  <p>b = <input id="nb_b"></p>
  <input type="button" value="CALCULER" onclick="calculer();">
  <p>a + b = <span id="resultat"></span></p>
</body>

</html>

Exemple d'application

Modifiez le programme précédent pour obtenir l'affichage :

Ici, la formule à programmer est : N = 1000 . Vc / (3,1416 . d)

En tournage, cette formule permet de calculer la vitesse de rotation du mandrin en fonction du diamètre d'usinage et de la vitesse de coupe. En fraisage, elle permet de calculer la vitesse de rotation de l'outil en fonction du diamètre de l'outil et de la vitesse de coupe.

Mini projet

Mise en situation

En construction mécanique, on est souvent amené à calculer les durées de vie des roulements. Il s'agit de vérifier le respect du cahier des charges ou d'indiquer aux agents de maintenance à quelles périodes faut-il remplacer ces éléments.

Il existe plusieurs sortes de roulements :

La durée de vie d'un roulement s'exprime :

Roulements à rouleaux

Pour un roulement à rouleaux, la durée de vie se calcule avec les relations :

L10 = CFr10/3         en millions de tours

L10h = 10660 . N . CFr10/3         en heures

Roulements à billes

Pour un roulement à billes, le calcul de la durée de vie est plus compliqué. En effet, un roulement à billes peut supporter une charge axiale Fa et une charge radiale Fr.

Pour ce type de roulements, la durée de vie se calcule avec les relations :

L10 = CP3         en millions de tours

L10h = 10660 . N . CP3         en heures

P est la charge radiale équivalente, en newtons.

Les valeurs de X et de Y de détermine à l'aide du tableau ci-dessous. Co est la charge statique de base, indiquée dans le catalogue du fabriquant.

Fa/Co e Fa/Fr≤e Fa/Fr>e
XYXY
0,014
0,028
0,056

0,084
0,11
0,17

0,28
0,42
0,56
0,19
0,22
0,26

0,28
0,30
0,34

0,38
0,42
0,44
100,56 2,30
1,99
1,71

1,55
1,45
1,31

1,15
1,04
1,00

Remarque

Certaines applications peuvent imposer au roulement des conditions de fonctionnement très particulières : Arrêts prolongés sous charge, oscillations lentes sans rotation complète... Il est alors soumis à une charge qui doit être inférieure à la charge statique de base Co, indiquée dans le catalogue du fabriquant.

Travail demandé

Réalisez un programme :

Pour la présentation, on conseille d'utiliser le framework Bootstrap.

Exemple d'extrait de catalogue