TIL- 22.02.10 목

자바스크립트 - 계산기 구현 (강의링크)

• 4-1 순서도 그리기

  • 자바스크립트
    • 배열 메소드 .join()
      1. () - 괄호 안에 아무것도 입력하지 않으면 ,쉼표를 포함하여 문자열로 합쳐진다.
      2. (''),('.'), (' ') - 괄호안에 따옴표로 감싸준 내부에 넣은 구분자로 배열의 값들을 구분하여 문자열로 만들어준다.
    • 복습: 문자열 끼리 더하면 서로 연이어져 나온다.

• css

  1. content-box
     width와 height의 크기 = content의 크기
  2. border-box
     width 와 height의 크기 = content + padding + border의 크기
     (참고: margin = 외부여백, border = 테두리, padding = 내부여백)

• html

  1. input 태그 안에 readonly 속성을 주면 읽기전용임을 명시하므로 해당 칸에 직접 입력 불가.

• 순서도

  1. 익숙해져서 머릿속으로도 순서도를 그릴수 있는 수준으로 숙달되기 전까지는 1) 먼저 단순하게 큰 단계들로 순서도를 짜고, 2) 각 단계별로 세부 절차를 쪼갠다. 2)가 익숙해지면 큰 단계들로만 순서도를 그리더라도 각 단계 내부의 세부 절차까지 고려할 수 있다.
  2. 자꾸 값을 입력받으면 변수에 저장해야되는걸 까먹고 있는데 귀찮더라도 순서도 그리면서 해당 단계도 필히 명시해야겠다.

• 4-2, 4-3 이벤트 달기 + 고차함수로 중복 제거하기, event객체로 중복 제거하기

  • 중복(반복작업)은 고차함수로 없앨 수 있다./ 중복 코드 중 서로 다른 부분만 매개변수로 주면 됨.
  • 고차함수: high order function
  • 고차함수는 1: 함수의 인자로 함수를 사용하는 경우, 2: 함수의 return값으로 함수를 사용하는 경우 2가지로 사용한다.

• return 값에는 모든 자료형을 다 쓸 수 있다.
• .value = 값; 을 활용해서 데이터를 바꿔줬으면 화면에 표시되는 값도 바꿔줘야 함!!
• return 값으로 함수를 줘서 고차함수를 만들때도 끝에 세미콜론 까먹지 말고 붙이자. 원래 return 반환값; 이니까.
• '모든 내부 코드가 같은' 함수보다 '거의다 똑같은데 특정 부분만 다른' 함수가 실무에선 더 많이 등장하기 때문에 이런 경우 고차함수를 사용하여 중복을 제거한다.
• event 객체는 브라우저 내장 기능이다.

const a = (event) => { console.log(event.target.value) };        // 2단계: 1단계에서 브라우져가 event객체를 인수로 넣어주고 매개변수 event 로 전달된다.
document.querySelector('input').addEventListener('input', a);    // 1단계: input 이벤트 발생시 브라우져가 함수 a(event);를 호출시킨다.
// input 태그에 입력하는 내용이 콘솔로그에 찍힌다.