MORE BASICS

back link
Script Tags
alert function
confirm Function
prompt_Function
Variables
Conditional Statements

If Statement
if... else Statement
If...else if...else Statement
Switch Statement

Operators
Functions

01 History

02 Script Tags

To insert a JavaScript into an HTML page, use the <script> tag
You should use the type attribute to define the scripting language.

The <script type="text/javascript"> and </script> tells JavaScript where to start and end.

-----------

Example:

<html>
<head>
<script type="text/javascript">
alert("script in head")
</script>
</head>
<body>
<script type="text/javascript">
alert("script in body")
</script>
</body>
</html>

-----------

Head section
Scripts to be executed when they are called, or when an event is triggered, go in the head section.

Body section
Scripts to be executed when the page loads go in the body section.

External script
Save the external JavaScript file with a .js file extension.

03 alert function

The alert() function is a Built-in JavaScript Function.
A built-in function is one that you don't have to code for yourself.
In the case of the alert, you need to provide one parameter.
alert(parameter) alert("hi")
When this function is called the browser knows it has to display this parameter in a dialog box. -----------

<html>
<body>
<script type="text/javascript">
alert("hi")
</script>
< /body>
</html>

-----------

Try it

04 confirm Function

The confirm function is much like the alert function except that it has two buttons to choose between instead of only one. The confirm function returns true or false. The return value is dependent on which of the two buttons is selected. If OK is selected then the confirm function returns true, if Cancel is selected it returns false. -----------

<html>
<body>
<script type="text/javascript">
var x = confirm('Select a button')
alert(x)
</script>
</body>
</html>

-----------

Try it

05_prompt_Function

The prompt function is used to prompt the user for information. It includes a question or statement, and an area to type in. The user can either submit information, or cancel the prompt box. -----------

<html>
<body>
<script type="text/javascript">
var x = prompt("Please enter something")
alert(x)
</script>
</body>
</html>

----------- Try it

06 Variables

A variable is just a "container" for the information you want to store. A variable's value can be change in the script. You refer to a variable by its name to see or change its value.

Rules for variable names:

Variable names are case sensitive
Variables must begin with a letter (or the underscore character)

Declare a Variable
You can create a variable with the var statement:
var strX = some value

or you can create a variable without using the var statement:
strX = some value

Assign a Value to a Variable
You can assign a value to a variable like this:
var strX = "webdev"

Or you can assign a variable without using the var statement:
strX = "webdev"

In the expression, the variable name is on the left and the value you want to assign to it is on the right.

Local and Global Variables
If you declare a variable outside of a function it is global, all functions on your page can access it. The lifetime of a global variable starts when it is declared, and ends when the page is closed.

if you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. -----------

Example

<SCRIPT type=text/javascript>
var strX = "WebDev"
document.write(strX)
strX = "Georgetown"
document.write(strX)
</SCRIPT>

-----------

Try it

Conditional Statements

JavaScript has the following conditional statements:

if statement - use this statement if you want to execute some code only if a specified condition is true

if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false

if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed

switch statement - use this statement if you want to select one of many blocks of code to be executed

-------

If Statement

You should use the if statement if you want to execute some code only if a specified condition is true.

Syntax

if (condition)
{
code to be executed if condition is true
}

-----

example

<html>
</head>

<script type="text/javascript">
function ifStatement
()
{
  var x = document.form1.txt_bx1.value;

  x = parseInt(x);

  if (x < 10) 

  {
   alert(x)
  }

}
</script>

</head>
<body>
<form name="form1">
  enter a number:
  <INPUT TYPE="text" NAME="txt_bx1" SIZE=20 />
 <input type="submit" value="Submit" onClick="ifStatement()">
</form>

</body>
</html>

======================================

if... else Statement

to execute some code if a condition is true and another code if the condition is not 
true, use the if....else statement.

Syntax

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

===

Example

<html>
</head>
<script 
type="text/javascript">
function ifStatement2()
{
  var x = document.form2.txt_bx1.value;
  
x = parseInt(x);
  if (x < 10) 
  {
   alert(x)
  }
  else
  {

   alert("try again")
  }
}
</script>

</head>
<body>
<form 
name="form2">
 enter a number less than 10: <INPUT TYPE="text" NAME="txt_bx1" SIZE=20 ></textarea>
 <input 
type="submit" value="Submit" onClick="ifStatement2()">
</form>
</body>
</html>

======================================

If...else if...else Statement

use the if....else if...else statement if you want to select one of many sets 
of lines to execute.

Syntax

if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}

===

Example

<html>
</head>
<script 
type="text/javascript">
function ifStatement3()
{
  var x = document.form3.txt_bx1.value;
  x = 
parseInt(x);
  if (x < 10) 
  {
   alert(x)
  }
  else if (x >= 10)
  {

   alert("try again")
  }

  else
  {
   alert("not a number")
  }

}
</script>

</head>
<body>
<form name="form3">
 enter a number less 
than 10: <INPUT TYPE="text" NAME="txt_bx1" SIZE=20 ></textarea>
 <input type="submit" value="Submit" 
onClick="ifStatement3()">
</form>
</body>
</html>

======================================


Switch Statement
You should use the switch statement if you want to select one of many blocks of code to 
be executed.

Syntax

switch(n)
{
case 1:
  execute code block 1
  break    
case 2:
  execute 
code block 2
  continue
default:
  code to be executed if n is
  different from case 1 and 2
}

Example

<html>
<
head>
<script type="text/javascript">
function switchFun
()
{
  var x 
= document.form4.txt_bx1.
value;
  x = parseInt(x);
 switch (x)
 {

 case 0:

  alert("nothing");
  break;
 case 1:
 case 2:
 case 3:
 case 4:
  alert("small");
  break;
 case 5:
  alert("mid");
  break; 
 case 6:
 case 7:
 case 8:

 case 9:
  
alert("goog");
  
break; 
 default:
  
alert("ok");
 }

}
</script>

</head>
<body>
<form name="form4">
 
enter a number less than 10: <INPUT TYPE="text" NAME="txt_bx1" 
SIZE=20 ></textarea>
 <input type="submit" 
value="Submit" onClick="switchFun()">
</form>

</body>
</html>

Try it

Operators

Arithmetic Operators

Operator Description Example Result

+ Addition x=2 4

y=2

x+y

- Subtraction x=5 3

y=2

x-y

* Multiplication x=5 20

y=4

x*y

/ Division 15/5 3

5/2 ' 2.5

% Modulus (division remainder) 5%2 1

10%8 2

10%2 0

++ Increment x=5 x=6

x++

-- Decrement x=5 x=4

x--

Assignment Operators

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

Comparison Operators

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

Logical Operators

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

String Operator

A string is most often text, for example "web dev". To stick two or more string variables together, use the + operator.

Functions

To keep the browser from executing a script as soon as the page is loaded, you can write your script as a function. Call a function from anywhere on the page (or from other pages if the function is embedded in an external .js file). Functions are defined at the beginning of a page, in the <head> section.

Syntax

function function_name(var1,var2,...,varX)
{
some code
}

==============

Example

</head>
<body>

</body>
</html>

==============

Example 2

<html>
<head>
<script type="text/javascript">
function fun2(x)
{
alert(x)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="fun2('0')" value="A">
<input type="button" onclick="fun2('1')" value="B">
</form>

</body>
</html>

Arithmetic Operators
Operator	Description	Example	Result
+	Addition	x=2	4
		y=2
		x+y
-	Subtraction	x=5	3
		y=2
		x-y
*	Multiplication	x=5	20
		y=4
		x*y
/	Division	15/5	3
/	Division	5/2 '	2.5
%	Modulus (division remainder)	5%2	1
		10%8	2
		10%2	0
++	Increment	x=5	x=6
++	Increment	x++	x=6
--	Decrement	x=5	x=4
--	Decrement	x--	x=4

Assignment Operators
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

Comparison Operators
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

Logical Operators
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

String Operator

A string is most often text, for example "web dev". To stick two or more string variables together, use the + operator.