<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자</title>
</head>
<body>
<h1> 자바스크립트 연산자 </h1>
<h2> 개요 </h2></p>
<h2>표현식</h2>
<p>expression : 리터럴(값), 식별자(변수), 연산자, 함수 호출등의 조합</p>
<p>표현식은 평가evaluate (표현식이 실행되어 결과값 생성)되어 하나의 값을 만듬</p>
<script>
10; //리터럴 표현식
//sum; //식별자 표현식
10 +20 ; //연산자 표현식
//square() ; // 함수 표현식
</script>
<h2> 연산자 </h2>
<p>하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산을
수행해서 하나의 값을 만드는 기호를 의미 </p>
<p>할당 연산자 : 오른쪽 피연산자를 왼쪽 피연산자에 대입하는 기호,
보통 '='를 의미 </p>
<p>산술 연산자 : 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하는 기호.
그외에도 나머지 연산자(%), 증감 연산자 (++, --)
거듭제곱(**) 등이 있음</p>
<script>
let x =10;
let y =3;
document.write(`10/3=${x/y},
10%3= ${x%y}, 10^3=${x^y}<br>`);
document.write(` 10++ = ${x++}, 그후 x = ${x}<br>`);
x= 10;
document.write(` ++10 = ${++x}, 그후 x = ${x}`) //먼저 증가시키고나서 x를 찍음
</script>
<p>산술연산자 중 + 는 피연산자 중 하나가 문자열인 경우
문자열을 연결하는 기능을 수행함</p>
<script>
document.write(1+2, '<br>');
document.write('1'+2, '<br>');
document.write('1'+'2', '<br>');
document.write(1+true, '<br>'); // true는 1, false는 0
document.write(false+true, '<br>');
document.write(false+null, '<br>'); // null은 0
document.write(false+undefined, '<br>'); // undefined는 컴퓨터가 정함
</script>
<p>복합 할당연산자 : 할당 연산자와 산술 연산자를 혼합해서
표현식을 간단하게 작성하는데 사용</p>
<script>
x=1;
x=x+1;
document.write(`x=x+1:${x} <br>`);
x += 1; //sytantic sugar
document.write(`x=x+1:${x}`);
</script>
<h2>비교연산자</h2>
<p>좌항과 우항의 피연산자를 비교해서 큰지 작은지 같은지 알아보는 연산자 </p>
<p> 결과값은 true나 false로 반환</p>
<script>
x=10;
y=5;
document.write(`x=y=>${x==y} <br>`); //값의 동일여부 비교
document.write(`x!=y=>${x!=y} <br>`);
document.write(`x===y=>${x===y} <br>`); // 값 , 자료형 동일여부 비교
y=10;
document.write(`x===y=>${x===y} <br>`);
y='10';
document.write(`10==='10'=>${x==y} <br>`); // js에서는 ==연산자 사용시 암묵적 형변환이 발생 (===이 있기때문)
document.write(`10==='10'=>${x===y} <br>`);
</script>
<script>
// 비교연산자는 경우에 따라 수많은 부작용 양산 -> === 추천!
document.write(''=='0', ' ');
document.write(0=='', ' ');
document.write(0=='0', ' ');
document.write(false=='false', ' ');
document.write(false=='', ' ');
document.write(false==null, ' ');
document.write(undefined==null, '<br> ');
</script>
<script>
document.write(NaN===NaN, ' '); //예측 불가
document.write(0=== -0, ' ');
document.write(0=== -0, ' ');
</script>
<h2>삼항 연산자</h2>
<p>if ~ else 문의 syntatic sugar </p>
<p>조건식 ? 참일때의 값 : 거짓일때의 값 </p>
<script>
//평균점수가 60이상이면 합격, 아니면 불합격
let jumsu = 78.5;
let result = jumsu >= 60 ? '합격':'불합격';
document.write(`평균점수는 ${jumsu}이고 , 결과는 '<strong>${result}</strong>'입니다.`);
</script>
<h2>논리 연산자</h2>
<p>boolean 표현식에 대한 논리합OR(||) 또는
논리곱AND(&&) 또는 부정NOT(!) 연산을 수행하는 기호</p>
<script>
document.write(`true OR false = ${true || false}<br>`);
document.write(`true AND false = ${true && false}<br>`);
document.write(`1 AND 0 = ${1 && 0}<br>`);
</script>
<script>
// 00-0, 01-1, 10-1, 11-1
// val = val1 || val2 || val3 의 경우
// 연산자 OR는 첫번째 truthy 를 출력함
// 1 || 0, null || 1, undefined || 1
document.write(`null || 2 || undefined=${null || 2 || undefined}<br> `);
// 00-0, 01-0, 10-0, 11-1
// val = val1 && val2 && val3 의 경우
// 연산자 AND는 첫번째 falsy 를 출력함
// 1 && 0, 1 && 5, undefined && 5
document.write(`1 && null && 2 = ${1 && null && 2}<br> `);
//
document.write(`null || 2 && 3 || 4 = ${null || 2 && 3 || 4 }<br> `);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트로 구현하는 성적처리 프로그램</title>
</head>
<body>
<h1>자바스크립트로 구현하는 성적처리 프로그램</h1>
<!-- 이름, 국어, 영어, 수학을 입력받아 -->
<!-- 총점, 형균, 학점을 계산한 뒤 결과 출력 -->
<h2>성적 처리 결과</h2>
<script>
// 브라우저에서 사용자로부터 값을 입력받으려면
// prompt 함수를 사용함
// 변수명 = prompt('메세지')
let name = prompt('이름은?');
let kor = Number(prompt('국어는?'));
let eng = Number(prompt('영어는?'));
let mat = Number(prompt('수학은?')); // parseInt(prompt()) 가능 '99가'
let result = `이름 : ${name} <br>`;
result+= `국어 : ${kor}<br>`;
result+= `영어 : ${eng}<br>`;
result+= `수학 : ${mat}<br>`;
result+= `평균 : ${(kor + eng + mat)/3}<br>`;
result+= `총점 : ${kor + eng + mat}<br>`;
let avg= `평균 : ${ (kor + eng + mat)/3 } <br>`;
let grd = (avg >=90) ? '수' :
(avg >=80) ? '우' :
(avg >=70) ? '미' :
(avg >=60) ? '양' : '가';
result+= `학점 : ${grd}`;
// result+= `학점 : ${avg >= 90 ? '수' : `${avg>=80 ? '우': `${avg>=70 ? '미': `${avg>=60 ? '양': '가' }` }` }`}<br>`;
document.write(result);
</script>
</body>
</html>