[TIL] css calc(), filter: blur, clearInterval

출처 : Udemy 50 mini projects - Brad Traversy, The complete Javascript Course 2022 - Honas Schmedtmann

The Complete JS Course section 2

JavaScript?

A high level, object oriented, multi-paradigm, programming language.

• high level : We don't have to worry about complex stuff like memory management
• object oriented : Based on objects, for storing most kids of data
• multi-paradigm : flexible. We can use difeeremnt styles of programming.
• programming language : instruct computer to do things

ES = ECMAScript

NaN

NaN 의 type은 number 이나 invalid number 이다.

type coercion (type의 형태가 바뀌는 것)

console.log('23'-'10'-3);//10
console.log('23'*'2');//46 (string => number)
console.log('23'+'10'+3)// 23103

유의) + 는 coercion 발생하지 않고 그대로 문자열의 형태가 보존된다.

50 projects - Blurry Loading

• setInterval 내에서 1초마다 숫자를 늘리고 싶다면 변수를 global로 해주기!
• 다른 범위의 숫자로 변동해서 효과를 주고 싶을 때 => search map a range of numbers to another range of numbers
• load될 때마다 특정함수를 실행시키고 싶다면, load event를 굳이 실행시키지 않고 함수를 바로 실행시켜도 된다.
• calc()

width : calc(100vw + 60px);
height : calc(100vh + 60px);

• filter:blur() => 블러 효과

filter : blur(30px);

• clearInterval()

const printInt = setInterval(printSomething, 1000);

if(printInt >=100){
clearInterval(print)};