Dire Dawa University Institute of Technology
(DDUIoT)
College of Electrical and Computer Engineering
(CECE)
Introduction to JavaScript
Prepared by: Haftu M
Outline
Introduction to JavaScript
JavaScript Basics
Control Structures
Functions
DOM (Document Object Model) Manipulation
2
Objectives 10/14/2025
By the end of this lesson, you’ll be able to:-
Understand the structure and purpose of JS.
Understand how to use control statements in JS
Declare and define functions in JS.
Able to implement DOM in Webpages.
3
Introduction to JavaScript 10/14/2025
JavaScript (JS) is a versatile, high-level, and dynamically typed
programming language primarily known for bringing interactivity to
web pages.
The three core technologies of the World Wide Web are :
HTML (for structure),
CSS (for styling) and
JS(for interactivity).
4
Introduction to JavaScript… 10/14/2025
JavaScript is primarily used as a client-side scripting language that
runs in the user’s browser.
It enables the creation of dynamic and interactive features such as
form validation, animations, and interactive maps.
Its main role is to enhance user experience through responsive and
engaging interfaces.
5
Introduction to JavaScript… 10/14/2025
JavaScript is primarily used as a client-side scripting language that
runs in the user’s browser.
It enables the creation of dynamic and interactive features such as
form validation, animations, and interactive maps.
Its main role is to enhance user experience through responsive and
engaging interfaces.
6
Introduction to JavaScript… 10/14/2025
JavaScript, through [Link], can now be used for server-side
development.
It enables developers to build back-end services, APIs, and manage
database interactions.
This makes full-stack development possible using a single programming
language.
JavaScript is often used in an event-driven model, where code execution is triggered
by user actions (like clicks or form submissions) or other events within the browser.
7
Introduction to JavaScript… 10/14/2025
JS is Versatile: Beyond web development, JavaScript is used in various
other domains, including mobile app development (with frameworks
like React Native) and desktop applications (with frameworks like
Electron).
It empowers developers to transform static web pages into engaging
and functional applications, allowing for a rich and dynamic user
experience.
8
JavaScript Basics (Variables) 10/14/2025
In JavaScript, variables are named containers used to store data
values.
They are a fundamental concept for managing and manipulating
information within a program.
JavaScript offers three primary keywords for declaring variables,
each with distinct characteristics regarding scope and mutability: var,
let, and const.
9
Variables (var)… 10/14/2025
This is the oldest keyword for variable declaration in JavaScript.
Variables declared with var are function-scoped or globally scoped if
declared outside a function.
This means they are accessible throughout the entire function or the
global scope, respectively.
var allows for both redeclaration and re-assignment of variables.
10
Variables (let )… 10/14/2025
Introduced in ES6 (ECMAScript 2015), let provides block-scoping.
This means variables declared with let are only accessible within the
block (e.g., if statement, for loop, or function) where they are defined.
let allows for re-assignment of the variable's value but prevents
redeclaration within the same scope, which helps avoid common
programming errors.
11
Variables (const )… 10/14/2025
It is introduced in ES6, const declares a constant variable, meaning its
value cannot be re-assigned after initialization.
Like let, const is block-scoped.
While the variable itself cannot be re-assigned, if a const variable
holds an object or array, the properties of that object or the elements
of that array can still be modified.
12
Variables (const )…Example 10/14/2025
13
Data types in JS 10/14/2025
Number: Represents numeric values, including integers and decimals.
String: Represents text enclosed in single, double, or backticks.
Boolean: Represents logical values: true or false.
Null: Represents an intentional empty value.
Undefined: Represents a variable declared but not assigned a value.
Object: Used to store collections of key–value pairs and more complex data.
14
Example 10/14/2025
JS
15
Operators in Java Script
Arithmetic→ do math (+, -, *, /, %, Number: Represents numeric values,
including integers and decimals.
**)
String: Represents text enclosed in single, double, or
Comparison → check backticks.
values/types (==, ===, !=, >, <) Boolean: Represents logical values: true or false.
Null: Represents an intentional empty value.
Logical →combine conditions
Undefined: Represents a variable declared but not
(&&, ||, !) assigned a value.
Assignment→ set/update Object: Used to store collections of key–value pairs
and more complex data.
variables (=, +=, -=, etc.)
10/14/2025 16
Operators in Java Script
Arithmetic→ do math (+, -, *, /, %, Example
**)
Comparison → check
values/types (==, ===, !=, >, <)
Logical →combine conditions
(&&, ||, !)
Assignment→ set/update
variables (=, +=, -=, etc.)
10/14/2025 17
Type Conversion in Java Script
Type conversion in JavaScript refers to the process of changing a value from
one data type to another.
1. Implicit Type Conversion
This can occur either automatically (implicitly) or manually (explicitly).
Arithmetic Operations: When performing arithmetic operations with different
data types, JavaScript attempts to convert values to a common type.
For example, in ` "5" - 2 `, the string "5" is implicitly converted to the number 5
before subtraction.
10/14/2025 18
Type Conversion in Java Script…
2. Explicit Type Conversion (Type Casting):
This involves manually converting a value from one data type to another
using built-in functions or constructors.
To Number: parseInt(): Parses a string and returns an integer. `
parseInt("10.5") ` becomes ` 10 `.
To String: toString() : A method available on most data types to convert them
to strings. (123).toString() becomes "123".
To Boolean: Boolean() : Converts a value to a boolean. ` Boolean(0) `
becomes ‘false ‘, Boolean("hello") ` becomes ` true `.
10/14/2025 19
Control statements in JavaScript…
Control statements in JavaScript are fundamental constructs that determine
the flow of execution within a program.
They allow for decision-making and repetitive actions based on specified
conditions.
Conditional Statements: These statements execute a block of code only if a
certain condition is met.
if statement: Executes a block of code if a condition is true.
20
Control statements in JavaScript…
if...else statement: Executes one block of code if a condition is true, and
another if it's false.
if...else if...else statement: Allows for multiple conditions to be checked
sequentially.
21
Control statements in JavaScript…
switch statement: Evaluates an expression and executes code based on
matching case values.
Ternary Operator (Conditional Operator): A shorthand for a simple if...else
statement.
22
Control statements in JavaScript…
Iterative Statements (Loops): These statements repeatedly execute a block of
code as long as a certain condition remains true.
for loop: Executes a block of code a specified number of times.
while loop: Executes a block of code as long as a condition is true. The condition is
checked before each iteration.
23
Control statements in JavaScript…
do...while loop: Executes a block of code at least once, then continues as long
as a condition is true. The condition is checked after each iteration.
for...in loop: Iterates over the enumerable properties of an object.
break: Terminates the current loop or switch statement.
continue: Skips the current iteration of a loop and proceeds to the next
iteration.
24
Examples
25
Function
Functions in JavaScript are fundamental building blocks that encapsulate
reusable blocks of code designed to perform specific tasks.
They allow for code organization, modularity, and reusability, making
codebases easier to manage and understand.
26
Key aspects of JavaScript functions
Definition: Functions are declared using the function keyword, followed by a
name (optional for anonymous functions), a list of parameters in parentheses,
and a code block enclosed in curly braces.
Invocation: Functions are executed by "calling" or "invoking" them using their
name followed by parentheses. Arguments (values passed to the function) are
placed inside the parentheses.
27
Key aspects of JavaScript functions
Parameters and Arguments: Parameters are placeholders defined in the
function declaration that receive values when the function is called.
Arguments are the actual values passed during the function invocation.
28
Key aspects of JavaScript functions
Return Values: Functions can return a value using the return keyword.
This value can be captured and used elsewhere in the code.
If no return statement is present, the function implicitly returns undefined.
29
DOM in JS
The Document Object Model (DOM) is a programming interface for web
documents, specifically HTML and XML.
It represents the structure of a document as a logical tree, where each node in
the tree represents a part of the document, such as an element, attribute, or
text content.
When a web page loads, the browser creates a DOM tree, which is an object-
oriented representation of the HTML document. This tree allows JavaScript to
interact with the document's structure, content, and style.
30
DOM in JS…
The DOM provides an Application Programming Interface (API) that allows
JavaScript to access and manipulate the elements within the document. This includes
methods for:
Selecting elements: [Link](),
[Link](), [Link](),
[Link]().
Creating new elements: [Link]().
Modifying elements: Changing text content ([Link]), attributes
([Link]()), and styles ([Link]).
Adding and removing elements: appendChild(), removeChild(). 31
DOM in JS…
Event Handling: The DOM enables JavaScript to react to user interactions and
other events (like clicks, key presses, or page loads) by attaching event listeners
to DOM nodes. When an event occurs, the associated event handler function is
executed.
Dynamic Web Pages: The DOM is fundamental to creating dynamic and
interactive web pages. It allows JavaScript to modify the page's content and
appearance in response to user actions or data changes without requiring a full
page reload.
32
Ways to add JavaScript to an HTML page.
1. Inline JavaScript (inside an HTML tag)You can add JS code directly to an
element’s attribute, such as onclick.
Best for very small scripts, but not recommended for big projects (because it
mixes HTML and JS).
33
Ways to add JavaScript to an HTML page.
2. Internal JavaScript (inside <script> tag in HTML)You can place JS code inside a
<script> block, usually in the <head> or at the end of the <body>.
Useful for small projects or when you want everything in one file.
34
Ways to add JavaScript to an HTML page.
3. External JavaScript (separate .js file linked to HTML): You create a .js file and
link it with the <script src="[Link]"></script> tag.
Best for large projects because it keeps code organized and reusable.
[Link] [Link]
35
DOM in JS Example
36
DOM in JS Example…
37
Group Work
Task 1: Create a fully functional Math game from scratch - perfect for kids to
learn math. The game must put children math skills to the test their ability to
analyze, skills to ask their mind quickly with a dynamic math quiz game built
within your JavaScript app.
Your web app must be attractive and responsive for all devices and meet the
color requirements for children specially below 13 years old. Make it smart and
attractive. Use HTML, CSS and JS only. (1opts)
38
Group Work
Task 2: Write a complete code to formulate a student multiple-page registration form.
Your code must include HTML, CSS and JavaScript only. Don’t include any framework.
Use the following attributes (Fields): (10pts)
- Student ID * - Admission Type * - Woreda *
- First Name * - Date Of Birth * - Kebele *
- Father’s Name * - Nationality* - Phone Number *
- Grandfather’s Name * - Region* - Email *
- Gender * - Zone* - NID (FAN) *
39
Thank You!!
40
