INTRODUCTION AU JAVASCRIPT

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!

<!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>

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 = (C / Fr)10/3    en millions de tours

L10h = (C / Fr)10/3 . 106 / (60 . N)    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 = (C / P)3    en millions de tours

L10h = (C / P)3 . 106 / (60 . N)    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