2.1 -Console vs. Document

🛑 STOP!!! Do not open the repository for this lesson until instructed!!! 🛑

Front-End vs. Back-End

HTML is the front-end of a program. It is what the user sees and interacts with. It is not a programming language.
- 📄 The document is what the user sees.

JavaScript is the back-end code used to control the flow of data and interaction with the user.
- JavaScript has a developer console that the user typically does not see.

2.0 - Commands in Code

A command in code - also called a function or procedure - always has parentheses at the end. This goes for 99% of programming languages.

Sometimes the function has extra options and sometimes it doesn't:

jump()
sleep_in_hours(8)
colour_RGB(150, 255, 0)
print("I love to code!")
exit()

2.1 - The Console vs. The Document

Developers need a way to leave messages for themself and test information.

Most programming languages have a console to print text and numbers (data).
- In python, the command to print is print()
- In C++ it's std::cout <<
- In Java it's System.out.println()

JavaScript has a dedicated console built into the browser
- The command to print something is console.log()

Very similar formatting can be used in most languages to add new lines (\n) or tabs (\t) along with other things. These are called escape sequences.

Let's see the JavaScript Console:

Open a chrome browser window and visit www.brash.ca.
Then hit CTRL+SHIFT+J (on a Mac it's OPTION+COMMAND+J)
This will be different for other browsers - if you aren't using Chrome, you're on your own.
It should bring up the developer tools and it should have highlighted the "console" tab. The "console" is like the brain of JavaScript, taking commands and giving output.
Click into the console where you see a ">" chevron, this is the terminal (console) waiting for a command.
Type console.log("Hello World!") and hit enter.
Now try console.log("Hello\nWorld!") or console.log("Hello\tWorld!")
You can clear it with console.clear()

The DOCUMENT (HTML) can be modified using JavaScript code!

Notice we had to use console. and then a command? We can to the same thing with document. (but the commands are different.

Go to the console and enter document.write("Hello World!<br>I'm coding!") ... see where the output goes.
How about document.title = "I am in control."

❓ Why did that last one look different?

Today's Task(s)

HOUSE-KEEPING:

Good news! I think I found a way to hide the LICENSE file and the .vscode and .devcontainer folders. This repo is a test for that.
We will also be switching to a different preview extension. Uninstall the Live Preview extension and install the Live Server one (done for you in the Codespace).

Read and follow the instructions in "2.1 - Output & the Console"

Did you know?

The skills you are learning in JavaScript transfer directly to about 30 other programming languages. Don't hate on JavaScript - it's an excellent scripting language.

Report abuse