Fundamentals (Paid)
  • 🚀Course Overview
  • Course Logistics
    • 🏫Course Methodology
      • 🧩Course Components
      • 💬Community Channels
      • 🎲Course Projects
    • 💻Required Hardware and Software
      • ☝️Required Software 1
      • ✌️Required Software 2
      • 👍Recommended Setup
    • 🗓️Schedule
    • 💡Tips and Tricks
      • 📒Coding Strategies
      • 🛠️Tooling Pro Tips
    • 🎓Post-Course
      • 🎓LinkedIn Certificates
      • 🚂Bootcamp Admission Criteria
  • 1: Introduction
    • 1.1: What is Coding?
    • 1.2: Web Browsers
    • 1.3: Command Line
    • Additional Resources 1
  • 2: Basic Data Manipulation
    • 2: Operators and Expressions
      • 2.1: Arithmetic Operators | Mathematical Expressions
      • 2.2: Assignment Operators | Variables
    • 2.3: Our First Program
    • Additional Resources 2
  • 3: Structuring and Debugging Code
    • 3.1: Functions
    • 3.2: Errors
    • Additional Resources 3
  • 4: Conditional Logic
    • 4.1: Intro to Logic
    • 4.2: Pseudo-Code, Boolean Or
    • 4.3: Boolean AND, NOT
    • 4.4: Input Validation
    • Additional Resources 4
  • 5: Managing State and Input Validation
    • 5.1: Program Lifecycle and State
    • 5.2: Program State for Game Modes
    • Additional Resources 5
  • 6: Arrays and Iteration
    • 6.1: Arrays
    • 6.2: Loops
    • 6.3: Loops with Arrays
    • Additional Resources 6
  • 7: Version Control
    • 7.1: Git
    • Additional Resources 7
  • 8: GitHub
    • 8.1: Intro to GitHub
    • 8.2: GitHub Fork and Clone
    • 8.3: GitHub Pull Request
    • 8.4: GitHub Repo Browsing
    • 8.5: Deployment
    • Additional Resources 8
  • 9: JavaScript Objects
    • 9.1: JavaScript Objects
    • 9.2: Card Deck Generation with Loops
  • 10: Advanced
    • 10.1 HTML
    • 10.2: CSS
    • 10.3: The Document Object Model
    • 10.4: DOM Manipulation
    • 10.5: Advanced Debugging with Sources Tab
  • 11: POST COURSE EXERCISES
    • DOM
    • Further Readings
  • In-Class Exercises
    • Day 2: Basic File and Data Manipulation
    • Day 3: Functions
    • Day 4: If Statements, Boolean Or, Boolean And
    • Day 5: Program State
    • Day 6: Scissors Paper Stone Redux
    • Day 7: Loops
    • Day 8: Arrays and Loops
    • Day 9: Beat That Redux
    • Day 10: Moar Cards / Chat Bot
    • Day 11: Blackjack Redux, DOM
  • Projects
    • Project 1: Scissors Paper Stone
      • Project 1: Scissors Paper Stone (Part 1)
      • Project 1: Scissors Paper Stone (Part 2)
    • Project 2: Beat That!
    • Project 3: Blackjack
  • Past Projects
    • Drawing With Emojis
    • Guess the Word
Powered by GitBook
On this page
  • Learning Objectives
  • Video
  • Introduction
  • Using Chrome DevTools Console
  • Try
  • Operators
  • Further Readings
  1. 2: Basic Data Manipulation

2: Operators and Expressions

PreviousAdditional Resources 1Next2.1: Arithmetic Operators | Mathematical Expressions

Last updated 2 years ago

Learning Objectives

  • Define a "code expression".

  • Understand the operator's function within a code expression

  • Use the Chrome DevTools Console to begin writing code expressions

Video

Introduction

This module is the beginning of our programming journey!

Programming is the act of writing code (instructions) for the computer to execute sequentially. It is the same as written instructions for a cooking recipe!

We will first start with learning how to write single lines of code before stringing them together into a bigger whole. Before long, you will be creating multi-line programs of your own!

Code Expression

An expression is a "valid unit of code that resolves to a value".

This does mean that there are invalid code that are "unresolvable" and will give errors - something that will be discussed at a later time.

There are two kinds of code expressions - (1) those that purely evaluate; (2) those that have a "side effect".

We are familiar with the expressions that purely evaluate. These are the arithmetic expressions we learnt in school: 5 + 6 . This, we understand, evaluates itself to 11.

An example of the second type expression type is this: a = 3 . This expression enters into a new, yet understandable realm. This expression uses the = operator to assign the value 3to the variable x. This expression will evaluate to 3.

We will look into these expressions in greater detail within the sub-modules. At this point we want to first have a space to experiment with code...

Using Chrome DevTools Console

The reason we ask every student to use Google Chrome for this course is to both standardise the tools everyone uses and, in our current context, this functionality we are exploring to begin our foray into programming.

Setup

  1. Open a new tab in the Chrome browser by clicking File > New Tab; or pressing Cmd+T for Mac, and Ctrl+T for Windows.

  2. Open Chrome Developer Tools by clicking View > Developer > JavaScript Console; or pressing Cmd+Option+I for Mac or Ctrl+Shift+I for Windows; or F12; or right-clicking anywhere in Chrome and clicking Inspect.

  3. Select the Console tab in Chrome Dev Tools.

Try

The JavaScript language is capable of performing math operations. Enter the following calculations into the Chrome DevTools Console, followed by the Enter key.

2 + 2;
4 * 2;
4 / 2;
4 - 2;

The input here is a mathematical equation typed in by the user, you. You have instructed the computer to perform a mathematical operation. The computer _returned _ an output, the evaluation of the equation.

These exercises may seem trivial, but mathematical operations are at the core of all computing instructions. Computers fundamentally compute. That being said, they can get things predictably wrong. Try: 0.1 + 0.2 in your console. Did you get what you expect?

Operators

In the above code, + * - and / are known as operators. Specifically, they are arithmetical operators: performing a mathematical operations between 2 numbers.

We will address all the arithmetic operators in the next section, and other operators in the following sections!.

Do not worry if you are afraid of math. This course only involves basic math. You are here to learn how to write code and not solve math problems! Hang in there 💪

Further Readings

Feel free to read up more on !

Coding Fundamentals will not cover why computers sometimes behave in odd ways, but you can read up more about this particular behaviour and .

Google's own documentation
here
here
pancakes ftw!
Accessing the Developer tools in the Chrome browser setting
Console tab in Chrome DevTools
Chrome console allows for in-browser calculations
Expressions and operators - JavaScript | MDN
MDN Documentation of JavaScript expressions and operators
Logo