Javascript (자바스크립트)의 이해 - 두 수 받아서 계산하기

2020. 4. 16. 19:25

자바스크립트 파일(Javascript)은 HTML 태그에서 <head></head><body></body> 외부에 따로 존재한다.

console.log() : 웹에서의 콘솔에 뿌려주는 print문이다. 지난번 Node.js에서는 console.log()였는데 자바스크립트에서는 ;이 붙는다. console.log();

console.log(document); : 콘솔에 html 태그 전체를 콘솔에 띄워준다.

또한 아톰에서 HTML 파일을 수정하지 않고 콘솔창을 통해서도 바로바로 명령을 실행할 수 있다.

document와 그 메소드들

document : 정확히는 window.document로 접근해야한다고 한다. window : 객체, document : 객체인데 window는 전역객체로 다 적으면 너무 길어져서 현재는 생략해도 무관하게 만들어 놓은 것 같다. 아무튼 document객체는 콘솔에 띄워보면 해당 html 파일과 동일하다. 그냥 document = html 파일 전체라고 이해하면 되겠다. document : 자기 자신

documnet는 자바스크립트가 HTML의 각 요소에 접근할 수 있도록 도와준다. 이 document는 여러 메소드를 가지고있다.

document.getElementById() : get(얻는다)Element(요소를)ById(Id로 된) -> document에서 Id로 된 요소를 얻는다.

var button = document.getElementById("calculate")

// button이라는 변수를 정의한다 = documnet에서 Id로된 요소를 얻는다. 어떤 Id냐? (그 Id는 "calculate"다.)

document의 메소드들	타겟
document.getElementsByTagName("ABC")	태그 이름의 속성값이 "ABC"인 요소를 얻는다.
document.getElementById("ABC")	Id 속성값이 "ABC"인 요소를 얻는다.
document.getElementsByClassName("ABC")	클래스 이름의 속성값이 "ABC"인 요소를 얻는다.
document.getElementByName("ABC")	이름의 속성값이 "ABC"인 요소를 얻는다.

addEventListener

이벤트를 등록하는 가장 권장되는 방식이다.

addEventListener('ABC',DEF) : 'ABC' 이벤트가 들어오면 DEF 함수를 실행해라.

click	클릭했을 때
change	변경됐을 때
keydown	키를 눌렀을 때
keyup	키를 눌렀다 땠을 때
mousedown	마우스를 눌렀을 때 (click과 혼동 X)
mouseup	마우스를 눌렀다 땠을 때
mousemove	마우스가 움직였을 때
mouserover	마우스가 특정 객체 위로 올라갔을 때
mouseout	마우스가 특정 객체 범위 밖으로 나갔을 때
select	선택했을 때
load	로드가 완료됐을 때
focus	포커스가 될 때

// 위에 button이란 변수를 정의했고 그 변수에 액션을 줄거다.

button.addEventListener('click',isitmoreten)   // 버튼(변수명)아. 'click'이벤트가 들어오면 isitmoreten 함수를 실행해.  

function isitmoreten () {
  alert(document.getElementById("inputNumber0").value);

  var number = document.getElementById("inputNumber0").value;
  console.log(number);

  // if(0) -> 0, 공백 = False, 그 외 True if(1) -> False
  if(number >= 10) {
  console.log("10 이상");
  }
  else {
  console.log("10 미만");
  }
}

removeEventListener

등록된 이벤트를 삭제하는 방식이다.

실습!!!

서버 실행 파일(Node.js)

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app).listen(80);

app.get('/testjs', function (req, res) {
res.sendfile("javascript.html");
});

console.log("server is running...")

HTML 파일 (with Javascript)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>javascript</title>
  </head>
  <body>
    hello

    <input type="text" id="inputNumber0" value="">
    <input type="button" id="popup" value="팝업">
    <br><br>
    <input type="text" id="inputNumber1" value="">
    <input type="text" id="inputNumber2" value="">
    <input type="button" id="calculate" value="계산">


  </body>

  <script type="text/javascript">
    console.log("hello javascript");

    console.log(document); // html 태그 전체를 콘솔에 띄워준다.


    // 다른 언어에서 쓰던 것처럼 이렇게 계산이 된다.
    // var a = 10;
    // console.log(a);
    // a = 20;
    // console.log(a);
    // a = a * 10;
    // console.log(a);
    // console.log(a,a);
    //
    // var b = "30";
    // console.log(a + b);
    // console.log(a+ Number(b));

    var button = document.getElementById("popup") // button이라는 변수를 정의. 거기에는 documnet에서 get(얻는다)Element(요소를)ById(Id로 된)을 담는다. 어떤 Id냐? (그 Id는 "calculate"다.)

    // 함수의 이름 대신 함수 자체를 그냥 넣은 것. 이것은 아래와 같다.
    // button.addEventListener('click',function() {
    //
    //   alert(document.getElementById("inputNumber0").value);
    //
    //   var number = document.getElementById("inputNumber0").value;
    //   console.log(number);
    //
    //   // if(0) -> 0, 공백 = False, 그 외 True if(1) -> False
    //   if(number >= 10) {
    //     console.log("10 이상");
    //   }
    //   else {
    //     console.log("10 미만");
    //   }
    // })

    // 위에꺼랑 같은거다. 함수 부분과 addEventListener 부분을 분리한거다.
    button.addEventListener('click',isitmoreten)  // 버튼아 'click' 이벤트가 들어오면 isitmoreten 함수를 실행해.

    function isitmoreten () {
      alert(document.getElementById("inputNumber0").value); // 알람을 띄워. 무엇을? (document에서 "inputNumber0"이란 요소의 Id의 값(value)만 뽑아내라.)

      var number0 = document.getElementById("inputNumber0").value;
      console.log(number0);

      // if(0) -> 0, 공백 = False, 그 외 True if(1) -> False
      if(number0 >= 10) {
        console.log("10 이상");
      }
      else {
        console.log("10 미만");
      }
    }

    // 두 수를 입력 받아서 더하기.
    var button = document.getElementById("calculate")
    button.addEventListener('click',function(){

      // 문자로 입력받는다. 숫자로 입력 받을 수는 없기 때문에 형변환을 해야한다. Number() 반드시 N은 대문자로!!
      var number1 = document.getElementById("inputNumber1").value;
      var number2 = document.getElementById("inputNumber2").value;

      console.log(number1,"(와)과",number2,"의 합은");
      var result = Number(number1) + Number(number2);
      console.log(result,"입니다.");

      // if(0) -> 0, 공백 = False, 그 외 True if(1) -> False
      if(result >= 100) {
        console.log("두 수를 합한 결과는 100 이상입니다.");
      } else {
        console.log("두 수를 합한 결과는 100 미만입니다.");
      }

      console.log(number1,"(와)과",number2,"의 곱은");
      var result2 = Number(number1) * Number(number2);
      console.log(result2,"입니다.");

      // if(0) -> 0, 공백 = False, 그 외 True if(1) -> False
      if(result2 >= 100) {
        console.log("두 수를 곱한 결과는 100 이상입니다.");
      } else {
        console.log("두 수를 곱한 결과는 100 미만입니다.");
      }

      if(number1 == number2) {
        console.log(number1,"과",number2,"는 같습니다.");
      } else if (number1 > number2) {
        console.log(number1,"이",number2,"보다 큽니다.");
      } else {
        console.log(number1,"이",number2,"보다 작습니다.");
      }

    }
  )


  </script>


</html>

위에 input type"text"칸에 71을 넣고 '팝업'버튼을 누르면 첫 번째 alert(document.getElementById("inputNumber0").value); 에 의해 71이란 값을 추출해 팝업으로 띄운다. 그 다음 아래 있는 로직을 실행해 콘솔창에 "10 이상"이라는 메시지를 반환한다.

그리고 아래 있는 input type"text" 칸 2개에 23과 12를 넣고 '계산'버튼을 누르면 하단의 자바스크립트가 Id로부터 받아 작동한다.
(변수명이 동일하게 var button이어도 각각 잘 작동하는걸 보니 여기도 다형성이 적용되는 것 같다.)

'개발자 > Javascript' 카테고리의 다른 글

Javascript (자바스크립트) for문에 대한 고찰 (0)	2020.04.23
Javascript (자바스크립트) for문 별찍기 (0)	2020.04.23
Javascript (자바스크립트) 로그인 페이지 만들기 (0)	2020.04.23
Node.js 설치, express, supervisor 설치 (0)	2020.04.15
Web 흐름 (0)	2020.03.27

좋은 개발자가 되자