[2일차] Do it! 자바스크립트 입문 / 03 변수와 자료형 그리고 연산자

컴퓨터 수리로 며칠 못했다 ㅠㅠ 그래도 끝까지 완독 하는 게 목표!!

---

03-1 변수란 무엇일까?

- 변수(Variable) : 상황에 따라 다른 값을 입력받아야 할 때 사용

- 상수(Constant) : 변하지 않는 값

- 변수를 선언하는 규칙 3가지

  ① 이름은 의미 있게 짓는다

  ② 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다

      * 첫 번째 단어는 소문자로, 두 번째 단어부터는 대문자로 시작하는 방법 => Camel Case

      * 단어별로 밑줄(_)을 사용하여 짓는 방식도 있음

  ③ 선언할 수 없는 이름도 있다

      * 첫 글자는 반드시 문자나 밑줄(_) 또는 달러 기호($)로 시작해야 하며

        그 후에는 문자나 밑줄, 달러 기호, 숫자를 사용할 수 있음

- 변수에 값이나 식 저장하기

  * 변수를 선언하면서 저장하는 방법

  * 변수를 선언한 다음에 값을 저장하는 방법

  * = 기호는 할당 연산자라고 부름

var apple = "yummy";		// 변수를 선언하면서 값을 저장
var banana;
banana = "long and yummy";	// 변수를 선언한 다음에 값을 지정


// 변수에 식을 저장하는 방법
var apple = 2000;
var banana = 10000;
var total = apple + banana;

 

 

 

[ 실습 : 나이 계산하기 ]

- 자주 사용하는 프로그래밍 기법

// ┌ 1) 문서에  ┌ 2) 선택자를 사용하여 ┌ 4) HTML에 삽입한다
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세 입니다."; 
//                      └ 3) id값이 result인 태그를 선택하고

- 1단계 실행 결과 (입력 X, 변수를 초기화하여 처리)

                        기본 화면                                                                          '나이 계산하기' 버튼 클릭 후

 

 

 

- 2단계 실행결과 (입력 O, 입력받은 값으로 초기화)

                    '나이 계산하기' 버튼 클릭 후 팝업 출력                                      사용자가 입력한 나이로 계산해서 결괏값 출력

 

 

 

- 복습하기 (사용자에게 올해 연도까지 입력받기)

 

 

 

- let, const 예약어

  : ES6 버전부터 변수 선언 시 let, const 예약어 사용 가능!

  : let으로 선언한 변수는 블록({ }로 묶은 범위)을 벗어나면 사용 불가능

  : const는 상수값을 선언할 때 사용

// let과 const 예약어를 사용한 예제
const currenYear = 2021;
let birthYear = prompt("태어난 연도를 입력하세요.", "YYYY");
let age = currenYear - birthYear + 1;

 

 

 

03-2 자료형 이해하기

- 자료형의 종류

자료형		설명
기본형	number(숫자)	따옴표 없이 표기한 숫자를 표시
	string(문자열)	작은따옴표(' ')로 묶어 표시
	boolean(논리형)	참(true)과 거짓(false) 두 가지 값만 갖고 있는 유형
	undefined	자료형을 지정하지 않았을 때의 유형 예) 변수 선언 후 값을 정의하지 않으면 undefined가 됨
	null	값이 유효하지 않을 때의 유형
복합형	array(배열)	하나의 변수에 여러 값을 저장하는 유형
	object(객체)	함수와 속성이 함께 포함된 유형

 

- typeof 연산자 : 자료형을 확인하는 방법

- undefined와 null의 차이

   * undefined : 처음부터 변수에 값이 할당되지 않음

   * null : 처음에 할당된 값이 더는 유효하지 않음

- 배열(Array) : 하나의 변수에 여러 값을 저장할 수 있는 유형

   * 인덱스로 배열의 값을 불러옴. 0부터 시작.

- 객체(Object) : 여러 자료를 중괄호({ })로 묶을 수 있음

                     키(Key)와 값(Value)을 콜론(:)을 사용하여 저장

 

- 자바스크립트 자료형의 특징

  * 미리 변수의 자료형을 지정하지 않음 => 느슨한 자료형 체크(Weak Data Type Check)

 

 

 

03-3 연산자 이해하기

[ 실습 : 할인 가격 계산하기 ]

- 기초 산술 연산자

 

- 연산자와 피연산자 구별하기

   예제) currenYear - birthYear + 1

           피연산자 : currenYear, birthYear, 1은 연산 대상 

           연산자 : +, -

- 증감 연산자

  * 증가 연산자 : ++

     감소 연산자 : --

  * 뒤에 있을 때 : 전체 수식의 처리가 끝난 다음 적용

  * 앞에 있을 때 : 전체 수식을 처리하기 전에 적용

 

- 1단계 실행 결과 (입력 X)

 

 

 

 

- 2단계 실행 결과 (입력 O)

 

 

 

- 3단계 (연산자 응용하여 원래 가격, 할인율, 할인된 가격, 할인 가격 모두 출력하는 개선 버전)

 

 

 

03-4 연산자 깊게 알아보기

- 할당 연산자(Assignment Operator, =) 응용하기

   * 가장 많이 사용하는 연산자

   * 산술 연산자(+, -, *, /, %)와 조합해서 사용 가능

 

- 더하기 연산자와 연결 연산자 구별하기

   * 숫자에 사용할 땐 더하기 기능, 문자열에 사용할 땐 연결 기능

 

- ES6 버전부터 문자열 안에 값을 채우는 방법인 '템플릿 문자열'이 새로 도입

  문자열과 값 그리고 다시 문자열을 연결하는 방식이 아니라,

  문자열 안에 값을 끼워 넣는 방식.

const originPrice = 24500;
document.querySelector("#showPrice").innerHTML = `원래 가격은 ${originPrice} 원입니다.`;

실행 결과

 

 

 

- 문자형과 숫자형의 연산 이해하기

  * 더하거나 뺄 때

     : 자바스크립트에서는 숫자형과 문자형 자료를 더하거나 뺄 때 자동으로 결괏값의 자료형을 지정함

  * 곱하기와 나누기, 나머지를 구할 때

     : 문자형 자료를 모두 숫자로 자동 인식

   * 비교 연산자

연산자	설명
==	두 수(또는 변수)가 같은지 확인하는 연산자
!=	두 수(또는 변수)가 다른지 확인하는 연산자
<	왼쪽보다 오른쪽이 더 작은지
<=	왼쪽보다 오른쪽이 더 작거나 같은지 확인
>	왼쪽보다 오른쪽이 더 큰지
>=	왼쪽보다 오른쪽이 크거나 같은지
==	왼쪽과 오른쪽이 같은지 => 서로 다른 자료형이 있을 때 자료형을 변환하여 비교
===	왼쪽과 오른쪽이 같은지 => 두 자료형의 변환을 허용하지 않음

 

   * 논리 연산자

연산자	기호	설명
OR	||	왼쪽과 오른쪽 중 하나만 참이면 true => 하나라도 맞으면 true
AND	&&	왼쪽과 오른쪽 모두가 참이면 true
NOT	!	true나 false를 반대로 뒤집음

 

- 문자끼리 비교하기 - 아스키 값

 

- 서로 다른 연산자를 계산하는 순서

 

 

 

- 도전! 응용문제

   * 1번 문제

팝업창에 입력한 내용 출력하는 문제

 

 

 

 

 * 2번 문제

 

각각 가로, 세로 높이를 입력 후 팝업창으로 너비 알려주는 문제