본문 바로가기

전체 글209

JavaScript 이벤트 버블링과 이벤트 캡쳐란? 이벤트 버블링한 요소에서 어떤 이벤트가 발생하면, 이벤트가 동작하고 이어서 연쇄적으로 상위요소에 전파되어 부모요소의 이벤트가 동작한다. 가장 최상단의 요소를 만날 때까지 이벤트 버블링이 이어진다. 아래 예제를 확인해보면, 제일 안쪽의 div를 눌렀는데 상위의 div들에 있는 이벤트까지 전부 시행되는 것을 볼 수 있다. See the Pen 이벤트버블링 by coding-ji (@coding-ji) on CodePen. 이벤트 캡쳐이벤트 캡쳐는 이벤트 버블링과는 반대로, 이벤트가 발생하면 그 하위요소에 전파되어 자식요소의 이벤트가 동작한다.  아래 예제를 확인해보면, 제일 안쪽의 div를 누르면 제일 상위의 div1의 이벤트부터 시행되어 아래로 이벤트가 전파되는 것을 볼 수 있다. capture를 tru.. 2024. 7. 23.
JavaScript 기본형과 참조형의 차이에 대해 알아보자 이전에 타입에 대해 이야기 하면서 짧게나마 기본형과 참조형 타입에 대해서 설명을 한 적이 있다. 기본형과 참조형의 차이는 메모리를 적재하는 방법에 차이가 있다. 기본형참조형NumberStringBooleanUndefinedSymbolNullObject(Array, Function, Date ..) 기본형 변수를 지정하게 되면 지정하는 공간을 할당한다 (주소 생성).해당 주소에 변수의 값을 적재한다. 변수의 값을 변경할 경우 해당 주소에 작성되어 있는 기존 값은 사라지고 새로 들어오는 값이 적재가 된다. 다른 변수를 참조해서 변수를 생성하는 경우 참조한 변수의 "값"을 생성한 변수의 주소로 "복사"한다. (값의 복사)값을 복사하기 때문에, 메모리들이 가리키고 있는 값이 서로 독립되어져 있다. 즉, 참조된 .. 2024. 7. 23.
JavaScript의 getter와 setter 에 대해서 객체(Object)안의 요소 중 접근자 프로퍼티로 getter(접근자)와 setter(설정자)가 있다. getter는 값을 획득하고, setter는 값을 설정하는 역할을 한다. 이 메서드들은 정보 은닉, 즉 변수에 직접적인 접근을 방지한다. 물론 getter와 setter를 만들었다고해서 변수를 직접적으로 조작을 못하는 것은 아니지만, getter와 setter를 통하여 의도에 맞게 사용할 수 있도록 돕는다. GetterGetter는 객체의 프로퍼티의 값을 반환하는 메서드다. 프로퍼티로 직접 접근하는 대신 getter를 통해 값을 가져올 수 있다. getter는 매개변수를 가지면 안된다. getter는 값이 실제로 필요한 상황이 오기 전까지 시행되는 것을 미루기때문에 cpu를 낭비하지 않는다는 장점이 있.. 2024. 7. 23.
JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 객체와 배열우선 for문에 대해 들어가기 전에 객체와 배열의 차이점에 대해서 이야기하고자 한다배열항목객체let arr = [요소1, 요소2,..]선언방법let obj = {키1:속성1, 키2:속성2,...}값(요소,item), length 포함 값 키(key), 값(value)  ==> 속성(property)순서가 있다. 인덱스로 설정되어 있다.순서여부순서가 없다.배열명[인덱스]*인덱스는 차례대로 0부터 길이-1까지의 숫자접근방법객체명.키, 객체명['키']*키를 통해서 값을 불러온다. 배열과 객체를 알아보는 방법으로는 Array.isArray();를 사용할 수 도 있고, console.dir을 사용해서 프로포타입이 array인지 object인지를 확인하여 알아볼 수 있다.더보기  For문 for문에.. 2024. 7. 23.
JavaScript의 기초 문법 : 배열 배열은 연관된 데이터들을 모아서 관리하기 위하여 사용한다. 배열의 경우 객체와 다르게 key가 없고, 직렬로 연결되어서 0부터 길이-1의 숫자로 이루어진 인덱스가 제공된다. 즉, 객체는 순번이 없지만 배열의 경우 순번, 길이(length)를 가지고 있다.  let | const 배열명 = [];배열 요소 접근배열 요소 접근은 인덱스 번호를 통해서 가능하다. 인덱스 번호는 0부터 시작하여 길이-1까지의 번호를 가지고 있다. 배열명[index];  배열 요소 삽입배열의 위치를 지정해서 강제로 삽입이 가능하다. 만약 배열이 삽입된 인덱스 값이 배열의 최대 길이값보다 큰 경우에는, 지정하지 않은 값에 대해서 undefined로 초기화시킨다. 또한 인덱스로 강제로 삽입했을 경우 주소값이 변경되지 않기 때문에.. 2024. 7. 23.
JavaScript의 기초 문법 : 객체 객체는 `이름(key):값(value)` 형태의 프로퍼티들을 저장하는 컨테이너로, 객체를 특정지을 수 있는 속성과 객체가 할 수 있는 기능으로 구성되어 있다.  객체 생성let | const 객체명 = {}; 여러 개의 프로퍼티를 생성하려고 할 경우 콤마(,)를 사용하면 된다. 객체 안에는 객체를 담을수도 함수를 담을 수도 있다.   생성된 객체는 console.dir()로 확인이 가능하다. 속성과 기능의 경우에는 해당 내용을 할당연산자를 통해서 변경할 수 있다. 예를 들어 book.color = "blue";를 작성하게 되면 객체 안의 color가 blue로 변경된다.  객체 값 가져오기객체명.속성key : 마침표 표기법객체명["속성key"] :대괄호 표기법(bracket expression) .. 2024. 7. 22.

티스토리툴바