Skip to main content
Dan Rodney/1 min read

Setting Up

Add Interactivity to a Page

1

Select Elements

document.querySelector('.button') — modern alternative to $().

2

Listen for Events

el.addEventListener('click', handler).

3

Update the DOM

el.textContent, el.classList.add — direct manipulation.

4

Avoid Reflow Thrashing

Batch DOM reads then writes — performance matters.

Master JavaScript at Noble Desktop

Noble Desktop's JavaScript Development Certificate teaches modern JavaScript and React.

Dive into this comprehensive JavaScript & jQuery tutorial that guides you through setting up your class files, creating your personal copy of class files, and starting your exercises with your very own set of class files.

Complete the following setup prior to beginning any exercises.

Topics Covered in This JavaScript & JQuery Tutorial:

Setting up Your Class Files

Creating Your Own Copy of Class Files

Throughout this workbook you will be editing class files that we have prepared for you. Instead of editing the originals, we’ll have you make a copy just for yourself to edit.

  1. If you have any windows open, minimize or hide them so you can see the Desktop.
  2. Open the Class Files folder.

  3. Follow the appropriate Mac or Windows instructions below:

    Mac:

    • Click once on the JavaScript jQuery Class folder to select it.
    • Press Cmd–D to duplicate it.
    • Rename the duplicate folder yourname-JavaScript jQuery Class.

    Windows:

    • Click once on the JavaScript jQuery Class folder to select it.
    • Press CTRL–C to copy it.
    • Press CTRL–V to paste it.
    • The new copy may be at the bottom of the list of folders. Rename it yourname-JavaScript jQuery Class.

  4. You now have your own set of class files to use throughout the class. Have fun!