---
tags: yunnet course
title: JavaScript
slideOptions:
theme: solarized
transition: 'slide'
---

### JavaScript for beginner
*Benson*

---

### a lot of meme like this

----

## why?

----

### Thanks for JS - meme

----

but today, we'll start from the very basic JS syntax
so don't worry about it :DD.

---

#### the most IMPORTANT skill
#### u need to before learning anything in JS

----

## console.log

----


---

### Declaring JavaScript Variables

----

* var

* let
* const
NOTE:before 2015 only var, but global will cause some problem,after 2015, "const,let" born! "let" limited in scope, "var" in global

----

### JS identifiers (names) rules

----

#### must begin with:
* A letter (A-Z or a-z)

* A dollar sign ($)
* Or an underscore (_)

---

### JS Operators

----

### JS Arithmetic Operators


----

### JS Comparison Operators


NOTE: Emphasize "===","?"

----

### === vs ==
NOTE:equal value equal type

----

### ternary operator
syntax:

condition ? exprIfTrue : exprIfFalse

example:

var age = 26;

var beverage = (age >= 21) ? "Beer" : "Juice";

console.log(beverage); // "Beer"

---

### JS data type

----

### JS Types are Dynamic

var x;           
// Now x is undefined

x = 5;           
// Now x is a Number

x = "John";      
// Now x is a String

----

### common type
* Strings

* Numbers
* Booleans
* Arrays
* Objects

----

### specific type
* Undefined

* Null
NOTE:In JavaScript null is "nothing"
You can consider it a bug in JavaScript that typeof null is an object. It should be null.

----

### The typeof Operator

typeof "John"              
// Returns "string"

typeof 3.14                
// Returns "number"

typeof true                
// Returns "boolean"

typeof false               
// Returns "boolean"

typeof x                   
// Returns "undefined" (if x has no value)

----

#### Difference Between Undefined and Null

typeof undefined           // undefined

typeof null                // object

null === undefined         // false

null == undefined          // true

---

### JS for Loops

----

### syntax:

var i;

for (i = 0; i < 5; i++) {

  console.log(i);
  
}

### function expressions:

const square = function(number) { return number * number }

----

😱😨😰

const factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) }

---

### JS if else and else if

----

### syntax

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
  
}

---

### JS function

----

### syntax

function square(number) {

  return number * number;
  
}

---

### JS setTimeout()

----

### syntax

setTimeout(function, milliseconds, param1, param2, ...)

----

#### setTimeout example

setTimeout(function(){ console.log("2 seconds") }, 2000);

setTimeout(function(){ console.log("4 seconds") }, 4000);

setTimeout(function(){ console.log("6 seconds") }, 6000);

---

## Challenge Time

----

## level 1
use "for" and "if" statement to print out following result.

----

function abc(){

	for(let i = 1; i <= 10; i++){
    
		if(i%2==0){
        
			console.log(i+" is even");
            
		}else{
        
			console.log(i);
		}
	}
}

abc();

----

function abc(){

	for(let i = 1; i <= 10; i++){
    
            i%2==0?console.log(i+" is even"):console.log(i);
            
	}
}

abc();

----

## level 2
use "for" and "setTimeout" statement
print every 2 second after passing
==be smart! don't just paste the code 5 times!==

----

function abc(){

	for(let i = 2; i <= 10; i+=2){
    
		setTimeout(function(){ console.log(i+" seconds") }, i*1000);
        
	}
}

abc();

----

## level 3


----

function abc(num){

	if(num == 10){
    
		console.log("\nthere's nothing waiting to pass!");
        
        console.log("\nEND!");
        
        return 0;
        
	}
	console.log("\nwaiting for pass:");
    
	for(let i = num+2; i <= 10; i+=2){
    
		console.log(i + "second");
        
	}
	console.log("\nNEXT!");
}


for(let i = 2; i <= 10; i+=2){

	setTimeout(function(){console.log("\n=====arriving at "+i+" second=====");abc(i)},i*1000);s
    
}

---

### JS Array

----

### Syntax

var cars = ["Saab", "Volvo", "BMW"];

----

### Popping

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();

// Removes the last element ("Mango") from fruits

----

### Pushing

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Kiwi");       

//  Adds a new element ("Kiwi") to fruits

----

### Shifting Elements

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.shift();

// Removes the first element "Banana" from fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var x = fruits.shift();

// the value of x is "Banana"

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon");

// Adds a new element "Lemon" to fruits

----

### Deleting Elements

var fruits = ["Banana", "Orange", "Apple", "Mango"];

delete fruits[0];

// Changes the first element in fruits to undefined

----

### Map

const array1 = [1, 4, 9, 16];

// pass a function to map

const map1 = array1.map(x => x * 2);

console.log(map1);

// expected output: Array [2, 8, 18, 32]

----

### Slice

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));

// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));

// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));

// expected output: Array ["bison", "camel", "duck", "elephant"]

---

### JS Spread syntax

----

### syntax
* For function calls:

myFunction(...iterableObj);

* For array literals or strings:

[...iterableObj, '4', 'five', 6];

* For object literals

let objClone = { ...obj };

----

### example

----

* Spread in function calls

function myFunction(x, y, z) { }

let args = [0, 1, 2];

myFunction(...args);

----

* Spread in array literals

let parts = ['shoulders', 'knees']; 

let lyrics = ['head', ...parts, 'and', 'toes']; 

//  ["head", "shoulders", "knees", "and", "toes"]

----

* Spread in object literals

let obj1 = { foo: 'bar', x: 42 };

let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

---

### Challenge Time

----

#### try to use previous Array methods &
#### following array

var fruits = ['apple', 'banana', 'orange', 'pear', 'guava'];

### to console like this.

----

var fruits = ['apple', 'banana', 'orange', 'pear', 'guava'];
console.log(...fruits);
fruits.pop();
console.log(...fruits);
fruits.push('watermelon');
console.log(...fruits);
fruits.push(fruits.shift());
console.log(...fruits);
console.log(fruits.shift());
console.log(fruits.pop());
fruits.unshift('pineapple');
console.log(...fruits);
fruits = fruits.map(x=>x+'s');
console.log(...fruits);
fruits.unshift(fruits.pop());
console.log(...fruits);
console.log(fruits.slice(1,3));

---

END