1. JavaScript의 진수 변환
변환 유형 | 코드 예제 | 결과 |
2진수 → 10진수 | parseInt("10000000", 2) | 128 |
16진수 → 10진수 | parseInt("80", 16) | 128 |
10진수 → 2진수 | (128).toString(2) | "10000000" |
10진수 → 16진수 | (128).toString(16) | "80" |
2진수 → 16진수 | parseInt("10000000", 2).toString(16) | "80" |
16진수 → 2진수 | parseInt("80", 16).toString(2) | "10000000" |
10진수 -> 다른 진수로 변환 (toString() 활용)
let num = 128;
// 10 -> 2 (2진수 변환)
let number2 = num.toString(2);
console.log(number2); // "10000000"
// 10 -> 8 (8진수 변환)
let number8 = num.toString(8);
console.log(number8); // "200"
// 10 -> 16 (16진수 변환)
let number16 = num.toString(16);
console.log(`0x${number16}`); // "0x80"
2진수 → 10진수 ( parseInt(문자열, 기수) )
let binary = "10000000"; // 2진수
let decimal = parseInt(binary, 2); // 2진수를 10진수로 변환
console.log(decimal); // 128
16진수 → 10진수
let hex = "80"; // 16진수 (0x 없이)
let decimal = parseInt(hex, 16); // 16진수를 10진수로 변환
console.log(decimal); // 128
2진수 ↔ 16진수
: 2진수 → 10진수 → 16진수 순서로 변환
let binary = "10000000";
let decimal = parseInt(binary, 2); // 2진수를 10진수로 변환
let hex = decimal.toString(16); // 10진수를 16진수로 변환
console.log(hex); // "80"
16진수 → 2진수
let hex = "80";
let decimal = parseInt(hex, 16); // 16진수를 10진수로 변환
let binary = decimal.toString(2); // 10진수를 2진수로 변환
console.log(binary); // "10000000"
2. onchange 이벤트 처리
<select id="select" onchange="choice()">
<option value="coffee">coffee</option>
<option value="tea">tea</option>
<option value="milk">milk</option>
</select>
<button type="button" onclick="selectClick()">선택</button>
: onchange="choice()"
→ 사용자가 옵션을 변경할 때 자동으로 choice() 함수가 실행
선택된 값 가져오기 (.value 활용)
function selectClick() {
let drink = document.getElementById("select").value;
console.log(drink);
}
: <select> 요소의 value 속성을 가져와 변수 drink에 저장하고, 이를 console.log()로 출력
값이 변경될 때 자동 실행 (onchange 이벤트)
function choice() {
let drink = document.getElementById("select").value;
console.log(drink);
}
: 사용자가 드롭다운 값을 변경하면 choice() 함수가 실행되어 자동으로 선택된 값이 출력
'Front > JavaScript' 카테고리의 다른 글
JavaScript) 내비게이션과 HTML 페이지 이동 (0) | 2025.02.23 |
---|---|
JavaScript) 문자열 다루기 : 길이 측정, 특정 문자 검색, 자르기, 비교 등 (0) | 2025.02.21 |
JavaScript) onclick 사용 방법 : ES5 방식, ES6 방식, 화살표 함수 (0) | 2025.02.21 |
JavaScript) 날짜 및 시간 다루기 (Date 객체 활용) (0) | 2025.02.20 |
JavaScript) 동적으로 HTML 태그 생성하기 (0) | 2025.02.20 |