Skip to content

Latest commit

 

History

History
505 lines (331 loc) · 10.8 KB

lesson01.md

File metadata and controls

505 lines (331 loc) · 10.8 KB
Raw

Table Of Contents

  1. Introduction, Basic Data Types, Operators
  2. Variables, Console, Comments
  3. If statement, Loops, Arrays
  4. Functions
  5. Objects & More
  6. DOM
  7. Callbacks
  8. Web APIs
  9. OOP
  10. Libraries, LocalStorage

Direct link to lessons: 1, 2, 3, 4, 5, 6, 8, 9, 10, 11

JavaScript

Lesson 1: Introduction, Basic Data Types, Operators

Lets introduce ourselves!

Welcome to JavaScript!

It does not matter what we cover, but what you discover (Noam Chomsky)

Pillars of Web Development

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

JavaScript - What is it?

  • JS is a lightweight, cross-platform, object-oriented programming language
  • JS is one of three core technologies of web development
  • JS makes modern web-development possible
    • Dynamic effects
    • Modern web applications that we can interact with

JavaScript - "Full Stack"

Tools

We'll be using these tools during our course:

Tools: Chrome Browser

Tools: Visual Studio Code

Tools: MDN Web Documentation

Additional Courseware

The standard

http://www.ecma-international.org/ecma-262/10.0/index.html

  • Standardized Specification of JavaScript
  • Very technical, not good for learning

Special Characters

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

What is programming?

Programming involves knowing and doing the following things:

  • input: Get data from the keyboard, a file, a sensor, or some other device.
  • output: Display data on the screen, or send data to a file or other device.
  • math: Perform basic mathematical operations like addition and division.
  • decisions: Check for certain conditions and execute the appropriate code.
  • repetition: Perform some action repeatedly, usually with some variation.

(Source: http://greenteapress.com/thinkpython/thinkpython.pdf, Page 3)

Basic Data Types

Let's start with JavaScript!

  • Open Google Chrome
  • Hit F12 key
  • Click on Console

Enter Some Data

  • Try entering your name
  • Try entering your shoe size

Data Types

  • JavaScript seems to be picky about the data we enter
  • In order to understand how to enter data, we need to know about Data Types

Data Types: Number

  • One basic data type is called Number
  • A Number can be a positive integer (1, 2, 42...)
  • or negative with a leading - minus sign (-1, -2, -42)
  • A Number can also be a positive or negative floating point (0.25, -4.5)
  • A Number can not contain fractions, only floating point (1/3 vs. 0.33333)

Data Type: String

  • Another basic data type is called String
  • A String can contain any textual data
  • It starts and ends with a " double quote
  • It can also start and end with a ' single quote
  • Example: "Hello", 'Carlo'

Data Type: Boolean

  • The basic data type Boolean can only be true or false
  • It can be used to represent logical states that can either be true or false
  • You can use them for yes/no questions: "yes" (true) or "no" (false)
  • Example: true, false

Data Type: Undefined

  • The basic data type Undefined has only one value: undefined
  • Example: undefined

Try it out

Now, try to enter some data to the JavaScript console, but think of the data type first:

  • Try entering your name
  • Try entering your shoe size
  • Try entering whether you are older than the person next to you

Try it out: Solution

"Harald"
41
true

Summary

  • Try to summarize what we learned so far about data types

Strings and Quotes

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

"He said: "Hello""

Solution: We can escape the very next character with a backslash (\):

"He said: \"Hello\""

Strings and Control 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

These are called "Control Characters"

Quiz: Which strings are correct?

"Hello"
'World'
"He said "hello" to me"
'Let's go!'
""
'This is a\nnew line'
'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 '

Operators

Operators

Group Operators Example
Numerical Operators + - * / 5 + 4 * 3
7 / 2 - 2
"Hello" + " World"
Comparison Operators === !== < > <= >= temperature !== 25
age >= 18
Logical Operators || && ! a && !b
x >= 5 && x < 15
Combined Operators += -= *= /= ++ a *= 2
count++

Numerical Operators

Basic mathematical operators:

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

Addition operator

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"

Make sure to always choose the correct data type for your data, because the operators in JavaScript behave differently depending on the data type.

Let's practice

Compute the following with JavaScript:

  • How old you will be in one year?
  • What is the difference between your age and the person next to you?
  • What is the square of 8?

Solution

42 + 1     // I'll be 43 next year!
42 - 20    // I'm 22 years older
8 ** 2     // Square of eight is 64

Comparison operators

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

Let's practice

Use JavaScript to compute the following:

  • Figure out whether you are older than the person next to you
  • Figure out whether you have the same first name as the person next to you

Solution

42 > 20                   // true - I am older
"Harald" === "Abdullah"   // false - not the same first name

Logical Operators

These operators only make sense on Boolean:

  • && Logical AND
  • || Logical OR
  • ! Logical NOT

Logical AND

AND takes two booleans and returns true if both booleans are true

true && true   // true
true && false  // false
false && true  // false
false && false // false

Example: I need bread (true/false) AND cheese (true/false) to make a cheese toast

Logical OR

OR takes two booleans and returns true if any (or both) are true

true || true   // true
true || false  // true
false || true  // true
false || false // false

Example: To apply to a job, I need to know German OR English.

Let's practice

Use JavaScript to compute:

  • Am I the youngest person in a group of three?
  • Am I younger than at least one person in a group of three?

Solution

Am I the youngest person in a group of three? I need to be younger than person to my left AND I need to be younger than person to my right

42 < 20 && 42 < 35  // false - I am not the youngest person

Am I younger than at least one person in a group of three? I need to be younger than person to my left OR I need to be younger than person to my right

42 < 20 || 42 < 35  // false - I am not younger than at least one other person

Logical NOT

Logical NOT negates a boolean:

!true  // false
!false // true

Example: Am I NOT the youngest person?

Summary

  • Try to summarize what we learned so far about operators

Reflect

  • Pretend your friend was absent from class today and asks you to explain the lesson. What would you tell?
  • If you were writing a quiz over today's material, what are 2 questions that you would put in?
  • What would you like us to review next time?