Chapter 2: JavaScript Console

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

This is the textbook version of Lesson 2 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

← Chapter 1: Hello World

← Table of Contents

Overview

This lesson covers the following HTML, CSS, and JavaScript topics for the first time:

HTML

None.

CSS

None.

JS

1. console.log()

Again, to get the most from my lecture, please create a new Codepen and code along with me!

Don’t just watch me code! 👀

Lecture

The UI window is awesome because it shows us what our users will see from the code we write.

UI Window => Users

The Console window is also an awesome tool because it allows us to print messages to a location that only coders can see.

Coders => Console Window

This is especially helpful when we write our JavaScript code. Therefore, in this lesson, we will explore the Console in more detail.

To review, when we tell JavaScript to select the p element using this code:

JS Window:

document.querySelector("p")

We can’t tell it really works.

One way to tell is to simply copy this code into the Console:

Console Window:

document.querySelector("p")

And press Enter:

Console Window:

<p>Hello World</p>

This is what we have learned to do in the last lesson.

Another even better way is to use the command:

JS Window:

console.log()

Then inside the parentheses, we can specify what we want to be printed to the Console. In this case, we can also paste in the same code:

JS Window:

console.log(document.queryselector("p"))

There it is again:

Console Window:

<p>Hello World</p>

Remember, it can be anything.

For example, let’s say the number 3:

JS Window:

3

Without the command console.log(), we can’t see it in the Console:

Console Window:

[blank]

Just like the previous code, let’s add the command:

JS Window:

console.log(3)

And there it is:

Console Window:

3

How about the words:

JS Window:

"Hello World"

Again, without the command console.log(), they will not be printed to the Console.

Console Window:

[blank]

If we add it:

JS Window:

console.log("Hello World")

There they are:

Console Window:

"Hello World"

Hope you realize by now that texts need to be inside quotes!

More will be said about this in Unit 4! For now, please just commit this to memory.

Codepen

The finished Codepen for this lesson:

Summary

Let’s summarize what we have learned using MDN.

JavaScript gives us the command console.log() for us to print anything we want to see in the Console window.

console.log() => Console Window

This is very useful for coders because we can print things that only we can see.

Coders => console.log() => Console Window

In this lesson, we were able to use it to print:

1. a number
2. a phrase
3. and the p element that JavaScript selected using the code:

document.querySelector()

Concept Quiz

Take my Programming Concept Quiz to check your understanding! For every correct choice, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

Sample Quiz Questions for Lesson 2:

Question 1:

The Console window is intended only for the developers.

1. True
2. False

Question 2:

What JavaScript command do we use to print anything to the Console window?

1. console
2. console.log()

Question 3:

In JavaScript code, plain text needs to be inside quotes.

1. True
2. False

Question 4:

How would we log something to the Console?

1. console(something)
2. console.log(something)

→ Programming Concept Quiz for Chapter 2

Coding Exercises

Check out my Interactive Coding Exercises to put to practice what you have learned! There, you will also find interactive hints to help you understand each line of code. Likewise, for every correct solution, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

→ Interactive Coding Exercises for Chapter 2

Syntax Flashcards

Review what you have learned by playing my Syntax Flashcard Game! These flashcards are designed to help you commit to memory all the new code syntaxes you learned in this lesson.

Likewise, for every correct answer, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

→ Syntax Flashcard Game for Chapter 2

Next Steps

Congrats on completing Unit 1: Lesson 2 of 5! 🎉

Unit 1: 40% Completed
Unit 2: 0% Completed
Unit 3: 0% Completed
Unit 4: 0% Completed
Unit 5: 0% Completed
Bonus Unit 6: 0% Completed
Bonus Unit 7: 0% Completed

Overall Progress: 2% Completed

→ Join Remote Frontend Cohort Program

Next Lesson

In the next lesson, we will learn about an elegant way to organize HTML tags. As a tree structure, the HTML code becomes much more readable and performant. Also, both CSS code and JavaScript code can take advantage of this tree structure as well. Check out this lesson to learn more!

→ Chapter 3: Tree Structures in HTML, CSS and JavaScript

← Table of Contents

When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️