본문 바로가기

Frontend145

JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 HTML에서 사용자 지정 데이터 특성 (data-*) HTML5부터 추가된 내용으로 HTML 태그 내에 'data-'로 시작하는 속성을 설정해서, 사용자 지정 데이터 특성이라는 특정 클래스를 형성할 수 있다. 임의의 데이터를 스크립트로 HTML와 DOM 사이에서 교환할 수 있다. data-속성명 : "속성값" 모든 html element에서 사용이 가능하며, 모든 문자열은 속성의 값이 될 수 있다.  아래 예시처럼 태그에 data-속성명을 통해서 값을 저장할 수 있고, 해당 값의 경우에는 DOM이 생성될 때 "data-"로 시작하는 속성들을 하나로 모아서 "dataset"으로 따로 모아서 관리하게 된다. JavaScript에서는 속성명을 camelCase로 변환한다. bg-color가 bgCo.. 2024. 8. 5.
JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 구조분해할당이란 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 표현식을 얘기한다. 객체나 배열에서 데이터 전체가 아닌 일부분만 필요한 경우가 생기는데, 이럴 때 일부분만 '분해'할 수 있도록 하는 표현식이다. Array 구조분해할당let [item1, item2=default, ..., rest] = array구조분해할당이 나오기 이전에는 일부분의 데이터를 추출하기 위하여 배열의 index를 사용해 값을 추출하여 사용하거나, 변수를 교환하기 위해서는 임시 변수가 필요했었다. 구조분해할당을 통해서 이러한 점들을 간편하게 할 수 있게 되었다.array의 첫번째, 두번째 요소는 각각 item1과 item2에 저장되고 array의 2번째 요소가 값이 없을 경우 default param.. 2024. 8. 5.
JavaScript : Array관련 내장함수 이전에 배열의 제어에 대해서 공부했었다. 이 기존 Array 객체에서 ES6 버전에서 추가된 함수들에 대해 다뤄보고자 한다.함수설명filter(함수)주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다.find(함수)주어진 요구조건을 만족하는  첫 번째 요소를 반환한다. 없으면 undefinedfindIndex(함수)주어진 요구조건을 만족하는 배열의 첫번째 요소에 대한 인덱스를 반환한다. 없으면 -1forEach(함수)배열의 각각 요소를 순회하며 함수를 호출한다.keys()length의 속성을 읽은 다음 0 ~ length-1의 정수를 Array Iterator 을 반환한다.map(함수)배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다.re.. 2024. 8. 4.
JavaScript 내장함수 : String관련 내장함수 String 객체는 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 변수 또는 객체 프로퍼티가 문자열 값을 가지고 있으면 별도의 생성 없이 String 객체의 프로퍼티와 메서드를 사용할 수 있다.  메서드설명charAt()지정한 위치의 문자가 무엇인지 알 수 있다.codePointAt()지정한 위치의 문자를 유니코드로 변환한다.fromCodePoint()유니코드를 문자로 변환한다.indexOf()지정한 문자열의 첫 번째 인덱스 위치를 알아낸다.lastIndexOf()지정한 문자열의 마지막 인덱스 위치를 알아낸다slice()매개변수에 맞게 문자열을 추출한다. 첫번째 인수로 전달한 인덱스에 해당하는 문자부터 두번째 인수에 전달된 인덱스에 해당하는 문자 이전까지의 문자를 반환한다.substring()r.. 2024. 8. 4.
JavaScript 내장함수 : 숫자 관련 내장함수 숫자 확인 함수함수명설명isFinite()해당하는 값이 유한한 값인지 확인한다. true - 유한한 값 / false - 무한한 값isNaN()해당하는 값이 NaN(Not a Number)인지 확인한다. Number.isInteger() 해당하는 값이 정수인지 확인한다. 숫자 변환 함수함수명설명parseInt(string, 진법)string을 진법에 맞게 숫자로 변환시킨다. (진법: 2, 8, 10, 16)parseFloat(string)string을 유리수로 바꿔준다. 진수리터럴진수리터럴설명0b | 0B2진수 표기법0o | 0O8진수 표기법 Math 관련 함수 및 프로퍼티Math 관련 함수함수명설명Math.abs()절대값을 반환한다.Math.round()소수점 이하를 반올림한 정수를 반환한다. Math.. 2024. 8. 4.
JavaScript 내장함수 : 인코딩 / 디코딩 함수 인코딩은 문자를 컴퓨터에 저장 또는 통신에 사용할 목적으로 부호화하는 것이고, 그 반대가 디코딩이다. URI의 경우 전세계의 컴퓨터가 동일한 주소를 입력하면 동일한 페이지로 이동해야하는데, 한국어판 OS가 아닌 컴퓨터에서는 한국어가 작성된 url을 정상적으로 입출력하는 것이 불가능하다. 이 문제를 인코딩을 통해 모든 컴퓨터가 처리할 수 있도록 변경한다. 함수명설명escape()영문알파벳, 숫자, 일부특수문자를 제외한 문자만 인코딩*일부특수문자: @, *, -, _, +, ., /unescape()영문알파벳, 숫자, 일부특수문자를 제외한 문자만 디코딩encodeURI(uri)URL에 사용되는 일부특수문자를 제외한 문자만 인코딩*일부특수문자: :, ;, /, =, ?, & decodeURI(encodedUR.. 2024. 8. 4.

티스토리툴바