FreeHand

목차1. 동기 처리와 비동기 처리2. 이벤트 루프와 태스크 큐 1. 동기 처리와 비동기 처리현재 실행 중인 작업이 종료할 때까지 다음 작업이 기다리는 방식을 동기 처리라고 한다. 동기 처리 방식은 작업을 순서대로 하나씩 처리하므로 실행 순서가 보장되는 장점이 있지만, 앞의 작업이 종료할 때까지 이후 작업들이 기다려야 하는(블로킹, blocking) 단점이 있다. 현재 작업이 종료되지 않아도 다음 작업을 실행하는 방식을 비동기 처리라고 한다. 비동기 처리 방식은 동기 처리 방식과 반대로 작업의 실행 순서가 보장되지 않는 단점이 있지만 블로킹이 발생하지 않는다는 장점이 있다.자바스크립트에서 setTimeout 함수와 setInterval 함수, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다...

목차1. 소스코드    1.1 소스코드의 종류    1.2 소스코드의 평가와 실행2. 실행 컨텍스트    2.1 실행 컨텍스트 스택    2.2 변수 호이스팅 1. 소스코드1.1 소스코드의 종류ECMAScript 사양은 4가지 소스코드가 있다.전역 코드: 전역에 존재하는 소스코드함수 코드: 함수 내부에 존재하는 소스코드eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드모듈 코드: 모듈 내부에 존재하는 소스코드소스코드의 종류에 따라 생성하는 실행 컨텍스트가 다르다. 1.2 소스코드의 평가와 실행자바스크립트 엔진은 소스코드를 소스코드 평가와 소스코드 실행 두 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여..

인라인 이벤트 모델 버튼 HTML 태그 안에서 이벤트를 연결한다. 좀 더 깔끔한 코드를 위해서 script 태그에 함수를 만들고 함수를 호출해서 이벤트를 실행한다. 버튼 고전 이벤트 모델 버튼 첫번째 이벤트는 실행되지 않고 마지막 이벤트만 실행된다. 표준 이벤트 모델 이벤트 객체를 사용하여 이벤트 실행 이벤트 리스너(핸들러) 사용 버튼 이벤트가 차례대로 모두 실행된다.

DOM(Document Object Model, 문서 객체 모델): 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식 HTML 태그를 자바스크립트 객체로 만든 것을 문서 객체라고 한다. 즉, 자바스크립트 코드로 HTML을 조작할 수 있다. 문서 객체 선택 document.querySelector(태그) document.querySelectotAll(태그) document.getElementById(id값) javascript - 1 javascript - 2 javascript - 3 여러개의 h1 태그에서 첫번째만 선택되었다. javascript - 1 javascript - 2 javascript - 3 h1 태그가 모두 선택되어 배열로 반환한다. javascript - 1 javascript -..

객체 생성 1. 객체 리터럴 let person1 = { name: 'Jin', age: 25, toString: function() { return '{name: ' + this.name + ', age: ' + this.age + '}'; } }; console.log(`name: ${person1.name}`); // name: Jin console.log(`age: ${person1.age}`); // age: 25 console.log(person1.toString()); // {name: Jin, age: 25} 2. Object() 생성자 let person2 = new Object(); // let person2 = {}; person2.name = 'Lee'; person2.age = 2..