📌Today I Learned

JavaScript

ex39_variable

JavaScript Core

변수 선언하기

1. var

   • BOM / DOM / ES6
   • function-scoped
   • 제어문 (영역 인식 불가능)
   • 중복 선언 가능
   • 상수 선언 불가능

2. let

   • ES6(ESCMAScript 2015)
   • block-scoped(함수, 제어문)
   • 중복 선언 불가능
   • 변수
     

3. const
   - ES6(ESCMAScript 2015)
   - block-scoped(함수, 제어문)
   - 중복 선언 불가능
   - 상수(final 변수)
   
   

ex40_hoisting

호이스팅, Hoisting

• 변수 호이스팅
• 함수 호이스팅(중요)
• 자바스크립트를 실행하기 전에, 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다. > 코드 재배치

function m3() {
    alert(a); //undefined
	var a = 10; // 변수 선언문 = var a -> 이거만 잘라서 alert 위로 가져간다. -> 값이 없다.
}

//위와 같다.
function m3() {
	var a;
    alert(a);
    a = 10;
}

면접에서 물어본다.

m2();

function m2() {
	alert("m2");
}

이렇게 선언해도 실행이 되는 이유는?
-> 호이스팅이 됐기 때문이다.

ex41_object

객체, Object

• JavaScript에는 클래스가 없다. 하지만 내장 객체를 제공한다.

1. 내장 객체

   • Array, Date, Math, Object 등
   • new Array()
   • new Date()
   • Math.메소드()

2. BOM 객체

   • window, document, form, text, button 등

3. DOM 객체

   • element, attribute, text, comment 등

4. 사용자 정의 객체

   • JavaScript에는 클래스가 없다. > 원하는 형태의 객체 생성 불가능 > 원하는 형태의 객체를 만들 수 있다.

사용자 정의 객체

1. Object 내장 객체를 사용
   • const obj1 = new Object();

2. {} > 객체 리터럴 표기법을 사용
   • const obj2 = {};

JavaScript의 모든 객체는 프로퍼티를 자유롭게 추가/삭제가 가능하다.

JavaScript의 프로퍼티 표기법

1. hong.tel > 멤버 보통 사용
2. hont['tel'] > key
   
   

JavaScript 객체 만들기

1. 빈 객체를 만든다.
   • new Object()
2. 원하는 프로퍼티를 추가한다.
   • obj.name=''

const lee = new Object();
lee.name = "이순신";
lee.age = 25;
lee.addres = "서울시 강동구 풍납동";

const park = {
  name: "박문수",
  age: 40,
  address: "한양",
};

//----------------------------------
const address = {
  si: "서울시",
  gu: "강남구",
  dong: "대치동",
};

const you = {
  name: "유재석",
  age: 30,
  address: address,
};

// 위와 같다.
const you = {
  name: "유재석",
  age: 30,
  address: (address = {
    si: "서울시",
    gu: "강남구",
    dong: "대치동",
  }),
};

// 객체에 메소드도 넣을 수 있다.
const yang = {
  name: "양세찬",
  age: 25,
  hello: m1,
};

function m1() {
  alert("안녕하세요.");
}

yang.hello();

ex42_function

JavaScript Function

• "함수는 1급 객체이다."
• "First Citizen"
• 함수를 객체처럼 취급한다. > 함수를 값(데이터)으로 사용할 수 있다.

1. 함수를 변수나 데이터 구조에 담을 수 있다.(저장)
2. 함수는 매개변수를 전달할 수 있다.
3. 함수를 반환값으로 사용할 수 있다.
   
   

JavaScript에서 함수를 선언하는 방법

1. 함수 선언문
2. 함수 표현식(리터럴) == 익명 함수

//함수 선언문
function m1() {
  alert("m1");
}
m1();

//함수 표현식
let f2 = function () {
	alert("익명 함수");
};
f2();

//1. 가독성 향상
//2. 가독성 향상 -> 해당 함수의 용도를 벗어난 사용이 없다.
// 아래가 보편적인 사용
document.getElementById("btn2").onclick = function () {
  alert("btn2");
};

// let temp = m8();
// temp();

// 위와 같다.
m8()();

ex43_window

window 객체

• window.open()
• window.close()
• window.alert() -> alert()
• window.confirm()
• window.prompt()
• window.setTimeout()
• window.setInterval()
  ...

JavaScript의 전역 변수와 모든 함수는 자동으로 window 객체의 프로퍼티가 된다.

var a1 = "홍길동"; //전역 변수 > 변수(X), 프로퍼티(O)
let a2 = "하하하"; // window 프로퍼티(X)
const a3 = "호호호"; // window 프로퍼티(O)

ex44_closure

클로저, Closure

외부 함수의 지역 변수를 내부 함수에서 사용할 때

• 시간차에 따라 외부 지역 변수가 소멸 후 내부함수의 호출 발생
• 외부 함수의 지역 변수를 나중에 사용하기 위해서 별도의 공간에 저장 > Closure
  
  

ex45_template

Template String

• ES6

JavaScript 문자열 표기법

1. 'string'
2. "string"
3. `string` > template string

let name = "홍길동";
let age = 20;

console.log(`이름은 ${name}이고, 나이는 ${age - 1}세입니다.`);

// 엔터 가능
let temp = `
하나
둘
셋`;
console.log(temp);

ex46_event

이벤트 버블링(Event Bubbling) vs 이벤트 터널링(Event Tunneling) == 이벤트 캡쳐링(Event Capturing)

이벤트 터널링

최상위 태그부터 하위 태그까지 내려가는 것
ex) html -> body -> div

이벤트 버블링

하위태그부터 최상위 태그까지 올라가는 것
ex) div -> body -> html

이벤트 터널링

• 지원 안함

이벤트 버블링

• 지원함
• 기본값

이벤트 버블링을 여기서 중단해라! > 더 이상의 이벤트가 없다.
event.cancelBubble = true;

window의 키 이벤트 > 모든 상황에 늘 발생

아무에게도 포커스가 없다면 window가 가지고 있다고 생각하자.

// 기본 -> 이벤트 버블링 방식
p1.addEventListener("click", () => {
    alert("빨강");
});

// true -> 이벤트 터널링 방식
p1.addEventListener(
  "click",
  () => {
    alert("빨강");
  },
  true
);

부모자식이 겹쳐있을 때 어떤 이벤트를 먼저할지 생각하고 사용한다.

• 부모 먼저 -> 터널링
• 자식 먼저 -> 버블링
  
  

ex47_event

이벤트가 발생된 객체(태그)

-> 이벤트 발생에 관련된 계층 중 최하위 객체(유턴 객체)

• event.target
• event.srcElement

event.target = 유턴객체. 터널링이 끝나고 버블링이 발생하는 객체.

바로 원하는 이벤트 선택하기

event.target.bgColor = "gold";
-> 현재 타겟이 원하는 대상과 일치하는 경우 사용

event.currentTarget.bgColor = "gold";
-> 위의 타겟과 다른 대상일 때 정밀한 현재 타겟을 받아온다.

tr[i].bgColor = "gold";
-> 되긴 하는데 이거는 사용 금지

ex48_event

//기존 이미지 제거
event.currentTarget.removeChild(
	event.currentTarget.firstElementChild
);

//새 이미지 추가
let img = document.createElement("img");
img.setAttribute("src", "../asset/images/rect_icon01.png");
event.currentTarget.appendChild(img);

// 클릭한 이미지를 삭제
//- 부모태그.removeChild(자식태그)
// event.target.removeChild(event.target.firstElementChild);

// event.target.parentElement.removeChild(event.target);

// 바로 위 코드와 같음
event.currentTarget.removeChild(
  event.currentTarget.firstElementChild
);

// 우클릭 메뉴 지우기
//<body>
window.oncontextmenu = () => {
  return false;
};

ex49_event

enter/leave 자식 요소에 문제 없이 깔끔한 사용 가능

일반적으로는 over/out 사용

보조키의 눌림 상태

console.log(event.ctrlKey);
console.log(event.shiftKey);
console.log(event.altKey);

const img = document.createElement("img");
if (event.ctrlKey) {
  img.setAttribute("src", "../asset/images/rect_icon06.png");
} else {
  img.setAttribute("src", "../asset/images/rect_icon07.png");
}
event.target.appendChild(img);

ex50

방향키 문제 예제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #tbl1 {
        border: 1px solid black;
        border-collapse: collapse;
        width: 500px;
        height: 500px;
      }
      #tbl1 td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <!-- ex50.html -->
    <table id="tbl1">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <script>
      const list = document.querySelectorAll("#tbl1 td");
      let index = 0;

      // for (let i = 0; i < list.length; i++) {
      //   list[i].innerText = i;
      // }

      list[index].bgColor = "gold";

      window.onkeydown = () => {
        if (event.keyCode == 37) {
          clearBackgroundColor();
          index--;
          if (index < 0) {
            index = list.length - 1;
          }
        } else if (event.keyCode == 39) {
          clearBackgroundColor();
          index++;
          if (index >= list.length) {
            index--;
          }
        } else if (event.keyCode == 40) {
          clearBackgroundColor();
          index += 5;
          if (index >= list.length) {
            index -= 5;
          }
        } else if (event.keyCode == 38) {
          clearBackgroundColor();
          index -= 5;
          if (index < 0) {
            index += 5;
          }
        }
        list[index].bgColor = "gold";
      };

      function clearBackgroundColor() {
        for (let i = 0; i < list.length; i++) {
          list[i].bgColor = "transparent";
        }
      }
    </script>
  </body>
</html>