Fundamentals: Part 1 (v1)

Fundamentals: Part 1 (v1)

Let’s dive right in!

Learning Objectives

Look through these now and then use them to test yourself after doing the assignment:

  • How do you declare a variable?
  • What are three different ways to declare a variable?
  • Which one should you use when?
  • What are the rules for naming variables?
  • What are operators, operands, and operations?
  • What is concatenation and what happens when you add numbers and strings together?
  • What are the different types of operators in JavaScript?
  • What is the difference between == and ===?
  • What are operator precedence values?
  • What are the increment/decrement operators?
    • What is the difference between prefixing and post-fixing them?
  • What are assignment operators?
  • What is the "Unary +" Operator?

Live Session

Watch the following 3 parts of the recording of the live session (21/10/2020) that introduces JavaScript:

Total duration: 175 minutes

Part 1/3 – Duration: 68 minutes

Part 2/3 – Duration: 90 minutes

Part 3/3 – Duration: 14 minutes

Numbers

Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.

Study the following material and implement the concepts in your own web page:

  1. JavaScript Numbers @ W3Schools (You must dedicate at least 4 to 6 hours on this material.)
  2. JavaScript Arithmetic @ W3Schools (You must dedicate at least 40 minutes on this material.)
  3. This MDN article covers the same info from a slightly different point of view. There’s much more that you can do with numbers, but this is all you need at the moment. (You must dedicate at least 2 hours on this material.)
  4. Read through (and code along with!) this article about operators in Javascript. Don’t forget to do the "Tasks" at the bottom of the page! It will give you a pretty good idea of what you can accomplish with numbers (among other things!) in JavaScript.

Here is a neat trick to throw away those decimals from a number using the bitwise NOT operator. We suggest you forget the bitwise operators for now, as it is a rather advanced topic. Just keep this code snippet for whenever you want to quickly convert a floating point number to an integer and impress your fellow JS devs!

let float = 3.1415;
let int = ~~3.1415;
console.log( int );
// 3
console.log( ~~1234.5678 );
// 1234

Variables

Variables are pointers to "storage containers" for data in your code. You can think of variables as something close to your contacts in your mobile phone. Each contact list entry contains a name, e.g. Mary. This is your variable name. And each contact list name (variable name) points to a place in the memory of your mobile phone that stores a telephone number or address, e.g. 6985252114.

VARIABLE NAMEPOINTER TODATA IN MEMORY
Mary— Points to –>6985252114
Ahmed— Points to –>6971234567

In much the same way, variables in programming languages, are names that point to some memory location in which some kind of data is stored:

var someVariableName = "Just some text.";
// The someVariableName, now points to a place in memory
// where the "Just some text." data is stored and can be retrieved.

Until recently there was only one way to create a variable in JavaScript — the var statement. But in the newest JavaScript versions we have two more ways — let and const.

  1. This variable tutorial will explain you everything you need to know! Be sure to do the Tasks at the end. Information won’t stick without practice! (Estimated reading and practice time for this material: approx. 2 hours). Here is a list of the concepts you’ll be introduced to through this post:
  • What is a variable?
  • Constants
  • Variable naming and naming things right
  • Case sensitivity and reserved names

The above tutorial mentioned this, but it’s important enough to note again: let and const are both relatively new ways to declare variables in JavaScript. In many tutorials (and code) across the internet you’re likely to encounter var statements. Don’t let it bother you! There’s nothing inherently wrong with var, and in most cases var and let behave the same way. But sometimes the behavior of var is not what you would expect. Just stick to let (and const) for now. The precise differences between var and let will be explained later.

Practice!

You can easily run your own JavaScript code from files you create on your computer. The simplest way to get started is to simply create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <script>
    // Your JavaScript goes here!
    console.log("Hello, World!")
  </script>
</body>
</html>

Save and open this file up in a web browser and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our console.log statement.

console.log() is the command to print something to the developer console in your browser. Use it for all of the following exercises.

Try the following exercises:

  1. Add 2 numbers together! (just type console.log(23 + 97) into your html file)
  2. Add a sequence of 6 different numbers together.
  3. Print the solution to the following equation: (4 + 6 + 9) / 77
    1. answer should be approximately 0.24675
  4. Let’s use variables!
    1. Type the following at the top of the script tag: let a = 10
    2. console.log(a) should print 10
    3. Try the following: 9 * a
    4. and this: let b = 7 * a (returns undefined) and then console.log(b)
  5. You should be getting the hang of this by now… try this sequence:
    1. Declare a constant variable max with the value 57
    2. Set another variable actual to max - 13
    3. Set another variable percentage to actual / max
    4. If you type percentage in the console and press enter you should see a value like 0.7719
  6. Can you think of any real-life scenarios where Numbers and the arithmetic operators of JavaScript can be of use? Take the time to implement these scenarios in your code and add them to the web page. Here’s an example to get you started:

How about using JavaScript to calculate the VAT (or some other kind of tax) for a product?

const VAT = 24;    // VAT Tax is set to 24%
const phone = 300; // Net price
const total = phone + ( phone * ( VAT / 100 ) ); // Total === net price + VAT

How about using JavaScript to calculate the number of calories burned while walking or any other activity?

How about calculating a woman’s fertile window?

Blood alcohol content anyone?

There is no shortage of (really useful) ideas to implement in JavaScript using Numbers and the arithmetic operators, so let’s get to work!

Take a few minutes to keep playing around with various things in your script tag. Eventually, we will learn how to actually make those numbers and things show up on the webpage, but all of this logic will remain the same, so make sure you’re comfortable with it before moving on.

Additional Resources

This section contains helpful links to other content.

Assignment

Click this link and follow the instructions on how to complete and submit this assignment.

Material based on Erik Trautman | The Odin Project

UPDATED: 02.02.2021

  • [16.11.2020] Added article for variable shadowing
  • [27.11.2020] Added the bitwise operator rounding trick

CONTRIBUTORS: