JavaScript

Group 1

Fundamentals
Arcenal, Arjay
Clanes, Renz Jerald
Paragon, Ronalyn
S o n a , Ky l a J a n e
Sub Topics
I. JavaScript
Fundamentals
II. Functions and Scope
III.
What is JavaScript?
JavaScript was introduced in 1995 as a
way to add programs to web pages in the
Netscape Navigator browser. The language has
since been adopted by all other major graphical
web browsers.

It has made modern web applications

possible—applications with which you can
interact directly without doing a page reload for
every action. JavaScript is also used in more
traditional websites to provide various forms of
interactivity and cleverness.
 It is important to note that JavaScript has almost
nothing to do with the programming language name Java.
The similar name was inspired by marketing
considerations rather than good judgment. When
JavaScript was being introduced, the Java language was
being heavily marketed and was gaining popularity.

Netscape Navigator was a

web browser that was the most popular in
the 1990s. It was the first commercially
successful browser to have a graphical user
interface (GUI).
 I. JavaScript Fundaments
are the basic building blocks you need to
understand to write functional and effective code.

Fundamentals that every developer should know:

1. Variables and Data 6. Arrays

Types 7. Objects
2. Operators 8. DOM Manipulation
3. Conditional Statements 9. Asynchronous JavaScript (Async/Await)
4. Loops 10. Error Handling
5. Functions
 1. Variables and Data
Types are like containers that hold data, and data types
Variables
classify the kind of data a variable can store.

Data types fall into two

categories
1. Primitive Data Types
a. String - Represents text
b. Number - Represents both integers and decimals
c. Boolean - Represents true or false
2. References Data Types
a. Object - Stores collections of key-value pairs
b. Array - A list-like object.
c. Function - A block of code designed to perform a
task.
Example of Primitive Data
Types:
let name = "Alice"; // A string variable
const age = 25; // A number variable
var isStudent = true; // A boolean variable

console.log(name); // Output: Alice

console.log(age); // Output: 25
console.log(isStudent); // Output: true

Example of Reference Data

Objec Types:
t: let person = { name: "Bob", age: 30 };
console.log(person.name); // Output: Bob
Array

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

console.log(colors[0]); // Output: red

Function

function greet(user) {
return `Hi, ${user}!`;
}
console.log(greet("Sam")); // Output: Hi, Sam!
 2.
Operators are symbols or keywords that perform
operations on one or more values (operands).

let x = 10;
let y = 5;

console.log(x + y); // Output: 15 (Addition)

console.log(x - y); // Output: 5 (Subtraction)
console.log(x * y); // Output: 50 (Multiplication)
console.log(x / y); // Output: 2 (Division)
console.log(x % y); // Output: 0 (Modulus)
3. Conditional Statements
Conditional statements in JavaScript allow you to
execute different blocks of code based on whether a
condition is true or false.
let score = 85;
output:
if (score >= 90) {
Grade: B
console.log("Grade:
A");
} else if (score >= 75) {
console.log("Grade:
B");
} else {
console.log("Grade:
4. Loops
Loops in JavaScript allow you to execute a block of code
repeatedly until a certain condition is met. They help avoid writing
repetitive code and make it easy to work with collections of data.

For Loop
Executes code a specific number of
times
output:
for (let i = 1; i <= 3; i++) { Iteration: 1
console.log("Iteration:", i); Iteration: 2
} Iteration: 3
While Loop
Repeats as long as a condition is
true.
output:
let i = 1;
Count: 1
while (i <= 3) {
Count: 2
console.log("Count:", i);
Count: 3
i++;
}
5. Functions
are reusable blocks of code that perform specific tasks.
They allow you to encapsulate logic, execute it when needed, and
even pass them around as values.

function greet(name) { output:

return `Hello, ${name}!
`; Hello,
} Alice!

console.log(greet("Alice"))
;
 6. Arrays
are reusable blocks of code that perform specific tasks.
They allow you to encapsulate logic, execute it when needed, and
even pass them around as values.

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[1]); // Output: Banana

fruits.push("Orange"); // Adds 'Orange' to the end

console.log(fruits); // Output: [ 'Apple', 'Banana', 'Cherry',
'Orange' ]
7. Objects

is a data structure that stores collections of key-

value pairs. Each key (or property) is associated with a
value, and these values can be of any data type—
including other objects and functions (which are then
called methods).
// Creating an object using literal notation
let person = {
name: "Alice",
age: 30,
greet: function() {
console.log(`Hello, I'm ${this.name}!`);
}
};

// Accessing properties using dot notation

console.log(person.name); // Output: Alice

// Accessing properties using bracket notation

console.log(person["age"]); // Output: 30

// Calling a method
person.greet(); // Output: Hello, I'm
Alice!
 8. DOM Manipulation

refers to the process of using JavaScript to access,

change, add, or remove elements and content on a webpage.

The Document Object Model (DOM) is a representation of

the HTML structure as a tree of objects, which JavaScript can
interact with to update the UI dynamically without needing to reload
the page.
<button id="myButton">Click Me</button>

<script>
document.getElementById("myButton").addEventListener("click", ()
=> {
alert("Button was clicked!");
});
</script>
output:

Button was clicked!

9. Asynchronous JavaScript (Async/Await)
Asynchronous JavaScript with async/await. Asynchronous
JavaScript lets code run without blocking the main thread.
Async/await is a syntax for managing asynchronous operations
through promises, making the code look more synchronous and
easier to read.

In an async function, the async keyword ensures it returns a

promise. The await keyword pauses execution until a promise is
resolved. This approach eliminates callback hell and makes the
code cleaner and more readable.
async function getDelayedGreeting() {
// Log a message before starting the delay
console.log("Please wait...");

// Await a promise that resolves after 1 second (1000

milliseconds)
await new Promise((resolve) => setTimeout(resolve, 1000));

// After the delay, return a greeting message

return "Hello after 1 second!";
}

// Call the async function and handle its result

getDelayedGreeting().then((greeting) => console.log(greeting));
 10. Error
Handling

is the process of anticipating, catching, and managing errors

(exceptions) that may occur during the execution of your code.
This helps prevent your application from crashing and allows you
to provide more graceful feedback or recovery options when
something goes wrong.
try {
// Code that might throw an error
let result = riskyOperation(); // Suppose this function may
fail
console.log("Operation successful:", result);
} catch (error) {
// Handle the error
console.error("An error occurred:", error.message);
} finally {
// Code that runs whether an error occurred or not
console.log("Operation complete, cleaning up resources.");
}
Error Handling with Async/Await
async function fetchData() {
try {
const response = await
fetch("https://api.example.com/data");
const data = await response.json();
console.log("Data received:", data);
} catch (error) {
console.error("Error fetching data:", error.message);
}
}

fetchData();
 II. Functions and
Scope in JavaScript
Functions are blocks of reusable code that
perform tasks when called. They can accept inputs (parameters),
process them, and return outputs. Scope, on the other hand,
determines where variables and functions are accessible within your
code.

Functions in JavaScript
1. Function Declaration
2. Function Expression
3. Arrow Function
 1. Function Declaration
A standard way to define a
function

function greet(name) {
return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Output: Hello, Alice!

 2. Function Expression
A function can be defined as an expression
and stored in a variable

const add = function(a, b) {

return a + b;
};

console.log(add(2, 3)); // Output: 5

 3. Arrow Function
A concise way to write functions introduced in ES6

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

console.log(multiply(4, 5)); // Output: 20
 Scope in
JavaScript
Scope defines the accessibility of variables,
functions, and objects in some particular part of your
code

1. Global Scope
2. Function Scope
3. Block Scope
4. Lexical Scope (Closure)
1. Global Scope

Variables declared outside any function are in the

global scope and can be accessed anywhere

let globalVar = "I am global";

function showGlobal() {
console.log(globalVar); // Accessible
here
}

showGlobal(); // Output: I am
global
2. Function Scope

Variables declared inside a function are only

accessible within that function

function localScope() {
let localVar = "I am local";
console.log(localVar); // Output: I am local
}

localScope();
// console.log(localVar); // Error: localVar is not
defined
3. Block Scope

Variables declared with let or const inside a block

(e.g., within {}) are only available within that block

if (true) {
let blockVar = "I exist only in this block";
console.log(blockVar); // Output: I exist only in this
block
}
// console.log(blockVar); // Error: blockVar is not
defined
4. Lexical Scope (Closure)

Inner functions have access to variables of outer

functions due to lexical scoping
function outerFunction() {
let outerVar = "I'm from the outer function!";

function innerFunction() {
console.log(outerVar); // Can access outerVar due to lexical scope
}

innerFunction();
}

outerFunction(); // Output: I'm from the outer function!

THANK YOU