DIWE - Programming with JavaScript

Diploma in Web Engineering
Module V: Programming with
JavaScript
Rasan Samarasinghe
ESOFT Computer Studies (pvt) Ltd.
No 68/1, Main Street, Pallegama, Embilipitiya.

Contents
1. Introduction to JavaScript
2. What JavaScript Can Do?
3. Script tag in HTML
4. Noscript tag in HTML
5. Your First JavaScript Program
6. JavaScript Placement in HTML File
7. JavaScript Syntax
8. JavaScript Data Types
9. JavaScript Variables
10. JavaScript Identifiers
11. Arithmetic Operators
12. String Concatenation Operators
13. Assignment Operators
14. Comparison Operators
15. Logical Operators
16. Bitwise Operators
17. If Statement
18. If… Else Statement
19. If… Else if… Else Statement
20. Switch Statement
21. The ? Operator
22. While Loop
23. Do While Loop
24. For Loop
25. For…in Loop
26. break Statement
27. continue Statement
28. Arrays
29. Functions
30. JavaScript Objects
31. JavaScript Scope
32. Strings
33. Regular Expressions
34. JavaScript Numbers
35. Math Object
36. Date and Time
37. JavaScript Events
38. Dialog Boxes
39. Error Handling in JavaScript
40. JavaScript Forms Validation
41. JavaScript HTML DOM
42. JavaScript BOM

Introduction to JavaScript
• A dynamic programming
language widely used to create
interactive web pages.
• Originally developed by Brendan
Eich at Netscape Corporation.
• Open and cross platform.

What JavaScript Can Do?
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attributes
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Validate Data

Script tag in HTML
<script language="javascript" type="text/javascript">
JavaScript code
</script>

Noscript tag in HTML
<noscript>
If you see this message means your browser does
not support with JavaScript
</noscript>

Your First JavaScript Program
<html>
<body>
<script language="javascript“ type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

JavaScript Placement in HTML File
• JavaScript in <head>
• JavaScript in <body>
• External JavaScript

JavaScript in <head>
<html>
<head>
</script>
</head>
<body>
</body>
</html>

JavaScript in <body>
<html>
<head>
</head>
<body>
</script>
</body>
</html>

External JavaScript
<html>
<head>
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript Syntax
Whitespaces
JavaScript ignores spaces, tabs, and newlines that
appear between tokens in JavaScript programs.

JavaScript Syntax
Semicolons are Optional
var1 = 10
var2 = 20
But when formatted in a single line as follows, the
semicolons are required
var1 = 10; var2 = 20;

JavaScript Syntax
Case Sensitivity
JavaScript is a case-sensitive language
Identifiers Time, TIme and TIME will have different
meanings in JavaScript.

JavaScript Syntax
Comments in JavaScript
// this is a single line comment
/* this is a multiline comment */

JavaScript Data Types
There are three primitive data types:
• Numbers
• Strings of text
• Boolean

JavaScript Variables
Variables are temporary memory locations and they
can hold values.

JavaScript Variables
var score = 234;
var city = ”Colombo”;
var validity = true;

Declaring (Creating) JavaScript Variables
var firstName;
After the declaration, the variable is empty
Assign a value to the variable, use the equal sign
firstName = “Roshan”;
You can also assign a value to the variable when you declare
it
var lastName = “Ranasinghe”;

Re-Declaring JavaScript Variables
If you re-declare a JavaScript variable, it will not
lose its value.
var firstName = “Nuwan”;
var firstName;

JavaScript Identifiers
Identifiers are unique names given for naming
variables, functions and other user defined items
• Identifiers can contain letters, digits, underscores,
and dollar signs.
• Identifiers must begin with a letter.
• Identifiers cannot begin with a number.
• Identifiers are case sensitive.
• Keywords cannot be used as Identifiers.

Keywords in JavaScript
Keywords cannot be used as variables, functions or any
object names.

Arithmetic Operators
Operator Description Example
+ Addition A + B will give 30
- Subtraction A - B will give -10
* Multiplication A * B will give 200
/ Division B / A will give 2
% Modulus B % A will give 0
++ Increment B++ gives 21
-- Decrement B-- gives 19
A = 10, B = 20

String Concatenation Operators
Operator Name Example
+ Concatenation
$str1 = "Hello"
$str2 = $txt1 + " world!"
+=
Concatenation
assignment
$str1 = "Hello"
$str1 += " world!"

Assignment Operators
Operator Example
= C = A + B will assign value of A + B into C
+= C += A is equivalent to C = C + A
-= C -= A is equivalent to C = C - A
*= C *= A is equivalent to C = C * A
/= C /= A is equivalent to C = C / A
%= C %= A is equivalent to C = C % A

Comparison Operators
== Equal (A == B) is false.
!= Not equal (A != B) is true.
> Greater than (A > B) is false.
< Less than (A < B) is true.
>= Greater than or equal (A >= B) is false.
<= Less than or equal (A <= B) is true.
A = 10, B = 20

Logical Operators
&& And (A && B) is False
|| Or (A || B) is True
! Not !(A && B) is True
A = True, B = False

Bitwise Operators
& Bitwise AND (A & B) is 2
| Bitwise OR (A | B) is 3
^ Bitwise XOR (A ^ B) is 1
~ Bitwise NOT (~B) is -4
<< Bitwise Shift Left (A << 1) is 4
>> Bitwise Shift Right (A >> 1) is 1
>>> Bitwise Shift Right with Sign (A >>> 1) is 1
A = 2, B = 3

If Statement
if(Boolean_expression){
//Statements will execute if the
Boolean expression is true
}
Boolean
Expression
Statements
True
False

If… Else Statement
if(Boolean_expression){
//Executes when the Boolean expression
is true
}else{
//Executes when the Boolean
expression is false
}
Boolean
Expression
Statements
True
False
Statements

If… Else if… Else Statement
if(Boolean_expression 1){
//Executes when the Boolean expression 1 is true
}else if(Boolean_expression 2){
}else if(Boolean_expression 3){
}else {
//Executes when the none of the above condition is
true.
}

If… Else if… Else Statement
Boolean
expression 1
False
Statements
Boolean
expression 2
Boolean
expression 3
Statements
Statements
False
False
Statements
True
True
True

Switch Statement
switch (value){
case constant:
//statements
break;
case constant:
//statements
break;
default:
//statements
}

The ? Operator
If condition is true ? Then Value one : Otherwise Value two
var h = 10;
var x = h<12 ? "morning" : "afternoon";

While Loop
while(Boolean_expression){
//Statements
}
Boolean
Expression
Statements
True
False

Do While Loop
do{
//Statements
}while(Boolean_expression);
Boolean
Expression
Statements
True
False

For Loop
for(initialization; Boolean_expression; update){
//Statements
}
Boolean
Expression
Statements
True
False
Update
Initialization

For…in Loop
for(Variablename in Object){
//Statements
}

break Statement
Boolean
Expression
Statements
True
False
break

continue Statement
Boolean
Expression
Statements
True
False
continue

Arrays
An Array object allowing you to store multiple
values in a single location.
10 30 20 50 15 35
0 1 2 3 4 5
Size = 6
Element Index No
A single dimensional array

Creating An Array
Using keyword new
var fruits = new Array( "apple", "orange", "mango" );
var points = new Array();
Using an array literal
var fruits = ["apple", "orange", "mango"];
var points = [];

Access the Elements of an Array
Accesses the value of the first element in fruits
var name = fruits[0];
Modifies the first element in cars
fruits[0] = “Pineapple";
(You can have objects, functions and arrays in an array)

Array Properties and Methods
The length property returns the number of
elements in array
var x = fruits.length;
The sort() method sort array in alphabetical order
var y = fruits.sort();

Functions
• A function is a block of code designed to perform
a particular task.
• A function is executed when "something" invokes
it (calls it).

Function Syntax
function functionname(parameter-list) {
statements
}

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 Return
When JavaScript reaches a return statement, the
function will stop executing and the return value is
"returned" back to the "caller“
function getSum(a, b) {
return a + b;
}
var sum = getSum(100,200);

Invoking the Function Definition
function getSum(x, y, z) {
return x+y+z;
}
var def = getSum;

JavaScript Objects
An object has properties and methods.
Ex:
• A car has properties like model and color, and
methods like drive and stop.
• All cars have the same properties, but the property
values differ from car to car.
• All cars have the same methods, but the methods are
performed at different times.

Object Properties
var car = { VID:4565, model:”Toyota”, color:”white”};
var student = {
ID : 4435,
name : “Nuwan”,
city : “Kandy”
};

Accessing Object Properties
objectName.propertyName
or
objectName[“propertyName”]
car.model;
car[“model”];

Object Methods
var car = {
VID: 4565,
model : “Toyota”,
color : “Red”,
drive : function() {
document.write(“car is driving”);
}
};

Invoking an Object Method
car.drive();

Object Methods with return value
var student = {
ID: 4565,
name : “Roshan”,
city : “colombo”,
getName : function() {
return this.name;
}
};

Invoking an Object return value
var name = student.getName();

JavaScript Scope
• Global Scope
• Local Scope

Global Scope
• A variable declared outside a function, becomes
global.
• Global variables are visible to everywhere in the
program.
• If you assign a value to a variable that has not been
declared, it will automatically become a global
variable.

Local Scope
• Variables declared within a function, become local
to the function.
• They can only be accessed within the function.
• Function parameters work as local variables inside
functions.

Strings
Strings are used for storing and manipulating text.
Ex:
“Hello World!”
‘No 25, Main Street, Embilipitiya’
‘It’s Alright’
“He said “hello world!””
"i'm Rasan"

String Methods
Method Description
indexOf(str) returns the index of (the position of) the first occurrence of a specified text in a
string
lastIndexOf(str) returns the index of the last occurrence of a specified text in a string
search(str) searches a string for a specified value and returns the position of the match
slice(start, end) extracts a part of a string and returns the extracted part in a new string
substring(start, end) similar to slice(). The difference is that substring() cannot accept negative
indexes
substr(start, end) similar to slice(). The difference is that the second parameter specifies the
length of the extracted part.
replace(str, str) replaces a specified value with another value in a string
toUpperCase() string is converted to upper case
toLowerCase() string is converted to lower case
concat(str) joins two or more strings
charAt(i) returns the character at a specified index (position) in a string
split(str) string can be converted to an array
trim() Removes whitespace from both ends of a string

Regular Expressions
A regular expression is a sequence of characters
that forms a search pattern.
Syntax
/pattern/modifiers;
Example:
var patt = /hello/i

Regular Expression Modifiers
Modifier Description
i Perform case-insensitive matching
g
Perform a global match (find all matches rather than
stopping after the first match)
m Perform multiline matching

Regular Expression Patterns
Pattern Description
[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
[^abc] Find any character NOT between the brackets
(ab|xyz) Find any of the alternatives separated with |
d Find a digit
s Find a whitespace character
b Find a match at the beginning or at the end of a word
. Find a single character, except newline or line terminator
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
^n Matches any string with n at the beginning of it
n$ Matches any string with n at the end of it

JavaScript Numbers
• JavaScript Numbers are Always 64-bit Floating
Point
• JavaScript numbers can be written with, or
without decimals
Value (Fraction/Mantissa) Exponent Sign
52 bits (0 - 51) 11 bits (52 - 62) 1 bit (63)

JavaScript Numbers
var a = 34.00; // A number with decimals
var b = 34; // A number without decimals
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
var x = 0xFF; // x will be 255 (hexadecimal)

JavaScript Numbers
Infinity
Infinity (or -Infinity) is the value JavaScript will
return if you calculate a number outside the largest
possible number.
NaN - Not a Number
NaN is a JavaScript reserved word indicating that a
value is not a number.

Number Methods
Method Description
Number(arg) Returns a number, converted from its argument.
parseFloat(arg) Parses its argument and returns a floating point number
parseInt(arg) Parses its argument and returns an integer
Method Description
toString() Returns a number as a string
toExponential()
Returns a string, with a number rounded and written using exponential
notation.
toFixed(n)
Returns a string, with a number rounded and written with a specified
number of decimals.
toPrecision(n) Returns a string, with a number written with a specified length
valueOf() Returns a number as a number
Global Methods
Number Methods

Math Object
Method Description
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
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)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle

Date and Time
The Date object lets you work with dates (years,
months, days, hours, minutes, seconds, and
milliseconds)
To display current date:
document.write(Date());

Creating Date Objects
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes,
seconds, milliseconds)

Date Get 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)
toLocaleDateString() Returns the "date" portion of the Date as a string
toLocaleTimeString() Returns the "time" portion of the Date as a string

Date Set Methods
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)

JavaScript Events
• HTML events are things that happen to HTML
elements.
• When JavaScript is used in HTML pages, JavaScript
can react on these events.

HTML Events
An HTML event can be something the browser
does, or something a user does.
• An HTML web page has finished loading
• An HTML button was clicked
• An HTML input field was changed
and many more…

HTML event handler attributes
<element event=“some JavaScript”>
Single quotes also works fine
<element event=‘some JavaScript’>

Common HTML Events
Event Description
onchange
occurs when the content of a form element, the selection, or
the checked state have changed
onclick occurs when the user clicks on an element
onmouseover
occurs when the pointer is moved onto an element, or onto
one of its children
onmouseout
occurs when a user moves the mouse pointer out of an
element, or out of one of its children
onkeydown occurs when the user is pressing a key
onload occurs when an object has loaded

Dialog Boxes
• Alert Dialog Box
• Confirmation Dialog Box
• Prompt Dialog Box

Alert Dialog Box
alert("Warning Message");

Confirmation Dialog Box
var retVal = confirm("Do you want to continue ?");

Prompt Dialog Box
var retVal = prompt("Enter your name : ", "your
name here");

Error Handling in JavaScript
• onerror() Method
• try...catch...finally Statement

The onerror() Method
Whenever an exception occurs on the page the
onerror event is fired.
window.onerror = function () {
alert("An error occurred.");
}
testFunc(); //a function which not existing

The try...catch...finally Statement
You can catch runtime exceptions by try...catch...finally
Statement.
try {
alert("Value of variable a is : " + a );
}catch ( e ) {
alert("Error: " + e.description );
}finally {
alert("Finally block will always execute!" );
}

JavaScript Forms Validation
• Data validation is the process of ensuring that
computer input is clean, correct, and useful.
• HTML form validation can be done by JavaScript.
• JavaScript validation is a client side validation
which is performed by a web browser before
input is sent to the web server.

JavaScript Function
If fname is empty, this function alerts a message and
returns false, to prevent the form from being
submitted.
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
return true;
}

HTML Form
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Validating a ZIP Code
function validateZIP() {
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
return true;
}

Validating an Email Field
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return true;
}

JavaScript HTML DOM
A. JavaScript HTML DOM
B. Finding HTML Elements
C. Changing HTML Elements
D. Adding and Deleting Elements
E. Adding Events Handlers
F. HTML DOM Level 3

JavaScript HTML DOM
With the HTML DOM (Document Object Model),
JavaScript can access and change all the elements
of an HTML document.

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

Adding and Deleting Elements
Method Description
document.createElement(“elem”) Create an HTML element
parent.appendChild(obj) Add an HTML element
parent.removeChild(obj) Remove an HTML element
parent.replaceChild(ob1, ob2) Replace an HTML element (ob2 with ob1)
document.write(text) Write into the HTML output stream

Adding Events Handlers
Method Description
document.getElementById(id).onclick
=function(){code}
Adding event handler code to an
onclick event

Finding HTML Objects in HTML (DOM Level 3)
Property Description
document.anchors Returns all <a> elements that have a name attribute
document.body Returns the <body> element
document.doctype Returns the document's doctype
document.documentElement Returns the <html> element
document.domain Returns the domain name of the document server
document.forms Returns all <form> elements
document.head Returns the <head> element
document.images Returns all <img> elements
document.links
Returns all <area> and <a> elements that have a href
attribute
document.title Returns the <title> element
document.URL Returns the complete URL of the document

JavaScript BOM
A. JavaScript BOM
B. Window Object
C. Window Screen
D. Window Location
E. History
F. Window Navigator
G. Timing Events
H. Cookies

JavaScript BOM (Browser Object Model)
The Browser Object Model allows JavaScript to "talk
to" the browser.

Window Object
window.innerHeight the inner height of the browser window
window.innerWidth the inner width of the browser window
Method Description
window.open() open a new window
window.close() close the current window
window.moveTo() move the current window
window.resizeTo() resize the current window

Window Screen
screen.width returns the width of the visitor's screen in pixels.
screen.height returns the height of the visitor's screen in pixels.
screen.availWidth returns the width of the visitor's screen, in pixels, minus
interface features like the Windows Taskbar.
screen.availHeight returns the height of the visitor's screen, in pixels, minus
interface features like the Windows Taskbar.
screen.colorDepth returns the number of bits used to display one color.
screen.pixelDepth returns the pixel depth of the screen.

Window Location
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://)
Method Description
window.location.assign() loads a new document

History
Method Description
history.back() same as clicking back in the browser
history.forward() same as clicking forward in the browser

Window Navigator
navigator.cookieEnabled returns true if cookies are enabled, otherwise false
navigator.appName return the name of the browser
navigator.appCodeName return the name of the browser
navigator.product returns the engine name of the browser
navigator.appVersion returns version information about the browser
navigator.userAgent returns version information about the browser
navigator.platform returns the browser platform (operating system)
navigator.language returns the browser's language
navigator.javaEnabled() returns true if Java is enabled

Timing Events
Method Description
window.setInterval("javascript
function", milliseconds)
executes a function, over and over
again at specified time intervals
window.clearInterval(timeoutVariable) stop further executions of the
function specified in the
setInterval() method
window.setTimeout("javascript
function", milliseconds)
executes a function, once, after
waiting a specified number of
milliseconds
window.clearTimeout(timeoutVariable) stop further executions of the
function specified in the
setTimeout() method

Cookies
Create a Cookie with JavaScript
document.cookie="username=Nuwan Perera";
document.cookie="username=Nuwan Perera;
expires=Thu, 18 Dec 2015 12:00:00 UTC"; //with an
expiry date

Cookies
Read a Cookie with JavaScript
var x = document.cookie;
document.cookie will return all cookies in one
string much like:
cookie1=value; cookie2=value; cookie3=value;

Cookies
Delete a Cookie with JavaScript
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";

The End
http://twitter.com/rasansmn

DIWE - Programming with JavaScript

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to DIWE - Programming with JavaScript (20)

More from Rasan Samarasinghe (20)

Recently uploaded (20)

DIWE - Programming with JavaScript

Editor's Notes