Objects in JavaScript

Three objects widely used in JavaScript are the window, style and document objects. Let's look at the first of the three.

The WINDOW object

The window object represents the browser window and it is a top-level object, i.e. there is no other object above the window object. Two properties associated with the window object are:

opener - this returns a reference to the window that created the window.

status - sets or returns the text in the status bar of the window.

 <p onmouseover="window.status='This status message is displaying correctly!';">

The above code has been attached to this paragraph so that when you place the mouse over it, the status bar message in the example will display at the bottom of the window. Mouse over to test the results! To view it again refresh the screen.

Methods associated with the window object are alert(), print() and close(). The alert method opens a separate window with an alert message displayed, the print method will print the current window that is opened and the close method will close the current window that is opened.

  function alertmsg()
    {
     window.alert("This alert message is working!");
    }

A function named "alertmsg()" has been created using the code above. The function has then been attached to this paragraph so that when the user moves their mouse over the paragraph a new window will display with an alert message that reads "This alert message is working!". Move your mouse over the paragraph to display the message window.

The STYLE object

The style object is used to change the style of any element on a page and is accessed from the document or from the elements to which that style is applied. As the style object covers a broad area, its properties are broken down into 10 categories. These are background, border and margin, layout, list, miscellaneous, positioning, printing, scrollbar, table and text. The following example uses the property of backgroundColor.

  function colourparagraph()
    {
     document.getElementById("exampleParagraph").style.backgroundColor="#A5A0D6";
    }

Click your mouse on this paragraph to change its background colour! A JavaScript function has been set up incorporating the above code so the background colour will change when you click the mouse over it. To reset the paragraph refresh the screen.

For a list of all the properties associated with the style object go to the w3schools site.

The DOCUMENT object

The document object is used to access all elements in a page and represents the whole HTML document. It has properties, methods and events associated with it. Some document properties include:

URL - this returns the URL (internet address) of the current document.

title - this returns the title of the current document page.

body - this specifies the beginning and the end of the document body.

  function url()
   {
    window.alert("THE URL IS: " + document.URL + " THE PAGE TITLE IS: " + document.title);
   }

The above function incorporates the document "URL" and "title" properties so that when the user clicks their mouse over this paragraph the URL address and title of the current document page will be displayed. These two document properties are displayed at the top, left-hand-side of the screen, see the image below for an example.

Document properties example

A method used with the document object is getElementById(). This returns a reference to the first object with the specified ID. For example, you may have an input field on a form which has been named with an ID of "surname". JavaScript validation can be created to make sure the user enters their surname into the field. The code would look like this:

  function checkform()
   {
    if (document.getElementById("surname").value == "");
     {
      window.alert("Please enter your surname in this field");
      document.getElementById("surname").focus();
     } 
   }

The function above is called "checkform" and its statements says if the input field named "surname" has a value of "" (which means empty), then display an alert window that asks the user to enter their surname. The focus function then places the cursor back into the "surname" field for the user to enter their surname. To view more methods associated with the document object visit w3schools.

Let's now look at some document events. Events execute code or functions associated with the document. The events I have used on this page are:

onclick - Executes code with a click event i.e. clicking on your mouse.

onmouseover - Executes code when the user drags their mouse over a certain area.

If you note the example of code used above for the document property "url", a function was created called url(). This function was then attached to the paragraph below, so that when the user clicks their mouse over it the url name will display in a message box. The code that attaches the function to the paragraph reads:

<p onclick="url()">

The same type coding was attached to other paragraphs on this page to execute functions when the user places their mouse over the nominated paragraph. In the code above the word "onclick" would be replaced by "onmouseover" to enable this.

To view more events associated with the document object click on the w3schools link above.

Let's take a look at some of the programming languages.