Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Exercise: Sorted Numbers

Exercise 3 Very easy

Prerequisites for the exercise

  1. JavaScript Data Types
  2. All previous chapters

Objective

Output three input numbers in ascending order.

Description

Ask the user to input three different numbers by means of three different prompt dialogs.

In each of these dialogs, display the following piece of text: 'Enter a number:'.

Once the three prompts are completed, finally output the input number in ascending order (i.e. smallest number first, largest number last).

The general form of output is shown as follows:

Sorted numbers: <int1>,<int2>,<int3>

Where <int1>, <int2>, and <int3>, are the input numbers.

Below shown is an example:

Live Example

Hints

Hint 1

Use an array to store the input values so that it is easy to sort them.

Hint 2

Call the sort() method on the array, providing it with a function as argument, in order to sort the numbers stored in it.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-3-Sorted-Numbers and put the .html solution files for this exercise within it.

Solution

We need to get three inputs from the user, hence we start by laying out three different prompt() calls.

Each call's return value is stored in a separate variable:

var a = prompt('Enter a number:');
var b = prompt('Enter a number:');
var c = prompt('Enter a number:');

With this done, we then convert each of these variables into a number using the Number() function:

var a = prompt('Enter a number:');
var b = prompt('Enter a number:');
var c = prompt('Enter a number:');

a = Number(a);
b = Number(b);
c = Number(c);

Then we create an array nums holding these three numbers (a, b and c). The array is needed so that we could easily sort the numbers later on.

var a = prompt('Enter a number:');
var b = prompt('Enter a number:');
var c = prompt('Enter a number:');

a = Number(a);
b = Number(b);
c = Number(c);

var nums = [a, b, c];
Sorting numbers in JavaScript without having an array can be a daunting task!

To end with, we sort nums by calling nums.sort() (along with an argument function), and pass the return value to document.write() in order to output it.

var a = prompt('Enter a number:');
var b = prompt('Enter a number:');
var c = prompt('Enter a number:');

a = Number(a);
b = Number(b);
c = Number(c);

var nums = [a, b, c];

document.write( nums.sort(function(a, b) { return a - b; }) );

Note that we could even separately output each of the values stored in the sorted nums array, however, passing it directly to document.write() saves us from having to do this work.

This completes our exercise!

Simplifying the code

Note that the code shown above can be simplified down quite a bit.

In one way, we could inline the calls to Number() where we call prompt():

var a = Number(prompt('Enter a number:'));
var b = Number(prompt('Enter a number:'));
var c = Number(prompt('Enter a number:'));

var nums = [a, b, c];

document.write( nums.sort(function(a, b) { return a - b; }) );

In another way, we could completely remove these variables from the code and place the expressions, currently assigned to them, directly into the nums array.

Consider the following code:

var nums = [
    Number(prompt('Enter a number:')),
    Number(prompt('Enter a number:')),
    Number(prompt('Enter a number:'))
];

document.write( nums.sort(function(a, b) { return a - b; }) );

See how much simplified this piece of code is from the one we showed at the end of the section above, yet with the exact same output.

At this beginning stage of coding in JavaScript, it isn't required from your end to produce extremely simplified pieces of code. Instead, for now, you should focus on getting some valid solution out on the computer, no matter how long it seems.

As you'll learn and code more and more programs, you'll learn how to simplify them. Code simplication is an art of its own — it comes with time and experience. Build your knowledge around various concepts in JavaScript, solve exercises, practice on a regular basis and you'll soon find yourself writing elegant pieces of code!