2 . 1 - Console

2.1 - Console vs. Document

2.2 - Variables & Math

2.3 - Functions

2.4 - Function Parameters

2.5 - Connecting HTML to Functions

2.6 - Stay tuned...

Front-End (👀): This is where the magic happens right before your eyes! HTML is the star of the show—it's the shiny stuff that users see and interact with. Just remember, it’s not a programming language; it’s more like the beautiful storefront of your favorite shop! 🏪✨

📄 What’s in the Document? That’s what users engage with—text, images, and all the goodies that make a site fun!

Back-End (💻): Now, here’s where the programmers work their magic behind the curtain! Enter JavaScript, the unsung hero controlling the flow of data and user interactions. It’s like the backstage crew making sure everything runs smoothly! 🎭✨

JavaScript has its own secret lair—the developer console—where all the cool stuff happens, but users usually don’t get to peek in there! 🔍

So, remember: the Front-End is all about what users see, while the Back-End is where the real power lies! Let’s go create some web wonders! 🚀

2 .1 a - 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 b - 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.tsn.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?

Page updated

Google Sites

Report abuse