JS fundamentals revisited

Made by Antonija with 

borders:none

#9 borders:none

Sign the list

Did you do your homework?

What is JS

  • why do we need it
  • why is it so popular
  • where can you see it

Open your code editors

  • create new folder js101
  • create index.html and style.css in the js101 folder
  • create file main.js in the root of your directory
  • link js file to html

Open main.js

alert("Hello from javascript file");

add this code...

Everything we code with JS should be in the main.js file

Results should be visible either on the page or in the console tab of dev tools

What is...

What is statement?

  • statement changes something
  • it has side effect

What is expression?

  • An expression is any valid unit of code that resolves to a value.
  • anything that produces a value
  • they do not change anything
var word; 
// expression
console.log(word) 
// undefined
var word = "Sunshine"; 
// statement
console.log(word)
=> "Sunshine"
// word changed from undefined to "Sunshine"

Try it out

What is undefined?

  • primitive value
  • it means object has no value
  • console.log always returns undefined

Read more here

What is variable?

  • define one variable
  • name variable anything you want
  • show value of the variable in the console
  • JS uses camelCase

var, let or const?

var

  • visible before it is declared
  • can be redeclared
  • value can be changed
console.log(x)
var x = 2;
=> undefined

var x = "my new value";
console.log(x)
=> "my new value";

let

  • not visible before it is declared
  • can not be redeclared
  • value can be changed
console.log(x)
let x = 2;
=> ReferenceError, x is not defined

let x = 3;
=> SyntaxError, Identifier 'x' has already been declared

let x = 5
console.log(x)
=> 5

const

  • not visible before it is declared
  • can not be redeclared
  • value can not be changed

Read more

console.log(x)
const x = 2;
=> ReferenceError, x is not defined

const x = 3;
=> SyntaxError, Identifier 'x' has already been declared

const x = "My new value";
=> Uncaught TypeError: Assignment to constant variable.

Watch video

What is string?

  • define one variable, name it anything you want
  • assign string to the variable
  • use console.log to display value of the variable

What is number?

  • float vs integer
  • define one variable, name it anything you want
  • assign number to the variable
  • use console.log to display the value of the variable

read more at home

What is boolean?

  • define one variable, name it anything you want
  • assign boolean to the variable
  • use console.log to display the value of the variable

What is array?

  • define one variable, name it anything you want
  • assign an array to the variable
  • array should have at least 3 items
  • use console.log to display the array

What is indexing in an array?

  • use the same array
  • display only the second item in the console

How many items does your array have?

  • store the length of an array into the new variable
  • display the length of the array in the console

Add an item to the start of an array

  • define one variable, name it anything you want
  • assign an array to the variable
  • array should have at least 5 items
  • use unshift method to add one more item at the start of an array
var a = [1,2,3,4];
a.unshift(0);

Add an item to the end of an array

  • define one variable, name it anything you want
  • assign an array to the variable
  • array should have at least 5 items
  • use push method to add one more item at the end of an array
var a = [1,2,3,4];
a.push(5);

Remove the first item from an array

  • define one variable, name it anything you want
  • assign an array to the variable
  • array should have at least 5 items
  • use the shift method to remove the first item from the array
var a = [1,2,3,4];
a.shift();

Remove the last item from an array

  • define one variable, name it anything you want
  • assign an array to the variable
  • array should have at least 5 items
  • use pop method to remove the last item from the array
var a = [1,2,3,4];
a.pop();

How to check what is what?

typeof "Hello" => "string"
typeof 2 => "number"
typeof true => "boolean"
typeof [1,2,3,4] => "object"
  • Use the typeof operator to see the type of an object

Let's play with operators

+, -, /, %

Strings (interpolation)

  • define two variables and set them to two different strings
  • first variable should be your name
  • second variable should be your age
  • display the values of the two variables using console.log like shown below
console.log("My name is " + firstName + " I am" + age);

Template literals

let balloonsCount = 100;
console.log(`We have ${balloonsCount} balloons!`);
let petName = "Furry";
console.log(`I have a pet! Its name is ${petName}`);
let euroEarned = 100;
console.log(`I earned ${euroEarned * 7.4} kuna`);

Strings (concatenation)

  • define two variables and set them to two different strings
  • first variable should be set to string "Hello, my name is "
  • the second variable should be set to the "yourName" <= set it to your actual name
  • display the values of the two variables using console.log like shown below
console.log(firstVariable + secondVariable);

Numbers

  • define two variables and set them to two different numbers
  • define the third variable that will be sum of the first two numbers
  • display the value of the third variable using console.log 

Numbers

  • define two variables and set them to two different numbers
  • define the third variable that will be modulus of the first two numbers
  • display the value of the third variable using console.log 
var thirdVariable = numberOne % numberTwo;
3 % 12  //  zero times with 3 left over.

plus equal/minus equal

var a = 5;
a += 5;
// same as a + a
// 10
var a = 10;
a -= 5;
// same as a - a
// 5

Read more 

Boolean operators

  • define two variables and set them to two different numbers
  • in the third variable check if the first number is greater than the second number
  • display the result in the console.log

Other boolean operators

  • &&
  • ||
  • !
  • ===
  • ==

Control flow

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

Small project

if, else if, else

  1. define the first variable and assign number 21 to it
  2. check the value of the variable in the control flow
  3. if the value is bigger than or equal to 21, display in console "You are an adult in every country"
  4. if the value is bigger than or equal to18, but smaller than 21, display in console "Uh, oh, still some growing left to do"
  5. if the value is smaller than 18, display in console "Only toys for you"
  6. for anything else, display in console "Something is wrong, try again"

You are a bouncer at the club, and only real grownups can get in. Use JS to check who is an adult.

Extra: Learn about switch statement

Iterations

Iterations (while)

var i = 0;
while (i < 10) {
  console.log(i)
  i++;
}

Iterations (for)

var i;
for (i = 0; i < array.length; i++) { 
  console.log(array[i]);
}
  • define array with 10 items
  • display every item in the console

Functions

Functions

  • a set of statements that perform a task
  • a code "grouped" together
function sayHello () {
   console.log("Hello");
};

sayHello();
  • keyword function initialises function
  • name of the function is sayHello => camelCase
  • () empty brackets for parameters
  • body of the function wrapped in the {}
  • function is called on the 5th line => nothing would happen if we did not call it
function sayMyName (name) {
   console.log(`Hello ${name}`);
};
sayMyName("Antonija");
  • parameter name is set in the ()
  • parameter name is used in the console.log
  • function is called on the 4th line with the argument "Antonija"

Solve the problem

isEvenInt?

  • Write a function that will check if the integer number is even (divisible by two)
  • name the function isEven
  • use if/else if/else to check if the number is divisible
  • use the modulo operator
  • use the typeof operator
isEvenInt(4) => "4 is even number"
isEvenInt(9) => "9 is not even number"
isEvenInt("banana") => "banana is not a valid type"
Finished before the others? Write a function that will check if any number is even/odd, not just integers

Practice makes perfect

https://www.codewars.com/

https://exercism.io/tracks/javascript

  • solve small tasks
  • compete
  • unlock levels
  • get points

Objects

Everything is an object

Object oriented programming (OOP)

Define object

var person = {

};

Many different ways to create object

Set properties

var person = {
    name: "Antonija",
    city: "Zagreb",
    hobbies: ["basketball", "hiking", "sleeping"]
};

Read properties

console.log(person.name + person.city)

Set new property

person.favMovie = "Kill Bill";
console.log(person);

Update property

person.name = "Anthony";
console.log(person.name);

Delete property

person.name = "Anthony";
delete person.name;
console.log(person);

Iterations in objects

let person = {
  name: "Ant",
  location: "Zagreb",
  brothers: 1, 
  sisters: 2
}

for (let key in person) {
  console.log(`${key}: + ${person[key]}`)
}

Project time!

Open this pen

https://codepen.io/tonkec/pen/GLbzVp

Solutions

https://codepen.io/tonkec/pen/bJPZEW

https://codepen.io/tonkec/pen/XQLGdx