Skip to content

Latest commit

 

History

History
82 lines (46 loc) · 3.14 KB

1-intro-console.md

File metadata and controls

82 lines (46 loc) · 3.14 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 say your name and introduce yourself to our class!


Example:

// Display a message in the console:
console.log("Liz - hi!");

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.



🏆 Great job! Next up: asking questions with comparison and logical operators!