Adding Interactivity with JavaScript

I hope you've enjoyed learning about and using the JavaScript language so far. 0:00 I know you've been waiting to see how you can use JavaScript to take control of your 0:04 webpage's content. 0:08 Now you can do just that with one line of code in your browser console. 0:10 Copy and paste the code in the teacher's notes, or 0:15 pause the video once I've written it so you can type it in yourself. 0:18 I promise, this won't break anything. 0:23 In the console, write document.body.contentEditable = true. 0:27 Don't forget to press Enter. 0:34 Now, try clicking the title of your profile card. 0:39 Whoa, a text cursor. 0:43 And we can delete text and add in the text we want. 0:46 What you've just done is change the property of the body of the webpage. 0:51 Content editable, this controls whether or not the content of a page is editable. 0:55 By setting it to the Boolean value true, 1:00 you're now able to edit any of the text content on the page. 1:03 Keep in mind that you're only changing your own browser and 1:07 not editing the website, as you can see when we refresh. 1:10 You've just learned one of the many ways we can use JavaScript to add 1:17 interactivity to a page. 1:21 The browser's JavaScript console is great for experimenting and 1:23 practicing with JavaScript code, just like you did in this workshop. 1:26 You'll usually put your JavaScript code into a file that's separate from your HTML 1:31 file, like you would a CSS file, for example. 1:35 In our JavaScript courses, you'll learn how and 1:38 where to link a JavaScript file to an HTML file. 1:41 You'll also learn how to do things like program page elements to trigger 1:45 specific actions based on user interactions like clicking and scrolling. 1:49 In the back-end, you can use JavaScript to define and manage data, 1:55 communicate with servers, and much more. 1:59 There's so much to learn about JavaScript. 2:02 Along the way, remember the importance of experimenting and practice. 2:05 Like any language, the more you practice, the more fluent you become. 2:10 And when you don't use it, the language can fade away. 2:15 Thanks for exploring JavaScript with me. 2:18 Happy learning. 2:21

You need to sign up for Treehouse in order to set up Workspace

Sign up