[JavaScript] 1. 기본/역사/변수/주석/비교/조건문

[JavaScript] 1. 기본/역사/변수/주석/비교/조건문

2020. 3. 15. 15:42ㆍFrontend/JavaScript

해당 포스트는 생활코딩을 참고하여 작성되었습니다.

언어 소개

JavaScript

웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어

자바스크립트는 배우기 쉬운 언어다.
웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어
- 웹의 중요성 확대

역사

네스케이프에서 HTML의 정적 문제를 해결하기 위해 만듦
마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재
ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨짐

ECMAScript

표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안

현재는 ECMAScript 5(ES6)가 표준으로 정의됨

JavaScript 학습에 요구되는 선행학습

HTML
- 웹페이지를 만드는 언어로 자바스크립트가 제어하는 직접적인 대상이다.
CSS
- 웹페이지를 꾸며주는 언어로 자바스크립트와 함께 사용되어 HTML을 보다 사용자 친화적인 문서, 응용프로그램으로 만들어준다.

DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 가능

기타

JavaScript로 할 수 있는 일들
- 웹페이지 스크립팅(DOM), 서버 측 스크립팅(node.js), 브라우저 확장 기능 등
JavaScript에 영향을 준 언어
- Java : 기본적인 문법
- Scheme : 1급함수(first-class function) 함수의 인자와 반환값으로 함수를 사용
- Self : prototype 기반의 상속 개념

실행 방법과 실습 환경

자바스크립트는 브라우저에서 동작하는 언어다.

따라서 웹브라우저가 설치되어 있다면 이미 자바스크립트를 사용할 준비가 끝난 것

크롬의 개발자 도구를 활용한다.
- windows: F12
- Mac OS : Opt + Ctrl + i

숫자와 문자

자바스크립트에서 데이터 형을 알고 싶을 땐 typeof 사용

숫자

자바스크립트에서 작은따옴표('')나 큰따옴표("")가 붙지 않은 값을 자동으로 숫자(Number)로 인식함

종류
1. 정수
2. 실수
연산
- 정수의 끼리의 연산의 결과가 딱 떨어지는 경우 👉정수
- 이외 (정수와 실수의 연산 등...) 👉실수

문자

작은따옴표('')나 큰따옴표("")로 감싸진 값(String)

이스케이프(escape)

: \를 '나 " 앞에 위치시키면 문자열의 시작과 끝을 구분하는 구분자가 아니라 문자로 해석하도록 강제
줄바꿈(여러줄의 표시) : \n

변수

변수(Variable)는 (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용

변수의 선언

변수의 이름은 $, _ 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다.

javascript var, let, const 차이점

변수 비교

주석

// : 한 줄 주석
/* */ : 여러 줄 주석

줄바꿈과 여백

줄바꿈 : js에서는 줄바꿈이 명령의 종료로 간주함.
- 한 줄에 두 명령 정의 할 땐 세미콜론(;)으로 구분 필수
- 세미콜론을 붙이는게 좋은 습관
여백 : 스페이스 4번 tab 1번

비교

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호

'='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'

비교 연산자

비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것

비교 연산자의 결과는 true나 false 중의 하나

== 연산자 대신 === 연산자를 쓰는 것을 강력하게 권한다.

== : 동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.
=== : 일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false
- 데이터 형이 같은 경우에만 같다고 판단

값이 없다는 의미의 데이터 형

null : 값이 없음을 명시적으로 표시한 것
undefined : 그냥 값이 없는 상태
NaN : 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형. 숫자가 아니라는 뜻

부정과 부등호

!= : !는 부정을 의미한다. 즉, 같지 않다를 의미.
!== : 정확하게 같지 않다는 의미
> : 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자
>= : 좌항이 우항보다 크거나 같다.

조건문

주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것

Boolean

올 수 있는 값은 true와 false 두가지 밖에 없다. 불린은 조건문에서 핵심적인 역할을 담당한다.

Boolean의 대체제

관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다.

이외에 false로 간주되는 데이터 형
1. '' : 빈 문자열
2. undefined : undefined
3. 값이 할당되지 않은 변수 - 아래의 a
```
 var a;
```
4. null : null
5. NaN : NaN

문법

if : 조건문은 if로 시작. 괄호에 조건이 그 값은 Boolean이다. true일 경우에만 중괄호 구문이 실행된다.
else : 조건문이 false일 경우에 실행됨
else if : if나 else와는 다르게 여러개가 올 수 있다. 다른 조건을 제시한다.

실습

prompt()
: 사용자가 입력한 값을 가져옴

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.')
        if(id=='egoing'){
            alert('아이디가 일치 합니다.')
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
    </script>
</body>
</html>

논리 연산자

&& : 좌항과 우항이 모두 참(true)일 때 참. and 연산자
|| : 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자. or 연산자.
! : 부정의 의미로, Boolean의 값을 역전시킴. not 연산자

저작자표시 비영리 변경금지

lmjDev