WEB DEVELOPMENT
SE102.3
CHAPTER - 04
HTMLJAVASCRIPT
Basics – HTML Slides 02 – PART A
NSBM_CFP_1207 Ms. Thisarani Wickramasinghe / Mr. Anton Jayakody
JavaScript
JavaScript is a lightweight, interpreted programming language.
It is commonly used to create dynamic and interactive elements in web applications.
JavaScript is very easy to implement because it is integrated with HTML. It is open
and cross-platform.
The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
JavaScript cannot run outside the browser - it is a client-side scripting language.
JavaScript is case-sensitive.
.
JavaScript
Express
frameworks JavaScript Libraries
jQuery
Next Axios
React Chart.js
Angular D3.js
Vue.js Socket.io
Ember.js Underscore.js
Node.js Lodash
Next.js Three.js
JavaScript Placement in HTML File
There is flexibility to place JavaScript code anywhere in an HTML document. However,
the most preferred ways to include JavaScript in an HTML file are as follows −
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in an external file and then include in <head>...</head> section.
Script in <body>...</body> section
Script in <head>...</head> section
Script in an external file and then include in <head>...</head> section
The external file can appear in the head or the body section of the HTML document.
Save the external JavaScript file with a .js file extension.
Example : external.html external.js
JavaScript Display Possibilities
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().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Using document.write()
For testing purposes, it is convenient to use document.write():
Writing into an alert box, using window.alert().
Writing into the browser console, using
console.log().
JavaScript Comments
Single-line comments: Single-line comments start with // and continue until the end of the line.
var x = 5; // This is a single-line comment
Multi-line comments start with /* and end with */.Any text between /* and */ will be ignored
by JavaScript.
/*
This is a multi-line comment.
It can span multiple lines and is enclosed between
the opening /* and closing */ tags.
*/
JavaScript Variables
The general rules for constructing names for variables (unique identifiers) are:
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with $ and _
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.
var carName; or let carName;
let person = "John Doe", carName = "Volvo", price = 200;
Example
Try this - Activity 01
Declare variables for your name, university, age, and city,
assign values to them, and then generate an output in the
following format using JavaScript :
“My name is [Your Name] and my university is [Your
University]. I am [Your Age] years old and I live in [Your
City].”
Using document.write()
Result
Using document.getElementryById(
Activity 02
You have 10 candies. Your friend gives you 5 more
candies. How many candies do you have in total?
(Use an alert box, using window.alert().)
Simple calculation – Activity 03
You have $500 in your wallet. You spend $250 on groceries and $100
on clothes.
How much money remain with you?
(use “let” to define variables)
Simple calculation – Activity 04
Scenario: You're organizing a party and need to calculate
the total cost, including expenses for food, decorations, and
entertainment.
Suppose you're hosting a party for 30 guests. The cost per
person for food is $15, decorations cost $150, and
entertainment (such as a DJ or live band) costs $300.
Write a JavaScript code to calculate the total cost of the
party and display the result.
(use “let” or “var” to define variables)
Homework - Activity 05
You're planning a weekend getaway with your friends and need to calculate
the total expenses, including costs for accommodation, transportation, and
activities. You've decided to go on a road trip with 4 friends. The cost per
person for accommodation is $50 per night, transportation costs $200 for the
entire trip, and you've budgeted $100 for activities for all.
Write a JavaScript code to calculate the total expenses of the weekend
getaway and display the result.
(use “let” or “var” to define variables and alert box )
JavaScript Arithmetic
Operations
Arithmetic operators in JavaScript perform mathematical calculations on numeric values
(operands).
Activity 06
Addition and Subtraction
Perform a basic calculation with two numbers: 10 and 5.
Calculate their sum and division. Display the results using
alert boxes.
JavaScript Arithmetic
Operations
Activity 07
Calculate the revenue from the sale of story books and writing books. Assume
that each story book sells for Rs.200 and each writing book sells for Rs.100. If
40 story books and 20 writing books are sold, what is the total revenue from
the sale of both types of books?
The output should be as below
Activity 08 – Homework
Imagine you're running a small grocery store. You purchased 100 kg of
apples at $2 per kg and 50 kg of oranges at $1.50 per kg. You sold 60 kg
of apples and 30 kg of oranges.
Write a JavaScript code to calculate the total revenue from the sale of
apples and oranges, and then display the result.
The output should be as below using alert box.
JavaScript Datatypes
Data types in JavaScript refers to the types of the values that we are storing or working
with. In JavaScript, the object data type allows us to store the collection of the data in
the key-value format.
JavaScript has 8 Datatypes The Object Datatype
1. String2. Number3. Bigint4. Boolean The object data type can contain:
5. Undefined6. Null7. Symbol8. Object
1. An object2. An array3. A date
JavaScript
Datatypes
1. String2. Number3.
Bigint4. Boolean5.
Undefined6. Null7.
Symbol
JavaScript
Datatypes
Object Datatypes
1. An object2. An array3. A date
Logical Operations
Suppose you have two variables, x and y, with the values true and false respectively.
Write a JavaScript code to perform logical AND, logical OR, and logical NOT operations using
these variables, and then display the results.
Activity 09
Question:
Consider a scenario where a user is eligible for a discount if they are either a gold member or if
their total purchase amount exceeds $100.
Write a JavaScript code snippet to determine the user is eligible for the discount based on the
following conditions:
Assume that the user is a gold member (represented by a boolean variable isGoldMember) and
the user's total purchase amount (represented by a number variable totalAmount) is $120.
Activity 10
Question:
Suppose you're managing an online store where users can qualify for free shipping if they are
either a premium member and if their total cart value exceeds $50.
Write a JavaScript code snippet to determine if a user is eligible for free shipping based on the
following conditions:
Assume that the user is a premium member (represented by a boolean variable
isPremiumMember) and the user's total cart value (represented by a number variable
totalCartValue) is $60.
Window Objects JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt
box.
Alert Box
An alert box is often used if you want to make sure information comes through to
the user.
When an alert box pops up, the user will have to click "OK" to proceed.
window.alert("sometext");
The window.alert() method can be written without the window prefix.
Confirm Box
A confirm box is often used if you want the user to verify or accept something. When a confirm
box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax : window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
Syntax : window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window prefix.
Open Window
Lets Cont….
