Exercise: JavaScript Fundamentals

Building a Simple Calculator

In the following example, the user is asked to enter two numbers and a mathematical operation. Within the try/catch/finally block, the validity of the data is checked. If the numbers are entered correctly, the switch block checks if the entered value is one of the four allowed mathematical operations.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Calculator</title>
  </head>
  <body>
    <script>
      var numberA = parseInt(prompt("Enter the first number: "));
      var numberB = parseInt(prompt("Enter the second number: "));
      var operation = prompt("Enter a mathematical operation: ");
     
      try {
        if (isNaN(numberA) || isNaN(numberB)) {
          throw "Numbers must be entered for mathematical operation!";
        }
        else {
          var result;
          switch (operation) {
     
            case "+":
              result = numberA + numberB;
              alert("result:" + result);
              break;
            case "-":
              result = numberA - numberB;
              alert("result:" + result);
              break;
            case "*":
              result = numberA * numberB;
              alert("result:" + result);
              break;
            case "/":
              result = numberA / numberB;
              alert("result:" + result);
              break;
            default:
              throw "You did not enter a valid mathematical operation!";
          }
        }
      } catch (exception) {
        alert("An error occurred when entering the data! Details: " + exception);
     
      } finally {
     
        alert("Thank you for participating!");
      }
    </script>
  </body>
</html>

If all the required data is entered correctly, the operation result is returned in an alert() window, if not, an error is displayed. In any case, a message is displayed in the finally block.

Object-Oriented JavaScript

In the following example, the user is asked to enter personal data until the application execution is interrupted by a click. Person data is filled in the Person object, and entered objects are stored in an array. After the user interrupts the application execution, it is checked who is the oldest person, and their data is displayed.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS Work with Objects</title>
    <script>
      function Person() {
        this.firstName = "";
        this.lastName = "";
        this.age = 0;
        this.fullName = function () {
          return this.firstName + " " + this.lastName;
        };
      }


      function startApplication() {
        var arrayOfPersons = [];
        do {
          var p = new Person();
          p.firstName = prompt("Enter the person's first name:", "");
          p.lastName = prompt("Enter the person's last name:", "");
          p.age = parseInt(prompt("Age:", ""));
          arrayOfPersons.push(p);
        } while (confirm("Add more people?"));


        var oldestPerson = arrayOfPersons[0];
        for (var i = 0; i < arrayOfPersons.length; i++) {
          if (arrayOfPersons[i].age > oldestPerson.age) {
            oldestPerson = arrayOfPersons[i];
          }
        }


        var output = "You have entered " + arrayOfPersons.length + " people.\n";
        output += oldestPerson.fullName() + " is the oldest person.\n";
        output += "They are " + oldestPerson.age + " years old";
        alert(output);
      }
    </script>
  </head>
  <body>
    <h1>JS Work with Objects</h1>
    <a href="#" onclick="startApplication()">START APPLICATION</a>
  </body>
</html>

Updated on:

Part of our complete: JavaScript Fundamentals guide

Want exercises and real projects for this lesson? Get the full course.