1) 성적 처리
[실습]
국어,영어,수학을 입력 받아서 총점, 평균을 구하여 출력
유효성 체크 : 성적 미입력시 --> '성적을 입력하세요', 0~100 범위를 벗어나면 --> '0~100 입력 가능'
[출력 예시]
국어 : 99
영어 : 98
수학 : 97
총점 : 294
평균 : 229.333333333<title>실습</title>
<script type="text/javascript">
window.onload=function(){
//이벤트 연결
document.getElementById('confirm_btn').onclick=function(){
//유효성 체크(함수 만들어서 이용)
let korean = document.getElementById('korean');
if(!check(korean,'국어')){
return;
}
let english = document.getElementById('english');
if(!check(english,'영어')){
return;
}
let math = document.getElementById('math');
if(!check(math,'수학')){
return;
}
//총점 구하기
//input 태그에 명시한 데이터는 string으로 인식하기 때문에 명시적으로 형변환
let sum = Number(korean.value) + Number(english.value) + Number(math.value);
//평균 구하기
let avg = sum / 3;
//div에 출력
let msg = '';
msg += '국어 : ' + korean.value + '<br>';
msg += '영어 : ' + english.value + '<br>';
msg += '수학 : ' + math.value + '<br>';
msg += '총점 : ' + sum + '<br>';
msg += '평균 : ' + avg.toFixed(2); //소수점 둘째자리까지 표현
document.getElementById('result').innerHTML = msg;
};
//유효성 체크 함수
function check(course,name){
//course : input 태그
//name : 과목명
if(course.value.trim()==''){ //입력을 안 했거나 공백만 입력한 경우
alert(name + ' 성적을 입력하세요!');
course.value = ''; //공백이 있으면 제거
course.focus();
return false;
}
if(isNaN(course.value)){ //문자인지 숫자인지 체크
//숫자가 아닌 경우
alert(name + ' 성적은 숫자만 가능');
course.value = '';
course.focus();
return false;
}
if(!Number.isInteger(Number(course.value))){ //정수인지 체크
//정수가 아닌 경우
alert('정수만 입력 가능');
course.value = '';
course.focus();
return false;
}
if(course.value < 0 || course.value > 100){
alert('0부터 100까지만 입력 가능');
course.value = '';
course.focus();
return false;
}
return true;
}
};
</script>
</head>
<body>
<form>
국어 <input type="text" name="korean" id="korean"><br>
영어 <input type="text" name="english" id="english"><br>
수학 <input type="text" name="math" id="math"><br>
<input type="button" value="확인" id="confirm_btn">
<div id="result"></div>
</form>
</body>
</html>2) 가위바위보 게임
<style type="text/css">
body{
font-family:sans-serif;
}
h1{
text-align:center;
}
div#game{
width:480px;
margin:0 auto;
text-align:center;
}
div.result-img{
position:relative;
width:220px;
float:left;
}
div.result-img:first-child{
text-align:right;
}
div.result-img:last-child{
text-align:left;
}
div.result-img span{
font-size:20px;
font-weight:bold;
border-radius:20px;
width:120px;
text-align:center;
background-color:#f4f2c6;
position:absolute;
top:25%;
left:20%;
}
.user-option{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
//computer, user가 선택한 이미지(값)을 표시할 이미지
let gameImage = document.querySelectorAll('.result-img img');
let userOption = document.getElementsByClassName('user-option');
//이벤트 연결
for(let i=0;i<userOption.length;i++){
userOption[i].onclick=function(){
//computer가 선택한 값
let com_answer = Math.floor(Math.random()*3); //0 가위, 1 바위, 2 보
//computer가 선택한 이미지 표시하기
gameImage[0].style.display = '';
gameImage[0].src = '../files/timg' + com_answer + '.png';
//user가 선택한 값
let user_answer = this.id.substr(3); //이벤트가 발생한 태그
//user가 선택한 이미지 표시하기
gameImage[1].style.display = ''; //none을 지워줌
gameImage[1].src = '../files/timg' + user_answer + '.png';
//가위바위보 결과 표시하기
/*
컴퓨터 사용자 컴-사 결과
0 0 0 무
0 1 -1 패
0 2 -2 승
-----------------------
1 0 1 승
1 1 0 무
1 2 -1 패
-----------------------
2 0 2 패
2 1 1 승
2 2 0 무
*/
let result;
let num = com_answer - user_answer; //승부의 결과 구하기
if(num == 0){
//컴퓨터,사용자
result = ['무','무'];
}else if(num == -2 || num == 1){
result = ['승','패'];
}else if(num == -1 || num == 2){
result = ['패','승'];
}
let showResult = document.querySelectorAll('.result-img span');
for(let i=0;i<showResult.length;i++){
if(result[i] == '패'){
gameImage[i].width = 100;
showResult[i].style.display = 'none';
}else{
gameImage[i].width = 220;
showResult[i].style.display = ''; //none을 지워줘서 보이게 만듦
}
showResult[i].innerHTML = (i == 0 ? '컴퓨터' : '사용자') + result[i]; //i가 0이면 컴퓨터, 아니면 사용자 출력
}
};
}
};
</script>
</head>
<body>
<h1>가위바위보 게임</h1>
<div id="game">
<div>
<img class="user-option" id="img0" src="../files/timg0.png" width="90">
<img class="user-option" id="img1" src="../files/timg1.png" width="90">
<img class="user-option" id="img2" src="../files/timg2.png" width="90">
</div>
<div>
<div class="result-img"><img style="display:none;" alt="컴퓨터"><span></span></div>
<div class="result-img"><img style="display:none;" alt="사용자"><span></span></div>
</div>
</div>
</body>
</html>3) 상품 구매
<title>상품 구매</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
h2{
margin-top:40px;
text-align:center;
}
table{
margin:40px auto;
width:600px;
}
td{
padding-left:10px;
}
#buy{
padding:10px 10px;
}
img{
width:100px;
}
#price{
text-align:center;
}
#preview{
border:3px solid gray;
margin:30px auto;
text-align:center;
height:50px;
}
input[type="submit"]{
width:70px;
height:30px;
margin-left:500px;
background-color:#289ca0;
color:white;
font-size:1.3em;
font-weight:bold;
}
span{
font-size:20px;
font-weight:bold;
}
span#total{
color:red;
}
tr#id{
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
//상품 가격
const product = {
c0:200000,
c1:100000,
c2:50000,
c3:150000,
c4:100000
};
let sum = 0;
let ship = 0;
//const inputs = document.getElementsByName('goods');
const inputs = document.querySelectorAll('input[type="checkbox"]');
for(let i=0;i<inputs.length;i++){
inputs[i].onclick=function(){
if(this.checked){ //체크박스 선택시
sum += product[this.id]; //상품 가격 누적
}else{ //체크박스 해제시
sum -= product[this.id]; //상품 가격 차감
}
//배송비 구하기
if(sum > 0 && sum < 300000){
ship = 5000;
}else{
ship = 0;
}
//구매 비용과 배송비를 화면에 표시
const spans = document.getElementsByTagName('span');
//총 상품가격
spans[0].innerHTML = sum.toLocaleString();
//배송비
spans[1].innerHTML = ship.toLocaleString();
//총 주문금액
spans[2].innerHTML = (sum + ship).toLocaleString();
};
}
};
</script>
</head>
<body>
<!--
구매 물건 : 가방(20만원),코트(10만원),청바지(5만원),식사권(15만원),신발(10만원)
-->
<h2>상품 구매</h2>
<form action="order.jsp" method="post">
<table>
<caption>구매 상품 목록</caption>
<tr>
<td><img src="../files/bag.jpg"></td>
<td><img src="../files/coat.jpg"></td>
<td><img src="../files/jeans.jpg"></td>
<td><img src="../files/giftCard.jpg"></td>
<td><img src="../files/shoes.jpg"></td>
</tr>
<tr>
<td><input id="c0" type="checkbox" name="goods" value="bag"> bag</td>
<td><input id="c1" type="checkbox" name="goods" value="coat"> coat</td>
<td><input id="c2" type="checkbox" name="goods" value="jeans"> jeans</td>
<td><input id="c3" type="checkbox" name="goods" value="giftcard"> gift card</td>
<td><input id="c4" type="checkbox" name="goods" value="shoes"> shoes</td>
</tr>
<tr id="price">
<td>(20만원)</td>
<td>(10만원)</td>
<td>( 5만원)</td>
<td>(15만원)</td>
<td>(10만원)</td>
</tr>
<tr height="100">
<td colspan="5">*<b>30만원 미만 결제</b>시 5000원의 배송비가 추가됩니다.</td>
</tr>
<tr>
<td id="preview" colspan="5">총 상품가격 <span>0</span> 원 +
총 배송비 <span>0</span> 원 =
총 주문금액 <span id="total">0</span> 원</td>
</tr>
<tr>
<td id="buy" colspan="5">
<input type="submit" value="buy">
</td>
</tr>
</table>
</form>
</body>
</html>4) TodoList
<title>할 일 목록(TodoList)</title>
<link rel="stylesheet" href="https:unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<style type="text/css">
body{
margin:0;
padding:0;
font-family:sans-serif;
}
.title{
text-align:center;
font-weight:bold;
font-size:20pt;
}
.todo-done{
text-decoration:line-through;
}
.container{
padding:10px;
}
.pointer{
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="card card-body bg-light">
<div class="title">할 일 목록(TodoList)</div>
</div>
<div class="card card-default">
<div class="card-body">
<div class="ol">
<div class="input-group">
<input type="text" class="form-control" name="msg" placeholder="할 일을 여기에 입력!" id="todo">
<span class="btn btn-primary input-group-addon" id="add_btn">추가</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<ul class="list-group" id="list"></ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
let ts = new Date().getTime(); //유일한 식별값을 사용하기 위해서 숫자로 된 날짜값 활용
//초기 데이터 배열 생성
const todoList = [
{id:ts,todo:"도서관에서 책 대여하기",completed:true},
{id:ts+1,todo:"영화 보기",completed:false},
{id:ts+2,todo:"저녁 장보기",completed:false},
{id:ts+3,todo:"운동하기",completed:false}
];
//목록 처리
function selectList(){
//목록을 표시하기 위해 ul을 호출
let listGroup = document.getElementById('list');
listGroup.innerHTML = ''; //초기화
//목록 표시
todoList.forEach(function(element,index,array){
let output = '';
if(element.completed){ //할 일 체크가 true
output += '<li class="list-group-item list-group-item-success">';
output += '<span class="pointer todo-done check-btn" id="' + element.id + '">' + element.todo + '(완료)</span>';
}else{ //할 일 체크가 false
output += '<li class="list-group-item">';
output += '<span class="pointer check-btn" id="' + element.id + '">' + element.todo + '</span>';
}
output += '<span class="float-end badge bg-secondary pointer delete-btn" id="' + element.id + '">삭제</span>';
output += '</li>';
listGroup.innerHTML += output;
});
//삭제 이벤트 연결
let delete_btn = document.getElementsByClassName('delete-btn');
for(let i=0;i<delete_btn.length;i++){
delete_btn[i].onclick=function(){
//이벤트가 발생한 태그의 id 반환
let id = this.id;
//삭제하고자 하는 아이템의 id가 있는 todoList 배열의 객체 구하고
//해당 객체의 배열의 인덱스 반환
let index = todoList.findIndex((item)=> id == item.id);
//해당 객체 삭제
todoList.splice(index,1);
selectList(); //배열에서 객체가 삭제되었기 때문에 목록을 새로 호출
};
} //end of for
//할 일 체크 이벤트 연결
let check_btn = document.getElementsByClassName('check-btn');
for(let i=0;i<check_btn.length;i++){
check_btn[i].onclick=function(){
//이벤트가 발생한 태그의 id 반환
let id = this.id;
//삭제하고자 하는 아이템의 id가 있는 todoList 배열의 객체 구하고
//해당 객체의 배열의 인덱스 반환
let index = todoList.findIndex((item)=> id == item.id);
//할 일 체크가 true --> false, false --> true로 변경
todoList[index].completed = !todoList[index].completed;
selectList(); //체크 또는 체크를 해제했기 때문에 목록을 새로 호출
};
} //end of for
} //end of selectList
//초기 데이터 설정
selectList();
let todo = document.getElementById('todo');
//엔터 키 이벤트 연결
todo.onkeydown=function(event){
if(event.keyCode == 13){
addTodo();
}
}
//추가 버튼 이벤트 연결
let add_btn = document.getElementById('add_btn');
add_btn.onclick=function(){
addTodo();
};
//등록 처리 함수
function addTodo(){
if(todo.value==''){
alert('할 일을 입력하세요!');
todo.focus();
return;
}
//배열의 맨 뒤에 객체 추가
//todoList.push({id:new Date().getTime(),todo:todo.value,completed:false});
//배열의 맨 앞에 객체 추가
todoList.unshift({id:new Date().getTime(),todo:todo.value,completed:false});
todo.value = ''; //초기화
selectList(); //새로 등록된 데이터를 표시하기 위해 목록을 다시 호출
}
</script>
</body>
</html>