7월 17일_JAVA Script(변수, 연산자, 조건문, 반복문 등)

# 변수 

변수의 타입과 초깃값

• 자바스크립트의 변수는 타입이 정해져 있지 않음
• 같은 변수에 다른 타입의 값을 다시 대입할 수도 있음
• 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없음

---

# 연산자

<script>
    document.write('<h3>산술 연산자</h3>');

    let a = 10;
    let b = 5;

    let sum = a + b;
    let difference = a - b;
    let product = a * b;
    let quotient = a / b;
    let remainder = a % b;

    document.write('덧셈 : ' + sum + '<br>');
    document.write('뺄셈 : ' + difference + '<br>');
    document.write('곱셈 : ' + product + '<br>');
    document.write('나눗셈 : ' + quotient + '<br>');
    document.write('나머지 : ' + remainder + '<br>');

    document.write('<h3>복합 대입 연산자</h3>');

    let x = 15; //복합 대입연산자

    x += 5;
    document.write('x += 5 : ' + x + '<br>');  //15 + 5 = 20

    x -= 3;
    document.write('x -= 3 : ' + x + '<br>');  //20 - 3 = 17

    x *= 2;
    document.write('x += 2 : ' + x + '<br>');  // 17 * 2 = 34

    document.write('<h3>증감 연산자</h3>');

    let count = 0;  // 증감 연산자

    count++;
    document.write('count : ' + count + '<br>'); // 1증가 : 1

    count++;
    document.write('count : ' + count + '<br>'); // 1에서 1 증가 : 2

    count--;
    document.write('count : ' + count + '<br>');   // 2에서 1감소 : 1

    document.write('<h3>전위연산자 & 후위연산자</h3>');

    let c = 5;
    let d = 5;

    document.write('c++ :' + c++ + '<br>');
    // 후위 연산자 값 : 5 (출력 후에 증가, c는 6이 됨)
    document.write('++d :' + ++d + '<br>');
    // 전위 연산자 값 : 6 (증가해서 출력, d는 6이 됨)

    document.write('최종 c :' + c + '<br>');  // 값 : 6 (c++)
    document.write('최종 d :' + d + '<br>');  // 값 : 6 (++d)

    let e = ++d;
    document.write('최종 e :' + e + '<br>');
    // 값 : 7 (++d 의 6인 값에 +1을 더해서 출력)

  </script>

 

<script>
    document.write('<h3>비교 연산자</h3>');

    let a = 10;
    let b = 20;

    document.write('a == b :' + (a == b) + '<br>'); 
    // a는 b와 같다 : false
    document.write('a != b :' + (a != b) + '<br>');
    // a는 b와 다르다 : true
    document.write('a > b :' + (a > b) + '<br>');
    // a는 b 보다 크다 : false
    document.write('a < b :' + (a < b) + '<br>');
    // a는 b보다 작자 : true
    document.write('a >= b :' + (a >= b) + '<br>');
    // a는 b보다 크거나 같다 : false
    document.write('a <= b :' + (a <= b) + '<br>');
    // a는 b보다 작거나 같다 : true

    document.write('<h3>논리 연산자</h3>');

    let x = true;
    let y = false;

    document.write('x && y :' + (x && y) + '<br>'); 
    // x와 y의 값이 같다 : false
    document.write('x || y :' + (x || y) + '<br>');
    // x와 y의 값 둘 둥 하나만 참이면 : true
    document.write('!x :' + (!x) + '<br>');
    // x 값의 반대 : false
    document.write('!y :' + (!y) + '<br>');
    // y 값의 반대 : true

    document.write('<h3>연결 연산자</h3>');

    let firstName = '홍';
    let lastName = '길동';
    let fullName = firstName + ' ' + lastName;

    document.write('이름 : ' + fullName + '<br>');

    let greeting = '안녕하세요, ' + fullName + '님!';
    document.write(greeting + '<br>');

    document.write('<h3>형 비교 논리 연산자</h3>');

    let xx = 3;
    let yy = "3";
    let zz = 3;

    // 값을 비교 할때는 == (2개) 형 까지 비교할 때는 === (3개)
    document.write('3 === "3" :' + (xx === yy) + '<br>');
    // 두 값과 형이 같은지 -> 값은 같지만 형이 다르기 때문에 : false
    document.write('3 === 3 :' + (xx === zz) + '<br>');
    // 두 값과 형이 같은지 -> 값과 형이 같음 : true
    document.write('3 !=== "3" :' + (xx !== yy) + '<br>');
    // 두 값과 형이 다른지 -> 값은 같지만 형이 다르기 때문에 : true
    document.write('3 !=== 3 :' + (xx !== zz) + '<br>');
    // 두 값과 형이 다른지 -> 값과 형이 같음 : false

  </script>

 

자바스크립트 연산자의 우선순위표

우선순위	연산자	설명	결합 방향
1	()	묶음(괄호)	-
2	.	멤버 접근	왼쪽에서 오른쪽으로
	new	인수 있는 객체 생성	-
3	()	함수 호출	왼쪽에서 오른쪽으로
	new	인수 없는 객체 생성	오른쪽에서 왼쪽으로
4	++	후위 증가 연산자	-
	--	후위 감소 연산자	-
5	!	논리 NOT 연산자	오른쪽에서 왼쪽으로
	~	비트 NOT 연산자	오른쪽에서 왼쪽으로
	+	양의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	-	음의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	++	전위 증가 연산자	오른쪽에서 왼쪽으로
	--	전위 감소 연산자	오른쪽에서 왼쪽으로
	typeof	타입 반환	오른쪽에서 왼쪽으로
	void	undefined 반환	오른쪽에서 왼쪽으로
	delete	프로퍼티의 제거	오른쪽에서 왼쪽으로
6	**	거듭제곱 연산자	오른쪽에서 왼쪽으로
	*	곱셈 연산자	왼쪽에서 오른쪽으로
	/	나눗셈 연산자	왼쪽에서 오른쪽으로
	%	나머지 연산자	왼쪽에서 오른쪽으로
7	+	덧셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
	-	뺄셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
8	<<	비트 왼쪽 시프트 연산자	왼쪽에서 오른쪽으로
	>>	부호 비트를 확장하면서 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
	>>>	부호 비트를 확장하지 않고 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
9	<	관계 연산자(보다 작은)	왼쪽에서 오른쪽으로
	<=	관계 연산자(보다 작거나 같은)	왼쪽에서 오른쪽으로
	>	관계 연산자(보다 큰)	왼쪽에서 오른쪽으로
	>=	관계 연산자(보다 크거나 같은)	왼쪽에서 오른쪽으로
	instanceof	인스턴스 여부 판단	왼쪽에서 오른쪽으로
10	==	동등 연산자	왼쪽에서 오른쪽으로
	===	일치 연산자	왼쪽에서 오른쪽으로
	!=	부등 연산자	왼쪽에서 오른쪽으로
	!==	불일치 연산자	왼쪽에서 오른쪽으로
11	&	비트 AND 연산자	왼쪽에서 오른쪽으로
12	^	비트 XOR 연산자	왼쪽에서 오른쪽으로
13	|	비트 OR 연산자	왼쪽에서 오른쪽으로
14	&&	논리 AND 연산자	왼쪽에서 오른쪽으로
15	||	논리 OR 연산자	왼쪽에서 오른쪽으로
16	? :	삼항 연산자	오른쪽에서 왼쪽으로
17	=	대입 연산자 (=, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=)	오른쪽에서 왼쪽으로
18	...	전개	-
19	,	쉼표 연산자	왼쪽에서 오른쪽으로

 

 

---

# 조건문

<script>
    document.write('<h3>조건문 if</h3>');

    let x = 50, y = 20;

// if 조건문을 각각 써주는 경우
    if (x == y) {
      document.write("x와 y는 같습니다.");
    }
    if (x != y) {
      document.write("x와 y는 다릅니다.");
    }
// if - else 를 사용해서 2가지 조건을 한번에 쓰는 경우
    if (x == y) {
      document.write("x와 y는 같습니다.");
    } else {
      document.write("x와 y는 다릅니다.");
    }
// 다중 if 조건문 1
    if (x == y) {
      document.write("x와 y는 같습니다.");
    } else if (x < y) {
      document.write("x는 y보다 작습니다.");
    } else if (x > y) {
      document.write("x는 y보다 큽니다.");
    }
// 다중 if 조건문 2
    if (x == y) {
      document.write("x와 y는 같습니다.");
    } else if (x < y) {
      document.write("x는 y보다 작습니다.");
    } else {
      document.write("x는 y보다 큽니다.");
    }
    
    let userNumber = prompt("숫자를 입력하세요.");

    if (userNumber !== null) {
      if(userNumber % 3 === 0)
      alert ("3의 배수입니다.");
    else
      alert("3의 배수가 아닙니다.");
    }
    else
      alert("입력이 취소됐습니다.");

  </script>

 

 

---

# 삼항연산자

<script>
    document.write('<h3>삼항 연산자</h3>');

    let age = parseInt(prompt("나이를 입력하세요."));
    let voteable = (age < 18) ? "Too Young" : "Old Enough";

    document.write(voteable);

  </script>

---

# switch문

<script>
    let day = parseInt(prompt("요일을 입력하세요.(ex:월 = 1 ~ 일 = 7)"));
    let today

    switch (day) {
      case 1:
        today = "월요일";
        break;
      case 2:
        today = "화요일";
        break;
      case 3:
        today = "수요일";
        break;
      case 4:
        today = "목요일";
        break;
      case 5:
        today = "금요일";
        break;
      case 6:
        today = "토요일";
        break;
      case 7:
        today = "일요일";
        break;
      default:
        document.write("숫자를 잘못입력하였습니다.")
    }
    document.getElementById("demo").innerHTML = today + " 입니다.";

  </script>

---

# for 반복문

let i;
    let sum1 = 0;
    
    for (i = 1; i < 6; i++) {
      sum1 += i;
    }
    document.write("for 반복문) 1부터 5까지 합계 : " + sum1 + "<br>");

    let sum2 = 0;
    let text = "";

    for(let i =1; i < 6; i++) {
      text += "반복횟수" + i + "<br>";
      sum2 += i;
    }
    document.write("for문" + "<br>" + text);
    document.write("1부터 5까지 합계" + sum2);

<body>
  <h1>for 반복문</h1>
  <h3>배열에서 for문 사용하기</h3>
  <p id="demo"></p>

  <script>
    const cars = ["BMW", "VOLVO", "SAAB", "FORD", "FIAT", "AUDI"];

//배열에 새로운 요소 추가
    cars.push("SONATA");
//배열의 마지막 요소 삭제
    cars.pop();
//특정 위치의 배열 요소 삭제
    delete cars[2];
//특정 위치의 배열 요소 수정
    cars[2] = "KIA"

    let text = "";
    for (let i = 0; i < cars.length; i++) {
      text += cars[i] + "<br>";
    }

    document.getElementById("demo").innerHTML = text;

  </script>

<body>
  <h1>for 반복문</h1>
  <h3>fon in 문은 객체의 속성을 반복합니다.</h3>
  <p id="demo"></p>

  <script>
    const person = {fname: "John", lname: "Doe", age:25};

    let text = "";
    for (let x in person) {
      // text += person[x] + " ";  // 값만 출력
      text += x + ": " + person[x] + "<br> "; // 키값을 출력
    }

    document.getElementById("demo").innerHTML = text;

  </script>

---

# while 반복문

<body>
  <h1>while 반복문</h1>

  <p id="demo"></p>

  <script>
    let text = "";

    let i =0; // 1.초기식

    while (i < 10) { // 2.조건식
      text += "<br>The number is " + i;
      i++;  // 3. 증감식
    }

// while -> do while문으로 
    do {
      text += "<br>The number is " + i;
      i++;  // 증감식
    }
    while (i < 10)

    document.getElementById("demo").innerHTML = text;

  </script>

---

# for 문에서 break문 사용

<body>
  <h1>for문에서 break문 사용</h1>

  <p id="demo"></p>

  <script>
    let text = "";

    for (let i = 0; i < 10; i++) {
      //if (i === 3) {
      if (i % 2 == 0) { //짝수 (i를 2로 나눠서 나머지가 0인 경우)
        //break;  // if 조건문의 값이 되면 멈추고 출력
        continue; // if 조건문의 값을 빼고 출력
      }
      text += "<br>The number is " + i + "<br>";
    }


    document.getElementById("demo").innerHTML = text;

  </script>