[02. 연산자]
ㅁ 탭사이즈 보통 2로 줄여서 함.
기존에 작업했던 문서는 4칸이 그대로 유지된다. 새 문서부터는 적용됨.
ㅁ < 연산자 종류 >
(1) 산술 연산자
- 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 제곱(**)
- 자바스크립트는 정수와 실수를 구분하지 않고 number타입으로 취급하기 때문에,
5 / 2하면 2.5가 나온다.
- 5%2는 1이 나온다.
- 5**2는 25가 나온다.
(2) 증감 연산자
- 1씩 증가(++), 1씩 감소(--)
(3) 대입 연산자 / 복합 대입 연산자
- 대입( = )
- 복합 대입( +=, -=, *=, /=, %=, **= )
- 마지막은 몇 제곱한 만큼을 다시금 대입한다.
(4) 비교 연산자
- >, >=, <, <=
- equal value == // 1 == '1' 결과는 true (JS는 타입은 달라도 실제 데이터 값은 같다고 인식)
equal value, type === // 1 === '1' 결과는 false (타입까지 같은지 비교함)
- not equal value != //
not equal value, type !== //
(5) 논리 연산자
- 논리 AND(&&), 논리 OR( || ), 논리 NOT( ! )
- &&와 ||는 short circuit을 지원한다. 코드를 간결히 쓸 수 있다.
(6) 조건 연산자 (삼항 연산자)
- 조건식 ? true일 때 반환값 : flase일 때 반환값
(7) 문자열 연결 연산자
- +, +=
ㅁ
<script>
function fnOperationTest() {
console.log(2 ** 3); // 8
console.log(5 / 2); // 2.5
console.log(10 / 3); // 3.3333333333333335
console.log("========");
console.log(100 == 100); // true
console.log(100 == '100'); // true 값만 비교
console.log(100 === '100'); // false 값과 타입 비교
console.log(0 == false); // true
console.log(1 == true); // true
console.log(34 == true); // false
//그래서 논리값이랑 숫자값이랑 산수연산이 가능함.
console.log(1 + false); // 1
console.log(1 + true); // 2
console.log("========");
//데이터가 존재할 경우 true로 간주하고, 데이터가 존재하지 않을 경우 false로 간주한다.
let a; // undefined 상태
let b = 0;
let c = '';
console.log(a); // undefined
console.log(b); // 0
console.log(c); // 아무것도 안보이지만 출력은 됨. 빈문자열.
// 논리부정 연산자 사용해보면 셋 다 false로 취급됨을 알 수 있다.
console.log(!a); // true
console.log(!b); // ture
console.log(!c); // true
let d = 'hello';
let e = 10;
console.log(!d); // false
console.log(!e); // false
if(d) { // d가 존재할 경우
console.log('goodbye'); // goodbye
}
}
fnOperationTest();
</script>
- 자바스크립트에서 false는 0, true는 숫자 1로 간주한다.
그래서 논리값이랑 숫자값이랑 산수연산이 가능함.
- 자바스크립트는 데이터가 존재할 경우 true로 간주하고, 데이터가 존재하지 않을 경우 false로 간주한다.
(1, 1.5, 'hello' 등등)
(0, 0.0, '', undefined, null 등) // 자바에서 0, 0.0, 빈문자열은 데이터로 취급됨. JS에서는 데이터 없는것으로 간주됨.
// undefined는 초기화되지않음. null은 값비어있음.
- 자바스크립트는 변수의 진리값을 평가할 때 변수에 데이터가 있는지(비어있지 않은지) 여부를 기준으로 하며, 이는 명시적인 불리언 값과는 다릅니다.
ㅁ < short circuit 활용 > - 알아만 두세요. 모르는 사람이 많아서 쓰지 말라고 할 수도.
(1) true조건 && 참일경우실행내용; // if(조건) {실행내용}과 동일하다. // 트루면 뒤도 실행해야하니까.
false조건 || 거짓일경우실행내용; // if(!조건) {실행내용}과 동일하다.
(2) 변수 = 대입할 값 || 기본값; // '대입할값'이 존재하지 않을 경우 기본값을 대입한다.
if( 1 == 1 ) { console.log("참"); } // 참
1 == 1 && console.log("참"); // 참
1 === '1' || console.log("거짓"); // 거짓
let name = prompt('이름을 입력해주세요') || '없음';
// 프롬포트는 확인 누르면 사용자가 입력한 값 반환, 취소누르면 null 반환.
console.log(name);
// 취소 누르면 '없음'
// 아무것도 입력하지 않고 확인 누르면 빈문자열. 빈문자열도 존재하지 않는 데이터로 취급. '없음'
// 입력하고 확인하면 그 값이 나온다.
let name = prompt('이름을 입력해주세요');
if(name == null || name == ''){
name='없음';
}
- 이것과 같다.
[03. 제어문]
ㅁ 조건문
(1) if 문
- 자바에서의 if문 작성법과 동일하다.
- else if로 여러 조건 제시 가능.
- 마지막 else로 모든 조건 결과가 false일 경우 실행할 내용을 작성할 수도 있다.
(2) switch문
- 자바에서의 switch문 작성법과 동일하다.
- 단, 추가로 switch문 비교대상자를 true 작성시, case에 조건식을 작성할 수 있음.
ㅁ if 문
<script>
function fnIfTest() {
// 나이에 따른 구분
let age = prompt("나이 입력"); // "25"(문자열로 받음.) | ""(입력안하고 확인) | null(취소)
let result;
// if(age == "" || age == null) 이렇게도 쓸 수 있다.
if( !age ) { // age가 존재하지 않을 경우. 빈문자열이거나 null.
result = "나이를 입력하지 않았습니다.";
}
else {
if(age < 0 || age > 150) { // 문자열 내에 숫자만 존재시 자동 형변환되어 숫자간 대소비교 가능
result = "잘못된 나이";
}
else if(age <= 7) { result = "미취학 아동"; }
else if(age <= 13) { result = "초등학생"; }
else if(age <= 19) { result = "청소년"; }
else { result = "성인"; }
}
console.log("age: " + age + " result: " + result);
}
fnIfTest();
</script>
취소시
아무것도 입력하지 않고 확인시
500, -444 입력시
정상입력시
ㅁ switch문
<script>
function fnSwitchTest1() {
let fruit = prompt("과일 입력");
let price;
switch(fruit){
case "바나나": price = 2000; break;
case "사과": price = 4000; break;
case "키위": price = 9000; break;
}
// default를 안둬서 바나나, 사과, 키위가 아니거나 null, 빈문자열이면 price는 undefined 상태이다.
console.log('fruint: ', fruit);
console.log('price:', price + '원'); // '원'해야 원을 문자열로 인식한다.
}
fnSwitchTest1();
</script>
console.log('fruit: ', fruit);
price && console.log('price:', price + '원'); // '원'해야 원을 문자열로 인식한다.
- 출력문을 price가 존재할 때만 실행한다.
ㅁ switch문 예제2
<script>
function fnSwitchTest2() {
let score = prompt('점수 입력');
let grade;
switch(true) {
case score >= 90 : grade = 'A'; break;
case score >= 80 : grade = 'B'; break;
case score >= 70 : grade = 'C'; break;
case score >= 60 : grade = 'D'; break;
default : grade = 'F';
}
console.log('당신의 점수는 ' + score + '점이고, 등급은 ' + grade + '입니다.');
}
fnSwitchTest2();
</script>
ㅁ 반복문
(1) while문
- 자바에서의 while문 작성법과 동일.
(2) for문
- 자바에서의 for문 작성법과 동일.
- 초기식 작성시 자바때 습관처럼 int 작성하면 안 됨.
변수 선언할 때는 (변수 선언 키워드) var나 let을 통해 초기식 작성.
ㅁ
<script>
function fnWhileTest() {
let i = 0;
while(i < 10) {
console.log(i++);
}
}
fnWhileTest();
console.log("==========");
function fnForTest() {
for(let i=0; i<10; i++) { // let은 블럭 스코프라 for문 바깥에서는 못 쓴다.
console.log(i);
}
// console.log(i); 오류. i를 var로 선언하면 그 함수 내에서는 다 사용 가능.
}
fnForTest();
console.log("==========");
function fnForTest2() {
for(let i="0"; i<10; i++) {
console.log(i, typeof i);
}
// 초기값 0은 문자열이지만, i++를 만나는 순간 숫자로 변경된다.
// for문 돌릴때 저 값을 문자열로 돌려도 된다. 이렇게 쓸 일은 없겠지만.
}
fnForTest2();
console.log("==========");
</script>
ㅁ 반복문 - 화면에 출력하고자 하는 반복적인 요소를 동적으로 생성
- 자바스크립트로 동적인 요소를 만드는 경우 많다.
<body>
<script>
/*
<h1>안녕하세요1</h1>
<h2>안녕하세요2</h2>
<h3>안녕하세요3</h3>
<h4>안녕하세요4</h4>
<h5>안녕하세요5</h5>
<h6>안녕하세요6</h6>
*/
function fnMakeElement1() {
let aaa = "";
for(let i=1; i<=6; i++) {
aaa += "<h" + i + ">안녕하세요" + i + "<h" + i + ">";
}
console.log(aaa);
document.write(aaa);
}
</script>
<button onclick="fnMakeElement1();">ddd</button>
</body>
for(let i=1; i<=6; i++) {
aaa += "안녕하세요" + i ;
}
- 이렇게 바꿔보면
ㅁ fnMakeElement2
- 처음에는 요소가 없다가 버튼을 클릭하는 순간 동적으로 요소가 만들어져서 사용자에게 보여진다.
<body>
<script>
/*
<div>
<img src="../assets/assets/image/flower1.jpg" width="100px">
<img src="../assets/assets/image/flower2.jpg" width="100px">
<img src="../assets/assets/image/flower3.jpg" width="100px">
<img src="../assets/assets/image/flower4.jpg" width="100px">
<img src="../assets/assets/image/flower5.jpg" width="100px">
<div>
*/
function fnMakeElement2() {
let aaa = "<div>";
for(let i=1; i<=5; i++) {
aaa += '<img src="../assets/assets/image/flower' + i + '.jpg" width="100px">';
}
// 자스에서 문자열은 쌍따옴표 홑따옴표 다 가능한데, 내가 넣으려는 문자열이
// "면 앞뒤를 ''로 감싸서 문자열화.
// 반대라면 반대.
aaa += "</div>";
document.write(aaa);
console.log(aaa);
}
</script>
<button onclick="fnMakeElement2();">꽃 5개</button>
</body>
