Tutorial: Introduction to Alerts, Functions & Variables

This tutorial will introduce you to the concept of alerts, functions and variables.

Alerts


alert("Welcome to our website!");

This is an example of an alert. It tells the webpage to display a pop-up with the message "Welcome to our website!" when a user navigates to the page.
var msg="Welcome to " + "our website!"
/* Defines the variable msg as a combination of the strings "Welcome to "
 * (note the space) and "our website!", resulting in the combined string
 */"Welcome to our website!".
alert(msg);
alert("Welcome to " + "our website!");
//This line does the exact same thing as the previous two alerts.

Alerts can be of the form of variables and/or text. In fact, alerts can be used for debugging to see how variables are changing in a function.

Confirmations


Ever seen those pop-up message boxes with an OK or cancel button? The confirmation can be used to reproduce exactly that. Here's how to use it:

confirm("Would you like to proceed?");

As you can see, this code causes the webpage to prompt the user with the message "Would you like to proceed?" and displays the OK and Cancel buttons.

Prompts


Prompts are segments of code that asks the user for information. Here's how to use it:

prompt("Enter a number.")


Notice that the value in the box was "undefined"? It's the default value that will be displayed but you can change it. Let's say I want the box to have a default text of "35". So we have:

prompt("Enter a number.",35);

As you can see, this code causes the webpage to prompt the user with the message "Enter a number." and displays 35 as the default value. It also has the OK and Cancel buttons as well.

Functions


function welcome() {
alert("Welcome to our website!");
alert("Hope that you can contribute!");
}

There are 2 types of functions. One is the constructor function and the other is that it does something to some number of variables. But first, how to define a function. Let's say I want to define a function called "testing".
var testing = function() {
/*The above line declares the function.
 *"var testing" tells the computer that "testing" is the name of the function.
 *Next we have "function()".
 *It means that "testing" is being declared as a function
 *and the empty brackets tell the computer that
 *there are no parameters involved.
 */
alert("Testing...1...2...3...");
/*This next part between the two curly "{}" brackets tells the program
 *what to do when testing() is executed. In this case, it alerts
 *the user with the message box containing the words "Testing...1...2...3...".
 */
};

Parameters


But what if I want to define a function with one parameter involved? Consider the identity function, where the function returns anything you input into it.

var identity = function(input) {
return input;
};
// As you can see, the function spits out the value of input.
// If you want "input" to be user-determined, 
// no problem! It can also be done.
var userdefined = prompt("Input anything you like!");
var result = identity(userdefined);
alert("The result is " + result + ".");


We can carry on expanding the number of parameters in the function brackets to do as many things as we like. Here's one more:

var area = function (height, width) {
return height * width;
};

Let's look at 2 functions that multiplies 2 numbers. The first one has no parameters. That means that there are while loops to ensure that the input are numbers (with isNan(num1)). The second one uses its parameters and multiplies them.

function mult1() {
num1="";
num2=""; //to initialize num1 and num2 in case it was a defined number before. 
while (isNaN(num1)) {
var num1=prompt(Enter the first number.);
}
while (isNaN(num2)) {
var num2=prompt(Enter the second number.);
}
var product=num1*num2;
alert("The product is " + product + ".");
}
 
function mult2(num1,num2) {
var product=num1*num2;
alert("The product is " + product + ".");
}

Variables


Variables are just a name to store information such as numbers (or floats), strings, arrays, boolean values and other things:

var x=5;//variable x is set to 5.
var y="five";//variable y is set to "five"
var anArray=new Array(x,y,25);
//variable anArray is an array to store x,y and 25.
var isanumber=isNaN(y);
//As "five" is not a number, isanumber is true.

A working example: Click on the button to see it work.

function setvarofx() {
var x=3;
alert("The value of x is set to " + x + ".");
x=5;
alert("The value of x is set to " + x + ". We will prompt you for a value for x.");
x=prompt("Please enter what you want x to be.");
if (isNaN(x)) {
alert("The value of x is set to \"" + x + "\".");
}
else {
if (x=="") {
alert("Error. No value for x.");
}
else {
alert("The value of x is set to " + x + ".");
}
}
}

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License