Unit 10: Modern JavaScript - Async, Fetch & Forms

10.1 Form Validation & Storage

Form Validation:

HTML5 validation attributes: required, pattern, minlength, maxlength
Regular Expressions (Regex): /^[a-z]+$/, /[0-9]/, etc.
JavaScript validation: Check form before submission
Validate email, password strength, field lengths

Form Processing:

Get form values: document.getElementById('myInput').value
Submit event handler: form.addEventListener('submit', function(e) { })
Prevent default form submission: e.preventDefault()
Send data via AJAX or Fetch API

Web Storage:

localStorage: Persistent storage (survives page refresh)
sessionStorage: Temporary (cleared when tab closes)
Methods: setItem(key, value), getItem(key), removeItem(key), clear()
Store strings; use JSON.stringify() for objects

10.2 Asynchronous JavaScript & Promises

Promises: Handle async operations

Promise states: pending, fulfilled, rejected
.then(success, error) - Handle promise
.catch(error) - Catch rejection
.finally() - Execute regardless of result
Promise chaining: .then().then().catch()

Async/Await (ES7): Modern way to handle promises

async function - Declares async function
await - Pause execution until promise resolves
try...catch for error handling
Cleaner syntax than .then().catch()

10.3 Fetch API

Fetch API: Make HTTP requests

fetch(url) - Returns promise
.then(response => response.json()) - Parse JSON
Get requests: fetch(url)
Post requests: fetch(url, {method: 'POST', body: JSON.stringify(data)})
Error handling with .catch()
Common APIs: JSONPlaceholder, OpenWeather, REST APIs

Practice Problems (Practical 23-24 & Additional)

Practical 23: Create calculator with two number inputs, operation dropdown (+, -, *, /), and button.
On click: Perform calculation using Promise.
- Resolve with result if valid
- Reject if invalid or division by zero
- Use .then() for result, .catch() for errors, .finally() to show "Calculation Finished"

Practical 24: Create login form with username and password validation:
1. Password: 6-12 characters
2. Username: Cannot start with _, @, or number
3. Both fields required

Additional Practical: Create contact form with fields for username, email, message.
On submit: Save data to localStorage
Retrieve and display stored data below form

Q1: What are Promises? Explain states: pending, fulfilled, rejected.

Q2: Difference between .then().catch() and async/await.

Q3: What is Fetch API? How do you make GET and POST requests?

Q4: Explain localStorage vs sessionStorage vs cookies.

Q5: How do you validate a form before submission?

Q6: Write a regex pattern to validate email addresses.

Q7: How do you handle errors in Promises and async/await?

Q8: Create a function to fetch data from JSONPlaceholder API and display it.