본문 바로가기

전체보기209

JavaScript : DOM의 키보드 이벤트에 대해서 키보드 이벤트 사용자가 키보드를 누르거나 뗄 데 발생하는 이벤트다. keydown키보드의 키를 누를 때 발생하는 이벤트로 키를 계속 누르고 있으면 이벤트가 반복적으로 발생한다.keyup키보드의 키를 뗄 때 발생하는 이벤트다.keypress키보드의 키를 누르고 있을 때 발생하는 이벤트다. Shift, Ctrl, Alt, Meta와 같은 특수키는 이벤트가 발생하지 않는다. 키보드 이벤트의 속성속성설명type이벤트의 종류target 이벤트가 발생한 요소key이벤트가 발생한 키의 값code이벤트가 발생한 키의 물리적인 위치keyCode이벤트가 발생한 키의 숫자 코드altKey 이벤트가 발생할 때 Alt 키가 눌려있는지 여부ctrlKey 이벤트가 발생할 때 Ctrl 키가 눌려있는지 여부shiftKey이벤트가 발생.. 2024. 8. 12.
JavaScript : 비동기를 처리하는 방법 (Promise) Promise콜백함수에대 해 설명하면서 비동기 처리에 사용이 된다고 한 적이 있다. 하지만 콜백함수의 경우에는 콜백함수의 깊이가 깊어질 수록 난독을 발생시키고 코드관리가 어려워진다. 이러한 단점을 보완하기 위해서 ES6부터 Promise를 제공하게 되었다.  new Promise(function(resolve, reject){ 코드 });promise 클래스 선언을 하고, 클래스 선언 시에 콜백 함수를 인자로 가지게 되는데 해당 콜백함수에는 매개변수로 resolve와 reject란 매개변수를 갖고 있다. 코드 내에 콜백 함수 인자 resolve를 시행하면, then()을 이용하여 처리 결과값을 받을 수 있고, reject를 시행하면 실패상태가 되며 처리 결과를 then() 혹은 catch()로 받을 수 .. 2024. 8. 11.
JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 Geolocation API는 위도와 경도같은 현재 위치 정보를 검색하는 API로, 이 기능을 사용하기 위해서는 반드시 개인정보의 사용 허가가 필요하다. Geolocation API는 window.navigator.geolocation 객체를 통해 사용할 수 있다. navigator.geolocation.getCurrentPosition(성공시 함수, 에러시 함수 , 옵션);사용자의 현재 위치를 얻을 수 있다. 성공 시 함수는 위치 정보를 얻는 것을 성공했을 때 GeolocationPosition 객체를 매개변수로 받는 콜백함수를 이야기하며, 에러시 함수는 위치 정보를 얻는 것을 실패했을 때 GeolocationPositionError 객체를 매개 변수로 받는 콜백함수이다.개인정보의 사용 허가 알람이 뜨.. 2024. 8. 11.
JavaScript 내장함수 : Object관련 내장함수 Object는 참조형 타입을 생성할 때  객체 간의 상속에서 가장 최상위에 위치하는 객체이다. 참조형 타입의 경우 Object을 상속받아 Object의 다양한 속성들을 사용할 수 있다. 속성설명객체.hasOwnProperty(속성)객체의 속성이 상속받지 않은 속성인지 알려준다, 자신의 속성이면 true반환객체.isPrototypeOf(대상)객체가 대상의 조상인지 알려준다, 조상이면 true반환Object.getPrototypeOf(객체)객체의 prototype을 조회할 수 있다.Object.setPrototypeOf(객체, 상위 객체)객체의 prototype을 설정할 수 있다. 객체 instanceof 생성자객체가 특정 생성자의 자식인지 조회할 수 있다.객체.propertyIsEnumerable(속성)객.. 2024. 8. 10.
JavaScript : Symbol에 대해서 알아보자 Symbol은 생성자가 기본형 값을 반환하는 내장 객체이다. Symbol의 값은 변경 불가능한 기본값(primitive value)이며 고유한 값이기 때문에 충돌하지 않도록 할 때 많이 쓰인다. Symbol();Symbol의 경우 매번 호출할 때마다 새로운 고유한 값을 생성하기 때문에, 객체의 속성 key로 사용하여 충돌하지 않게 하는 등의 역할을 한다.   Symbol의 경우 숫자로 변환하거나 문자열을 추가하는 등의 값을 변경할 수 없으며 for~in 문에서 Symbol key를 가지고 있는 경우 열거되지 않는다. 2024. 8. 6.
JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 HTML에서 사용자 지정 데이터 특성 (data-*) HTML5부터 추가된 내용으로 HTML 태그 내에 'data-'로 시작하는 속성을 설정해서, 사용자 지정 데이터 특성이라는 특정 클래스를 형성할 수 있다. 임의의 데이터를 스크립트로 HTML와 DOM 사이에서 교환할 수 있다. data-속성명 : "속성값" 모든 html element에서 사용이 가능하며, 모든 문자열은 속성의 값이 될 수 있다.  아래 예시처럼 태그에 data-속성명을 통해서 값을 저장할 수 있고, 해당 값의 경우에는 DOM이 생성될 때 "data-"로 시작하는 속성들을 하나로 모아서 "dataset"으로 따로 모아서 관리하게 된다. JavaScript에서는 속성명을 camelCase로 변환한다. bg-color가 bgCo.. 2024. 8. 5.

티스토리툴바