[KOSTA] Spring 기반 Cloud 서비스 개발자 양성자 과정 40일차 - DOM 실습
0
💻 KOSTA Spring 기반 Cloud 서비스 구현 개발자 양성 과정 실습
목록 보기
33/47
.png)
📃 객체를 활용하여 계산기 프로그램을 구현하자
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//객체를 활용하여 계산기 프로그램을 구현하자.
var calculate = {
num1 : 0,
num2 :0,
sum : 0,
cals : function(){ //이벤트 핸들러 함수 (this => 이벤트 대상)
num1 = parseInt(document.fmt.f1.value);
num2 = parseInt(document.fmt.f2.value);
var opt = this.value // + or -
if(opt == '+'){
sum = num1 + num2;
}else{
sum = num1 - num2
}
document.fmt.result.value = sum;
}
};
function plusFunc(){
var result = document.getElementByName("result");
result.innerHTML = "test";
}
window.onload = function(){
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
plus.onclick = calculate.cals;
minus.onclick = calculate.cals;
}
</script>
</head>
<body>
<h2>계산기</h2>
<table border="1">
<form name="fmt">
<tr>
<td>숫자1</td>
<td><input type="text" name="f1"></input></td>
</tr>
<tr>
<td>숫자2</td>
<td><input type="text" name="f2"></input></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="+" id="plus" onclick="plusFunc()"></input>
<input type="button" value="-" id="minus" onclick="minusFunc"></input>
</td>
</tr>
<tr>
<td>결과</td>
<td><input type="text" name="result"></input></td>
</tr>
</form>
</table>
</body>
</html>
📃 배열에 이미지 경로를 초기화 후 이미지를 랜덤으로 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//배열에 이미지 경로를 초기화 후 랜덤한 수를 입력 받아 해당 이미지를 출력하도록
var arr = [];
for(var i = 0; i < 7; i++){
arr[i] = "../images/pic"+(i+1)+".jpg";
}
window.onload = function(){
const random = Math.floor(Math.random()*7);
var img = document.getElementById("img");
img.src = arr[random];
}
</script>
</head>
<body>
<img id="img" src="../images/pic1.jpg" >
</body>
</html>📃 모든 input 태그에 클릭 이벤트 발생
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var total = 0;
var pre = 0;
function calc(obj){
//obj.checked == true
//obj.type
if(obj.type == 'checkbox'){
if(obj.checked == true){
total += parseInt(obj.value);
}else{
total -= parseInt(obj.value);
}
}else{
total -= pre;
total += parseInt(obj.value);
pre = parseInt(obj.value);
}
document.fmt.result.value = total;
}
//로딩 후 모든 input에게 클릭이벤트를 발생
window.onload = function(){
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
inputs[i].onclick = function() {
calc(this);
}
}
}
</script>
</head>
<body>
<form name="fmt">
두부 400원
<input type="checkbox" value="400" >
콩나물 150원
<input type="checkbox" value="150">
간장 1500원
<input type="checkbox" value="1500">
<br><br>
퀵 서비스
<input type="radio" name="del" value="5000">
택배
<input type="radio" name="del" value="2500">
<br><br>
지불하실 금액은 : <input type="text"" name="result">
</form>
</body>
</html>📃 이미지에 마우스 오버 할때 이미지 변경
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//onmouseover
//onmouseout
window.onload = function(){
var img = document.getElementById("default");
var defaultImage = img.src;
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++){
imgs[i].onmouseover = function(){
img.src = this.src;
}
imgs[i].onmouseout = function() {
img.src = defaultImage;
}
}
}
</script>
</head>
<body>
<center>
<h2>고양이 앨범</h2>
<img id="default" src="../images/cat0.jpg" border="1" width="600" height="450"></img>
<br/><br/><br/>
<img src="../images/cat1.jpg" width="70" height="70" border="1" hspace="10"
vspace="10" >
<img src="../images/cat2.jpg" width="70" height="70" border="1" hspace="10"
vspace="10">
<img src="../images/cat3.jpg" width="70" height="70" border="1" hspace="10"
vspace="10">
</center>
</body>
</html>
DB 엔지니어👍