Creating Interactive Forms Using JavaScript

Deciphering the Anatomy of a Form

Let and Const

Arrow Functions

let add = (a, b) => a + b;

Template Literals

let name = "Alice";
let greeting = `Hello, ${name}!`;

Destructuring

let numbers = [1, 2, 3];
let [a, b, c] = numbers;

let person = { name: "John", age: 30 };
let { name, age } = person;

Classes

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
let person = new Person("Alice", 25);
person.greet(); // Outputs: Hello, my name is Alice

Zero Parameters

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

Rest and Spread Operators

function sum(...numbers) {
    return numbers.reduce((acc,num) => acc + num),0);
}

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];

Modules

// math.js 
export function add(a, b) {
    return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

Promise

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Task completed successfully");
    } else {
        reject("Task failed");
    }
});

myPromise.then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

What is JSON?

{"name": " "John","age":"30","isStudent" - false}

JSON Syntax Rules

{ "name": "Alice","age": 25,"hobbies": ["reading", "hiking", "coding"],"address": {"street": "123 Maple St.","city": "Wonderland"}}

JSON to JS objects

let jsonString = '{"name": "Alice", "age": 25}';
let obj = JSON.parse(jsonString);
console.log(obj.name);  // Output: Alice
console.log(obj.age);   // Output: 25

How To Convert Javascript Objects Into Json Format

let person = {name: "Bob",age: 30,isStudent: false};
let jsonString = JSON.stringify(person);
console.log(jsonString);  // Display: '{"name":"Bob","age":30,"isStudent":false}'

Retrieving And Sending JSON Objects Through Web Apps

fetch("https://api.example.com/data")
.then(response => response.json())  // A method that converts the response body// as JSON, which is a response format to // note as well
.then(data => {
    console.log(data); // Add user defined logic
})
.catch(function (error){
    console.log("Error: " + error);
});

Manipulating JSON in Javascript on the Server-Side

const fs = require('fs');
// Reading JSON from a file
fs.readFile('data.json', 'utf8', (err, data) => {
    if (err) {
        console.log(err);
        return;
    }
    let jsonData = JSON.parse(data);  // Converts JSON string into JavaScript object    
    console.log(jsonData);
});
// Writing JSON to a file
let newPerson = { name: "Charlie", age: 28 };
fs.writeFile('newData.json', JSON.stringify(newPerson), 'utf8', (err) => {
    if (err) {
        console.log(err);
    } else {
        console.log("Data has been written to the file.");
    }
});

What are Promises?

let promise = new Promise(function(resolve, reject){
// Asynchronous operation
let success = false;
// A piece of code that determines if a success or failure simulation will be fired
if(success) {
    resolve("Operation was successful");  // The promise is fulfilled
} else {
    reject("Operation failed");  // The promise is rejected
}
});

promise
.then(function(result) {
    console.log(result); // If resolved, show the success message.
}).catch(function(error) {
    console.log(error); // If rejected, show the error message.
});

How To Chain Promises

fetchDataFromAPI().then(function(response) {
    return processData(response); // Returning new promise
})
.then(function(processedData) {
    return saveData(processedData); // Returning another promise
})
.catch(function(error) {
    console.log("Error: " + error);
});

What is Async/Await?

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    return data;
}

fetchData().then(function(result){
    console.log(result);
}).catch(function(error){
    console.log("Error: " + error);
});

Async/Await for Error Handling

Categories Of Errors Found in Java Script

The Try and Catch Statement

try { 
 // Code that may cause an error 
} catch (error) { 
 // Code to handle the error 
}

try {
    let result = 10 / 0; // This will always raise an error of executing a divide by zero statement
} catch (error) {
    console.log("Error: " + error.message); // This will log the error message
}

The Throw Statement

throw new Error("This is a custom error message");

function checkAge(age) { 
if (age < 18) { 
throw new Error("Age must be 18 or older."); 
} 
console.log("Age is valid"); 
} 
try { 
checkAge(16); 
} catch(error) { 
console.log(error.message); // Outputs: Age must be 18 or older. 
}

The Finally Block

try {
    // Code with a chances of failing
} catch (error) {
    // Managing the error
} finally {
    // Code which runs regardless of code above throwing an error or not
}

try {
    let file = openFile("example.txt");
    // Perform some operations on the file
} catch (error) {
    console.log("An error occurred: " + error.message);
} finally {
    closeFile(file); // Close the file no matter the try block being a success or failure
}

Error Objects

try { var x = 10 / 0;} catch (error) {
console.log("Error name: " + error.name); //Produces: Error name: Error
console.log("Error message: " + error.message); //Produces: Error message: Infinity
console.log("Stack trace: " + error.stack); //So this returns the stack trace
}

Learn About JavaScript Arrays and Objects

What are JS objects?

let book = {
    title: "To Kill a Mockingbird",
    author:"Harper Lee",
    year:1960
};

Accessing and Modifying Object Properties

console.log(book.title); // To Kill a Mockingbird

console.log(book["author"]); // Author: Harper Lee

book.year=1961; // Changes Year to 1961
console.log(book.year); // Year : 1961

book.genre="Fiction"; // Creates new Property
console.log(book.genre); // Outputs: Fiction

What are JavaScript Arrays?

let colors = ["red", "blue", "green", "yellow"];

Accessing and Modifying Array Elements

console.log(colors[0]); // Results in red
console.log(colors[2]); // Answer is green

colors[1] = purple; // New value is purple for the second aspect (blue)
console.log(colors[1]); // The answer is: purple

colors[4] = 'orange'; // When combined with other colors makes orange fifth
console.log(colors[4]); // The answer is: orange

Comparing Relation of Objects and Arrays

let books = [
            {
                title: "1984",
                author: "George Orwell",
                year: 1949
              },
              {
                  title: "Brave New World",
                  author: "Aldous Huxley",
                  year: 1932
              }
]

Iterating Over Arrays and Objects

for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

for (let key in book) {
    console.log(key + ": " + book[key]);
}

Events definition in Javascript

Types of Events

Event Listeners

Adding The Listeners Of Events

element.addEventListener(event, function, useCapture);

let button = document.getElementById("myButton");

button.addEventListener("click", function () {
    alert("Button was clicked!");
});

Event Propagation

Event Object

element.addEventListener("click", function(event) {
   console.log(event.type); // Will display the type of event which occurred, for example "click"
});

Removing Event Listeners

button.removeEventListener("click", myFunction);

Event Delegation

let list = document.getElementById("myList");

list.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        alert("Item clicked: " + event.target.textContent);
    }
});

Functions in JavaScript: A Comprehensive Overview

What does Function mean in Java Script?

Introduction to Functions

function functionName() {
    // Code you want to be run
}

function sayHello() {
    console.log("Hello, world!");
}

Invoking a Function

sayHello();//this will print to the console "Hello, World!"

Arguments and Parameters

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("John"); // Lets say John is a person whose details this program has his name

greet("Alice"); // Outputs "Hello, Alice!"
greet("Bob"); // Outputs "Hello, Bob!"

Return Values

function add(a,b)
{
    return a + b;
}

let sum = add(5, 3); // sum will be now 8
console.log(sum); // Will print 8 on the console

Function Expressions

const multiply = function(a, b) {
    return a  b;
};

console.log(multiply(4, 2)); // This will output 8

Arrow Functions

const add = (a,b) => {
 return a + b;}

const add = (a, b) => a + b;

Scope of Functions

function test() {
    let x = 10;
    console.log(x); // This will output 10
}

console.log(x); // This will result in an error because x is not defined outside the function

let x = 5;

function test() {
    console.log(x); // This will output 5
}

What Exactly Is The DOM?

Accessing DOM Elements

let element = document.getElementById("myElement");

let elements = document.getElementsByClassName("myClass");

let elements = document.getElementsByTagName("p");

let element = document.querySelector(".myClass");

let elements = document.querySelectorAll("div.myClass");

Modifying HTML Elements

element.textContent = "New content here!";

element.innerHTML = "New HTML content!";

element.setAttribute("class", "newClass");
let srcValue = element.getAttribute("src");

element.style.color = "blue"; 
element.style.fontSize = "20px";

Creating and Inserting Elements