제로초 JS 입문 강의 9강 정리 (틱택도 게임)

 

 

 

 

9 - 1~2 이차원 배열

스크립트에서 반복문으로 화면구성을  만들어본다.

 

 

 

 

 

9 - 3 구조분해 할당

 

하기처럼 복잡해질 수 있는 문법을 간결하게 표현할 수 있는 방법이다.

구조 분해 할당이 제대로 안되는 애들도 있다. 주의할 것.

 

	const arr = [1, 2, 3, 4, 5];
        const one = arr[0];
        const three = arr[2];
        const five = arr[4];

=== 같다 ===
		const {one, three, five} = arr;

 

 

 

        const body = document.body;
        const head = document.head;

=== 같다 ===
        const {body, head} = document;

 

 

 

        const obj = {
            a: 'hhh',
            b: {
                c: 'aaaa',
                d:{e:'ohoh'},
            },
        }

        const a = obj.a;
        const c = obj.b.c;
        const e = obj.b.d.e;



=== 같다 ====
        const {a, b:{c, d:{e}}} = obj;

 

 

 

 

 

9 - 5 이벤트 버블링

 

html 에서 하위 태그에서 이벤트가 발생하면 상위까지 이벤트가 타고 올라가면서 실행된다.

 

예를 들어 아래와 같은 html 이 있다고 할 때,

 

<table>
	<tr>
    	<td>
        </td>    
	</tr>
</table>

 

 

 

위에 있는 구문과 아래에 있는 구문은 똑같이 동작한다.

($td , $table 변수는 따로 정의되어 있다고 가정)

 

for(let i = 0; i < 3 ; i++){
	for(let j = 1; j < 3 ; j++){
    	$td.addEventListener('click', callback);
    }
}





for(let i = 0; i < 3 ; i++){
	for(let j = 1; j < 3 ; j++){
    }
}
$table.addEventListener('click', callback);

 

 

 

 

 

event.target 과 event.currentTarget 의 차이

event.target : 이벤트가 일어나는 태그를 지칭한다.

event.currentTarget : 이벤트가 일어나는 태그의 최상위 부모 태그를 지칭한다. (없다면 자신)

 

 

 

이벤트 버블링 현상을 막는 법

event.stopPropagation() 을 사용한다.

 

 

 

이벤트 캡쳐링

=> 버블링의 반대, 부모의 이벤트가 자식한테까지 가는 것.

=> 팝업의 밖(부모)을 클릭 시, 팝업(자식)이 꺼지게 하는 그런 경우에 쓴다.

 

 

$table.addEventListener('click', callback, true);

 

 

 

 

 

9 - 7 부모 자식 관계 / 유사배열 / 배열 함수 몇 가지

 

아래와 같은 태그 상태일 때

<table>
	<tr>
    	<td>
        </td>    
	</tr>
</table>

 

 

td 는 cell 정보만 가지고 있다. (target.cellIndex 는 해당 td의 cell 값을 가져온다. target은 event.target 의 값 )

tr 은 row 정보만 가지고 있다.  (rr.rowIndex 는 해당 tr의 row 값을 가져온다. rr은 tr의 변수 )

tr은 td 의 부모 태그이므로 tr의 row 값을 target.parentNode.rowIndex 로 가져올 수도 있다.

 

 

 

아래와 같은 것들은 배열이 아닌 유사 배열인데

배열이 아니다 보니 forEach 함수를 쓸 수 없다.

(HTMLColl~~ 이런 글자가 붙으면 유사 배열, 배열은 글자 없이 바로 (3) length 가 바로 온다)

 

 

 

유사 배열을 배열로 바꾸는 방법

=> 아래처럼 Array.from 으로 감싼다.

Array.from($table.children)

 

 

 

 

 

배열 함수

flat()

=> 고차원 배열을 한 차원 낮은 배열로 바꾸는 함수

 

rows.flat()
=> [td, td, td, td, td, td, td, td, td]

//rows 가 2차원 배열일 때

 

 

 

every(함수)

=> 배열의 모든 요소가 조건을 충족하는지 확인 (and 조건의 느낌)

=> 하나라도 true 가 없으면 false 반환

 

some(함수)

=> 배열의 모든 요소 중에 하나라도 조건을 충족하는지 확인 (or조건의 느낌)

=> 하나라도 true 가 있으면 true 반환

 

cosnt array = [1, 2, 3, 4];
let result = array.some(num => num > 2);
console.log(result); // true
result = array.every(num => num > 2);
console.log(result); // false

 

 

 

filter(함수)

=> 해당 함수에 해당하는 데이터들을 반환