1 00:00:01,030 --> 00:00:03,190 An airplane cockpit has a lot of switches and 2 00:00:03,190 --> 00:00:06,390 dials the captain can use to maneuver the airplane. 3 00:00:06,390 --> 00:00:10,090 The captain can monitor the position of the plane, communicate with nearby base 4 00:00:10,090 --> 00:00:13,990 stations, take off, and land with all those controls. 5 00:00:13,990 --> 00:00:17,020 JavaScript's global environment it's kind of like a cockpit. 6 00:00:17,020 --> 00:00:20,230 It's full of controls your code can use to make things happen. 7 00:00:20,230 --> 00:00:23,780 These controls come in the form of JavaScript objects and functions and 8 00:00:23,780 --> 00:00:27,039 inside a browser they allow your code to see and manipulate web pages. 9 00:00:28,110 --> 00:00:31,850 We can explore this browser environment through a feature in the Chrome web browser 10 00:00:31,850 --> 00:00:33,620 called Developer Tools. 11 00:00:33,620 --> 00:00:37,510 Now, Internet Explorer Firefox and Safari all have similar features but 12 00:00:37,510 --> 00:00:39,440 I'll be using Chrome in this course. 13 00:00:39,440 --> 00:00:41,410 To follow along with me, launch the work space for 14 00:00:41,410 --> 00:00:44,770 this video or download the project files and use your preferred text editor. 15 00:00:46,460 --> 00:00:51,360 In your work space or project files, you should see a file called index.html. 16 00:00:51,360 --> 00:00:53,940 The file contains a heading one element 17 00:00:53,940 --> 00:00:58,000 with an id of my heading there's also a paragraph right below it. 18 00:00:58,000 --> 00:01:00,310 If we open the page in a web browser, 19 00:01:00,310 --> 00:01:03,330 you can see how the browser renders the headline and paragraph. 20 00:01:03,330 --> 00:01:06,320 So let's use the Developer Tools to investigate and 21 00:01:06,320 --> 00:01:08,760 interact with this page using JavaScript. 22 00:01:08,760 --> 00:01:12,540 Once you have the web page open in Chrome, you can find the Developer Tools in 23 00:01:12,540 --> 00:01:18,550 the top right menu by going to More Tools, then clicking Developer Tools. 24 00:01:18,550 --> 00:01:22,230 You should see a window open most likely at the bottom of your current window and 25 00:01:22,230 --> 00:01:25,150 there are tabs along the top of the window. 26 00:01:25,150 --> 00:01:27,790 So let's click on the Console tab. 27 00:01:27,790 --> 00:01:30,740 Here, we can type JavaScript code in real time and 28 00:01:30,740 --> 00:01:34,700 it will run as if we had written it into the current web page. 29 00:01:34,700 --> 00:01:37,960 You're probably familiar with the alert command. 30 00:01:37,960 --> 00:01:42,560 Alert is a browser function that shows a message window to the user. 31 00:01:42,560 --> 00:01:45,589 So let's try it out here, I'll type alert, 32 00:01:45,589 --> 00:01:49,588 then the message, ('I made the browser message me'). 33 00:01:53,581 --> 00:01:56,460 Once I hit Enter, I get my message. 34 00:01:56,460 --> 00:02:02,814 We can also see the current URL by typing location.href. 35 00:02:04,300 --> 00:02:08,670 Now, Chrome hides the http:// in the address bar, so 36 00:02:08,670 --> 00:02:14,310 we see that the URL in the console matches the URL in the address bar. 37 00:02:14,310 --> 00:02:16,890 Now, if you wanna be sure you could copy this URL and 38 00:02:16,890 --> 00:02:20,750 paste it in the address bar and it will just refresh the page. 39 00:02:20,750 --> 00:02:23,070 So where did alert and location come from? 40 00:02:23,070 --> 00:02:24,640 Well, we didn't create them and 41 00:02:24,640 --> 00:02:28,960 they aren't defined in any JavaScript file loaded by the HTML. 42 00:02:28,960 --> 00:02:33,320 These variables are part of the browser's global environment and 43 00:02:33,320 --> 00:02:35,870 are many more variables in the global environment. 44 00:02:35,870 --> 00:02:40,030 Global variables are actually properties of a single global object, 45 00:02:40,030 --> 00:02:42,780 which in browsers is called window. 46 00:02:42,780 --> 00:02:48,332 So lets type window into the console and see all the properties it contains. 47 00:02:48,332 --> 00:02:50,478 Here, we see the window object and 48 00:02:50,478 --> 00:02:55,055 Chrome's Developer Tools gives us a handy way to explore objects. 49 00:02:55,055 --> 00:02:57,625 If you click on the triangle icon, 50 00:02:57,625 --> 00:03:01,145 you can expand the object to see all of its properties. 51 00:03:01,145 --> 00:03:04,095 And notice how the window object has a lot of properties. 52 00:03:04,095 --> 00:03:07,985 These are all the controls the browser gives you with JavaScript. 53 00:03:07,985 --> 00:03:12,565 Now, if we scroll all the way down past these dimmed down options, 54 00:03:12,565 --> 00:03:14,455 we see the alert function here. 55 00:03:16,130 --> 00:03:20,030 Then further down, you'll see the location object. 56 00:03:21,170 --> 00:03:23,450 If you expand the location object, 57 00:03:23,450 --> 00:03:27,000 you can see the href property we looked at earlier. 58 00:03:27,000 --> 00:03:30,650 All these globals are properties on the window object. 59 00:03:30,650 --> 00:03:36,820 I'll demonstrate this by clearing the console by typing Ctrl+L then 60 00:03:36,820 --> 00:03:42,730 in the console, type window.alert and 61 00:03:42,730 --> 00:03:46,655 the message ('This is the same alert function'). 62 00:03:49,480 --> 00:03:50,660 And once you hit Enter, 63 00:03:50,660 --> 00:03:56,140 you'll see that window alert gives us a message box just like before. 64 00:03:56,140 --> 00:03:58,790 Next, let's look at another property of window. 65 00:03:58,790 --> 00:04:02,320 And this object and some of its properties are what we'll focus on for 66 00:04:02,320 --> 00:04:03,830 the rest of this course. 67 00:04:03,830 --> 00:04:07,650 It's called the document object and we can use it to select and 68 00:04:07,650 --> 00:04:11,010 control elements of the currently loaded web page. 69 00:04:11,010 --> 00:04:15,930 For example, let's change the color of this heading to purple. 70 00:04:15,930 --> 00:04:20,473 So in the console, I'll type 71 00:04:20,473 --> 00:04:25,567 document.getElementByID then 72 00:04:25,567 --> 00:04:30,130 target ('myHeading'). 73 00:04:30,130 --> 00:04:39,880 Then after that will say, style.color = and the heading changes to purple. 74 00:04:39,880 --> 00:04:44,910 So in this example, we use the getElementByID method 75 00:04:44,910 --> 00:04:50,550 on the document to select the H one element with the ID my heading. 76 00:04:50,550 --> 00:04:54,000 Then we changed it CSS color property to purple. 77 00:04:54,000 --> 00:04:58,340 Now, we'll go over this code more in depth soon so don't worry about it too much. 78 00:04:58,340 --> 00:05:01,850 The main thing to note here is that we selected the element or 79 00:05:01,850 --> 00:05:04,680 grabbed a hold of it then we manipulated it. 80 00:05:04,680 --> 00:05:08,490 This is a common sequence when controlling a web page with JavaScript. 81 00:05:08,490 --> 00:05:10,830 So let's change the heading back to black. 82 00:05:10,830 --> 00:05:15,600 If you press the up arrow, the console will give you the last command you ran. 83 00:05:15,600 --> 00:05:18,867 Now, if you keep pressing up you can dig further back into your history but 84 00:05:18,867 --> 00:05:20,088 we'll just press up once. 85 00:05:20,088 --> 00:05:24,999 Then we can backspace over purple, change it to black, 86 00:05:24,999 --> 00:05:29,690 and hit return and the heading is black again. 87 00:05:29,690 --> 00:05:31,460 Let's try one more change. 88 00:05:31,460 --> 00:05:35,030 Try and figure out how to add a yellow background color to the headline. 89 00:05:35,030 --> 00:05:37,520 Go ahead and pause this video and see if you can do it on your own. 90 00:05:39,920 --> 00:05:44,370 First, I'll simply press the up arrow to bring up my previous command. 91 00:05:44,370 --> 00:05:49,600 Then I'll backspace to the dot after the word style. 92 00:05:49,600 --> 00:05:55,213 Now, we wanna to change the background color and since that's two words we'll 93 00:05:55,213 --> 00:06:00,939 write it in camelcase like this, then we can set that equal to the string yellow. 94 00:06:05,130 --> 00:06:07,280 And the heading background turns yellow. 95 00:06:07,280 --> 00:06:11,040 Now, I'll let you change the background color back to white on your own. 96 00:06:11,040 --> 00:06:14,251 Of course, you don't usually run JavaScript code inside a browser's 97 00:06:14,251 --> 00:06:15,706 JavaScript console like this. 98 00:06:15,706 --> 00:06:19,340 In fact, you'll usually make changes like this based on a user's interaction 99 00:06:19,340 --> 00:06:20,370 with the page. 100 00:06:20,370 --> 00:06:23,830 Clicking the headline for example might change the color of the headline. 101 00:06:23,830 --> 00:06:27,070 That's the third part of interactive JavaScript responding to 102 00:06:27,070 --> 00:06:31,790 actions like clicking, mousing over a button, scrolling or submitting a form. 103 00:06:31,790 --> 00:06:35,210 I'll teach you about responding to actions called events 104 00:06:35,210 --> 00:06:37,150 in the fourth part of this course but for 105 00:06:37,150 --> 00:06:41,210 now let's look a little more closely at the document object in the next video.