JavaScript Essentials – Part 2
Chapter 7: Working with Strings
Strings are sequences of characters enclosed in quotes. JavaScript gives us many ways to
manipulate them.
Creating Strings
let greeting = "Hello, World!";
let language = 'JavaScript';
Common String Methods
• .length → returns number of characters
• .toUpperCase() → makes letters uppercase
• .toLowerCase() → makes letters lowercase
• .includes() → checks if a string contains something
• .slice() → extracts a part of the string
Example:
let text = "Learning JavaScript";
console.log(text.length); // 19
console.log(text.toUpperCase()); // LEARNING JAVASCRIPT
console.log(text.includes("Java")); // true
console.log(text.slice(0, 8)); // Learning
Chapter 8: Arrays – Lists of Data
Arrays let you store multiple values in a single variable.
let fruits = ["Apple", "Banana", "Orange"];
Accessing Elements
console.log(fruits[0]); // Apple
console.log(fruits[2]); // Orange
Common Array Methods
• .push() → add to the end
• .pop() → remove from the end
• .shift() → remove from the beginning
• .unshift() → add to the beginning
• .length → number of items
fruits.push("Mango");
console.log(fruits); // ["Apple", "Banana", "Orange", "Mango"]
fruits.pop();
console.log(fruits); // ["Apple", "Banana", "Orange"]
Arrays are extremely useful when working with lists of data, such as students, scores, or
even tasks in a to-do list.
Chapter 9: Objects – Storing Related Information
Objects let you group data using key-value pairs.
let person = {
name: "Alice",
age: 22,
isStudent: true
};
console.log(person.name); // Alice
console.log(person["age"]); // 22
Objects can also hold arrays or even other objects:
let student = {
name: "John",
subjects: ["Math", "Science", "English"],
address: {
city: "Accra",
country: "Ghana"
};
console.log(student.subjects[1]); // Science
console.log(student.address.city); // Accra
Objects are the foundation of many JavaScript structures, including JSON (JavaScript Object
Notation), which is widely used in APIs.
Chapter 10: Events in JavaScript
Events are actions that happen in the browser, such as clicking a button, typing text, or
loading a page. JavaScript can “listen” for these events and respond.
Example: Button Click
<!DOCTYPE html>
<html>
<body>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello from the button!");
</script>
</body>
</html>
Whenever the button is clicked, the function sayHello() runs.
Chapter 11: The Document Object Model (DOM)
The DOM represents the structure of a webpage. With JavaScript, you can access and
change elements on the page.
Selecting Elements
<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
</script>
• document.getElementById("demo") finds the element with the ID demo.
• .innerHTML changes its content.
This is how you make webpages dynamic and interactive.
Chapter 12: Introduction to ES6 Features
In 2015, a major update called ES6 (ECMAScript 2015) introduced powerful features to
JavaScript. Some important ones include:
Arrow Functions
let greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet("Alice"));
Template Literals
Instead of concatenation:
let name = "Bob";
console.log("Hello " + name + "!");
You can write:
console.log(`Hello ${name}!`);
Destructuring
let user = { username: "John", age: 25 };
let { username, age } = user;
console.log(username); // John
These features make code shorter, cleaner, and easier to read.
Chapter 13: Debugging JavaScript
Even professionals make mistakes in code. Debugging is the process of finding and fixing
errors.
Common Errors
• Syntax Errors: mistakes in spelling or missing symbols
• Reference Errors: using a variable before declaring it
• Logical Errors: code runs but doesn’t do what you expect
Debugging Tools
1. console.log() – print values to the console.
2. Browser Developer Tools – step through code and inspect variables.
3. Try/Catch – handle errors gracefully.
try {
let result = riskyFunction();
} catch (error) {
console.log("Something went wrong:", error);
Conclusion of Part 2
In this section, you learned:
• How to work with strings, arrays, and objects
• How events make websites interactive
• How JavaScript interacts with the DOM
• New ES6 features that modernize your code
• Debugging strategies
With these tools, you are ready to start building small interactive projects like calculators, to-
do lists, and quiz apps. Part 3 will dive deeper into functions, asynchronous JavaScript, and
real-world applications.
