프로그래밍/JavaScript 자바스크립트
자바스크립트 - 반복문, if문, prompt, confirm
Heidong
2021. 9. 27. 20:03
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function sub1() {
var s = prompt("수식을 입력 하세요", ""); // 3+5
var result = eval(s);
alert(s + "=" + result);
}
function sub2() {
if(confirm("삭제 하시겠습니까 ?")) {
alert("삭제 했습니다.");
}
}
</script>
</head>
<body>
<h3>prompt와 confirm</h3>
<p>
<button type="button" onclick="sub1()">계산기</button>
<button type="button" onclick="sub2()">삭제</button>
</p>
</body>
</html>- prompt() 함수는 문자를 입력 할 수 있는 창을 띄워줌
그리고 입력한 값을 활용 할 수 있음.
- 계산기 버튼에 onclick로 sub1() 함수를 호출한다.
그리고 confirm() 함수로 예 아니오의 확인 메세지 창을 띄울 수 있다.
if문을 활용해서 확인을 눌렀을때와 취소를 눌렀을때의 이벤트를 설정 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 래퍼 객체(wrapper object) : 숫자 문자열등 원시 타입이 프로퍼티에 접근하기 위해 생성되는 임시 객체
var s = "자바스크립트"; // 문자열 생성
var len = s.length; // String 프로퍼티인 length 속성 사용
console.log("문자열길이:"+len);
// String 객체
var s2 = new String("자바스크립트");
len = s2.length;
console.log("문자열길이:"+len);
console.log(s == s2); // true. ==(동등) 연산자는 리터널 값과 레퍼 객체를 동일하게 본다.
console.log(s === s2); // false. ===(일치) 연산자는 리터널 값과 레퍼 객체를 구별 한다.
console.log(typeof s); // string 타입
console.log(typeof s2); // object 타입
// 전역 값 속성
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
</script>
</head>
<body>
<h3>전역 속성</h3>
</body>
</html>- String과 Object의 관계를 비교할때 조심 해야 한다.
- s1과 s2를 == 이꼴을 2개로 비교를 하면 true가 나오지만 === 3개로 비교하면 false가 나온다.
그리고 NaN인지 아닌지 확인하고 싶을때는 isNaN() 함수를 사용하자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function result() {
// var n = document.getElementById("num").value; // id로 접근
var n = document.querySelector("#num").value; // 선택자로 접근
/*
if(! n ) {
document.getElementById("num").focus();
return;
}
if( isNaN(n) ) {
document.getElementById("num").focus();
return;
}
*/
n = parseInt(n);
if(n % 2 == 0 && n % 3 == 0) {
alert(n + "은 2 또는 3의 배수 입니다.");
} else if(n % 2 == 0) {
alert(n + "은 2의 배수 입니다.");
} else if(n % 3 == 0) {
alert(n + "은 3의 배수 입니다.");
} else {
alert(n + "은 2 또는 3의 배수가 아닙니다.");
}
}
</script>
</head>
<body>
<p>
숫자 : <input type="text" id="num">
<button type="button" onclick="result()">확인</button>
</p>
</body>
</html>- 자바스크립트에서 if문과 switch문 사용 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function result() {
var n = document.querySelector("#num").value;
if( isNaN(n) ) {
document.querySelector("#num").focus();
return;
}
var s;
n = parseInt(n);
// Math.floor(x) : x를 넘지 않는 최대 정수
switch( Math.floor(n / 10) ) {
case 10:
case 9: s = "A"; break;
case 8: s = "B"; break;
case 7: s = "C"; break;
case 6: s = "D"; break;
default: s = "F"; break;
}
alert(n + " : " + s)
}
</script>
</head>
<body>
<form action="javascript:result();">
<p>
<input type="text" name="num" id="num" required="required" placeholder="숫자">
<button>확인</button>
</p>
</form>
</body>
</html>switch문을 활용해서 점수에 해당하는 알파벳을 뽑아내는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var s, n;
// while
s = 0;
n = 0;
while(n < 10) {
n++;
s += n;
}
console.log("while : " + n + ", " + s); // 10, 55
// do~while
s = 0;
n = 0;
do {
n++;
s += n;
} while(n < 10);
console.log("do~while : " + n + ", " + s); // 10, 55
// for
s = 0;
for(n = 1; n <= 10; n++) {
s += n;
}
console.log("for : " + n + ", " + s); // 11, 55
</script>
</head>
<body>
<h3> 반복문 </h3>
</body>
</html>- while, do-while, for문의 반복문들을 사용한 모습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function result() {
var dan = document.querySelector("#num").value;
var out;
if( ! /^[1-9]{1}$/.test(dan) ) {
document.querySelector("#num").focus();
return;
}
dan = parseInt(dan);
out = "<p style='font-weight:bold; color:blue;'>** " + dan +"단 **</p>";
for(var n = 1; n <= 9; n++) {
out += dan + " * " + n + " = " + (dan*n) + "<br>";
}
document.querySelector("#resultLayout").innerHTML = out;
}
</script>
</head>
<body>
<p>
<input type="text" id="num" placeholder="원하는 단">
<button type="button" onclick="result();">확인</button>
</p>
<hr>
<div id="resultLayout"></div>
</body>
</html>- 자바스크립트에서 구구단 출력하기
document.querySelector("#resultLayout").innerHTML = out;
이 기능으로 인해서 HTML 부분에서 id 코드가 resultLayout인 부분에 출력이 됨.
out = "<p style='font-weight:bold; color:blue;'>** " + dan +"단 **</p>";
이런식으로 변수에 값 넣을때 style도 줄 수 있음.
반응형