Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Modern JavaScript Course

The document covers modern JavaScript features (ES6+) such as arrow functions, template literals, and destructuring, which enhance code efficiency and readability. It also explores advanced DOM manipulation techniques, event listeners, timers, and form validation. Additionally, it introduces JavaScript frameworks like React.js and Node.js for building user interfaces and server-side applications, respectively.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Modern JavaScript Course

The document covers modern JavaScript features (ES6+) such as arrow functions, template literals, and destructuring, which enhance code efficiency and readability. It also explores advanced DOM manipulation techniques, event listeners, timers, and form validation. Additionally, it introduces JavaScript frameworks like React.js and Node.js for building user interfaces and server-side applications, respectively.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Modern JavaScript Course

Modern JavaScript (ES6+ Features)


Modern JavaScript (ES6 and beyond) introduced powerful features that make code cleaner and
more efficient.

Arrow Functions
Shorter syntax for writing functions.
// Traditional function
function add(a, b) {
return a + b;
}

// Arrow function
const add = (a, b) => a + b;
Use arrow functions when you want concise function expressions, especially for callbacks.

Template Literals
Use backticks (`) to create strings that can include variables.
const name = "Tafadzwa";
console.log(`Hello, ${name}!`); // Output: Hello, Tafadzwa!
Multiline strings are easier with template literals:
const greeting = `Welcome to
JavaScript ES6!`;

Destructuring
Extract values from arrays or objects into variables.
// Array destructuring
const [a, b] = [10, 20];
console.log(a); // 10

// Object destructuring
const person = { name: "Anna", age: 30 };
const { name, age } = person;
console.log(name); // Anna
Exploring the DOM More Deeply
Beyond getElementById, you can use other powerful DOM methods:

Selecting Elements
document.querySelector(".my-class")
document.querySelectorAll("p")
document.getElementsByClassName("my-class")
document.getElementsByTagName("div")

Creating and Appending Elements


const newItem = document.createElement("li");
newItem.textContent = "New List Item";
document.querySelector("ul").appendChild(newItem);

Changing Attributes
document.querySelector("img").setAttribute("src", "new-image.jpg");

Event Listeners, Timers, and Form Validation

Event Listeners
Used to attach behavior to DOM elements.
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});

Timers
Use setTimeout and setInterval for delayed and repeated actions.
setTimeout(() => {
console.log("Runs once after 2 seconds");
}, 2000);

setInterval(() => {
console.log("Runs every 1 second");
}, 1000);

Form Validation
<form id="myForm">
<input type="email" id="email" required>
<button type="submit">Submit</button>
</form>
<p id="error"></p>
document.getElementById("myForm").addEventListener("submit", function(e) {
const email = document.getElementById("email").value;
if (!email.includes("@")) {
e.preventDefault();
document.getElementById("error").textContent = "Please enter a valid email.";
}
});

More Mini Projects


To-Do List
 Add tasks
 Mark as complete
 Delete tasks
Calculator
 Build a simple calculator using buttons and input fields.
Quiz App
 Ask questions
 Score user
 Show results with feedback

Introduction to JavaScript Frameworks and Libraries


React.js
React is a JavaScript library for building user interfaces.
 Component-based
 Reusable code
 Managed state
 Fast performance using virtual DOM
Node.js
Node.js allows you to run JavaScript on the server.
 Build APIs
 Work with databases
 Handle HTTP requests
 Use Express.js for web servers

You might also like