Welcome and Overview

[MUSIC] 0:00 JavaScript is an exciting language you can use to power web servers, 0:04 create desktop programs, even control robots. 0:08 But JavaScript got its start in the browser way back in 1995. 0:11 It was created to make wepages responsive to mouse clicks and 0:15 other input from visitors. 0:18 And even though it's a popular all-purpose language, 0:19 you'll still find that JavaScript is the most important tool you have for 0:22 creating fun, interactive, and useful websites. 0:26 I'm Guil, a front-end teacher here at Treehouse. 0:29 In this course, 0:32 you'll learn how to bring webpages to life using the power of JavaScript. 0:32 Now this course assumes you know your way around JavaScript basics. 0:36 So make sure you complete the prerequisites for 0:40 this course before continuing. 0:42 So first up, let's take a look at a few examples of how JavaScript 0:44 lets you create interactive webpages that respond to a users actions. 0:47 Here's a site you've probably seen before, Wikipedia. 0:52 Wikipedia is an example of a static webpage. 0:55 There's no JavaScript here. 0:58 No interactivity. 1:00 Just text and links which is perfect for this site 1:01 because it's all about delivering paragraphs of textual information. 1:04 It's just meant to model a regular page, like a page in a book that you can read. 1:07 Next, let's check out this coding calculator. 1:12 Clicking a number button makes that number flash and appear in this display. 1:14 So I'm going to add 8 + 9. 1:19 And hit = and the number 17 appears. 1:22 So this is what I mean by interactivity. 1:26 When the page loads, JavaScript code tells the browser to listen for 1:29 button clicks and perform math in response to those clicks. 1:33 Then it alters the display to show that math as it's performed. 1:36 Now let's have a look at the fun website for the St. Louis Browns. 1:41 After the page loads, we can go to the upper right-hand corner and 1:45 click on the Menu. 1:49 Now when we click the button on the calculator, numbers appeared. 1:50 Clicking this button, makes changes to the screen too. 1:53 And we now see a menu. 1:56 So let's click Players. 1:57 Once this page loads, we can click on the letters along the bottom and 2:00 images slide to show corresponding players. 2:04 So now you can start to see how JavaScript can make websites more engaging and 2:08 pleasurable to use. 2:12 Let's look at one more example. 2:13 Google Sheets. 2:15 This is an example of a full blown application in a webpage. 2:16 You can type information into cells. 2:21 You can Right-click on cells to bring up various formatting options or 2:24 copy and paste. 2:29 You can also navigate menus for other functionality, 2:30 such as sorting or adding additional rows or even sheets. 2:33 All this interactivity is accomplished with JavaScript which is listening for 2:39 actions like clicks and then changing what we see based on those actions. 2:43 [BLACK_AUDIO] In this course, 2:48 you learn how to make your own static pages interactive with JavaScript. 2:53 You learned how to break interactivity into three basic actions. 2:57 Selecting elements on the page, manipulating elements, 3:01 and listening for user actions. 3:05 A webpage has many elements on it. 3:07 For example, the calculator app we looked at has a number of keys, 3:09 each of which is a separate element. 3:13 To know when someone is clicking on a three key and not a nine key, for 3:15 instance, you first have to use JavaScript to find all those key elements. 3:18 And sort out which one is which. 3:22 This process is called selection. 3:24 Once you have an element selected, you can manipulate it in some way. 3:26 Think about the St. Louis Browns' site. 3:29 On the player's page, when we clicked on a letter, it became darker and 3:31 a little circle appeared underneath it. 3:35 By sliding in from the previously clicked letter. 3:37 These elements were being manipulated, 3:39 or changed, which helped us know where we were on the site. 3:41 Not all elements you select will be manipulated. 3:45 Often, you'll want an element to listen to what a user is doing. 3:47 Think of the spreadsheet we looked at earlier. 3:51 Once a cell is selected, we want to know what the user types so 3:53 we can put that data into the cell. 3:56 By listening to the keyword, we can change the element appropriately. 3:59 These three actions are happening in all of the interactive examples we 4:02 just looked at. 4:06 So in this course, you'll learn how to take control of your webpages 4:07 by accessing something called the Document Object Model, or DOM, with JavaScript. 4:10 The DOM is really where all these actions take place. 4:15 Now there's so much to learn and we're gonna have fun in this course. 4:18 So let's get started. 4:21