코리아 IT아카데미/Javascript·Jquery~~~
1일차 | 연산자, 조건문
Sharon kim
2021. 12. 1. 21:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_대입연산자</title>
<!-- var를 사용하지 않는 이유
1.같은 이름의 변수를 선언할 수 있음
2. 지역변수와 전역변수의 구분이 없음
3. 함수 안에 쓰일 때는 지역변수로 사용됨-->
</head>
<body>
<h1>대입연산자</h1>
<!-- var 변수명 = 5;
res = res + 1; res += 1;
res = res - 1; res -= 1;
res = res * 1; res *= 1;
res = res / 1; res /= 1;
res = res % 1; res %= 1; -->
<script>
var res = 20;
document.write("자바스크립트 예제");
res += 10;
document.write("<br>" + res);
res -= 10;
document.write("<br>" + res);
res *= 10;
document.write("<br>" + res);
res /= 10;
document.write("<br>" + res);
res %= 10;
document.write("<br>" + res);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_증감연산자</title>
</head>
<body>
<h1>증감연산자</h1>
<!--
종류 ++, -- 1씩 증가, 감소
전위 연산자 (계산 후 바로 값을 변수에 적용)
var ++res, --res
후위 연산자 (계산 후 바로 값을 적용하지 않고 다시 변수를 호출하거나
다시 계산을 할 때는 이전에 연산된 후위연산자 값을 적용한다.)
var res++, res--
var res = 20;
++res(20 + 1 = 21)
res++(20 + 1 = 20 나중에 호출할 떄 21)
-->
<script>
a = 10;
b = 20;
c = 3;
document.write(++a + "<br>"); // 11
document.write(a++ + "<br>"); // 11(12)
document.write(c++ + "<br>"); // 3(4)
document.write(++a + b++ + "<br>") //13 + 20(21)
document.write(++a + ++b) //36
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3_비교연산자</title>
</head>
<body>
<h1>비교연산자</h1>
<!--
>:크다
<:작다
>=:크거나 같다
<=: 작거나 같다
==: 같다 ('10' == 10는 true -> 타입이 달라도 값이 같으면 참)
===: 같다 ('10' === 10는 tfalse -> 타입과 값이 같아야 참)
!= : 다르다 (값만 같으면 false, 값이 다르면 true)
!== : 다르다 (값, 타입 둘 중 하나만 다르면 true)
-->
<script>
a = 10;
b = 5;
c = a > b; // 참인 상태
str1 = "5"
document.write(c + "<br>") //true
c = a < b;
document.write(c + "<br>") //false
c = a != b;
document.write(c + "<br>") //true
c = b == str1
document.write(c + "<br>") //true
c = b === str1
document.write(c + "<br>") //false
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4_논리연산자</title>
</head>
<body>
<h1>논리연산자</h1>
<!--
논리연산자는 주어진 논리식을 판단하여 참과 거짓을 반환합니다.
and (&&) 연산
두 논리식 모두 참이면 참을 반환하는 연산자
true true ture
ture false false
false true false
false false false
or(||) 연산
두 논리식 중 하나라도 참이면 참을 반환하는 연산자
not(!) 연산자
논리식의 결과가 참이면 거짓으로, 거짓이면 참으로 변환하는 연산자
true -> false
false -> true
삼항연산자
조건식에 따른 참, 거짓에 따라 반환값이 달라지는 연산자
true false
------ ------
변수(상수) = 조건식? 결과1 : 결과2
-------
true 또는 false
var a = 20;
var b = 10;
var max = a > b ? c = "true" : c = "false";
document.write(c)
-->
<script>
a = "10";
b = "10";
c = a < b && a == b
document.write(c + "<br>");
c = a < b || a == b
document.write(c + "<br>");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>if_01</title>
</head>
<body>
<script>
'use strict'//자바스크립트를 엄격하게 문법을 입력하겠다고 선언
const age = Number(prompt('나이를 입력하세요'));
// if(age > 19){
// document.write("성인입니다.");
// }//else{document.write("미성년입니다.")
//}
if (age > 19) document.write("성인입니다.");
//const age2 = age > 19 ? document.write("성인입니다.") : document.write("미성년입니다.")
</script>
</body>
</html> 'use strict'
//if_02
const blood = prompt('혈액형을 입력하세요') // A B O AB
const type = prompt('RH+ 또는 RH- 를 선택하세요'); // + -
//당신의 혈액형은 a형이며 타입 RH+ 입니다.
//선행 처리 알려 주기 위해 전부 if문
// if(blood = "A"){
// if(type == "+"){
// document.write("당신의 혈액형은 A형이며 타입은 RH+입니다");
// }
// if (type == "-") {
// document.write("당신의 혈액형은 A형이며 타입은 RH-입니다");
// }
// }
// if (blood = "B") {
// if (type == "+") {
// document.write("당신의 혈액형은 B형이며 타입은 RH+입니다");
// }
// if (type == "-") {
// document.write("당신의 혈액형은 B형이며 타입은 RH-입니다");
// }
// }
// if (blood = "O") {
// if (type == "+") {
// document.write("당신의 혈액형은 O형이며 타입은 RH+입니다");
// }
// if (type == "-") {
// document.write("당신의 혈액형은 O형이며 타입은 RH-입니다");
// }
// }
// if (blood = "AB") {
// if (type == "+") {
// document.write("당신의 혈액형은 AB형이며 타입은 RH+입니다");
// }
// if (type == "-") {
// document.write("당신의 혈액형은 AB형이며 타입은 RH-입니다");
// }
// }
if (blood == "A") {
if (type == "+") {
document.write("당신의 혈액형은 A형이며 타입은 RH+입니다");
}else{
document.write("당신의 혈액형은 A형이며 타입은 RH-입니다");
}
}else if (blood == "B") {
if (type == "+") {
document.write("당신의 혈액형은 B형이며 타입은 RH+입니다");
} else{
document.write("당신의 혈액형은 B형이며 타입은 RH-입니다");
}
}else if (blood == "O") {
if (type == "+") {
document.write("당신의 혈액형은 O형이며 타입은 RH+입니다");
} else{
document.write("당신의 혈액형은 O형이며 타입은 RH-입니다");
}
}else if (blood == "AB") {
if (type == "+") {
document.write("당신의 혈액형은 AB형이며 타입은 RH+입니다");
}else{
document.write("당신의 혈액형은 AB형이며 타입은 RH-입니다");
}
} 'use strict'
//switch_01
const num = prompt('번호를 선택하세요')
switch(num){
case "1" :
document.write('예금 조회를 선택하셨습니다.');
break;
case "2" :
document.write('예금 출금을 선택하셨습니다.');
break;
case "3":
document.write('예금 입금을 선택하셨습니다.');
break;
case "4":
document.write('예금 이체를 선택하셨습니다.');
break;
default :
document.write('번호를 잘못 누르셨습니다.');
}
// switch문
// switch문은 주어진 조건값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문
// switch(변수 또는 상수){
// case 값1:
// 변수 또는 상수의 값이 값 1과 일치할 경우 실행할 문장;
// break;
// case 값2 :
// 변수 또는 상수의 값이 값 2와 일치할 경우 실행할 문장;
// default :
// } 'use strict'
//switch_02
var Menu;
Menu = prompt('menu choice');
switch(Menu){
case 'p':
case 'P': document.write('Pizza를 주문하셨습니다.');break;
case 's':
case 'S': document.write('Spaghetti를 주문하셨습니다.'); break;
case 'r':
case 'R': document.write('Risotto를 주문하셨습니다.'); break;
case 'd':
case 'D': document.write('Drink를 주문하셨습니다.'); break;
default:
document.write('메뉴에 없습니다.');
}'use strict'
//switch_03
let input = prompt('아동, 청소년, 성인 중 선택을 하세요.');
switch(input){
case '아동':
input += " : 입장료 무료"
break;
case '청소년':
input += " : 입장료 2000원"
break;
case '성인':
input += " : 입장료 5000원"
break;
default:
alert('입력값을 확인하세요');
input = '입력값을 확인하세요';
}
document.write(input);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>제어문, 비교문</title>
</head>
<body>
<h1>제어문</h1>
<!--
1.조건문
프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문
-if 문
-switch 문
2.반복문
프로그램 네에서 같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
-while 문
-for 문
if(조건식){
실행문;
}
-------------------------------------------
if(조건식){
조건식이 참일 때 실행문1;
}else{
조건식이 거짓일 때 실행문2;
}
-------------------------------------------
if(조건식){
조건식1이 참일 때 실행문1;
}else if{
조건식2가 참일 때 실행문2;
}else if{
조건식3이 참일 때 실행문2;
}else{
모든 조건식이 거짓일 때 실행문2;
}
-->
<script>
// var a = 10;
// var b = 20;
// document.write("a = 10 ,b = 20일때 누가 더 큰가 <br>");
// if(a > b){
// document.write(a + "값이 더 큽니다.");
// }else{
// document.write(b + "값이 더 큽니다.");
// }
var score;
score = prompt("점수를 입력해주세요");
//90 80 70 60
if(score >= 90){
document.write("A")
}else if(score >= 80){
document.write("B")
}else if(score >= 70) {
document.write("C")
}else if(score >= 60){
document.write("D")
}else{
document.write("F")
}
</script>
</body>
</html> 'use strict'
//성적관리 프로그램
var name = prompt('이름을 입력하세요');
var kor = Number(prompt('국어점수를 입력하세요'));
var eng = Number(prompt('영어점수를 입력하세요'));
var math = Number(prompt('수학점수를 입력하세요'));
var total = kor + eng + math;
var avg = total / 3;
//${변수명} -> 하나의 객체로
document.write(`<h2>${name}님의 성적표</h2>`);
document.write(`<p>국어성적 : ${kor}</p>`);
document.write(`<p>영어성적 : ${eng}</p>`);
document.write(`<p>수학성적 : ${math}<p>`);
document.write(`<p>총점 : ${total}</p>`);
document.write(`<p>평균값 : ${avg}</p>`); 'use strict'
//성적관리 프로그램2
const name = prompt('이름을 입력하세요');
const kor = Number(prompt('국어점수를 입력하세요'));
const eng = Number(prompt('영어점수를 입력하세요'));
const math = Number(prompt('수학점수를 입력하세요'));
const total = kor + eng + math;
const avg = total / 3;
let hakjum = "";
//학점의 기준 90 80 70 60
if(avg >= 90){
hakjum = "A";
}else if(avg >= 80) {
hakjum = "B";
} else if (avg >= 70) {
hakjum = "C";
} else if (avg >= 60) {
hakjum = "D";
}else{
hakjum = "F";
}
//${변수명} -> 하나의 객체로
document.write(`<h2>${name}님의 성적표</h2>`);
document.write(`<p>국어성적 : ${kor}</p>`);
document.write(`<p>영어성적 : ${eng}</p>`);
document.write(`<p>수학성적 : ${math}<p>`);
document.write(`<p>총점 : ${total}</p>`);
document.write(`<p>평균값 : ${avg}</p>`);
document.write(`<p>학점 : ${hakjum}</p>`);'use strict'
//성적관리 프로그램3(switch)
const name = prompt('이름을 입력하세요');
const kor = Number(prompt('국어점수를 입력하세요'));
const eng = Number(prompt('영어점수를 입력하세요'));
const math = Number(prompt('수학점수를 입력하세요'));
const total = kor + eng + math;
const avg = total / 3;
let hakjum = "";
//학점의 기준 parseInt(학점 / 10)
//10 9 / 8 / 7 / 6 나머지 F
switch(parseInt(avg / 10)){
case 10:
case 9:
hakjum = 'A학점';
break;
case 8 :
hakjum = 'B학점';
break;
case 7:
hakjum = 'C학점';
break;
case 6:
hakjum = 'D학점';
break;
default :
hakjum = 'F학점';
}
//${변수명} -> 하나의 객체로
document.write(`<h2>${name}님의 성적표</h2>`);
document.write(`<p>국어성적 : ${kor}</p>`);
document.write(`<p>영어성적 : ${eng}</p>`);
document.write(`<p>수학성적 : ${math}<p>`);
document.write(`<p>총점 : ${total}</p>`);
document.write(`<p>평균값 : ${avg}</p>`);
document.write(`<p>학점 : ${hakjum}</p>`); 'use strict'
//암시적 타입변환
const a = 10 + '문자열'; // +(합성), 숫자 + 문자 = 문자열 데이터 변수
console.log(a);
const b = "3" * "5"; // 숫자 모양 문자열을 연산하면 숫자형으로 변환
console.log(b);
const c = 10 - "문자열" // 숫자로 인식
console.log(c);
const d = "10" - 20; // 숫자 모양 문자열을 연산하면 숫자형으로 변환
console.log(d);