JavaScript
JavaScript 예제 모음
성장코딩
2023. 2. 1. 00:26
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>변수의 연산</h3>
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.
<br><br>
<button type="button" onclick="proc(1)">덧셈</button>
<button type="button" onclick="proc(2)">뺄셈</button>
<button type="button" onclick="proc(3)">곱셈</button>
<button type="button" onclick="proc(4)">나눗셈</button>
<button type="button" onclick="proc(5)">나머지</button>
<br><br>
<input type="text" id="a" size="10">
<input type="text" id="oper" size="5" readonly="readonly">
<input type="text" id="b" size="10">
=
<input type="text" id="result" size="20" readonly="readonly">
<script>
function proc(oper){
// 빈칸 조사
let a_val = document.getElementById('a').value;
let b_val = document.getElementById('b').value;
if(a_val.trim() == "" || b_val.trim() == ""){
alert('숫자를 입력해 주십시오');
return;
}
let a = parseInt(document.getElementById('a').value);
let b = parseInt(document.getElementById('b').value);
let result = 0;
let op = "+";
if(oper == 1) {
result = a + b;
op = "+";
}
else if(oper == 2) {
result = a - b;
op = "-";
}
else if(oper == 3) {
result = a * b;
op = "*";
}
else if(oper == 4) {
if( b == 0) {
alert("계산할 수 없습니다. 다시 입력해주세요");
document.getElementById('b').value = "";
return;
}
result = a / b;
op = "/";
}
else {
if( b == 0) {
alert("계산할 수 없습니다. 다시 입력해주세요");
document.getElementById('b').value = "";
return;
}
result = a % b;
op = "%";
}
document.getElementById("oper").value = op;
document.getElementById("result").value = result;
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>체육관 이용요금</h1>
기본사용료(4시간)40,800원
<br><br>
<!-- <div>
<input type="checkbox" onclick="sum(0)" id="chk1" value="20000">
<label for="chk1">야간조명(20,000원)</label>
</div>
<div>
<input type="checkbox" onclick="sum(1)" id="chk2" value="4000">
<label for="chk1">배구네트 x 2장(4,000원)</label>
</div>
<div>
<input type="checkbox" onclick="sum(2)" id="chk3" value="5000">
<label for="chk1">배구공 x 10(5,000원)</label>
</div>
<br><br>
<label for="total">합계금액:</label>
<input type="text" id="total" value="40800">
<label for="total">원정</label>
<script>
let total = parseInt(document.getElementById("total").value);
function sum(num){
if(num == 0){
// 체크박스 체크되어 있으면 true, 체크 해제되면 false 반환(checked 이용)
let chk1 = document.getElementById("chk1").checked;
let value = parseInt(document.getElementById("chk1").value);
if(chk1 == true){
total += value;
}
else {
total -= value;
}
document.getElementById("total").value = total;
}
else if(num == 1){
let chk2 = document.getElementById("chk2").checked;
let value = parseInt( document.getElementById("chk2").value );
if(chk2 == true){
total = total + value;
}else{
total = total - value;
}
document.getElementById("total").value = total;
}
else if(num == 2){
let chk3 = document.getElementById("chk3").checked; let value = parseInt( document.getElementById("chk3").value );
if(chk3 == true){
total = total + value;
}else{
total = total - value;
}
document.getElementById("total").value = total;
}
}
</script> -->
<form name="frm">
<input type="checkbox" onclick="sum(0)" id="chk1" value="20000">야간조명(20,000원)
<br>
<input type="checkbox" onclick="sum(1)" id="chk2" value="4000">배구네트 x 2장(4,000원)
<br>
<input type="checkbox" onclick="sum(2)" id="chk3" value="5000">배구공 x 10(5,000원)
<br><br>
합계금액:<input type="text" id="total" value="40800">원정
</form>
<script>
let array = new Array(3);
array[0] = parseInt(document.getElementById("chk1").value);
array[1] = parseInt(document.getElementById("chk2").value);
array[2] = parseInt(document.getElementById("chk3").value);
let total = parseInt( document.getElementById("total").value );
function sum( num ) {
if(document.frm.elements[num].checked == true){
total += array[num];
}
else{
total -= array[num];
}
document.frm.elements[3].value = total;
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다
<br><br>
<img alt="" src="./images/sai_1.gif" id="d1">
<img alt="" src="./images/sai_6.gif" id="d2">
<br><br>
<button type="button" onclick="dice()">주사위를 던졌다</button>
<script>
function dice(){
let r1 = Math.floor(Math.random() * 6) + 1;
let r2 = Math.floor(Math.random() * 6) + 1;
document.getElementById("d1").src = "./images/sai_" + r1 + ".gif";
document.getElementById("d2").src = "./images/sai_" + r2 + ".gif";
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
margin: 20px;
}
h1,span{
color: white;
}
td{
vertical-align: top;
}
img{
border: solid white;
}
</style>
</head>
<body>
<h1>사진들</h1>
<table>
<tr>
<td>
<img alt="" width="320" height="480" id="photo" src="./images/image01.jpg">
</td>
<td>
<span>사진의 선택</span><br>
<select id="picture" onchange="photoChange()">
<option selected>사진선택</option>
<option value="image01.jpg">일반건물밖</option>
<option value="image02.jpg">일반건물안</option>
<option value="image03.jpg">성당밖</option>
<option value="image04.jpg">성당안</option>
</select>
</td>
</tr>
</table>
<script>
function photoChange(){
let picture = document.getElementById("picture").value;
let selectIndex = document.getElementById("picture").selectedIndex;
if(selectIndex != 0){
document.getElementById("photo").src = "./images/" + picture;
}
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>미술관 및 박물관 링크</h1>
<select id="links" onchange="golink()">
<option>대상을 선택</option>
<optgroup label="미술관------------">
<option value="http://sema.seoul.go.kr/">서울 시립 미술관</option>
<option value="http://www.mmca.go.kr/ ">국립 현대 미술관</option>
<option value="http://www.sac.or.kr/">예술의 전당</option>
</optgroup>
<optgroup label="박물관------------">
<option value="http://www.museum.go.kr/">국립 중앙 박물관</option>
<option value="http://www.museum.seoul.kr/">서울 역사 박물관</option>
<option value="http://www.nfm.go.kr/">국립 민속 박물관</option>
</optgroup>
</select>
<script>
function golink(){
let url = document.getElementById("links").value;
location.href = url;
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>단가 X 수량 일람표</h3>
<table border="1" id="mytable">
<tr>
<th>번호</th>
<th>제품 A</th>
<th>제품 B</th>
<th>제품 C</th>
</tr>
</table>
<script>
let arrA = [ 23, 45, 11, 36, 27 ];
let arrB = [ 31, 29, 73, 12, 78 ];
let arrC = [ 36, 28, 33, 12, 85 ];
let table = document.getElementById("mytable");
for(i = 0; i < arrA.length; i++){
let tr = document.createElement("tr");
let th = document.createElement("th");
th.appendChild(document.createTextNode(1 + i + ""));
let td1 = document.createElement("td");
td1.appendChild(document.createTextNode(arrA[i] + ""));
let td2 = document.createElement("td");
td2.appendChild(document.createTextNode(arrB[i] + ""));
let td3 = document.createElement("td");
td3.appendChild(document.createTextNode(arrC[i] + ""));
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<h3>배열의 연산</h3>
<table border="1">
<col width="50"><col width="80"><col width="80"><col width="100">
<thead>
<tr>
<th>번호</th>
<th>a</th>
<th>b</th>
<th>a x b</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>5</td>
<td>33</td>
<td>
<button type="button" onclick="multi(0)">계산결과</button>
</td>
</tr>
<tr>
<th>1</th>
<td>12</td>
<td>14</td>
<td>
<button type="button" onclick="multi(1)">계산결과</button>
</td>
</tr>
<tr>
<th>2</th>
<td>18</td>
<td>32</td>
<td>
<button type="button" onclick="multi(2)">계산결과</button>
</td>
</tr>
</tbody>
</table>
<script>
let nodeNumbers = document.getElementsByTagName("td");
// alert(nodeNumbers[0].innerHTML);
// (0 1) (3 4) (6 7)번지 값들만 필요
let a = new Array(3);
let b = new Array(3);
for(i=0; i < a.length; i++){
a[i] = nodeNumbers[3*i].innerHTML;
b[i] = nodeNumbers[1+3*i].innerHTML;
}
function multi(index){
let result = parseInt(a[index]) * parseInt(b[index]);
alert('결과는 ' + result + '입니다.');
}
</script>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>10진수를 2진수, 8진수, 16진수로 변환</h3>
<table>
<tr>
<th>10진수:</th>
<td>
<input type="text" size="30" id="num10">
</td>
</tr>
<tr>
<th>2진수:</th>
<td>
<input type="text" size="30" id="num2">
</td>
</tr>
<tr>
<th>8진수:</th>
<td>
<input type="text" size="30" id="num8">
</td>
</tr>
<tr>
<th>16진수:</th>
<td>
<input type="text" size="30" id="num16">
</td>
</tr>
</table>
<br>
<button type="button" onclick="proc()">결과</button>
<script>
function proc(){
let num10 = parseInt(document.getElementById("num10").value);
document.getElementById("num2").value = num10.toString(2);
document.getElementById("num8").value = "0" + num10.toString(8);
document.getElementById("num16").value = "0x" + num10.toString(16).toUpperCase();
}
</script>
</body>
</html>
|
cs |