study 코딩하자

이벤트의 단계 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 캡쳐링(capturing) 이벤트를 실행할 때 최상위 조상에서 타깃으로 설정된 요소까지 전파되는 동안을 캡쳐링 단계라고 합니다. 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있습니다. 타깃 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를..

마우스 이벤트의 종류 click : 마우스를 클릭할 때 발생 dbclick : 마우스를 더블 클릭할 때 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mousemove : 마우스를 움직일 때 발생 mouseover : 마우스를 요소 안에 들어올 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mouseover, mouseout / mouseenter, mouseleave 차이점 mouseover, mouseout 과 mouseenter, mouseleave의 차이점은 자식 요소까지 인식하..

템플릿 리터럴(Template Literal) 템플릿 리터럴은 S6부터 새로 도입된 문자열 표기법으로 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 문자열 생성 시 따옴표 대신, 백틱(`)을 사용합니다. 템플릿 리터럴의 기능 1. 줄바꿈 일반적인 문자열에서 줄 바꿈은 허용되지 않으며 공백(white-space)을 표현하기 위해서는 백 슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 합니다. 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 공백은 있는 그대로 적용됩니다. let str01 = `Hi I am GYChoi!`; console.log(str01); 2. 문자열 인터폴레이션(String Inter..

배열 메서드 filter() : 조건에 만족하는 배열 요소 검색(반환:배열) { const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.filter(el => el === 300); const arrNum2 = [100, 200, 300, 400, 500]; const result2 = arrNum2.filter(el => el === 600); const arrNum3 = [100, 200, 300, 400, 500]; const result3 = arrNum3.filter(el => el >= 300); } 기본값 메서드 결괏값 [100, 200, 300, 400, 500] .filter(el => el === 300) 300 [100, 20..

배열 메서드 indexOf() : 배열 요소 검색(반환:숫자) lastIndexOf() : 배열 요소 끝에서 검색(반환:숫자) includes() : 배열 요소 검색(반환:불린) { const arrNum = [100, 200, 300, 400, 500]; const arrIndex = arrNum.indexOf(200); const arrNum2 = [100, 200, 300, 400, 500]; const arrIndex2 = arrNum2.indexOf(300); const arrNum3 = [100, 200, 300, 400, 500]; const arrIndex3 = arrNum3.indexOf(600); const arrNum4 = [100, 200, 300, 400, 500]; const a..

배열 메서드 reduce() : 배열 요소 하나로 정리(반환:결괏값) reduceRight() : 배열 요소 하나로 정리(반환:결괏값) { const arrNum1 = [100, 200, 300, 400, 500]; const arrReduce1 = arrNum1.reduce(element => element); const arrNum2 = [100, 200, 300, 400, 500]; const arrReduce2 = arrNum2.reduce((previous, current) => previous + current); const arrNum3 = [100, 200, 300, 400, 500]; let sum = 0; for(let i=0; i p.concat(c)) const arrNum5 = [..

배열 메서드 unshift() : 배열 처음 요소에 추가(반환:숫자) shift() : 배열 처음 요소 삭제(반환:삭제된 요소) { const arrNum = [100, 200, 300, 400, 500]; const arrUnshift = arrNum.unshift(600) } { const arrNum = [100, 200, 300, 400, 500]; const arrShift = arrNum.shift() } 기본값 메서드 리턴값 결괏값 [100, 200, 300, 400, 500] .unshift(600) 6 600,100,200,300,400,500 [100, 200, 300, 400, 500] .shift() 100 200,300,400,500 reverse() : 배열 요소의 순서를 반대로..

배열 속성 length:배열의 길이 구하기(반환:숫자) { const arrNum = [100, 200, 300, 400, 500]; const arrNumLength = arrNum.length; const arrText = ['a', 'b', 'c', 'd', 'e']; const arrTextLength = arrText.length; const arr = [1,2, ['a', 'b']]; const arrLength = arr.length; } 기본값 속성 리턴값 [100, 200, 300, 400, 500] .length 5 ['a', 'b', 'c', 'd', 'e'] .length 5 [1,2, ['a', 'b']] .length 3 배열 메서드 join():배열 요소 문자열 결합(반환:문자..