[모던 자바스크립트 튜토리얼] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임
·
Frontend/Javascript
모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다.이벤트 버블링이벤트 발생한 요소(자식 요소)에서 시작하여 DOM 트리 상위(부모 요소)로 전파되는 방식이벤트가 제일 깊은 곳에 있는 요소에서 시작하여 부모 요소를 거슬러 올라가며 발생하는 모양이 물 속에서 거품이 올라오는 모양🫧과 닮아서 표현된 것이다.event.target vs thisevent.target이벤트가 발생한 가장 안쪽의 요소, 실제 이벤트가 시작된 타깃 요소this(=event.currentTarget)현재 요소, 현재 실행 중인 핸들러가 할당된 요소를 참조버블링 중단event.stopPropagation(), event.stopImmediatePropagation() 함수를 통해 버블링을 중단할 수 있다.하지만, 이벤트 버블링을 막아야..
[모던 자바스크립트 튜토리얼] 2. 자바스크립트 기본(3)
·
Frontend/Javascript
모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.7 형 변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이런 과정을 "형 변환(type conversion)"이라고 한다. 문자형으로 변환 문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다. String(value) 함수를 호출해 전달받은 값(value)을 문자열로 변환할 수 있다. 숫자형으로 변환 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다. Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 변환할 수 있다. 한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다. 아래는 숫자형으로 변환 시 적용되는 규칙이다. 전달..
[모던 자바스크립트 튜토리얼] 2. 자바스크립트 기본(2)
·
Frontend/Javascript
모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.4 변수와 상수 변수 자바스크립트에선 let 키워드를 사용해 변수를 생성 var도 let처럼 변수를 선언하는 데 쓰이지만 '오래된' 방식 변수를 두 번 선언하면 에러가 발생 → 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 함 함수형 언어 변수에 데이터가 저장되면, 그 값을 영원히 유지 다른 값을 저장하고 싶다면 이전 변수를 재사용할 수 없기 때문에 새로운 변수를 만들어야 함 예약어 let class return function 상수 변화하지 않는 변수를 선언할 땐, let 대신 const 사용 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생 과제 - 변수 가지고 놀기 let admin..
[모던 자바스크립트 튜토리얼] 2. 자바스크립트 기본(1)
·
Frontend/Javascript
모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.1 Hello, world! 'script' 태그 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있음 외부 스크립트 분해해놓은 각 파일은 src 속성을 사용해 HTML에 삽입 절대 경로와 상대 경로 절대 경로 처음부터 시작하여 목적지까지의 절대적인 경로 상대 경로 현재 위치를 기준으로 하여 목적지까지의 상대적인 경로 캐시 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공 src 속성이 있으면 태그 내부의 코드는 무시됨 로 외부 파일 연결 태그 내에 코드 작성 2.2 코드 구조 문(statement) 어떤 작업을 수행하는 문법 구조(syntax structu..
[모던 자바스크립트 튜토리얼] 1. 소개
·
Frontend/Javascript
모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 1.1 자바스크립트란? 브라우저 인터넷을 검색할 때 문서나 영상, 음성 따위의 정보를 얻기 위하여 사용하는 프로그램 인터넷에서 웹 페이지를 볼 수 있게 하는 응용 프로그램 자바스크립트 엔진 자바스크립트 코드를 실행하는 소프트웨어 구성요소 자바스크립트 동작 원리 싱글 스레드 순차 실행 스레드 하나의 프로세스 안에서 다양한 작업을 담당하는 최소 실행 단위 자바 스크립트 → (트랜스파일) CoffeeScript, TypeScript, Flow, Dart 1.2 메뉴얼과 명세서 1.3 코드 에디터 통합 개발 환경(IDE) Visual Studio Code WebStorm 경량 에디터 Atom Visual Studio Code Sublime Text Notepa..
[모던 자바스크립트 튜토리얼] 시작
·
Frontend/Javascript
https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 모던 자바스크립트를 공부하기 좋은 사이트를 찾다가 알게 된 곳이다. 앞으로 이 사이트를 참고하여 공부하면서 내 의식의 흐름을 기록하려고 한다.