Scribd
Upload
1K views117 pages

305 Unit 3

Classic notes

Uploaded by

fravat35
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views117 pages

305 Unit 3

Classic notes

Uploaded by

fravat35
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 117

3.

Javascript
3. 3. 1 Overview of Client and S erver
Scripting Sid
2. Structure of Javascript e
3. Da ta Types a nd Variables
4. Operators
Arithmetic Operator Assignment Operator Comparison
Operator Logical Operator
Conditional Operator
Jav aScript is a very powerful client-side
scripting language . Java Script is used
mainly for enhancing the interaction of a
user with the webpage.
In other words, you can make your
webpage more lively a nd interactive, with
the help of Ja vaScri pt.
Jav aScript is also being used widely in
game development a nd Mobile
application
development.
3.3.1 Overview of Client and
Server Side Scripting
A scripting or script language is a
programming language for a special
run-time environment that automates
the execution of tasks; the tasks could
alternatively be executed one-by-one
by a human operator. Scripting
languages are often interpreted.
Client Side Scripting
Client - side scripting
(embedded scripts) is code that exists
inside the client's HTML page. This
code will be processed on
the client machine and the HTML
page will NOT perform a PostBack to
the web-server . Traditionally,
client - side scripting is used for page
navigation, data validation and
formatting.
Server Side Scripting
Server-side scripting is a technique
used in web development which
involves employing scripts on a web
server which produce a response
customized for each user's request to
the website. The alternative is for the
web server itself to deliver a static web
page.
Server Side V S Client
BA S IS
Side
FOR
CO MP A RIS ON S E R V E R -S ID E S CR IPT ING C LIE NT -SID E S C RIPT IN G

Basic Works in the ba ck end which could Works at the front end and
not be visible at the client end. script are visible among the
us ers.

Processing Requires server interaction. Does not need interaction


with the server.
Languages PHP, ASP.net, Ruby on Rails, HTML, CSS, JavaScript,
involved Cold Fus ion, Python, etcetera. etc.

Affect Could effectively customize the web C a n reduce the load to


pages an d provide dynamic web sites. the server.

Securit y Relatively secure. Insecure

Source Visibility Not visible to any us er Us er can view in web


browser
3.3.2 Structure of Javascript
<HTML>
<HEAD>
<TITLE>JAVASCRIPT STRUCTU RE</TITLE>
<SCRIPT LANG UAGE="JAVASCRIPT">
//WRITE JAVAS CRI PT C O D E
H E RE
</SCRIPT>
</HEAD>
< BODY>
<FO RM>

< /FO RM>


< /B ODY>
</HTML>
Javascript is case sensitive
language
It is loosely typed language
Comment
s Single line Comment
■ // is used for Single Line Comment
Multi line Comment
■ /* and */ is used for Multi Line
Comment
3.3.3 Data Types and
Variables
Number:
JavaScrip ha s only one type
t of
numbers. can be written with, or
Numbers
without decimals:
■ var x1 = 34.00; / / Written with decimals
■ var x2 = 34; / / Written without decimals
String:
A string (or a text string) is a series of
characters like “ SYB CA THE G REAT
CLASS " .
Strings are written with quotes. You
can use single or double quotes:
■ var carName1 = "Volvo XC60";// Using double quotes
■ var carName2 = 'Volvo XC60'; // Using single quotes
Boolean:
Booleans c an only have two
values: true or false.
■ var a=true;
■ var flag=false;
Null:
In JavaScript null is "nothing". It is
supposed to be something that doesn't
exist.
Unfortunately, in JavaScript, the data
type of null is an object.
■ var a = null;
undefined:
In JavaSc ript, a variable without a
value, ha s the value undefined. The
type is also undefined.
■ var car; // Value is undefined, type is
undefined
Variable
s A Java Scri pt is simply a name
variable
storage location. of
There are two types of variables in J a vaScript :
local variable and global variable.
There are some rules while declaring a
JavaScript variable (also known as identifiers).
1. Name m ust start with a letter (a to z or A to Z),
underscore( _ ), or dollar( $ )sign.
2. After first letter we c an use digits (0 to 9), for example
value1.
3. Jav aScript variables are case sensitive, for example x
and X are different variables.
“var” is used to declare variable.
Syntax :
■ var varname=value”;
Example:
■ var n=10;
■ var s=“ SYBCA” ;
■ var flag=“true”;
■ var a=null;
3.3.4 Operators
1. Arithmetic Operator
2. Assignment Operator
3. Comparison
Operator
4. Logical Operator
5. Conditional Operator
6. String Operator
1. Arithmetic Operator
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modul us (Division Remainder)
++ Increment
-- Decrement
Example:
<SCRIPT>
var a=10; var b=10;
document.write((a+b)+"<br>");
document.write(a-b+"<br>");
document.write(a*b+"<br>");
document.write(a/b+"<br>");
document.write(a%b+"<br>");
document.write(a**b+"<br>");
document.write((++a)+"<br>");
document.write((--b)+"<br>");
</SCRIPT>
Output
20
0
100
1
0
10000000000
11
9
2. Assignment
Operator
Operator Example Sa me 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
**= x **= y x = x ** y
Example:
<SCRIPT>
var a=parseInt(10); var
b=parseInt(10);
document.write((a+=b)+"<br>");
document.write((a-=b)+"<br>");
document.write((a*=b)+"<br>");
document.write((a/=b)+"<br>");
document.write((a%=b)+"<br>");
document.write((a**=b)+"<br>");

</SCRIPT>
Output:
20
10
100
10
0
0
3. Comparison
Operator
Operator Description

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Example:
<SCRIPT>
var a=parseInt(10); var
b=parseInt(10);
document.write((a==b)+"<br>");
document.write((a===b)+"<br>");
document.write((a!=b)+"<br>");
document.write((a<b)+"<br>");
document.write((a>b)+"<br>");
document.write((a<=b)+"<br>");
document.write((a>=b)+"<br>");

</SCRIPT>
Output:
true
true
fals
e
fals
e
fals
e
true
true
4. Logical
Operator
Operator Description

&& logical a nd

|| logical or

! logical not
Example:
<SCRIPT>
var a=parseInt(10); var
b=parseInt(10);
document.write((a<b&&a>b)+"<br>");
document.write((a<b||a>b)+"<br>");
document.write(!(a<b)+"<br>");

</SCRIPT>
Output
fals
e
fals
e
true
5. Conditional
Operator
? : Operator
Also known as Ternary Operator
FA LSE

Expr1 ? Expr2 : Expr3


TRUE
Example:
<SCRIPT>
var a=parseInt(10);
var b=parseInt(10);
var c= a<b?a:b;
document.write(c);
</SCRIPT>

O utp ut: 10
6. String Operator
The + operator can also be used to add
(concatenate) strings.
Example:
<SCRIPT>
var a="VNSGU";
var b="SURAT";
var c= a+b;
d ocument.write(c);
</SCRIPT>

O UTPU T: V NS G U SU RAT
3.3.5 Control Structures
1. Branching
2. Looping
3 . Jumpi ng
Branching
Simple if Statement
if….else Statement
Netsted if Statement
Ladder if or elseif
Statement
Switc h…case Statement
Loopin
g Entry Control Loop
■ for loop
■ while loop
Exit Control Loop
■ do…while Loop
Jump in
g break
continue
Branching
Simple if Statement
if….else Statement
Netsted if Statement
Ladder if or elseif
Statement
Switc h…case Statement
Simple if
Statement
When we need to execute a block
of
statement only when a given
s is true then we use if
condition
statement.
Syntax:
if (test - condition)
{
//Statement
}
Next statements
Flowchart:
Example:
<SCRIPT>
var a=10; var b=20; if(a<b)
document.write("A is min");
</SCRIPT>

O UTPU T:
A is min
if…else
Statement
An if statement can be followed by a n
optional else statement, which
executes when the Boolean expression
is false.
Syntax:
if(test - condition)
{
// True Statements
}
else
{
// False
Statements
}
Flowchart:
Example:
< SCRIPT>
var a=100 ;
var b=20; if(a<b)
document.write("A is min");
else
document.write("B is min");
< /SCRIPT>

O UTPUT:
B is min
Nested if
Statement
If statement within if statement is
known as nested if statement.
Syntax:
if(test - condition 1)
{
if(test - condition 2)
{
/ / True Statement
}
}
else
{
if(test - condition 3)
{
/ / False Statement
}
}
Flowchart:
Example:
< SCRIPT>
var a=10,b=20 ,c=3 0;
clrscr(); if(a<b)
{
if(b<c)
document.write("Inside IF");
}
else
{
document.write("Inside ELSE" );
}
}
< /S C RI PT> OUTPUT:
Inside IF
Ladder if or elseif
Statement
else-if statements in javascript is like
another if condition, it's used in
program when if statement a having
multiple decisions.
Syntax:
if(test - c ondition 1)
{
// Stat ement 1
}
else if(test - condition 2)
{
// St atement 2
}
...
...
...
else if(test - condition n)
{
// St atement n
}
else
{
// Else Statement
}
next- statement
Flowchart:
Example:
< SCRIPT>
var per=80;
if(per>=70)
d ocu men t. write("D IST");
else if(per>=60)
document.write("FIRST");
else if(per>=50)
d ocu men t. write("S E C O ND ");
else if(per>=35)
document.write("PASS");
< /SCRIPT>

O UTPUT: D IST
Switch Case or
Selection
Statement
Switch case is used to select one
option from one or more option.
Switch is used for only int, char and
enum data.
We can also use nested switch (switch
within switch).
Syntax:
switch(expression)
{
case value1:
Statement 1;
break;
case value2:
Statement 2;
break;
. ..
. ..
. ..
case valuen:
Statement n;
break;
default:
default
Statement; break;
}
next- statement;
Flowchart:
Example:
<SCRIPT>
var c=2; switch(c)
{
case 1 :
docu ment .write("Q UIZ"); break;
case 2 :
document.write("ASSIGNMENT");
break;
case 3 :
docu ment .write("VIVA"); break;
}
</SCRIPT>

OUTPUT:
ASSIG NMENT
Loopin
g Entry Control Loop
■ for loop
■ while loop
Exit Control Loop
■ do…while Loop
while loop
A while loop in JAVASCRIPT
repeatedly executes a target
statement as long as a given
condition is true.
Syntax:
while(Test Condition)
{
//Body of Loop
}
Next-statements;
Flowchart:
Example:
<SCRIPT>
var n=10,i=1; while(i<=n)
{
document.write(i);
i++;
}
</SCRIPT>

O UTPU T:
12345678910
do..while
loop
The loop is similar to the
while do..whil
loop with one important
e difference.
The body of do...while loop is executed
at least once . Only then, the test
expression is evaluated.
Syntax:
do
{
//body of loop
}while(Test-Condition);
Flowchart:
Example:
< SCRIPT>
var n=10,i=1;
do
{
d ocu men t. write(i);
i++;
}while(i<=n);
< /SCRIPT>

OU TPU T:
12 345678 910
for loop
A for loop is a repetition control
structure that allows you to efficiently
write a loop that needs to execute a
specific number of times.
Syntax:
for ( initialization; Test- Condition; Increment/Decrement )

{
Body of Loop;
}
Flowchart:
How for loop works?
The initialization statement is executed
only once.
Then, the test expression is evaluated. If
the test expression is evaluated to false,
the for loop is terminated.
However, if the test expression is
evaluated to true, statements inside the
body of for loop are executed, a nd the
update expression is updated.
Again the test expression is evaluated.
Example:
<SCRIPT>
var n=10;
for(var i=1;i<=n;i++)
{
document.write(i);
}
</SCRIPT>

O UTPU T:
12345678910
Jump in
g break
continue
Jump ing statement:
(break)
When the break statement is
inside executed
loop, the loop will be
terminated and program control
a
returns at the next statement of the
loop.
Syntax:
■ break;
Note: Basically break is used for
breaking(terminate) the loop as well as
switch case.
Flowchart
Exampl
<e
SCRIPT>
var n=10;
for(var i=1;i<=n;i++)
{
if(i==5)
break;
document.write(i);
}
</SCRIPT>

O U TPUT: 1234
Jump ing statement:
(continue)
Sometimes it is desirable to skip some
statement inside the loop, in suc h
case continue statements are used.
Continue forces the next iteration of
the loop to take place and skipping any
code in between.
Syntax:
■ continue;
Flowchart
Exampl
<e
SCRIPT>
var n=1 0;
for(var i=1;i<=n;i++)
{
if(i==5)
continue;
document.write(i);
}
</SC RIPT>

OUTPU T:
1234 6789 10
3.6 Javascript String and
Events
1. Javascript String types
2. String Functions:
■ concat()
■ split()
■ indexOf()
■ lastIndexOf()
■ substring()
■ trim()
■ slice()
■ replace()
■ charAt()
3.6.3 Javascript
Events
3.6.3 .1 Mouse Events
■ Click
■ mouseover
■ mouseremove
■ mouseout
■ mouseup
3.6.3 .2 Keyboard
Events
■ keyup
■ keydown
3.6.3 .3 Form Events
■ Focus
■ Submit
■ Blur
■ change
3.6.1 Javascript String
types
The String object is used torepresent
and manipulate a sequence of
characters.
3.6.2 String Functions:
■ concat()
■ split()
■ indexOf()
■ lastIndexOf()
■ substring()
■ trim()
■ slice()
■ replace()
■ charAt()
concat(
) concat() joins two or more strings:
The concat() method c an be use
instead of the plus operator. d
Example:
<html>
<head>
<script>
var s="VNSGU"; var
t="SURAT"; var
st=s.concat(t);
document.write(st);
</script>
</head>
</html>
split()
A string can be converted to an array
with the split() method:
Example:
<html>
<head>
<script>
var s="very_good_morning";
var arr=s.split("_");
//document.write(arr);
document.write(arr[1]);
</script>
</head>
</html>
indexOf()
The indexOf() method returns the
position of the first occurrence of a
specified value in a string.

indexOf() returns -1 if the value is not


found.
Example:
<html>
<head>
<script>
var s="very good morning";

document.write(s.indexOf("good"));
</script>
</head>
</html>
lastIndexOf()
The lastIndexOf() method returns the
position of the last occurrence of a
specified value in a string.

lastIndexOf() returns -1 if the value is


not found.
Example:
<html>
<head>
<script>
var s="very good morning good";

document.write(s.lastIndexOf("good"));
</script>
</head>
</html>
substring()
Extract characters from a string:
the substring() method
characters, between to extracts
indices
(positions), from a string, a nd returns
the substring.

The substring() method extracts


characters between "start" and "end",
not including "end".
Example:
<html>
<head>
<script>
var s="very good morning good";
var sub=s.substring(5,9);
document.write(sub);
</script>
</head>
</html>
trim()
The trim() method removes
whitespace from both sides of a string.

The trim() method does not change the


original string.
Example:
<html>
<head >
<script>
var s=" very good morning ";
document.write(s.trim());
</scrip t>
< /head >
</html>
slice()
slice() extracts a part of a string and
returns the extracted part in a new
string.

The method takes 2 parameters: the


start position, and the end position
(end not included).
Example:
<html>
<head>
<script>
var s="very good morning";
var sub=s.slice(5,9);
document.write(sub);
</script>
</head>
</html>
replace()
The replace() method searches a string
for a specified value, or a regular
expression, and returns a new string
where the specified values are
replaced.
Example:
<html>
<head>
<script>
var s="very good morning";
var
sub=s.replace("morning","afternoon");
document.write(sub);
</script>
</head>
</html>
charAt()
The charAt() method returns the
character at a index in
string. specifie a
d
The index of the first character is 0,
the second character is 1, and so on.
Example:
<html>
<head>
<script>
var s="very good morning";
document.write(s.charAt(3));
</script>
</head>
</html>
3.6.3 Javascript
Events
HTML events are "things" that happen
to HTML elements.

When JavaScript is used in HTML


pages, JavaScript can "react" on these
events.
An HTML event c an be something the
browser does, or something a user
does.
Here are some examples of HTML
events:
■ An HTML web page has finished loading
■ An HTML input field was changed
■ An HTML button was clicked
3.6.3.1 Mouse
Events
onclick()
ondbclick()
onmousemove()
onmouseover()
onmouseup()
onmousedown()
onclick()
■ Fires on a mouse click on the element
ondbclick()
■ Fires on a mouse double-click on the element
onmousemove()
■ Fires when the mouse pointer is moving while it is over an
element
onmouseover()
■ Fires when the mouse pointer moves over an element
onmouseup()
■ Fires when a mouse button is released over a n element
onmousedown ()
■ Fires when a mouse button is pressed down on an
element
3.6.3.2 Keyboard
Events
onkeydown()
onkeyup()
onkeypress()
onkeydown()
■ Fires when a user is pressing a
key
onkeyup()
■ Fires when a user releases a key
onkeypress()
■ Fires when a user presses a key
3.6.3.3 Form
Events
onsubmit()
onreset()
onblur()
onfocus()
onchange(
)
onselect()
onsubmit()
■ Fires when a form is submitted
onreset()
■ Fires when the Reset button in a form is clicked
onblur()
■ Fires the moment that the element loses focus
onfocus()
■ Fires the moment when the element gets focus
onchange()
■ Fires the moment when the value of the element is
changed
onselect()
■ Fires after some text has been selected in an

You might also like