Note: many of the contents of this page are taken from w3school website.
| Operator | Description | Example | Result |
|---|---|---|---|
| + | Addition | x=2 y=2 x+y |
4 |
| - | Subtraction | x=5 y=2 x-y |
3 |
| * | Multiplication | x=5 y=4 x*y |
20 |
| / | Division | 15/5 5/2 |
3 2.5 |
| % | Modulus (division remainder) | 5%2 10%8 10%2 |
1 2 0 |
| ++ | Increment | x=5 x++ |
x=6 |
| -- | Decrement | x=5 x-- |
x=4 |
| Operator | Example | Is The Same As |
|---|---|---|
| = | x=y | x=y |
| += | x+=y | x=x+y |
| -= | x-=y | x=x-y |
| *= | x*=y | x=x*y |
| /= | x/=y | x=x/y |
| %= | x%=y | x=x%y |
| Operator | Description | Example |
|---|---|---|
| == | is equal to | 5==8 returns false |
| === | is equal to (checks for both value and type) | x=5 y="5" x==y returns true x===y returns false |
| != | is not equal | 5!=8 returns true |
| > | is greater than | 5>8 returns false |
| < | is less than | 5<8 returns true |
| >= | is greater than or equal to | 5>=8 returns false |
| <= | is less than or equal to | 5<=8 returns true |
| Operator | Description | Example |
|---|---|---|
| && | and | x=6 y=3 (x < 10 && y > 1) returns true |
| || | or | x=6 y=3 (x==5 || y==5) returns false |
| ! | not | x=6 y=3 !(x==y) returns true |
A string is most often text, for example "Hello World!". To stick two or more string variables together, use the + operator.
txt1="What a very" txt2="nice day!" txt3=txt1+txt2
The variable txt3 now contains "What a verynice day!".
To add a space between two string variables, insert a space into the expression, OR in one of the strings.
txt1="What a very" txt2="nice day!" txt3=txt1+" "+txt2
or
txt1="What a very " txt2="nice day!" txt3=txt1+txt2
The variable txt3 now contains "What a very nice day!".
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax
variablename=(condition)?value1:value2
Example
greeting=(visitor=="PRES")?"Dear President ":"Dear "
If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:
alert("sometext")
Example:
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<form action="">
<div>
<input type="button" onclick="disp_alert()" value="Display alert box" />
</div>
</form>
</body>
</html>
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax:
confirm("sometext")
Example:
<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
</head>
<body>
<form action="">
<div>
<input type="button" onclick="disp_confirm()" value="Display confirm box" />
</div>
</form>
</body>
</html>
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:
prompt("sometext","defaultvalue")
Example:
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter")
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?")
}
}
</script>
</head>
<body>
<form action="">
<div>
<input type="button" onclick="disp_prompt()" value="Display prompt box" />
</div>
</form>
</body>
</html>
To keep the browser from executing a script when the page loads, you can put your script into a function.
A function contains code that will be executed by an event or by a call to that function.
You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).
Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section.
Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html>
If the line: alert("Hello world!!") in the example above had not been put within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before the user hits the button. We have added an onClick event to the button that will execute the function displaymessage() when the button is clicked.
The syntax for creating a function is:
function functionname(var1,var2,...,varX)
{
some code
}
var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.
Note: A function with no parameters must include the parentheses () after the function name:
function functionname()
{
some code
}
Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name.
The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
Example
The function below should return the product of two numbers (a and b):
function prod(a,b)
{
x=a*b
return x
}
When you call the function above, you must pass along two parameters:
product=prod(2,3)
The returned value from the prod() function is 6, and it will be stored in the variable called product.