Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll

Hello Full Stack JavaScript

Well done!

You have completed Hello Full Stack JavaScript !

Sign up for Treehouse Back to Library

Adding Interactivity with JavaScript

2:23 with Reggie Williams

Front-end Developers and Full Stack developers use JavaScript to provide pages with the ability to respond to user interaction. With as little as one line of JavaScript, we can make major changes to the appearance and interactivity of a website.

Code Snippet

document.body.contentEditable = true

Further Reading

W3 Schools contentEditable docs

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 download course files.

    Sign up

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

      Sign up