계산기 만들기
자바스크립트를 통해 계산기의 기능을 구현할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_계산기.html</title>
<style>
.txt{
border: 2px solid #ccffff;
text-align: right;
font-weight: bold;
font-size: 20px;
color: black;
height: 50px;
background-color: #e0ebeb;
}
.button{
border: none;
font-size: 30px;
border-radius: 50%;
padding: 8px;
text-align: center;
line-height: 40px;
}
#c {
color: red;
}
#green {
color: green;
}
#equal {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3>미니 계산기</h3>
<form>
<table>
<tr>
<td colspan="4">
<input type="text" name="result" id="result" size="20" value="0" readonly class="txt">
</td>
</tr>
<tr>
<td><input type="button" class="button" value=" 7 " onclick="inputData(7)"></td>
<td><input type="button" class="button" value=" 8 " onclick="inputData(8)"></td>
<td><input type="button" class="button" value=" 9 " onclick="inputData(9)"></td>
<td><input type="button" class="button" id="green" value=" / " onclick="operator('/')"></td>
</tr>
<tr>
<td><input type="button" class="button" value=" 4 " onclick="inputData(4)"></td>
<td><input type="button" class="button" value=" 5 " onclick="inputData(5)"></td>
<td><input type="button" class="button" value=" 6 " onclick="inputData(6)"></td>
<td><input type="button" class="button" id="green" value=" * " onclick="operator('*')"></td>
</tr>
<tr>
<td><input type="button" class="button" value=" 1 " onclick="inputData(1)"></td>
<td><input type="button" class="button" value=" 2 " onclick="inputData(2)"></td>
<td><input type="button" class="button" value=" 3 " onclick="inputData(3)"></td>
<td><input type="button" class="button" id="green" value=" － " onclick="operator('-')"></td>
</tr>
<tr>
<td><input type="button" class="button" value=" 0 " onclick="inputData(0)"></td>
<td><input type="button" class="button" value=" . "></td>
<td><input type="button" class="button" id="equal" value=" = " onclick="compute()"></td>
<td><input type="button" class="button" id="green" value=" + " onclick="operator('+')"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="button" value=" ← " onclick="backspace()">
</td>
<td colspan="2">
<input type="button" class="button" id="c" value=" C " onclick="cls()">
</td>
</tr>
</table>
</form>
<script>
//1. c 버튼을 클릭하면 id=result에 0을 대입
function cls(){
document.getElementById("result").value = 0; //document.getElementById("result")을 통해 계산 결과가 출력되는 창에 접근. .value로 value값에 접근
}//cls() end
//2. 클릭한 숫자 버튼에 맞는 숫자를 출력하기
function inputData(su){
// alert(su);
//전달받은 su변수값을 id=result에 대입
// document.getElementById("result").value += su;
//id = result 값을 숫자형으로 변환("0123" -> 123)
document.getElementById("result").value = Number(document.getElementById("result").value += su);
}//inputData() end
//3.연산에 필요한 전역변수 선언하기
let op; //연산 기호
let num1; //사용자 입력한 첫 번째 수
let num2; //사용자 입력한 두 번째 수
function operator(kind){
//4. 클릭한 연산 기호를 전역변수 op에 저장하기
// alert(kind);
op = kind;
//5. 현재 id=result가 가지고 있는 값을 num1에 저장하기
num1 = Number(document.getElementById("result").value);
//6. 두 번째 수를 입력받기 위해 id=result값을 초기화하기
cls();
}//operator() end
// 참조 https://www.w3schools.com/jsref/jsref_eval.asp
function compute(){
//실제 계산을 해서 결과값 출력
//7. 계산에 필요한 두 번째 수를 num2에 저장하기
num2 = Number(document.getElementById("result").value);
//8. 계산해서 결과 출력하기
document.getElementById("result").value = eval(num1 + op + num2);
}//compute() end
//9. ← 버튼을 클릭하면 id=result 값에서 마지막 글자부터 순서대로 지우기
// id=result 값에서 마지막 글자만 제외시키고 다시 대입
// 단, 자릿수가 한 개인 값은 0으로 대입
function backspace(){
let del = document.getElementById("result").value
if(del.length==1){
cls();
} else {
document.getElementById("result").value = del.substring(0, del.length-1)
}
}//backspace() end
// // 강사님
// function backspace(){
// //a) id=result값을 가져와서 글자 갯수 출력하기
// let result=document.getElementById("result").value;
// // alert(result);
// // alert(result.length);
// //b) 처음 글자부터 마지막 글자를 제외시키고 문자열 가져오기(substring()) <substring() 매우 중요. 꼭 알아두기!!>
// let len=result.length;
// // alert(result.substring(0, len-1));
// //c) 분리된 b)문자열을 다시 id=result에 대입하기
// // 단, 글자 갯수가 1개이면 0으로 다시 대입
// if(len==1){
// document.getElementById("result").value=0;
// }else{
// document.getElementById("result").value=result.substring(0, len-1);
// }//if end
// }
</script>
</body>
</html>
회원가입
참고) 함수 만들 때 많이 사용하는 이름
get~~, set~~, is~~(물어볼 때), to~~
요소 접근하기
<body>
<!--
Frontend(UI, View)단에서 서로 다른 문법(이종)간의 데이터를 교류하기 위해서
JavaScript와 jQuery를 활용하고, 데이터의 유효성을 검증하기 위해서도 사용한다
-->
<h3>회원가입</h3>
<form name="memfrm" id="memfrm">
아이디 :
<input type="text" name="uid" id="uid" class="line">
<input type="button" value="ID중복확인" onclick="getID()">
<input type="button" value="ID적용" onclick="setID()">
<hr>
</form>
</body>function getID(){
// alert();
// <input type="text" name="uid" id="uid">에 접근해보자
//1)<form>의 컨트롤 요소 접근 시 id 사용(추천)
// alert(document.getElementById("uid")); //[object HTMLInputElement]
// alert(document.getElementById("uid").value);
//2) tag name 접근
// 본문에서 <input> 태그들에 접근 (input이 여러 개니 인덱스로 접근 가능)
// alert(document.getElementsByTagName("input")); //[object HTMLCollection]
// <input>태그들 중에서 0번째 접근
// alert(document.getElementsByTagName("input")[0]); //[object HTMLInputElement]
// alert(document.getElementsByTagName("input")[0].value); //실제값
// 3)<form>의 컨트롤 요소 접근 시 name 사용
// alert(document.memfrm.uid.value) //(비추천) //document(<body>)에 가서 memfrm을 찾고 거기서 uid를 찾아라
// alert(document.getElementsByName("uid")); //[object NodeList]
// alert(document.getElementsByName("uid")[0].value);
// 4)스타일 접근
alert(document.getElementsByClassName("line")); //[object HTMLCollection]
}//getID() endfunction setID(){
// <input type="text" name="uid" id="uid" class="line">에 값 대입하기
let str="itwill";
//1) id 접근(추천)
// document.getElementById("uid").value=str;
//2) tag name 접근 (검색해보니 배열로 저장된다고 함)
// document.getElementsByTagName("input")[0].value=str;
//3) name 접근 (검색해보니 배열로 저장된다고 함)
document.getElementsByName("uid")[0].value=str;
}//setID() end
회원가입 폼
<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
아이디 :
<input type="text" name="uid" id="uid" class="line">
<input type="button" value="ID중복확인" onclick="getID()">
<input type="button" value="ID적용" onclick="setID()">
<hr>
비밀번호 :
<input type="password" name="upw" id="upw">
<hr>
주민번호 :
<input type="number" name="jumin1" size="6" maxlength="6">
-
<input type="number" name="jumin2" size="7" maxlength="7">
<hr>
약관동의 :
<input type="checkbox" name="agree" id="agree">
<hr>
<input type="submit" value="가입1">
<input type="reset" value="취소">
</form>
유효성 검사
function validate(){
//회원가입 폼에 대한 유효성 검사
//1)아이디 글자 갯수 8~12 사이인지 먼저 확인하시오
// 위의 조건을 만족하지 않으면
// -> 경고창(alert),
// -> 아이디를 다시 입력할 수 있도록 id=uid에 커서를 생성(focus)
// -> 서버로 전송하는 것을 차단
let uid=document.getElementById("uid").value;
uid=uid.trim(); //맨앞과 맨뒤의 공백제거
if(!(uid.length>=8 && uid.length<=12)){
alert("아이디 8~12글자 이내로 입력해주세요~");
document.getElementById("uid").focus();
return false;
}//if end
//2)비밀번호 글자 갯수가 5~10 사이인지 확인하시오
let upw=document.getElementById("upw").value;
upw=upw.trim(); //맨앞과 맨뒤의 공백제거
if(!(upw.length>=5 && upw.length<=10)){
alert("비밀번호 5~10글자 이내로 입력해주세요~");
document.getElementById("upw").focus();
return false;
}//if end
//3)주민번호 앞칸이 숫자형 글자로 갯수가 6인지 확인하시오
let jumin1=document.getElementById("jumin1").value;
jumin1=jumin1.trim();
if(jumin1.length!=6 || isNaN(jumin1)){ //숫자기호인지?
alert("주민번호(앞칸) 6글자를 숫자로 입력해주세요~");
document.getElementById("jumin1").value=""; //기존값을 지우기 위해 빈문자열 대
document.getElementById("jumin1").focus();
return false;
}//if end
//4)약관 동의에 체크했는지?
if(document.getElementById("agree").checked==false){
alert("약관에 동의해주세요!!");
return false;
}//if end
alert("회원가입 폼을 서버로 전송합니다");
return true; //<form name=memfrm>폼을 서버로 전송
}//validate() end
function validate2(){
//<form id="memfrm"></form>
let frm=document.getElementById("memfrm");
// alert(frm); //[object HTMLFormElement]
//<form action=ok2.jsp></form>와 동일한 기능의 자바스크립트 작성
frm.action="ok2.jsp";
//<input type="submit">과 동일한 기능의 자바스크립트 함수
frm.submit();
// <input type="reset">과 동일한 기능의 자바스크립트 함수
// 폼양식 내에 있는 폼 컨트롤 요소가 가지고 있던 최초의 상태로 복귀
// frm.reset();
}//validate2() end
이미지 스크롤
이미지가 오른쪽에서 왼쪽으로 움직이도록 만들어보자
<body>
<!-- 이미지가 스크롤 되는 위치 -->
<div id="mydiv">
<script> start(); </script>
</div>
</body><head>
<script>
//1)스크롤하고자 하는 이미지를 전역변수에 저장
let ctnt=[]; //배열 선언
ctnt[0]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbx9n1z%2FbtrJE3mijqd%2FdM6r3tA90pIqrQlkmjS4J1%2Fimg.png' width='85'>";
ctnt[1]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrfbKF%2FbtrJQd9i0ZT%2FNzfSORPJY2YAv9kWMCHn5k%2Fimg.png' width='85'>";
ctnt[2]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzhzeC%2FbtrJKudqHlE%2FIh5kWdFty6aL1dOGNBBK9K%2Fimg.png' width='85'>";
ctnt[3]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbx9n1z%2FbtrJE3mijqd%2FdM6r3tA90pIqrQlkmjS4J1%2Fimg.png' width='85'>";
ctnt[4]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrfbKF%2FbtrJQd9i0ZT%2FNzfSORPJY2YAv9kWMCHn5k%2Fimg.png' width='85'>";
ctnt[5]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzhzeC%2FbtrJKudqHlE%2FIh5kWdFty6aL1dOGNBBK9K%2Fimg.png' width='85'>";
ctnt[6]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbx9n1z%2FbtrJE3mijqd%2FdM6r3tA90pIqrQlkmjS4J1%2Fimg.png' width='85'>";
ctnt[7]="<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrfbKF%2FbtrJQd9i0ZT%2FNzfSORPJY2YAv9kWMCHn5k%2Fimg.png' width='85'>";//2) 1)에서 준비한 이미지를 id="mydiv"에 배치
function start(){
/*
document.write("<div id='area0' style='position:absolute; top:0; left:0;'>");
document.write(ctnt[0]);
document.write("</div>");
document.write("<div id='area1' style='position:absolute; top:0; left:90px;'>");
document.write(ctnt[1]);
document.write("</div>");
*/
// 문) 반복문을 활용해서 이미지 8장 배치하기
for(let i=0; i<ctnt.length; i++){
document.write("<div id='area" + i + "' style='position:absolute; top:0; left:"+ (90*i) + "px" + ";'>");
document.write(ctnt[i]);
document.write("</div>");
}//for end//3) 3초 후에 scroll함수 1번 호출
setTimeout(scroll, 3000);
}//start() end// 4)이미지 스크롤
function scroll(){
// alert("scroll함수 호출");
// alert(document.getElementById("area0")); //[object HTMLDivElement]
// alert(document.getElementById("area0").style); //[object CSSStyleDeclaration]
// alert(document.getElementById("area0").style.left); //0px
//5)id=area0의 스타일을 가져와서 왼쪽 여백값을 -10px만큼 줄이기
// let tmp=document.getElementById("area0").style;
// tmp.left=parseInt(tmp.left)-10 + "px";
//이미지 8장을 동시에 왼쪽 여백 조정하기
for(let i=0; i<ctnt.length; i++){
let tmp=document.getElementById("area"+i).style;
tmp.left=parseInt(tmp.left)-10 + "px";
//7)이미지 순환하기 위해서 이미지를 다시 배치
if(parseInt(tmp.left)<=-90){ //id=mydiv영역을 벗어났는가?
tmp.left=(ctnt.length-1)*90 + "px";
}//if end
// if(parseInt(tmp.left)<-90){
// tmp.left=630+"px";
// }
}//for end
//6)0.5초 후 scroll함수 호출
timer = setTimeout(scroll, 500);
}//scroll() end<style>
#mydiv{position: relative;
left: 100px;
top: 10px;
/*8)*/
--width: 800px;
/*9)영역크기 줄이기*/
width : 280px;
height: 100px;
/*10)*/
--background-color: hotpink;
background-color:white;
overflow: hidden;
}
</style> //13) 6)의 시간을 해제
var timer; //전역변수
function killtime(){
clearTimeout(timer);
}//killtime() end
</script><body onunload="killtime()"> <!-- 14) 현재문서에서 나갔거나 종료했을 때 -->
'웹개발 교육 > JavaScript' 카테고리의 다른 글
| [17일] JavaScript (11) - 카카오맵 (0) | 2022.08.18 |
|---|---|
| [16일] JavaScript (10) - style접근, this, JSON (0) | 2022.08.17 |
| [14일] JavaScript (8) - 이벤트, String 함수 (0) | 2022.08.12 |
| [13일] JavaScript (7) - 함수, 내장 객체, Scope, 디지털 시계 만들기 (0) | 2022.08.11 |
| [12일] JavaScript (6) - 요일 구하기, Date 객체, 함수 (0) | 2022.08.10 |
