Front/JavaScript

JavaScript) 10진수 변환 및 onchange 이벤트 처리

pogun 2025. 2. 21. 01:02

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() 함수가 실행되어 자동으로 선택된 값이 출력