Step: Basics | Players: None (beginners in programming welcome)

Learning Objectives

Understand in what environment JavaScript runs (browser, Node.js).
You can output the value with console.log and check the result.
You can connect JS to HTML using the <script> tag.
You can use the Console tab of the browser developer tools (DevTools).
Can explain the meaning and effects of "use strict" mode.

1. JavaScript execution environment

JavaScript originally started out as a language that ran in browsers, but now, thanks to Node.js, it's used almost everywhere, including servers, CLIs, and build tools. Even with the same code, the available APIs are different depending on the execution environment (e.g. window for browser, process for Node).

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

The above line works the same in both the browser console and Node node file.js.

2. Script connection and execution order

To run JS in HTML, use the <script> tag. If you attach the defer attribute, it is executed after HTML parsing is completed, making DOM access safe.

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

In the Node environment, run node src/01_console.js in the terminal.

3. Developer tools and debugging basics

Press F12 (or Cmd+Option+I) in your browser to open DevTools. You can immediately evaluate JS expressions in the Console tab, and set breakpoints in your code in the Sources tab. Debugging becomes much easier if you use console.log, console.table, and console.error according to the situation.

4. Strict mode

If you write "use strict"; at the top of the file, common mistakes (assigning a value to an undeclared variable, etc.) will be reported as errors. The ES module (type="module") is automatically strict.

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

Core example

file	Contents covered
`01_console.js`	Comparison of output of various `console` methods
`02_script_tag.js`	Loaded from HTML and output message to DOM
`03_devtools.js`	Debugging patterns used in DevTools
`04_strict_mode.js`	Check the effect of strict mode

⚠️ Common Mistakes

When writing l of console.log in capital letters (console.Log is an error).
If you just put <script> in <head> and want to access it when the DOM does not exist yet → use defer.
When ASI (Automatic Semicolon Insertion) operates incorrectly because a line is continued without a semicolon.
Call browser-specific APIs such as alert and document from Node executable file.
If you refresh your browser without saving the file and realize that the changes are not reflected.

❓ Frequently Asked Questions (FAQ)

Q1. Which is better to practice on: Node or the browser? A. While only handling input and output, node is fast and convenient. From the DOM section onwards, a browser is required.

Q2. Besides console.log, which one do you often use? A. console.table (array/object table), console.error (red output), and console.time/timeEnd (performance measurement) are useful.

Q3. Do I have to use strict mode? A. New code is automatically strict because it is usually written as an ES module. Writing it explicitly makes your intentions clear.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_console.jsJavaScript

/** Compare various console methods.*/
console.log("log: general message");
console.info("info: Informational message");
console.warn("warn: warning message");
console.error("error: 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.jsJavaScript

/** It is loaded with defer in index.html and outputs a message to the DOM.*/
const target = typeof document !== "undefined" ? document.getElementById("app") : null;

if (target) {
  target.textContent = "Script connected successfully!";
} else {
  console.log("This is a non-browser environment. It may be running as node .");
}

src/03_devtools.jsJavaScript

/** Patterns that can be used in DevTools Console.*/
const user = { name: "Grace", age: 36, role: "admin" };

console.log("Object:", user);
console.dir(user);          //View an object's property tree
console.assert(user.age >= 18, "Must be an adult");
console.group("user information");
console.log("Name:", user.name);
console.log("Role:", user.role);
console.groupEnd();

src/04_strict_mode.jsJavaScript

"use strict";
/** In strict mode, an error occurs if you assign to an undeclared variable.*/
try {
  //If you uncomment the line below, a ReferenceError occurs.
  // undeclared = 10;
  const value = 10;
  console.log("Normal operation even in strict mode:", value);
} catch (err) {
  console.error("An error occurred:", err.message);
}

src/index.htmlHTML

<!DOCTYPE html>
<html lang="ko">
  <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>

Assignment

homework_01.js

Print your name, favorite language, and one-line resolution as console.log, console.info, and console.warn, respectively.
Finally, try printing the above three items as an object with console.table.

homework_02.html

Link external scripts that use the defer property.
The script should change the text of a specific element on the page to "Hello, !".
Open in your browser to check the results.

The reference solution is shown below.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.jsJavaScript

/** Output self-introduction using various console methods.*/
const profile = {
  name: "Hong Gil-dong",
  language: "JavaScript",
  motto: "Let’s code at least one line every day",
};

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

homework_02.htmlHTML

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

Getting Started with JavaScript