Section 3: Web Development with JavaScript

Lesson 1: DOM Manipulation and Events

The Document Object Model (DOM) is a programming interface for web documents. In this lesson, we'll explore how to manipulate the DOM and respond to user events using JavaScript.

1.1 Selecting and Modifying HTML Elements

// Selecting elements by ID

const elementById = document.getElementById('exampleId');

// Selecting elements by class name

const elementsByClass = document.getElementsByClassName('exampleClass');

// Modifying element content

elementById.innerHTML = 'New content';

1.2 Responding to User Interactions with Event Listeners

// Adding a click event listener

elementById.addEventListener('click', () => {

  console.log('Element clicked!');

});

// Event listener with parameter

const button = document.getElementById('submitButton');

button.addEventListener('click', event => {

  event.preventDefault();

  console.log('Button clicked!');

});

Lesson 2: AJAX and Fetch API

Asynchronous JavaScript and XML (AJAX) allows you to make asynchronous requests to the server. The Fetch API simplifies working with network requests.

2.1 Making Asynchronous Requests to the Server

// Using XMLHttpRequest for AJAX

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function () {

  if (xhr.readyState === 4 && xhr.status === 200) {

    const responseData = JSON.parse(xhr.responseText);

    console.log(responseData);

  }

};

xhr.send();

2.2 Fetching and Sending Data with the Fetch API

// Using Fetch API for GET request

fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

// Using Fetch API for POST request

fetch('https://api.example.com/save', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json',

  },

  body: JSON.stringify({ key: 'value' }),

})

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

Lesson 3: Introduction to Single Page Applications (SPA)

Single Page Applications (SPAs) provide a seamless user experience by dynamically updating the content without reloading the entire page. Frameworks like React or Vue.js simplify SPA development.

3.1 Basics of Building SPAs with Frameworks

// Example of React component

import React, { useState } from 'react';

function Counter() {

  const [count, setCount] = useState(0);

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

export default Counter;

3.2 Understanding Client-Side Routing

Client-side routing allows SPAs to navigate between different views without triggering a full page reload. Libraries like React Router simplify this process.

// Example of React Router usage

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {

  return (

    <Router>

      <div>

        <nav>

          <ul>

            <li>

              <Link to="/">Home</Link>

            </li>

            <li>

              <Link to="/about">About</Link>

            </li>

          </ul>

        </nav>

        <Route path="/" exact component={Home} />

        <Route path="/about" component={About} />

      </div>

    </Router>

  );

}

In the next section, we'll explore JavaScript testing techniques and tools to ensure the reliability of your code.