[javascript] 조건문 (+querySelector, getElementById)
by mini_min[javascript] 조건문
✔️ 조건문
: 특정 조건이 참인 경우에 실행하는 명령의 집합이다.
: 두 가지 조건문을 지원하다.
📓 거짓으로 취급하는 값
false, undefined, null, 0, NaN, 빈문자열 ""
📓 조건문에 전달되었을 때 모든 개체는 참으로 평가된다.
var b = new Boolean(false);
if(b) {} // if 조건은 참으로 평가된다.
//조건문에서 거짓 .: false, undefined, null, 0, NaN, ""빈문자열
var a; //undefined 변수만 선언하고 값이 없음
if(a) {
console.log("참");
} else {
console.log("거짓");
}
// undefined 라서 결과 거짓
// null 이 아닌 모든 객체는 참이다.
var b = new Boolean(false); //사용 권장 x
console.log(b); //Boolean
console.dir(b);
console.log(b.valueOf()); //false
//부울린은 객체라서, if(b) 해도 참으로 평가한다.
if(b) {
console.log("참");
} else {
console.log("거짓");
}
✔️ 조건문 종류
✨ if ~ else 문
<!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 sendOk() {
const f = document.myForm;
//document.myForm.name.vaule
//if( f.name.value === "" ) 이랑 같은 말
if(! f.name.value ){
alert("이름은 필수 입력입니다.")
f.name.focus();
return;
}
if(! f.subject.value ){
alert("과목은 필수 입력입니다.")
f.subject.focus();
return;
}
//입력도 필수로 하기 / 숫자만 입력 시키기
//isNaN = 숫자가 아니면 참. 안에 실행
if(! f.score.value || isNaN(f.score.value) ){
alert("점수는 숫자만 입력 가능입니다.")
f.score.focus();
return;
}
let s = f.name.value + ", " + f.subject.value + ", " + f.score.value;
alert(s);
}
</script>
</head>
<body>
<h3> 조건문 </h3>
<!-- form 태그 안에 있으면 접근이 매우 쉬워진다. -->
<form name="myForm">
<p> 이름 : <input type="text" name="name"> </p>
<p> 과목 : <input type="text" name="subject"> </p>
<p> 점수 : <input type="text" name="score"> </p>
<p>
<button type="button" onclick="sendOk()"> 확인 </button>
</p>
</form>
</body>
</html>💡 if 문으로 input 3개에 값이 입력되지 않으면 return 되도록 코드를 작성했다.
.focus() : 포커싱 하도록 만드는 함수
f.name.value : myForm 에 name이 'name' 인 input 의 value (값) 을 말한다.
function result() {
//id 로 접근하기
//let n = document.getElementById("num").value;
//선택자로 접근하기 : querySelector (아이디, 클래스, 태그, 가상 선택자 등...)
let n = document.querySelector("#num").value;
let s;
n = parseInt(n);
if(n%2===0 && n%3===0) {
s = "2와 3의 배수입니다.";
} else if(n%2===0) {
s = "2의 배수입니다."
} else if(n%3===0) {
s = "3의 배수입니다."
} else {
s = "2 또는 3의 배수가 아닙니다.";
}
alert(n + " - > " + s);
}💡 id 로 접근하는건 getElementById 지만,
선택자로 접근하는건 querySelector 를 쓴다! (아이디, 클래스, 태그, 가상 선택자 등...)
✨ switch 문
function result() {
//id 로 접근하기
//let n = document.getElementById("num").value;
//선택자로 접근하기 : querySelector (아이디, 클래스, 태그, 가상 선택자 등...)
let n = document.querySelector("#score").value;
let s;
if(!n || isNaN(n)) {
alert("점수는 숫자만 가능합니다.")
document.querySelector("#score").focus();
return;
}
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);
}💡 Math.floor(X) : X를 넘지 않는 최대 정수를 뜻한다.
Math.floor(n/10) : n 값을 10으로 나눠서, 정수 10~6 사이 값을 case 로 분류해서 반환한다.
✨ 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">
var s, n;
//while
s=0;
n=0;
while(n < 100){
n++;
s+=n;
}
console.log('while: ' + n + ', ' + s);
//do!while
s=0;
n=0;
do{
n++;
s+=n;
}while(n < 100);
console.log('do while: ' + n + ', ' + s);
//for 문 이용
s=0;
for(n=1; n<100; n++){
s+=n;
}
console.log('for: ' + n + ', ' + s);
</script>
</head>
<body>
<h3> 반복문 </h3>
</body>
</html>
🔒 정규식을 쓴 for 문으로 구구단 만들기
if( ! /^[1-9]{1}$/.test(dan)) {
document.querySelector("#num").focus();
return;
}💡위에 쓰인 정규식의 의미
^: 처음부터
[1-9] 사이의 숫자가
{1} 1개가 온다.
- 먼저 HTML과 CSS 문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.title {
font-weight: 700;
color: blue;
}
</style>
</head>
<body>
<h3> 반복문 </h3>
<p>
<input type="text" id="num" placeholder="원하는 단">
<button type="button" onclick="result();">확인</button>
</p>
<hr>
<div id="resultLayout"></div>function result(){
let dan, out;
dan = document.querySelector("#num").value;
//{1} : 숫자 한글자만 가능
if( ! /^[1-9]{1}$/.test(dan)) {
document.querySelector("#num").focus();
return;
}
dan = parseInt(dan);
//out = "<p style='font-weight:700; color:blue;'>**" + dan + "단**</p>";
out = "<p class='title'>**" + dan + "단 **</p>";
for(let n=1; n<=9; n++){
out+=dan + ' * ' + n + " = " + (dan*n) + "<br>";
}
// innerHTML :요소에 HTML 을 설정하거나 변환
//resultLayout div 태그 안에 태그를 때려넣은것임!
document.querySelector("#resultLayout").innerHTML = out;
}
🔒 문제 : 1~100까지 수중 2또는 3의 배수를 제외한 수의 합
<!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;
//1~100까지 수중 2또는 3의 배수를 제외한 수의 합
s = n = 0;
while(n < 100){
n++;
if(n%2===0 || n%3===0){
continue;
}
s += n;
}
console.log("결과: " + s);
</script>
</head>
<body>
</body>
</html>
🔒 문제 : 1부터 n까지의 자연수 합이 최소 1000이상이 되는 n과 s 출력
<!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 n, s;
n = s = 0;
//1부터 n까지의 자연수 합이 최소 1000이상이 되는 n과 s 출력
while(true) {
n++;
if(s>=1000){
break;
}
s+=n;
}
console.log(n + ", " + s)
</script>
</head>
<body>
<h3> break </h3>
</body>
</html>
🔒 문제 : 합/짝수합/홀수합 버튼에 따라 합 출력하기
- HTML/CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<form name="myForm" action="javascript:result();">
<p>
<input type="radio" name="opt" value="1" checked="checked"> 합
<input type="radio" name="opt" value="2"> 짝수합
<input type="radio" name="opt" value="3"> 홀수합
</p>
<p>
<input type="number" name="num" style="width: 150px;"
min="0"
required="required"
placeholder="숫자를 입력하세요">
<button type="button" onclick="result();"> 결과 </button> <!-- button 에 type 이 없으면 submit 버튼이다. -->
</p>
</form>
<hr>
<div id="resultLayout"></div>
- 자바스크립트 (함수 result())
<script type="text/javascript">
function result() {
const f = document.myForm;
let num = parseInt(f.num.value);
let c = f.opt.value;
let s = 0;
let start = c === "2" ? 2 : 1;
let step = c === "1" ? 1 : 2;
for(let n=start; n<=num; n+=step){
s += n;
}
document.querySelector("#resultLayout").innerHTML = s;
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [javascript] arguments 객체 / 디폴트 매개변수 / Rest 매개변수 (0) | 2022.09.19 |
|---|---|
| [javascript] 함수 (함수 선언방식/함수 표현식/기명함수) / 호이스팅 (0) | 2022.09.19 |
| [javascript] window 객체의 기본 메소드 / 타이머 함수 (0) | 2022.09.18 |
| [javascript] 내장 함수 : parseInt / Number / isFinite / eval / encodeURIComponent (0) | 2022.09.18 |
| [javascript] 연산자 종류 (0) | 2022.09.18 |
블로그의 정보
개발자 미니민의 개발로그
mini_min