EP38 – JavaScript’s Built in Objects

Something that’s really useful to know about is the handful of objects that come built into the JavaScript language.

These objects are tools that you can use to enable a wide range of useful functionalities in your applications.

From manipulating the user’s URL location to changing elements on the screen, these objects will make you say “Hey! That’s awesome!”

Here’s a brief outline…

The Full List of Built In JavaScript Objects

Built-in Object

Used For

Document

Used to access elements within an HTML page. This allows you to dynamically modify any element on the screen using JavaScript.

Location

Used to access information about the current URL. The location object is part of the window object and is accessed through the window.location property. Commonly used to send your visitors to another URL based on some action taken by the user.

History

Used to enable navigation through a user’s browser history. You can send them back to a previously visited page, or forward to a page they were just vieweing. The history object is part of the window object and is accessed through the window.history property.

Screen

Used to get information about the user’s screen. Commonly used to get the width and height of the webpage their currently viewing.

Navigator

Used to get information relating to the user’s browser. Commonly used to see what type of browser a user is using (i.e. Chrome, Firefire, Internet Explorer, Safari, etc.)

So there you have it, a list of helpful objects that you can tap into to add some extra useful stuff into your programs.

Now how about I give you some of the most common uses for each of these objects? I think that would be super helpful for you.

JavaScript Document Object

As mentioned, the document object is used to interact with elements in your HTML pages. The most common use (that I’ve seen) for the document object is to retrieve elements from the page and tinker with them.

Let’s take a look at a basic HTML page and then modify its contents when you push a button.

Go ahead and try copy/pasting the code above into your own HTML file and open it in a browser. You’ll see something interesting happen when you click on the “spice it up” button.

The part to note here is that we were able to modify the look & feel of the text by using the document.getElementById() object and function to assign that paragraph element to a variable called paragraphElement. Then we took the paragraphElement and changed its style a bit. Powerful stuff!

JavaScript Location Object

The location object is typically used to just forward a user onto a different URL. Let’s create a simple webpage that forwards you to Google.com when you click on a button.

You’ll notice that there’s a button on the screen that says “Go to Google!”. Now when you click on it, it’ll use the location object (located in via window.location) to send you off to Google.

JavaScript History Object

The history object is really easy to comprehend. I don’t think I’ll need to give you a full example like I did above. I have confidence that you’ll figure out how to make use of its functions.

As a guide, I’ll show you how to invoke its functions:

// If you want to send the user BACK to a previous page
window.history.back();
// If you want to send the user FORWARD to a page they were visiting
window.history.forward();

JavaScript Screen Object

The screen object is used to get the width and height of the screen of your user’s device. This is most useful when you’re trying to figure out how to display content on their screen.

With the advent of mobile devices, it’s becoming more and more “polite” to give your users a nice viewing experience when they visit your website on a mobile device. Using the screen object will tell you exactly how big (or small) their device’s screen really is.

JavaScript Navigator Object

Finally we come to the navigator object, which is used to determine intimate details about the browser that you’re using.

This can be used to change the way a webpage looks or acts depending on the type of browser that’s being used.

I know that one practical use of the navigator object that I used a while back was when I did some HTML5 programming (back when it wasn’t as well supported as it is now). I wrote code that essentially only worked in a Chrome browser, so I would use the navigator to determine the type of browser my users were using, and display a warning message if it wasn’t a Chrome (webkit) browser.