Welcome back, are you ready for another Ajax tutorial? In this chapter we are going to study about some basics of JavaScript Programming. Here we are studying the following Variables, Operators, Conditional statements.

• Variables
• Operators
• Conditional statements
• Statements

Variables
As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names:

• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names are case-sensitive. A variable’s value can change during the execution of a script. You can refer to a variable by its name to display or change its value.

Declaring Variables

Creating variables in JavaScript is most often referred to as “declaring” variables. You declare JavaScript variables with the var keyword:

After the declaration shown above, the variables are empty (they have no values yet). However, you can assign values to the variables when you declare them:

After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo.
Note: When you assign a text value to a variable, use quotes around the value.

Local Variables

A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (The variable has local scope).You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are destroyed when you exit the function.

Global Variables

Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it. Global variables are destroyed when you close the page. If you declare a variable, without using “var”, the variable always becomes GLOBAL.

Assigning Values to Undeclared Variables

If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.

In this case, x and carname are taken as global variables.

Arithmetic Operations
As with algebra, you can do arithmetic operations with variables:

Operators

= is used to assign values.
+ is used to add values.

Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Result

Operator

Description

Example

Result

  +

Addition

  x=y+2

  x=7

  y=5

  -

Subtraction

  x=y-2

  x=3

  y=5

  *

Multiplication

  x=y*2

  x=10

  y=5

  / 

Division

  x=y/2

  x=2.5

  y=5

  %

Modulus (division remainder)

  x=y%2

  x=1

  y=5

  ++

Increment

  x=++y

  x=6

  y=6

  x=y++

  x=5

  y=6

  –

Decrement

  x=–y

  x=4

  y=4

  x=y–

  x=5

  y=4

Assignment Operators

Assignment operators are used to assign values to variables. Given that x=10 and y=5, the table below explains the assignment operators:

Operator Example Same As Result

Operator

Example

Same As

Result

  =

  x=y

 

  x=5

  +=

  x+=y

  x=x+y

  x=15

  -=

  x-=y

  x=x-y

  x=5

  *=

  x*=y

  x=x*y

  x=50

  /=

  x/=y

  x=x/y

  x=2

  %=

  x%=y

  x=x%y

  x=0

The + Operator Used on Strings

The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator.

Adding Strings and Numbers

The thing to note here is that if you add a number and a string, the result will be a string!
For example:

Comparison and Logical Operators

These operators are used to test conditions to true or false. Given that x=5, the table below explains the comparison operators:

Operator Description Example

Operator

Description

Example

 ==

is equal to

x==8 is false
x==5 is true

 ===

is exactly equal to (value and type)

x===5 is true
x===”5″ is false

 !=

is not equal

x!=8 is true

 >

is greater than

x>8 is false

 <

is less than

x<8 is true

 >=

is greater than or equal to

x>=8 is false

 <=

is less than or equal to

x<=8 is true

Logical Operators

Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators:

Operator

Description

Example

 &&

And

(x < 10 && y > 1) is true

 ||

Or

(x==5 || y==5) is false

 !

Not

!(x==y) is true

Conditional Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

If the variable m has the value of “mango”, then the variable a will be assigned the value “MANGO” else it will be assigned” OTHER “.

Conditional Statements

We use conditional statements when we want to do different actions for different decisions.

We have the following conditional statements:

• if statement – use this statement to execute some code only if a specified condition is true
• if…else statement – use this statement 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 to select one of many blocks of code to be executed
• switch statement – use this statement to select one of many blocks of code to be executed

If…else Statement
This executes some code if a condition is true and another code if the condition is not true.

The JavaScript Switch Statement

The switch statement always begin with the keyword “switch”, plus a required parameter that contains the expression (or variable) you wish to evaluate. This expression is then matched against the value following each “case”, and if there is a match, it executes the code contained inside that case. If no match is found, it executes the default statement.

A Switch Statement Example:

In the example, variable “singer” contains the name of the singer selected. If his selection happens to be either “Madonna”, “Bryan Adams”, or “Shakira”, a customized message is alerted. All other selections will result in a generic, “simple” message.

JavaScript Popup Boxes

• Alert box
User will have to click “OK” to proceed
Eg:alert(“hello”)
• Confirm box
User will have to click either “OK” or “Cancel” to proceed
Eg:confirm(“Are you sure you want to delete?”)
• Prompt box
User will have to click either “OK” or “Cancel” to proceed after entering an input value
Eg: prompt(“Please enter your name”,”Amy”)

Download Source Files