[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 9

 

[Day 9] Ⅳ. JacvaScript 2

 

1. 숫자와 연산자

   - 숫자의 종류: 자바스크립트는 숫자에 대해 하나의 자료형만 갖는다.

       1. 십진수(decimal): 0~9까지만 사용하여 숫자를 표현

          - 정수(integer): e.g.,10, 400, -5

          - 부동소수점(float): 소수점 이하 6자리까지 정밀도, e.g., 12.5, 6.4486547

          - 배정도 부동소수점(double): 소수점 이하 15자리까지 정밀도

          ※ 배정도 부동소수점이 소수점 이하를 더 많이 표현할 수 있어 정확함.

       2. 이진수(binary): 0과 1만 사용하여 숫자를 표현

       3. 8진수(octal): 0~7까지만 사용하여 숫자를 표현

       4. 16진수(hexadecimal): 0~9, a~f까지 사용하여 숫자를 표현, CSS 색상 표현 시 사용.

 

   - 숫자 익히기(with. 개발자도구-Consol)

변수를 선언하고 숫자값으로 초기화

변수들이 동일한 자료(숫자)인지 확인

 

 

   - 산술 연산자: 사칙연산에 사용되는 기본 연산자

산술연산자의 종류 (출처: 포스텍)

 

   - 산술연산자 익히기(with. 개발자도구-Consol)

일반 연산

변수를 선언하고 숫자값으로 초기화 후 연산

조금 더 복잡한 연산의 예

 

   - 연산자 우선순위

var num1 = 10;
var num2 = 50;
num2 + num1 / 8 + 2;

/*
num2 + num1 계산을 먼저 하는 게 아니라
num1 / 8 계산을 우선
*/

// 6이라는 출력 값을 가지려면 아래와 같이 작성해야 함
(num2 + num1) / (8 + 2);

 

상기 예제 실행

       1. 곱하기/나누기가 더하기/빼기보다 먼저 계산됨

       2. 합계는 왼쪽에서 오른쪽으로 계산됨

       3. 괄호를 사용하여 연산자 우선순위를 변경

 

   - 증감연산자: 변수의 숫자값을 하나씩 반복적으로 더하거나 뺄 때 사용(반복문에서 주로 사용, 변수에만 사용 가능)

증감연산자는 변수 없이 단독 사용 불가함

       1. 증가 연산자: ++

       2. 감소 연산자: --

증감연산자 사용의 예시

 

   - 대입연산자: 변수에 값을 할당하는 연산자, 오른쪽 값을 왼쪽에 할당

대입연산자의 종류 (출처: 포스텍)

       1. 대입연산자 예시 1

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

상기 예제 콘솔 실행의 예시

 

 

       2. 대입 연산자 예시 2

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x *= y; // x now contains the value 12

상기 예제 콘솔 실행의 예시

 

   - 비교연산자: 참/거짓 테스트를 실행하고, 그 결과에 따라 선택적으로 적절한 코드를 실행하고자 할 때 사용

비교연산자의 종류 (출처: 포스텍)

       1. 값의 동일성 테스트

          - == / !=: 값만 비교

          - === / !==: 값과 자료형도 비교(오류를 줄이기 위해 주로 사용)

 

       2. 비교연산자 예시

<button>Start machine</button>
<p>The machine is stopped.</p>
var btn = document.querySelector('button');
var txt = documemt.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
	if (btn.textContent === 'Start machine') {
      btn.textContent = 'Stop machine';
      txt.textContent = 'The machine has started!';
} else {
	  btn.textContent = 'Start machine';
      txt.textContent = 'The machine is stopped';
      }
}

          - 버튼을 누르면 버튼이 텍스트에 따라 적절한 문구를 사용하도록 구성함.