Gain practical skills in JavaScript and jQuery with the assurance of personalized class files to work with. This tutorial guides you through setting up and customizing class files, essential for anyone keen on a career in front end development.
Key Insights
- The tutorial covers the process of setting up class files for JavaScript & jQuery exercises.
- Trainees will be editing copies of the original class files, not the originals themselves.
- The tutorial provides specific instructions for both Mac and Windows users.
- Mac users can duplicate the class folder by pressing Cmd-D and then rename it.
- Windows users can copy the class folder by pressing Ctrl-C, paste it using Ctrl-V, and then rename the new copy.
- At the end of the setup, trainees will have their own set of class files for use throughout the course.
This exercise is excerpted from Noble Desktop’s past JavaScript training materials. Noble Desktop now teaches JavaScript and the MERN Stack in our Full Stack Development Certificate. To learn current skills in web development, check out our coding bootcamps in NYC and live online.
Add Interactivity to a Page
-
Select Elements
document.querySelector('.button') — modern alternative to $().
-
Listen for Events
el.addEventListener('click', handler).
-
Update the DOM
el.textContent, el.classList.add — direct manipulation.
-
Avoid Reflow Thrashing
Batch DOM reads then writes — performance matters.
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.
- If you have any windows open, minimize or hide them so you can see the Desktop.
- Open the Class Files folder.
-
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.
You now have your own set of class files to use throughout the class. Have fun!
