JavaScript53 [JavaScript] Event - 사용자가 버튼을 클릭했을 때 일어나는 사건 같은 것이다. - 이벤트 핸들 : 이벤트가 발생되면 실행되는 함수를 의미한다. (1) 이벤트의 종류 - UI Event : - load : 웹페이지의 로드가 완료되었을 때 - upload : 웹페이지가 언로드 될 때 - error : 요청한 자원이 존재하지 않거나 오류가 났을 때 - resize : 창의 크기를 조절했을 때 - scroll : 웹페이지를 위아래로 스크롤 할 때 - select : 텍스트를 선택했을 떄 - keyboard Event - keydown : 키를 누르고 있을 때 - keyup : 누르고 있던 키를 뗄 때 - keypress : 키를 누르고 뗄 때 - Mouse Event - click : 마우스 버튼을 클릭했을 때 - dbclick.. 2023. 10. 31. [JavaScript] 동기식 처리 모델 vs 비동기식 처리 모델 (1) 동기식 처리모델 - 직렬적으로 task를 수행한다. - 순차적으로 실행되며 다음 작업은 대기하게 된다. (순차적 코드 진행) function a() { console.log('a'); b(); } function b() { console.log('b'); c(); } function c() { console.log('c'); } a(); // a->b->c 순차적 진행 (2) 비동기식 처리 모델 - 병렬적으로 task 수행한다. - task가 끝나지 않더라도 대기하지 않고 다음 작업을 진행한다. (코드가 순차적을 진행되지 않는다.) - 콜백함수는 즉시 실행이 되지 않고 기다리게 된다. - 대표적인 예 : setTimeout() console.log('1'); setTimeout(function().. 2023. 10. 31. [JavaScript] DOM - 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이다. - JavaScript를 통해 동적으로 변경할 수 있다. - HTML 문서에 대한 모델 구성 : HTML 문서를 로드한 후 문서에 대한모델을 객체의 트리(DOM tree)로 메모리에 생성한다. - HTML 문서 내의 각 요소에 접근 / 수정 : DOM은 각 객체에 접근 및 수정이 가능하며 브라우저를 통해 보게 될 내용 또한 변경된다. (1) DOM tree - 문서 노드 : DOM tree에 접근하기 위한 시작점(entry point)이다. 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통 해야 한다. - 요소 노드 : HTML .. 2023. 10. 30. [JavaScript] Higher order function - 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. - 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. (1) 고차 함수 종류 - .sort() : 배열의 요소를 오름차 순으로 정렬 Unicode 코드 포인트 순서를 따른다. - .reverse() : 배열의 요소를 내림차 순으로 정렬한다. - .foreach() : for문 대신 사용 가능, break문을 사용할 수 없다. - .map() : 배열을 순회하며 요소의 값을 새로운 값으로 변경한다. 원본은 변경되지 않는다. - .filter() : 배열을 순회하면서 각 요소에 대해 인자로 주어진 결과가 true인 값만 새로운 배열로 반환한다. var a = [40, 100, 1, 5, 2, 25, 10]; con.. 2023. 10. 30. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음