⚡

Basics

Basics · Prerequisite: none (programming beginners welcome)

01. Getting Started with JS

JavaScript started life as a browser language, but thanks to Node.js it now runs on servers, CLI tools, build pipelines — almost everywhere. The same code can run in different environments, but the available APIs differ (e.g. `window` in the browser, `process` in Node).

JavaScriptenvironmentconsolestrict

Duration

⏱ ~1 hour

Level

📊 Beginner

Prerequisite

🎯 None

OUTCOME

What you'll learn

1Understand the environments where JavaScript runs (browser, Node.js).
2Print values with `console.log` and read the result.
3Connect JS to HTML with a `<script>` tag.
4Use the Console tab in the browser DevTools.
5Explain what `"use strict"` mode does.

Overview

Core Concepts

1. JavaScript runtime environments

javascript

console.log("Hello, JavaScript!");

That one line works the same in a browser Console and via `node file.js`.

2. Linking scripts and execution order

To run JS from HTML you use a `<script>` tag. Adding the `defer` attribute makes the script wait until HTML parsing is finished, which is safer for DOM access.

html

<script src="src/01_console.js" defer></script>

In Node you run it from the terminal with `node src/01_console.js`.

3. DevTools and basic debugging

Press F12 (or Cmd+Option+I) in the browser to open DevTools. The Console tab evaluates JS expressions on the spot, and the Sources tab lets you set breakpoints. Switching between `console.log`, `console.table`, and `console.error` makes debugging much easier.

4. Strict mode

Putting `"use strict";` at the top of a file turns common mistakes (like assigning to an undeclared variable) into errors. ES modules (`type="module"`) are strict automatically.

javascript

"use strict";
x = 10; // ReferenceError: x is not defined

Examples

File	What it covers
`01_console.js`	Comparing different `console` methods
`02_script_tag.js`	Loaded from HTML to write into the DOM
`03_devtools.js`	Debugging patterns useful in DevTools
`04_strict_mode.js`	Effects of strict mode

src/01_console.js

javascript

/** Compare the different console methods. */
console.log("log: a normal message");
console.info("info: an informational message");
console.warn("warn: a warning");
console.error("error: an error message");

const users = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];
console.table(users);

console.time("loop");
let sum = 0;
for (let i = 0; i < 1000; i += 1) sum += i;
console.timeEnd("loop");
console.log("sum =", sum);

src/02_script_tag.js

javascript

/** Loaded with defer from index.html and writes into the DOM. */
const target = typeof document !== "undefined" ? document.getElementById("app") : null;

if (target) {
  target.textContent = "Script connected successfully!";
} else {
  console.log("Not running in a browser — probably under node.");
}

src/03_devtools.js

javascript

/** Patterns that are handy in the DevTools Console. */
const user = { name: "Grace", age: 36, role: "admin" };

console.log("object:", user);
console.dir(user);          // explore the property tree
console.assert(user.age >= 18, "must be an adult");
console.group("user info");
console.log("name:", user.name);
console.log("role:", user.role);
console.groupEnd();

src/04_strict_mode.js

javascript

"use strict";
/** In strict mode, assigning to an undeclared variable throws. */
try {
  // Uncomment the next line to trigger a ReferenceError
  // undeclared = 10;
  const value = 10;
  console.log("strict mode still runs fine:", value);
} catch (err) {
  console.error("error:", err.message);
}

src/index.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01. Getting Started with JS</title>
    <script src="02_script_tag.js" defer></script>
  </head>
  <body>
    <h1>Getting Started with JS</h1>
    <p id="app">Loading script...</p>
  </body>
</html>

Common Mistakes

Writing `console.Log` with a capital L — that throws.
Putting `<script>` in `<head>` without `defer` and trying to access the DOM before it exists — use `defer`.
Skipping semicolons so ASI (automatic semicolon insertion) parses lines the wrong way.
Calling browser-only APIs like `alert` or `document` in a Node script.
Forgetting to save the file before refreshing the browser, so the change isn't reflected.

FAQ

Q1. Should I practice in Node or the browser?

While you're focused on I/O, `node` is faster and simpler. Once you reach the DOM chapter, the browser is required.

Q2. What do you use besides `console.log`?

`console.table` (formatted arrays/objects), `console.error` (red output), and `console.time/timeEnd` (timing) are all useful.

Q3. Do I really need strict mode?

New code usually uses ES modules, which are strict automatically. Writing it explicitly makes the intent clearer.

Practice

`homework_01.js` — Print three lines of self-introduction using three different console methods.
`homework_02.html` — Build a page that loads an external JS file with `defer` and shows a message.

homework/README.md

## homework_01.js

Print your name, your favorite language, and a one-line motto via `console.log`, `console.info`, `console.warn` respectively.
Then print all three as an object using `console.table`.

## homework_02.html

Connect an external script with the `defer` attribute.
The script must replace the text of a specific element with "Hello, <name>!".
Open the page in a browser to verify.

See the `answer/` folder for solutions.

homework/answer/homework_01.js

javascript

/** Self-introduction with different console methods. */
const profile = {
  name: "Hong Gildong",
  language: "JavaScript",
  motto: "Code at least one line every day",
};

console.log("name:", profile.name);
console.info("favorite language:", profile.language);
console.warn("motto:", profile.motto);
console.table(profile);

homework/answer/homework_02.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Homework 02</title>
    <script defer>
      document.addEventListener("DOMContentLoaded", () => {
        const name = "Hong Gildong";
        document.getElementById("greeting").textContent = `Hello, ${name}!`;
      });
    </script>
  </head>
  <body>
    <h1 id="greeting">Loading...</h1>
  </body>
</html>

Next Lecture

[02_Variables_and_Types](../02_변수와_타입/) — Learn the containers and types that hold your data.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗