본문 바로가기

728x90

Javascript

(129)

[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을 사용하여 객체의 프로퍼티를 순회할 때, 각 회차마다 변수에는 해당 프로퍼티의 이름이 할당..

[Javascript] length 속성의 이해 자바스크립트에서 length 속성은 다음의 세 가지 용도로 사용된다. 1. 배열의 길이 반환2. 문자열의 길이 반환3. 유사 배열 객체의 길이 반환 1. 배열의 길이 반환 배열에서 length 속성은 배열에 포함된 요소의 개수를 반환한다.const fruits = ["apple", "orange", "banana"];console.log(fruits.length); // 3const emptyArr = [];console.log(emptyArr.length); // 0 한 가지 특징적인 점은 배열에서의 length 속성은 아래 예시와 같이 수정이 가능하다는 것이다. 2. 문자열의 길이 반환 문자열에서의 length 속성은 문자열에 포함된 문자의 개수를 반환한다.const greeting = "..

[Javascript] for ... of for ... of문은 iterable 객체를 순회하는 반복문이다. ECMAScript 2015(ES6)부터 도입된 자바스크립트의 반복문 중 하나로, DOM 컬렉션 객체의 각 요소를 반복하여 작업하는 데 용이한 방법을 제공한다. cf) DOM 컬렉션 객체인 HTMLCollection과 NodeList 모두 유사 배열 객체이면서 이터러블 객체다. for ... of문은 iterable 객체의 순회를 위해 고안된 것으로 이를 사용하기 위해서는 iterable 객체에 대한 이해가 필요하다. 이터러블 프로토콜 ES6 이전에는 순회 가능한 객체에 대해 통일된 규약이 없었다. 예를 들면 배열, 문자열, 유사 배열, DOM 컬렉션 등은 통일된 규약이 아닌 나름대로의 데이터 구조를 가지고 for문과 for ... in..

[Javascript] computed property 문법(객체의 key를 변수로 접근하기) 과거, 자바스크립트에서는 객체를 만들 때 정해진 문자열 이름의 속성명을 사용해 왔다. 하지만 ES6 이후로는 computed property를 사용하여 객체를 선언하는 순간 변수 또는 함수를 활용하여 동적인 프로퍼티명을 할당할 수 있게 되었다. 즉, computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법인 것이다. let kk = "id";let obj = { name : "super", [kk] : 123 // computed property}let mm = "rank";obj[mm] = '#1'; console.log(obj) // {name: "super", id: 123, rank: "#1"} 속성이 추가됨 변수를 ..

이전 1 2 3 4 5 ··· 17 다음

728x90

티스토리툴바