CSE4001 - Internet and Web Programming

Course Type: LTP Credits: 4

Prepared by
Dr Komarasamy G
Associate Professor (Grade-2)
School of Computing Science and Engineering
VIT Bhopal University

1
 Unit-3 Java Script and JQuery

JavaScript Basics – Functions – Arrays –

DOM - Built-in Objects – Regular
Expression - Event handling – Validation
– JSON Basics– JQuery Basics – plugins.

2
 DOM - Document Object Model
• The document object represents the whole html document.
• When html document is loaded in the browser, it becomes a
document object. It is the root element that represents the html
document. It has properties and methods. By the help of document
object, we can add dynamic content to our web page.
• As mentioned earlier, it is the object of window.
window.document
• Is same as
document

According to W3C - "The W3C Document Object Model (DOM) is a

platform and language-neutral interface that allows programs and
scripts to dynamically access and update the content, structure, and
style of a document.”

https://www.javatpoint.com/document-object-model

Unit-3 Java Script / Dr Komarasamy G 3

 DOM - Document Object Model
• Properties of document object
• Let's see the properties of document object that can be accessed and
modified by the document object.

Unit-3 Java Script / Dr Komarasamy G 4

 DOM - Document Object Model
• Methods of document object
• We can access and change the contents of document by its methods.
• The important methods of document object are as follows:

Method Description
write("string") writes the given string on the document.

writeln("string") writes the given string on the doucment with

newline character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name

value.
getElementsByTagName() returns all the elements having the given tag
name.
getElementsByClassName() returns all the elements having the given class
name.
Unit-3 Java Script / Dr Komarasamy G 5
 DOM - Document Object Model
• Accessing field value by document object
• In this example, we are going to get the value of input text by user.
• Here, we are using document.form1.name.value to get the value of
name field.
• Here, document is the root element that represents the html
document.
• form1 is the name of the form.
• name is the attribute name of the input text.
• value is the property, that returns the value of the input text.

Unit-3 Java Script / Dr Komarasamy G 6

 DOM - Document Object Model
• Let's see the simple example of document object that prints name with
welcome message.
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name); Output
}
</script>

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>

Unit-3 Java Script / Dr Komarasamy G 7

Java Script Built-in Objects

Unit-3 Java Script / Dr Komarasamy G 8

 Java Script Built-in Objects
• Built-in objects are not related to any Window or DOM object model.
• These objects are used for simple data processing in the JavaScript.
1. Math Object
• Math object is a built-in static object.
• It is used for performing complex math operations.
• Math Properties
Math Property Description
SQRT2 Returns square root of 2.
PI Returns Π value.
E\ Returns Euler's Constant.
LN2 Returns natural logarithm of 2.
LN10 Returns natural logarithm of 10.
LOG2E Returns base 2 logarithm of E.
LOG10E Returns 10 logarithm of E.

Unit-3 Java Script / Dr Komarasamy G 9

 Java Script Built-in Objects
• Math Methods

Methods Description
abs() Returns the absolute value of a number.
acos() Returns the arccosine (in radians) of a number.
ceil() Returns the smallest integer greater than or equal to a
number.
cos() Returns cosine of a number.
floor() Returns the largest integer less than or equal to a number.
log() Returns the natural logarithm (base E) of a number.
max() Returns the largest of zero or more numbers.
min() Returns the smallest of zero or more numbers.
pow() Returns base to the exponent power, that is base exponent.

Unit-3 Java Script / Dr Komarasamy G 10

 Java Script Built-in Objects
• Example: Simple Program on Math Object Methods
<html> Output
<head> ABS Test Value : 20
<title>Math Object Methods</title> ACOS Test Value : 3.141592653589793
</head> ASIN Test Value : 1.5707963267948966
ATAN Test Value : 0.4636476090008061
<body>
<script type="text/javascript">
var value = Math.abs(20);
document.write("ABS Test Value : " + value +"<br>");
var value = Math.acos(-1);
document.write("ACOS Test Value : " + value +"<br>");
var value = Math.asin(1);
document.write("ASIN Test Value : " + value +"<br>");
var value = Math.atan(.5);
document.write("ATAN Test Value : " + value +"<br>");
</script>
</body>
</html>
Unit-3 Java Script / Dr Komarasamy G 11
 Java Script Built-in Objects
• Example: Simple Program on Math Object Methods
<html>
<head> Output
E Value is :2.718281828459045
<title>Math Object Properties</title> LN2 Value is :0.6931471805599453
</head> LN10 Value is :2.302585092994046
<body> PI Value is :3.141592653589793
<script type="text/javascript">
var value1 = Math.E
document.write("E Value is :" + value1 + "<br>");
var value2 = Math.LN2
document.write("LN2 Value is :" + value2 + "<br>");
var value3 = Math.LN10
document.write("LN10 Value is :" + value3 + "<br>");
var value4 = Math.PI
document.write("PI Value is :" + value4 + "<br>");
</script>
</body>
</html>
Unit-3 Java Script / Dr Komarasamy G 12
 Java Script Built-in Objects
2. Date Object
• Date is a data type.
• Date object manipulates date and time.
• Date() constructor takes no arguments.
• Date object allows you to get and set the year, month, day, hour, minute,
second and millisecond fields.

• Syntax:
var variable_name = new Date();

Example:
var current_date = new Date();

Unit-3 Java Script / Dr Komarasamy G 13

Date Methods
Java Script Built-in Objects
Methods Description
Date() Returns current date and time.
getDate() Returns the day of the month.
getDay() Returns the day of the week.
getFullYear() Returns the year.
getHours() Returns the hour.
getMinutes() Returns the minutes.
getSeconds() Returns the seconds.
getMilliseconds() Returns the milliseconds.
getTime() Returns the number of milliseconds since January 1, 1970 at
12:00 AM.
getTimezoneOffset() Returns the timezone offset in minutes for the current locale.
getMonth() Returns the month.
setDate() Sets the day of the month.
setFullYear() Sets the full year.
setHours() Sets the hours.
setMinutes() Sets the minutes.
setSeconds() Sets the seconds.

Unit-3 Java Script / Dr Komarasamy G 14

Date Methods
Java Script Built-in Objects
Methods Description
setMilliseconds() Sets the milliseconds.
setTime() Sets the number of milliseconds since January 1, 1970 at 12:00
AM.
setMonth() Sets the month.
toDateString() Returns the date portion of the Date as a human-readable string.
toLocaleString() Returns the Date object as a string.
toGMTString() Returns the Date object as a string in GMT timezone.
valueOf() Returns the primitive value of a Date object.

Unit-3 Java Script / Dr Komarasamy G 15

 Java Script Built-in Objects

Example : JavaScript Date() Methods Program

<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");
document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>
</center>
</body>
</html>
Unit-3 Java Script / Dr Komarasamy G 16
 Java Script Built-in Objects
3. String Object
String objects are used to work with text.
It works with a series of characters.

Syntax:
var variable_name = new String(string);

Example:
var s = new String(string);

String Properties

Properties Description
length It returns the length of the string.
prototype It allows you to add properties and methods to an
object.
constructor It returns the reference to the String function that
created the object.
Unit-3 Java Script / Dr Komarasamy G 17
 Java Script Built-in Objects
String Methods
Methods Description
charAt() It returns the character at the specified index.
charCodeAt() It returns the ASCII code of the character at the specified
position.
concat() It combines the text of two strings and returns a new string.
indexOf() It returns the index within the calling String object.
match() It is used to match a regular expression against a string.
replace() It is used to replace the matched substring with a new
substring.
search() It executes the search for a match between a regular
expression.
slice() It extracts a session of a string and returns a new string.
split() It splits a string object into an array of strings by separating the
string into the substrings.
toLowerCase() It returns the calling string value converted lower case.
toUpperCase() Returns the calling string value converted to uppercase.
Unit-3 Java Script / Dr Komarasamy G 18
 Java Script Built-in Objects
Example : JavaScript String() Methods Program
<html>
<body>
<center>
<script type="text/javascript">
var str = "CareerRide Info";
var s = str.split();
document.write("<b>Char At:</b> " + str.charAt(1)+"<br>");
document.write("<b>CharCode At:</b> " + str.charCodeAt(2)+"<br>");
document.write("<b>Index of:</b> " + str.indexOf("ide")+"<br>");
document.write("<b>Lower Case:</b> " + str.toLowerCase()+"<br>");
document.write("<b>Upper Case:</b> " + str.toUpperCase()+"<br>");
</script>
<center>
</body>
</html>

Unit-3 Java Script / Dr Komarasamy G 19