This document outlines what tools we’ll be using during the class to complete exercises. It is recommended that you at least read the Prerequisites section below before the start of class.
All demos and lecture content will be conducted from within Google Chrome: it is recommended that you download and install Chrome prior to class.
All examples will be conducted from within Chrome – this is important because each browser’s console is different in:
- Appearance
- Function
- Keystrokes to open
If you are using Chrome, the demos and help that we give will be more relevant and familiar.
It is recommended that you memorize how to open a console with the appropriate keyboard shortcut. We’ll open and close the console frequently.
The console is a development tool that is used to quickly evaluate JavaScript code and debug programs (at least this is how we will be using it – there are other uses too!). A console can be opened in all web pages. Each browser has its own console, and they all behave slightly differently. You can read more about Chrome’s console here.
Code can be entered directly into the console:
You can use the up/down arrow keys on your keyboard to cycle through the console’s history:
(NOTE: Objects and arrays will be covered in lecture – if you don’t know what these are, don’t worry about this yet)
Arrays and objects can be expanded and viewed:
Working in Codepen
Codepen is an online tool that can be used to write JavaScript, HTML and CSS right from inside of your browser. No files, text editors or knowledge of how to set up a working development environment is required. We’ll be using Codepen for all of our exercises and the project. You can read more about Codepen here.
The default layout isn’t great, but it can be changed!
Fortunately, functions and variables defined in codepen can be accessed from the console.
Errors happen. Codepen will show a little red exclamation point in the lower right that can be clicked to help troubleshoot the error.
