JavaScript

Correction exercices les opérateurs en JavaScript

Un cours complet pour maîtriser Correction exercices les opérateurs en JavaScript.

0 chapitres 0 QCM Accès gratuit

Exercice 01

Énoncé

Solution

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" />
 <style>
		fieldset {
			width: 300px;
			border: 3px solid #556B2F;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
		}
	legend{
	color:blue;
	}
   </style> 
      <script language="javascript"> 
         function permuter(){ 
            var auxiliaire=document.formPermutation.valeur1.value; 
            document.formPermutation.valeur1.value=document.formPermutation.valeur2.value; 
            document.formPermutation.valeur2.value=auxiliaire; 
         }
 		function init(){ 
             document.formPermutation.valeur1.focus(); 
         }
      </script> 
   </head> 
   <body onLoad="init()"> 
<center>
<fieldset>
<legend style="color:#556B2F">Permutation</legend>
<center>   
      <form name="formPermutation">    
         Valeur 1:<input type="text" name="valeur1" /><br /><br />  
         Valeur 2:<input type="text" name="valeur2" /><br /> <br /> 
         <input type="button" value="Permuter" onClick="permuter()" /> 
      </form>
</center>
</fieldset>
</center> 
   </body> 
</html>

Exercice 02

Énoncé

Solution

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" />
 <style>
		fieldset {
			width: 400px;
			border: 3px solid #556B2F;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
		}
	legend{
	color:blue;
	}
div{
width: 300px;
height:200px;
background-color:#002200;
}
   </style> 
      <script language="javascript"> 
        function colorer(){
var couleur=document.formcouleur.valeur1.value;
alert(couleur);
document.getElementById("div1").style.backgroundColor=couleur;
	}
      </script> 
   </head> 
   <body> 
<center>
<fieldset>
<legend style="color:#556B2F">Coloration</legend>
<center>
      <form name="formcouleur">  
<div id="div1"></div>  <br /><br />  
  
         Couleur:<input type="text" name="valeur1" placeholder="Saisir le code couleur hexadécimal"/><br /><br />  
        <input type="button" value="Colorer" onClick="colorer();" /> 
      </form>
</center>
</fieldset>
</center> 
   </body> 
</html>

Exercice 03

Énoncé

Solution

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
 shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css">

        <script language="javascript">

                function factorielle(){
             var nbr=document.getElementById("valeur1").value;
              if(!isNaN(nbr) && (nbr>0))
        {var i=1;
        var resultat=1;
        var txt=nbr+"!=";
        while(i<=nbr)
         {
        resultat=resultat*i;
        if (i<nbr)
        {txt=txt+i+"*";}
        else {txt=txt+i+"=";}
        
        i++;}
        
        document.getElementById("valeur2").value=txt+resultat;
        alert(txt+resultat);
        document.formfacto.valeur2.InnerHTML=resultat;
        }
        
             else {
                  alert("s.v.p saisir un nombre positif");
              }
        
        
                }
                </script>
                <style>
                        fieldset{margin-top: 10px;
                      
                            border:3px solid #000321;
                            border-radius:10px;
                        width:400px;}
                        legend{margin: 10px;
                        width:105px;}
                    </style>
  
</head>
<body >
    <div class="container">
        <div class="row mt-4">
  <fieldset>
   <legend>factorielle</legend>
    <form name="formfacto">
     <div class="form-group mt-4">
   <div class="col lg-12 ml-4">
        <label> nombre:</label>
        <input id="valeur1" name="valeur1" type="text" />
   </div>
            </div>
            <center>
            <div class="row">
                    <div class="col lg-8">
                            <button class="btn btn-success"  type="button" 
onclick="factorielle()"> factorielle</button>
                    </div>
            </div></center>
        </br>
            <div class="row">
                    <div class="col lg-12 ml-2 mr-2">
                            <label> resultat:</label>
                            <input class="w-100" type="text" id="valeur2" 
name="resultat" disabled/>
                    </div>
            </div>
        </br>

        
</form>
  </fieldset>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/
popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
js/bootstrap.min.js"></script>


</body>
</html>

Exercice 04

Énoncé

Solution

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" />
 <style>
		fieldset {
			width: 400px;
			border: 3px solid #556B2F;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
		}
	legend{
	color:blue;
	}
input{
text-align:center;font-weight: bold;
}
   </style> 
<script language="javascript"> 
         function testPair(nbre_lignes)
	{
var leHTML="";
	if (nbre_lignes >50 ) {ventier =50 ; alert("nombre de lignes limitée à 50"); }
	leHTML+="<center>";
leHTML+="<table border='1' width='90%'>";
leHTML+="<tr>";
leHTML+="<td>Nombre</td>";
		leHTML+="<td>Pair/Impair</td>";
leHTML+="</tr>";
var pair="";
	for (i=0;i<=nbre_lignes; i++)
	{
		leHTML+="<tr>";
		leHTML+="<td>"+i+"</td>";
if(i%2==0)
{
pair="Paire";
}
else
{
pair="Impaire";
}
		leHTML+="<td>"+pair+"</td>";
		leHTML+="</tr>";
	}
	leHTML+="</table>";
leHTML+="</center>";
document.getElementById("resultat").innerHTML = leHTML;
	}

function init()
{
document.getElementById('valeur1').focus();
}
      </script> 
   </head> 
   <body onLoad="init()"> 
<center>
<fieldset>
<legend style="color:#556B2F">Factorielle</legend>
<center>   
      <form name="formTestPair">    
         Nombre:</br><input type="text" id="valeur1" size="2"/><br /><br /> 
 <input type="button" value="Nombre" onClick="testPair(document.getElementById('valeur1').value);" /> <br /><br /> 
<div id="resultat"></div>
      </form>
</center>
</fieldset>
</center> 
   </body> 
</html>

Exercice 06

Énoncé

Solution

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css">  
<script>
    var textEN = "JavaScript was originally developed by Netscape and 
was then called LiveScript. Adopted at the end of 1995 by the firm Sun 
(which also developed Java), it took its name from JavaScript.";
    var textFR = "JavaScript a été initialement développé par Netscape
 et s’appelait alors LiveScript. Adopté à la fin de l’année 1995, par 
la firme Sun (qui a aussi développé Java), il prit alors son nom de 
JavaScript.";
var textDE="JavaScript wurde ursprünglich von Netscape entwickelt 
und hieß dann LiveScript. Es wurde Ende 1995 von der Firma Sun 
(die auch Java entwickelte) eingeführt und erhielt seinen Namen 
von JavaScript.";
      function changerLangue(langue)
         {
         var div = document.getElementById("texte");
         while (div.firstChild) div.removeChild(div.firstChild);
         if (langue=="fr") div.appendChild(document.createTextNode(textFR));
         else if (langue=="en") div.appendChild(document.createTextNode
(textEN));
         else if (langue=="de") div.appendChild(document.createTextNode
(textDE));

         }                 
</script>
  </head>
  <body onload="changerLangue('fr')">
<div class="container-fluid">
    <!--article -->
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
          <div class="titre">
            <div id="texte"></div>
            <br></br>
            <p>
              <a href="javascript:changerLangue('fr')">français</a> - 
              <a href="javascript:changerLangue('en')">english</a> - 
              <a href="javascript:changerLangue('de')">Allemand</a>
            </p>   
            


          </div>
        </div>
      </div>           
</div><!-- container-fluid -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

Exercice 07

Énoncé

Solution

<!DOCTYPE html> 
<head> 
      <meta charset="UTF-8" />
   <style>
		fieldset {
			width: 300px;
			border: 3px solid #556B2F;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
		}
	legend{
	color:blue;
	}
   </style> 
<script language="javascript">
function calculer() {
 var x = Number(document.frmCalculatrice.var1.value);
 var y = Number(document.frmCalculatrice.var2.value);
if (document.frmCalculatrice.choix[0].checked)
   if (y != 0)
   document.getElementById('resultat').value=(x / y);
   else alert ("Opération invalide !") 
else if (document.frmCalculatrice.choix[1].checked)
	document.getElementById('resultat').value=(x + y);
else if (document.frmCalculatrice.choix[2].checked)
	document.getElementById('resultat').value=(x - y);
else if (document.frmCalculatrice.choix[3].checked)
	document.getElementById('resultat').value=(x * y);
}
</script>
</HEAD>
<BODY>
<center>
<fieldset>
<legend style="color:#556B2F">Petite calculatrice</legend>   
<center>     

<form name="frmCalculatrice">

<B>Variable 1 : </B><INPUT TYPE = "text" NAME = "var1"></br></br>
<B>Variable 2 : </B><INPUT TYPE = "text" NAME = "var2"></br></br>
<div style="padding-left:25%">
<B>Opérateurs : </B><BR><BR>
<INPUT TYPE = "radio" NAME = "choix"><B> Division</B></br>
<INPUT TYPE = "radio" NAME = "choix"><B> Addition</B></br>
<INPUT TYPE = "radio" NAME = "choix"><B> Soustraction</B></br>
<INPUT TYPE = "radio" NAME = "choix"><B> Multiplication</B></br></br>
</div>
<INPUT TYPE="button" VALUE="Calculer" onClick="calculer();">
<INPUT TYPE="reset" VALUE="Effacer" >
</br></br>
<B>Résultat opér : </B><INPUT TYPE = "text" id="resultat" >

</FORM>
</center>
</fieldset>
</center>
</BODY>
</HTML>

Les événements en javascript

Sommaire du cours JavaScript

Sommaire du cours JavaScript

Correction exercices les opérateurs en JavaScript

Sommaire du cours

Autres catégories

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

Exercice 06

Énoncé

Solution

Exercice 07

Énoncé

Solution

Sommaire du cours JavaScript