JavaScript Everywhere

[MUSIC] 0:00 Hi, everyone. 0:09 I'm Guil, a developer and JavaScript teacher here at Treehouse. 0:10 I'm really excited to teach you the basics of JavaScript. 0:13 JavaScript is a great first programming language to learn. 0:16 It's fun, versatile and you can use it in any web browser, 0:19 which means that you can get up and running doing useful things right away. 0:22 JavaScript started live as a simple scripting language intended to 0:27 add engaging interactive features to web pages. 0:30 However, JavaScript's grown into a powerful, general purpose programming 0:33 language that's used on nearly every website in the world. 0:37 And in all phases of development, from software to hardware, 0:40 making it one of the most in demand developer skills. 0:43 So it's a great time to be learning JavaScript. 0:46 Let me take you through some of the places you can find JavaScript, 0:49 then we'll jump into a quick programming example. 0:53 Developers have always used JavaScript to add fun and useful features to webpages. 0:56 The most common place you'll encounter JavaScript is on the web, 1:01 where it's used to create every thing from engaging photo, and video galleries, 1:05 like a pop up or scrolling gallery. 1:09 To complex animated experiences, 1:11 like this interactive photo gallery shaped like a disco ball. 1:13 With JavaScript, you can create immersive web experiences and 1:19 make ordinary web experiences like signing up at a site and 1:23 filling in a form more exciting and delightful. 1:27 You can even make games using HTML, CSS and JavaScript like in these examples. 1:34 Developers use JavaScript for more than just adding visual flair to a website. 1:40 Many of the world's top websites and apps use JavaScript for useful functionality. 1:45 For instance, web applications like Google Maps, Gmail, and 1:49 Google Docs depend on JavaScript. 1:53 Many tasks, like creating an email or document, titling a document and adding 1:55 numbers and calculations to a spreadsheet for example, are done using JavaScript. 2:00 One of the best part about getting started with JavaScript, 2:06 is that because it's implemented in a web browser, 2:09 you don't need additional tools or setup to get going. 2:11 Let me show you a fun example. 2:14 In fact, you can cut along if you like by launching the workspace with this video. 2:15 In the workspace, open the preview.js file located inside the JS folder. 2:19 Don't worry about what any of the code in this file means right now. 2:25 You'll learn more about what each part of this code does, and 2:28 have a chance to do lots of programming with JavaScript throughout the course. 2:31 This is a JavaScript file containing a short program that asks the user by name. 2:34 Hi, want to see something cool? 2:40 Then it replaces all the content on whatever webpage they're visiting with 2:43 a Welcome headline and an animated GIF. 2:48 First I'll replace the text inside these quotes with my name, 2:50 and now I'll run the script in the browser. 2:55 In fact, I'll try it on a live website. 2:59 A quick and easy way to run JavaScript is in the web browser's developer tools using 3:01 a tool called the JavaScript Console. 3:05 One way to open the console is with the keyboard shortcut CMD+OPTION+J on a Mac, 3:08 or CTRL+SHIFT+J on Windows. 3:13 You're going to use the console all throughout the course to run and 3:15 test JavaScript code, identify and 3:19 fix errors, as well as display messages from within your program. 3:21 The console lets you interact with the webpage you're currently on, so I can 3:25 try this script on just about any website by pasting this code into the console. 3:30 For instance, I'll run the script on the MDN web docs site, 3:35 which is one of the best resources on web technologies, just for fun. 3:38 I'll copy all the code from my file and 3:42 paste it into the console, then press Enter or Return. 3:46 We see a dialogue box pop up on the page that says Hi Guil, 3:52 want to see something cool? 3:55 I wanna click OK, everything on the page disappears. 3:58 The webpage's HTML, CSS, and JavaScript is replaced by the headline and an image. 4:02 And notice that this is only temporary. 4:07 When you refresh the browser, everything comes back. 4:09 I can make this script a little more useful and interactive by allowing 4:13 any user to enter their name into an input field and display it on the page. 4:17 I'll replace my name inside quotes with prompt, and 4:21 the message What is your name? 4:26 And let's see what this does. 4:33 I'll copy my updated code, then paste the code into the console, and press Enter. 4:35 Now a dialog box appears that asks, What is your name? 4:43 Or enter Guil and click OK, And 4:47 now the alert dialogue says, Hi Guil, want to see something cool? 4:53 When I click OK, again everything on MDN doc's page disappears and 4:58 gets replaced by the welcome headline and GIF. 5:04 Neat. 5:08 This is another advantage of learning JavaScript as your first programming 5:09 language. 5:13 You can get instant feedback in the browser with a minimal amount of 5:13 JavaScript code. 5:17 I'll refresh the page, now all the content is back. 5:18 And JavaScript isn't just limited to the web browser. 5:23 You can also use JavaScript outside of the browser, even on web servers. 5:26 For example, Node js is a popular choice for 5:30 writing JavaScript that runs on the server. 5:32 Node offers great performance and easily handles lots of simultaneous users. 5:35 It's a favorite of big companies like PayPal, LinkedIn and 5:40 Netflix who use Node to serve up at least some portion of their websites. 5:43 There are even complete desktop applications written in JavaScript. 5:48 For example, Slack, GitHub desktop, the Visual Studio, 5:51 Code Editor and Discord are all written with JavaScript. 5:54 You'll learn a whole lot more about Node JS in later courses, and 5:58 you'll need to study a lot and work hard to build the next Slack or Discord. 6:01 But the basics you're going to learn in this course will provide the foundations 6:05 for building complex user interfaces and 6:09 software that's usable by everyone on just about any device. 6:11 And with just the basics, 6:14 you can start using JavaScript in all sorts of fascinating in meaningful ways. 6:16