Now that you've had a week of playing with HTML and CSS, it's time to learn the final fundamental pillar of web development: JavaScript! JavaScript (JS) is the primary programming language of the web and we'll be using it a lot through the semester. The next 3 weeks, in fact, will be focused on learning how we can use JavaScript to interact with our HTML documents. This will set the stage for learning how to build with React!
A lot of the basic constructs of JS as a programming language are similar to what you've seen working with Python and Java. So instead of lecturing you on the details, this exercise is to help you get familiar with coding in JS. Additionally, you'll get some practice with the JS debugger built into Google Chrome!
Note: We strongly recommend you use Google Chrome for this class as we will use Chrome for all of our demos. That being said, most modern web browsers will have debuggers and tools of their own that you can look into using.
Due: 6 PM on Tuesday February 19 (Before lab!)
Submission:
Homework 1 - Homework 1 Submission
If you don't yet feel comfortable with the JavaScript language, we recommend warming up to some of the basics with this website:
This is an interactive exercise to help get you set up with the essentials of the language — from conditionals to function calls.
If you felt a little lost during the debugging section of last lecture, that's okay. Here's a quick refresher on how Chrome's JavaScript debugger works.
Open the debugging demo from where we left off from lecture here:
React DeCal: Lecture 2 - Debugging (Part 2)
Firstly, to open the debugger, open DevTools. DevTools is the pane that pops open when you right-click and select Inspect Element and can also be invoked with Command-option-J (macOS) and Ctrl-Shift-J (Windows/Linux).
You should see this pop open: