Comprehensive JavaScript Tutorial

Handout
Author: Compiled by ChatGPT for Stephanie

=============================================================================
===

MODULE 1: INTRODUCTION TO JAVASCRIPT

=============================================================================
===

JavaScript is a programming language commonly used to create interactive effects within web
browsers.

It can manipulate the DOM, handle events, make API requests, and more.

console.log("Welcome to JavaScript!");

📝 Exercise:

1. Open your browser’s console and type console.log("Hello, JavaScript");

2. Try logging your name and your favorite color.

=============================================================================
===

MODULE 2: VARIABLES AND DATA TYPES

=============================================================================
===

Declare variables using let, const

let firstName = "Stephanie"; // String

const age = 28; // Number

typeof age; // "number"

let isLearning = true; // Boolean

let favoriteColors = ["blue", "purple"]; // Array

let user = { name: "Steph", job: "Developer" }; // Object

📝 Exercise:

1. Declare a variable for your name, age, and if you're a student.

2. Create an object to represent a book with title, author, and pages.

=============================================================================
===

MODULE 3: OPERATORS

=============================================================================
===

let x = 10;

let y = 3;

console.log(x + y); // Addition

console.log(x % y); // Modulo

Comparison

console.log(x > y); // true

console.log(x === y); // false

console.log(x > 5 && y < 5); // true

📝 Exercise:

1. Write a comparison between two numbers.

2. Use logical operators to check multiple conditions.

=============================================================================
===

MODULE 4: FUNCTIONS

=============================================================================
===

function greet(name) {

return `Hello, ${name}!`;

console.log(greet("Stephanie"));

// Arrow function

const multiply = (a, b) => a * b;

console.log(multiply(2, 5));

📝 Exercise:

1. Write a function that adds two numbers.

2. Write a function that greets a user based on the time of day.

=============================================================================
===
MODULE 5: CONDITIONALS

=============================================================================
===

let score = 75;

if (score >= 90) {

console.log("A Grade");

} else if (score >= 70) {

console.log("B Grade");

} else {

console.log("Needs Improvement");

📝 Exercise:

1. Write a program to determine pass/fail using an if-else block.

2. Try writing a nested conditional.

=============================================================================
===

MODULE 6: LOOPS

=============================================================================
===

for (let i = 1; i <= 5; i++) {

console.log(`Counting: ${i}`);

let i = 0;
while (i < 3) {

console.log("While Loop: ", i);

i++;

📝 Exercise:

1. Write a loop that prints numbers 1 to 10.

2. Use a while loop to display even numbers below 20.

=============================================================================
===

MODULE 7: ARRAYS AND OBJECTS

=============================================================================
===

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

console.log(colors[1]); // green

let car = {

brand: "Toyota",

year: 2020,

color: "black"

};

console.log(car.brand); // Toyota

📝 Exercise:

1. Create an array of 5 fruits and print the 3rd one.

=============================================================================
===

MODULE 8: DOM MANIPULATION

=============================================================================
===

// HTML Example:

// <p id="demo">Hello!</p>

// JavaScript:

document.getElementById("demo").innerText = "Updated via JS!";

📝 Exercise:

1. Create a button and use JS to change text when clicked.

2. Use querySelector to select a class and modify it.

=============================================================================
===

MODULE 9: EVENTS

=============================================================================
===

// <button onclick="sayHi()">Click Me</button>

function sayHi() {

alert("Hi there!");

}
📝 Exercise:

1. Add an event listener to a button.

2. Trigger a function on mouseover.

=============================================================================
===

MODULE 10: ES6 FEATURES

=============================================================================
===

// let & const

// Template literals

let userName = "Steph";

console.log(`Welcome, ${userName}!`);

// Destructuring

const person = { first: "Ada", last: "Lovelace" };

const { first, last } = person;

// Spread operator

const nums = [1, 2, 3];

const moreNums = [...nums, 4, 5];

📝 Exercise:

1. Try template literals in a function.

2. Destructure an object with 3 properties.

=============================================================================
===
FINAL MINI PROJECT: TO-DO LIST APP

=============================================================================
===

Features:

- Add tasks

- Mark tasks as completed

- Delete tasks

// HTML (example):

// <input id="taskInput" />

// <button onclick="addTask()">Add</button>

// <ul id="taskList"></ul>

function addTask() {

const input = document.getElementById("taskInput");

const list = document.getElementById("taskList");

const li = document.createElement("li");

li.innerText = input.value;

list.appendChild(li);

input.value = "";

=============================================================================
===

APPENDIX: QUICK REFERENCE

=============================================================================
===
Data Types: string, number, boolean, object, array, null, undefined

Common Methods:

- Array: push(), pop(), shift(), map(), filter(), forEach()

- String: toUpperCase(), toLowerCase(), includes(), split()

- Object: keys(), values(), assign(), hasOwnProperty()

- DOM: getElementById(), querySelector(), addEventListener()

=============================================================================
===

NEXT STEPS

=============================================================================
===

You’ve completed the full course! 🎉

Now build something cool, practice more, and share your projects.

Resources: MDN Web Docs, freeCodeCamp, JavaScript.info