'자바스크립트 변수 선언' 태그의 글 목록

자바스크립트 변수 선언

[JavaScript] 변수 선언, 형 변환, 연산자, 출력 2024.03.22

[JavaScript] 변수 선언, 형 변환, 연산자, 출력

전영호 2024. 3. 22. 11:36

2024. 3. 22. 11:36

JavaScript

변수 선언, console.log 로 확인

스크립트 태그로 자바스크립트의 코드를 작성

- 작은 따옴표, 큰 따옴표 모두 사용 가능

- 줄바꿈을 사용하면 세미콜론을 생략 가능

- 스크립트 언어는 한 줄 한 줄 코드를 실행하기 때문에 코드에 오류가 있어도 오류코드 직전까지는 작동

( java 는 컴파일러가 코드를 모두 읽고 한번에 출력하기 때문에 오류코드가 있으면 아예 작동이 되지 않음 )

console.log() : 개발자 콘솔에 값을 출력

( F12 눌러서 console 탭에서 값을 확인 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num = 100;
      let str = "문자열";
      let fl = 1.123;
      let bool = true;
      let arr = [1, 2, 3];
      let obj = { num: "홍길동", age: 20 };
      let test;
      // 세미콜론은 줄을 바꿔서 코드를 적으면 생략 가능
      // 작은 따옴표, 큰 따옴표 모두 사용 가능
      console.log(num, typeof num);
      console.log(str, typeof str);
      console.log(fl, typeof fl);
      console.log(bool, typeof bool);
      console.log(arr, typeof arr);
      console.log(obj, typeof obj);
      console.log(test, typeof test);
      // console.log : 콘솔창으로 무언가를 출력하는 코드
      // 웹 실행하여 F12 눌러서 Console 탭에 들어가면 출력됨

      num = [1, 2, 3];
      console.log("-----");
      console.log("변경 후 : ", num, typeof num);
    </script>
  </body>
</html>

document.write() : 값을 웹에 출력

prompt() : 입력을 받음

` (backtick) 을 사용하면 ${변수명} 을 적어서 표현이 가능하다

( 자바의 printf 와 비슷 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      let name = "홍길동";
      let age = prompt("나이 입력");
      document.write("학생 이름 : " + name + "<br>");
      document.write("학생 나이 : " + age + "<br>");

      document.write(`이름 : ${name}님의 나이는 ${age}살 입니다<br>`);

      console.log(`age : ${typeof age}`);
      // 입력 값은 string 으로 저장됨

      let num = Number(age);
      // Number 자료형으로 age 값을 형변환하여 num 이라는 변수로 저장
      console.log(`age : ${typeof num}`);

      console.log(`age : ${typeof num.toString()}`);
      // 문자형으로 형변환하는 toString
      console.log(`age : ${typeof (num + "")}`);
      // 자바에서 사용했듯이 문자열을 더해서 문자열로 변경
    </script>
  </head>
  <body></body>
</html>

코드 실행

let, var, const

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = "홍길동";
      // let name = "김개똥";
      // let 은 중복된 변수명으로 선언 불가
      name = "김개똥";
      var age = 20;
      var age = 30;
      // var 는 중복된 변수명으로 다시 선언이 가능
      console.log(age);
      console.log(name);

      const key = "키키키키키";
      // key = "값 변경!!";
      // const 는 상수화 시킨 변수이기 때문에 값 변경이 불가
      document.write(key);

      const str01 =
        "안녕하세요\
      그래\
      반갑다";
      document.write("<br>" + str01);
      // backtick(``) 을 사용하지 않으면 \ 를 사용하여
      // 이어지는 문장임을 표현

      const str02 = `그래
      반가워
      만나서~~~!!`;
      document.write("<br><b>" + str02 + "<b>");
      // backtick(``) 은 그냥 표현 가능
    </script>
  </body>
</html>

실습 예제

예제 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid black;
      }
      table tr th {
        border: 1px solid black;
        text-align: center;
      }
      table tr td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script>
      let name = prompt("당신의 이름은?");
      let age = prompt(`${name}님의 나이는?`);

      document.write(`
        <table>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>

            <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>산골짜기</td>
            </tr>

            <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>산골짜기</td>
            </tr>
        </table>
        `);
    </script>
  </body>
</html>

정수 자료형으로 형변환

Number 자료형 : 정수와 실수 모두 받을 수 있음

parseInt : 정수형 자료만 받을 수 있음

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const num01 = prompt("첫번째 수 입력");
      const num02 = prompt("두번째 수 입력");
      console.log(typeof num01);
      console.log(num01 + num02);
      console.log(typeof Number(num01), " : " + Number(num01));
      // Number 자료형은 실수형도 담을 수 있음

      console.log(typeof parseInt(num01), " : " + parseInt(num01));
      // parseInt 로 형변환하면 실수형 자료를 담을 수 없음
      // 고로, 실수의 값은 버려짐

      const su01 = 10,
        su02 = 3;
      document.write("10 / 3 => " + su01 / su02 + "<br>");
      document.write("Number 10 / 3 => " + Number(su01 / su02) + "<br>");
      document.write("parseInt 10 / 3 => " + parseInt(su01 / su02) + "<br>");
    </script>
  </body>
</html>

코드 실행

연산자

연산자 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const num1 = 10;
      const num2 = 4;
      document.write(`${num1} / ${num2} = ${num1 / num2}<br>`);
      document.write(`${num1} / ${num2} = ${parseInt(num1 / num2)}<br>`);
      document.write(`${num1} * ${num2} = ${num1 * num2}<br>`);
      document.write(`${num1} % ${num2} = ${num1 % num2}<br>`);
    </script>

    <script>
      let n1, n2;
      n1 = n2 = 5;
      n1 += 1;
      document.write(`${n1}<br>`);
      n1 -= 1;
      document.write(`${n1}<br>`);
      n1 *= n2;
      document.write(`${n1}<br>`);
      n1 /= n2;
      document.write(`${n1}<br>`);
      n1 %= n2;
      document.write(`${n1}<br>`);

      document.write(`<hr>`);
      n1 = "3";
      n2 = "3";
      document.write((n1 == n2) + "<br>");
      document.write((n1 != n2) + "<br>");
      document.write((n1 === n2) + "<br>");
      // 타입과 값까지 일치하는가?
      document.write((n1 !== n2) + "<br>");
      // 타입 또는 값이 다르면 true

      document.write(`<hr>`);
      document.write((true || false) + "<br>");
      document.write((true && false) + "<br>");
      document.write(!(true && false) + "<br>");

      document.write(`<hr>`);
      const x = 5;
      const y = 7;
      let result;
      result = x > y ? x : y;
      document.write(`큰 값 : ` + result + `<br>`);
      result = x > y ? x - y : y - x;
      document.write(`큰 값 - 작은 값 : ` + result + `<br>`);
    </script>
  </body>
</html>

실습 예제

실습 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      num1 = prompt("수(짝/홀) 입력");
      num2 = prompt("수(3의 배수) 입력");
      num3 = prompt("첫번째 수 입력");
      num4 = prompt("두번째 수 입력");

      result1 = num1 % 2 == 1 ? "홀수" : "짝수";
      result2 = num2 % 3 == 0 ? "맞음" : "아님";
      result3 =
        num3 > num4? `${num3}이 ${num4}보다 크다` : `${num4}이 ${num3}보다 크다`;
      document.write(`${num1}은 ${result1} 입니다<br>`);
      document.write(`${num2}는 3의 배수 ${result2} 입니다<br>`);
      document.write(result3);
    </script>
  </body>
</html>

실습 풀이

728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] setTimeout, setInterval, 자식요소 (추가, 삭제) (0)	2024.03.26
[JavaScript] 배열 (0)	2024.03.26
[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) (0)	2024.03.25
[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) (0)	2024.03.25
[JavaScript] 조건문, 반복문 (1)	2024.03.22

PREV 이전 1 NEXT 다음

전영호의 개발 블로그