- map : 기존 배열을 기반으로, 각 요소에 어떤 작업을 수행해서 새로운 배열을 만들어 내는 함수
- map()은 원본 배열은 건드리지 않고,
- **각 요소를 변환(transform)**해서
- 같은 길이의 새로운 배열을 리턴합니다.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] ← 원본 배열은 그대로
익명함수
- 이름이 없는 함수로, 단독 사용이 불가하며 주로 생성 후 변수나 상수에 할당하거나, 다른 함수의 호출시 인자로 활용한다.
function ([매개변수 ,...]) }
[구현부]
}
화살표 함수
- 화살표 함수 ( Arrow Function ) 는 함수의 일종으로 이름이 없고, 변수나 상수에 할당하거나, 다른 함수의 호출시 인자로 활용할 수 있다.
([매개변수 ,...]) => {
[구현부]
}
매개 변수가 하나만 존재하는 경우, 매개 변수를 위한 괄호를 생략할 수 있다.
const f = (x) => {
return x ** 2 ;
}
const f = x =>{
return x **2
}
구현부가 하나의 구문으로 이루어진 경우 중괄호 ([,] )를 생략할 수 있는데, 이때 해당 구문의 실행 결과는 반환(return) 됨으로 return 키워드 또한 생략한다.
const f = (a,b) => {
return a**b
};
{ 구현부 } 부분에 구문이 하나이고 그 구문이 return 이면 생략이 가능해 밑에 처럼 작성 가능하다
const f = (a,b) => a**b
요소
window
- window 객체는 자바스크립트의 최상위 객체이면서 브라우저와 관련된 HTML 문서 및 이를 초월하는 멤버를 모두 가지고 있다.
- 전역적으로 사용할 수 있는 대상이 모두 window 객체의 멤버로 할당되어 있다.
document
- window 의 멤버로 HTML 문서 <html>부터 </html> 까지에 대한 멤버를 가지는 객체이다.
- 속성
- head : <head>태그에 대한 멤버를 가지는 객체이다.
- body : <body>태그에 대한 멤버를 가지는 객체이다.
- 함수
- createElement(x) : 태그의 종류가 x 인 가상의 요소를 만들어 반환한다.
- getElementaById(x) : html, id 속성 값으로 문자열인 x 를 가지는 요소를 선택해 반환한다. 그러한 요소가 없다면 null을 반환한다.
HTML Element
- HTML Element 는 HTML 의 모든 태그를 자바스크립트 객체로 표현하기 위한 타입니다.
- 객체속성 -> (속성은 함수와 달리 호출방법이 간단 .만 찍으면 됨 ()불필요)
- classList : 해당 요소의 html <class> 속성과 관련된 멤버를 가지고 있는 속성이다.
- add(x) : 해당 요소의 class 속성에 x 를 추가한다. 이미 있다면 중복되기 추가하지는 않으며, 공백을 추가하는 등 다른 클래스와의 분리는 자동으로 이루어진다.
- remove(x) : 해당 요소의 class 속성에서 x 를 제거한다.
- toggle(x) : 해당 요소의 class 속성에서 x 를 가지고 있다면 제거하고, 없다면 추가한다.
- contains(x) : 해당 요소의 class 속성이 x 를 가지고 있는가의 여부를 반환한다.
- dateset : 해당 요소의 사용자 지정 데이터를 가져오거나 지정하기 위한 속성이다. 오브젝트 속성 접근 연산자 ( [ ] ) 를 활용하여 해당 요소가 가지고 있는 date - * 속성의 이름으로 값에 접근할 수 있다. 단, 접근시 이름을 카멜 케이스화 하여야 함에 유의한다. ( 가령, HTML 상 그 속성 이름이 data-member-name 인 대상에 접근하고자 한다면 dataset['memberName'] 으로 접근 )
- innerHTML : 해당 요소의 내부HTML 코드인 문자열이다.
- innerText : 해당 요소의 내부 텍스트 내용인 문자열이다.
- style : 속성이 부여된다.
- 해당 속성의 멤버의 명명은 실제 CSS 속성을 카멜 케이스화 한 것임에 유의한다. ( 가령 , background-color 는 backgoundColo 로 사용 )
- 부여한 css 속성을 삭제하고자 한다면 해당 속성 값을 빈 문자열로 지정한다.
- classList : 해당 요소의 html <class> 속성과 관련된 멤버를 가지고 있는 속성이다.
- 객체 함수
- addEventListenner (e,f) : 호출 대상인 요소에 이벤트 'e' 가 발생하였을 때 함수 f 를 실행하기 위한 이벤트 리스너를 추가한다.
- removeEventListenner(e,f) : 호출 대상인 요소가 가지고 있는 이벤트 리스너 중 이벤트의 종류가 e 이고 함수가 f 인 이벤트 리스너를 제거한다. 여기서 제거할 함수 f 는 이벤트 리스너 추가 시 사용한 함수와 동일한 대상이어야 한다.
- append(...x) : 호출 대상인 요소의 마지막 자식이 될 수 있도록 한 개 이상의 요소 x 를 추가한다.
- prepend(...x): 호출 대상인 요소의 첫번째 자식이 될 수 있도록 한 개 이상의 요소 x 를 추가한다.
- insertAdjacentElement(p,x) :호출 대상인 요소에 대해 지정한 포지션 p에 맞게 요소 x 를 배치한다.
- beforebegin : 요소가 열리기 전 ( 요소의 선행 )
- afterbegin : 요소가 열리고 난 뒤 ( 요소의 첫번째 자식 )
- beforeend: 요소가 닫히기 전 ( 요소의 마지막 자식)
- afterend: 요소가 닫히고 난 뒤 ( 요소의 인접 후행 )
<div id="container">
<p class="text">첫 번째</p>
<p class="text">두 번째</p>
</div>
<script>
const container = document.getElementById("container");
const firstText = container.querySelector(".text");
console.log(firstText.textContent); // "첫 번째"
</script>
- querySelector(x) : 호출 대상이 되는 요소의 자식 혹은 자손이면서 css 선택자인 문자열 x를 가장 빨리 만족하는 요소 한 개를 반환한다. 그러한 요소가 없다면 null 을 반환한다.
- querySelectorAll(x): 호출 대상이 되는 요소의 자식 혹은 자손이면서 css 선택자인 문자열 x 를 만족하는 요소 전체를 인자로 가지는 유사 배열 객체 NodeList를 반환한다. 그러한 요소가 없 다면 길이가 0인 유사 배열 객체 NodeList를 반환한다.
- getAttribute(x) : 호출 대상이 되는 요소가 가지고 있는 HTML 속성 중 이름이 x 인 것의 값을 문자열로 반환한다. 그러한 속성이 없다면 null을 반환한다.
- setAttribute(n,v) : 호출 대상이 되는 요소에 이름은 n 이고 값은 v 인 속성을 추가/ 지정한다. 속성 값이 없는 속성을 추가한다 하더라도, v 는 누락하여서는 안 되며 빈 문자열( ' ' )을 전달한다.
- hasAttribute(x) : 호출 대상이 되는 요소가 이름이 x인 속성을 가지고 있는 가의 여부를 반환한다.
- removeAttribute(x) : 호출 대상이 가지고 있는 속성 중 이름이 x 인 속성을 제거한다.
<button id="btn">눌러봐</button>
<script>
const btn = document.getElementById("btn");
function handleClick() {
alert("버튼 클릭됨!");
}
btn.addEventListener("click", handleClick);
</script>- 이벤트
- click : 클릭했을때의 이벤트(마우드 다운보다 살짝 늦음)
- mousedown : 마우스 버튼을 눌렀을때의 이벤트 (누르자마자)
- mouseup :마우스 버튼을 뗐을때의 이벤트
- mouseenter: 마우스 커서가 해당 요소의 밖에 있다가 내부로 진입했을 때의 이벤트
- mouseleave : 마우스 커서가 해당 요소의 안에 있다가 외부로 빠져 나갔을때의 이벤트.
- mousemove : 마우스 커서가 해당 요소의 위에서 움직일때의 이벤트
- wheel : 마우스 휠이돌아갔을 때의 이벤트
- focusin : 포커스를 가질 수 있는 요소(div 는 안됨 버튼, 인풋 등 가질 수 있는 or tabindex를 주면 가질 수 있음 div 라도)가 포커스를 가지게 되었을 때의 이벤트
- focusout : 포커스를 가질수 있는 요소가 포커스를 잃었을 때의 이벤트.
- keydown : 포커스를 가질 수 있는 요소가 포커스를 가지고 있고 키보드의 키가 눌렸을때의 이벤트
- keyup : 포커스를 가질 수 있는 요소가 포커스를 가지고 있고 키보드의 키가 떼졌을때의 이벤트
- change : input, select 혹은 textarea 태그의 내용이나 상태(체크 등) 사용자에 의해 변경되었을때 발생하는 이벤트
- input : input, select 혹은 textarea 태그의 내용이나 상태(체크 등) 사용자에 의해 변경되었을때 발생하는 이벤트
- 기타 함수
- alert(x) : 문자열인 x 를 내용으로 가지는 메세지를 출력한다.
- confirm(x) : 문자열인 x 를 내용을 가지는 메세지를 출력한다. 단 확인과 취소버튼을 가지며, 확인( 긍정 ) 버튼을 클릭할 경우 해당 함수의 호출 결과로 참 (true) 취소(부정)버튼을 클릭할 경우 해당 함수의 호출 결과롸 거짓(false)이 반환된다.
- isNan(x) : 숫자인 x 가 NaN 인가의 여부를 반환한다.(NaN 간의 동등, 일치 연산 ( NaN === NaN )은 false 를 반환함으로 isNan을 사용한다.
- setInterval(f,m) : 숫자인 m 밀리초마다 함수 f 를 실행한다. 해당 인터벌의 식별자인 숫자를 호출 결과로 반환한다.
- setTimeout(f,m) : 숫자인 m 밀리초 후에 함수 f 를 1회 실행한다. 해당 타임아웃의 식별자인 숫자를 호출 결과로 반환한다.
-
더보기const intervalId = setInterval(() => {
console.log("1초마다 실행됩니다"); // 여기까지가 f 함수
}, 1000); //m 몇초마다 실행할지 숫자
const timeoutId = setTimeout(() => {
console.log("3초 후에 한 번 실행됩니다");
}, 3000);
-
- crearInterval(x) : setInterval 함수 호출 결과로 반환된 식별자를 x로 전달해 반복을 해제한다.
- creatTimeout(x) : setTimeout 함수 호출 결과로 반환된 식별자를 x 로 전달해 예약을 해제한다.
- parseInt(s) : 문자열인 s 를 정수인 숫자로 변환해 반환한다. 인식되는 소수점은 모두버려지며, 숫자로 변환할 수 없을 때에는 NaN을 반환한다.
String
- String은 자바스크립트에서 문자열을 표현하기 위한 타입이다.
- 객체 속성
- length : 문자열의 길이
- 객체 메서드
- at(i) : 문자열이 가지고 있는 인덱스가 x 인 문자열을 반환한다. // const string = 'hello' string.at(1) = e
- concat(x) : 호출 대상인 문자열과 문자열인 인자 x 를 이어붙인 새로운 문자열을 반환한다. a.concat(b)
- include(x) : 호출 대상인 문자열의 내용이 문자열인 인자 x 를 포함하는가의 여부를 반환한다. 'hello'.inclued('hell') // 물론 변수도 사용 가능
- startsWith(x) : 호출 대상인 문자열이 문자열인 인자 x 로 시작하는가의 여부를 반환한다.
- endsWith(x) : 호출 대상인 문자열이 문자열인 인자 x 로 끝나는가의 여부를 반환한다.
- padEnd(n,s) : 호출 대상인 문자열의 길이가 n 자 이하일때 n 자기가 될 수 있도록 부족한 만큼 문자열 s를 문자열 끝에 추가한다. // 시간을 표시할때 9 -> 09로 문자열로
- padStart(n,s) : 호출 대상인 문자열의 길이가 n 자 이하일때 n 자기가 될 수 있도록 부족한 만큼 문자열 s를 문자열 앞에 추가한다.
-
더보기[9,37,6].map((v) => v + '') // v + '' = > 문자열로 변환하는 식 , .map은 새로운 배열로 변환( 기존 숫자 배열은 파괴 x )
[9,37,6].map((v) => v + '') = > v.padStart(2,0) 자릿수가 2자리가 아니면 앞에 0을 붙여라 - repeat(t) : 호출 대상인 문자열을 인자 t 번 만큼 반복할 문자열을 반환한다.
- replaceAll(f,t) : 호출 대상인 문자열에서 문자열 혹은 정규표현식인 f 를 찾아 문자열인 t 로 치환한다.
-
더보기const str = "apple banana apple";
const result = str.replaceAll("apple", "orange");
console.log(result); // "orange banana orange" -
더보기const str = "a1 b2 c3";
const result = str.replaceAll(/\d/g, "*");
console.log(result); // "a* b* c*"
/\d/g는 숫자 하나를 의미하는 정규표현식이고 g는 전체(global) 검색을 의미해요
🧠1. str = "a1 b2 c3"
- 이건 그냥 문자열이에요.
- 안에 숫자들이 포함되어 있죠: 1, 2, 3
🧠 2. /\d/g — 정규표현식
- /.../는 정규표현식(패턴)을 나타내는 문법
- \d는 숫자 하나를 의미해요 (0~9)
- g는 global, 즉 전체 문자열에서 모든 숫자를 찾으라는 뜻
🧠 3. replaceAll(/\d/g, "*")
- 문자열에서 모든 숫자를 찾아서 "*"로 바꿔라!
- "a1 b2 c3" → "a* b* c*"
- slice(...)
- slice() : 호출 대상인 문자열이 가지고 있는 내용을 그대로 가지는 문자열을 복사해 반환한다.
- slice(f): 호출 대상인 문자열이 가지고 있는 내용 중 인덱스가 f 이상인 문자열을 가지는 문자열을 복사해 반환한다.
- slice(f,t) : 호출 대상인 문자열이 가지고 있는 내용 중 인덱스가 f이상 t 미만인 문자열을 내용으로 가지는 문자열을 복사해 반환한다.
- subString(f,t) : 호출 대상인 문자열이 가지고 있는 내용 중 인덱스가 f 이상 t 미만인 문자열을 내용으로 가지는 문자열을 복사해 반환한다. ( 섭스트링은 오류를 알아서 치환해서 값을 찾아줌 ) // 내용찾는건 섭스트링 사용 권장.
- toLowerCase() : 호출 대상인 문자열이 가지고 있는 내용 중 인식 가능한 라틴 문자를 소문자화한 새로운 문자열을 반환한다.
- toUpperCase() : 호출 대상인 문자열이 가지고 있는 내용 중 인식 가능한 라틴 문자를 대문자화한 새로운 문자열을 반환한다.
- trim() : 호출 대상인 문자열이 가지고 있는 내용 중 시작과 끝의 연속되는 공백을 모두 제거해 반환한다.
- trimStart() : 호출 대상인 문자열이 가지고 있는 내용 중 시작점의 연속되는 공백을 모두 제거해 반환한다.
- trimEnd() : 호출 대상인 문자열이 가지고 있는 내용 중 끝점의 연속되는 공백을 모두 제거해 반환한다.
-
더보기let input = " 홍길동 ";
let clean = input.trim(); // "홍길동"
let leftOnly = input.trimStart(); // "홍길동 "
let rightOnly = input.trimEnd(); // " 홍길동"
Math
- Math 클래스는 주로 수학과 관련된 멤버를 포함하는 유틸리티 클래스이다
- 정적 속성
- E : 오일러 상수. 약 2.718
- LN2 : 2의 자연로그. 약 0.693
- LOG2E : 밑이 2인 로그 E 약 1.443
- LOG10E : 밑이 10인 로그 E 약 0.434
- PI : 원주율 약 3.141
- SQRT1_2 : 0/5( 2분의 1) 의 제곱근 약 0.707
- SQRT2 : 2의 제곱근 약 1.414
- 정적함수
- abs(x) : 숫자인 x의 절댓값을 반환한다.
- acos(x) : 숫자인 x 의 아크코사인 값을 반환한다.
- acosh(x) : 숫자인 x 의 아크사인 값을 반환한다.
- asinh(x) : 숫자인 x 의 쌍곡 아크사인 값을 반환한다.
- atanh(x) : 숫자인 x 의 쌍곡 아크틴젠트 값을 반환한다.
- atan2(x,y) : 인수 몫의 아크틴젠트 값을반환한다.
- cbrt(x) : 숫자인 x 의 세제곱근을 반환한다. ( 큐브루트 )
-
더보기Math.cbrt(8); // 2 → 2 × 2 × 2 = 8
Math.cbrt(27); // 3 → 3 × 3 × 3 = 27
Math.cbrt(-64); // -4 → -4 × -4 × -4 = -64
Math.cbrt(0); // 0 - sqrt(x) : 숫자인 x 의 제곱근을 반환한다
- ceil(x) : 숫자인 x 를 정수부까지 올림하여 반환한다.
- floor(x) : 숫자인 x 를 정수부까지 내림하여 반환한다.
- tranc (x) : 숫자인 x 의 소수부를 버리고 반환한다.
-
더보기Math.floor(3.9); // 3
Math.trunc(3.9); // 3
------음수일때 값이 달라지는 차이가 있다-------
Math.floor(-3.9); // -4
Math.trunc(-3.9); // -3 - log(x) : 숫자인x의 자연로그 값을 반환한다.
- log10(x) : 숫자인 x의 밑이 10인 로그 값을 반환한다.
- log2(x) : 숫자인 x 의 밑이 2인 로그 값을 반환한다.
- Math.max(...n) : 숫자를 인자로 가지는 가변인자 n중 가장 큰 값을 반환한다.
- Math.min(...n) : 숫자를 인자로 가지는 가변인자 n중 가장 큰 작은 값을 반환한다.
- Math.sigh(x) : 숫자인 x 의 부호를 반환한다. 양수인 경우 1 , 음수인 경우 -1 , 0인 경우 0 그 외의 경우 NaN을 반환한다.
Number
- Number 클래스는 자바스크립스의 숫자 타입이기도 하고, 숫자와 관련된 유틸리비 멤버를 제공하기도 한다.
- 정적 속성
- MAX_SAFE_INTEGER : 자바스크립트에서 표현 가능한 안전한 최대 정수()
- MIN_SAFE_INTEGER : 자바스크립트에서 표현 가능한 안전한 최소 정수 ()
- MAX_VALUE : 자바스크립트에서 표현 가능한 가장 큰 수
- MIN_VALUE : 자바스크립트에서 표현 가능한 가장 작은 양수
- NaN : 숫자가 아닌 값(Not a Number)
- POSTIVE_INFINIITY : 양의 무한대
- NEGATIVE_INFINITIY : 음의 무한대
- 정적 함수
- isNaN(x) : 전달된 값 x 가 NaN 인가의 여부를 반환한다. (window.isnan 함수와 다름)
- isFinite(x) : 전달된 숫자 x가 유한한지의 여부를 반환한다. (window.isFinite 함수와 다름)
- isInteger(x) : 전달된 숫자 x 가 정수인지의 여부를 반환한다.
- isSafeInteger(x) : 전달된 숫자 x 가 안전한 정수 (Number.MIN_SAFE_INTEGER 이상이고 Number.MAX_SAFE_INTEGER 이하 ) 인지의 여부를 반환한다.
- parseFloat(x) : 전달된 값 x를 실수로 변환하여 반환한다. 변환할 수 없을 경우 NaN을 반환한다.( window.parseFloat과 동일한 함수)
- parseInt(...) :
- parseInt(x) : 전달된 값 x를 정수로 변환해 반환한다. 변환할 수 없을 경우 NaN을 반환한다. ( window.parseInt과 동일한 함수)
- parseInt(x,r) : 전달된 값x 를 r 진법으로 인식하여 10진수인 정수로 변환해 반환한다. 변환할 수 없을 경우 NaN을 반환한다(window.parseInt과 동일한 함수)
- 객체 함수
- toFixed(d) : 전달된 자연수 d를 자리수로 가지는 고정 소수점 표기법으로 포현한 문자열을 반환한다
-
더보기let num = 3.14159;
num.toFixed(2); // "3.14"
num.toFixed(0); // "3"
num.toFixed(4); // "3.1416" (반올림됨) 주의점 자동을 반올림 함. - toLocalIsString(...)
- toLocalIsString() : 호출 대상이 가지고 있는 값을 현재 브라우저를 구동 중인 운영체제의 언어 설정에 맞게 포맷한 문자열을 반환한다.
-
더보기let num = 1234567.89;
console.log(num.toLocaleString());
// 예: "1,234,567.89" (en-US 기준)
// 예: "1.234.567,89" (de-DE 기준) - toLocalIsString(c) : 호출 대상이 가지고 있는 값을 전달 받은 로케일 코드 c 에 맞게 포맷한 문자열을 반환한다.
- toString(...)
- toString(): 호출 대상이 가지고 있는 값을 문자열로 그대로 반환한다. 별도의 조치를 취하지 않는다.
- toString(r) : 호출 대상이 가지고 있는 10진법 값을 전달 받은 자연수( 2 이상 36 이하 // 2진법 ~ 36진법까지 ) 인 r 진법의 문자열로 변환해 반환한다.
date
- date 클래스는 자바스크립트에서 날짜와 시간을 다루기 위해 사용하는 타입니다.
- 객체함수
- getFullYesr(): 호출 대상이 가지고 있는 일시의 연도를 반환한다
- getMonth(): 호출 대상이 가지고 있는 일시의 월을 0이상 11이하의 숫자로 반환한다. 이때,0을 1월이라고 한다.
- getDate():호출 대상이 가지고 있는 일시의 일을 반한한다.
- getDay(): 호출 대상이 가지고 있는 일시의 요일을 0이상 6이하의 숫자로 반환한다. 이때 0을 월요일이라고 한다.
- getHours(): 호출 대상이 가지고 있는 일시의 시를 24시제인 0이상 23 이하의 숫자로 반환한다.
- getMinutes(): 호출 대상이 가지고 있는 일시의 분을 숫자로 반환한다
- getSeconds(): 호출 대상이 가지고 있는 일시의 초를 숫자로 반환한다.
- getTime(): 호출 대상이 가지고 있는 일시를 unix 타입인 숫자로 반환한다.
localStorage
- localStorage는 자바스크립트에서 로컬 브라우저에 저장되는 소규모의 데이터에 접근하기 위해 사용하는 Storage 타입의 객체이다.
- 객체함수
- getItem(x) : 키가 x 인 문자열을 반환한다. 그러한 키를 가지는 항목이 없다면 null을 반환한다.
- setItem(x,y): 키가 x 값이 문자열 y 인 쌍을 반환한다.
- removeItem(x) : 키가 x 인 쌍을 제거한다
- clear(): 모든 키와 값 쌍을 제거한다
HTMLInputElement
- HTMLInputElement는 HTMLElement 타입을 상속 받는 input 태그를 자바스크립트 객체로 표현하기 위한 타입이다.
- 객체 속성
- disabled : 해당 요소가 비활성화되어 있는지의 여부를 가지고 오거나 지정한다.
- value : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- checked : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- focus() : 해당 요소가 포커스를 가지게 한다.
- select(): 해당 요소가 가지고 있는 텍스트인 내용을 모두 선택한다.
<input id="study" name="sometext" type="text">
<script>
const $study = document.getElementById('study')
console.log($study)
</script>
HTMLSelectElement
- HTMLSelectElement 는 HTMLElement 타입을 상속 받는 select 태그를 자바스크립트 객체로 표현하기 위한 타입이다.
- 객체 속성
- disabled : 해당 요소가 비활성화되어 있는지의 여부를 가지고 오거나 지정한다.
- value : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- checked : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- focus() : 해당 요소가 포커스를 가지게 한다.
- 객체 속성
HTMLTextAreaElement
- HTMLTextAreaElement 는 HTMLElement 타입을 상속 받는 TextArea 태그를 자바스크립트 객체로 표현하기 위한 타입이다.
- 객체 속성
- disabled : 해당 요소가 비활성화되어 있는지의 여부를 가지고 오거나 지정한다.
- value : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- checked : 해당 요소가 가지고 있는 값을 가지고 오거나 지정한다.
- focus() : 해당 요소가 포커스를 가지게 한다.
- 객체 속성
<div id="value"></div>
<script>
//$value 디브 태그의 이름.
//id="value"를 찾아서 가져옴.
const $value = document.getElementById('value')
const maxValue= 10;
const minValue= -10;
let value = 0;
// 화면에 보이는 숫자
$value.innerText = value;
$value.addEventListener('wheel', (e)=>{
if (e.deltaY < 0 && value < maxValue) {
value += 1;
console.log(e);
} else if
// 휠을 아래로 굴렸을 때
(e.deltaY > 0 && value > minValue) {
value -= 1;
console.log('휠을 아래로 굴림');
}
$value.innerText = value;
});
</script>
문제
function customRound(num,digit) {
const factor = 10 ** digit; // 입력받은 숫자만큼 거듭제곱을 한다
//digit : 2 = 10 ** 2 : 100
num *= factor;
// num : 3.141592
// num *= factor
//num *= 100 : 3.141592
num =Math.round(num) // round 는 정수만 반환
//num = 314
num/=factor
//314/100 = 3.14
return num; }
---------------------
** 은 거듭제곱을 뜻함
객체함수 - toString (r) r = 진법
let num = 255;
console.log(num.toString(36)); // "73"
----------------------------------------
255,36 진법으로 변환 방법
1.255 ÷ 36 = 7 (몫), 나머지 = 3 → "3"
2.7 ÷ 36 = 0 (몫), 나머지 = 7 → "7"
결과: "73" (앞에서부터 나머지를 이어붙임)
왜 앞에서부터 ? ->진법 변환은 항상 가장 낮은 자리수부터 나머지를 구하기 때문.
그래서 나중에 나온 나머지가 앞자리가 된다.
객체함수 vs 정적함수
- 객체가 가진 기능을 수행하는 함수
- 객체가 있어야 호출 가능
let str = "hello"; str.toUpperCase(); // "HELLO" → 문자열 객체의 함수
정적 함수란
- 클래스나 내장 객체에 직접 붙어 있는 함수
- 객체를 만들지 않아도 바로 호출 가능
Math.abs(-5); // 5 → Math 객체의 정적 함수
Number.isNaN("abc"); // false → Number 객체의 정적 함수'FRONT-END > JavaScript' 카테고리의 다른 글
| [JS] 0930 (0) | 2025.09.30 |
|---|---|
| [JS] 0929 수업 13일차 (0) | 2025.09.29 |