第六次社課
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