Scribd
Upload
17 views

Week 6 - JavaScript (Part 2)

This document discusses JavaScript concepts including: 1. Converting values between strings and integers using parseInt() and toString() 2. Performing math operations like addition and using the modulus operator 3. Incrementing and decrementing values with ++ and -- 4. Comparing values using equality, inequality, and logical operators 5. Fetching and interpreting JSON data from external APIs

Uploaded by

Aidan Thompson
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

Week 6 - JavaScript (Part 2)

This document discusses JavaScript concepts including: 1. Converting values between strings and integers using parseInt() and toString() 2. Performing math operations like addition and using the modulus operator 3. Incrementing and decrementing values with ++ and -- 4. Comparing values using equality, inequality, and logical operators 5. Fetching and interpreting JSON data from external APIs

Uploaded by

Aidan Thompson
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

JavaScript (Part 2)

Sean Preston
What you’ll learn today…
1. Continue to learn the JavaScript programming language.

2. How we send data between applications using JSON.

3. How we can use tools to interpret JSON data from an API.


JavaScript Operations
JavaScript Operations – Converting
Values
• In JavaScript, we can convert values like we can in many other
programming languages.

• For example, we can convert the string “50” into an integer by using:
parseInt(‘50’);

• We can even use this to strip out any alphabetical characters:


parseInt(’50 years old’); // This will return 50 as an int
JavaScript Operations – Converting
Values
• The same can be done the other way (although, we probably
wouldn’t do this as often):
String(50); // Will return the string ’50’

• An alternative method to achieving this is to append .toString() to a


variable.
age.toString() // Will return the value of age as a variable
JavaScript Operations – Math
• Math in JavaScript is very similar to other programming languages:
const total = 5 + 5; // total would equal 10.

• We can also use the % modulus operator. This operator divides the
first value by the second and returns the remainder. This can be used
to check if a value is odd or even. When divided by two, if 0 remains,
the value is even. If 1 remains, the value is odd.
const isOdd = 200 % 2; // Will return 1 if odd, 0 if even
JavaScript Operations – Increment
• We can also use -- to decrement a value and ++ to increment a value.

const total = ++num // This adds 1 to num and stores in total

const total = --num // This subtracts 1 to num and stores in total


JavaScript Operations – Comparisons
• When comparing two values, we can use the following:

• === Equality
• !== Inequality
•> Greater than
•< Less than
• >= Greater than or equal to
• <= Less than or equal to
JavaScript Operations – Comparisons
• We can also use ==. However, it’s often not advised.

• Does anyone know the difference between == and ===?


JavaScript Operations – Comparisons
• We can also use ==. However, it’s often not advised.

• Does anyone know the difference between == and ===?

• ANS: === also checks the data type!


JavaScript Operations – Access Logic
• We can use logical operators with operands that have a value of true
or false.

• For example, we might want to check if someone is legally allowed to


buy a drink and has enough money:

If(age > 18 && money >= 4.99) { … }


Data Handling
Advanced JavaScript – JSON
• It is common when dealing with external data sources that data is
stored in JSON.

• JSON is a subset of the JavaScript language allowing data to be stored


as a comma-separated list of key:value pairs.

• All keys must be strings (even if they’re an integer):

{“name”:”Bob”,”type”:”cat”,”age”:”8”}
JSON Activity – 15 min
• Visit https://api.tvmaze.com/search/shows?q=simpsons

• You should see a large JSON string – pretty difficult to read!

• Install the “JSON Viewer” extension for Chrome. Then, re-open the
above URL.

• You should now be able to interpret the information returned!


Advanced JavaScript – Fetch
• The fetch() method allows us to “fetch” data from an API.

• The fetch() method is asynchronous – therefore allowing other operations


to be executed while we wait for data from the API to be returned.

• We can then use the .then() and .catch() methods to execute code on the
fetch being resolved (i.e. successful) or rejected (i.e. error).

• Often the data being returned is in JSON and will need to be converted!
Once you have
completed the activities
in a lesson you should
work on your assignment

Activities

You might also like