← Learn Javascript

Introduction

Introduction to expressions, statements, and operators

slides | md

Introduction

Review the following sections and perform the activities on your own or with your group.

Perform the task(s) when you see this 👉 emoji

Learning Objectives

Students who complete this module will be able to:

  • Explain what Javascript can do.
  • Run Javascript code in a web browser console and code playground.
  • List data types supported by Javascript.
  • Classify and demonstrate Javascript data types, expressions, and statements.
Homework

What is Javascript?

Javascript is the programming language of the web. With Javascript you can

  • change HTML, CSS, or content of a web page
  • respond to user events, animate or display content or media
  • (using Node.js) run on a server, query to databases, publish mobile apps
  • and much more.

Programming, the act of “writing instructions for a computer to execute,” usually involves:

  • Flow - The order in which statements are executed.
  • State - The status of data (variables) in your program.
  • Logic - Making decisions based on conditions (state).
  • Events - Things that happen, like user input, that may change the state.
Above, the structure of a “turn the lamp on” program. Note the logic (decisions the computer makes) based on state (the status of variables in the program) and events (e.g. user input) directing the computer towards its goal.

How to use Javascript

Javascript can run in any web browser (or on your computer using Node). The next lesson covers how to add scripts to a web page, but first let's look at two quick ways to test Javascript.

👉 Try it out - Two places to test Javascript - 1

The browser console is an excellent tool for checking messages and warnings, as well as allowing you to test code.

  1. Open DevTools and paste the below into the console at the bottom >. You will see a simple HTML alert.
alert("hello world!");

Code playgrounds like jsfiddle.net and codepen.io make it easy to quickly test and share Javascript (and HTML and CSS files) in a "web environment".

👉 Try it out - Two places to test Javascript - 2

  1. Add the code above to one of these playgrounds to test it out.

code playground

Some examples from class:

Data Types

  • Javascript is a "loosely-typed" language.
  • It will infer the type of data you store in a variable (unlike other languages).

true

Javascript organizes data by primitive and non-primitive types

Data Types

  • All programming languages use data to manage their state.
  • Data has both a value and a type.
  • Below, the boolean type can only have one of two values: true or false.
true
false

The Javascript number type does not distinguish integer from float values.

1
3.14
-491143422

The string type includes any character as its value, wrapped using a single 'words' or double "other words" quotes. The number 3.14 below is technically a string because it is wrapped in quotes.

"hello world 🥰"
'3.14'
`strings wrapped
 using back ticks support
 multiple lines`

A later lesson will discuss types categorized as Objects (collections like arrays, objects, Date, etc.).

[4,1,2]
{key: "value"}
new Date()

Expressions

An expression is any unit of code that resolves to a data value. Expressions are the fundamental building blocks of code, and use data ("operands") with operators to perform math, logic, or string calculations.

👉 Try it out - Explore data types using the Javascript Console

  1. Primary expressions - If you pass data to Javascript it will simply return the data's value.
12
  1. Adding an arithmetic operator and another data value will prompt Javascript to evaluate the code, multiplying the values to return (output) the new value 144 produced.
12 * 12
  1. If you use the typeof operator, Javascript will return a string describing the data's type.
typeof 12
  1. The following comparison operators will return a logical boolean value based on whether the comparison in the expression is true.
4 > 5

The equality operator == checks to see if two values are equal, true

1 == 1

The inequality operator != checks whether its two operands are not equal.

1 != 1

The strict equality operator === will compare the value and type, and is specific to Javascript. What will these return?

1 === "1"
Solution

It will return false because 1 is a number and "1" is a string.

If you combine expressions, Javascript will evaluate each in the appropriate order. What will these return?

typeof (4 > 5)
typeof (typeof (4 > 5))
Solution 
typeof (4 > 5) // -> "boolean"
typeof (typeof (4 > 5)) // -> "string"

4 > 5 uses a comparison operator so it will return false. But since typeof returns a string, the first line will return "boolean" (note the double quotes), and the second line will return "string"

Statements

  • A statement is an instruction that performs a specific action.
  • Like a sentence—statements have punctuation (a semicolon ;) to note when the instruction is complete.
  • This statement assigns a value to the greeting variable with an assignment operator.

true

Next steps

  1. Try the Exercises below.
  2. Start working on homework listed in the schedule.
  3. Continue to the next lesson: Variables.
  4. Continue to the next lesson: Variables slides | md

Exercises

👉 Try it out - Example Expressions

See if you can guess the return value of each of these expressions before you run them in the dev console.

Explore the functions and properties

1 == 1
1 === 1
1 === "1"
1 == true
1 === true
1 != false
1 !== false
100 == 100
100 == "100"
1 != 2
true != false
true != !false
true != !!false
Math.random()*100
Math.ceil(1.2)
"hello".length
/[aeiouAEIOU]/.test(123)
/[aeiouAEIOU]/.test("b")
/[aeiouAEIOU]/.test("a")

References

Presentation comments ...

--- ## Contents 1. [Introduction](#introduction) 1. [What is Javascript?](#what-is-javascript) `5 min` 1. [How to use Javascript](#how-to-use-javascript) `5 min` 1. [Data Types](#data-types) `5 min` 1. [Expressions](#expressions) `5 min` 1. [Statements](#statements) `2 min` 1. [Next steps](#next-steps) 1. [Exercises](#exercises) 1. [References](#references)

Variations of this section: learn-javascript/topics/introduction.md learn-computing/topics/data-types.md