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:
- Open browser
- Right click → Click Inspect
- Go to Console tab
In console:
- You can run simple code like:
10 + 10→ Output: 20- You can also run:
- alert("Hello JS")
This shows how JavaScript executes directly in the browser.
Important Note (Console)
- Console is useful for:
- Quick testing
- Small programs
- But:
- Code is not saved
- Code disappears after refresh
So, actual coding is done in files.
VS Code Editor
VS Code is used to write code.
Steps:
- Search VS Code (Visual Studio Code)
- Download and install
- Open it after installation
It allows:
- Writing code
- Managing files and folders
Creating First Project Folder
A folder is created to store project files.
Steps:
- Create a folder (example: JavaScript Tutorial)
- Open that folder in VS Code
Creating HTML File
To run JavaScript properly, an HTML file is required.
Reason:
- Browser needs an entry point
- Most of the time, JavaScript runs inside HTML
Basic structure:
- HTML tag
- Head section
- Body section
Example:
- You can add heading using
<h1>
Running HTML File
Steps:
- Open the HTML file in browser
- Output is displayed
Example:
- "Hello JavaScript" appears on screen
Adding JavaScript in HTML
JavaScript is added using the script tag.
Important:
- Code must be inside
<script></script> - If written outside, it will not work
Example:
- alert("Hello JS")
After refresh:
- Alert message appears
Important Note (Script Tag)
- Script tag is very important
- Common mistakes:
- Wrong spelling
- 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:
- Create file:
firstProgram.js - Extension must be
.js
Important:
- Do NOT use script tag inside JS file
Connecting JS File to HTML
To connect JS file, use script tag with src attribute.
Example:
Points:
- Write correct file name
- Only load JS file
After connecting:
- Code from JS file runs in browser
Running Multiple Codes
You can write multiple lines of code.
Example:
- alert("Hello")
- alert(10 + 30)
Both outputs will be shown.