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…
|Built-in Object||Used For|
|Location||Used to access information about the current URL. The
|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
|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.
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!
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.
Go ahead and copy/paste this code into your own HTML file.
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.
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();
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.
Go ahead an click here to see how big your screen is.
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.
Here’s some code that will break down the browser’s details:
Try that code out for yourself and see what details may surprise you about the type of browser that YOU are using!
You never know when you might come to a situation where you’ll need to determine the type of browser someone is using, or when you might need to dynamically modify an element on the page.