Exercise 1 of 12: What does "interactive" look like?
1. In the code that comes with this book, open the following HTML file in a web browser:
Once open you should see a web page that looks something like the following:
2. The rabbit and turtle will start racing right away. Play around with stopping and restarting the animation.
Don't let the code overwhelm you. I simply want to point out where it lives on the HTML file. By no means do I expect you to understand it.
We will cover the following topics:
- HTML Element Selectors
- Event listeners
Next, open the DevTools.
2. Navigate to the Console. You'll find this panel just to the right of the Elements panel.
3. The Console is a panel in the DevTools where Chrome executes commands that you type there. The Console is not unique to Chrome. All major browsers have one.
4. Go ahead and type or copy-paste the following commands into the Console. Once added, press enter to execute the command.
Type what follows
In the following screenshots, you will see the word
undefined. This is what the browser returns after declaring a variable. You should be typing what follows the greater than
>symbol. The browser's response will come after the follows the less than
For the following command, go ahead and replace
Angel with your name.
5. The next couple of commands perform simple calculations. Go ahead and type these in the Console as well.
6. Next, we'll trigger a prompt message (a window that opens up asking you to fill something in). To do this, type the
prompt command into the Console with a message.
Now enter a response in the prompt that pops up and click "OK." Look back in the Console. You should see your response.
Console command: console.log()
We will be using the command
console.log(). It is a command provided by the browser, and prints messages inside of the Console panel (this is how error and warning messages find their way into the Console).
The console.log() command is very helpful and often used by developers when they are trying to figure out how to debug something. We will use this command later in the book, so I want to introduce you to it here.
Exercise 4 of 12: console.log()
1. In the Console, type
console.log("howdy") and then hit enter. The
console.log() command printed whatever you put inside the parentheses following it.