Javascript: Standard Concepts

The following is some reasons why javascript is used:

Can dynamically generate HTML elements in runtime Can read and change contents of HTML elements Can Handle Events Is used for Client side validation Can detect visitor browser and settings Can create cookies Can directly access files on the web server Can directly access files on the user's system

Steps to JavaScript writing: Where does JavaScript code is written?

It can be written implicitly or explicitly:

Implicitly
Means that it can be written in one of two places in the web page:

In Head Section: which will be loaded before the rest of the document and if it's written in a function it will be loaded upon request. in Body section: which will be loaded in it's turn on the page .

You can write any number of scripts inside the page, code is written between <script> tag as follow: Listing 1: Where write Javascript code 1<script type=text/javascript> // code goes here 2 </script> 3

Explicitly
Means that code will be written in separate file and linked to the desired page. Code os written in separate file with .js extension and is included in the head of the web page as follow : Listing 2: Linking an separate javascript file 1<script src=myfile.js/> Code written outside a function will be invoked dynamically, without waiting to event to occur.

JavaScript variables
As other languages, data needs to be stored in some holder for different manipulation operations, so variables are needed to maintain that.

Variable declaration:
Variable can be declared in one of two ways:

by direct value assignment. Ex: sum=10 ; val=Hello Javascript; using the keyword var. Ex: var sum=10.

Variables Scope:
Like in other programming languages, variables have scopes local and global. Global scope is declared out of any {} in <script> tag and can be seen anywhere inside the tag, in other hand local scope, it's just seen inside its local. Listing 3:Working with variables 1 <script> 2 var sum=10 //Global Variable 3 4 function getSum() 5 { var x=sum //Local variable 6 } 7 sum=x //Wrong assignment cause x is local Variable 8</script> 9

Data Types:
Three main types:

Primitive data types: o Numbers : integers or float (Ex: var x=1 , var z=2.3) o Booleans : true or false(Ex: var flag=true) o Strings : (Ex: var val=hello world) Reference data types: o Objects : myObj=new Object(); o Arrays : var myArray=new Array(2); Special data types: o null : no value o undefined : known before

JavaScript Expressions and operators

Javascript Expressions are as traditional, Arithmetic to evaluate numbers, String to evaluate or operate on string or logical which results in true or false.

Arithmetic Operators
Operator Name + Example Result y=-10 z=7 y=-X Addition X=2 Y=5 z=X+Y Subtraction X=3 Y=1 z=x-y * Multiplication X=2 Y=4 Z=X*Y / Division X=2 Y=2 z=X/Y % Modulus arithmetic division remain X=2 Y=5 z=Y%X ++ -increment Decrement X=2 X++ X=2 x=1 x=3 z=1 z=1 Z=8 z=2

Unary Operator, as it operate on single variable X=10

Comparison Operators
< > <= >= == != 9<8 9>8 8<=8 9>=1 1 == 1 1 != 1 false true true true true false Less Than Greater Than Less Than or equal Greater Than or equal Equality Inequality

Logical Operators
&& Logical AND || ! Logical OR Logical Not

Conditional Operators
Consider to be if and it operate on 3 operand, like you say I will get out, if it's raining I will put on a jacket otherwise I will wear casual wears. Example: 1value=12 evaluate=(value>20) Evaluation Done : Evaluation Fail , this will return Evaluation 2Fail.

Conditional Statements:
if .. else Which is branching conditioning, check on condition if not true so continue or go to else if exists. Listing 4: Simple If 1if(condition) 2 3 do something 4 5if(x >10) 6 alert(it's 10) 7 Listing 5: if.. else 1 if(condition) 2 do something 3else 4 do another thing 5 6if(x>10) alert(its > 10) 7 else 8 alert(less than 10) 9

switch / case
Consider as if you are dealing with button box, you turn on electricity and pick only one button. The same here, you pass expression and pick one case to be performed and in case of failure default is done.

Example: 1 2 switch (expression) 3 { 4 5 case label1: 6 7 statements 8 9 [break] 10 case label2: 11 12 statements 13 14 [break] 15 16 default : 17 18 statements 19 20 } 21

Loop Statements
Which are repeating of actions till something stop it all loops got three essential steps: initial condition, stopping condition.

For
The code below will print on web page from 1 to 9. Listing 7: For-loop 1for(initial expression;stopping condition;step) 2 3 { statements} 4 5//Examample: 6 7for(x=1;x<10;x++){ document.write(x) 8 } 9

do .. while
Another looping technique which perform the operation at least one time before checking the condition. 1 2 do{ 3 statements 4 5 }while(condition); 6 7 //Example: x=1 //initial condition. 8 do{ 9 document.write(x) 10 x++; // step 11 }while(x<=10); //condition 12

While
Easily it's loop that evaluate condition before work. Listing 9: While 1 2 while (condition) { 3 4 statements 5 } 6 7 //Ex: x=10; 8 while(x<=10){ 9 document.write(x) 10 x--; 11 } 12

FUNCTION A function is a block of code that will be executed when "someone" calls it:

Example
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Try it</button> </body> </html>

Commenting in JavaScript:
If I want to tell the browser to ignore a certain part of code so I have to comment it, use (//) to comment on a single like, while using (/* */) to comment multiple lines to force the browser to ignore the whole thing just use (<!-- -->)