5 March 2022 / FRONTEND

자바스크립트_02

연산자

자바스크립트의 연산자는 자바와 거의 동일하다고 보면 된다. 자바와 다른 연산자만 살펴보도록 하겠다.

===, !== 연산자: 값이 같은지 비교하는데, 해당하는 값의 타입까지 포함하여 비교하는 연산자이다. 40과 “40”은 다르다.

내장 객체

객체를 따로 생성하지 않아도 자동으로 객체가 생성되어 제공되는 객체를 말한다. 대표적 예시로 Window 객체, Document 객체가 있다. Window 객체는 생략가능하다.

자바스크립트, Html 연동하여 사용에 대해 실습을 진행하였다. 전체 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>

</style>


<script>
  // 윈도우 로드 이벤트 처리
  window.onload = function(){
      // bookOrder();
    }
  function bookOrder(){
    // 도서 주문: 제어문, 내장함수 이용 실습
    var quen = prompt("도서 구매 수량을 입력하세요", "1");

    if(isNaN(quen)){
      alert("올바른 값을 입력해주세요.");
      return;
    }else if(quen.length == 0){
      alert("값을 입력해주세요.");
      return;
    }else if(quen <= 0 ){
      alert("0보다 큰 수를 입력해주세요.");
      return;
    }
    var total = 15000*quen;
    var result = confirm("총 도서 구매금액 : "+total+"\n구매하시겠습니까?");
    if(result){
      alert("도서 구매가 완료되었습니다.");
    }else{
      alert("도서 구매가 취소되었습니다.");
    }

  }
</script>

<body>

  <div id ="show_order"></div>
  <a href="javascript:bookOrder()">도서구매</a>
  <button id="btnBookOrder" onClick="bookOrder()" value="BOOK_ORDER">도서구매</button>

</body>
</html>

실행 결과는 다음과 같다.

<a href="javascript:bookOrder()">도서구매</a>
<button id="btnBookOrder" onClick="bookOrder()" value="BOOK_ORDER">도서구매</button>

위 코드는 html에서 자바스크립트의 함수를 실행하는 방법이다. 링크를 통해 실행시킬 수도 있고, 버튼을 이용하여 실행시킬 수도 있다.

FE_01

페이지의 버튼을 누르면 도서 구매 함수가 시작된다.

var quen = prompt("도서 구매 수량을 입력하세요", "1");

prompt 내장 함수를 이용하면, 사용자로부터 값을 읽어들일 수 있다. prompt 함수는 2가지 방법으로 사용할 수 있다.

prompt(“메시지”, 기본값)
prompt(“메시지”) : 기본값을 지정하지 않는 경우 “”, undefind 중 브라우저에 따라 자동으로 설정

FE_02

위와 같이 입력 칸이 나타난다.

var total = 15000*quen;
var result = confirm("총 도서 구매금액 : "+total+"\n구매하시겠습니까?");

값을 입력받고, 도서 가격에 수량을 곱하여 총 가격을 구한다. 그 후 사용자에게 최종 확인 메시지를 보낸다.

confirm 함수는 boolean 타입을 반환하는데, 사용자가 확인 버튼을 눌렀다면 true를, 취소 버튼을 눌렀다면 false를 반환한다.

FE_03

선택 여부를 묻는 창이 나타난다.

if(result){
	alert("도서 구매가 완료되었습니다.");
}else{
	alert("도서 구매가 취소되었습니다.");
}

result 변수에 conFirm의 리턴값을 저장하고 위와 같이 분기를 나누어 처리한다.

FE_04

확인 버튼을 누르자 true에 맞는 메시지가 나타난 모습이다.

추가로 내가 원하는 입력값이 아닌, 잘못된 값을 입력된 경우에 대한 처리를 하는 부분을 살펴보자.

if(isNaN(quen)){
	alert("올바른 값을 입력해주세요.");
	return;
}else if(quen.length == 0){
	alert("값을 입력해주세요.");
	return;
}else if(quen <= 0 ){
	alert("0보다 큰 수를 입력해주세요.");
	return;
}