Html and CSSJavaScript

JavaScript Objects: Html Objects, String Objects, Date Objects, and Math Objects

JavaScript as Object-Based Language:

One of the most important features of JavaScript is that it is an object-based language. It simplifies the design of JavaScript program (script).

JavaScript does not support some feature of object-oriented programming such as inheritance, encapsulation, and information hiding. So JavaScript is not a complete object-oriented programming language. However, it has a number of predefined objects. You can create your own objects. So it is referred to as an object-based language.

Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

What is an Object?

An object may be an idea, place, item, person, or anything like these. For example, in online store system different objects may be laptops, store member, and computer operator etc. similarly, an html page is a collection of different objects. The examples of these objects are: form, buttons and textboxes etc.

The following things are associated with an object:

Properties of Object

Method of Object

Properties of Object:

The characteristics of an object are called its properties. Properties of an object are also referred to as its attributes. For example, laptop object has its properties (or attributes) like HDD, Ram, Processor, wifi, Bluetooth etc. the figure as show below the properties or attributes of the laptop.

JavaScript Objects

Method of Object:

An object has also different associated method. These are used to perform different operation on the data of object. For example, to “purchase a laptop”, “place order” and “return laptop” etc. represent the methods or operation on the laptop in a store system.


JavaScript Objects Model:

JavaScript supports a simple object model. Many JavaScript objects are contained within each other. An html page is a collection of different objects. The example of these objects are: form, buttons and textboxes etc. when a browser loads an html page, it create a set of objects. Some of these objects concern the browser, and other concern the html document. With JavaScript program( or VBScript program) you can access these objects. In order to access the propertied and methods of an object you must first access the object. You must also take into account the browser object hierarchy. The browser object hierarchy is also known as JavaScript objects Model.

JavaScript Objects

JavaScript Html DOM Objects:

JavaScript (and VBScript) enabled browsers use Document Object Model (DOM) to recognize Html page objects (or Html elements). The Html DOM is a platform and language independent. It can used by any scripting language like JavaScript and VBScript.

The html DOM defines a standard set of objects for html, and a standard way to access and manipulate html document. All html elements, along with their containing text and attributes, can be accessed through the DOM. JavaScript  objects hierarchy is mapped to the DOM, which in turn is mapped to the web page element (or objects) in the browser window. The topmost object in DOM in Navigator. Different other JavaScript objects in DOM hierarchy are shown in above figure.

Window Html and JavaScript Objects:

The ‘window’ JavaScript objects represent a browser window. A window objects is created automatically with every instance of a <body> or <frameset> tag. you can customize the browser window dynamically using window JavaScript Objects.

Properties of ‘window’ html and JavaScript objects:

The most important and commonly used properties of window JavaScript objects are as follows:

The ‘closed’ property:

This property returns a Boolean value that specifies whether the window has been closed. The general syntax to use this property is :

Window.closed

The ‘defaultStatus’ property:

This property is used to set or return the default text in the status bar of the window. The given text will be displayed when the page loads. The general syntax to use this property is:

Window.defaultStatus=text

The following code sets the default text in the status bas:

<html>
<body>
<script type=”text/javascript”>
Window.defaultStatus=”Programming Digest”
</script>
<p> please look at the text in the Status bar.</p>
</body>
</html>

The ‘status’ property:

This property is used to set (or return) the text in the status bar of the window. The general syntax to use this property is:

Window.status=text

The ‘Length’ property:

The length property is used to set or return the number of frames in the window. The general syntax to use this property is:

Window.Length

The ‘name’ property:

This property sets or returns the name of the window. The general syntax to use this property is:

Window.name=name

The following code opens a new window and returns its name:

<html>
<head>

<body>

<script type="text/javascript">
nw=window.open('','testing','width=200, height=100');
nw.document.write("this is new window, its name is: " + nw.name);
</script>
</body>
</html>

JavaScript Objects

In the above code, the new window is opened using ‘open’ method. The name of this window is given as “testing”. A message is displayed in the new window. The name of the new opened window is also displayed using ‘name’ property.

The ‘outerHeight’ property:

This property is used to set or return the outer height of a window, including all interface elements. The general syntax to use this property is:

Window.outerHeight= pixels

The ‘outerWidth’ property:

This property is used to set or return the outer width of a window, including all interface elements. The general syntax to use this property is:

Window.outerWidth=pixels



The following code opens a new window. Both the outerHeight & outerWidth properties are also used in this code:

<html>
<body>
<script type="text/javascript">
nw=window.open('','');
nw.outerHeight="100";
nw.outerWidth="100";
nw.document.write("this is new window");
nw.focus();
</script>
</body>
</html>

JavaScript Objects

The ‘scrollbars’ property:

This property is use to set whether or not the scrollbars should be visible. The general syntax to use this property is:

Window.scrollbars=true|false

The ‘toolbar’ property:

This property is used to set whether or not the browser’s toolbar is visible. The general syntax to use this property is:

Window.toolbar=true|false

The ‘statusbar’ property:

This property is used to set whether or not the browser’s status bar is visible. The general syntax to use this property is:

Window.statusbar= true|false

Methods of ‘window’ JavaScript Objects:

The most important and commonly used JavaScript objects methods of window are as follows:

Alert():

This method is  used to diplay an alert dialog box with a specified message. An OK button is also include with dialog box. The general syntax to use this method is :

Alert(message);

‘confirm():
this method is used to display a dialog box with a specified message. The dialog box contains OK and Cancel buttons. The general syntax to use this method is:

Confirm(message);

Prompt():

This method is used to get input from the user. The general syntax to use this method is:

Prompt(text, defaulttext);

Print():

This method is used to print the content of the current window on the printer attached with the user’s computer the general syntax to use this method is:

Window_name.print();

Focus():

This method is used to set focus to the current window or new opened window. The general syntax to use this method is:

Window_name.focus();

Blur():

This method is used to remove focus from the current window. The general syntax to use this method is:

Window_name.blur();

Close():

This method is used to close the current window. The general syntax to use this method is:

Window_name.close();

createPopup():

this method is used to create a pop-up window. The general syntax to use this method is:

window_name.createPopup();

open():

this method is used to open a new browser window. The general syntax to use this method is:

window.open(URL, name, height & width)

where

URL: specifies the url of the page to open. If no url is specified, a new window with about:blank is opened. Its use is optional.

Name: specifies the target attribute or the name of the window where page will be opened.

resizeTo():

this method is used to resize the window to the specified width and height. The general syntax to use this method is:

window.resizeTo(width, height)

where

width: specifies the width of windows in pixels

height: specifies the height of window in pixels

the following statement resizes the window with width of 200, and height of 300;

window.resizeTo(200, 300);

setInterva():

the setInterva() method is used to call a function (or evaluates an expression) repeatedly after specified interval. The general syntax to use this method is:

id=setInterval(code, interval);

where

id: specifies the variable name. it is used to store the Id value returned by the setInterval() method. This value is used as the parameter for the clearInterval() method.

Code: specifies the function call statement or the code to be executed.

Interval: specifies the time in milliseconds. For example, to call a function “showtime()” after each second, the statement is written as;

Var x= setInterval(“showtime();”, 1000);

clearInterval():

the setInterval() method will continue calling the function until clearInterval() is called or the window is closed. The clearInterval() method is used to cancel a timeout that is set with the setInterval() method. The id value returned by setInterval() is used as the parameter for the clearInterval() method.

The general syntax to use clearInterval() method is:

clearInterval(id);

where

id: specifies id value returned by the setInterval() method

for example, to cancel a timeout that is set with the statement “var x= setInterval(“showtime();”,1000);”, the clearInterval() method is written as;

clearInterval(x);

setTimeout():

this method is used to call a function at fixed time intervals. For example, to call a function “scroll()”, every time after 5 millisconds, the statement is written as:

setTimeout(“scroll()”, 5);


Example write JavaScript code that opens https://programmingdigest.com/ in a new window:

<html>
<body
<h2> Opening a link in new window</h2>
<script type="text/javascript">
window.open("https://programmingdigest.com/");
</script>
</body>
</html>
Example, write JavaScript code which display system date and time in h1 tag:
<html>
<head> 
<script type="text/javascript">
function clock() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

</script>
</head>
<body>
<h1 id="demo"></h1>

<script>
var myVar = setInterval(clock, 1000);


</script>
</body>
</html>

JavaScript Objects

The ‘document’ object:

The ‘document objects represents the entire html document. It can be used to access all elements in a page. It is a part f the ‘window’ objects.

Collections of ‘document’ objects:

The most important collections of document objects are as follows:

Anchors[]:

It returns a reference to all anchor objects (i.e. hyperlinks) containing a name attribute in the document. The general syntax to use this collection is:

Document.anchors[]

Following statement will return the total number of anchors in the document:

Document.write(document.anchors.length);

If number of anchors used in the document are four, then the above statement will return 4.

Forms[]:

It returns a reference to all form objects in the document. The general syntax to use this collection is:

Document.froms[]

Following statement will return the number of forms in the document:

Document.write(document.forms.length):

If number of forms used in the document are three, then the above statement will return 3.

Images[]:

It returns a reference to all image objects in the document. The general syntax to use this collection is:

Document.images[]

Following statement will return the number of images in the document:

Document.write(document.images.length);

If the number of images used in the document are five, then the above statement will returns 5.

Link[]:

It returns a reference to all area and link objects in the document. The general syntax to use this collection is:

Document.links[]

Properties of document object:

The most important and commonly used properties of document object are as follows:

Body:

It gives direct access to the <body> element.

Cookie:

It is used to set or return all cookies associated with the current document. The general syntax to use this property is:

Document.cookie

Referrer:

It returns the URL of the document that loaded the current document. The general syntax to use this property is:

Document.referrer

Title:

It returns the title of the current document (the text inside the Html <title> element). The general syntax to use this property is:

Document.title

URL:

It returns the URL of the current document. The general syntax to use this property is:

Document.URL


Example write JavaScript code to demonstrate the title and URL properties of document object:

<html>
<head> 
<title> Programming digest</title>
</head>
<body>
Properties of document Javascript objects:<br>
<script>
document.write("Title of the page is: " + document.title + "<br>");
document.write("URL of the page is: " + document.URL + "<br>");
</script>
</body>
</html>

JavaScript Objects

Methods of ‘document’ object:

The most important and commonly used methods of document object are as follows:

Open:

It is used to open a stream to collect the output from any document.write or document.writeln methods. The general syntax to use this method is:

Document.open(type)

Where ‘type’ specifies the type of document you are writing to. Default value is “text/html. its use in optional . if no argument is given, a  new window with about:blank is displayed.

Close:

It is used to close an output stream opened with the document.open method, and displays the collected data. The general syntax to use this method is:

Document.close()

Write:

It is used to write the output in the document. The general syntax to use this method is:

Document.write(exp1, exp2….);

Writeln:

It is similar to write() method, but this method write a new line character after each expression.

getElementById:

this method returns a reference to the specified object using its id attribute. The general syntax to use this method is:

document.getElementById(id);

you can also access form element using getElementById method.

Example write JavaScript code to return the text of header using getElementById method:

<html>
<head> 
<script type="text/javascript">
function getValue()
{
var x =document.getElementById("header");
document.write(x.innerHtml);
}
</script>
</head>
<body>
<h1 id="header" onclick="getValue()"> this is header</h1>
<p> Click on the header t display its value</p>
</body>
</html>

Example write Javascript code to access the value of textbox using getElementById method:

<html>
<head> 
<script type="text/javascript">
function getValue()
{
var txt1 =document.getElementById("txt1");
if(txt1.value !="")
    alert("You Entered: " + txt1.value)
else
    alert("Would you please enter some text")

}
</script>
</head>
<body>
<form>
<input type="text" id="txt1">
<input type ="button" name="b1" value ="click me" onclick ="getValue()">
</form>
</body>
</html>

JavaScript Objects

The form object:

The form object represents an html form. It is created, for each instance of a <form> tag in an html document.

A form object is a collection of different elements. Each element of form has its own properties, methods and events. The events of form are already discussed in the previous article.

Properties of form object:

The most important and commonly used properties of form object are as follows:

Name:

This property is used to set or return the name of a form. The general syntax to used this property is”

Formobject.name=formname

Id:

This property is used to set or return the id of a form. The general syntax to use this property is:

formObject.id=id


action:

this property is used to set or return the action attribute of a form. The action attribute defines where to send the data when the form is submitted. The general syntax to use this property is:

formObject.action =URL

length:

this property is used to return the number of elements in a form. The general syntax to use this property is:

formObject.length

Methods of form object:

Submit():

This method is used to submit the form. It is same as clicking the submit button. The general syntax tou use this method is:

formObject.submit()

reset():

this is used to reset (or clear) the values of all the elements in a form. It is same as clicking the reset button. The general syntax to use this method is:

formObject.reset()

the text object:

the text object represents a text-input field in an Html form. A text object is created for each instance of an <input type=”text”> tag in an html form.

Properties of text object:

The most important and commonly used properties of text object are as follows:

Name:

This property is used to set or return the name of a text field. The general syntax to use this property is:

textObject.name=name

id:

this property is used to set or return the id of a text field. The general syntax to use this property is:

textObject.id=id

size:

this property is used to set or return the size of a text field (in number of characters). The general syntax to use this property is:

textObject.size=value

for example, to set the size of 24 characters f textbox “txt1” of form “frm”, the statement is written as;

frm.txt1.size=24;

maxLength:

this property is used to set or return the maximum number of characters in a text field. The general syntax to use this property is:

textObject.maxLength=value

defaultValue:

this property is used to set or return the default value of a text field. The default value is the value specified in the html “value” attribute. The general syntax to use this property is:

textObject.value=text

for example, to display the contents of textbox “txt1” of form “frm”, the statement is written as;

alert(frm.txt1.value);

readOnly:

this property is used to set or return the whether or not a text field should be read-only. The general syntax to use this property is:

textObject.readOnly =true|false

for example, to make read only the textbox “txt1” of form “frm”, the statement is written as;

frm.txt1.readOnly=true;

disabled:

this property is used to set or return the whether or not a text field should be disable the general syntax to use this property is:

textObject.disabled= true|false

for example, to disable the textbox “txt1” of form “frm”, the statement is written as;

frm.txt1.disabled=true;

form:

this property returns a reference to the form that contains the text field. This property returns a form object on success. The general syntax to use this property is:

textObject.form

tabIndex:

this property is used to set or return the tab index for a text field. The tab order defines the order the elements appear if you navigate the page using the “tab” key on the keyboard. The general syntax to use this property is:

textObject.tabIndex = number

type:

this property returns the type of form element. For a text field this will always be “text”. The general syntax to use this property is:

textObject.type

alt:

this property is used to set or return an alternate text to display if a browser does not support text fields. The general syntax to use this property is:

textObject.alt=text

accessKey:

this property is used to set or return the keyboard key to access a text field. The general syntax to use this property is:

textObject.accessKey=key



Method of ‘text’ Object:

The most important and commonly used methods of text object are as follows:

Focus():

This method is used to set the focus to a text field. The general syntax to use this method is:

textObject.focus()

for example, to set the focus in textbox “txt1” of the form “frm”, the statement is written as;

frm.txt1.focus();

blur():

this method is used to remove the focus from a text field. The general syntax to use this method is:

textobject.blur()

for example, to lose focus from textbox “txt1” of form “frm”, the statement is written as;

frm.txt1.blur();

select():

this method is used to select the content of a text field. The general syntax to use this method is:

textobject.select()

for example, to select text of textbox “txt1” of form “frm”, the statement is written as;

frm.txt1.select();

the ‘password’ object:

the password object represent a password input field in an Html form. A password object is created for each instance of an <input type = “password”> tag in an Html form.

Note: the properties and methods of ‘password’ object are same as for ‘text’ object.

The ‘hidden’ object:

The hidden object represents a hidden input field in an Html form. A hidden object is created for each instance of an <input type = “hidden”> tag in an html form.

The properties of hidden object are: alt, form, id, name, type, and value. these properties are same as for ‘text’ object.

The ‘fileupload’ object:

The fileupload object represents a fileupload input field in an html form. A fileupload object is created for each instance of an <input type = “fileupload”> tag in an html form.

Note: the properties and methods of fileupload object are same as for text object.

The textarea object:

The textarea object represent a textarea input field in an html form. A textarea object is created for each instance of a <textarea> tag in an html form.

Properties of ‘textarea’ object:

The most important and commonly used properties of form textarea are as follows:

Name:

This property is used to set or return the name of a textarea field. The general syntax to use this property is:

textareaObject.name = name

id:

this property is used to set or return the id of a textarea field. The general syntax to use this property is:

textareaobject.id= id

rows:

this property is used to set or return the number of rows (or height) of a textarea. the general syntax to use this property is:

textarea.object.rows=number

cols:

this property is used to set or return the number of columns (or width) of a textarea. the general syntax to use this property is:

textareaObject.cols = number

defaultValue:

this property is used to set or return the default value of a textarea. the general syntax to use this property is:

textareaobject.defaultValue = value

value:

this property is used to set or return the value of a textarea. the general syntax to use this property is:

texareaobject.value = text

readOnly:

this property is used to set or return whether or not a textarea should be read-only. The general syntax to use this property is:

textareaobject.readOnly = true|false

disabled:

this property is used to set or return whether or not a textarea should be disabled. The genera syntax to use this property is:

textareaObject.disabled = true|false

form:

this property returns a reference to the form that contains the textarea. the general syntax to use this property is:

textareaobject.form


tabIndex:

this property is used to set or return the tab index for a textarea. the general syntax to use this property is:

textareaobject.tabIndex= number

type:

this property returns the type of form element. For a textarea. this will always be “textare”. The general syntax to use this property is

textareaobjcet.type

accessKey:

this property is used to set or return the keyboard key to access a textarea. the general syntax to use this property is:

textareaobject.accessKey = key

Method of textarea object:

The methods of textareaa object are same as for text object.

The checkbox object:

The checkbox object represents a checkbox in an html form. A checkbox object is created for each instance of an <input type=”checkbox”> tag in an html form.

Properties of checkbox object:

The most important and commonly used properties of checkbox are; accessKey, alt, checked, defaultChecked, disabled, form, id, name, tabIndex, type, and value. most of the properties of checkbox object are same as text object, except checked and defaultChecked properties. The checked and defaultChecked properties are described below.

Checked:

This property is used to set or return whether or not a checkbox should be checked. The general syntax to use this property is:

checkObject.checked=true|false

defaultChecked:

this property returns the default value of the checked attribute. This property returns true if the checkbox is checked by default, otherwise it returns false. The general syntax to use this property is:

checkboxObject.defualtChecked

Method of checkbox object:

The methods of checkbox are focus() and blur(). The function of these methods are same as focus() and blur() methods of text object.

Example Write JavaScript code to demonstrate the checked property of checkbox object:

<html>
<head> 
<script type="text/javascript">
var str="";
function checkbox_test()
{
if(frm.chk1.checked)
    str= str + "C++ programming" + "<br>";
    

if(frm.chk2.checked)
    str= str + "Visual Basic" + "<br>";
    

if (frm.chk3.checked)
    str= str + "Java" +"<br>";
    
document.write(str);
}

</script>
</head>
<body>
<h2> Checked Property of checkbox</h2>
<form name= "frm">
<input type="checkbox" name="chk1">C++ Programming<br>
<input type="checkbox" name="chk2">Visual Basic<br>
<input type="checkbox" name="chk3">Java programming<br>
<input type="button" value="Select Option & click" onClick="checkbox_test();">
</form>
</body>
</html>

 

JavaScript Objects

JavaScript Objects

JavaScript Objects

JavaScript Objects

The radio object:

The radio object represents a radio button in an html form. A radio object is created for each instance on an <input type=”radio”> tag in an html form

The properties and methods of radio object are same as for checkbox object.

Example write JavaScript code to demonstrate the radio object:

<html>
<head> 
<script type="text/javascript">

function calculate()
{
var n, m;
n= parseFloat(frm.txt1.value);
m=parseFloat(frm.txt2.value);
if(frm.op[0].checked)
    frm.txt3.value=n+m;
if(frm.op[1].checked)
    frm.txt3.value=n-m;
if(frm.op[2].checked)
    frm.txt3.value=n*m;
if(frm.op[3].checked)
    frm.txt3.value=n/m;
}

</script>
</head>
<body>
<h2> Checked Property of radio</h2>
<form name= "frm">
Enter 1st value:<input type="text" name="txt1" size="10"><br>
Enter 2nd Value:<input type="text" name="txt2" size="10"><br>
Result:<input type="text" name="txt3" size="10"><br>
<input type="radio" name="op">Addition<br>
<input type="radio" name="op">subtraction<br>
<input type="radio" name="op">Multiplication<br>
<input type="radio" name="op">Division<br>

<input type="button" value="Calculate" onClick="calculate();">
</form>
</body>
</html>

 

JavaScript Objects

JavaScript Objects

JavaScript Objects

JavaScript Objects


The button Object:

The button  object represents a push button. A button object is created for each instance of a < button> tag in an html document.

Properties of button object:

The most important and commonly used properties of button object are: acccessKey, disabled, form, id, name, tabIndex, type, and value. most of the properties of button object are same as text object, except value property. It is described below.

Value:

This property is used to set or return the text that is displayed on the button. The general syntax to use this property is:

buttonObject.value = value

the submit object:

the submit object represents a submit button in an html form. A submit object is created for each instance of an <input type= “submit”> tag in an html

form.

The properties and method of submit object are same as for button object.

The reset object:

The reset object represents a reset button in an html form. A reset object is created for each instance of an <input type=”reset”> tag in an html form.

The properties and method of reset object are same as for button object.

The select object:

The select object represents a dropdown list in an html form. A select object is created for each instance of a <select> tag in an html form.

Collection of ‘select object:

The select object consists of only one collection (options[]) which is described as follows:

Options[]:

This collection returns an array of all the options in a dropdown list. The  general syntax of this collection is:

Selectobject.options[]

Properties of select object:

The most important and commonly used properties of select object of form are as follows:

Name:

This property is used to set or return the name of dropdown list. The general syntax to use this property is:

Selectobject.name = name

Id:

This property is used to set or return the id of dropdown list. The general syntax to use this property is:

Selectobject.id= id

Length:

This property is used to set or return the number of options in a dropdown list. The general syntax to use this property is:

Selectobject.length = number

Size:

This property is used to set or return the number of visible row in dropdown list. The general syntax to use this property is:

Selectobject.size = number

Multiple:

This property is used to set or return whether or not multiple items can be selected in a dropdown list. The general syntax to use this property is:

Selectobject.multiple = true|false

selectedIndex:

this property is used to set or return the index of the selected option in a dropdown list. The general syntax to use this property is:

selectobject.selectedIndex = value

disabled:

this property is used to set or return whether or not a dropdown list should be disabled. The general syntax to use this property is:

selectobject.disabled = true|false

form:

this property return a reference to the form that contains the dropdown list. The general syntax to use this property is:

selectobject.form

tabIndex:

this property is used to set or return the tab index for a dropdown list. The general syntax to use this property is:

selectobject.tabIndex = number

Method of select object:

The most important and commonly used method of select object are as follows:

Add():

This method is used to add a new data item to a dropdown list. The general syntax to use this method is:

Selectobject.add(item,before)

Where: item specifies the data item to add in the dropdown list and before specifies where to insert the data item. the value null indicates that the new data item will be inserted at the end of the list.

Remove():
this method is used to remove a data item from a dropdown list. The general syntax to use this method is:

Selectobject.remove(index)

Where index specifies the index of the data item to remove from the dropdown list.

Focus():

This method is used to set focus to a dropdown list. The general syntax to use this method is:

Selectobject.fcus()

Blur():

This method is used to remove focus from a dropdown list. The general syntax to use this method is:

Selectobject.blur()

The option object:

The option object represents an option in a dropdown list. An option object is created, for each instance of an <option> tag in an html form.

Properties of option object:

defaultSelected:

this property returns true if an option (data item) is selected by default, otherwise it returns false. The general syntax to use this property is:

optionobject.defaultSelected

index:

this property returns the index position of an option in a dropdown list. The general syntax to use this property is:

optionObject.index

selected:

this property is used to set or return whether an option is selected or not. The general syntax to use this property is:

optionobject.selected = true|false


text:

this property is used to set or return the text of the selected option. The general syntax to use this property is:

optionobject.text = text

value:

this property is used to set or return the value of the selected option (the value to be sent to the server). The general syntax to use this property is:

optionobject.value = value

disabled: it is similar to disabled property of select object.

Form: it is similar to form of select object.

Id: it is similar to id property of select object.

The anchor object:

The anchor object represents an html hyperlink. It is created, for each instance of an <A> tag in an html document.

An anchor can be used to create a link to another document( with the href attribute) or to create a bookmark inside a document (with the name attribute).

Properties of anchor object:

The most important and commonly used properties of anchor object are as follows:

Name:

This property is used to set or return the name of a link. The general syntax to use this property is:

Anchorobject.name= name

Href:

This property is used to set or return the URL of the linked resource. The general syntax to use this property is:

anchorObject.href = url

innerHtml:

this property is used to set or return the text of a link. The general syntax to use this property is:

anchorObject.innerHtml = text

id:

this property is used to set or return the id of a link. The general syntax to use this property is:

anchorObject.id = id

target:

this property is used to set where to open a link. The general syntax to use this property is:

anchorObject. Target = blank|parent|self|top

accessKey:

this property is used to set or return a keyboard key to access the link. The general syntax to use this property is:

anchorObject.accessKey = accesskey

Methods of anchor object:

The most important and commonly used methods of anchor object are as follows:

Focus():

This method is used to set focus to a link. The general syntax to use this method is:

Anchorobject.focus()

Blur():

This method is used to remove focus from a link. The general syntax to use this method is:

Anchorobject.blur()

The link object:

The link object represents an html <link> element. It defines the relationship between two linked document. The <link> element is defined in the <head> section to the html document.

Properties of link object:

The most important commonly used properties of link object are as follows:
name:

This property is used to set or return the name of a link element. The general syntax to use this property is:

Linkobject.name= name

Href:

This property is used to set or return the URL of the linked resource. The general syntax to use this property is:

linkObject.href = URL

disabled: it is similar to disabled property of anchor object.

Id: it is similar to id property of anchor object.

The image object:

The image object represents an html <img> element. An image object is created, for each instance of an <img> tag in an html document.

Property of image object:

The most and commonly used properties of image object are as follows:

Name:

This property is used to set or return the name of an image. the general syntax to use this property is:

Imageobject.name = name

Id:

This property is used to set or return the id of an image. the general syntax to use this property is:

Imageobject.id = id

Src:

This property is used to set or return the URL of an image. this property can be changed at any time. however, the new image inherits the height and width attributes of the original image. the general syntax to use this property is:

Imageobject.src = url

Align:

This property is used to set or return how t align an image according to the surrounding text. The general syntax to use this property is:

Imageobject.align- left|right|top|middle|bottom

Alt:

This property is used to set (or return) an alternate text to be displayed, if an image is not displayed. The general syntax to use this property is:
imageobject.alt = text

Border:

This property is used to set or return the width of the border around an image. the general syntax to use this property is:

Imageobject.border = pixels

Height:

This property is used to set or return the height of an image the general syntax to use this property is:

Imageobject.height= pixels

Width:

This property is used to set or return the width of an image the general syntax to use this property is:

Imageobject.width = pixels

Hspace:

This property is used to set or return the white space on the left and right side of an image (horizontal space). The general syntax to use this property is:

Imageobject.hspace = pixels

Vspace:

This property is use to set or return the white space on the top and bottom side of an image( vertical space) the general syntax to use this property is:

Imageobject.vspace = pixels

The hspace and vspace properties can be used with align to set the distance between the image and the surrounding text.

Complete:

This property returns whether or not the browser has finished loading the image. if the image has finished loading process, it returns true; otherwise it returns false. The general syntax to use this property is:

Imageobject.complete



The frame object:

The frame object represents an html frame. A frame object is created, for each instance of a <frame> tag in an html document. It contains information about the frame in the document.

Properties of frame object:

The most important and commonly used properties of frame object are as follows:

Name:

This property sets or returns the name of a frame. The general syntax to use this property Is:

Frameobject.name = frame_name

Scr:

This property set or returns the URL of the document that should be loaded into the frame. The general syntax to use this property is:

Frameobject.src= URL

noResize:

this property set or returns whether or not a frame can be resized. The general syntax to use this property is:

frameobject.noRize =true|false

scrolling:

this property set or returns whether or not a frame should have scrollbars. The general syntax to use this property is:

frameobject.scrolling= yes|no

frameBorder:

this property set or returns whether or not to display borders around a frame. The general syntax to use this property is:

frameobject.frameBorder= 1|0

marginHeight:

this property set or returns the top and bottom margins of a frame ( in pixels). The general syntax to used this property is :
frameobject.marginHeight= pixels

marginWidth:

this property sets or returns the left and right margins of a frame ( in pixels). The general syntax to use this property is:

frameobject.marginWidth = pixels

the navigator object:

the navigator object is actually a JavaScript object, and not an html DOM object. It is automatically created by the JavaScript runtime engine. It contains information about the client browser.

Property of navigator object:

appCodeName:

this property returns the code name of the browser. The general syntax to use this property is:

navigator.appCodeName

appMinorVersion:

this property returns the minor version of the browser. The general syntax to use this property is:

navigator.appMinorVersion

appName:

this property returns the name of the browser. The general syntax to use this property is:

navigator.appName

appVersion:

this property returns the platform and version of the browser. The general syntax to use this property is:

navigator.appVersion

cookieEnabled:

this property returns a Boolean value that specifies whether cookies are enabled in the browser. The general syntax to use this property is:

navigator.cookieEnabled

cpuClass:

this property returns the CPU class of the browser’s system. The general syntax to use this property is:
navigator.cpuClass

example write JavaScript code to demonstrate the above mentioned properties of navigator object:

<html>
<head> 
<script type="text/javascript">
document.write("appCodeName: " + navigator.appCodeName +"<br>");
document.write("appMinorVersion: " + navigator.appMinorVersion +"<br>");
document.write("appName: " + navigator.appName +"<br>");
document.write("appVersion: " + navigator.appVersion +"<br>");
document.write("CookieEnabled: " + navigator.cookieEnabled +"<br>");
document.write("CpuClass: " + navigator.cpuClass + "<br>");


</script>
</head>
<body>

</body>
</html>

JavaScript Objects


Method of navigator object:

The most important and commonly used method of navigator object is JavaEnabled() method. The general syntax to use this method is:

Navigator.javaEnabled()

The following code returns whether the browser has java enabled or not

<html>
<body>
<script type="text/javaScript">
    document.write(navigator.javaEnabled());
</script>
</body>
</html>

The screen object:

The screen object is also a JavaScript object, and not an html DOM object. It is automatically created by the JavaScript runtime engine and contains information about the client’s display screen.

Properties of screen object:

The most important and commonly used properties of screen object are as follows:

availHeight:

this property returns the height of the client’s display screen excluding the windows taskbar. The general syntax to use this property is:

screen.availHeight

availWidth:

this property returns the width of the client’s display screen excluding the windows taskbar. The general syntax to use this property is:

screen.availWidth

height:

this property returns the height of the client’s display screen. The general syntax to use this property is:

screen.height

width:

this property returns the width of the client’s display screen. The general syntax to use this property is:

screen.width

example write JavaScript code to demonstrate the above mentioned properties of screen object:

<html>
<body>
<script type="text/javaScript">
    document.write("availHeight: " + screen.availHeight + "<br>");
    document.write("availWidth: " + screen.availWidth + "<br>");
    document.write("Height: " + screen.height + "<br>");
    document.write("Width: " + screen.width + "<br>");
</script>
</body>
</html>

JavaScript Objects

The location object:

The location object is a JavaScript object, and not an html DOM object. It is automatically created by the JavaScript runtime engine. It contains information about the current URL. The location object is  part of the window object.

Property of location object:

The most important and commonly used properties of location object are as follows:

Hash:

This property sets or returns the URL from the hash sign(#). It specifies an anchor name in a URL. The general syntax to use this property is:

Location.hash = anchorname

Host:

This property sets or returns the hostname and port number of the current URL. The general syntax to use this property is:

Location.host

Hostname:

This property sets or returns the hostname of the current URL. The general syntax to use this property is:

Location.hostname

Href:

This property sets or returns the entire URL. The general syntax to use this property is:

Location.href

Pathname:

This property sets or returns the path of the current URL. The general syntax to use this property is:

Location.pathname = path

Port:

This property sets or returns the port number of the current URL. The general syntax to use this property is:

Location.port = pathnumber

It may be noted that if the port number is the default of 80, it is not specified.



Protocol:
this property sets or returns the protocol of the current URL. The general syntax to use this property is:

Location.protocol

Methods of location object:

The most import and commonly used methods of location object are as follows:

Assign:

This method is used to load a new document/page. The general syntax to use this method is:

Location.assign(URL)

Reload:

This method is used to reload the current document/ page. The general syntax to use this method is:

Location.reload()

The following statement will reload the current page:

Window.location.reload();

Replace:

This method is used to replace the current page/document with  a new one. The general syntax to use this method is:

Location.replace(URL)

The history object:

The history object is also a JavaScript object, and not an Html DOM object. It is automatically created by the JavaScript runtime engine. It consists of arrays of URLs. It means that history object consists of list of URL addresses of documents that have been accessed by the current window or frame.

The history object is part of the window object and is accessed through the ‘window.history’ property.

Properties of history object:

The most important and commonly used property of history object is the length property.

Length:

This property returns the number of elements in the history list. The general syntax to use this property is:

History.length

Methods of history object:

The most important and commonly used method of history object are as follows:

Back():

This method is used to load the previous URL in the history list. This is same as clicking the back button of browser and history.go(-1).the general syntax to use this method is:

History.back()

Forward():

This method is used to  load the next URL in the history list. This is same as clicking the forward button of browser and history.go(1). The general syntax to use this method is:

History.forward()

Go():

This method is used to load a specific page in the history list. The general syntax to use this method is:

History.go(number|url)

If a positive number is given, it indicates the forward page. Similarly, if negative number is given, it indicates the backward page. For example, go(-1) does the same thing as history.backward method.

 

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button