Skip to content
This repository has been archived by the owner on Aug 28, 2023. It is now read-only.

Latest commit

 

History

History
426 lines (257 loc) · 6.48 KB

lesson02.md

File metadata and controls

426 lines (257 loc) · 6.48 KB
Raw

Basic Frontend - Spring 2023

Lesson 2, Tuesday, 2023-03-21

Recap

Can you tell me, what did we talk about last lesson?

Recap: Javascript Console

F12 is the magic word

Recap: data types

Number:

42
-3.1415

We can also do some computations

1 + 1

10 / 5

5 ** 3

Recap: data types

String:

"John"
'Berlin'

String operators

The addition operator (+) can be used to add (concatenate) two strings:

"a" + "b"    // results: "ab"

String operators

The addition operator can be used on Strings and Numbers:

1 + 1                // is 2
"hello" + " world"   // is "hello world"

Importance of data types

1 + 1        // is 2
"1" + "1"    // is "11"

It is important to select the appropriate data type for your data, as the behavior of operators in JavaScript varies depending on the data type used.

Quick exercise

use the + operator to combine multiple strings to match the following sentence:

Hello, my name is + (name) + and I like + (food)

String operators

We shouldn't use other operators (like -, /, *) on strings, while javascript may allow that, the results are unexpected, with strings, we should only use +.

Data Type: Boolean

  • Boolean describes a yes/no situation
  • in JavaScript, we use true or false

Practice

Open the console, and type in the following:

  • true
  • false

Why would we dedicate an entire data type for just two values?

Comparison operators

  • === strict equality
1 === 1     // true
3 === 10    // false

3 === "Hello"  // false
3 === "3"      // false

"Harald" === "Harald" // true
"Harald" === "Sevtap" // false
"Abdo" === "abdo"     // false

Comparison operators

  • !== strict inequality
3 !== 5           // true
3 !== 3           // false
1 !== "Cookies"   // true

Comparison operators

We can use === and !== to test for the equality and inequality of any 2 values in javascript.

Quick exercise

Use the equality comparison operators to generate boolean values for these questions:

  • is your favorite food Pizza?
  • are you 25 years old?
  • is "Friends" your favorite tv series?
  • is 40 your shoe size?

As an example for the first item on this list, my favorite food is Döner:

"Pizza" === "Döner"  // false

Comparison operators

There are a couple of operators that we can use for numbers only

  • > greater than
  • < less than
  • >= greater or equal
  • <= less or equal
1 > 0 // true
1 > 5 // false
10 < 20 // true
10 < 5 // false
42 >= 40 // true
42 >= 42 // true
42 >= 50 // false

Comparison operators

  • === strict equality
  • !== strict inequality
  • > greater than
  • < less than
  • >= greater or equal
  • <= less or equal

All of these can only return true or false

Summary

So far, we learned how to enter data and how to use operators to derive new data.

But when reading the code we wrote, we won't quite understand it later:

4 * 8
32 / 2

What do you think these number mean?

Variables

Variable

A pointer to value.

let price = 5;
let name = "John";

Variable

Examples:

let priceCoffee = 2;
let priceCappuccino = 3;
let customer = "John";
let greeting = "Hello";
let likesCarlo = true;
let hasKids = false;

Can you guess how we can define a variable?

How do we define a variable?

We write:

  • let
  • the variable name
  • =
  • the value we want
  • ;

Variables are variable

You can change the value of a variable using the assignment operator (=):

let temperature = 24;   // define a variable, initialize it to 24
temperature = 30;       // assign a new value (30) to the variable
temperature = 23;       // now temperature is 23

We define a variable once, then we can change it as often as needed.

try it!

Create some variables:

  • one for your full name
  • one for your age
  • one for your favorite city
  • one for whether you can speak German or not
  • and anything else you can think of :)

In the JavaScript console, enter the name of the variable. Do you see its value?

Bonus: Change the value of one of the variables that you defined.

Variables

Variables can be used wherever we can use values:

let pricePerTicket = 8;
let friends = 3;
let totalPrice = friends * pricePerTicket;

Why do we use variables?

We use variables

  • to give names (meaning) to values. 42 could mean a person’s age or shoe size.
  • to avoid repetitions. We define the variable once with a value, and use it often.

Variable names

You can name your variables in a lot of ways:

  • You can use letters, numbers, and underscore _ (spaces are not allowed!)
  • Variable name cannot start with a number.

Valid variable names:

let element = 3;
let element3 = 5;

Invalid variable names:

let 2squared = 4;
let element-1 = 0;
let full name = 'Anakin Skywalker';

Giving good and descriptive names to your variables is very important!

Good variable names make the code easier to understand by other developers, and even by yourself!

Valid but not very descriptive variable names:

let a = 0;
let _12 = 0;
let asldjf = 0;
let thisisareallylongvariablename = 0;

In this course, and JavaScript in general, we use 'camelCase':

  • isStudent
  • favoriteBook
  • likesGermanFood

Variable names are case sensitive:

let name = 'John';
let Name = 'John';
let NAME = 'John';

These are 3 different variables.

Practice

Let's say we want to go to the cinema with some friends (choose any number).

How many people are going to the cinema in total? Create a variable for that.

A ticket to watch the movie costs 12.5€, create a variable for this as well.

Create a new variable that contains how much we have to pay in total.

Harald and Woytek volunteered to pay for the tickets. Use JavaScript to compute how much each has to pay.