Thinking Globally

An airplane cockpit has a lot of switches and 0:01 dials the captain can use to maneuver the airplane. 0:03 The captain can monitor the position of the plane, communicate with nearby base 0:06 stations, take off, and land with all those controls. 0:10 JavaScript's global environment it's kind of like a cockpit. 0:13 It's full of controls your code can use to make things happen. 0:17 These controls come in the form of JavaScript objects and functions and 0:20 inside a browser they allow your code to see and manipulate web pages. 0:23 We can explore this browser environment through a feature in the Chrome web browser 0:28 called Developer Tools. 0:31 Now, Internet Explorer Firefox and Safari all have similar features but 0:33 I'll be using Chrome in this course. 0:37 To follow along with me, launch the work space for 0:39 this video or download the project files and use your preferred text editor. 0:41 In your work space or project files, you should see a file called index.html. 0:46 The file contains a heading one element 0:51 with an id of my heading there's also a paragraph right below it. 0:53 If we open the page in a web browser, 0:58 you can see how the browser renders the headline and paragraph. 1:00 So let's use the Developer Tools to investigate and 1:03 interact with this page using JavaScript. 1:06 Once you have the web page open in Chrome, you can find the Developer Tools in 1:08 the top right menu by going to More Tools, then clicking Developer Tools. 1:12 You should see a window open most likely at the bottom of your current window and 1:18 there are tabs along the top of the window. 1:22 So let's click on the Console tab. 1:25 Here, we can type JavaScript code in real time and 1:27 it will run as if we had written it into the current web page. 1:30 You're probably familiar with the alert command. 1:34 Alert is a browser function that shows a message window to the user. 1:37 So let's try it out here, I'll type alert, 1:42 then the message, ('I made the browser message me'). 1:45 Once I hit Enter, I get my message. 1:53 We can also see the current URL by typing location.href. 1:56 Now, Chrome hides the http:// in the address bar, so 2:04 we see that the URL in the console matches the URL in the address bar. 2:08 Now, if you wanna be sure you could copy this URL and 2:14 paste it in the address bar and it will just refresh the page. 2:16 So where did alert and location come from? 2:20 Well, we didn't create them and 2:23 they aren't defined in any JavaScript file loaded by the HTML. 2:24 These variables are part of the browser's global environment and 2:28 are many more variables in the global environment. 2:33 Global variables are actually properties of a single global object, 2:35 which in browsers is called window. 2:40 So lets type window into the console and see all the properties it contains. 2:42 Here, we see the window object and 2:48 Chrome's Developer Tools gives us a handy way to explore objects. 2:50 If you click on the triangle icon, 2:55 you can expand the object to see all of its properties. 2:57 And notice how the window object has a lot of properties. 3:01 These are all the controls the browser gives you with JavaScript. 3:04 Now, if we scroll all the way down past these dimmed down options, 3:07 we see the alert function here. 3:12 Then further down, you'll see the location object. 3:16 If you expand the location object, 3:21 you can see the href property we looked at earlier. 3:23 All these globals are properties on the window object. 3:27 I'll demonstrate this by clearing the console by typing Ctrl+L then 3:30 in the console, type window.alert and 3:36 the message ('This is the same alert function'). 3:42 And once you hit Enter, 3:49 you'll see that window alert gives us a message box just like before. 3:50 Next, let's look at another property of window. 3:56 And this object and some of its properties are what we'll focus on for 3:58 the rest of this course. 4:02 It's called the document object and we can use it to select and 4:03 control elements of the currently loaded web page. 4:07 For example, let's change the color of this heading to purple. 4:11 So in the console, I'll type 4:15 document.getElementByID then 4:20 target ('myHeading'). 4:25 Then after that will say, style.color = and the heading changes to purple. 4:30 So in this example, we use the getElementByID method 4:39 on the document to select the H one element with the ID my heading. 4:44 Then we changed it CSS color property to purple. 4:50 Now, we'll go over this code more in depth soon so don't worry about it too much. 4:54 The main thing to note here is that we selected the element or 4:58 grabbed a hold of it then we manipulated it. 5:01 This is a common sequence when controlling a web page with JavaScript. 5:04 So let's change the heading back to black. 5:08 If you press the up arrow, the console will give you the last command you ran. 5:10 Now, if you keep pressing up you can dig further back into your history but 5:15 we'll just press up once. 5:18 Then we can backspace over purple, change it to black, 5:20 and hit return and the heading is black again. 5:24 Let's try one more change. 5:29 Try and figure out how to add a yellow background color to the headline. 5:31 Go ahead and pause this video and see if you can do it on your own. 5:35 First, I'll simply press the up arrow to bring up my previous command. 5:39 Then I'll backspace to the dot after the word style. 5:44 Now, we wanna to change the background color and since that's two words we'll 5:49 write it in camelcase like this, then we can set that equal to the string yellow. 5:55 And the heading background turns yellow. 6:05 Now, I'll let you change the background color back to white on your own. 6:07 Of course, you don't usually run JavaScript code inside a browser's 6:11 JavaScript console like this. 6:14 In fact, you'll usually make changes like this based on a user's interaction 6:15 with the page. 6:19 Clicking the headline for example might change the color of the headline. 6:20 That's the third part of interactive JavaScript responding to 6:23 actions like clicking, mousing over a button, scrolling or submitting a form. 6:27 I'll teach you about responding to actions called events 6:31 in the fourth part of this course but for 6:35 now let's look a little more closely at the document object in the next video. 6:37