본문 바로가기

Frontend/JavaScript55

JavaScript: Date 객체에 대해서 Data 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담고있다. Date 객체를 활용하면 현재 날짜를 출력 및 현재까지의 시간 측정 등의 여러가지로 활용할 수 있다.new Date()새로운 Date 객체를 만들어서 인스메서드를 사용할 수 있다.날짜 정보를 가져오는 함수설명날짜 정보를 수정하는 함수getFullYear()연도 정보setFullYear()getMonth()월 정보setMonth()getDate()일 정보setDate()getDay()요일 정보(일:0~토:6) getHours()시 정보setHours()getMinutes()분 정보setMinutes()getSeconds()초 정보setSeconds()getMillisecond()밀리초 정.. 2024. 7. 31.
JavaScript : DOM 요소의 높이 / 너비를 알아보자(client / offset / scroll / getBoundingClientRect()) 웹페이지, 또는 요소의 높이 / 너비 값에 대한 정보를 얻는 속성에 대해 소개해보고자 한다. 우선 client, offset, scroll에 대해 알아보자clientelement.clientWidth | element.clientHeight | element.clientLeft | element.clientTop해당 요소의 패딩을 포함한 크기를 나타낸다. clientWidth는 요소의 패딩을 포함한 너비, clientHeight는 요소의 패딩을 포함한 높이, clientLeft와 clientTop은 border기준 가장 바깥 끝부분으로부터 해당 요소가 얼마나 떨어져 있는지에 대한 정보를 제공한다.  offsetelement.offsetWidth | element.offsetHeight | element... 2024. 7. 30.
JavaScript의 class를 사용해보자 클래스(Class)원래 JavaScript에서는 생성자 함수라는 방식을 통해서 객체를 생성했었다. 생성자 함수의 경우 유지보수나 상속에 어려움이 있었다. 이러한 점을 개선하기 위해 ECMA2015부터 class 개념이 등장한다. class의 경우에는 함수선언식과 다르게 호이스팅이 되지 않아 클래스를 반드시 정의한 후에 사용할 수 있다. class 클래스이름 {   멤버변수;   메서드명(){};}let | const 인스턴스이름 = new 클래스이름(); Propertyclass내에서는 property(객체가 지닌 속성 / 변수 등)를 설정하는 것이 가능하다.  class내에 직접 선언하거나, 메서드 내에서 this를 통해 property를 바인딩하는 방법이 있다. class내에서는 글로벌 함수로의 th.. 2024. 7. 30.
JavaScript 프로토타입(prototype)과 생성자 함수 JavaScript는 흔히 프로토타입 기반 언어라고 불린다. 프로토타입이란 객체 간의 상속을 구현하기 위해 사용된다. 부모 객체 역할을 하는 객체로부터 메서드와 속성들을 상속받기 위해 프로토타입 객체를 갖게 된다. 더보기  기본형과 참조형을 선언하고 console.dir()을 사용하여 요소를 출력하면 위와 같이 참조형의 경우에만 프로토타입을 갖는 것을 알 수 있다. 기본형의 경우에는 상속받을 메서드와 속성이 없기 때문에 프로토타입을 가지고 있지 않는다. 모든 참조형의 경우 프로토타입을 갖고 있으며, 상속되는 속성과 메서드들이 객체의 생성자의 prototype에 정의되어 있다. 참조형의 프로토타입은 최종적으로 Object이다.  프로토타입 프로퍼티(Prototype) 프로토타입 프로퍼티란 Object.. 2024. 7. 30.
JavaScript 콜백함수란? 콜백 함수는 전달인자로 다른 함수에 전달되는 함수를 뜻한다.  함수의 파라미터로 다른 함수를 받아서 내부에서 그 함수를 호출할 수 있다. function 변수명(콜백함수명) { 콜백함수명(); }자바스크립트의 경우 코드를 위에서 아래로 순차적으로 시행하지만, 종종 순차적으로 실행되지 않고 코드의 실행이 끝나기 전에 다음 코드로 넘어가는 일이 발생한다. 이것을 비동기처리라고 하는데, 콜백함수의 경우 주로 이 비동기처리에 사용된다. 예를 들어 대표적인 비동기 함수인 setTimeout()경우 코드의 실행이 끝날 때까지 기다리지 않고 바로 다음 코드로 넘어간다. 아래 예제의 경우 변수를 선언하고, 3초뒤에 변수에 증감연산자를 시행하는 setTimeout()을 설정하고 이후 변수를 console.log로 호출하.. 2024. 7. 29.
JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 sort().sort(비교함수)sort() 메서드는 배열의 요소를 정렬하여 배열을 반환한다. 비교함수를 작성하지 않으면 기본 정렬 순서는 문자열의 유니코드를 따른다. localeCompare()참조문자열.localeCompare(비교문자열);localeCompare() 메서드는 참조 문자열이 지정된 문자열 앞 혹은 뒤에 오는지, 동일한 문자열인지를 나타내는 수치를 반환한다. 비교문자열 전에 참조문자열이 오면 음수, 비교문자열 뒤에 참조문자열이 오면 양수, 동등한 경우 0을 반환한다.  sort와 localeCompare 사용한 테이블 정렬아래 예시에서 오름차순이 아니라 내림차순으로 설정하고 싶다면, b를 참조문자열, a를 비교문자열로 설정하면 된다.See the Pen Untitled by cod.. 2024. 7. 29.

티스토리툴바