mouse이벤트

onmousedown : 마우스 포인터가 요소 안으로 들어올 때 (마우스 클릭 시)

onmouseup : 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)

onmouseover : 마우스 포인터가 요소 안으로 들어올 때 (마우스 올려놨을 때)

onmouseout : 마우스 포인터가 요소 밖으로 나갈 때 (마우스 뜻을 때)

 

Insert title here

 

예제

<input type="image" src="images/san0.gif" 
					onmousedown="mouseDown(this)" 
					onmouseup="mouseUp(this)"
					onmouseover="mouseOver(this)"
					onmouseout="mouseOut(this)">
					
<script type="text/javascript">
function mouseDown(obj) { // 마우스 포인터가 요소안으로 들어올 때 (마우스 클릭시)
	obj.src = "images/san1.gif";
}
function mouseUp(obj) { // 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)
	obj.src = "images/san0.gif";
}
function mouseOver(obj){ // 마우스 포인터가 요소안으로 들어올 때 (마우스 올려 놨을 때)
	obj.src = "images/san2.gif";
}
function mouseOut(obj){ // 마우스 포인터가 요소 밖으로 나갈 때 (마우스 땟을때)
	obj.src = "images/san0.gif";
}
</script>

 

설명

 input type을 img로 묶어 이벤트 발생 시마다 함수를 지정한다.

 이벤트가 발생할 경우 지정 함수로 이동하여 이미지를 바꿔준다.

Insert title here

onmouseover, onmouseout 사용예제

<a href="#" onmouseover="document.box.src='images/surprise.gif'" 
			onmouseout="document.box.src='images/box.gif'">
			<img alt="" src="images/box.gif" name="box">

 

설명

 마우스를 그림(요소) 안으로 올리면 onmouseover 이벤트가 발생하여 그림이 바뀌고

 마우스가 그림 밖으로 나가면 onmouseout 이벤트가 발생하여 원복이 된다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onload 이벤트/신문 자동 스크롤 내리기/window.scroll/setTimeout  (0) 2021.06.07
[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기  (0) 2021.06.07
[Html+JavaScript] onblur / onchange 이벤트  (0) 2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp)  (0) 2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07

onblur :  포커스를 잃었을 때 실행된다.


Insert title here 나이 : 세

예제

나이 : <input type="text" onblur="inRegNum()" size="10" maxlength="2">세<br><br>
<script type="text/javascript">
function inRegNum() {
	alert('onblur 실행됨'); // 포커스가 딴 곳으로 가면 실행됨.
}

 

설명

 포커스 영역은 text영역이고 text영역을 벗어날 때 이벤트가 발생합니다.

onchage : 포커스가 바뀌었을 때 실행된다.

 

 

예제

<select id="sel" onchange="chageVal()">
 	<option value="apple">사과</option>
 	<option value="pear">배</option>
 	<option value="banana">바나나</option>
</select>

<script type="text/javascript">
function chageVal() {
	let val = document.getElementById("sel").value;
	alert(val); // 선택한 value값이 출력된다.
}
</script>

 

설명

 포커스 영역은 option안이고, option 클릭이 바뀔 때마다 이벤트가 발생합니다.

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기  (0) 2021.06.07
[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout  (0) 2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp)  (0) 2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07

link :  이동시키는 것

앵커 태그 : href

폼 태그 : action

자바스크립트 : location.href

 

 

NewFile.jsp로 이동

 

 

a href 예제 

<a href="NewFile.jsp?name=홍길동&age=24">NewFile.jsp로 이동</a>

 

설명

name=홍길동&age=24 파라미터 값으로 '홍길동'과 '24'를 NewFile.jsp로 넘겨준다.

 

NewFile.jsp 예제

<% // 스크립트 립 : 자바의 영역, DB와 연동가능
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
out.println("이름 : " + name + "<br>");
out.println("나이 : " + age +  "<br>");
%>

 

 

설명

request.getParameter : 파라미터명으로 접근하여 데이터를 넘겨받는다.

파라미터명이 name이라면 '홍길동'을 넘겨받게 된다.

 

링크 클릭 후 실행화면

이름 :
나이 :

 

form action 예제

<form action="NewFile.jsp">
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<input type="submit" value="이동">
</form>

 

설명 

form태그는 a태그와 달리 값을 입력받을 수 있다.  form 영역에 input 태그를 묶는다. 

NewFile.jsp에 name명으로 접근하여 값을 넘겨준다.

 

Insert title here 이름 :
나이 :

 

location.href 예제

이름 : <input type="text" id="name">
<br>
나이 : <input type="text" id="age">
<br>
<button type="button" onclick="move()">이동</button>

<script type="text/javascript">
function move() {
	let name = document.getElementById("name").value;
	let age = document.getElementById("age").value;
	// 스페이스바 주의 null값 우려
	location.href ="NewFile.jsp?name="+ name +"&age="+ age; 
}	
</script>

 

설명

button  클릭 시 move() 함수로 이동하여 text의 입력값을 각 변수에 넣어준다.

a href와 비슷한 방식으로 location.href에 값을 주어 NewFile.jsp에 접근한다.

 

 

※ 이동을 눌러도 jsp파일이 없어서 실행되지 않습니다..

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout  (0) 2021.06.07
[Html+JavaScript] onblur / onchange 이벤트  (0) 2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07

 

 

라면 타이머



time selected

 

* 티스토리에서 wav파일 접근 경로를 파악하지 못하여 알람은 울리지 않습니다. ㅠㅠ

 

라면 타이머 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="" name="frm">
<div align="left">
<strong>라면 타이머</strong>
<br><br>
<!-- id와 name 같은이름 사용가능 -->
<select id="selid" name="selid">
	<option value="180">시간 선택(기본:3분)</option> 
	<option value="300">5분</option>
	<option value="180">3분</option>
	<option value="120">2분</option>
	<option value="60">1분</option>
	<option value="30">30초</option>
</select>

<input type="button" value="Timer Start" onclick="noodle()">
<br><br>

<!-- CSS 묶을 때 많이 사용한다 -->
<span id="countdown">time selected</span>
<br><br>

<button type="button" onclick="window.close()">close</button>

</div>
</form>
<script type="text/javascript">

let index = 0; // 다른 함수에서도 사용하기 위해 
let value = 0;
let time = 0;

function noodle() {
	clearInterval(time); // timer 초기화
	index = document.frm.selid.selectedIndex; // index 번호를 가져온다.
	value = parseInt(document.frm.selid.options[index].value);
	time = setInterval('noodleTimer()', 1000); // 1초마다 noodleTimer()함수 호출
}

function noodleTimer() {
	value = value - 1; // 1씩 빼나가도록 한다.
	// 1초마다 실행
	document.getElementById('countdown').innerHTML = "완료까지 <b>" + value + "</b>초 남았습니다";
	
	if(value == 0){
		clearInterval(time);
		
		let audio = new Audio('AlarmClockBell.wav');
		audio.play();
	}
}

</script>
</body>
</html>

 

함수 설명

clearInterval() : 매개변수로 변수명과 함수명을 받으며 사용 시 매개변수가 종료됩니다.(초기화)

setInterval('함수명', 시간 간격) :  일정한 시간간격으로 값을 갱신해 줍니다.

window.close() : 현재 실행창이 닫힙니다.

 

option value 접근 예시

	// id로 직접 접근해서 가져오는 방법
	let value = document.getElementById("selid").value;
    
	// name으로 접근해서 가져오는 방법
	value = document.frm.selid.value;
    
	// 네임 안에 option들을 가져온다(배열 = index로 되어 있음)
	// parseInt 시간이 흘러가도록 숫자로 변경하여야 한다.
	value = parseInt(document.frm.selid.options[index].value);

 

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onblur / onchange 이벤트  (0) 2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp)  (0) 2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06

식별자 (==Access Attribute (접근 속성))

id : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 검사용, html 파일당 한 개만 유효(중복 불가)

class : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 

name :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

 

※ 동일한 id명은 불가하지만, id=name명이 같은 경우는 허용된다.

id 사용예제 1

<p id="pid">p tag id pid</p>
<p id="pid">p tag id pid</p>

<script type="text/javascript">
	document.getElementById("pid").innerHTML = 'p태그 입니다';
</script>

 

실행화면

 

 

p tag id pid

p tag id pid

 

설명

동일한 id로 두 개의 태그에 사용할 경우 처음 설정된 p태그만 변경된 것을 볼 수 있다.

id는 고유하기 때문에 한 페이지당 1개만 사용 가능! 중복이 불가하다.

 

id 사용예제 2

<div id="demo" style="background-color: #ffffff">Hello JS CSS</div>
<button type="button" onclick="func()">적용</button>
<script type="text/javascript">
function func() {
	// div태그의 통째를 가져온다(인스턴스)
	let obj = document.getElementById("demo");
	// div태그에 모든 요소에 접근 할 수 있다.
	obj.style.color = "white";
	obj.style.backgroundColor = "blue";
	obj.style.textAlign = 'center';
	obj.style.borderStyle = 'double';
	obj.style.borderColor = "red";
	obj.style.fontFamily = "MS PGothic";
	obj.style.fontStyle = 'italic';
	obj.style.fontSize = '24pt';
}
</script>

실행화면

 

Insert title here
Hello JS CSS

 

설명

div태그에 id값 설정 후 JS 함수 안에서 div태그의 id를 불러오면 div태그의 모든 요소에 접근이 가능하다.

 

 

class 사용예제

<p class="cls"> p tag class cls</p>
<p class="cls"> p tag class cls</p>
<h2 class="cls"> h2 tag class cls</h2>
<script type="text/javascript">
	document.getElementsByClassName('cls')[0].innerHTML = 'class는 cls입니다';
	document.getElementsByClassName('cls')[1].innerHTML = 'class는 cls입니다';
</script>

 

실행화면

 

 

p tag class cls

p tag class cls

h2 tag class cls

 

설명

class는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!

 

 

name 사용 예제

<p name="name">p tag name name</p>
<h2 name="name">p tag name name</h2>
<script type="text/javascript">
document.getElementsByName('name')[1].innerHTML = "name 입니다";	
</script>

실행화면

 

 

p tag name name

p tag name name

 

설명

name는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp)  (0) 2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
Insert title here

PC방 이용요금

기본 사용료 1시간 : 1000원

1시간추가 : 1000원
3시간추가 : 2700원
5시간추가 : 4200원

합계금액 : 원정

 

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>PC방 이용요금</h1>
기본 사용료 1시간 : 1000원
<br><br>
<form name="pc">
	<input type="checkbox" onclick="sum(0)" id="hour1" value="1000">1시간추가 : 1000원<br> 	<!-- 0번요소 -->
	<input type="checkbox" onclick="sum(1)" id="hour3" value="2700">3시간추가 : 2700원<br> 	<!-- 1번 요소 -->	
	<input type="checkbox" onclick="sum(2)" id="hour5" value="4200">5시간추가 : 4200원<br><br>	<!-- 2번 요소 -->
	합계금액 : <input type="text" id="total" value="1000" size="5">원정						<!-- 3번요소 -->
</form>

<script type="text/javascript">
	let values = new Array(3); // 배열을 선언하여 값 불러오기
	values[0] = parseInt(document.getElementById('hour1').value);
	values[1] = parseInt(document.getElementById('hour3').value);
	values[2] = parseInt(document.getElementById('hour5').value);
	
	let total = parseInt(document.getElementById('total').value);

	function sum(num) {
		if(document.pc.elements[num].checked == true){
			total = total + values[num];
		}else{
			total = total - values[num];
		}
		document.pc.elements[3].value = total;	
	}
</script>

</body>
</html>

 

 

설명

input태그를 form태그로 묶을 경우 input태그는 form태그의 요소가 된다.

script 태그 안에서 배열을 선언 하여 체크박스의 값을 넣어준다.

document.pc.elements[num].checked == true

form태그의 name은 pc이고 pc의 요소가 체크될 경우(checked) true를 반환한다.

document.pc.elements[3].value = total;

form태그의 3번째 요소 = total에 값을 넣어준다.(요소 시작 번호 : 0)

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
Insert title here

계산기

a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.



첫번째 수                     두번째 수      연산 결과
=

 

 

계산기 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h2>계산기</h2>
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.
<br><br>
<button type="button" onclick="plus()">덧셈</button>
<button type="button" onclick="minus()">뺄셈</button>
<button type="button" onclick="multi()">곱셈</button>
<button type="button" onclick="div()">나눗셈</button>
<button type="button" onclick="rest()">나머지</button>
<br><br>

<input type="text" id="a" size="8">
<input type="text" id="oper" size="5">
<input type="text" id="b" size="8">
=
<input type="text" id="result" size="8">

<script type="text/javascript">
let a, b;	// 전역변수

function setValue() {
	a = parseInt(document.getElementById('a').value); // 입력값 받기
	b = parseInt(document.getElementById('b').value);
}

function plus() {
	setValue();
	document.getElementById('oper').value = "+"; // 값 넣기
	document.getElementById('result').value = a + b;
}
function minus() {
	setValue();
	document.getElementById('oper').value = "-"; // 값 넣기
	document.getElementById('result').value = a - b;
}
function multi() {
	setValue();
	document.getElementById('oper').value = "*"; // 값 넣기
	document.getElementById('result').value = a * b;
}
function div() {
	setValue();
	if(b == 0){ // 0 안됨
		alert('계산할 수 없습니다');
		return;
	}
	document.getElementById('oper').value = "/";
	document.getElementById('result').value = a / b;	
}
function rest() {
	setValue();
	if(b == 0){ // 0 안됨
		alert('계산할 수 없습니다');
		return;
	}
	document.getElementById('oper').value = "%";
	document.getElementById('result').value = a % b;	
}

</script>
</body>
</html>

 

 

설명

onclick : 클릭을 할 경우 해당 메소드로 이동한다.

parseInt : 연산을 하기 위해 입력값을 숫자형으로 변환한다. 

나누기와 나머지는 두번째 수가 0이 들어올 경우 연산이 안되기 때문에 조건문을 걸어주어 return을 하게 한다.

 

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
Insert title here

웹 페이지를 위한 지배적인 마크업 언어는? (대문자로 입력)

답 :




정답을 입력받고 경고창으로 정답 확인하기 예시

<h2>웹 페이지를 위한 지배적인 마크업 언어는? (대문자로 입력)</h2>
답 : <input type="text" id="answer">

<input type="button" onclick="func()" value="정답확인">

<script type="text/javascript">
function func() {

	let answer = document.getElementById('answer').value;
	if(answer == ""){
		alert('답을 기입해 주십시오');
	}
	else if(answer == "HTML"){
		alert('정답입니다');
	}
	else{
		document.getElementById('answer').value = "";
		alert('정답이 아닙니다');
	}
}
</script>

 

설명

<input type="button" onclick="func()" value="정답확인">

버튼 클릭 시 func() 함수로 이동한다.

let answer = document.getElementById('answer').value;

document.getElementById('answer'). value는 id=answer 즉, 사용자에게 입력받은 값이 된다.

if(answer == ""){
alert('답을 기입해 주십시오');
}

만약 입력값이 ""(공백일 경우) 경고창에 '답을 기입해 주십시오' 문구를 출력한다.

else if(answer == "HTML"){
alert('정답입니다');
}

만약 입력값이 "HTML"일 경우 경고창에 '정답입니다' 문구를 출력한다.

else{
document.getElementById('answer').value = "";
alert('정답이 아닙니다');
}

만약 입력값이 공백이 아니거나 "HTML"이 아닐경우 id=answer의 value값을 공백으로 넣어주고,

경고창에 '정답이 아닙니다' 문구를 출력한다.

 

 

 

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06

이미지 파일 접근 경로 설명 글 : https://chlee21.tistory.com/80?category=936649 

 

사진 클릭 시 경고창 띄우기 예시 1

설명

img 태그안에 onclick="alert('내용')"을 설정하여 클릭 시 경고창이 뜨게 한다. 

alert : 경고창 함수

<img alt="" src="santorini.jpg" onclick="alert('여행가고 싶다!')" width="500">

 

실행화면

 

Insert title here

 

 

 

사진 클릭 시 경고창 띄우기 예시 2

설명

onclick="func()" 클릭시 func()함수로 이동

<img alt="" id="img" src="santorini.jpg" onclick="func()" width="500">

<script type="text/javascript">
function func() {
	alert('여행가고 싶다!!');
}
</script>

 

실행화면

 

Insert title here

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06

10진수, 2진수, 8진수, 16진수

 

10진수 → 2 , 8, 16 진수 변환 예시

참조 

toString(2) : 2진수 변환

toString(8) : 8진수 변환

toString(16) : 16진수 변환

	let num = 8;
    
	// 10->2
	let num2 = num.toString(2);	// 0000 1000
	// 10->8
	let num8 = num.toString(8);	// 10
	//10->16
	let num16 = num.toString(16);	// 8

 

2진수 → 10 , 8, 16 진수 변환 예시

참조

2진수는 parseInt(값, 2)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let bin = "00001000";
    
	// 2->10
	let num10 = parseInt(bin,2);			// 8
	// 2->8
	let num8 = parseInt(bin,2).toString(8);	// 10
	// 2->16
	let num16 = parseInt(bin,2).toString(16);	// 8

 

8진수 → 10 , 2, 16 진수 변환 예시

참조

8진수는 parseInt(값, 8)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let oct = "10";
    
	// 8->10
	let num10 = parseInt(oct,8);			// 8
	// 8->2
	let num2 = parseInt(oct,8).toString(2);	// 00001000
	// 8->16
	let num16 = parseInt(oct,8).toString(16);	// 8

 

16진수 → 10 , 2, 8 진수 변환 예시

참조

16진수는 parseInt(값, 16)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let hex = "15a";
    
	// 16->10
	let num10 = parseInt(hex,16);			// 346
	// 16->2
	let num2 = parseInt(hex,16).toString(2);	// 101011010
	// 16->8
	let num8 = parseInt(hex,16).toString(8);	// 532

 

사용자 입력값으로 진수 변환 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
	<tr>
	<th>10진수</th>
	<td><input type="text" id="num" size="10" value="">
	<button type="button" onclick="num()">변환</button></td>
	</tr>
	<tr>
	<th>2진수</th>
	<td><input type="text" id="bin" size="10" value="">
	<button type="button" onclick="bin()">변환</button></td>
	</tr>
	<tr>
	<th>8진수</th>
	<td><input type="text" id="oct" size="10" value="">
	<button type="button" onclick="oct()">변환</button></td>
	</tr>
	<tr>
	<th>16진수</th>
	<td><input type="text" id="hex" size="10" value="">
	<button type="button" onclick="hex()">변환</button></td>
	</tr>
</table>

<script type="text/javascript">

	function num() {
		let num = parseInt(document.getElementById('num').value);

		let num2 = num.toString(2);
		document.getElementById('bin').value = num2;
		let num8 = num.toString(8);
		document.getElementById('oct').value = num8;
		let num16 = num.toString(16);
		document.getElementById('hex').value = num16;
	}
	
	function bin() {
		let bin = parseInt(document.getElementById('bin').value,2);
		// 2->10
		document.getElementById('num').value = bin;
		// 2->8
		let bin8 = bin.toString(8);
		document.getElementById('oct').value = bin8;
		// 2->16
		let bin16 = bin.toString(16);
		document.getElementById('hex').value = bin16;
	}
	
	function oct() {
		let oct = parseInt(document.getElementById('oct').value,8);
		// 8->10
		document.getElementById('num').value = oct;
		// 8->2
		let oct2 = oct.toString(2);
		document.getElementById('bin').value = oct2;
		// 8->16
		let oct16 = oct.toString(16);
		document.getElementById('hex').value = oct16;
	}	
	
	function hex() {
		let hex = parseInt(document.getElementById('hex').value,16);
		// 16->10
		document.getElementById('num').value = hex;
		// 16->2
		let hex2 =hex.toString(2);
		document.getElementById('bin').value = hex2;
		// 16->8
		let hex8 = hex.toString(8);
		document.getElementById('oct').value = hex8;
	}
</script>

</body>
</html>

 

실행화면

Insert title here
10진수
2진수
8진수
16진수

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06

+ Recent posts

티스토리툴바