marp	_class
true	invert

OMC JavaScript Quest: Episode 1

Presenter: Aymen Ghemam Role: Lead Software Engineer at Smeetz Goal: It works on my machine

---

Why JavaScript?

• Most popular programming language
• Powers web interactivity
• Versatile: Frontend, Backend, Mobile, Desktop
• Ecosystem: Huge community and resources
• High demand in job market

---

What is JavaScript?

• High-level, interpreted programming language
• Created in 1995 by Brendan Eich
• Primarily used for web development
• ECMAScript standard defines the language

---

The Good, The Bad, and The Ugly

// The Good
const good = () => ({
  flexibility: "Write frontend and backend",
  community: "Largest package ecosystem",
  evolution: "ES6+ modern features",
  async: "Non-blocking I/O",
});

// The Bad
typeof null; // 'object' (historical baggage)
0.1 + 0.2 === 0.3; // false (Eeeh, the good ol' floating point precision)

// The Ugly
console.log([] + []); // "" (wat?)

---

Core Concepts - Variables and Data Types

---

Variable Declarations

// Three ways to declare variables
var oldSchool = "Open Minds"; // Function-scoped
let modern = "Open Minds"; // Can be reassigned
const constant = "Opem Minds"; // Cannot be reassigned

---

Primitive vs Reference Types

// Primitive Types
let number = 42; // Number
let text = "Hello"; // String
let flag = true; // Boolean
let nothing = null; // Null
let undefined = undefined; // Undefined

// Reference Types
let array = [1, 2, 3]; // Array
let object = { key: "value" }; // Object
let func = () => {}; // Function

---

Arrays and Object Literals

---

Arrays

// Array operations
let fruits = ["apple", "banana", "cherry", "orange"];
fruits.push("date"); // Add to end
fruits.unshift("apricot"); // Add to start
fruits.pop(); // Remove last
fruits.shift(); // Remove first

// Array methods
fruits.map((fruit) => fruit.toUpperCase());
fruits.filter((fruit) => fruit.length > 5);
fruits.find((fruit) => fruit === "apple");

---

Object Literals

// Object creation and manipulation
let person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

// Destructuring
const { name, age } = person;

---

Functions and Methods

---

Function Declarations

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

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

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

---

String, Array, and Object Methods

// String methods
let str = "Hello, World!";
str.toLowerCase(); // "hello, world!"
str.includes("World"); // true
str.replace("World", "Alice"); // "Hello, Alice!"
str.split(","); // ["Hello", " World!"]

// Array methods
let numbers = [1, 2, 3, 4, 5];
numbers.reduce((a, b) => a + b, 0); // Sum
numbers.find((n) => n > 3); // 4

---

Loops and Conditionals

---

Conditional Statements

// If-else and Switch
if (condition) {
  // Do something
} else if (anotherCondition) {
  // Do something else
} else {
  // Default action
}

switch (value) {
  case 1:
    // Action for 1
    break;
  default:
  // Default action
}

---

Loops

// Different loop types
for (let i = 0; i < 5; i++) {
  console.log(i);
}

const array = [1, 2, 3];
array.forEach((item) => console.log(item));

while (condition) {
  // Repeat while true
}

---

Scope and Context

// Global Scope
let globalVar = "I'm global";

function exampleScope() {
  // Function Scope
  let functionVar = "Function specific";

  if (true) {
    // Block Scope (let and const)
    let blockVar = "Block specific";
  }
}

---

OOP

---

Classes and Inheritance

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

---

DOM Manipulation: The fun part!

---

(DOM: Document Object Model)

It represents the structure of a document as a tree of objects. Every web page is a document, and every element on the page is an object in the document.

---

DOM Manipulation

// Selecting elements
document.getElementById("myElement");
document.querySelector(".class");
document.querySelectorAll(".something");
document.getElementsByTagName("p");

// Changing content
element.innerHTML = "New content";
element.style.color = "red";
element.classList.add("new-class");
element.classList.remove("old-class");

// Creating elements
const newDiv = document.createElement("div");
parentElement.appendChild(newDiv);

---

Events: The javascript way

// Event Handling
button.addEventListener("click", (event) => {
  console.log("Button clicked!");
});

document.addEventListener("DOMContentLoaded", () => {
  // Page fully loaded
});

More events: mouseover, mouseout, keydown, keyup, submit, change, etc.

---

Async/Await: Oh wait!

---

Synchronous vs Asynchronous

// Synchronous
console.log("First");
console.log("Second");
console.log("Third");

// Asynchronous
console.log("First");
setTimeout(() => console.log("Second"), 1000);
console.log("Third");

---

// Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    // Async operation: takes some time
    if (success) {
      resolve("Done successfully");
    } else {
      reject("Failed");
    }
  });
}

// Async/Await
async function getData() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

---

Let's build a game!

check /mini-game folder

---

Best Practices

• Use const and let
• Be consistent
• Avoid global variables
• Handle errors, please!
• Write clean, readable code

---

Resources

• MDN Web Docs
• JavaScript.info
• W3Schools

---

Q&A

---

Thank You!