2-27 / 3-1 / 3-2 / 3-3 / 3-4 / 3-5 / 3-6 / 3-7

---

객체와 원시값의 차이

• 객체의 성질에 대한 나의 이해방식
  • 똑같이 생긴 것을 같다고 하면, false가 나옴 -> 객체는 똑같이 생겨도, 따로 만들어짐
  • 변수 a에 객체를 넣고, b에 a를 넣으면, b와 a는 연결이 되어서, a만 수정해도, b도 바뀐다.

• 객체끼리 비교하면, false가 나온다.
  • 객체란? 배열, 함수, 객체 리터럴
  • [1,2,3] === [1,2,3];
    • false가 나옴
      • why? 객체는 형태가 같아 보여도, 각각 따로 만들어진 것으로 본다.
    • 변수안에 넣어서, 변수를 비교하면, true가 나온다.
• 원시값
  • 객체가 아닌 값들(예시: 변수)
  • let a = 1;
  • let b = 1;
    • 이때는 a와 b는 같다.

const a = {name: 'zeroCho',};
const b = a;
a.name='hero';
a === b;
true;

let a = 'zeroCho';
let b = a;
a ='hero';
a === b;
false;

• 객체와 원시값의 다른 점1
  • b는 a에 저장된 값을 그대로 받는 구조이다.
  • 객체는 a의 name의 값만 바꿔도 b의 name의 값도 같이 바뀌지만, 원시값은 a에 저장된 값을 바꿔도, b의 저장된 값은 변하지 않는다.
• 객체와 원시값의 다른 점2
  • 똑같은 것을 같다고 비교해도 객체는 각각 따로 만들어진 것이므로 false가 나온다.

---

화면에 창띄우기

• 값을 입력 받는 창

  • prompt();

• 경고창

  • alert();

• 확인, 취소 창

  • confirm();

---

document.querySelector('')로 가지고 왔을 때, 변수 이름 짓기

• 본인 만의 규칙을 만들어라
  • js로 html이용하기
    • const $button = document.querySelector('button');
    • button tag를 가져왔으므로 button앞에 $를 붙인다.
      • 여러 개의 tag를 가져왔을때, $button -> $ 2개 붙인다.

---

js로 html가져오기 document.querySelector('')

• html 한 개 들고오기
  • document.querySelector('input');
  • 'input' -> 'html tag'
• 같은 html 모두 들고오기
  • document.querySelectorAll('button');
• id를 이용하여 들고오기
  • document.querySelector('#word');
  • id가 word인 tag가 선택된다.
• class를 이용하여 한 개 들고오기
  • document.querySelector('.btn');
• class를 이용하여 여러 개 들고오기
  • document.querySelectorAll('.btn');
• 부모 자식관계의 자식 tag선택하기
  • document.querySelector('div > span');
    • 반드시 자식을 선택하고 싶을 때, 쓴다.
  • document.querySelector('div p');
    • 자식도 선택가능하고, 손자도 선택가능하다.

<div>
    <span>
        <p></p>
    </span>
</div>

---

유사배열

• document.querySelectorAll('button'); console에 입력
  • 출력 NodeList [button]
  • 이때 [button] 배열처럼 보이지만, 실제로는 객체이다.

---

이벤트 리스터

document.querySelector('button').addEventListener('click',function(){});

• .addEventListener('click',function(){console.log('클릭')});
  • 버튼 클릭을 감지한다. -> console.log('클릭') 실행
  • 이때 이벤트를 감지 후에 실행되는 함수는 콜백 함수 또는 리스너 함수라고 불린다.

document.querySelector('input').addEventListener('input',function(event){console.log('글자입력',event.target.value)});

• input tag의 글자 입력을 감지한다.
• 어떤 글자가 입력되었는지 확인할 수 있다

const onClick = function(){console.log('클릭')};
document.querySelector('button').addEventListener('click',onClick);

• 콜백함수를 밖에서 만들고 넣을 수 있다.
  • 주의할 점 : 변수 선언문 형태로 만들었을 때, 콜백함수에 ()를 붙이면 안된다.

---

끝말잇기 게임

• 피드백
  • 나는 끝말을 이었는가? 중복되었는가? 두 가지 기능을 동시에 만족시키려 하였다. 일단 끝말을 이었는지 하나씩 하자
  • 변수에 저장된 값이 없는 경우를 조건문으로 만들지 못했다.

---

끝말잇기 게임에서 배운 것들

---

변수에 저장된 값이 없다를 코드로 표현

• 개념
  !변수명

• 조건문에 응용하기

  let word;
  if(!변수명){}

• 변수에 저장된 값이 없을 때, 조건문을 만들 수 있다.

---

html의 content 가져오기

• html의 content바꾸기
  • $word.textContent = word;
    • 변수가 아닐 때는 ''붙여라
    • $word는 html를 js로 가져온 것이다.(querySelector)
• html의 content를 일부분만 바꾸고 싶을 때,
  • <span id="order">1</span>번째 참가자
  • 바꾸고 싶은 부분만 span tag로 감싼다.
• $input.value = "";
  • input tag에 입력된 값 바꾸기

---

input tag에 입력된 값을 변수에 저장하기

let word; //input에 입력된 단어를 저장하기 위한 변수
let $input = document.querySelector('input'); //input tag를 가지고 와서 변수에 저장함
$input.addEventListener('input',onInput); //input tag에 입력(input)될 때, 감지해서 함수실행시킴
const onInput = function(event) { // **핵심** 입력된 값을 변수에 저장시킴;
  word = event.target.value;
};

---

html tag의 content를 가지고 와서 변수에 저장할 수 있다.