계산기 만들기_재료

1. readonly : 읽기 전용

<input readonly>
<input readonly type ="number"> 

 

2. input type

<input>
<input type ="number">
<input type ="text">
<input type ="button">

input과 input type="text"의 차이가 무엇일까?

웹 상으로는 똑같이 구현되는 것 같은데....

 

3. box넓이 설정시 border을 기준으로 

*{box-sizing : border-box}

 

4. 불리언으로 형 변환시 false가 되는 data

0, NaN, undefined, null, ''

=> if문의 조건식 작성시 유용함

왜냐면 if문의 경우 조건식이 true일 때 실행되기 때문이다!

 

5. value, textContent

tag의 내용값을 불러올 때!

document.querySelector('input').value
document.querySelector('button').textContent

 

6. 형변환

console.log('123'+'4')
console.log('123'-'4')
console.log('123'*'4')
console.log('123'/'4')

자바스크립트에서 +연산자의 경우 문자열로 형변환이 되는 반면,

- * /는 숫자로 형변환이 된다.

 

7. 고차함수

고차함수는 함수를 return하는 함수를 말한다.

일반적으로 return값을 설정하지 않으면 함수는 undefined를 return한다.

const num = () =>{
  console.log ('hi')
  }

const num = () =>{
  console.log ('hi'); 
  return;
  }

const num  = () =>{
  console.log ('hi');
  return undefined;
  }

이 세 경우 모두 함수호출시 undefined를 return한다.

 

이때, 함수 자체와 함수호출은 다르다는 것을 생각해야한다.

함수를 써야한다면  num으로 쓰면 되지만

함수를 호출하는 경우에는 num()으로 써야한다.

 

num으로 쓴 경우에는 해당 자리에 

() =>{
  console.log ('hi')
  }

이것을 불러온 것이지만

num()으로 쓴 경우에는 해당 자리에, undefinded를 불러온 것이다.

 

addEeventListener(이벤트, 함수)를 사용할 때 함수자리에 undefined가 들어간다면 오류가 발생한다. 

이러한 경우 고차함수를 사용함으로써 문제를 해결할 수 있다.

 

const num = () =>{
  return() =>{
  console.log ('hi');
  return undefined;
  }
 }

이때 { return은 생략할 수 있으므로

const num = () => () =>{
  console.log ('hi');
  return undefined;
 }

 이렇게 나타낼 수 있다.

 

8. if문 중첩 줄이기

https://ssooccoo.tistory.com/12

if문 중복 없애기 _if문에 return, break 사용

 

9. if문

if문 사용시 else를 반드시 해줄 필요 없음

 

10. if문과 switch문

switch(조건식){
  case"비교조건식1" :
    동작문1;
  case"비교조건식2" :
    동작문2;
    }

switch의 경우 조건식과 비교조건식이 같은 경우 동작문이 실행된다. 

이때 조건식과 비교조건식1이 같은 경우 그 아래에 있는 모든 동작문이 실행된다.

 

따라서 조건식과 비교조건식이 일치하는 경우, 그 아래에 있는 동작문을 실행하고 싶지 않다면

break를 해줘야한다.

switch(조건식){
  case"비교조건식1" :
    동작문1;
    break;
  case"비교조건식2" :
    동작문2;
    }