02/04/2024
JavaScript
Review
Jose Andrew Bunan
Instructor
College of Engineering and
Information Technology
Objectives
• Recall and practice the fundamentals of JavaScript in
terms of program logic formulation.
• Use the document objects, event handler, location,
and its uses.
College of Engineering and
Information Technology
1
02/04/2024
HTML Forms
• HTML provides a robust set of form elements,
including input fields, buttons, checkboxes, radio
buttons, dropdown menus, and text areas
• HTML forms offer simplicity and flexibility,
making them suitable for a wide range of
applications, from basic contact forms to complex
data entry interfaces.
College of Engineering and
Information Technology
Form Validation using JavaScript
• Form validation using JavaScript is essential for
ensuring that user input meets specified criteria
before submitting data to a server.
• By providing real-time feedback and reducing
errors, JavaScript enhances user experience.
College of Engineering and
Information Technology
2
02/04/2024
Form Validation using JavaScript
• Clear Feedback: display error messages or highlight invalid
fields to guide users
• Custom Rules: define validation rules for each form field,
such as required fields or email formats
• Event Handling: use JavaScript event handlers to trigger
validation as users interact with fields
• Regular Expressions: utilize regex for precise validation,
like checking emails or phone formats
College of Engineering and
Information Technology
Form Validation using JavaScript
• Cross-Browser Compatibility: Test validation across
browsers to ensure consistent behavior.
• Server-Side Validation: Implement server-side validation as
a fallback for security.
• Accessibility: Ensure error messages are accessible to all
users.
• Performance Optimization: Optimize validation logic for
efficient processing, especially in complex forms.
College of Engineering and
Information Technology
3
02/04/2024
Form Validation using JavaScript
JavaScript form validation improves usability,
data integrity, and user satisfaction in web
applications.
College of Engineering and
Information Technology
Client-side Scripting
• involves executing code within the user's web
browser. This code is downloaded along with the
web page and runs on the client's device.
• The primary languages used for client-side
scripting are HTML, CSS, and JavaScript.
College of Engineering and
Information Technology
4
02/04/2024
Advantages of Client-side Scripting
• Improved User Experience: Client-side scripting enables
interactive and dynamic web pages, enhancing user
experience through features like form validation,
animations, and real-time updates.
• Reduced Server Load: By offloading processing tasks to the
client's device, client-side scripting helps distribute the
workload, reducing the burden on the server and improving
overall system performance.
College of Engineering and
Information Technology
Advantages of Client-side Scripting
• Instant Feedback: With client-side scripting, users receive
immediate feedback without waiting for server responses,
leading to faster interactions and smoother browsing
experiences.
College of Engineering and
Information Technology
5
02/04/2024
Common Use Cases of Client-side Scripting
1. Form Validation
2. Dynamic Content Generation
3. User interface and user experience enhancements (e.g.,
dropdown menus, sliders)
4. Client-side storage (e.g., cookies, local storage)
College of Engineering and
Information Technology
Server-side Scripting
• involves executing code on the web server before
delivering the resulting web page to the client's
browser.
• Common server-side scripting languages include
PHP, Python, Ruby, and Node.js.
College of Engineering and
Information Technology
6
02/04/2024
Advantages of Server-side Scripting
• Enhanced Security: Server-side scripting allows sensitive
operations and data processing to be performed on the
server, reducing the risk of exposing critical code or data to
users.
• Access to Server Resources: Server-side scripting enables
access to server resources like databases, file systems, and
external APIs, facilitating complex operations and data
manipulation.
College of Engineering and
Information Technology
Advantages of Server-side Scripting
• Platform Independence: Server-side scripts run
independently of the client's device and browser, ensuring
consistent behavior and compatibility across different
platforms.
College of Engineering and
Information Technology
7
02/04/2024
Common Use Cases of Server-side Scripting
1. User authentication and authorization
2. Database operations (e.g., CRUD operations)
3. Content Management Systems (e.g., WordPress)
College of Engineering and
Information Technology
JavaScript Where To
• In HTML, JavaScript code is inserted between
<script> and </script> tags either within the head
and/or body sections of an HTML document.
• Scripts can also be placed in external files with the
file extension .js
College of Engineering and
Information Technology
8
02/04/2024
JavaScript Introduction
• One of the many JavaScript HTML methods is
getElementById(). This method finds an HTML
element and changes the element’s content
• JavaScript can also change the value of the src
(source) attribute of an <img> tag
• JavaScript can also change HTML styles (CSS)
College of Engineering and
Information Technology
getElementById()
College of Engineering and
Information Technology
9
02/04/2024
Changing Value of “src” attribute of “img” tag
College of Engineering and
Information Technology
Changing HTML Styles using JavaScript
College of Engineering and
Information Technology
10
02/04/2024
Variables in JavaScript
• Variables are containers used to store data values
in JavaScript
• They are declared using the var, let, or const
keywords.
• Variables can hold various types of data, including
numbers, strings, arrays, objects, and functions.
College of Engineering and
Information Technology
Variables in JavaScript
Example:
var age = 25;
let name = 'John';
const PI = 3.14
College of Engineering and
Information Technology
11
02/04/2024
Output in JavaScript
• JavaScript can “display” data in different ways:
➢ Writing into an HTML element using
innerHTML
➢ Writing into the HTML output using
document.write( )
➢ Writing into an alert box using window.alert( )
➢ Writing into the browser console using
console.log( ) for debugging purposes
College of Engineering and
Information Technology
innerHTML()
College of Engineering and
Information Technology
12
02/04/2024
document.write()
Note:
Using document.write
after the first load will
overwrite everything on
your screen
College of Engineering and
Information Technology
window.alert()
College of Engineering and
Information Technology
13
02/04/2024
console.log()
College of Engineering and
Information Technology
Constants in JavaScript
• Constants are similar to variables but their values
cannot be changed once assigned.
• They are declared using the const keyword.
•
• Constants are useful for defining values that should
remain constant throughout the program.
College of Engineering and
Information Technology
14
02/04/2024
Constants in JavaScript
• Constants cannot be redeclared nor reassigned, and
they have block scope.
• Use constants to declare the following:
a. A new array
b. A new object
c. A new function
College of Engineering and
Information Technology
Constants in JavaScript
Example:
const PI = 3.14;
const WEBSITE_URL = 'https://example.com';
College of Engineering and
Information Technology
15
02/04/2024
Conditional Statements in JavaScript
• Conditional statements allow developers to execute
different blocks of code based on specified
conditions.
• In JavaScript, the if, else if, and else statements are
commonly used for conditional execution.
• Additionally, the switch statement provides an
alternative for handling multiple conditions.
College of Engineering and
Information Technology
Conditional Statements in JavaScript
College of Engineering and
Information Technology
16
02/04/2024
Assignment Statements in JavaScript
• Assignment statements are used to assign values to
variables.
• In JavaScript, the assignment operator “=” is used
to assign values.
• Additionally, compound assignment operators like
+=, -= can be used for shorthand assignment.
College of Engineering and
Information Technology
Assignment Statements in JavaScript
Example:
var x = 10;
var y = 5;
x += y; // Equivalent to x = x + y
College of Engineering and
Information Technology
17
02/04/2024
Loop Statements in JavaScript
• Loops are used to execute a block of code
repeatedly as long as a specified condition is true.
• JavaScript provides several types of loops,
including for, while, and do-while loops.
• These loops offer flexibility in controlling the
iteration process
College of Engineering and
Information Technology
Loop Statements in JavaScript
College of Engineering and
Information Technology
18
02/04/2024
Summary
In summary, variables, constants, conditional
statements, assignment statements, and loops are
fundamental concepts in JavaScript programming.
Mastering these concepts is essential for writing
efficient and functional JavaScript code for web
development.
College of Engineering and
Information Technology
Functions in JavaScript
• A block of code designed to do a particular task
• Functions are executed when called
• In JavaScript, functions are treated as values, allowing
them to be manipulated like any other data type.
• This enables higher-order functions, where functions can
accept other functions as arguments or return functions as
results.
College of Engineering and
Information Technology
19
02/04/2024
Functions in JavaScript
College of Engineering and
Information Technology
JavaScript Function Syntax
• Function names can contain letters, digits, underscores,
and dollar signs (same rules as variables)
• Inside the function, the parameters behave as local
variables
College of Engineering and
Information Technology
20
02/04/2024
Functional Programming
• Functional programming is a programming
paradigm that emphasizes the use of functions as
the primary building blocks of software.
• In JavaScript, functions are first-class citizens,
meaning they can be assigned to variables, passed
as arguments to other functions, and returned
from functions, making it well-suited for
functional programming
College of Engineering and
Information Technology
Closures
• Functions that have access to variables from their
outer scope; a function bundled with its lexical
environment
• Closures allow a function to access variables from
an outer function that has already returned, even
though its scope is “closed” over the local variables
it defines.
College of Engineering and
Information Technology
21
02/04/2024
Closures
• Think of closures in functional programming as
encapsulation in OOP, giving us a degree of data
privacy
• Closures can also be used to create function
factories, where a function generates and returns
another function with specific characteristics.
College of Engineering and
Information Technology
Closures
College of Engineering and
Information Technology
22
02/04/2024
Immutability
• Functional programming encourages immutability, where
data is kept immutable and changes are made by creating
new copies rather than modifying
• This reduces the risk of unintended side effects and
simplifies debugging.
• In JavaScript, immutability can be achieved using methods
like Object.assign(), spread syntax (...), or libraries like
Immutable.js.
• https://www.freecodecamp.org/news/immutability-in-
javascript-with-examples/
College of Engineering and
Information Technology
Immutability
College of Engineering and
Information Technology
23
02/04/2024
Immutability
College of Engineering and
Information Technology
Immutability
College of Engineering and
Information Technology
24
02/04/2024
Higher-Order Functions
• Higher-order functions are functions that either take other
functions as arguments or return functions as results.
• They enable abstraction and code reuse by allowing
common patterns to be encapsulated into reusable
functions.
• Examples of higher-order functions in JavaScript include
map(), filter(), and reduce(), which operate on arrays and
accept functions as arguments.
College of Engineering and
Information Technology
Events and Event Handling
• Events are actions or occurrences that happen in the
browser, such as mouse clicks, keyboard inputs, form
submissions, and page loading.
• DOM events are triggered by user interactions or changes
in the browser environment and can be captured and
handled by JavaScript code.
• DOM (Document Object Model) – a platform and
language-neutral interface that allows programs and
scripts to dynamically access and update the content,
structure, and style of a document.
College of Engineering and
Information Technology
25
02/04/2024
Events and Event Handling
• Event handlers are functions that are executed in
response to specific events.
• In JavaScript, event handlers can be attached to DOM
elements using various methods, such as the
addEventListener() method or by assigning event handler
properties directly to DOM elements.
• Event Listener is a function in JavaScript that waits for an
event to occur then responds to it.
College of Engineering and
Information Technology
Events and Event Handling
College of Engineering and
Information Technology
26
02/04/2024
Common Events
For more DOM Events:
College ofhttps://www.w3schools.com/jsref/dom_obj_event.asp
Engineering and
Information Technology
Event Propagation
• Event Propagation determines in which order the
elements receive the event. There are two ways to
handle this event propagation order of HTML
DOM is Event Bubbling and Event Capturing.
College of Engineering and
Information Technology
27
02/04/2024
Event Bubbling
• When an event happens on a component, it first
runs the event handler on it, then on its parent
component, and then up on other ancestors’
components. By default, all event handles through
this order from the center component event to the
outermost component event.
College of Engineering and
Information Technology
Event Capturing
• It is the opposite of bubbling. The event handler is
first on its parent component and then on the
component where it wants to fire that event
handler. In short, it means that the event is first
captured by the outermost element and
propagated to the inner elements. It is also called
trickle down.
College of Engineering and
Information Technology
28
02/04/2024
Event Object
• When an event occurs, an event object containing
information about the event is created and passed to
the event handler function. The event object
provides properties and methods that allow
developers to access details such as the event type,
target element, mouse coordinates, and keyboard
key codes.
• https://www.w3schools.com/jsref/obj_events.asp
College of Engineering and
Information Technology
Event Delegation
• Event delegation is a technique used to handle events on
multiple elements efficiently, particularly when dealing with
dynamically generated or large sets of elements.
• Instead of attaching event handlers to individual elements,
event delegation involves attaching a single event handler to
a common ancestor element and using event bubbling to
capture events from its descendants.
College of Engineering and
Information Technology
29
