다연이네

[days03] 숫자 입력하면 판별(홀/짝, 수우미양가 등), 합 출력 본문

Web/JavaScript

[days03] 숫자 입력하면 판별(홀/짝, 수우미양가 등), 합 출력

　다연　 2020. 12. 11. 13:54
반응형

 1. 숫자를 입력하면 홀수/짝수 판별하기 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	정수 : <input type="text" id="n" name="n" />
	<button>확인</button>
	<p id="demo"></p>

<script>
	/* js data type ? undefined, number, string, object(array), boolean, function */
	/* js operator */
	document.querySelector("button").addEventListener("click", function(e) {
		var txtbox=document.querySelector("#n");
		var n =txtbox.value;
		
			var demo =document.querySelector("#demo");
		if (n%2 == 0) {
			demo.innerText="EVEN";
		} else {
			demo.innerText="ODD";
		}
		txtbox
		.select()
		.focus();
	});
	
</script>
</body>
</html>

기억하기 1 - input 태그에 어떤 값을 입력해도(숫자를 입력해도) 타입은 string이다.

 

기억하기 2 - 겹치는 문장은 하나로 빼자

var txtbox=document.querySelector("#n").value;

document.querySelector("#n").select();

이렇게 하지 말고

 

var txtbox=document.querySelector("#n");

var n =txtboox.value;

txtbox.select();

이렇게 하기로

 

 

 

 2. 국어점수 입력하면 성적 출력하기 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	국어점수 : <input type="text" id="kor" name="kor" />
	<button>등급확인</button>
	<p id="demo"></p>

<script>
	/* js data type ? undefined, number, string, object(array), boolean, function */
	/* js operator */
	document.querySelector("button").addEventListener("click", function(e) {
		var txtbox=document.querySelector("#kor");
		var kor =txtbox.value;

//입력을 하지 않은 경우 가
//실수를 입력한 경우 가
//1A 문자가 입력된 경우
//0~100 외의 정수가 입력된 경우
		
			var demo =document.querySelector("#demo");
			
			
		if(kor>=0 && kor<=100){
			if (kor>= 90) {
				demo.innerText="수";
			} else if(kor>=80){
				demo.innerText="우";
			} else if(kor>=70){
				demo.innerText="미";
			} else if(kor>=60 ){
				demo.innerText="양";
			}else{
				demo.innerText="가";
			}
		}else{
			demo.innerText="국어 점수 범위 벗어남(0~100)";
		}
		 txtbox.select();

	});
	
</script>
</body>
</html>

 

 3. for문 사용해서 1~n 합 출력하기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	정수 : <input type="text" id="n" name="n" />
	<button>1~n 합</button>
	<p id="demo"></p>

<script>
	/* js data type ? undefined, number, string, object(array), boolean, function */
	/* js operator */
	document.querySelector("button").addEventListener("click", function(e) {
		var txtbox=document.querySelector("#n");
		var n =txtbox.value;
		var demo =document.querySelector("#demo");
		
		var hap = "";
		var sum=0;
		for (var i = 1; i <=n; i++) {
			hap+= i+ (n==i?"":"+");
			sum+=i;
		}	
		demo.innerText = hap+"="+sum;
		
		 txtbox.select();

	});
	
</script>
</body>
</html>

 

 3-2. while문으로 바꾸기 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	정수 : <input type="text" id="n" name="n" />
	<button>1~n 합</button>
	<p id="demo"></p>

<script>
	/* js data type ? undefined, number, string, object(array), boolean, function */
	/* js operator */
	document.querySelector("button").addEventListener("click", function(e) {
		var txtbox=document.querySelector("#n");
		var n =txtbox.value;
		var demo =document.querySelector("#demo");
		
		var hap = "";
		var sum=0;
		var i=1;
		while (i<=n) {
			hap+= i+ (n==i?"":"+");
			sum+=i;
			i++;
		} 
		
		demo.innerText = hap+"="+sum;
		
		 txtbox.select();

	});
	
</script>
</body>
</html>

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days03] 숫자와 관련된 함수  (0) 2020.12.11
[days03] for in(), for of()  (0) 2020.12.11
[days03] 문제  (0) 2020.12.11
[days02] 문자열 메소드  (0) 2020.12.10
[days02] js 변수(함수를 변수에 담을때, 지역변수, 전역변수)  (0) 2020.12.10
'Web/JavaScript' Related Articles more
Comments