▼코드 보기▼

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6-1 연습문제</title>

<style type="text/css">
	#print_box{
		border: 1px solid blueviolet;
		width: 300px;
		height: 100px;
		padding-left: 15px;
	}
</style>

<script type="text/javascript">
function Person(name, age, address) {
	this.name=name;
	this.age=age;
	this.address=address;
	this.toString = function () {
		return this.name+"("+age+")"+ " - "+address+"<br/>";
	}
}

function print1() {
	var p1 = new Person("이순신", 25, "서울 구로구 구로동");
	var p2 = new Person("강감찬", 32, "경기도 부천시 고강동");
	var p3 = new Person("김유신", 37, "경기도 안양시 평촌동");
	
	var arr_p = [];
	arr_p.push(p1);
	arr_p.push(p2);
	arr_p.push(p3);
	
	box = document.querySelector("#print_box");
	
	for ( var i in arr_p) {
		box.innerHTML += "<li>"+arr_p[i]+"</li>";
	}
	
}

</script>

</head>
<body>

<div>
	<input type="button" onclick="print1()" style="width: 100px; height: 30px;" value="객체출력하기">
	<div id="print_box"><ul></ul></div>
</div>

</body>
</html>

'Front end > ↳JavaScript예제' 카테고리의 다른 글

조건문 활용한 학점 출력 만들기  (0) 2021.01.18
중첩 if문 활용한 주사위 게임 만들기  (0) 2021.01.18

 

▼코드보기▼

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건문 활용한 학점 출력</title>

<script type="text/javascript">
	function choose(){
		
		var in_sc = document.inputForm.score.value;
		var in_degree = document.querySelector("#result");
		console.log(in_sc);
		
		if(isNaN(in_sc) || (0 > in_sc || in_sc > 100)){
			alert("0~100숫자만 입력하세요.");
			
		}else{
			if(90 <= in_sc && in_sc <=100){
				in_degree.innerHTML += "<strong>"+in_sc+"(A)</strong><br/>";
				
			}else if (80 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(B)</strong><br/>";
				
			}else if (70 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(C)</strong><br/>";
				
			}else if (60 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(D)</strong><br/>";
				
			}else {
				in_degree.innerHTML += "<strong>"+in_sc+"(F)</strong><br/>";
				
			}
		}
		
	}

</script>
</head>
<body>

	<form action="" name="inputForm">
		점수를 입력해주세요.
		<input type="text" name="score" id="score">
		<input type="button" value="체크하기" onclick="choose()">
	</form>
	
	<div id="result"></div>


</body>
</html>
결과

'Front end > ↳JavaScript예제' 카테고리의 다른 글

객체 정의하고 출력하기  (0) 2021.01.18
중첩 if문 활용한 주사위 게임 만들기  (0) 2021.01.18
  1. 컴퓨터는 1~6까지의 난수를 발생하여 사용자가 입력한 숫자랑 비교하기
  2. 사용자가 1~6 이외의 숫자나 문자, 공백을 입력했을 경우 경고창 띄우기
  3. confirm() 함수를 이용해  확인 누를경우 -> 높은 수가 이기는 게임,  취소 누를 경우 -> 낮은 수가 이기는 게임 
  4. 게임 룰, 컴퓨터의 숫자, 사용자가 입력한 숫자 및 게임의 결과 알림 창 띄우기

 

▼코드 보기▼

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중독성 강한 주사위 게임</title>
<script type="text/javascript">
	
	function diceGame(){
		var c_num = Math.floor((Math.random() * 6)+1);
		var u_num = document.inputForm.number.value;
		var rule;
		
		if(isNaN(u_num)){
			alert("입력한 값은 숫자가 아닙니다.\n숫자로 1~6까지 입력해주세요.");
			
		}else if(u_num > 6){
			alert("숫자 입력 범위를 초과 하였습니다.\n숫자는 1 ~ 6까지 입력해주세요.");
			
		}else if(u_num == 0 || u_num.trim == ""){
			alert("0을 입력하였거나 숫자가 입력되지 않았습니다.\n숫자는 1 ~ 6까지 입력해주세요.");
			
		}else{
			rule = confirm("높은 수를 win으로 하시겠습니까?");
			console.log(rule);
			
			if(rule){ // 높은 수가 이기는 게임
				if(u_num > c_num){
					alert("게임 룰은 높은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 당신이 이겼습니다.");
				}else if(u_num == c_num){
					alert("게임 룰은 높은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 비겼습니다.")
				}else{
					alert("게임 룰은 높은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 당신이 졌습니다.")
				}
				document.inputForm.number.value="";
				
			}else{
				if(u_num < c_num){
					alert("게임 룰은 낮은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 당신이 이겼습니다.");
				}else if(u_num == c_num){
					alert("게임 룰은 낮은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 비겼습니다.")
				}else{
					alert("게임 룰은 낮은 숫자가 승리!\n"
							+"컴퓨터 숫자 : "+c_num+", 입력한 숫자 : "+u_num+" 당신이 졌습니다.")
				}
				document.inputForm.number.value="";
			}
		}
		
	}
	
</script>

</head>
<body>

<form action="" name="inputForm">
	숫자입력 : <input type="text" name="number" id = "number">
	<input type="button" value="체크하기" onclick="diceGame()">
</form>

</body>
</html>

'Front end > ↳JavaScript예제' 카테고리의 다른 글

객체 정의하고 출력하기  (0) 2021.01.18
조건문 활용한 학점 출력 만들기  (0) 2021.01.18

+ Recent posts

티스토리툴바