Skip to content

Commit 7c7dd7a

Browse files
Pankaj-StrPankaj-Str
authored
Update 01. JavaScript Introduction.md
1 parent 7c5afb6 commit 7c7dd7a

1 file changed

Lines changed: 130 additions & 48 deletions

File tree

‎01. JavaScript Introduction.md‎

Lines changed: 130 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,132 @@
11
# 1- Getting Started With JavaScript
22
***
3-
JavaScript is not something you need to install separately like a software program; it's already built into modern web browsers. To create and run a basic JavaScript program, you only need a text editor and a web browser. Here's a simple guide to creating your first JavaScript program:
4-
5-
1. **Text Editor:**
6-
Choose a text editor to write your JavaScript code. You can use popular text editors like Visual Studio Code, Sublime Text, Atom, Notepad++, or even a plain text editor like Notepad on Windows or TextEdit on macOS.
7-
8-
2. **Create an HTML File:**
9-
Create an HTML file where you'll include your JavaScript code. You can do this by opening your text editor and creating a new file with a ".html" extension. For example, you can name it `index.html`.
10-
11-
3. **Write the HTML Structure:**
12-
In your `index.html` file, write the basic structure of an HTML document, including an opening and closing `<html>`, `<head>`, and `<body>` tags. Here's a simple example:
13-
14-
```html
15-
<!DOCTYPE html>
16-
<html>
17-
<head>
18-
<title>My First JavaScript Program</title>
19-
</head>
20-
<body>
21-
<!-- Your JavaScript code will go here -->
22-
</body>
23-
</html>
24-
```
25-
26-
4. **Adding JavaScript Code:**
27-
Inside the `<body>` section of your HTML file, you can include JavaScript code within `<script>` tags. You can place the `<script>` tags in the `<head>` or at the end of the `<body>` section. Here's an example of adding a basic JavaScript program that displays a message:
28-
29-
```html
30-
<!DOCTYPE html>
31-
<html>
32-
<head>
33-
<title>My First JavaScript Program</title>
34-
</head>
35-
<body>
36-
<script>
37-
// Your JavaScript code goes here
38-
alert('Hello, JavaScript!');
39-
</script>
40-
</body>
41-
</html>
42-
```
43-
44-
5. **Save the File:**
45-
Save your `index.html` file after adding the JavaScript code.
46-
47-
6. **Open in a Web Browser:**
48-
Locate your `index.html` file and open it with your preferred web browser (e.g., Google Chrome, Mozilla Firefox, or Microsoft Edge). You should see an alert message saying "Hello, JavaScript!"
49-
50-
That's it! You've created and executed a basic JavaScript program in an HTML document. As you continue to learn JavaScript, you can add more complex code and interact with the HTML document's content and structure. You can also link external JavaScript files and build interactive web applications as you become more proficient.
3+
# : Running Your First "Hello, World!" Program
4+
5+
This tutorial walks you through creating and running a "Hello, World!" program in JavaScript, designed for absolute beginners. We’ll cover two methods: running JavaScript in a web browser and using Node.js. Each step is detailed to ensure clarity.
6+
7+
## What is JavaScript?
8+
JavaScript is a programming language used to make websites interactive. It runs in browsers (e.g., Chrome) and can also work outside browsers with Node.js. This tutorial focuses on writing and running a simple program that outputs "Hello, World!".
9+
10+
## Prerequisites
11+
- A computer with a web browser (e.g., Google Chrome).
12+
- A text editor (Notepad is fine, but Visual Studio Code is recommended—free at [code.visualstudio.com](https://code.visualstudio.com/)).
13+
- Optional: Node.js (we’ll guide you through installation for Method 2).
14+
- No coding experience needed.
15+
16+
## Method 1: Running "Hello, World!" in a Web Browser
17+
This method uses a browser to run JavaScript, displaying the output in the browser’s console.
18+
19+
### Step 1: Create a New File
20+
1. Open your text editor (e.g., Notepad or VS Code).
21+
2. Create a new file and name it `index.html`. Save it in a folder, like `C:\Users\YourName\Documents\JS_Tutorial`.
22+
23+
### Step 2: Write the HTML and JavaScript Code
24+
1. Copy and paste the following code into `index.html`:
25+
```html
26+
<!DOCTYPE html>
27+
<html lang="en">
28+
<head>
29+
<meta charset="UTF-8">
30+
<title>My First JavaScript Program</title>
31+
</head>
32+
<body>
33+
<h1>Hello, World! Program</h1>
34+
<script>
35+
console.log("Hello, World!");
36+
</script>
37+
</body>
38+
</html>
39+
```
40+
2. Save the file (`Ctrl+S` or `File > Save`).
41+
42+
**What’s happening here?**
43+
- `<!DOCTYPE html>`: Declares the file as HTML.
44+
- `<script>`: Contains JavaScript code.
45+
- `console.log("Hello, World!");`: Prints "Hello, World!" to the browser’s console.
46+
47+
### Step 3: Open the File in a Browser
48+
1. Navigate to your folder (e.g., `C:\Users\YourName\Documents\JS_Tutorial`).
49+
2. Double-click `index.html` to open it in your default browser, or drag the file into an open browser window (e.g., Chrome).
50+
3. The browser will display a page with the heading "Hello, World! Program".
51+
52+
### Step 4: View the Output in the Console
53+
1. Open the browser’s Developer Tools:
54+
- On Chrome: Right-click the page, select **Inspect**, or press `Ctrl+Shift+I` (Windows) or `Cmd+Option+I` (Mac).
55+
- Go to the **Console** tab.
56+
2. You should see "Hello, World!" in the console.
57+
3. If you don’t see it, check for typos in the code or ensure the file was saved.
58+
59+
### Step 5 (Optional): Display Output on the Web Page
60+
1. To show "Hello, World!" directly on the page, modify the `<script>` section in `index.html`:
61+
```html
62+
<script>
63+
document.write("Hello, World!");
64+
</script>
65+
```
66+
2. Save the file and refresh the browser (`F5` or `Ctrl+R`).
67+
3. The text "Hello, World!" will appear on the web page below the heading.
68+
69+
## Method 2: Running "Hello, World!" with Node.js
70+
This method runs JavaScript outside a browser using Node.js, displaying output in a terminal.
71+
72+
### Step 1: Install Node.js
73+
1. Visit [nodejs.org](https://nodejs.org/) and download the "LTS" version (e.g., 20.17.0 as of now).
74+
2. Run the installer and follow the prompts (accept defaults).
75+
3. Verify installation:
76+
- Open a terminal:
77+
- Windows: Press `Win+R`, type `cmd`, and press Enter.
78+
- Mac: Open Terminal from Applications > Utilities.
79+
- Linux: Open your terminal app.
80+
- Type `node -v` and press Enter.
81+
- You should see a version number (e.g., `v20.17.0`). If not, reinstall Node.js.
82+
83+
### Step 2: Create a JavaScript File
84+
1. Open your text editor and create a new file named `hello.js`.
85+
2. Add the following code:
86+
```javascript
87+
console.log("Hello, World!");
88+
```
89+
3. Save the file in your folder (e.g., `C:\Users\YourName\Documents\JS_Tutorial`).
90+
91+
### Step 3: Run the Program
92+
1. Open a terminal and navigate to your folder:
93+
- Type `cd C:\Users\YourName\Documents\JS_Tutorial` (adjust the path as needed) and press Enter.
94+
- Verify you’re in the right folder by typing `dir` (Windows) or `ls` (Mac/Linux) to see `hello.js`.
95+
2. Run the program:
96+
- Type `node hello.js` and press Enter.
97+
- You should see "Hello, World!" printed in the terminal.
98+
99+
## Troubleshooting
100+
- **Browser Console Empty**:
101+
- Ensure the `<script>` tag is correct and the file is saved.
102+
- Reload the page (`F5`) and check the Console tab.
103+
- **Node.js Error: "node is not recognized"**:
104+
- Reinstall Node.js and ensure it’s added to your system’s PATH.
105+
- Restart your terminal or computer.
106+
- **File Not Found**:
107+
- Check that `hello.js` is in the folder and the terminal is in the correct directory (`dir` or `ls` to confirm).
108+
- **Typos**:
109+
- JavaScript is case-sensitive. Ensure `console.log` is written exactly as shown.
110+
111+
## Experiment
112+
- Change the message in `console.log("Hello, World!");` to something like `console.log("Hi, I’m learning JavaScript!");` and rerun.
113+
- In the browser, try `alert("Hello, World!");` to show a pop-up (replace `console.log`).
114+
- Add multiple lines, like:
115+
```javascript
116+
console.log("Hello, World!");
117+
console.log("This is my first program!");
118+
```
119+
120+
## What You’ve Learned
121+
- How to write a simple JavaScript program.
122+
- Two ways to run JavaScript: in a browser (via HTML) and with Node.js (via terminal).
123+
- How to use `console.log()` to display output.
124+
- Basic debugging (checking for typos, verifying file paths).
125+
126+
## Next Steps
127+
- Explore variables: `let message = "Hello, World!"; console.log(message);`
128+
- Learn basic operators (e.g., `+`, `-`) and functions.
129+
- Check out free resources:
130+
- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
131+
- [W3Schools JavaScript Tutorial](https://www.w3schools.com/js/)
132+

0 commit comments

Comments
 (0)