JavaScript / Web Engineering / Web Development / html + css + js/presentation

Topic
JavaScript
Group Member:
• Hamza Khan
• Mohammad Sajid
• Abdul Wahab

What can we do with Java Script
•Make webpage interactive
•Slider
•Image Galleries
•Form Validation
•Game Development

Java Script tag
• <script type=“text/Java script”></script>

How To Generate Message
Alert(“Hello world”);

Document.write Function in javascript
written on web page
• Document.write();
Show on web page
Document.write(“Hello world”);

Document.write Function in javascript
• Heading on webpage by javaScript
Document.write(“<h1>Hello</h1>”)

Types in java Script
1-String
2-Number
3-Boolean
4-Array
5-Object

Variable in java Script
• Variable are used to hold or store data
How to take data type in java script
Var name=“Ali Bhai”;
Alert(name);
Alert(typeof name);

Variable in java Script(cont)
Var num=25;
Alert(num);
Alert(typeof num);
Var Hk=“null”;
Alert(Hk);
(typeof object);

If-else Statement in javaScript
Syntax:
If(Condition){
//execute if block
}
Else{
//execute else block
}

If-else Statement in javaScript(con)
Var a=10;
Var b=11;
If(a==b)
{
Alert(“values are equal”);
}
Else
{
Alert(“Values are not equal”);
}

Functions in javascript
• Function eliminates the need of writing the
same code again and again.
Function welcome(){
Alert(“welcome to College”);
}
Welcome();
Welcome();

Airthmetic operations in JavaScript
• Addition +
• Subtraction –
• Multiplication *
• Division /
• (Division Reminder)%
• Increment ++
• Decrement --

Addition program in javaScript
Var add = 10 + 15;
document.write(add);
Here,
Operand=10 and 15
Operator= + sign

Subtraction program in javaScript
Var sub = 10 - 5;
document.write(sub);
Here,
Operand=10 and 15
Operator= - sign

Multiplication program in
javaScript
Var mul = 5 * 5;
document.write(mul);
Here,
Operand=5 and 5
Operator= * sign

Division program in javaScript
Var div = 5/5;
document.write(div);
Here,
Operand=5 and 5
Operator= / sign

Remainder program in javaScript
Var rem = 5%5;
document.write(rem);
Here,
Operand=5 and 5
Operator= % sign

Operator order of Precedence in javaScript
Var rem = 5+5*10;
First precedence Multiplication and
Division
Answer=55

Operator order of Precedence in
javaScript(Cont)
Var rem = (5+5)*10;
First Highest precedence is bracket
then Multiplication and Division
Answer=100

Increment and decrement operator in
javascript
Var Ans=10;
Ans++;
document.write(Ans);
Var Ans=11;
Ans--;
document.write(Ans);

Comparison operator in javascript
• ==(equal to)
• ===(equal value and type)
• !=(not equal)
• > greater than
• < Less than
• >= (greater than or equal to)
• < =(Less than or equal to)

Comparison operator in javascript(cont)
Var a=10, b=10
If(a==b){
document.write(“both values are
same”);
}
Ans=both values are same

Var a=10, b=“10”
If(a===b){
document.write(“both values are same”);
}
Else{
document.write(“both values not are
same”);
}
Ans=not same
// because triple equal check values and
data type also

Var a=10, b=5
If(a!=b){
document.write(“both values are not equal”);
}

Var a=10, b=5
If(a>b){
document.write(“a greater than b”);
}

Var a=10, b=5
If(a<b){
document.write(“a Less than b”);
}

Var age=18
If(age >=18)
{
document.write(“you are eligible”);
}
Else{
Alert(“not Eligible”);
}
Ans=eligible

Math funcitons in javaScript
• Math.round();
• Math.sqrt();
• Math.power();
• Math.min();
• Math.max();
• Math.random();
• Math.floor(math.random() * 1000);

Loop in JavaScript
• For Loop
• While Loop
• Do while Loop

For loop in JavaScript
Syntax;
for(initialization; condition; increment/decriment )
E.g:
For(var i=1; i<6; i++)
{ document.write( “hello” + I + “ <br/ >” )
}

While Loop in javaScript
E.g:
var i=1;
While( i < 6 )
{ document.write( “hello”+ I + “ <br/ >” )
i++;
}

Do While loop in javaScript
E.g:
Var i=1;
do
{ document.write{“hello”+i+”<br>”}
i++;
}
While(i<6);

Array
Arrays
Data structures of related items
Each element has a position number
Dynamic
Size of an array in JavaScript can be changed
(increased) AFTER it is created

Arrays in JavaScript
• Each element referenced by a number
Start at “zeroth element”: 10 element array
has elements: 0,1,2 ,..,8,9
Subscript or index
• Accessing a specific element
Name of array
Brackets
Number of element
• Arrays know their length
length property

c[ 6 ]
-45
6
0
72
1543
-89
0
62
-3
1
6453
78
Name of array c[ 0 ]
c[ 1 ]
c[ 2 ]
c[ 3 ]
c[ 11 ]
c[ 10 ]
c[ 9 ]
c[ 8 ]
c[ 7 ]
c[ 5 ]
c[ 4 ]
Position number (index
or subscript) of the
element within array c
Fig. 11.1 A 12-element array.

Declaring and Allocating Arrays
• Arrays in memory
– Objects
– Operator new
• Allocates memory for objects
• Dynamic memory allocation operator
var c;  array declaration
c = new Array( 12 );  memory allocation

Using Arrays
• Arrays can grow dynamically
– Allocate more space as more items are added
than originally planned for
• Array elements must be initialized explicitly
– Default value is “undefined”
– for loops convenient fro initialization
– Referring to uninitialized elements or elements
outside array bounds is an error

Examples Using Arrays
• for…in statement
– Perform an action for each element in an array
– Iterates over array elements
• Assigns each element to specified variable one at a
time
– Ignores non-existent elements

Multidimensional Arrays
• Two-dimensional arrays analogous to tables
– Rows and columns
• Specify row first, then column
– Two subscripts

Multidimensional Arrays
a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]
Row 0
Row 1
Row 2
Column 0 Column 1 Column 2 Column 3
Row subscript (or index)
Array name
Column subscript (or index)
a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]
a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]
Two-dimensional array with three rows and four columns.

JavaScript / Web Engineering / Web Development / html + css + js/presentation

More Related Content

What's hot (20)

Similar to JavaScript / Web Engineering / Web Development / html + css + js/presentation (20)

More from M Sajid R (6)

Recently uploaded (20)

JavaScript / Web Engineering / Web Development / html + css + js/presentation