JavaScript Essentials – Part 4
Chapter 18: JavaScript Classes JavaScript supports object-oriented programming (OOP)
through classes. Classes let you create blueprints for objects.
Defining a Class javascript Copy code class Person { constructor(name, age) { this.name =
name; this.age = age; }
greet() { return Hello, my name is ${this.name}; } }
let alice = new Person("Alice", 25); console.log(alice.greet()); Inheritance Classes can extend
other classes:
javascript Copy code class Student extends Person { constructor(name, age, grade) {
super(name, age); this.grade = grade; }
study() { return ${this.name} is studying for grade ${this.grade}; } }
let john = new Student("John", 20, "A"); console.log(john.study()); Chapter 19: JavaScript
Modules As projects grow, it’s better to split code into multiple files.
Example: Exporting and Importing math.js
javascript Copy code export function add(a, b) { return a + b; } main.js
javascript Copy code import { add } from './math.js';
console.log(add(2, 3)); // 5 Modules help keep code organized and reusable. Modern
JavaScript frameworks rely heavily on modules.
Chapter 20: Error Handling Errors are part of programming. Instead of crashing, you can
handle them gracefully.
Try-Catch javascript Copy code try { let result = riskyFunction(); } catch (error) {
console.log("An error occurred:", error.message); } Throwing Errors You can create your own
custom errors:
javascript Copy code function divide(a, b) { if (b === 0) { throw new Error("Division by zero
not allowed"); } return a / b; }
try { console.log(divide(10, 0)); } catch (error) { console.log(error.message); } Chapter 21:
JavaScript and the Browser So far, we have worked mostly with scripts, but JavaScript in the
browser is very powerful. You can:
Manipulate the DOM (change HTML and CSS dynamically)
Handle events (clicks, form submissions, key presses)
Store data in the browser using localStorage or sessionStorage
Communicate with servers using APIs
Example: Saving data in localStorage:
javascript Copy code localStorage.setItem("username", "Alice");
console.log(localStorage.getItem("username")); // Alice Chapter 22: Preparing for
Frameworks Modern web development often uses frameworks like React, Vue, or Angular.
Before learning them, ensure you are comfortable with:
Functions and arrow functions
DOM manipulation (getElementById, querySelector)
Events (click, input, submit)
Asynchronous programming (promises, async/await)
Modules and classes
Example in React Style Here’s how a simple “Hello World” looks in React (don’t worry if it
feels new):
javascript Copy code function App() { return
Hello, World!
; } React uses JavaScript concepts you already know—functions, variables, and DOM
updates—just in a structured way.
Chapter 23: Best Practices To write good JavaScript, follow these tips:
Use const and let, avoid var
Keep functions small and focused
Comment code when necessary
Test small parts of your program before combining them
Always format and indent code properly
Practice regularly
Conclusion of Part 4 Congratulations! You have reached the end of this four-part
introduction to JavaScript. You have covered:
Basics: variables, operators, control flow
Intermediate: arrays, objects, events, DOM
Advanced: async JavaScript, APIs, mini-projects
Modern: classes, modules, error handling, and framework preparation
With these foundations, you are ready to dive deeper into either front-end development
(using React, Vue, or Angular) or back-end development (with Node.js). JavaScript is a
powerful tool, and you now have the skills to start building real-world applications.
Next Step: Pick a small project idea—a personal website, a quiz app, or a simple weather
app—and build it. As you code, you’ll discover more advanced features naturally.
Remember: practice is the best teacher.
Good luck on your journey as a JavaScript developer
