- Clear cookie example
containing any element reference. We can handle the properties of element by
having once the element's reference. In this example we have to show the use of innerHTML
attribute property with getElementById() method.
style attribute over any element by using the method getElementById().
We can add rows to the table by adding a pair of <TR></TR>
tags. If we want to add row to a table dynamically then we can also do this with
dynamically to the table by the program.
When any text box, text area or select box looses its focus then the blur event
To explain this onBlur event handler, we have created a simple example here which will provide you the clear
understanding of blur event.
The modification of HTML code is quite simple. Now to modify the link's text,
we have created a link that dynamically changes when you pass the mouse pointer
In the given example we are going to show an image on clicking the checkbox.
used to get
the value of the particular element by their id.
example below, we have created a text area element containing some text.
In the given example, we have created the instance
of Date to show the time. Here we have created a condition that if the number of
minutes, seconds or hours is less than 9, then it will add 0 in front of min,
sec or hour value like 09 in the timer and it will add AM or PM according to the
A cookie is a temporary file that contains the visitor's information on the
particular web page. In the given example we have created a cookie that stores
the name of a visitor for 1 day.
returns the time (in
milliseconds) elapsed from 1st January, 1970 to the current Date instance. In the given example, firstly we have created two instances
of Date to set two dates i.e current date and the date specified.
duplicate method. In this example code we have called the duplicate method on
the text range object to create a duplicate copy of that text and then it will
be displayed through the alert() method.
forms. For this purpose, we have created an example which shows how you can
validate an email address for a form.
of fields in the web page. You can automatically transfer the focus to any other
input field in the page.
HREF value of the link. We can achieve this in two ways :
We have discussed in our previous examples the use of getAttribute()
to get the example of getAttribute() method.
the DOM (Document Object Model) scripting.
We can also use document.getElementById() method with the IFrame. In this example we have created an html
page into which we have one IFrame window which takes another HTML page.
We can use document.getElementById() over the <select>
tag to perform any operation with the selected value as a option. We will be
describing you here to use getElementById with select by using a very
example which gets the data from the excel file with the cell and row index
In the given example, we have created a button. The document object grabs the
button and refers to property 'visibility' with style object. The 'visibility'
property makes the element visible or invisible.
In the given example, we have created a div element using <div>
tag. The method document.getElementById('div') grabs the text of the div
element and refer to property 'visibility' with style object.
In the given example, we have defined an image using <img> tag inside
the <div> tag. The method document.getElementById('div') grabs the id of
the div element and refer to property 'visibility' with style object.
In the given example, we have created a table consisting of four columns.
Here we allow the user to enter the column number they want to hide.
In the given example, we have created a table. The method getElementById()
of document object grabs the id of the table.
In the given example, we are going to show you how to display the text of
textField1 on the text field2 on key up. For this purpose, we have
created two text fields text1 and text2.
value of the link. Here we have used this property with the document.links.
To invoke this property from the function,
the current browser window using location property of the window object. One of
them is location.href which redirects the user straightforward to the specified
In the following code, we have defined a div element consisting of text 'Hello
World' in order to move it on the browser.
In the given example, firstly we have created an ActiveXObject object which is
used to enable and return a reference to an Automation object.
In the following code, we have defined an image 'node.jpg' in order to move it
browser. For this, we have used onClick event handler to specify what should
happen when the mouse is clicked on the window.
provides several methods for this purpose.
In this section, you will learn how to navigate from
pages navigatePage.html and page.html.
navigate to the various locations. Here we are using the 'href' property of
location object for this purpose.
In this section, we are going to find the location of substring using the
from the string object, it returns the index of the position where the specified
string first occurs in a string.
In the given example, we are going to show you how to restrict the user to
enter any number into the input field. For this purpose, we have created a
You can see in the given example, we have created a file component to let the user select the file to
be read and a button to submit the request.
To open a new window with a link within the web page, we have used the
the new window, we have used some attributes like scrollbars, width, height,
left, top etc.
As we have already discussed about the window.open() method of Window
object which is used to open a new window.
As we know that window.location object that contains the current URL information. In the given code the
document.forms.url.value gets the entered URL and used this object to open the entered URL.
and returns the equivalent number of milliseconds elapsed since 1 Jan 1970.
HTML element. Here we are going to remove a div element.
To remove the focus from the window, we have used blur() method of
the Window object. It removes the focus from a window and moves it behind other
join(). Now to use these methods, we have defined a string. Firstly the
split(" ") method splits the string into an array of strings.
In the given example, we have created a function reverse() which is called by
the button "Reverse". In the reverse() function, we have created two
variables 'text' and 'str'.
You can see in the given example, we have created Date object which holds the
current date and time. Now, in order to display the date,
In the given example, we have created a table. The method document.getElementById('div')
grabs the id of the table and refer to property 'visibility' with style object.
To display a series of images in an automated slide show, we have created five
instances of the image object referring their images.
You can see in the given example, we have created an unordered list using the
<li>with <ul> html tag. The method document.getElementById()
defined in the function grabs the id of the list and stores it into the variable listItem which
uses the length property to get all the list elements.
In sort.js file, we have created a for
loop which iterates through the rows of the table in the function sortTable() and populates the
array 'columns' with the contents of selected column. Then, we created for loop
to loop through the array 'column' and copy the array columns[i] to array[i]. The method
columns.sort() sorts the column items.
You can see in the given example, we have defined a string and used the
from the defined string.
Where numberObject is the number at which we will apply toFixed() method and
digitsAfterDecimalPosition are the number of post decimal digits for precision.
GMT( Greenwich Mean Time ) and returns the converted string.
internally not explicitly but we can use toSource() method for debugging
into the string object. If we want to convert an object from one format into
String format then it is very useful.
The <iframe> tag defines an inline frame which allows to embed an HTML
document inside another HTML document.
In the given example, firstly we have created an ActiveXObject object which is
used to enable and return a reference to an Automation object and used it
file specified and returns a TextStream object to read from or write to the file.
The XMLHttpRequest object allows to update a web page without reloading. It requests
and receives the data from the server after the page has loaded.
XML parser reads and loads the xml into computer memory and converts it into DOM object. After loading the document, the data can be manipulated using
As you have already learned how to access and manipulate the DOM parser in the
previous section. Here we have used the DOM reference to display the data of XML
document into html table.
Here we are providing you an example to show the image effect. For this
purpose, we have created three functions.
If we want to convert whole string into the lower case letters then we can do this with a single step by calling method
toLocaleLowerCase() on the string object.