Skip to content

lesson01.md

Latest commit

 

History

History
448 lines (283 loc) · 10.8 KB

lesson01.md

File metadata and controls

448 lines (283 loc) · 10.8 KB

JavaScript Course - Spring 2026

Lesson 1, Tuesday, 2026-03-24

Lesson overview

  • Introduction to JavaScript
  • Data Types

Welcome to JavaScript!

It does not matter what we cover, but what you discover

- Victor Weisskopf, quoted by Noam Chomsky

Questions

  • don't be shy (or scared), ask questions!
    • as many as possible
    • there are no bad questions
  • interrupt us
  • ask us to repeat
  • if something is not clear to you, it's likely that it's not clear for others

Growth Mindset

A note about AI

  • Don't overuse it
  • Think first, don't ask for answers
  • Make it help you understand the problem better
  • Use it to explain solutions

Pillars of Web Development

HTML CSS JavaScript
HTML5 CSS3 JS
Content Presentation Dynamic Effects
Nouns Adjectives Verbs 
<p>Hey</p>
<!-- HTML: Adds a paragraph -->
p {
  color: red;
} /* CSS: Makes the paragraph red */
p.remove(); // JavaScript: removes the paragraph

JavaScript (JS) - What is it?

  • JS is a programming language (scripting language)
  • JS allows you to implement dynamic content and effects

JavaScript is Everywhere

Tools

We'll be using these tools during our course:

Please install Visual Studio Code

Additional Material

Names of Special Characters
( Parentheses ) < Angle brackets >
{ Braces, or curly braces } & Ampersand &
[ Brackets, or square brackets ] | Vertical bar, or pipe |
; Semicolon ; : Colon :
' Single quote ' # Hash or number sign #
" Double quote " ` Back tick `
_ Underscore _ * Asterisk *
/ Slash, or Forward slash / ~ Tilde ~
\ Backslash \ ^ Caret or circumflex ^

Let's start with JavaScript!

  • Open Google Chrome
  • Hit F12 key
  • Or opt + cmd + C (Mac) / ctrl + shift + C (Windows)
  • Click on Console
  • Try entering something

What did you try? What did you see?

Numbers and Numerical Operators

Numbers include natural and decimal numbers. In Javascript, we call them integer and float, respectively.

10, 12, 1.5, 3.5

Basic mathematical operators:

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • ** exponentiation

Practice

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

  1. How many people are going to the cinema in total? Enter it to JavaScript Console.
  1. A ticket costs 8€. Let JavaScript compute how much we have to pay in total.
  1. Alan and Ada volunteered to pay for the tickets. Use JavaScript to compute how much each has to pay.

Data Types

A data type is defined by two things:

  1. A set of values
  2. A set of operators

The operators are used on the values.

2 and 3 are example values for the Number data type. + is an operator that we can use to perform an addition on 2 and 3.

When we say "Number data type", we mean all the possible number values plus all the operations we can perform with those values.

Data Type: String

  • A String is a sequence of characters
  • It starts and ends with a " double quote
  • Or it starts and ends with a ' single quote
  • Examples: "Hello", 'Grace Hopper'

Try it out

Open the console, and type in the following strings:

  • Your first name
  • Your favorite food
  • Name of your favorite book / tv series / anime

Strings and Quotes

Strings start and end with (') or ("). But what if we want to add a quote within our string?

"He said: "Hello""

We must escape the quote with a backslash (\).

A backslash in a string means that the character right after the backslash is special:

"He said: \"Hello\"";

Special Characters

If you want a backslash in a string, you need to escape it: "\\"

There are some special characters in strings, for example:

  • "\n" - new line
  • "\t" - tab

Quiz: Which strings are correct?

1. "Hello"
2. 'World'
3. "He said "hello" to me"
4. 'Let's go!'
5. ""
6. 'This is a\nnew line'
7. 'This is a backslash: \'

Solution

"Hello"                        // CORRECT
'World'                        // CORRECT
"He said "hello" to me"        // WRONG - unescaped quotes
'Let's go!'                    // WRONG - unescaped '
""                             // CORRECT
'This is a\nnew line'          // CORRECT
'This is a backslash: \'       // WRONG - escaped '

String operators

The addition operator (+) can be used to combine (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.

Small exercise

Use the + operator to combine multiple strings to generate the following string. Use your name and favorite food:

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

String operators

We shouldn't use operators (like -, /, *) on strings. While JavaScript allows that, the results are unexpected. With strings, use + for concatenation.

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

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

Comparison operators

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

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

"Ada" === "Ada" // true
"Ada" === "Alan" // false
"Alan" === "alan" // false

Comparison operators

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

Small 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 42 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

These are operators that we use for numbers:

  • > 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 only return true or false