JavaScript Essentials for Beginners – Study
Notes
Page 1 – Introduction to JavaScript
JavaScript (JS) is a programming language of the web. It allows developers to make websites interactive,
dynamic, and user-friendly.
Why learn JavaScript?
Runs in all browsers.
Used for frontend and backend (Node.js).
Powers modern frameworks (React, Angular, Vue).
Page 2 – Setting Up JavaScript
Ways to use JavaScript in a webpage:
1. Inline: Inside HTML elements.
2. Internal: Inside <script> tags.
3. External: In separate .js files (recommended).
Example:
<script src="app.js"></script>
Page 3 – Variables and Data Types
Variables: Store values.
var (old), let (block-scoped), const (constant).
Data Types:
Primitive: String, Number, Boolean, Null, Undefined, Symbol.
Non-Primitive: Objects, Arrays, Functions.
Example:
let age = 21; const name = "Alex";
Page 4 – Operators
Arithmetic (+, -, *, /, %)
Comparison (==, ===, !=, >, <)
Logical (&&, ||, !)
Assignment (=, +=, -=)
Page 5 – Functions
Functions are reusable blocks of code.
Function Declaration:
function greet(name) { return "Hello, " + name; }
Arrow Function:
const greet = (name) => `Hello, ${name}`;
Page 6 – Objects and Arrays
Objects: Key-value pairs.
let student = { name: "Alex", age: 21 };
Arrays: Ordered collections.
let fruits = ["apple", "banana", "mango"];
Page 7 – Conditional Statements
if-else
switch-case
Example:
if (score > 50) { console.log("Pass"); } else { console.log("Fail"); }
Page 8 – Loops
for loop
while loop
for...of (arrays)
for...in (objects)
Example:
for (let i = 0; i < 5; i++) { console.log(i); }
Page 9 – DOM Manipulation
JavaScript interacts with the Document Object Model (DOM) to change webpage content.
Example:
document.getElementById("title").innerText = "Hello World!";
Page 10 – Events in JavaScript
Events let users interact with web pages.
Example:
document.getElementById("btn").addEventListener("click", () => { alert("Button clicked!"); });
Page 11 – ES6+ Features
1. Template Literals:
`Hello, ${name}`
2. Destructuring:
const {name, age} = student;
3. Promises:
fetch(url).then(res => res.json());
4. Async/Await:
const data = await fetchData();
Page 12 – Conclusion
JavaScript is the foundation of modern web development.
Key Takeaways:
Variables, functions, loops, and conditions form the basics.
DOM manipulation enables interactivity.
ES6+ features make coding easier and cleaner.
Mastery of JS opens the path to frameworks and backend development.
