Sign up to save your podcasts
Or
Share EP38 – JavaScript’s Built in Objects
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
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.
Simple Page
Here's some text. It's very boring. But something tells me we're going to spice it up!
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.
Simple Page
I'm just a simple boring webpage... until you click that 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.
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.
Simple Page
I'm just a simple boring webpage... until you click that button!
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:
Simple Page
I'm just a simple boring webpage... until you click that button!
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.
The post EP38 – JavaScript’s Built in Objects appeared first on Coders Campus.
View all episodes
By Trevor PageSomething 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.
Simple Page
Here's some text. It's very boring. But something tells me we're going to spice it up!
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.
Simple Page
I'm just a simple boring webpage... until you click that 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.
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.
Simple Page
I'm just a simple boring webpage... until you click that button!
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:
Simple Page
I'm just a simple boring webpage... until you click that button!
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.
The post EP38 – JavaScript’s Built in Objects appeared first on Coders Campus.