BLUE T-REX

Introduction to
JavaScript
AGOJO, LAIRA ANNE APDAL, JUSTINE CAÑAL, JOHN ROMEL EMBUIDO, RIAN JAKE GERONIMO, TAMARA
Topic Overview
JavaScript syntax and data types
Variables, functions, and control structures
DOM manipulation
Introduction to browser debugging tools
Syntax & Data Types
 Variables
A temporary storage of numbers, expressions, and string literals
All variables have unique identifiers
If a variable is not declared, but given a value-- it will automatically be declared.

RULES IN NAMING A VARIABLE:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter, can also in $ and _.
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.
 Declaration of Variables
Ways to declare a variable:

Using var
Using let Using var
Using const
var x = 5;
var y = 6;
var = x + y;

Try It!
 Declaration of Variables
Ways to declare a variable:

Using var
Using let Using let
Using const
let x = 5;
let y = 6;
let z = x + y;

Try It!
 Declaration of Variables
Ways to declare a variable:

Using var
Using let Using const
Using const
const x = 5;
const y = 6;
const z = x + y;

Try It!
 Declaration of Variables
Variables declared with var are function-
scoped or globally-scoped. They can be re-
declared and updated within the same
Using var
scope.
var x = 5;
var y = 6;
var = x + y;

Try It!
 Declaration of Variables
Variables declared with let are block-
scoped, meaning they only exist within the
block they are defined.
Using let

let x = 5;
let y = 6;
let z = x + y;

Try It!
 Declaration of Variables
Variables declared with const are also
block-scoped but must be initialized at the
time of declaration and cannot be
Using const
reassigned.
const x = 5;
const y = 6;
const z = x + y;

Try It!
Declaration of Variables

DEMO
 Defining Functions
SYNTAX Example

FUNCTION CALL
 Function Parameters & Arguments
Functions can take parameters, allowing dynamic input when called.

Example:
 Return Values from Functions
Using the return statement to send back values:

Example:
 Function Expressions
Define functions that can be assigned to variables

Example:
 Arrow Functions
A shorthand syntax introduced in ES6 that simplifies writing anonymous functions,
although they do not bind their own this​.

Example:
Functions

DEMO
 Control Structures

Control structures dictate the flow of execution in a program, helping determine

which statements to execute under specific conditions or how many times to repeat
a block of code.

Without control structures, code would run sequentially, without conditional logic
or loops.
 Types of Control Structures

A. CONDITIONAL STATEMENTS
Help execute code based on a condition.

if -- Executes the block if the condition evaluates to true.

if else -- Adds an alternative execution path if the if condition is false.
else if -- Used for multiple conditions.
switch -- An alternative to else if, useful for handling multiple possible outcomes
based on a single expression.

Note: The break statement stops the execution of the next case. Without it, all cases will run until a
break is found.
 Types of Control Structures

B. LOOPING STATEMENTS
Loops repeat a block of code while a specific condition is true.

for -- Commonly used when the number of iterations is known beforehand.

while -- Repeats as long as a condition is true.
do while -- Similar to while, but guarantees at least one execution since the
condition is checked after the code block runs.
for in -- Iterates over object properties
for of -- Iterates over iterable objects like arrays.
 Types of Control Structures

C. CONTROL FLOW STATEMENTS

break -- Terminates a loop or switch statement early.

continue -- Skips the current iteration and proceeds with the next one.
return -- Ends a function and returns a value.
Control Structures

DEMO
Introduction to browser debugging tools

Code Debugging:
the process of finding and fixing errors or bugs in the
source code of any software. When software does not work
as expected, computer programmers study the code to
determine why any errors occurred. They use debugging
tools to run the software in a controlled environment, check
the code step by step, and analyze and fix the issue.
 Introduction to browser debugging tools

JavaScript Debugger:
All modern browsers have a built-in JavaScript debugger.
Built-in debuggers can be turned on and off, forcing errors
to be reported to the user.
With a debugger, you can also set breakpoints (places where
code execution can be stopped), and examine variables
while the code is executing.
 Introduction to browser debugging tools

Setting Breakpoint:
In the debugger window, you can set breakpoints in the
JavaScript code.
At each breakpoint, JavaScript will stop executing, and let
you examine JavaScript values.
After examining values, you can resume the execution of
code (typically with a play button).
Introduction to browser debugging tools

DEMO
 DOM Manipulation
Document Object Model
The DOM represents a web page’s structure in memory, allowing
programs to change the page’s content, style, or structure
 HTML DOM METHODS

Property
A value that you can get or set (like changing the content of an HTML element)

The getElementById Method

The most common way to access an HTML element is to use the id of the element
 HTML DOM METHODS

Method
An action you can do (like add
or deleting an HTML element)

innerHTML Property
The most common way to
access an HTML element is to
use the id of the element. This
property is useful for getting or
replacing the content of HTML
elements
 SELECTING ELEMENTS

FINDING HTML ELEMENTS

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections
 SELECTING ELEMENTS
ID

Class Name

Tag Name
SELECTING ELEMENTS
Object Collections
 EVENT LISTENER

addEventListener()
attaches an event handler to the specified element.
attaches an event handler to an element without overwriting
existing event handlers.

Syntax:
 EVENT LISTENER

Event Handler to An Element

Example:
 EVENT LISTENER
Adding Many event handlers to the same element
Example:
 EVENT LISTENER
Event Handler to the Window Object
The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the
HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
 EVENT LISTENER
Passing Parameters
 EVENT LISTENER
Event Propogation
Event propagation is a way of defining the element order when an event occurs. If you have a <p> element inside a <div>
element, and the user clicks on the <p> element, which element's "click" event should be handled first?

Event Bubbling Event Capturing

In bubbling the inner most element's event is In capturing the outer most element's event is handled first and
handled first and then the outer: the <p> element's then the inner: the <div> element's click event will be handled first,
click event is handled first, then the <div> element's then the <p> element's click event.
click event.
 EVENT LISTENER
The removeEventListener() method
The removeEventListener() method removes event handlers that have been attached with the addEventListener()
method: