JavaScript Tutorial for Beginners
October 2025
Contents
1 Introduction 2
2 Setting Up 2
2.1 Example HTML Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3 Basic Syntax and Concepts 2
3.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3.2 Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.3 Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.4 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.5 Control Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.5.1 If-Else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.5.2 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
4 Working with the DOM 4
5 Events 5
6 Arrays and Objects 5
7 Error Handling 5
8 Modern JavaScript (ES6+) 6
9 Next Steps 6
10 Sample Project: To-Do List 6
11 Additional Notes 7
1
1 Introduction
JavaScript is a high-level, interpreted programming language used primarily for web develop-
ment to make web pages interactive. It runs in browsers (e.g., Chrome, Firefox) and can be used
server-side with environments like Node.js.
2 Setting Up
To write and run JavaScript, use a text editor (e.g., VS Code) and run code in:
• A browser’s developer console (F12 in Chrome).
• An HTML file with a <script> tag.
• Node.js for server-side scripting.
2.1 Example HTML Setup
1 <! DOCTYPE html >
2 <html >
3 <head >
4 <title > JavaScript Tutorial </ title >
5 </head >
6 <body >
7 <h1 >My First JavaScript </h1 >
8 <script >
9 console .log (" Hello , JavaScript !");
10 </script >
11 </body >
12 </html >
Listing 1: Basic HTML with JavaScript
Save as index.html and open in a browser. Check the console (F12 > Console) to see the
output: Hello, JavaScript!.
3 Basic Syntax and Concepts
3.1 Variables
Variables store data using let, const, or var:
• let: Block-scoped, reassignable.
• const: Block-scoped, cannot be reassigned.
• var: Function-scoped, older method (avoid in modern code).
1 let name = "Alice "; // String
2 const age = 25; // Number
3 var isStudent = true; // Boolean
4
5 console .log(name); // Output : Alice
2
6 name = "Bob "; // Reassign
7 console .log(name); // Output : Bob
Listing 2: Variable Declaration and Reassignment
3.2 Data Types
JavaScript is dynamically typed. Common types include:
• String: "Hello" or 'World'
• Number: 42, 3.14
• Boolean: true, false
• Array: [1, 2, 3]
• Object: { key: "value" }
• Null: null
• Undefined: undefined
1 let arr = [1, "two", true ]; // Array
2 let obj = { name: " Alice ", age: 25 }; // Object
3 console .log(arr [1]); // Output : two
4 console .log(obj.name); // Output : Alice
Listing 3: Arrays and Objects
3.3 Operators
• Arithmetic: +, -, *, /, %
• Comparison: ==, ===, !=, !==, >, <
• Logical: && (and), || (or), ! (not)
1 let x = 10, y = 5;
2 console .log(x + y); // Output : 15
3 console .log(x === y); // Output : false
4 console .log(x > y && y < 10); // Output : true
Listing 4: Using Operators
3.4 Functions
Functions are reusable code blocks, defined with function or arrow syntax (=>).
1 // Regular function
2 function greet(name) {
3 return "Hello , " + name + "!";
4 }
5 console .log(greet (" Alice ")); // Output : Hello , Alice !
6
7 // Arrow function
3
8 const add = (a, b) => a + b;
9 console .log(add (2, 3)); // Output : 5
Listing 5: Function Examples
3.5 Control Flow
Control program flow with conditionals and loops.
3.5.1 If-Else
1 let age = 18;
2 if (age >= 18) {
3 console .log (" Adult ");
4 } else {
5 console .log (" Minor ");
6 }
7 // Output : Adult
Listing 6: If-Else Statement
3.5.2 Loops
1 for (let i = 0; i < 3; i++) {
2 console .log (" Count: " + i);
3 }
4 // Output : Count: 0, Count : 1, Count : 2
5
6 let i = 0;
7 while (i < 3) {
8 console .log (" While: " + i);
9 i++;
10 }
11 // Output : While: 0, While : 1, While : 2
Listing 7: For and While Loops
4 Working with the DOM
JavaScript can manipulate HTML/CSS to make web pages interactive.
1 <! DOCTYPE html >
2 <html >
3 <head >
4 <title >DOM Example </ title >
5 </head >
6 <body >
7 <h1 id =" myHeading ">Hello , World !</h1 >
8 <button onclick =" changeText ()"> Click Me!</ button >
9 <script >
10 function changeText () {
4
11 let heading = document . getElementById (" myHeading ");
12 heading . textContent = "Text Changed !";
13 }
14 </script >
15 </body >
16 </html >
Listing 8: Change Text on Button Click
5 Events
Handle user interactions like clicks or keypresses.
1 document . getElementById (" myHeading "). addEventListener (" click ",
function () {
2 alert (" Heading clicked !");
3 });
Listing 9: Event Listener
6 Arrays and Objects
• Arrays: Use methods like push, pop, map, filter.
• Objects: Store key-value pairs, access with dot (.) or bracket ([]) notation.
1 let fruits = [" apple ", " banana ", " orange "];
2 fruits .push (" grape ");
3 console .log( fruits ); // Output : [" apple ", " banana ", " orange ",
"grape "]
4
5 let person = { name: " Alice ", age: 25 };
6 console .log( person [" name "]); // Output : Alice
Listing 10: Array and Object Manipulation
7 Error Handling
Use try-catch to handle errors gracefully.
1 try {
2 let x = undefinedVariable ;
3 } catch (error) {
4 console .log (" Error caught : " + error );
5 }
6 // Output : Error caught : ReferenceError : undefinedVariable is not
defined
Listing 11: Try-Catch Example
5
8 Modern JavaScript (ES6+)
Features include template literals, destructuring, spread operator, and promises/async-await.
1 async function fetchData () {
2 try {
3 let response = await
fetch (" https :// jsonplaceholder . typicode .com/ posts /1");
4 let data = await response .json ();
5 console .log(data. title );
6 } catch ( error ) {
7 console .log (" Error : " + error );
8 }
9 }
10 fetchData ();
Listing 12: Async/Await Example
9 Next Steps
• Practice: Build projects like a to-do list or calculator.
• Learn More: Explore frameworks (React, Vue, Angular), Node.js, or resources like
MDN Web Docs, freeCodeCamp, or JavaScript.info.
• Debugging: Use console.log and browser dev tools.
10 Sample Project: To-Do List
1 <! DOCTYPE html >
2 <html >
3 <head >
4 <title >To -Do List </ title >
5 </head >
6 <body >
7 <h1 >To -Do List </h1 >
8 <input id=" taskInput " type =" text" placeholder =" Add a task">
9 <button onclick =" addTask ()">Add </ button >
10 <ul id =" taskList "></ul >
11 <script >
12 function addTask () {
13 let task = document . getElementById (" taskInput "). value ;
14 if (task) {
15 let li = document . createElement (" li ");
16 li. textContent = task;
17 document . getElementById (" taskList "). appendChild (li);
18 document . getElementById (" taskInput "). value = "";
19 }
20 }
21 </script >
22 </body >
6
23 </html >
Listing 13: To-Do List HTML and JavaScript
11 Additional Notes
• Accessing Grok: Use grok.com, x.com, or Grok iOS/Android apps. Free usage has
quotas; for higher limits, check SuperGrok at https://x.ai/grok.
• Memory: Conversations are saved for context. Manage memory in the ”Data Controls”
section or use the book icon to forget chats.
