JavaScript

JavaScript
[JavaScript] 이벤트 버블링(Event Bubbling), 이벤트 캡처링(Event Capturing)
[JavaScript] 이벤트(Event)란? 에서 이벤트(Event)와 이벤트 핸들러(Event Handler)에 대해 알아봤었습니다. 요약하자면 다음과 같습니다. 이벤트를 감지하는 이벤트 핸들러를 HTML과 연동 1번에서 연동된 HTML 부분에 사용자가 어떤 행동을 하면 (예: 클릭) 이벤트가 발생 이벤트 핸들러에 등록된 코드 실행 음.. 근데 만약 HTML 요소들이 중첩되어있다면 이벤트 핸들러는 어떻게 동작할까요? 예를 들어 이 코드에서 depth3 영역을 클릭한다면, 어떤 alert가 뜰까요? 한번 직접 눌러볼까요? HTML 삽입 미리보기할 수 없는 소스 분명 하나의 영역만 클릭했는데, 모든 onClick 이벤트 핸들러가 동작한 것을 확인하셨나요? 위와 같이 중첩된 요소에서 이벤트가 발생할 때는,..
→2022.10.04
JavaScript
[JavaScript] 이벤트(Event)란?
이벤트(Event)란? 이벤트(Event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 "클릭을 했을 때", "스크롤을 했을 때", "무언가 입력했을 때" 등의 상호작용으로 인해 일어나는 사건을 의미하는데, DOM 요소와 관련이 있습니다. 이 이벤트라는게 존재하는 이유는 어떠한 이벤트가 발생했을 때 그에 맞는 반응을 해주기 위해서겠죠~! 따라서 이벤트는 일반적으로 함수에 연결되며, 이 함수를 이벤트 핸들러(Event Handler) 라고 합니다. 이벤트 핸들러(Event Handler) 등록 방법 인라인(inline) 방식 인라인 방식은 이벤트를 태그 속성(attribute) 으로 지정하는 방식입니다. Click me 프로퍼티(property) 방식 프로퍼티 리스너 방식은 이벤트 대상에 해..
→2022.10.03
JavaScript
[JavaScript] 자바스크립트(JavaScript)의 역사
그래픽 웹브라우저의 탄생 1993년, NCSA 사에서 현대 그래픽 웹브라우저의 시초로 알려진 모자이크(Mosaic) 웹 브라우저가 탄생했습니다. 하나의 창에 텍스트와 이미지를 동시에 출력한 최초의 웹브라우저로, 당시 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 UI 요소가 더해져 있었습니다. 이 모자이크 웹브라우저의 개발팀을 이끌던 Marc Andreessen은 대학교를 졸업함과 동시에 Nescape라는 회사를 설립하게 됩니다. 1994년 Marc는 모자이크 웹브라우저 기술을 발전시켜 조금 더 UI요소가 더해진 Netscape Navigator 브라우저를 만듭니다. 이 당시에는 HTML과 CSS로 정적인 웹사이트 밖에 만들 수 없습니다. page와 page 에 링크를 걸어서 페이지 이동만 가능한 정말 ..
→2022.10.03
JavaScript
[Javascript] 클로저(Closure)란?
클로저 정의 클로저(Closure)는 자유변수에 접근할 수 있는 내부함수 또는 그 환경을 포함하는 코드를 지칭한다. MDN(Mozilla Developer Network) [모질라 재단및 다른 IT기업들이 사용하는 웹 개발을 위한 문서 저장소이자 수많은 프로그래밍 입문자들을 위한 학습 장소] 에서는 다음과 같이 정의한다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 응? 자유변수가 무엇인가? 렉시컬 환경은 또 무엇인가? 분명 정의는 됐는데 알아..
→2021.10.18
JavaScript
[Javascript] 호이스팅(Hoisting)이란?
호이스팅(Hoisting)이란? - 함수 안에 있는 선언을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다 - 자바스크립트 함수는 실행되기 전에 함수 안에 선언된 변수값을 모아서 최상단에 선언한다. - 따라서 변수를 어느 위치에 선언하든지 함수의 가장 위로 끌어올려져서 실행된다. 실행순서: 1. 자바스크립트 Parser가 함수 실행 저 해당 함수를 한 번 훑는다 2. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 먼저 실행시킨다. 주의사항: - 유효범위: 함수블록 {}안에서 유효 - 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리한다. - 실제 메모리에서는 변화가 없다. 호이스팅 대상 var 로 선언된 변수와 함수선언문만..
→2021.10.14
JavaScript
[Javascript] var, let, const 차이
자바스크립트에서 변수를 선언할 때 var, let, const가 쓰이는 것을 자주 보았을 것이다. var 는 선언 방식에 있어서 큰 단점을 가지고 있다 var name = 'Jaehyung' console.log(name) // Jaehyung var name = 'Dayoung' console.log(name) // Dayoung 위 같은 코드를 작성했을 시, 이미 선언된 변수를 다시 선언했음에도 불구하고 에러가 나오지 않고 각각 다른 값이 출력된다. 변수를 유연하게 사용하기에는 좋을 수 있으나, 코드가 길어지고 변수가 많아지면 초기에 선언된 값이 바뀌면서 코드에 큰 영향을 끼칠 수 있다. 따라서 ES6 이후에 이를 보완하기 위해 let과 const가 추가됐다 let name = 'Dayoung' co..
→2021.10.13

• 이전
• 1
• 다음