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.
<html> <head> <title>Simple Page</title> <script type="text/javascript"> function spiceItUp() { var paragraphElement = document.getElementById("aParagraph"); paragraphElement.style.backgroundColor = "yellow" paragraphElement.style.fontSize = "24px"; } </script> </head> <body> <p id="aParagraph"> Here's some text. It's very boring. But something tells me we're going to spice it up! </p> <input type="button" onclick="spiceItUp()" value="Spice it up!"/> </body> </html>
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.
<html> <head> <title>Simple Page</title> <script type="text/javascript"> function goToGoogle() { window.location.href = "http://google.com"; } </script> </head> <body> <p id="aParagraph"> I'm just a simple boring webpage... until you click that button! </p> <input type="button" onclick="goToGoogle()" value="Go to Google!"/> </body> </html>
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.
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.
<html> <head> <title>Simple Page</title> <script type="text/javascript"> function getScreenSize() { alert("Height: " + screen.height + ", Width: " + screen.width); alert("Height without taskbar: " + screen.availHeight + ", Width without taskbar: " + screen.availWidth); } </script> </head> <body> <p id="aParagraph"> I'm just a simple boring webpage... until you click that button! </p> <input type="button" onclick="getScreenSize()" value="What's My Screen Size?"/> </body> </html>
Go ahead an click here to see how big your screen 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.
Here's some code that will break down the browser's details:
<html> <head> <title>Simple Page</title> <script type="text/javascript"> function getBrowserInfo() { alert("Your Browser's code name: " + navigator.appCodeName + "n" + "Your Browser's app name: " + navigator.appName + "n" + "Your Browser's product name: " + navigator.product + "n" + "Your Browser's platform: " + navigator.platform + "n" + "Your Browser's user agent: " + navigator.userAgent ); } </script> </head> <body> <p id="aParagraph"> I'm just a simple boring webpage... until you click that button! </p> <input type="button" onclick="getBrowserInfo()" value="What Browser am I Using?"/> </body> </html>
Try that code out for yourself and see what details may surprise you about the type of browser that YOU are using!
In Summary
JavaScript provide a great library of built-in objects that can be used to your programming advantage.
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.
So be sure to make yourself familiar with these objects and their many uses, it'll make you a far better JavaScript programmer.
And hey, speaking of being a better JavaScript programmer, be sure to type your email into the box below, you'll get a special freebie that will be sure to enhance your programming skills.