[SEB_FE] Javascript - 정리(1)

1. event.target,querySelector

---

html

<div id="name">seunghyo<div>

javascript

let t = document.getElementById("name");
// 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용해 접근할
t.addEventListener("click", function(event){
        alert("제 이름입니다");
    });

console.log(event.target.textContent); // seunghyo
//div안의 text값이 출력된다.

• 마우스로 클릭했을 때 이벤트가 일어나도록 event target으로 지정
• id가 name인 div에 이벤트가 추가되었다.

querySelector는 css 기반으로 element 를 찾는다. querySelector() 는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환한다. 모두 선택해주고 싶을 때는?

let elements = document.querySelectorAll('ul > li');

querySelectorAll()는 CSS 선택자에 매치되는 모든 element의 Nodelist를 반환한다.

2. innerHTML, innerText, textContext

---

node나 element의 텍스트값을 읽어오고 설정할 수 있다.
innerHTML 은 element 안의 html이나 xml을 가져오고, innerText는 element안의 text 값을 읽어온다.

function setInnerText()  {
  const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";
}

function setInnerHTML()  {
  const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>";
}

결과는 setInnerText()는 <div style='color:red'>A</div>, setInnerHTML()은 A을 불러온다.

3. calculator.js 복습

---

buttons.addEventListener('click', function (event) {

  const target = event.target; 
  const action = target.classList[0];
  const buttonContent = target.textContent; 
  
  if (target.matches('button')) {
    if (action === 'number') {
      if(display.innerText === '0' || previousKey === 'operator'){
        // 화면에 숫자를 새로 입력할 시(빈 공간이거나 바로 전 연산자를 입력했을 때)
        display.innerText = buttonContent; //새로운 수 입력 시작
      }else {//숫자를 이어서 입력하고 싶을 때(246, 45..), 이미 display에 숫자가 적혀있는 경우
        display.textContent = display.textContent + buttonContent;//이어서 숫자 적어주기 (246을 적어준다고 하면 '4', '6' 적을 경우..)
        // 
      }
      previousKey = 'number';
    }
    if (action === 'operator') {
      firstNum = display.textContent; //연산자 입력 전 수를 기억하기 위해 저장, 연산자가 입력되지 않는다면 firstNum은 생성되지 않는다. 
      operatorForAdvanced = buttonContent;//연산자 저장
      previousKey = 'operator';
    }
    if (action === 'decimal') {
      if(!display.textContent.includes('.') && previousKey !== operator){// include 메서드로 .이 포함 안될때, 또 바로전의 키가 연산자가 아니라면 .을 입력한다. 
        display.textContent = display.textContent + '.';
      }else if(previousKey === 'operator'){ //바로 전 키가 연산자라면 새로운 수를 입력해주어야한다. 0.XX 일 경우 
        display.textContent = '0.';
      }
      previousKey = 'decimal';
    }
    if (action === 'clear') {//초기화
      firstNum = undefined; // 무할당된 상태
      operatorForAdvanced = undefined;
      previousKey = undefined;
      display.textContent = '0';
      previousKey = 'clear';
    }
    if (action === 'calculate') {

      if (operatorForAdvanced) { //if 연산자가 있을 때
        if (previousKey === 'calculate') { //바로 전에 눌린 키가 enter라면
          display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum); 
          // enter를 연속해누르면 계산하기 전 저장해두었던 값으로 계속 더해나간다.
         } else { 
          previousNum = display.textContent; //계산하기 전의 값
          display.textContent = calculate(firstNum, operatorForAdvanced, previousNum); // 연산자 이전 저장해두었던 첫번째 수와 현재 화면에 있는 수를 연산자로 계산
          }
      }
        previousKey = 'calculate'; 
    }
    }
  
}

식별자를 이용해서 바로 전 입력한 키를 저장했다. 연산자(operator)가 바로 전에 입력되었을 때는 새로운 수(secondNum이지만 굳이 저장할 필요는 없다)를 입력해야하고, display에 있는 수도 firstNum에 저장해두어야 한다. 연산자는 operatorForAdvanced에 저장. 계산버튼(enter)을 누를때 연산자가 없다면 실행되지 않는다. 연산자가 있다면 calculate 함수로 계산해준다.