UNIT 3.ppt

• JavaScript is the most popular scripting language on the internet, and works in
all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and
Safari.
• JavaScript was designed to add interactivity to HTML pages
• A JavaScript is usually embedded directly into HTML pages
What is JavaScript?

• JavaScript is Case Sensitive
• A JavaScript statement is a command to a browser. The purpose of the command
is to tell the browser what to do
• JavaScript code is a sequence of JavaScript statements.
• Each statement is executed by the browser in the sequence they are written
• JavaScript statements can be grouped together in blocks.
• Blocks start with a left curly bracket {, and end with a right curly bracket }.
• The purpose of a block is to make the sequence of statements execute together.
What is JavaScript?

• JavaScript gives HTML designers a programming tool - HTML authors are
normally not programmers, but JavaScript is a scripting language with a very
simple syntax
• JavaScript can react to events - A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a user clicks
on an HTML element
• JavaScript can manipulate HTML elements - A JavaScript can read and change
the content of an HTML element
• JavaScript can be used to create or read cookies - A JavaScript can be used to
store and retrieve information on the visitor's computer
What can a JavaScript Do?

<html><body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First
JavaScript";
</script>
</body></html>
• To insert a JavaScript into an HTML page, use the <script> tag.
• The <script> and </script> tells where the JavaScript starts and ends.
• The lines between the <script> and </script> contain the JavaScript and are
executed by the browser.
• In this case, the browser will access the HTML element with id="demo", and
replace the content with "My First JavaScript“.
How To Insert JavaScript

• The HTML <script> tag is used to insert a JavaScript into an HTML document.
• The HTML "id" attribute is used to identify HTML elements.
• To access an HTML element from a JavaScript, use the
document.getElementById() method.
• The document.getElementById() method will access the HTML element with the
specified id.
• innerHTML property is used sets or returns the inner HTML of an element.
How To Insert JavaScript

<html>
<body>
<h1>My First Web Page</h1>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>
Example

• JavaScript can be put in the <body> and in the <head> sections of an
HTML page
• The JavaScript statement in previous examples , are executed when the page
loads, but that is not always what we want.
• Sometimes we want to execute a JavaScript when an event occurs, such as when
a user clicks a button.
• Then we put the script inside a function.
• Functions are normally used in combination with events.
Example

<!DOCTYPE html>
<html> <head>
function myFunction(){
document.getElementById("demo").innerHTML="My
First JavaScript Function";
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
Example of Function and Event

JavaScript Statements
• A JavaScript statement is a command to a browser.
• It is normal to add a semicolon at the end of each executable statement.
JavaScript Code
• JavaScript code is a sequence of JavaScript statements.
• Each statement is executed by the browser in the sequence they are written.
JavaScript Blocks
• JavaScript statements can be grouped together in blocks.
• Blocks start with a left curly bracket {, and end with a right curly bracket }.
• The purpose of a block is to make the sequence of statements execute together.
An example of statements grouped together in blocks, are
JavaScript functions.

JavaScript Comments
• Single line comments start with //.
• Multi line comments start with /* and end with */.
JavaScript Variables
Rules for JavaScript variable names:
• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter, the $ character, or the underscore
character
var carname="Volvo";

Local JavaScript Variables
A variable declared within a JavaScript function becomes
LOCAL and can only be accessed within that function. (the variable has local
scope).
Global JavaScript Variables
• Variables declared outside a function, become GLOBAL, and all scripts and
functions on the web page can access it.
• Global variables are deleted when you close the page
Assigning Values to Undeclared JavaScript Variables
• If you assign values to variables that have not yet been declared, the variables
will automatically be declared as global variables.
This statement:
carname="Volvo";
will declare the variable carname as a global variable

<html> <body>
<p>Click the button to create a variable, and display the result.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
</body> </html>
Example

Operator Description Example Result of x Result of y
+ Addition x=y+2 7 5
- Subtraction x=y-2 3 5
* Multiplication x=y*2 10 5
/ Division x=y/2 2.5 5
% Modulus
(division
remainder)
x=y%2 1 5
++ Increment x=++y 6 6
-- Decrement x=--y 4 4
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5,

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
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5,

The + Operator On Strings
• The + operator can also be used to add string variables or text values together.
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
The result of txt3 will be: What a verynice day

JavaScript Comparison and Logical Operators
• Comparison operators are used in logical statements to determine equality or
difference between variables or values.
Given that x=5
Operator Description Comparing Returns
== is equal to x==8 false
x==5 true
=== is exactly equal to (value and type) x==="5" false
x===5 true
!= is not equal x!=8 true
!== is not equal (neither value or type) x!=="5" true
x!==5 false
> is greater than x>8 false
< is less than x<8 true
>= is greater than or equal to x>=8 false
<= is less than or equal to x<=8 true

Logical Operators
• Logical operators are used to determine the logic between variables or values.
• Given that x=6 and y=3,
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.
variablename=(condition)?value1:value2
e.g.
voteable=(age<18)?"Too young“ : "Old enough“;

Conditional Statements
• if statement - use this statement to execute some code only if a specified condition
is true
if (condition)
{
code to be executed if 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
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 neither condition1 nor condition2 is true
}

<!DOCTYPE html>
<html><head>
var x="";
var time=new Date().getHours();
if (time<20) {
x="Good day"; }
else {
x="Good Night"; }
document.getElementById("demo").innerHTML=x;
}
</script></head> <body>
<p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>
<p id="demo"></p>
</body> </html>
Example

Switch Statement
• Use this statement to select one of many blocks of code to be executed
var day=new Date().getDay();
switch (day)
{
case 0: x="Today it's Sunday";
break;
case 1: x="Today it's Monday";
break;
case 2: x="Today it's Tuesday";
break;
case 3: x="Today it's Wednesday";
break;
case 4: x="Today it's Thursday";
break;
case 5: x="Today it's Friday";
break;
case 6: x="Today it's Saturday";
break;
}

Alert Box
• An alert box is often used if you want to make sure information comes through to
the user.
• When an alert box pops up, the user will have to click "OK" to proceed
Confirm Box
• A confirm box is often used if you want the user to verify or accept something.
• When a confirm box pops up, the user will have to click either "OK" or "Cancel"
to proceed.
• If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false
Prompt Box
• A prompt box is often used if you want the user to input a value before entering a
page.
• When a prompt box pops up, the user will have to click either "OK" or "Cancel"
to proceed after entering an input value.
• If the user clicks "OK" the box returns the input value. If the user clicks "Cancel"
the box returns null.
JavaScript Popup Boxes

<!DOCTYPE html>
<html>
<head>
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>
Example of Alert

<html><body>
<p>Click the button to display a confirm box.</p>
<p id="demo"></p>
var x;
var r=confirm("Press a button!");
if (r==true) {
x="You pressed OK!";
}
else {
x="You pressed Cancel!";
}
}
</script>
</body></html>
Example of Confirm

<html><head>
function myFunction()
{
var x;
var name=prompt("Please enter your name","Harry Potter");
if (name!=null)
{
x="Hello " + name + "! How are you today?";
}
}
</script></head><body>
<p>Click the button to demonstrate the prompt box.</p>
<p id="demo"></p>
</body></html>
Example of Prompt

JavaScript Functions
• A function is a block of code that executes only when you tell it to execute.
• It can be when an event occurs, like when a user clicks a button, or from a
call within your script, or from a call within another function.
• Functions can be placed both in the <head> and in the <body> section of a
document, just make sure that the function exists, when the call is made.
Syntax
function functionname(){
some code
}

Calling a Function with Arguments
• When you call a function, you can pass along some values to it, these values
are called arguments or parameters.
• These arguments can be used inside the function.
• You can send as many arguments as you like, separated by commas (,)
myFunction(argument1,argument2)
function myFunction(var1,var2)
{
some code
}

<html>
<body>
<p>Click one of the buttons to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Click for Harry Potter</button>
<button onclick="myFunction('Bob','Builder')">Click for Bob</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
Example of Function

Functions With a Return Value
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,5);
</script>
</body></html>

JavaScript Loops
In JavaScript, there are two different kind of loops:
• for - loops through a block of code a specified number of times
for
(variable=startvalue;variable<endvalue;variable=variable+increment
)
{
code to be executed
}
• while - loops through a block of code while a specified condition is true
while (variable<endvalue)
{
code to be executed
}

• The break Statement
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br />";
}
• The continue Statement
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
x=x + "The number is " + i + "<br />";
}

JavaScript For...In Statement
the for...in statement loops through the properties of an object
for (variable in object)
{
code to be executed
}
The block of code inside of the for...in loop will be executed once for
each property.
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt + person[x];
}

Events
Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript.
Examples of events:
– Clicking a button (or any other HTML element)
– A page is finished loading
– An image is finished loading
– Moving the mouse-cursor over an element
– Entering an input field
– Submitting a form
– A keystroke

HTML Event Attributes
To assign events to HTML elements you can use the event attributes
Assign an onclick event to a button element:
<button id="myBtn" onclick="displayDate()">Try it</button>

Example of Onclick Event
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn" onclick="displayDate()">Try it</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

Onload and Onunload Event
• The onload and onunload events are triggered when the user enters or leaves the
page.
• The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the information.
• The onload and onunload events can be used to deal with cookies.
<body onload="checkCookies()" />

Example To Check Cookies Enable
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true) {
alert("Cookies are enabled")
}
else{
alert("Cookies are not enabled")
}
}
</script>
<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>

Onfocus, Onblur and Onchange Event
The onfocus, onblur and onchange events are often used in combination with validation of
form fields.
Below is an example of how to use the onchange event.
The checkEmail() function will be called whenever the user changes the content of the field:
<input type="text" onchange="checkEmail()" />

Onsubmit Event
The onsubmit event can be used to validate form fields before submitting it.
Below is an example of how to use the onsubmit event.
The checkForm() function will be called when the user clicks the submit button in the
form.
If the field values are not accepted, the submit should be cancelled.
<form method="post" action="mySubmit.asp" onsubmit="checkForm()“>
Onmouseover & Onmouseout Event
The onmouseover and onmouseout events can be used to trigger a function when the user
mouses over, or out of, an HTML element.

Example for Move Events
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-
color:yellow;width:150px;height:120px;padding:10px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>

JavaScript Objects
• JavaScript is an Object Based Programming language.
• An Object Based Programming language allows you to define your own objects
and make your own variable types.
• An object has properties and methods.
• Properties are the values associated with an object.
txt.length;
• Methods are the actions that can be performed on objects.
str.toUpperCase());

String Object
the String object is used to manipulate a stored piece of text.
var txt="Hello world!"; or var txt = new String(” Hello world!"; ");
document.write(txt.length);
document.write(txt.toUpperCase());
String Object Methods are as follows---
Method Description
charAt() Returns the character at the specified index
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a copy of the joined strings
fromCharCode() Converts Unicode values to characters
indexOf()
Returns the position of the first found occurrence of a specified
value in a string
lastIndexOf()
Returns the position of the last found occurrence of a specified
value in a string
match()
Searches for a match between a regular expression and a string,
and returns the matches

Date Object
• The Date object is used to work with dates and times.
• Date objects are created with the Date() constructor.
• There are four ways of initiating a date:
new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

Set Dates
We can easily manipulate the date by using the methods available for the
Date object.
In the example below we set a Date object to a specific date (14th
January 2012):
var myDate=new Date();
myDate.setFullYear(2012,0,14);

Compare Two Dates
• The Date object is also used to compare two dates.
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today) {
alert("Today is before 14th January 2100");
}
else {
alert("Today is after 14th January 2100");
}

Array Object
An array is a special variable, which can hold more than one value, at a time.
Create an Array
• An array can be defined in three ways.
The following code creates an Array object called myCars:
1. var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";
2. var myCars=new Array("Saab","Volvo","BMW"); // condensed array
3. var myCars=["Saab","Volvo","BMW"]; // literal array

Access an Array
You can refer to a particular element in an array by referring to the name of the
array and the index number. The index number starts at
document.write(myCars[0]);
Modify Values in an Array
myCars[0]="Opel";

Math Object
• The Math object allows you to perform mathematical tasks.
• The Math object includes several mathematical constants and methods.
var x=Math.PI;
var y=Math.sqrt(16);

Method Description
abs(x) Returns the absolute value of x
pow(x,y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer

JavaScript Form Validation
• JavaScript can be used to validate data in HTML forms before sending off the
content to a server.
• Form data that typically are checked by a JavaScript could be:
» has the user left required fields empty?
» has the user entered a valid e-mail address?
» has the user entered a valid date?
» has the user entered text in a numeric field?

Example of String Object
<html><head>
<script>
function validateForm(){
var x=document.forms.myForm.fname.value;
if (x==null || x=="“) {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body></html>

E-mail Validation
<html><head>
<script>
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

• This means that the input data must contain an @ sign
and at least one dot (.).
• Also, the @ must not be the first character of the
email address, and the last dot must be present after
the @ sign, and minimum 2 characters before the
end:

Browser Detection
The Navigator object contains information about the visitor's browser.
The Navigator object contains information about the visitor's browser name,
version, and more.
Property Description
appCodeName Returns the code name of the browser
appName Returns the name of the browser
appVersion Returns the version information of the browser
cookieEnabled Determines whether cookies are enabled in the browser
onLine Boolean, returns true if the browser is on line, otherwise false.
platform Returns for which platform the browser is compiled
userAgent Returns the user-agent header sent by the browser to the server

Example for getting Browser Information
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

Cookie
A cookie is often used to identify a user
A cookie is a variable that is stored on the visitor's computer.
With JavaScript, you can both create and retrieve cookie values.
Your server sends some data to the visitor's browser in the form of a cookie.
The browser may accept the cookie.
If it does, it is stored as a plain text record on the visitor's hard drive.
Now, when the visitor arrives at another page on your site, the browser sends the
same cookie to the server for retrieval.
Once retrieved, your server knows/remembers what was stored earlier.

Cookies are a plain text data record of 5 variable-length fields:
• Expires :
The date the cookie will expire. If this is blank, the cookie will expire when
the visitor quits the browser.
• Domain : The domain name of your site.
• Path :
The path to the directory or web page that set the cookie. This may be
blank if you want to retrieve the cookie from any directory or page.
• Secure :
If this field contains the word "secure" then the cookie may only be
retrieved with a secure server. If this field is blank, no such restriction exists.
• Name=Value : Cookies are set and retrieved in the form of key and value pairs.

Storing Cookies
• The simplest way to create a cookie is to assign a string value to
the document.cookie object, which looks like this:
Syntax:
document.cookie = "key1=value1;key2=value2;expires=date";
Cookies are located at:
• C:Users(User-Name)AppDataRoamingMicrosoftWindowsCookies
The reason the person asking couldn't find them at this location is most likely because he
didn't go to the Control Panel 1st, then Folder Options then View then uncheck Hide
Protected operating system files.

Example of Setting/develop Cookie
<html><head>
function WriteCookie(){
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
} WriteCookie();"/>
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
alert("Setting Cookies : " + "name=" + cookievalue );
}
</script></head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="
</form></body></html>
Now your machine has a cookie called name. You can set multiple cookies using multiple
key=value pairs separated by semicolon.

• Cookie values may not include semicolons, commas, or whitespace. For
this reason, you may want to use the JavaScript escape() function to
encode the value before storing it in the cookie.
• The escape() function encodes a string.
• This function makes a string portable, so it can be transmitted across any
network to any computer that supports ASCII characters.
• This function encodes special characters, with the exception of: * @ - _ + .
/

Reading Cookies
• Reading a cookie is just as simple as writing one, because the value
of the document.cookie object is the cookie. So you can use this
string whenever you want to access the cookie.
• The document.cookie string will keep a list of name=value pairs
separated by semicolons, where name is the name of a cookie and
value is its string value.
• You can use strings' split() function to break the string into key and
values as follows

Example Of Reading Cookie
<html><head>
function ReadCookie(){
var allcookies = document.cookie;
alert("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
alert("Key is : " + name + " and Value is : " + value);
}
}
</script></head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form></body></html>

UNIT 3.ppt

More Related Content

Similar to UNIT 3.ppt (20)

Recently uploaded (20)

UNIT 3.ppt