1. 자판기 프로그램 구현
자판기 프로그램 한번더 복습하면서 따라하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.red-text {
color: red;
font-size: 32px;
font-weight: bold;
}
.orange-text {
color: orange;
font-size: 32px;
font-weight: bold;
}
.green-text {
color: green;
font-size: 32px;
font-weight: bold;
}
.box {
width: 70px;
text-align: center;
}
.box2 {
width: 30px;
text-align: center;
}
</style>
<script>
var balance = 0;
function vm(input, cost) {
drink = "";
if (input == 0) {
balance += cost;
} else {
if (balance >= cost) {
if (input == 1) {
balance -= 1200;
drink += '<img src="../images/콜라.jpg">';
} else if (input == 2) {
balance -= 1100;
drink += '<img src="../images/사이다.jpg">';
} else if (input == 3) {
balance -= 1000;
drink += '<img src="../images/환타.jpg">';
} else if (input == 4) {
balance -= 400;
drink += '<img src="../images/커피.jpg">';
}
} else {
alert("잔액이 부족합니다.");
}
}
document.getElementById("choice").innerHTML += drink;
document.getElementById("totalMoney").value = balance + "원";
}
function change() {
change500 = 0;
change100 = 0;
while (true) {
if (balance >= 500) {
balance -= 500;
change500++;
} else if (balance >= 100) {
balance -= 100;
change100++;
} else {
break;
}
}
document.getElementById("totalMoney").value = balance + "원";
document.getElementById("input500").value = change500;
document.getElementById("input100").value = change100;
}
</script>
</head>
<body>
<table border="3" width="440" height="100">
<tr>
<td colspan="4" bgcolor="lightgrey" valign="middle" align="center">
<span class="red-text">자</span>
<span class="orange-text">판</span>
<span class="green-text">기</span>
</td>
</tr>
<tr>
<td valign="middle" align="center">
<img src="../images/콜라.JPG" /> <br />
<input type="button" onclick="vm(1,1200)" value="1200원" />
</td>
<td valign="middle" align="center">
<img src="../images/사이다.JPG" /> <br />
<input type="button" onclick="vm(2,1100)" value="1100원" />
</td>
<td valign="middle" align="center">
<img src="../images/환타.JPG" /><br />
<input type="button" onclick="vm(3,1000)" value="1000원" />
</td>
<td valign="middle" align="center">
<button id="ot" onclick="vm(0,1000)">1000원</button> <br />
<button id="fh" onclick="vm(0,500)">500원</button> <br />
<button id="oh" onclick="vm(0,100)">100원</button> <br />
<input type="text" id="totalMoney" class="box" placeholder="0원" />
</td>
</tr>
<tr>
<td valign="middle" align="center">
<img src="../images/커피.JPG" /> <br />
<input type="button" onclick="vm(4,400)" value="400원" />
</td>
<td valign="middle" align="center">
<img src="../images/커피.JPG" /> <br />
<input type="button" onclick="vm(4,400)" value="400원" />
</td>
<td valign="middle" align="center">
<img src="../images/커피.JPG" /> <br />
<input type="button" onclick="vm(4,400)" value="400원" />
</td>
<td valign="middle" align="center">
<input type="button" onclick="change()" value="잔돈 반환" />
</td>
</tr>
<tr>
<td colspan="3" id="choice"></td>
<td>
500원<input
type="text"
id="input500"
class="box2"
readonly
value="0"
/>개 <br />
100원<input
type="text"
id="input100"
class="box2"
readonly
value="0"
/>개
</td>
</tr>
</table>
</body>
</html>2. 속성 변경 및 페이지 이동
(1) 속성 변경하기(setAttribute)
- 요소의 속성 값을 변경할 수 있음.
element.setAttribute(attributeName, attributeValue);element: 속성을 변경할 요소
attributeName: 변경하려는 속성의 이름
attributeValue: 새로운 속성값<script>
const element = document.getElementById("myElement");
element.setAttribute("class", "newClass");
</script>(2) 속성 추가하기(setAttribute)
- 요소의 새로운 속성을 추가
element.setAttribute(attributeName, attributeValue);element: 속성을 추가할 요소
attributeName: 추가하려는 속성의 이름
attributeValue: 추가할 속성값<script>
const element = document.getElementById("myElement");
element.setAttribute("data-custom", "customValue");
</script>(3) 속성 제거하기(removeAttribute)
- 요소의 속성을 제거
element.removeAttribute(attributeName);<script>
const element = document.getElementById("myElement");
element.removeAttribute("title");
</script>(4) 코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
var myA = document.getElementById('myA');
// 읽어오기
console.log(myA.href);
console.log(myA.getAttribute('href'));
// 속성 변경하기
myA.setAttribute('href', 'http://www.naver.com');
console.log(myA.getAttribute('href'));
// 속성 추가하기
myA.title = 'naver';
console.log(myA.getAttribute('title'));
// 속성 제거
myA.removeAttribute('title');
console.log(myA.getAttribute('title'));
myA.innerHTML = 'naver';
// 다른 페이지로 이동할때 사용
location.href = 'http://www.daum.net';
};
</script>
</head>
<body>
<a id="myA" href="http://www.daum.net">daum</a>
</body>
</html>
IT 개발자가 되기 위한 기록