For...

In Statement
 The code in the body of the for...in loop is executed once for each
property.
for (variable in object)
{
code to be executed
}
var person={fname:"John",lname:"Doe",age:25}; //object creation
var x;
for (x in person)
{
document.write(person[x] + " "); // John Doe 25
}
46 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023
 Date object
 new Date( )
 new Date(milliseconds)
 new Date(datestring)
var dt = new Date("December 25, 1995 23:15:00");
 new Date(year,month,date,hour,minute,second,millisecond )

47 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
 Date Object
 The Date object is used to work with dates and times.
 var d = new Date();
 getDate()  Returns the day of the month (from 1-31)
 getDay()  Returns the day of the week (from 0-6)
 getYear()Returns the year (four digits)
 getHours()Returns the hour (from 0-23)
 getMinutes()Returns the minutes (from 0-59)
 getMonth()Returns the month (from 0-11)
 getSeconds()Returns the seconds (from 0-59)
 getTime()  Returns the number of milliseconds since midnight Jan 1,
1970
48 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023
 Date object methods
 getFullYear() Returns the year of the specified date according to
local time.
 getMilliseconds()
 toDateString() Returns the "date" portion of the Date as a human-
readable string.
 toLocaleDateString() Returns the "date" portion of the Date as a
string, using the current locale's conventions (OS)
 toLocaleString() Converts a date to a string, using the current
locale's conventions

49 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
 Special Characters
 In JavaScript you can add special characters to a text string by using the
backslash sign.
 \'  single quote
 \"  double quote
 \\  backslash
 \n  new line
 \t  tab

50 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023

 Browser Hierarchy Model
window

document frame location history

anchor image form link

button checkbox

radio select

reset textarea

text submit

51 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 Object or Description
collection
Objects
window Represents the browser window and provides access to the
document object contained in the window. Also contains
history and location objects.
document Represents the XHTML document rendered in a window. The
document object provides access to every element in the
XHTML document and allows dynamic modification of the
XHTML document. Contains several collections for accessing
all elements of a given type.
body Provides access to the body element of an XHTML document.
history Keeps track of the sites visited by the browser user. The object
provides a script programmer with the ability to move forward
and backward through the visited sites.
location Contains the URL of the rendered document. When this object
is set to a new URL, the browser immediately navigates to the
new location.

52 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 Object or Description
collection
Collections
anchors Collection contains all the anchor elements (a) that have a name
or id attribute. The elements appear in the collection in the
order in which they were defined in the XHTML document.
forms Contains all the form elements in the XHTML document. The
elements appear in the collection in the order in which they were
defined in the XHTML document.
images Contains all the img elements in the XHTML document. The
elements appear in the collection in the order in which they were
defined in the XHTML document.
links Contains all the anchor elements (a) with an href property.
The elements appear in the collection in the order in which they
were defined in the XHTML document.

53 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 HTML DOM Objects
 Document  Image
 Meta
 Events  Button
 Elements  Checkbox  Object

 Anchor  File  Option

 Area  Hidden  Select
 Base  Password  Style
 Body  Radio  Table
 Button  Reset  Td / Th
 Form  Submit  Tr
 Frame  Text
 Textarea
 Frameset  Link

54 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023

 The “window” object
 It is the highest-level object in the browser object hierarchy.
 It is the default object and is created automatically when a page is
loaded.
 Since it is the default object, we may omit writing window
explicitly.
 document.write(“a test message”);
 window.document.write(“a test message”);

 It also includes several properties and methods for us to

manipulate the webpage.

55 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 Properties and methods of the “window”
Object

 setInterval(expre,time)
 confirm()prompt()
56 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023
 Document Object
 Each HTML document loaded into a browser window becomes a
Document object.
 The Document object provides access to all HTML elements in a page,
from within a script.
 The Document object is also part of the Window object, and can be
accessed through the window.document property.

57 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023

 The “document” Object
 It is one of the important objects in any window or frame.
 The document object represents a web document or a page in a
browser window.
 When you access multiple sites simultaneously, there would be
multiple windows opened.
 Each window would have a corresponding window object, and each
window object would have its own document object.

58 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 Properties and methods of the “document”
Object

 alert(),prompt(),confirm()
 setTimeout(expression/function,millisec)
 setInterval(expression/function,millisec)

59 R.Vijayan/ AP(SG) / SITE / VIT University 2/4/2023

 Document Object Properties
 cookie  Returns all name/value pairs of cookies in the document
 documentMode  Returns the mode used by the browser to render the
document
 documentElementReturns the <html> element
 headReturns the <head> element
 bodyReturns the <body> element
 embedsReturns the <embed> element
 scriptsReturns the <script> element
 domain  Returns the domain name of the server that loaded the document
 lastModified  Returns the date and time the document was last modified
 readyState  Returns the (loading) status of the document
 referrer  Returns the URL of the document that loaded the current
document
 title  Sets or returns the title of the document
 URL  Returns the full URL of the document

60 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023

 Document Object Properties Collections
 document.anchors  Returns an array of all the anchors in the
document
 document.forms  Returns an array of all the forms in the
document
 document.images  Returns an array of all the images in the
document
 document.links Returns an array of all the links in the document

61 R.Vijayan/ AP(SG) / SITE / VIT University 4 February 2023

 Document Object Methods
 close()  Closes the output stream previously opened with
document.open()
 getElementById()  Accesses the first element with the specified id
 getElementsByName()  Accesses all elements with a specified name
 getElementsByTagName()  Accesses all elements with a specified tagname
 getElementsByClassName(name)Find elements by class name
 open()  Opens an output stream to collect the output from
document.write() or document.writeln()
 write()  Writes HTML expressions or JavaScript code to a document
 writeln()  Same as write(), but adds a newline character after each
statement

62 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
 Changing HTML elements

63 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
 Adding and Deleting elements

64 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
document.write("The title of this document is: " + document.title+"<br>");
document.write(document.head+"<br>");
document.write(document.body+"<br>");
document.write(document.documentElement+"<br>");
document.write(document.images.length+"<br>");
document.write(document.anchors.length+"<br>");

var myElement = document.getElementById("intro");

document.getElementById("demo").innerHTML =
"The text from the intro paragraph is " + myElement.innerHTML;

var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"The first paragraph (index 0) is: " + x[0].innerHTML;

var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
"The first paragraph (index 0) with class=intro: "+ x[0].innerHTML;

65 R.Vijayan/ AP(SG) / SITE / VIT University

4 February 2023
 querySelector()
 The querySelector() method returns the first element that matches a
CSS selector.
 To return all matches (not only the first), use
the querySelectorAll() instead.

document.querySelector("p").style.backgroundColor = "red";
document.querySelector("h3, h4").style.backgroundColor = "red";
document.querySelector("a[target]");

66 R.Vijayan/ Asso Prof / SITE / VIT 4 February 2023

 querySelectorAll()
 The querySelector() method returns the first element that matches a CSS selector.
 To return all matches (not only the first), use the querySelectorAll() instead.
document.querySelectorAll(CSS selectors)
document.querySelectorAll(".example");
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

67 R.Vijayan/ Asso Prof / SITE / VIT 4 February 2023