Chapter I · The Language

Writing Your First JavaScript

Writing your first script involves embedding executable logic into web documents or running it directly within developer environments.

01 Writing Your First JavaScript

JavaScript code can be executed directly inside browser developer consoles or included inside HTML files using the <script> element.

When the browser encounters script tags during document loading, it pauses or async-loads the instructions, handing them directly to the resident JavaScript engine for immediate execution.

02 Simple Example

A basic script that writes output to the debugging console.

index.html
<script>
  console.log("Welcome to JavaScript!");
</script>

Opening your browser's developer console displays this message immediately upon document evaluation.

03 How It Works

The hosting environment exposes standard utility objects like console, allowing scripts to communicate output back to developer interfaces.

<script> Tag Browser Engine Executes Code Console Output

Scripts embedded in HTML are passed straight to the browser engine for execution.

04 Step-by-Step

  1. Create an HTML container with a script block or reference an external file.

  2. Load the document inside a web browser or JavaScript runtime.

  3. The engine parses and evaluates code instructions sequentially.

  4. Functions like console.log output results to the developer console.

05 Mental Model

"Writing a script is like giving a set of direct choreography notes to an eager performer."

Every line executes precisely as written when the page environment cues the run sequence.

06 Common Mistakes

Putting a <script> tag in <head> with no defer/async. The browser will stop parsing the HTML, download the script, and run it before it continues building the page — which is why old-school JavaScript delayed page rendering. Modern code avoids this with the defer attribute (runs after parsing, in order) or async (runs as soon as it's downloaded, order not guaranteed).

Modern best practice: for new projects, use <script type="module" src="app.js"></script>. ES modules are deferred by default, support import/export, and automatically run in strict mode.

07 Interview Questions

Q: What are the two ways to attach JavaScript to an HTML page?

Inline via a referencing a separate file.

Q: Why is placing