Faculty of Information Technology
Middle East University
Introduction to
JavaScript
Web Applications Development – Week 7
What is JavaScript?
• JavaScript is a programming language used to make web pages
interactive.
• It runs on the client side (in the browser) and can manipulate HTML
and CSS.
Web Applications Development - 0413201 2
Basic JavaScript Syntax
• Declaring variables:
• Functions:
Web Applications Development - 0413201 3
Hands-On: Writing Your First
JavaScript Program
• Create a simple HTML file and include the following JavaScript to
display an alert:
Web Applications Development - 0413201 4
JavaScript Variables
• JavaScript has three types of variable declarations:
• var: Function-scoped.
• let: Block-scoped.
• const: Block-scoped, cannot be reassigned.
Web Applications Development - 0413201 5
JavaScript Data Types
• Primitive data types:
• String, Number, Boolean, Undefined, Null.
Web Applications Development - 0413201 6
JavaScript Operators
• Arithmetic: +, -, *, /
• Comparison: ==, ===, !=, !==, >, <
• Logical: &&, ||, !
Web Applications Development - 0413201 7
Hands-On: Basic JavaScript
Operations
• Write a JavaScript program that takes two numbers from the user and
displays their sum.
Web Applications Development - 0413201 8
JavaScript Functions
• Functions allow for reusable code blocks.
Web Applications Development - 0413201 9
Hands-On: Writing Functions
• Write a function that takes a user’s name as input and displays a
greeting message.
Web Applications Development - 0413201 10
Event Handling in JavaScript
• JavaScript can respond to user actions such as clicks and form
submissions.
Web Applications Development - 0413201 11
DOM Manipulation
• JavaScript can interact with the Document Object Model (DOM) to
dynamically change HTML content.
Web Applications Development - 0413201 12
Hands-On: DOM Manipulation
• Create a webpage where clicking a button changes the text of a
heading using JavaScript.
Web Applications Development - 0413201 13
JavaScript Arrays
• Arrays store multiple values in a single variable.
Web Applications Development - 0413201 14
Hands-On: Using Arrays
• Write a JavaScript program that displays an array of colors and allows
the user to add a new color to the array.
Web Applications Development - 0413201 15
JavaScript Loops
• Loops allow code to run repeatedly.
• for loop:
• while loop:
Web Applications Development - 0413201 16
Hands-On: Loops in Action
• Create a JavaScript program that loops through an array of fruits and
displays each fruit.
Web Applications Development - 0413201 17
JavaScript Objects
• Objects store data in key-value pairs.
Web Applications Development - 0413201 18
Hands-On: Creating and Using
Objects
• Create a JavaScript object representing a person, with properties like
name, age, and occupation.
• Write a function that prints the person’s details.
Web Applications Development - 0413201 19
Recap
• Overview of JavaScript basics, including variables, functions, event
handling, and DOM manipulation.
• Hands-on exercises to solidify understanding.
Web Applications Development - 0413201 20
