티스토리 뷰

java script

자바스크립트기초/null,undefined/typeof/연산자(operator)

one-dy 2025. 5. 13. 14:23

자바스크립트 기초

· html 어느 위치든 상관없이 사용 가능.

· 태그를 전부 다 인식한 상태에서 자바스크립트를 구동하기 때문에 body 아래쪽에 쓰거나 </body>바로 위에

  js라고 주석을 달고 쓴다.

· head에 연결할 경우 title 아래에 쓴다.

· 기본 구조 없이, css처럼 바로 쓰면 된다.

· 한 줄 주석과 두 줄 이상 쓰는 주석으로 나누어져있다.

"use strict";//ES6버전의 엄격한 문법을 사용하겠다는 뜻.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트기초</title>
    <!-- js파일을 head에 연결할 경우 -->
     <script src="./js/test.js" defer></script>
  </head>
  <body>
    <!-- 내부 스크립트를 쓰는 경우 -->
    <script>
      //자바스크립트내용~
    </script>
    <!-- js외부파일 연결 -->
    <script src="./js/test.js"></script>
    <!-- 스크립트열린태그와 닫힌태그 사이 아무 내용도 쓰지 않는다! -->
  </body>

</html>

내부 스크립트를 쓰는 경우 

<script>

</script> 내부 자바스크립트가 되고, 안쪽에 자바스크립트 코드를 쓰면 된다.

외부 파일 연결 경우,  <script src="./js/test.js" defer></script>

 

자바스크립트란 ?

웹사이트에 동적인 기능을 넣는 언어,

역동적인 모션효과나 클릭 시 창이 뜨거나 어떤 동작을 하도록 만드는 언어

초창기 ES1버전에서 언어가 업데이트되면서 현재 최신 버전은 ES6버전

자바스크립트 선언문

html내부에서 자바스크립트를 작성하기 위해 태그를 선언하는 것으로 

<script>와 </script>사이에 자바스크립트를 작성하는 것을 말한다.

 

[기본형]

<script>

 자바스크립트 코드

</script>

 

자바스크립트의 주석문 

자바스크립트에서 주석을 쓰는 방법은 2가지가 있다. 

1. 한 줄짜리 짧은 내용을 적는 주석을 사용할 경우 : //주석문내용~~

2. 두 줄 이상의 긴 주석 내용을 넣을 경우(css와 동일함!) : /*주석문내용~~ */

자바스크립트에서 자주 사용하는 문장1

document는 html에서 body부분을 뜻한다.

.write()는 '쓰다'라는 뜻으로 body부분에 어떤 문구를 출력하라는 출력문을 말한다. 

자바스크립트로 코드를 테스트하거나 단순 출력할 경우 이 문장을 사용한다. 

 

[기본형]

document.write("브라우저 화면에 출력할 문구")

자바스크립트에서 자주 사용하는 문장2

console은 개발자도구에 있는 콘솔창을 말하며 콘솔창은 자바스크립트 코드를 테스트해보거나 오류가 발생했을 때 오류 메세지를 표시해주는 창을 말한다. 

.log()는 '기록을 남기다'라는 뜻으로 콘솔창에 기록을 남기라는 뜻이다.

 

[기본형]

console.log("콘솔창에 출력할 내용")

자바스크립트 코드 작성 시 주의사항★ 

1. 자바스크립트는 대/소문자를 구분하여 작성해야 한다.

- document.write() ⭕

- Document.write() ❌ 오류남!

2. 코드를 한 줄 작성한 후에는 반드시 ;(세미콜론)을 붙여주는 것이 좋다. ; 을 붙이지 않으면 한 줄에 2개의 코드를 작성했을 때 오류가 발생한다.

- document.write();  document.write(); ⭕

- document.write() document.write(); ❌ 오류남!

3. 하지만 코드를 작성할 때에는 가독성을 높이기 위해 한 줄에 한 문장만 쓰는 것이 좋다.

4. 문자형 데이터를 쓸 때에는 따옴표의 겹침 오류를 주의해야한다. 

-  console.log('제 이름은 "김땡땡"입니다.'); ⭕

-  console.log("제 이름은 '김땡땡'입니다."); ⭕

-  console.log("제 이름은 "김땡땡"입니다."); ❌따옴표 안에 같은 따옴표 안됨! 큰 따옴표 안에 큰따옴표 안됨! 작은 따옴표 안에 작은 따옴표 안됨 !

- console.log("제 이름은 '김땡땡"입니다.'); ❌ 따옴표 교차 안됨!

 

만약 반드시 큰 따옴표 안에 큰 따옴표를 넣거나 작은 따옴표 안에 작은 따옴표를 써야 하는 경우 

안쪽의 따옴표 앞에 \를 붙여준다. 그러면 그 다음에 위치한 기호를 코드가 아닌 일반적인 문자로 취급한다. 

-  console.log("제 이름은 \"김땡땡"\입니다."); ⭕

5. 코드를 작성할 때엔은 대괄호[], 중괄호 {} , 소괄호()의 짝을 잘 맞춰주어야한다.

변수

변수란 변하는 데이터 값을 저장할 수 있는 메모리 공간이다. 쉽게 말하자면 데이터를 담는 그릇이라고 할 수 있다.

변수에 저장할 수 있는 데이터 종류로는 문자형 데이터, 숫자형 데이터, 논리형 데이터, 빈 데이터(Null)가 있다.

변수에는 오직 1개의 데이터만 담을 수 있다. 그래서 새로운 데이터가 들어오게 되면 기존에 있던 데이터는 사라지고, 새로 들어온 데이터만 남는다. 이것이 변수의 가장 큰 특징이다. 

 

[기본형]

1. 변수의 이름만 선언하는 방법. 안에 값은 들어있지 않다. 

var 변수명;

2. 변수의 이름을 선언함과 동시에 값을 넣는 방법. 초기화한다고 함. 

var 변수명 = 초기값;

 

변수에 저장할 수 있는 자료형

자료형이란 데이터의 종류(=Data type)를 뜻한다. 

변수에 저장할 수 있는 데이터의 종류로는 문자형데이터(String), 숫자형데이터(Number), 논리형데이터(Boolean), 빈 데이터(Null)와 undefined데이터가 있다.

 

1. 문자형 데이터(String)

: 문자나 숫자를 " " 큰따옴표나 ' ' 작은따옴표로 감싼 것을 문자형 데이터라고 한다. 문자형 데이터는 따옴표 안에 태그가 들어 있으면 태그로 인식한다.

[기본형]

var 변수명 = "사용할 문자나 숫자";

 <body>
    <script>
      var str1 = "javascript";
      var str2 = "100";
      var str3 = "<h1>안녕하세요.</h1>";
      //변수 str1을 먼저 출력하고 그 다음 br태그를 출력함.
      document.write(str1, "<br />");
      document.write(str2);
      document.write(str3);
    </script>
  </body>

 

2. 숫자형 데이터(Number)

: 숫자형 데이터는 단어 의미 그대로 숫자를 말한다. 만약 "100"과 같이 따옴표가 숫자를 감싸고 있으면 이건 숫자가 아닌 문자형 데이터이다. 이런 데이터를 '문자형 숫자'라고 부르며 연산할 수 없다.

숫자형 데이터는 사칙연산을 비롯한 다양한 계산이 가능한 숫자 데이터를 말한다. 

만약 문자형 숫자를 숫자로 바꾸고 싶다면 Number("100")

[기본형]

var 변수명 = 숫자; 또는 Number("문자형 숫자")

 // 숫자형 데이터
      var num1 = 100;
      var num2 = "500";

      num2 = Number(num2); //num2 = "500" -> 500

      console.log(num1);
      console.log(num2);
    </script>

 

3. 논리형 데이터(Boolean)

: 논리형 데이터는 true(참) 또는 false(거짓)으로 나눠진다.

이 데이터는 주로 2개의 데이터를 비교할 때 나오는 값이다.

예를 들어 "100은 10보다 작다"는 잘못된 비교이므로 false를 반환한다.

 

★

Boolean  method의 ()안에 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환한다. 이 때 ()안에 0, null, undefined, 빈 문자(" ")를 제외한 모든 값에 대해 true를 반환한다. 즉, '없다'를 의미하는 데이터가 들어오면 false를 반환한다. 

 

[기본형]

var 변수명 = true 또는 false;

var 변수명 = 100 < 10; (이럴 경우 false라는 값이 변수명 안에 저장되어 있다. true, false를 직접 넣는 경우는 거의 없다.)

var 변수명 = Boolean(데이터);

    //논리형 데이터
      var bool1 = true;
      var bool2 = 10 >= 100;
      var bool3 = Boolean("hello");
      var bool4 = Boolean("0");
      // 0이라는 문자를 갖고 있는 상태고, 빈 문자가 아니라서 true. 공백이 들어가도 space bar1칸짜리 문자라서 true.
      //""만 있는 경우에 false.

      document.write(bool1, "<br />"); //true
      document.write(bool2, "<br />"); //false
      document.write(bool3, "<br />"); //true
      document.write(bool4, "<br />"); //true
    </script>

null과 undefined 데이터

null과 undefined는 변수 안에 데이터가 없다는 것을 뜻하는 자료형이다. 

null은 변수에 기존에 들어있던 값을 비울 때 사용하는 자료형이고, 

undefined는 변수명만 선언했을 때 기본적으로 들어있는 기본값이다.

데이터 자료형은 소문자로 써야한다.

*null은 현재 '들어있던 데이터를 비웠기 때문에 값이 없다' 라는 뜻. 휴지통 비우기와 같다.

*undefined는 아직 '값이 정의되지 않았다'.빈 그릇입니다라는 뜻 

[기본형]

var 변수명2 = "hello";

변수명2 = null;         ▶ 변수명2 안에 있던 기존 값을 비운다. 

var 변수명;               ▶변수 안에는 undefined 데이터가 들어있다.

<script>
      var box; //undefined가 들어있다. '아직 값이 정의되지 않았다.'

      document.write(box, "<br />");

      var box2 = 100;
      document.write(box2);

      box2 = null;
      document.write(box2);
    </script>

typeof

typeof는 변수 안에 들어 있는 자료형(숫자인지? 문자인지?...)이 궁금할 때 사용한다.

[기본형]

typeof 변수명 또는 데이터;

 var box2 = 100;

 var box3 = "100";

  document.write(typeof box3, "<br/>");     string 으로 출력된다.
  document.write("str에 들어있는 값은 : ", str, "<br />");

str에 들어있는 값은 : ,(콤마)는 먼저 출력하고, str변수 안에 있는 null ,(콤마)-출력하고 줄바꿈하라는 뜻.

변수 선언 시 규칙★ 

1. 변수명의 첫 글자로는 영문(보통 소문자), $, _(언더스코어)만 올 수 있다. 

·  var $num = 10; 👌🏻 

·  var _num = 10; 👌🏻

·  var num = 10; 👌🏻

·  var 1num = 10; ❌

2. 변수명의 첫 글자 다음은 영문자, 숫자, $, _를 포함할 수 있다.

·  var num100; 👌🏻  

·  var 100num; ❌

3. 변수명으로는 예약어(document, console, location, var...)를 사용할 수 없다.

예약어란 javascript에서 이미 코드로써 사용되고 있는 단어를 말한다.

· var var; ❌

· var document; ❌

· var String; ❌

4. 변수명을 지을 때에는 되도록 의미를 부여해서 짓는 것이 좋다.

· var num = 10; 👌🏻

· var num = "하이루"; 🚫  

5. 변수명을 사용할 때는 대소문자를 구분해야한다.

· var num ;

  document.write(Num); ❌ 위의 변수명 소문자로 만들어놓고, 대문자로 불러오는 것 안됨! 선언된 적 없었어 오류 뜸 !

변수명 표기법 

변수의 이름을 지을 때 짧은 이름인 경우 소문자로 짓지만 

이름이 단어와 단어 조합일 경우 두 가지 방법으로 변수명을 지을 수 있다. 

1. 카멜 표기법(낙타 표기법)

변수명을 단어+단어 조합으로 지을 때 두번 째 단어부터 첫 글자를 대문자로 표기하는 방식.

· var userNickName 낙타 등모양과 닮았다.

2. 스네이크표기법

class나 id이름을 지을 때처럼 단어와 단어 사이에 _(underscore)를 포함하여 변수명을 짓는 방식을 말한다. _와 이어진 모양이 마치 뱀모양과 비슷하다고 하여 스네이크표기법이라고 부른다.

· var user_name_first

연산자

더하기,빼기,곱하기,나누기,나머지와 같은 연산을 하는 코드를 말한다. 자바스크립트에서도 다양한 연산자를 통해 계산 작업을 한다. 자바스크립트 프로그래밍에서는 산술,문자결합,대입(복합대입),증감,비교,논리,삼항조건 연산자가 있다.

산술연산자

산수 시간에 배웠던 더하기, 빼기, 곱하기, 나누기, 나머지를 산술 연산자라고 한다.

산술 연산자로 연산을 하기 위해서는 연산 대상 데이터(=피연산자)가 두 개 이상 필요하다.

[기본형]

A+B : 더하기

A - B : 빼기

A * B : 곱하기

A / B : 나누기 

% : 나머지 

<body>
    <script>
      var num1 = 15;
      var num2 = 2;
      var result;

      result = num1 + num2;

      document.write("result:", result, "<br />");

      result = num1 - num2;

      document.write("result:", result, "<br />");

      result = num1 * num2;

      document.write("result:", result, "<br />");

      result = num1 / num2;

      document.write("result:", result, "<br />");

      result = num1 % num2;

      document.write("result:", result, "<br />");
    </script>
  </body>
 

2. 문자 결합 연산자

문자 결합 연산자는 피연산자가 문자형 데이터이다. 

여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다.

 

문자 결합 연산자는 피연산자 중 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 변환이 되고 문자 결합이 이루어져 하나의 문자형 데이터로 반환된다. 

 

기호는 (+)더하기 기호를 사용한다.

[기본형]

· 문자형데이터 + 문자형데이터 = 하나의 문자형 데이터

: "hello " + "world" = "hello world" *hello다음 공백을 띄우고 " 를 해야 결합됐을 때 공백도 결합되어 나옴!

· 문자형데이터 + 숫자형데이터 = 하나의 문자형 데이터

: "100" + 200 = "100200" *하나의 문자형 데이터가 되기 때문에 300이 나오는게 아님!

   //문자결합연산자
      var str1 = "학교종이";
      var str2 = "땡땡땡";
      var str3 = 8282;
      var str4 = "어서 모이자";
      var result2;

      result2 = str1 + str2 + str3 + str4;

      document.write("result2 : ", result2, "<br />");
    </script>

 var str1 = "학교종이";
      var str2 = "땡땡땡";
      var str3 = 8282;
      var str4 = "어서 모이자";
      var str5 = 100;
      var result2;

      result2 = str3 + str5 + str1 + str4;
      document.write("result2 : ", result2, "<br />");
      //산술연산자가 결합돼서 str3과 str5가 합쳐진 8382가 출력되고, str1+str4다시 문자데이터 결합이 이루어진다.

3. 대입(복합대입) 연산자

대입연산자(=)는 연산된 데이터를 변수에 저장할 때 사용한다.

복합대입 연산자는 대입 연산자 앞에 산술연산자가 붙은 것으로 

대입연산자와 산술연산자가 복합적으로 적용된 것을 말한다. 

 

[기본형]

· A = B : B의 값을 A에 대입한다.

· A += B : A는 A와 B를 더한 값이다.

· A -= B : A는 A에서 B를 뺀 값이다.

· A *= B : A는 A와 B를 곱한 값이다. 

· A /= B : A는 A에서 B를 나눈 값이다.

· A %= B : A는 A에서 B를 나눈 나머지 값이다.

 <script>
      var num1 = 10;
      var num2 = 3;

      num1 += num2; //num1의 값이 13이 됨! 더함과 동시에 대입을 같이 한다.
      document.write(num1, "<br />");

      num1 -= num2; //num1=10 13-3으로  num1의 값은 10이 된다.
      document.write(num1, "<br />");
 
      num1 *= num2; //num1=30
      document.write(num1, "<br />");
 
      num1 %= num2; //num1(30)%num2(3) 이니까 나눴을 때 나머지값이 0 이된다. num1=0
      document.write(num1, "<br />");
    </script>

 

실습 :-) 복합대입연산자 활용하여 1행 3열 table태그 만들기

 

var table = "<table border='1'>";

      table += "<tr>";
      table += "<td>1</td><td>2</td><td>3</td>";
      table += "</tr>";
      table += "</table>";

      document.write(table);

4. 증감 연산자

증감 연산자는 변수에 들어있는 순자를 1씩 감소시키는 '감소연산자(--)'와 1씩 증가시키는 '증가연산자(++)'

피연산자(=연산을 당하는)가 오직 한개만 필요하다.

연산기호가 변수의 앞에 있는지 뒤에 있는지에 따라 연산 방법이 달라진다. 

[기본형]

1. 증가연산자

변수++; 또는 ++변수;

2. 감소연산자

변수--; 또는 --변수;

//증감연산자
      var num3 = 10;
      var num4 = 20;
      var result;

      num3--; //9
      document.write(num3, "<br />");

      num3++; //10
      document.write(num3, "<br />");

 

전위연산과 후위연산

변수++ : 후위연산

++변수 : 전위연산

전위연산은 변수 앞에 기호가 붙어 있는 것을 말하고 후위연산은 변수 뒤에 기호가 붙어있는 것을 말한다.

기호의 위치에 따라 계산 방식이 달라진다. 

더보기

++B만 써도 되고, 위의 예처럼 값을 var에 담아서 쓸 때도 있다.

전위연산은 거의 안 쓰고 후위연산을 많이 씀!

1. 전위 연산

var ②A = ①++B; 

: ① 먼저 변수 B의 값을 1증가시킨 후 ② A에 대입한다.

++B만 써도 되고, 위의 예처럼 값을 var에 담아서 쓸 때도 있다.

 

2. 후위 연산✅아주 많이 사용된다.

var ②A = ①B③++; 

: ①먼저 변수 B의 값을 ② A에 대입한 후에 ③1씩 증가시킨다.

 var num3 = 10;
      var num4 = 20;
      var result;

      num3--; //9
      document.write(num3, "<br />");

      num3++; //10
      document.write(num3, "<br />");

      result = num4++;
      document.write(result, "<br />");
      document.write(num4, "<br />");
      //후위연산 num4에 있는 20이 result에 대입되어 result가 20이 되고, 다시 num4에서 증감하므로
      //num4는 21이 된다.

      result = ++num4; //num4 21에서 1증가했기 때문에 result는 22가 된다.
      document.write(num4, "<br />");
    </script>

 

5. 비교 연산자

두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자

연산된 결과값은 'true' 또는 'false'로 논리형 데이터를 반환한다.

[기본형]

· A > B : A는 B보다 크다. (초과)ex)3>10이면 3은 10보다 크다. 라고 해석해야한다. 

· A < B : A는 B보다 작다. (미만)

· A >= B : A는 B보다 크거나 같다.(이상)

· A <= B: A는 B보다 작거나 같다.(이하)

· A == B: A는 B와 같다.

→==는 약한 비교라고 한다. 예로 "10" == 10 약한비교에서는 true가 나온다. 자료형이 다르더라도 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환한다.  

· A === B : A는 B와 같다.

→===는 엄격한 비교, 강한 비교라고 한다. 반면 강한비교는 "10" === 10 자료형까지 비교를 하기 때문에 false가 나온다.  *실무에서는 엄격한 비교를 많이 쓴다. 

· A != B : A는 B와 다르다. *기호가 2개 있는 경우 약한 비교이다. 

→10 != "10" !는 다르다는 의미라서 기호가 2개 있는 약한 비교에서 다르면 true를 반환하다. 자료형까지 안보고 숫자가 같기 때문에 같은 것으로 인식되어 false가 반환된다. 

· A !== B : 

→!==도 엄격한 비교이다. 숫자를 비교할 경우 표기된 숫자 또는 자료형이 일치하지 않으면 true를 반환한다. "10"과 10을 비교할 경우 표기된 숫자는 같으나 자료형이 다르므로 true를 반환한다.

<script>
      var k = 10,
        m = "10";
      // var는 한번만 선언하고 ,(콤마)로 그릇 이름을 여러 개 만드는 방법이다.

      console.log(k == 10);
      console.log(m == 10);
      console.log(k === m);
      console.log(k != 10);
      console.log(m != 10);
      console.log(k !== 10);
      console.log(m !== 10);
    </script>

true

true

false

false

false

false

true 로 반환된다.

var a = 10,
        b = 20,
        c = 10,
        f = "20";
      var result;

      result = a > b; //false

      document.write(result, "<br />");
      result = a < b; //true

      document.write(result, "<br />");

      result = a <= b; //true

      document.write(result, "<br />");

      result = b == f; //true

      document.write(result, "<br />");

      result = a != b; //true

      document.write(result, "<br />");

      result = b === f; //false

      document.write(result, "<br />");

 

6. 논리 연산자

논리연산자에는 ||(or), &&(and), !(not)연산자가 있다.

논리연산자는 피연산자가 논리형 데이터인 true또는 false값을 반환하는 데이터이다.

 

||(or)연산자는 피연산자 중 값이 하나라도 true가 있으면 true결과값을 반환

&&(and)연산자는 피연산자 중 값이 하나라도 false가 있으면 false로 결과값을 반환

!(not)연산자는 '논리부정연산자'로 피연산자의 값이 true면 false를 반환하고 false면 true를 반환한다. 

 

연산자의 우선순위✅

일반적인 산수를 연산할 때처럼 연산자에도 우선순위가 있다.

1. ()가 포함되어 있으면 ()가 가장 먼저 계산된다. 

2. 단항연산자(--, ++, !) 

3. 산술연산자(+,-,*,/,%)

4. 비교연산자(<,>,>=,<=,==,===,!=,!==)

5. 논리연산자(||,&&) *!(not)연산자는 단항연산자에 속하고, 우선순위 2번째이다.

6. 대입(복합대입)연산자(=,+=,-=,*=,/=,%=) 

<script>

      var a = 10;
      var b = 20;
      var m = 30;
      var n = 40;
      var result;

 

      result = a > b || b >= m || m > n; //a>b b>=m m>n 먼저 계산해보면 3값 모두 false이므로 하나라도 true가
     없기 때문에 결과값은 false

 

      document.write(result, "<br />");

 

      result = a > b || b >= m || m <= n; //m <= n 비교했을 때 true이므로 최종 결과값은 true이다.

 

      result = a <= b && b >= m && m <= n; //&&는 하나라도 false가 나오면 최종 결과값이 false가 나와서 false.

 

      result = a <= b && b < m && m <= n; //true

 

      result = !(a > b); //true
     
    </script>

 

7. 삼항조건 연산자 

항(피연산자)이 3개가 필요하다. 조건에 따라서 결과값을 다르게 만들어주는 연산자이다.

삼항조건연산자는 조건식(결과값이 true아니면 false가 반환되는 식들)

조건식의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 연산을 위해 피연산자가 3개가 필요하다.

[기본형]

①조건식 ? ②조건식이 true면 실행할 코드 : ③조건식이 false면 실행할 코드;

ex) 나이를 묻는다. 성인입니까? true 성인이 아니다  라고 대답하면 false  조건식이 false일 경우 경고창 띄우는 등

ex) 로그인 한게 맞아 ? 로그인 한게 true면 login버튼을 띄우지마. false면 login버튼을 띄워.

<script>
      var a = 10;
      var b = 3;

      var result = a > b ? "hello world" : "javascript"; //조건식 a>b가 true이기 때문에 첫번째 true면 실행할 데이터인 hello world
      var result = a < b ? "hello world" : "javascript"; //javascript

 "hello world"자리에 문구 말고도 다른 식, 함수가 나와도 된다.  

 

실습 :-) 적정체중을 구하는 테스트기 만들기 

 

적정체중을 구하는 공식

적정체중 = (본인 신장 - 100)*0.9

 

철수의 키 : 180cm

철수의 몸무게 :74kg

철수의 적정체중?  

 <script>
      var userHeight = 180;
      var userWeight = 74;
      var normal_w;

 

      //적정체중 구하기
      normal_w = (userHeight - 100) * 0.9;

 

      document.write(normal_w);

    </script>

 

더보기

*prompt창 = 질의응답창 

브라우저 시스템 안에서 사용자에게 질의응답을 받거나 확인을 받거나 공고메세지를 주고 싶을 때 뜨는 창을 시스템 창이라고 한다.

 

사용자에게 질의 응답을 받을 수 있는 prompt창

사람마다 키와 몸무게가 다 다르기 때문에 위에 있는 계산방식은 유연하지 않다. 이 때 사용자로부터 특정한 응답을 받기 위해서는 prompt창을 이용할 수 있다.

prompt창은 'prompt메서드'라고도 부르며 ()안에 질문과 기본응답을 ,로 구분하여 입력할 수 있다.

이 때 기본 응답은 생략이 가능하다. 

prompt창에 사용자가 입력한 모든 값은 문자열로 반환되며 prompt창이 위치했던 해당 변수에 그 값이 다시 담기게 된다.

 

[기본형]

prompt("질문", "기본응답")

하나의 식이라서 변수에 넣어놓고 쓸 수 있다.

 

prompt확인에는 true, 취소에는 false가 들어있다.

입력되는 모든 값들은 문자열로 반환되서 사용자가 입력한 내용이

변수 안에 들어가므로 var name=prompt("당신의 이름은?") 김자반 이 된다. 

 

0.1kg라도 차이가 나면

 

적정체중은 normal_w에 들어있다. normal_w랑 사용자가 입력한 몸무게랑 비교해야한다.

비교해야하는 것끼리 먼저 쓴다. normal_w-5 < weight 

논리연산자를 써야한다. 사용자가 입력한 몸무게가 적정체중보다 5키로 뺀거보다 크거나 같으면 true, 

적정체중보다 5키로 더한거보다 작거나 같으면 true. 두 데이터가 모두 true, true 

||을 쓰면 둘중 하나만 true면 true값을 내보내니까, 양쪽 모두 true여야지 범위가 된다. 

 

자바스크립트 쓸 때 코드가 유연하고 효율적이여야한다.

1단계, 코드를 보고 무슨 내용이구나 무슨 데이터가 들어가있구나 파악하고 있어야한다.

<body>
    <!-- 땡땡이의 하루 지출내역이 다음과 같다고 할 때
   하루 지출 비용의 합계를 구한 후 적정 지출 비용의 초과 여부를 출력해라.
   <땡땡이의 하루 지출내역>
   교통비 : 3,000원
   식비 : 6,000원
   음료비 : 3,000원

   하루용돈 : 10,000원
   -----------------------------------------------------------------
   땡땡이가 하루 용돈 만원을 초과했다면 "~원 초과", 아닐 경우에는 "용돈 관리 굿"이라고
   화면에 출력해주세요.  
    -->

    <script>
      var traffic = 3000;
      var food = 6000;
      var beverage = 3000;
      var pocketMoney = 10000;
      var spentMoney = traffic + food + beverage;
      var overuse = spentMoney - pocketMoney;

      overuse = spentMoney > pocketMoney ? overuse + "원 초과" : "용돈 관리 굿";

      document.write(overuse);
    </script>

2000원 초과 출력됨.

<script>
      var price1 = 3000;
      var price2 = 6000;
      var price3 = 3000;

      var total = price1 + price2 + price3;

      var result = total > 10000 ? total - 10000 + "원 초과" : "용돈 관리 굿";

      document.write(result);
    </script>

'java script' 카테고리의 다른 글

getAttribute(),setAttribute()메서드/배열의고차원함수-forEach(),map(),filter(),find(),reduce(),isArray()  (0) 2025.06.02
argument/rest parameter/익명함수/즉시실행함수/화살표함수/함수스코프  (1) 2025.05.28
var_let_const  (0) 2025.05.26
배열객체  (0) 2025.05.26
반복문-while문/for문/중첩for문/객체-Date,Math  (3) 2025.05.16