728x90
반응형
1) Javascript 예제
1-1) 간단한 계산기 예제
1-2) window 예제
1) Javascript 예제
1-1) 간단한 계산기 예제
Ex06.예제_교수님_ver.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>간단한 계산기</title>
<script>
/*
1. 입력박스 3개, select 1개(사칙연산), 버튼 2개
2. 계산 버튼을 누르면 사칙연산에 대한 결과를 입력박스에 출력
3. 입력박스에 숫자가 아닌 값이 들어올 경우 alert 처리
4. alert 처리 후 해당 입력박스에 focus, select 처리
5. 0으로 연산 시 '0으로 나눌 수 없습니다' 문구 처리
trim(), isNaN(), focus(), select(), parseInt()
*/
function cal() {
let num1 = document.querySelector("#num1");
let num2 = document.querySelector("#num2");
let op = document.querySelector("#op");
let result;
if (num1.value.trim().length == 0 || isNaN(num1.value)) {
alert("숫자를 입력해주세요");
num1.focus();
num1.select();
return;
}
if (num2.value.trim().length == 0 || isNaN(num2.value)) {
alert("숫자를 입력해주세요");
num2.focus();
num2.select();
return;
}
switch (op.value) {
case "+":
result = parseInt(num1.value) + parseInt(num2.value);
break;
case "-":
result = parseInt(num1.value) - parseInt(num2.value);
break;
case "*":
result = parseInt(num1.value) * parseInt(num2.value);
break;
case "/":
if (num2.value == 0) {
alert("0으로 나눌 수 없습니다.");
num2.focus();
return;
}
result = parseInt(num1.value) / parseInt(num2.value);
break;
}
document.querySelector("#num3").value = result;
}
function numReset() {
location.reload(true);
}
</script>
</head>
<body>
<h1>* 계산기</h1>
<form action="" method="">
<input type="text" class="num" id="num1" />
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" class="num" id="num2" />
<span> = </span>
<input type="text" class="num" id="num3" readonly />
<input type="button" value="계산" onclick="cal()" />
<input type="reset" value="리셋" />
</form>
</body>
</html>
※ 첫 접속 화면
※ "계산" 버튼 클릭 시 화면
※ "리셋" 버튼 클릭 시 화면
1-2) window 예제
Ex07.예제.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>window 예제</title>
<script>
window.onload = function () {
let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");
let win; // 새 창을 참조하는 변수
let timer; // timer 함수를 참조하는 변수
btn1.addEventListener("click", function () {
win = window.open(
"./Ex07.sub.html",
"",
`top=100, left=100, width=100, height=100`
);
// setInterval() : 지정한 시간 간격마다 콜백함수를 반복 실행함
timer = setInterval(function () {
win.moveTo(
Math.floor(Math.random() * 1920),
Math.floor(Math.random() * 1080)
);
}, 300);
});
btn2.addEventListener("click", function () {
clearInterval(timer);
win.close();
});
};
</script>
</head>
<body>
<input type="button" name="클릭" id="btn1" />
<input type="button" name="멈춤" id="btn2" />
</body>
</html>
Ex07.sub.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>zzzzzz</div>
</body>
</html>
※ 첫 접속 화면 : live server를 통해 웹 페이지를 열어야 한다!
※ "클릭" 버튼 클릭 시 화면 : 새창을 열고, setInterval() 함수를 통해 지정한 시간 간격마다 새창의 위치를 옮겨줌
※ "멈춤" 버튼 클릭 시 화면 : clearInterval() 함수를 통해 setInterval() 함수 객체(timer)를 clear시키고 난 뒤에
새창을 닫아줌
'Javascript > Javascript(2024 version)' 카테고리의 다른 글
| Javascript(8) - 정보처리기사 필기 결과 출력 (0) | 2024.06.19 |
|---|---|
| Javascript(7) - 종합 평가 점수 계산 및 결과 출력 (0) | 2024.06.18 |
| Javascript(5) - 예제(class 추가/삭제, selectBox를 통한 이미지 선택, 데이터 출력, 주민등록정보 조회) (0) | 2024.06.12 |
| Javascript(4) - HTML DOM 이벤트, HTML BOM, 예제(배경색 변경 / 글자수 표기) (0) | 2024.06.11 |
| Javascript(3) - Object 객체, JSON, 함수, 객체생성자 함수, HTML DOM (0) | 2024.06.10 |
