본문 바로가기

728x90
반응형

Javascript

(133)
[Javascript] console 사용 시 쉼표(,)와 +의 차이 , 를 사용하면 별도의 객체로 반환되어 내부 값을 확인 가능함. + 를 사용하면 toString()이 호출되어 문자 타입으로 형변환 후 값이 반환되어 객체 내부의 값을 확인 불가능함. 예시 1)let array = [ { a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 },];console.log('logging with ,: ', array); // logging with ,: (3) [{…}, {…}, {…}]console.log('logging with +: '+ array); // logging with +: [object Object],[object Objec..
[Javascript] 이벤트 캡처링 지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..
[Javascript] Event 객체 Event 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보들을 제공한다. 이벤트가 발생하면 Event 객체는 동적으로 생성되며 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달된다.  클릭한 곳의 좌표가 표시됩니다.  위와 같이 Event 객체는 이벤트 핸들러에 암묵적으로 전달된다. 그러나 이벤트 핸들러를 선언할 때 event 객체를 전달 받을 첫 번째 매개변수를 명시적으로 선언해야 한다(위 예시에서의 e).   Event 객체 속성 종류  Event.target 실제로 이벤트를 발생시킨 요소를 가리킨다. 단, 버블링에 의해 쌩뚱맞는 다른 target이 인식될 수도 있다.   Event.currentTarget 코드에서 이벤트에 바인딩된 DOM 요소를 가리킨다. 즉 addEv..
[Javascript] 이벤트 핸들러와 this 인라인 방식 이벤트 핸들러에서의 this인라인 방식의 경우 이벤트 핸들러는 일반 함수로써 호출되므로 이벤트 핸들러 내부의 this는 전역 객체 window를 가리킨다.Button    프로퍼티 방식 이벤트 핸들러에서의 this프로퍼티 방식에서 이벤트 핸들러는 method이므로 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.Button    addEventListener 방식에서의 thisaddEventListener에서 지정한 이벤트 핸들러는 콜백 함수지만 이벤트 핸들러 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.But..
[Javascript] Event의 종류 이벤트(Event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때 혹은 웹 페이지가 로드되었을 때와 같은 것인데 이는 DOM 요소와 관련이 있다. 이벤트가 발생하면 그에 맞는 반응을 해야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되는데, 해당 함수는 이벤트가 발생하기 전까지는 실행되지 않다가 이벤트 발생 시 비로소 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.     자바스크립트 이벤트의 종류  UI Event Event Descriptionload웹 페이지나 스크립트의 로드가 완료되엇을 때unload웹 페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재..
[Javascript] Array 함수 배열 생성하기1. 배열 리터럴const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]  2. 배열 생성자const arr1 = new Array(1, 2, 3);console.log(arr1); // [1, 2, 3]const arr2 = new Array(10); // 인수를 하나만 넘겨줄 경우 그 인수가 배열의 길이arr2.length; // 20     Array 함수🔑로 표시한 함수는 원본 배열을 변경시킨다.🔒로 표시한 함수는 원본 배열을 변경시키지 않는다.    Array.isArray(arg) 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다.   Array.from() ES6에서 새롭게 도입된 함수로 특정 객체를 변환하여 새로운 배열을 생성한다. 변..
[Javascript] Object 객체 함수 자바스크립트에서 모든 객체들은 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 함수를 상속 받는다. 본 포스트에서는 대표적이면서도 자주 사용되는 객체 함수들을 소개해 본다.  Object.create()Object.create(proto[, propertiesObject]) 주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성한다.   Object.assign()하나 이상의 원본 객체들로부터 모든 열거 가능한 속성들을 대상 객체로 복사한다.let user = { name: 'Captain America', age: 100}// 객체주소 참조 값이 복사되므로 서로 공유됨. 진정한 복사 Xlet cloneUser = user; // 빈 객체는 ..
[Javascript] for ... in 자바스크립트에서 객체는 데이터를 구조화하고 저장하는 데 사용되는 중요한 요소다. 객체는 여러 가지 프로퍼티를 포함하며 각 프로퍼티는 특정한 정보나 기능을 나타낸다. 그러므로 객체의 프로퍼티를 순회하고 데이터를 추출하거나 조작하는 것은 프로그래밍에서 꽤 자주 이루어지는 작업이라고 할 수 있는데 이러한 일을 수행하기 위해 for ... in은 유용한 도구로 활용된다.  for ... in의 기본 문법은 아래와 같다. 아래의 예에서 variable은 각 프로퍼티의 이름을 저장할 변수를, object는 순회할 객체를 의미한다. for (variable in object) { // 실행할 코드}   for ... in을 사용하여 객체의 프로퍼티를 순회할 때, 각 회차마다 변수에는 해당 프로퍼티의 이름이 할당..

728x90
반응형