Skip to content

1-intro-console.md

Latest commit

 

History

History
90 lines (49 loc) · 3.57 KB

1-intro-console.md

File metadata and controls

90 lines (49 loc) · 3.57 KB

Part 1: Intro and using the console

Time to tinker with code and break stuff! Today we'll work together on several practice challenges.

🏆 For all of these challenges, the goal is have fun! It doesn't matter if you're correct or not. Like they say, we learn more from our failures than from our successes. So let's have fun "failing", breaking things on purpose, and learning from the experience!

We'll be using the following tools to run and test our code today:

  1. Run your code directly inside your web browser's JavaScript console (see our 4 min video on the console in Chrome: https://youtu.be/O_sJE_3jKZ4)

  2. We'll also use Glitch to collaboratively edit the same code, in real time!

Glitch also lets us create, test, and share web apps using HTML, CSS, and JavaScript files all within the web browser (see our 6 min video introducing Glitch: https://youtu.be/juqFTEoHN2Q)

First: How to open your web browser's JavaScript console

📺 You can also review our 4 min video on the console in Chrome: https://youtu.be/O_sJE_3jKZ4


Keyboard shortcuts to open your browser's console:

Chrome Firefox Safari
Windows: Ctrl + Shift + J Ctrl + Shift + K
Mac: Cmd + Opt + J Cmd + Opt + K Cmd + Opt + C

Once your browser console is open, it should look something like this in the Chrome browser:

consoleexample


Group warmup

⭐ Click here to open our shared Glitch project, where we'll all be writing code together for our first couple of challenges!

Glitch lets us write code together in real time, so we can see each other typing at the same time (just like Google Docs)!

Then be sure to click on script.js (in the left-side menu) to look at our JavaScript file.

Our ice breaker warm-up activity: Copy-paste the sample code in the JavaScript file and change the text a little bit to introduce yourself to our class!


Example:

// Display a message in the console:
console.log("Hi, I'm Liz! I do freelance web dev, teach coding classes, and run meetup groups. :)");

Displaying messages from your code into the console

You'll see that console.log() allows us to display a message (or the value of some data!) inside the web browser's console! The code console.log("hi") would display the following inside your browser's console:

consolelog-hi


This is a very useful tool for developers to see what's going on inside the code, since we can't see the computer's memory directly. If you didn't use console.log(), the variable would be stored in memory, but we wouldn't see it appear anywhere.


Group Challenge 2:

Let's take the code from the previous challenge and break it several different ways!


Then discuss (in other words, take random guesses and talk about your ideas!):

  1. Which words or symbols can we change without breaking the code?

  2. Which words/symbols need to stay the same?

  3. Does the order matter for each of our two lines of code? Why or why not?


🏆 Great job! Next up: Interacting with the web page (Document Object Model)