JAVA SCRIPT

Introduction
JavaScript is the most popular programming language in
the world.
We Can do followings things with JavaScript
Change html content
Change html attribute
Change html style
Validate data
Comment
// Change heading
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
JavaScript Variables
JavaScript variables are containers for storing data
values.
Example
var x = 5;
var y = 6;
var z = x + y;
JavaScript Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
JavaScript Assignment Operators
Operator Example
= x=y
+= x += y
-= x -= y
*= x *= y
/= x /= y
%= x %= y
JavaScript String Operators
The + operator can also be used to add (concatenate)
strings.
Example
txt1 = "John";
txt2 = "Doe";
txt3 = txt1 + " " + txt2;
JavaScript Comparison and Logical
Operators
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
JavaScript Data Types
JavaScript variables can hold many data types: numbers,
strings, arrays, objects
Example
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
The Concept of Data Types

In programming, data types is an important concept.

To be able to operate on variables, it is important to
know something about the type.
Without data types, a computer cannot safely solve
this:
var x = 16 + "Volvo";
Does it make any sense to add "Volvo" to sixteen?
Will it produce a result? Will it produce an error?
JavaScript will treat the example above as:
var x = "16" + "Volvo";
JavaScript Has Dynamic Types
JavaScript has dynamic types. This means that the same
variable can be used as different types:
var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
JavaScript Strings
A string (or a text string) is a series of characters like
"John Doe".
Strings are written with quotes. You can use single or
double quotes:
var carName = "Volvo XC60"; // Using double quotes
var carName = 'Volvo XC60'; // Using single quotes
JavaScript Strings
Normally, JavaScript strings are primitive values, created
from literals: var firstName = "John"
But strings can also be defined as objects with the
keyword new: var firstName = new String("John")
var y = new String("John");
JavaScript Strings
You can use quotes inside a string, as long as they don't
match the quotes surrounding the string:
var answer = "It's alright"; // Single quote inside double
quotes
var answer = "He is called 'Johnny'"; // Single quotes inside
double quotes
var answer = 'He is called "Johnny"'; // Double quotes inside
single quotes
String Methods
Method Description
charAt() Returns the character at the specified index
(position)
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 a string for a match against a
regular expression, and returns the matches
String Methods
Method Description
replace() Searches a string for a value and returns a
new string with the value replaced
search() Searches a string for a value and returns
the position of the match
slice() Extracts a part of a string and returns a new
string
split() Splits a string into an array of substrings
substr() Extracts a part of a string from a start
position through a number of characters
substring() Extracts a part of a string between two
specified positions
toLocaleLowerCase() Converts a string to lowercase letters,
according to the host's locale
String Methods

Method Description
toLocaleUpperCase() Converts a string to uppercase letters,
according to the host's locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a
string
valueOf() Returns the primitive value of a String
object
Special Characters
Code Output
\' single quote
\" double quote
\\ backslash
\n new line
\t tab
\b backspace
Accessing a String as an Array is
Unsafe
This is unsafe and unpredictable:
It does not work in all browsers (not in IE5, IE6, IE7)
It makes strings look like arrays (but they are not)
str[0] = "H" does not give an error (but does not work)
Converting a String to an Array
A string can be converted to an array with the split()
method:
var txt = "a,b,c,d,e"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
JavaScript Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
JavaScript Numbers
JavaScript Numbers are Always 64-bit Floating Point
Unlike many other programming languages, JavaScript
does not define different types of numbers, like integers,
short, long, floating-point etc.
JavaScript numbers are always stored as double
precision floating point numbers, following the
international IEEE 754 standard.

This format stores numbers in 64 bits, where the number

(the fraction) is stored in bits 0 to 51, the exponent in bits
52 to 62, and the sign in bit 63
JavaScript Numbers
By default, Javascript displays numbers as base 10
decimals.
But you can use the toString() method to output numbers
as base 16 (hex), base 8 (octal), or base 2 (binary).
var myNumber = 128;
myNumber.toString(16); // returns 80
myNumber.toString(8); // returns 200
myNumber.toString(2); // returns 10000000
Infinity
Infinity (or -Infinity) is the value JavaScript will return if you
calculate a number outside the largest possible number.
var myNumber = 2;
while (myNumber != Infinity) { // Execute until Infinity
myNumber = myNumber * myNumber;
}
NaN - Not a Number
NaN is a JavaScript reserved word indicating that a value
is not a number.
Trying to do arithmetic with a non-numeric string will result
in NaN (Not a Number):
var x = 100 / "Apple"; // x will be NaN (Not a Number)
var x = 100 / "Apple";
isNaN(x); // returns true because x is Not a Number
var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
Numbers Can be Objects
Normally JavaScript numbers are primitive values created
from literals: var x = 123
But numbers can also be defined as objects with the
keyword new: var y = new Number(123)
var x = 123;
var y = new Number(123);

// typeof x returns number

// typeof y returns object
JavaScript Booleans
Booleans can only have two values: true or false.
var x = true;
var y = false;
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called
cars, containing three items (car names):
var cars = ["Saab", "Volvo", "BMW"];

Lecture 1
JavaScript Objects
JavaScript objects are written with curly braces.
Object properties are written as name:value pairs,
separated by commas.
JavaScript Objects
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
Do Not Declare Strings, Numbers, and Booleans as
Objects!
The typeof Operator
You can use the JavaScript typeof operator to find the
type of a JavaScript variable:
typeof "John" // Returns string
typeof 3.14 // Returns number
typeof false // Returns boolean
typeof [1,2,3,4] // Returns object
typeof {name:'John', age:34} // Returns object
Undefined
In JavaScript, a variable without a value, has the value
undefined. The typeof is also undefined.
var person; // Value is undefined, type is undefined
Any variable can be emptied, by setting the value to
undefined or Null.
var car = "";
var person = null;
Difference

Difference Between Undefined and Null

typeof undefined // undefined
typeof null // Null is an object in JavaScript, holds nothing
null === undefined // false
null == undefined // true
JavaScript Functions
A JavaScript function is a block of code designed to
perform a particular task.
A JavaScript function is executed when "something"
invokes it (calls it).
JavaScript Function Syntax

A JavaScript function is defined with the

function keyword, followed by a name,
followed by parentheses ().
Function names can contain letters, digits,
underscores, and dollar signs (same rules as
variables).
The parentheses may include parameter names
separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is
placed inside curly brackets: {}
function name(parameter1, parameter2,
parameter3) {
code to be executed
}
Function Invocation
The code inside the function will execute when
"something" invokes (calls) the function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
Function Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML =
toCelsius(77);
Function Return
When JavaScript reaches a return statement, the
function will stop executing.
If the function was invoked from a statement, JavaScript
will "return" to execute the code after the invoking
statement.
Functions often compute a return value. The return value
is "returned" back to the "caller":
Why Function
You can reuse code: Define the code once, and use it
many times.
You can use the same code many times with different
arguments, to produce different results.
JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an alert box, using window.alert().
Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().
JavaScript Scope
Local and Global
In JavaScript, objects and functions are also variables.
In JavaScript, scope is the set of variables, objects,
and functions you have access to.
JavaScript has function scope: The scope changes inside
functions.
The Lifetime of JavaScript Variables
The lifetime of a JavaScript variable starts when it is
declared.
Local variables are deleted when the function is
completed.
Global variables are deleted when you close the page.
JavaScript Events

Here is a list of some common HTML events:

Events Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an
HTML element
onmouseout The user moves the mouse away from
an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the
page
W3Schools JavaScript Reference HTML DOM Events.
Finding HTML Elements
Method Description
document.getElementById() Find an element by
element id
document.getElementsByTagName() Find elements by tag
name
document.getElementsByClassName( Find elements by class
) name
Changing HTML Elements
Method Description
element.innerHTML= Change the inner HTML of an element
element.attribute= Change the attribute of an HTML
element
element.setAttribute(attribute,value) Change the attribute of an HTML
element
element.style.property= Change the style of an HTML element
Using Events
The HTML DOM allows you to execute code when an
event occurs.
Events are generated by the browser when "things
happen" to HTML elements:
An element is clicked on
The page has loaded
Input fields are changed
The addEventListener() method
The addEventListener() method attaches an event handler to the
specified element.
The addEventListener() method attaches an event handler to an element
without overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e
two "click" events.
You can add event listeners to any DOM object not only HTML elements.
i.e the window object.
The addEventListener() method makes it easier to control how the event
reacts to bubbling.
When using the addEventListener() method, the JavaScript is separated
from the HTML markup, for better readability and allows you to add event
listeners even when you do not control the HTML markup.
You can easily remove an event listener by using the
removeEventListener() method.
The addEventListener() method
Syntex
element.addEventListener(event, function, useCapture);
The first parameter is the type of the event (like "click" or
"mousedown").
The second parameter is the function we want to call
when the event occurs.
The third parameter is a boolean value specifying whether
to use event bubbling or event capturing. This parameter
is optional.
Adding Events Handlers
Method Description
document.getElementById(id).onclick= Adding event handler code to an
function(){code} onclick event
Event Bubbling or Event Capturing
There are two ways of event propagation in the HTML
DOM, bubbling and capturing.
Event propagation is a way of defining the element order
when an event occurs. If you have a <p> element inside a
<div> element, and the user clicks on the <p> element,
which element's "click" event should be handled first?
In bubbling the inner most element's event is handled first
and then the outer: the <p> element's click event is
handled first, then the <div> element's click event.
Event Bubbling or Event Capturing
In capturing the outer most element's event is handled
first and then the inner: the <div> element's click event will
be handled first, then the <p> element's click event.
With the addEventListener() method you can specify the
propagation type by using the "useCapture" parameter:
addEventListener(event, function, useCapture);
The Browser Object Model

There are no official standards for the Browser Object

Model (BOM).
Since modern browsers have implemented (almost) the
same methods and properties for JavaScript interactivity,
it is often referred to, as methods and properties of the
BOM.
The Window Object
The window object is supported by all browsers. It
represents the browser's window.
All global JavaScript objects, functions, and variables
automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a
property of the window object:
window.document.getElementById("header");
Same As
document.getElementById("header");
Window Size

Three different properties can be used to determine

the size of the browser window (the browser
viewport, NOT including toolbars and scrollbars).
For Internet Explorer, Chrome, Firefox, Opera, and
Safari:
window.innerHeight - the inner height of the browser
window
window.innerWidth - the inner width of the browser
window
For Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth
Window Size

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
The example displays the browser window's height and
width: (NOT including toolbars/scrollbars)
JavaScript Window Screen
The window.screen object can be written without the
window prefix.
Properties:
screen.width
screen.height
screen.availWidth
screen.availHeight
JavaScript Window Screen
document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;
document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;
The screen.availHeight property returns the height of the
visitor's screen, in pixels, minus interface features like the
Windows Taskbar.
Window Screen Color Depth

document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;
Window Location

The window.location object can be written

without the window prefix.
Some examples:
window.location.href returns the href (URL) of the
current page
window.location.hostname returns the domain
name of the web host
window.location.pathname returns the path and
filename of the current page
window.location.protocol returns the web protocol
used (http:// or https://)
window.location.assign loads a new document
Window Location
document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;
window.location.assign("http://www.w3schools.com");
JavaScript Window History
The window.history object can be written without the
window prefix.
To protect the privacy of the users, there are limitations to
how JavaScript can access this object.
Some methods:
history.back() - same as clicking back in the browser
history.forward() - same as clicking forward in the browser
 JavaScript Window
Navigator
The window.navigator object contains information about
the visitor's browser.
The window.navigator object can be written without the
window prefix.
Some examples:
navigator.appName
navigator.appCodeName
navigator.platform
JavaScript Window
Navigator
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Cookies Enabled is " + navigator.cookieEnabled;
</script>
The property product returns the engine name of the
browser:
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
navigator.product;
</script>
Warning !!!

The information from the navigator object can often be

misleading, and should not be used to detect browser
versions because:
Different browsers can use the same name
The navigator data can be changed by the browser owner
Some browsers misidentify themselves to bypass site tests
Browsers cannot report new operating systems, released later than
the browser
JavaScript Popup Boxes

JavaScript has three kind of popup boxes: Alert

box, Confirm box, and Prompt box.
window.alert("sometext");
var r = confirm("Press a button");
if (r == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
var person = prompt("Please enter your name",
"Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
JavaScript Timing Events

The window object allows execution of code at

specified time intervals.
These time intervals are called timing events.
The two key methods to use with JavaScript
are:
setTimeout(function, milliseconds)
Executes a function, after waiting a specified
number of milliseconds.
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the
execution of the function continuously.
The setTimeout() and setInterval() are both
methods of the HTML DOM Window object.
The setTimeout() Method

The window.setTimeout() method can be

written without the window prefix.
The first parameter is a function to be executed.
The second parameter indicates the number of
milliseconds before execution.
<b<button onclick="setTimeout(myFunction,
3000)">Try it</button>

<script>
function myFunction() {
alert('Hello');
}
</script>
The setInterval() Method

The window.setInterval() method can be

written without the window prefix.
The first parameter is the function to be
executed.
The second parameter indicates the length of
the time-interval between each execution.
This example executes a function called
"myTimer" once every second (like a digital
watch).
var myVar = setInterval(myTimer, 1000);

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}
Stop the Execution
The clearTimeout() method stops the execution of the
function specified in setTimeout().
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
var myVar = setInterval(myTimer, 1000);
clearInterval(myVar);
JavaScript Cookies

Cookies are data, stored in small text files, on

your computer.
When a web server has sent a web page to a
browser, the connection is shut down, and the
server forgets everything about the user.
Cookies were invented to solve the problem
"how to remember information about the user":
When a user visits a web page, his name can
be stored in a cookie.
Next time the user visits the page, the cookie
"remembers" his name.
Cookies are saved in name-value pairs like:
username=John Doe
Create a Cookie with JavaScript
JavaScript can create, read, and delete cookies with the
document.cookie property.
With JavaScript, a cookie can be created like this:
document.cookie="username=John Doe; expires=Thu, 18 Dec
2013 12:00:00 UTC";
With a path parameter, you can tell the browser what path
the cookie belongs to. By default, the cookie belongs to
the current page.
document.cookie="username=John Doe; expires=Thu, 18 Dec
2013 12:00:00 UTC; path=/";
Read a Cookie with JavaScript
With JavaScript, cookies can be read like this:
var x = document.cookie;
Change a Cookie with JavaScript

With JavaScript, you can change a cookie the same way

as you create it:
document.cookie="username=John Smith; expires=Thu, 18 Dec
2013 12:00:00 UTC; path=/";
The old cookie is overwritten.
Delete a Cookie with JavaScript
Deleting a cookie is very simple. Just set the expires
parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970
00:00:00 UTC";
Note that you don't have to specify a cookie value when
you delete a cookie.
The Cookie String

The document.cookie property looks like a

normal text string. But it is not.
Even if you write a whole cookie string to
document.cookie, when you read it out
again, you can only see the name-value
pair of it.
If you set a new cookie, older cookies are
not overwritten. The new cookie is added to
document.cookie, so if you read
document.cookie again you will get
something like:
cookie1=value; cookie2=value;
A Function to Set a Cookie

function setCookie(cname, cvalue, exdays) {

var d = new Date();
//(milliseconds since January 1, 1970)
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
A Function to Get a Cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return
c.substring(name.length,c.length);
}
return "";
}
A Function to Check Cookie
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}