RECAP
• JavaScript is the programming language of the
web. It makes web pages interactive.
• JavaScript can change HTML content, change
HTML attribute, change CSS style, hide HTML
Elements, show hidden HTML Elements, etc.
Introduction to JavaScript 2
numbers, math and strings
Grade 9
Learning target:
•Employ string manipulation methods such as concatenation
to modify and extract data from strings effectively.
• Use mathematical operators and functions for performing
arithmetic operations with numbers in JavaScript.
Let’s think!
How can understanding the differences between
strings and numbers help in handling data from
forms or user interactions on a website?
What are numbers in JavaScript?
Numbers represent numerical data and are
a fundamental data type used for
arithmetic operations, calculations, and
mathematical manipulations.
JavaScript follows the order of operations
•Parenthesis
•Multiplication/ Division
•Addition and Subtraction
Let’s work on numbers and math!
•Web browser
•[Link]
•Right click the white space and click
inspect.
Click console
Practice 1:
Let’s try to generate the total electric bill for march in javascript.
Start by subtracting the previous meter from the
present meter. Then multiply the difference by 11
March Electric Bill
present meter 7626
previous meter 7447
difference 179
per KwH ₱ 11.00
₱ 1,969.00
Practice 2:
Let’s try to generate the total amount for this order.
Add the amount for the items ordered and the shipping
fee. Get the 12% tax for the total before tax and add
them together to get the total.
What is a string in JavaScript?
A string is a data type, a sequence of
characters enclosed within either single
quotes (') or double quotes ("). Strings can
contain letters, numbers, symbols, and
whitespace characters. They are used to
represent text data and are a
fundamental data type in JavaScript.
Let’s think!
Remember how you created
labels in MS Excel?
‘
You used this symbol to start
your label.
In JavaScript, strings = text.
Let’s create our first string!
• Web browser
• [Link]
• Right click the white space and click
inspect.
Practice 3:
creating strings in javascript
Syntax rule for strings
• It starts with ‘ and end with ‘.
• You can combine 2 strings using a + sign. This
is called concatenation.
• A string is a value. You can check a value using
this code: typeof
SOMETHING TO THINK ABOUT:
Syntax rule for strings
• You can combine a string and a number using
a + sign.
Practice 4:
Let’s combine strings and numbers!
Food Order
Lumpia ₱ 150.00
Pancit ₱ 200.00
Lechon Belly ₱ 350.00
Total before Tax
Tax (0%)
₱
₱
700.00
-
This should
Senior Citizen Discount (20%)
Total
₱
₱
140.00
560.00
be your
output
Number or string?
Number, string, concatenated?
Number, string, concatenated?
Number, string, concatenated?
Number, string, concatenated?
Learning target:
•Employ string manipulation methods such as concatenation
to modify and extract data from strings effectively.
• Use mathematical operators and functions for performing
arithmetic operations with numbers in JavaScript.
Exit ticket:
What is the main difference
between strings and
numbers in JavaScript?
Explain your answer clearly.
Hoa 3.2 combining strings and numbers
• Open your browser and go to console.
• Combine strings and numbers using JavaScript to calculate and solve each problems in one line.
• Observe the proper use of parenthesis and plus symbol to make your total correct.
• Your output should be the same as the one highlighted in yellow.
• Take a screenshot and submit through the MS Teams assignments tab.
Printing Charges Postpaid Plan Food Order
present meter 87659 Plan 799 799.00 Burger ₱ 299.00
previous meter 76709 Browsing Charges 236.00 Fries ₱ 85.00
actual printed copies 10950 Call and Text (Outside Network) 12.75 Cola ₱ 50.00
less 2% spoilage 219 Roaming Charge 499.00 Total before Tax ₱ 434.00
total printed copies 10731 Total before tax 1546.75 Tax (12%) ₱ 52.08
cost per copy ₱ 0.50 12% Tax 185.61 Voucher ( 20% discount) ₱ 86.80
Bill for the Month of March ₱5,365.50 Amount to Pay ₱ 1,732.36 Total ₱ 399.28