2: Objects and Properties

Learning Goals

At the end of this Lesson, you will be able to:

In this Lesson you will meet the following JavaScript terms:

• JavaScript Property
• JavaScript Object

Exercise file

In this Lesson you will work with this sample web page:

📄   exercise-2-1.html

You will find this file in your 📁 /javascript/exercises/2/ sub-folder.

About objects, properties and methods

Objects, properties and methods are three important concepts in JavaScript.

This Lesson will focus on four important objects in JavaScript:

• The navigator object (web browser used to display web page).
• The window object (screen area filled by web browser).
• The location object (full web address of web page).
• The document object (web page and all its content).

In the sample screenshot below, you can see the home page of Ireland’s Grow Remote website with these four JavaScript objects highlighted.

JavaScript Object

A container of information (pairs of property names and values). Examples include the navigator, window, location and document objects. Many objects contain other objects nested inside them. JavaScript code can read values of all properties of an object, and some values it can change.

The web browser navigator object

JavaScript refers to the web browser as the navigator object. The name comes from Netscape Navigator, the browser for which JavaScript was developed. Netscape Navigator later evolved into the Mozilla Firebox browser.

One property of the navigator object is called userAgent. See the table below.

In Exercise 2.1 you will use this property to display information about your web browser.

Exercise 2.1: Displaying your web browser properties

To begin, use Windows Explorer (Microsoft Windows 10) or Finder (Apple Mac) to display the sub-folder 📁 on your computer which contains your JavaScript exercise files.

The sub-folder is named javascript/exercises/2/.

Next, follow these steps:

1. Open the following web page file in Visual Studio Code and your web browser:   📄   exercise-2-1.html
2. Near the top of the web page you can see an HTML <h2> … <h2> sub-heading that contains the text “OS platform and web browser.”   Under this sub-heading is an empty pair of opening and closing <script> … </script> HTML tags.
3. Copy-and-paste the following line of JavaScript code inside these tags.

    document.write("<p><b>"+navigator.userAgent+"<\/b><\/p>");
   

   Your VS Code should now look as follows.
4. In VS Code, save the web page file. And then reload the page in your web browser.

On Microsoft Windows 10, for various web browsers, the results should look as shown below.

Mozilla Firefox

Google Chrome

Microsoft Edge

Opera

Leave the 📄 exercise-2-1.html file open in VS Code and your web browser. You will update it three more times in this Lesson.

Web browser-sniffing

When a web browser sends a request to a webserver to display a web page, it sends along with the request information about itself from the userAgent property of its navigator object.

It can be important for a webserver to know which web browser, browser version and operating system a website visitor is using. With this information, the webserver can deliver the appropriate version of its web pages to the user.

As you can see from Exercise 2-1, the information stored in the userAgent can be a misleading. For example, almost all web browsers display as ‘Mozilla’. And both the 32-bit and 64-bit versions of Microsoft Windows display as ‘Win-64’.

JavaScript developers use browser detection or ‘browser sniffing’ programs to analyse the content of the userAgent property for tell-tale signs of which browser is actually is sending the web page request.

JavaScript Object Property

A feature or characteristic of an object that can be accessed or set using JavaScript methods. Some properties are scriptable; others are read-only.

Displaying literals with document.write()

When typing document.write() statements, only enclose within quotes those items that you want interpreted literally.

For example, the following statement in VSCode will display the language version of your web browser.

document.write("Web browser language: "+navigator.language);

It will produce an output such as the following.

What would happen if you did enclose everything inside the parenthesis () within quotes?

document.write("Web browser language: +navigator.language");

The result will look as shown below.

This is not an error or a ‘bug’. The above JavaScript code will run perfectly. But the result is probably not what you want!

You don’t want the text “navigator.language” displayed on the web page. What you want is the value of that object property. That is why the object property is not enclosed within quotes.

The window object of the web browser

The window object represents the user’s screen area in the web browser.

The area of the web browser window that displays web page content is called the viewport. The viewport excludes any menubar, tab names and web address bar at the top of the window, and also any scrollbars at the right or along the bottom.

The properties of the window object of particular interest to JavaScript programmers are shown in the table below.

Exercise 2.1 (continued): Displaying your viewport dimensions

Let’s use these two properties to display the dimensions of your web browser viewport.

1. In your 📄 exercise-2-1.html file in VS Code, you can see a second sub-heading of “Web browser viewport” and under it an empty pair of opening and closing pair of <script> … </script> HTML tags.
2. Copy-and-paste the following four lines of JavaScript code inside these tags.

   document.write("<p>Viewport width: <b>"+window.innerWidth+"px<\/b><br>"); 
   document.write("Viewport height: <b>"+window.innerHeight+"px<\/b><\/p>"); 
   

   Your VS Code should now look as follows.
3. Save your web page and reload your web browser. The result should look similar to that below.

Leave the 📄 exercise-2-1.html file open in VS Code and your web browser. You will make two more updates to it.

The location object of the web page

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

The location object contains the Uniform Resource Locator (URL) of the currently displayed web page. It can be accessed by JavaScript code through either the window.location or document.location object properties.

One of its properties are shown in the table below.

Exercise 2.1 (continued): Displaying your web page URL

Let’s update the exercise web page to display its address.

1. In your 📄 exercise-2-1.html file in VS Code, you can see a third sub-heading of “Web page URL” and under it an empty pair of opening and closing <script> … </script> HTML tags.
2. Copy-and-paste the following line of JavaScript code inside these tags.

    document.write("<p><b>"+window.location.href+"<\/b><\/p>");
   

   Your VS Code should now look as follows.
3. Save your web page and reload your web browser. The result should look similar to that below.

Leave the 📄 exercise-2-1.html file open in VS Code and your web browser. You will make one more update to it.

About objectname.propertyname notation

In JavaScript code, the standard format for writing the name of an object and one of its properties is as follows.

objectname.propertyname

Note that a full stop (.) is used to separate the name of the property from the name of the object. Below are some examples of JavaScript statements that display a property value of a particular object. The first one you already used in Exercise 2.1.

document.write(navigator.userAgent);
document.write(window.innerWidth);
document.write(document.title);

The web page document object

In web development generally, the term ‘HTML file.’ is used for what most Internet users refer to simply as a ‘web page.’ In JavaScript programming, however, a web page is known as a ‘document’.

Details of the web page displayed in the web browser window are stored in what is called the document object. The following table lists three of this object’s properties.

Exercise 2.1 (continued): Displaying your web page details

Let’s use these properties to display details about your exercise 2-1.html web page.

1. In your 📄 exercise-2-1.html file in VS Code, you can see a fourth sub-heading of “Web page details” and under it an empty pair of opening and closing <script> … </script> HTML tags.
2. Copy-and-paste the following three lines of JavaScript code inside these tags.

    document.write("<p>Title: <b>"+document.title+"<\/b><\/p>");
    document.write("<p>Last Updated: <b>"+document.lastModified+"<\/b><\/p>");  
    document.write("<p>Referrer: <b>"+document.referrer+"<\/b><\/p>");  
   

   Your VS Code should now look as follows.
3. Save your web page and reload your web browser. The result should look similar to that below.

You have now finished working with your 📄 exercise-2-1.html file. You can close it in VS Code and your web browser.

About objects and methods

In these first two Lessons you have been using the document.write() statements to display output on screen.

More exactly, you have been using the write() method of the document object to input content to an HTML file.

In JavaScript, the name of a method ends in a pair of brackets, called a parenthesis. In some methods, the parenthesis contains some content. For example:

 document.write("This is a sample string.");
 window.confirm("Did you enjoy this web page?");

In other methods the parenthesis can be empty. The following code closes the currently open window. Or, to use JavaScript terminology, it applies the close() method to the window object.

window.close();

JavaScript Method

An action performed by JavaScript code on an object. Method names end with a parenthesis (). For example, the document object has a write() method, and the window object has alert(), confirm() and close() methods.

Lesson summary

in JavaScript, an object is a container for a wide range of information. Examples of objects include the navigator (web browser), window and document (web page) objects. Objects can be accessed and acted on by methods in JavaScript code.

The two following statements use the write() method of the document object and the alert() method of the window object.

document.write("Every day I\'m getting better at <b>JavaScript<\/b>");
window.alert("Thank you for visiting my web page");

Objects in JavaScript have properties. For example, the document.title property is the title of the web page, and window.innerHeight is the height of the screen area in pixels. Some objects properties are scriptable. That is, they can be updated by JavaScript code. Other properties can only be read by JavaScript and not changed. The standard JavaScript format an object and one of its properties is as follows.

objectname.propertyname

When typing document.write() statements only enclose within quotes those items that you want interpreted literally. The following statement displays the width of the screen area.

document.write("Screen Width: "+"window.innerWidth");

You don't want the text ‘window.innerWidth’ displayed. What you do want is the value of that object property. That is why the object property is not surrounded by double or single quotes.

Return to Contents.