document.querySelector의 해석
<body>
<div class = 'human'>
<!-- class 선택자의 속성값 human -->
<span class = 'human_head'></span>
<span class = 'human_arms'></span>
<span class = 'human_legs'></span>
</div>
</body>const human = document.querySelector('.human')
// .으로 class 선택자 선택, 그 중에서도 속성값이 human인 부분을 할당
// querySelector 메소드를 통해 js에서 html의 엘리먼트를 가져와서 컨트롤할 수 있음
// [해석] 상수 human은 html에서 class = human인 엘리먼트를 가져와서 html의 해당 부분을 컨트롤하겠다
const head = document.querySelector('.human_head')
const arms = document.querySelector('.human_arms')
const legs = document.querySelector('.human_legs')if (target.matches('hit')) {
// 클릭된 HTML 엘리먼트가 button이면
if (action === 'number') {
// 그리고 버튼의 클레스가 number이면
// 아래 코드 작동
console.log('숫자 ' + buttonContent + ' 버튼');
}
}console.log 위치
function calculate(num1, operator, num2) {
let result = 0;
//
if (operator === '+') {
result = Number(num1) + Number(num2)
}
}console.log는 디버깅 용도로 많이 사용된다.
인자 num1의 type을 알고싶을 때 올바른 console.log 위치는 어디일까?
일단 함수 안에 console을 찍어야 한다.
인자 num1은 따로 정의된 변수가 아니기 때문에 함수 밖에서 num1을 사용하고자 한다면,
num1이 정의되지 않았다는 메시지를 볼 것이다.
함수 안에서도 return문 이전에 사용해야 한다.
return문은 결과를 반환하며 함수를 끝내버리기 때문에 return 이후의 사용은 console에 찍히지 않는다.
CSS 선택자
전체 선택자(Universal Selector, *)
- HTML 페이지 내부의 모든 태그를 선택
- HTML 내부의 모든 요소에 같은 CSS속성을 적용
- 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩 속도 느려질 수 있음
- ex)
* {margin: 0; text-decoration: none;}
태그 선택자(Type Selector)
- 태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자
클래스 선택자(Class Selector)와 ID 선택자(ID Selector)
- 각각 class속성, ID속성으로 값이 주어진 HTML요소를 찾아 선택
- class 선택자 속성값 앞에는 점(
.)을, ID 선택자 속성값 앞에는#을 붙여 사용 - 페이지 내에서 여러번 반복되는 스타일은 클래스 선택자를, 단 한번 적용될 스타일은 ID 선택자를 사용하는 것이 좋음
- class 속성은 어떤 분류 안에 포함된 요소의 특성을 정의
- ID 속성은 어떤 요소에 대해 유일한 특성을 정의
이외 복합 선택자, 속성 선택자, 가상 클래스 선택자 등 존재
(참고. CSS: 선택자(Selector) 이해)
변수의 위치
if (action === 'operator') {
firstNum = display.textContent;
display.textContent = buttonContent;
previousKey = 'operator'
}이전까지 숫자 이벤트 발생에 해당하는 if(action === 'number')에 변수 firstNum를 위치시키고 어떻게 할당해야할지 고민했다. 하지만 중요한 것은 이벤트 발생 종류에 따른 배분이 아니라, 변수 자체의 의미를 생각하는 것이었다.
변수 firstNum은 연산자를 누르기 전까지 누른 숫자를 의미한다.
따라서 연산자를 눌렀을 때 비로소 firstNum의 값이 무엇인지 정의(할당)될 수 있는 것이다.
