Prepared by Muthulakshmi V

Prepared by Muthulakshmi V
8/2/2017 1
Outline
 What is JavaScript?
 Latest version of JavaScript
 Programming with JavaScript
 Declaring variables
 Displaying messages using JavaScript
 document.write
 console.log
 Data Types in JavaScript
 The alert box
 The prompt box – getting input from users
 Adding Comments
 Operators
8/2/2017 2
Outline
 Conditionals
 If
 If else
 switch
 Looping
 Arrays
 Functions
 Exception handling
 Document Object Model
 The DOM Hierarchy
 DOM Methods
 DOM Properties
 AJAX 8/2/2017 3
What is JavaScript?
 Is a programming language
 Adds interactivity to the web page
 Examples are responses when buttons are pressed or data entered in

forms, dynamic styling, animations etc.
 Was created in 10 days in May 1995 by Brendan Eich, then working at

Netscape and now of Mozilla.
 JavaScript was not always known as JavaScript: the original name was
Mocha, a name chosen by Marc Andreessen, founder of Netscape
8/2/2017 4
Latest version of JavaScript
 Became an ECMA standard in 1997.
 ECMA-262 is the official name of the standard.
 ECMAScript is the official name of the language.
8/2/2017 5
Latest version of JavaScript
Year Version Description
1997 ECMAScript 1 First Edition
1998 ECMAScript 2 Editorial Changes
1999 ECMAScript 3 Regular Expressions , Exception
Handling
ECMAScript 4 Never Released
2009 ECMAScript 5 Adding “strict mode”, JSON
2011 ECMAScript 5.1 Editorial Changes
2015 ECMAScript 6 Classes, Modules, additional array
operators, collection objects
2016 ECMAScript 7 Added more array operators
ECMAScript 6 is also called ECMAScript 2015.

8/2/2017 6
ECMAScript 7 is also called ECMAScript 2016.

Browser Support
 ECMAScript 3 is fully supported in all browsers.
 ECMAScript 5 is fully supported in all modern browsers*.
 ECMAScript 6 is partially supported in all modern browsers.
 ECMAScript 7 is poorly supported in all browsers.
8/2/2017 7
Including Script in HTML Pages
<head>
<script>
//In line scripts
</script>
</head>
<head>
<script src = ‘xyz.js’>
//External scripts
</script>
</head>
8/2/2017 8
Displaying Messages
 To display messages in the browser we have the following 2 basic
methods.
 document.write(message);
 This outputs the message in the browser window.
 console.log(message);
 This outputs the message in the console window. Usually used for
debugging purposes.
8/2/2017 9
Variables
 Variables are containers that you can store values in.
 You start by declaring a variable with the var keyword, followed by

any name you want to call it
 var firstname;
Note:
A semicolon at the end of a line indicates where a statement ends;
it is only absolutely required when you need to separate statements on a

single line.
However, some people believe that it is a good practice to put them in at

the end of each statement
8/2/2017 10
Variables
Note:
You can name a variable nearly anything, but there are some name
restrictions
Note:
JavaScript is case sensitive — firstName is a different variable to

firstname. If you are getting problems in your code, check the casing!
8/2/2017 11
Variables
 After declaring a variable, you can give it a value.
 firstname = ‘bob’;
 You can do both these operations on the same line if you wish
 var firstname = ‘bob’;
 You can retrieve the value by just calling the variable by name
 firstname;
 After giving a variable a value, you can later choose to change it
 var firstname = 'Bob';
 firstname = 'Steve';
8/2/2017 12
Variables – Data Types
Type Description Example
String A sequence of text known as string. var title = ‘JavaScript’
Enclosed with single or double
quotes.
Number A number. Should not enclose within var score = 92;

single or double quotes.
Boolean A true or false value. var isValid = true;
Array A structure that allows to store var evenNumbers =

multiple values in one reference [2,4,6,8];
Object Basically anything. Everything in JS

is an object.
Undefined The type of the value in an var myVariable;

8/2/2017
13
unitialized variable
Variables – Data Types
 The typeof operator is used to identify the type of the variable at any
point of time.
var myVariable;
typeof myVariable will return undefined now.
myVariable = 5;
typeof myVariable will return Number.
8/2/2017 14
Variables
 Converting Variables to Numbers
var x = 50.55;
Number(x) -> returns 50.33
parseInt(x) -> returns 50
parseFloat(x) -> 50.33
8/2/2017 15
Variables
 Converting Variables to Numbers
There are 3 JavaScript methods that can be used to convert
variables to numbers:
Method Description
Number() Returns a number, converted from its argument.
parseFloat() Parses its argument and returns a floating point

number
parseInt() Parses its argument and returns an integer
8/2/2017 16
Variables
 Working with Dates
The Date object lets you work with dates (years, months, days,
hours, minutes, seconds, and milliseconds).
 A JavaScript date can be written as a string:
Tue Aug 01 2017 05:45:04 GMT+0530 (India Standard Time)
or as a number:
1501546504478
 Dates written as numbers, specifies the number of milliseconds since

January 1, 1970, 00:00:00
8/2/2017 17
Variables
 Creating Date Objects
The Date constructor is used to create dates.
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
8/2/2017 18
Variables
 Date Methods
Method Description
getDate() Get the day as a number (1-31)
getDay() Get the weekday as a number (0-6)
getFullYear() Get the four digit year (yyyy)
getHours() Get the hour (0-23)

getMilliseconds() Get the milliseconds (0-999)
getMinutes() Get the minutes (0-59)

getMonth() Get the month (0-11)
getSeconds() Get the seconds (0-59)
getTime() Get the time (milliseconds since January 1, 1970)
8/2/2017 19
The alert box
 The alert box is used to display a popup message to the users.
alert("I am message displayed in alert box!");
(or)
window.alert("I am message displayed in alert box!");
8/2/2017 20
The 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.
 window.prompt(“message","defaultValue");
var firstNumber = prompt(‘Please enter the first number’,’10’);
8/2/2017 21
Adding Comments
 Comments are for the reference of the developers to understand the
code being written. In JS we have 2 ways to add comments.
 Comments will not be executed by the browser.
 Single Line Comments
// This line is a comment
 Multi Line Comments
/*
All these are comments.
I am another line in the comment.
*/
8/2/2017 22
Operators
 An operator is a valid symbol, which produces a new value based on a
value (or) values.
 Arithmetic Operators
Operator Example Same 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
8/2/2017 23
Operators
 Assignment Operators
Operator Example Same 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
8/2/2017 24
Operators
 Comparison 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
8/2/2017 25
? ternary operator
Operators
 Logical Operators
&& logical and
|| logical or
! logical not
8/2/2017 26
Operators
 JS Type Operators
typeof Returns the type of a variable
instanceof Returns true if an object is an instance

of an object type
8/2/2017 27
Conditionals
 In any programming language, code needs to make decisions and
carry out actions accordingly depending on different inputs.
 if ... else statements
8/2/2017 28
Conditionals
 if ... else statements – explanation
 The keyword if followed by some parentheses.
A condition to test, placed inside the parentheses . This condition will

make use of the comparison operators we discussed in the last module,
and will return true or false.
A set of curly braces, inside which we have some code — this can be any
code we like, and will only be run if the condition returns true.
 The keyword else.
Another set of curly braces, inside which we have some more code — this
can be any code we like, and will only be run if the condition is not true.
8/2/2017 29
Conditionals
 if ... else statements – example
8/2/2017 30
Conditionals
 if ... else statements – example
8/2/2017 31
Conditionals
 switch statement
They take a single expression/value as an input, and then look through a
number of choices until they find one that matches that value, executing
the corresponding code that goes along with it.
8/2/2017 32
Conditionals
8/2/2017 33
Conditionals
8/2/2017 34
Looping
 Loops can execute a block of code a number of times.
 A counter, which is initialized with a certain value — this is the

starting point of the loop.
 An exit condition, which is the criteria under which the loop stops —
usually the counter reaching a certain value.
 An iterator, which generally increments the counter by a small

amount on each successive loop, until it reaches the exit condition.
8/2/2017 35
Looping
 For loop
 for (statement 1; statement 2; statement 3) {
code block to be executed
}
8/2/2017 36
Looping
 while loop
 The while loop loops through a block of code as long as a specified

condition is true.
8/2/2017 37
Arrays
 JavaScript arrays are used to store multiple values in a single
variable.
 An array is a special variable, which can hold more than one value at
a time.
 Declaring arrays
var array_name = [item1, item2, ...];
 Example
var fruits = [“apple", “orange", “grapes"];
var fruit1 = fruits[0]; //Accessing the array element
var evenNumbers = new Array (0,2,4,6,8); 8/2/2017 38

Arrays
 Identifying the number of elements in an array
arrayname.length;
Example
var fruits = [“apple", “orange", “grapes"];
document.write(fruits.length); //will print 3
8/2/2017 39
Arrays
 Array Methods
 pop()
Removes the last element from the array.
returns the value that was "popped out“
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();
// Removes & returns the last element ("Mango") from fruits
8/2/2017 40
Arrays
 Array Methods
 push()
Adds a new element to an array (at the end).
Returns the new array length

var x = fruits.push("Kiwi"); // the value of x is 5
8/2/2017 41
Arrays
 Array Methods
 shift()
Shifting is equivalent to popping, working on the first element
instead of the last.
The shift() method removes the first array element and "shifts" all
other elements to a lower index

fruits.shift();
// Removes and returns "Banana"
8/2/2017 42
Arrays
 Array Methods
 unshift()
The unshift() method adds a new element to an array (at the

beginning), and "unshifts" older elements.

var x - fruits.unshift("Lemon");
// Adds a new element "Lemon" to fruits, and returns 5
8/2/2017 43
Arrays
 Array Methods
 sort()
The sort() method sorts an array alphabetically

fruits.sort();
 reverse()
The reverse() method reverses the elements in an array.
To sort the array in the descending order
fruits.sort();
fruits.reverse(); 8/2/2017 44
Functions
 JavaScript functions are defined with the function keyword.
 You can use a function declaration or a function expression.
 function functionName(parameters) {
code to be executed
}
Example
function multiply(x,y){
return x * y;
8/2/2017 45
Functions
 Function Expressions
A JavaScript function can also be defined using an expression.
A function expression can be stored in a variable:
var x = function (a, b) {return a * b};
var z = x(4, 3);
The function above is actually an anonymous function (a function
without a name)
8/2/2017 46
Exception Handling
 The try statement lets you test a block of code for errors.
 The catch statement lets you handle the error.
 The throw statement lets you create custom errors.
 The finally statement lets you execute code, after try and catch,
regardless of the result.
8/2/2017 47
DOCUMENT OBJECT MODEL - DOM
 With the HTML DOM, JavaScript can access and change all the
elements of an HTML document.
 When a web page is loaded, the browser creates
a Document Object Model of the page.
 The HTML DOM model is constructed as a tree of Objects
8/2/2017 48
8/2/2017 49
8/2/2017 50
 The document object represents your web page.
 If you want to access any element in an HTML page, you always start
with accessing the document object.
 Finding HTML Elements
Method Description
document.getElementById(id) Find an element by
element id
document.getElementsByTagName(na Find elements by tag
me) name
document.getElementsByClassName(na Find elements by class

me) name
8/2/2017 51
 Changing HTML Elements
Method Description
element.innerHTML = new html Change the inner HTML of an
content element
element.attribute = new value Change the attribute value of an
HTML element
element.setAttribute(attribute, Change the attribute value of an
value) HTML element
element.style.property = new style Change the style of an HTML
element
8/2/2017 52
 Adding and Removing Elements
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream
8/2/2017 53
 Adding Event Handlers
Method Description
document.getElementById(id).onclic Adding event handler code to an

k = function(){code} onclick event
8/2/2017 54
AJAX
 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background
 The core of AJAX is the XMLHttpRequest object.
var xhttp = new XMLHttpRequest();
8/2/2017 55
AJAX
8/2/2017 56
AJAX - Request
To send a request to a server, we use the open() and send() methods of
the XMLHttpRequest object.
xhttp.open("GET", “intro.txt", true);

xhttp.send();
Method Description
open(method, url, Specifies the type of request
async)
method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)
8/2/2017 57
AJAX - Response
The onreadystatechange Property
 The readyState property holds the status of the XMLHttpRequest.
 The onreadystatechange property defines a function to be executed

when the readyState changes.
 The status property and the statusText property holds the status of
the XMLHttpRequest object
8/2/2017 58
AJAX - Response
The onreadystatechange Property
Property Description
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"

403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

8/2/2017 59
Exercises
8/2/2017 60
Exercise 1
Write a JavaScript that creates a different variable for each of the
members of your group.
Use document.write to write a paragraph stating,
“Our group members are: “ and then each variable
(aka member name) being printed in the paragraph.
8/2/2017 61
Exercise 2
Add to the JavaScript a prompt that asks the user their weight in pounds.
It uses a second prompt and variable to ask the user to enter their height
in inches.
It uses a third variable (not prompted) to hold the user’s bmi, calculated
as follows: (weight multiplied by 703), divided by (height times height).
Use document.write to write out the user’s bmi.
8/2/2017 62
Exercise 3
Find an image of a rock, an image of paper, and an image of scissors.
Prompt the user to enter 0 for rock, 1 for paper, and 2 for scissors.
i. If the user entered 0, use document.write to write out the html to

display the image of arock.
ii. If the user entered 1, use document.write to write out the html to
display the image of paper
iii. If the user entered 2, use document.write to write out the html to
display the image of scissors.
8/2/2017 63
Exercise 4
Loan Calculator
8/2/2017 64
Exercise 5
Contacts Search
8/2/2017 65

Prepared by Muthulakshmi V

Uploaded by

Prepared by Muthulakshmi V

Uploaded by

Prepared by Muthulakshmi V

 Adds interactivity to the web page

 Examples are responses when buttons are pressed or data entered in

 Was created in 10 days in May 1995 by Brendan Eich, then working at

 Became an ECMA standard in 1997.

 ECMA-262 is the official name of the standard.

 ECMAScript is the official name of the language.

ECMAScript 6 is also called ECMAScript 2015.

ECMAScript 7 is also called ECMAScript 2016.

 ECMAScript 3 is fully supported in all browsers.

 ECMAScript 5 is fully supported in all modern browsers*.

 ECMAScript 6 is partially supported in all modern browsers.

 ECMAScript 7 is poorly supported in all browsers.

 This outputs the message in the browser window.

 You start by declaring a variable with the var keyword, followed by

A semicolon at the end of a line indicates where a statement ends;

it is only absolutely required when you need to separate statements on a

However, some people believe that it is a good practice to put them in at

JavaScript is case sensitive — firstName is a different variable to

 var firstname = ‘bob’;

 After giving a variable a value, you can later choose to change it

 var firstname = 'Bob';

Number A number. Should not enclose within var score = 92;

Boolean A true or false value. var isValid = true;

Array A structure that allows to store var evenNumbers =

Object Basically anything. Everything in JS

Undefined The type of the value in an var myVariable;

typeof myVariable will return undefined now.

typeof myVariable will return Number.

Number(x) -> returns 50.33

parseInt(x) -> returns 50

parseFloat(x) -> 50.33

There are 3 JavaScript methods that can be used to convert

Number() Returns a number, converted from its argument.

parseFloat() Parses its argument and returns a floating point

parseInt() Parses its argument and returns an integer

 A JavaScript date can be written as a string:

Tue Aug 01 2017 05:45:04 GMT+0530 (India Standard Time)

 Dates written as numbers, specifies the number of milliseconds since

The Date constructor is used to create dates.

getDay() Get the weekday as a number (0-6)

getFullYear() Get the four digit year (yyyy)

getHours() Get the hour (0-23)

getMinutes() Get the minutes (0-59)

alert("I am message displayed in alert box!");

window.alert("I am message displayed in alert box!");

var firstNumber = prompt(‘Please enter the first number’,’10’);

 Comments will not be executed by the browser.

 Single Line Comments

// This line is a comment

 Multi Line Comments

All these are comments.

I am another line in the comment.

Operator Example Same As

Operator Example Same As

&& logical and

typeof Returns the type of a variable

instanceof Returns true if an object is an instance

 if ... else statements

 The keyword if followed by some parentheses.

A condition to test, placed inside the parentheses . This condition will

 The keyword else.

They take a single expression/value as an input, and then look through a

the corresponding code that goes along with it.

 A counter, which is initialized with a certain value — this is the

 An iterator, which generally increments the counter by a small

 The while loop loops through a block of code as long as a specified

var array_name = [item1, item2, ...];

var fruits = [“apple", “orange", “grapes"];

var fruit1 = fruits[0]; //Accessing the array element

var evenNumbers = new Array (0,2,4,6,8); 8/2/2017 38

var fruits = [“apple", “orange", “grapes"];

document.write(fruits.length); //will print 3

Removes the last element from the array.

returns the value that was "popped out“

var fruits = ["Banana", "Orange", "Apple", "Mango"];