My simple Javascript exercises colection starts from page: Some simple Javascript exercises. In this article I propose more.

Exercise 4
Solve a second order equation

<!DOCTYPE html>
<html><head>
<script>
function equation2degree() {
  var a = document.getElementById("number1").value;
  a=parseFloat(a);
  var b = document.getElementById("number2").value;
  b=parseFloat(b);
  var c = document.getElementById("number3").value;
  c=parseFloat(c);
  var delta = b*b-(4*a*c);
  if (delta < 0)
  {
     document.getElementById("solution").innerHTML = "Impossible";
  }
  else
  {
     var x1=(-b+Math.sqrt(delta))/(2*a);
     var x2=(-b-Math.sqrt(delta))/(2*a);         
     document.getElementById("solution").innerHTML = "x<sub>1</sub>=" + x1 + "&nbsp;&nbsp;x<sub>2</sub>=" + x2;
  }
}
</script>
</head><body>
  <h3>Solve a second order equation in the form ax<sup>2</sup>+bx+c=0</h3>
  <p>Insert the coefficients (integer or real numbers, with negative sign if present)<BR><BR>
  a: <input type="text" id="number1"><BR><BR>
  b: <input type="text" id="number2"><BR><BR>
  c: <input type="text" id="number3"><BR><BR>
  <button onclick="equation2degree()">Solve!</button></p>
  <p>Solution:&nbsp;&nbsp;<span id="solution"></span></p>
</body></html>


Exercise 5
Determine if a year is a leap year.
All years whose number represents them is a multiple of 4, are leap years, except for secular years (ie multiples of 100) if their number is not a multiple of 400.

<!DOCTYPE html>
<html><head>
<script>
function leapYear() {
  var year = parseInt(document.getElementById("year").value);
  var leap = false;
  if (year%100==0)   // is it a secular year?
  {
    if (year%400==0)
    {
      leap = true;
    }
  }
  else   // all other years!
  {
    if (year%4==0)
    {
      leap = true;
    }
  }
  document.getElementById("print").innerHTML = leap;
}
</script>
</head><body>
  <h3>Tell me a year and I determine if it is a leap year!</h3>
  Gimme the year: <input type="number" id="year">
  <button onclick="leapYear()">Submit</button>
  <BR><p>Answer: <span  id="print"></span></p><BR>
</body></html>

 

Hits: 3498

Any layout for the web makes extensive use of external javascript files to ensure particular features or effects to the site. The use of this scripting technology is practically indispensable for contemporary web development.
A very good reference for teach Javascript is https://www.w3schools.com/js/default.asp. In addition I propose some simple exercises to my class to become familiar with JavaScript programming. Javascript is easy to learn. It can modify HTML content. To test the following programs in Javascript, select, copy and paste each of the following codes into an HTML file, created by you with any text software. Then save the file and open it in your web browser. Alternatively you can paste each codes into a textarea of ​​the W3Schools site like this: https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
One of the many HTML JavaScript methods is getElementById(). In the examples on this page, I use the getElementById() method to find an HTML element, with a specified ID, to acquire its value (value) or to modify the content of the element (innerHTML). For details, see: https://www.w3schools.com/js/js_intro.asp.

Exercise 1
A demonstration of how to access a input text field I/O in Javascript

<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
  var x = document.getElementById("input").value;
  document.getElementById("output").innerHTML = x;
}
</script>
</head><body>
<h3>A demonstration of how to access a input text field I/O in Javascript</h3>
<input type="text" id="input" value="Write here what you want...." size="30">
<p>Click the button to get the input of the text field.</p>
<button onclick="myFunction()">Try it!</button>
<p id="output"></p>
</body></html>

 

Exercise 2
Calculate the sum of two integers

<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
  var x = document.getElementById("number1").value;
  x=parseInt(x);
  var y = document.getElementById("number2").value;
  y=parseInt(y);
  var z=x+y;
  document.getElementById("output").innerHTML = z;
}
</script>
</head><body>
<h3>This script calculates the sum of two integers</h3>
First number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" id="number1"><BR><BR>
Second Number: <input type="number" id="number2">
<p>Click the button to get the sum of the input in tne input below.</p>
<button onclick="myFunction()">Try Add!</button>
<p>Sum: <span id="output"></span></p>
</body></html>

 

Exercise 3
Determine the greater of two numbers

<!DOCTYPE html>
<html><head>
<script>
function max() {
  var x = document.getElementById("number1").value;
  x=parseInt(x);
  var y = document.getElementById("number2").value;
  y=parseInt(y);
  if (x>y)
     document.getElementById("print").innerHTML = x;
  else
     document.getElementById("print").innerHTML = y;
}
</script>
</head><body>
<h3> Determine the greater of two numbers in Javascript</h3>
First number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" id="number1"><BR><BR>
Second Number: <input type="number" id="number2">
<BR><BR><button onclick="max()">Click the button to get the greater!</button>
<p>The greater is: <span id="print"></span></p><BR>    
</body></html>

The exercises continue to the page Other simple Javascript exercises.

Hits: 4827

Advertising

Advertising

Advertising