Home Courses Hello World - Make first program

Hello World - Make first program

In this part, the focus is not on understanding code but on learning how JavaScript code runs. The goal is to understand how to create files and execute code in the browser. Everything will be learned step by step, so there is no need to worry about code details right now.


JS (JavaScript) Basics

JavaScript is often written as JS (short form). Both JS and JavaScript mean the same thing, so there is no confusion.


Running JavaScript in Browser

JavaScript can be directly executed inside the browser using developer tools.

Steps:

  1. Open browser
  2. Right click → Click Inspect
  3. Go to Console tab

In console:

  1. You can run simple code like:
  2. 10 + 10 → Output: 20
  3. You can also run:
  4. alert("Hello JS")

This shows how JavaScript executes directly in the browser.


Important Note (Console)

  1. Console is useful for:
  2. Quick testing
  3. Small programs
  4. But:
  5. Code is not saved
  6. Code disappears after refresh

So, actual coding is done in files.


VS Code Editor

VS Code is used to write code.


Steps:

  1. Search VS Code (Visual Studio Code)
  2. Download and install
  3. Open it after installation


It allows:

  1. Writing code
  2. Managing files and folders


Creating First Project Folder

A folder is created to store project files.

Steps:

  1. Create a folder (example: JavaScript Tutorial)
  2. Open that folder in VS Code


Creating HTML File

To run JavaScript properly, an HTML file is required.

Reason:

  1. Browser needs an entry point
  2. Most of the time, JavaScript runs inside HTML

Basic structure:

  1. HTML tag
  2. Head section
  3. Body section

Example:

  1. You can add heading using <h1>


Running HTML File

Steps:

  1. Open the HTML file in browser
  2. Output is displayed

Example:

  1. "Hello JavaScript" appears on screen


Adding JavaScript in HTML

JavaScript is added using the script tag.

Important:

  1. Code must be inside <script></script>
  2. If written outside, it will not work

Example:

  1. alert("Hello JS")

After refresh:

  1. Alert message appears


Important Note (Script Tag)

  1. Script tag is very important
  2. Common mistakes:
  3. Wrong spelling
  4. Not closing tag properly

Even if other HTML is removed, script tag is enough to run JavaScript.


Creating Separate JS File

When code becomes large, JavaScript is written in a separate file.

Steps:

  1. Create file: firstProgram.js
  2. Extension must be .js

Important:

  1. Do NOT use script tag inside JS file


Connecting JS File to HTML

To connect JS file, use script tag with src attribute.

Example:

<script src="firstProgram.js"></script>

Points:

  1. Write correct file name
  2. Only load JS file

After connecting:

  1. Code from JS file runs in browser


Running Multiple Codes

You can write multiple lines of code.

Example:

  1. alert("Hello")
  2. alert(10 + 30)

Both outputs will be shown.

Share this lesson: