[JS] 기초 문법

전상욱·2021년 5월 15일

JavaScript

목록 보기

2/17

기초 문법

script 태그는 자바스크립트 코드를 작성할 영역을 선언하는 것
head 태그 영역과 body태그 영역에 선언하여 사용 가능.

주석처리

선언문 안에 설명글을 적거나 코드를 생략할 때 주석처리를 하면됨.

예시

<html>
  <head>
    <script> 스크립트 코드 </script>
  </head>
  <body>
    <script>
      스크립트 코드
      // 한줄 주석
      /*
        여러줄 주석
        여러줄 주석
      */
    </script>
  </body>
</html>

내부 스크립트를 외부 스크립트로 분리

script.js

document.write('Hello World!!');

index.html

... 
<head>
  <title>Document</title>
  <script src="script.js"></script>
</head>
...

script태그의 src속성을 이용하여 JS파일의 상대경로를 통해 JS파일과 연동하여 사용
내부에 정의된 script태그를 외부로 분리하는 이유는 자바스크립트 소스를 찾기 쉽고, 손상시킬 염려도 줄일 수 있음.
프로젝트 관리를 원활하게 할 수 있음.

코드 입력 시 주의 사항

자바스크립트는 대,소문자를 구분하여 작성

코드를 한줄에 여러 코드를 작성할 때에는 세미콜론( ; )을 사용하는 것이 좋음

가독성을 높이기 위해 한 줄에 한 문장씩 작성하는 것이 좋음

문자형 데이터를 쓸 때에 큰따옴표( " )와 작은따옴표( ' )의 겹침을 주의

코드를 작성할 때에 괄호의 짝을 맞춰야함

변수

변하는 데이터(값)을 저장할 수 있는 메모리 공간

변수에는 오직 한 개만 저장이 가능합니다. 따라서 10이라는 데이터가 저장되어 있는 a라는 변수에 20이라는 데이터를 저장하려고 할 때 기존에 저장되어 있던 데이터는 지워지고 새로운 데이터가 저장됨.

변수선언

기본형

var 변수명;
var 변수명 = 값;

변수를 선언할 때 한글을 사용할 수 없고, 영문과 숫자, 일부 특수문자( _ , $ )만 사용가능.

변수에 저장할 수 있는 자료형

문자형
문자형 데이터는 데이터가 큰따옴표 또는 작은따옴표로 감싸져 있음
그리고 HTML태그를 포함되어 있는 문자형 데이터를 출력하면 태그로 인식

기본형

var 변수명 = '문자/숫자';

예시

var str = 'javascript';
var num = '1000';
var tag = '<h1>제목</h1>';

숫자형
숫자를 의미하고 큰따옴표가 숫자를 감싸고 있다면 Number(숫자)를 이용하여 문자형 데이터를 숫자형 데이터로 바꿔야함.

기본형

var 변수명 = 숫자 / Number('문자형 숫자');

예시

var num1 = 100;
var num2 = 12345;
var str = Number('500');

null과 undefined 데이터

null : 변수에 저장된 데이터를 비우고자 할 때 사용하는 값
undefined : 변수를 선언하고 값이 저장되기 전의 기본 값
typeof
지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용

기본형

typeof 변수 또는 데이터

변수 선언 시 주의 사항

변수명 첫 글자로는 $ , _ , 영문자만 사용가능
변수명 두번째 글자부터는 영문자, 숫자, $ , _ 만 사용가능
변수명으로 예약어를 사용할 수 없음
변수명 작명할 때에는 되도록 의미를 부여해 작성
변수명을 사용할 때에는 대/소문자를 구분

연산자

연산자의 종류

산술 연산자
- 더하기, 빼기, 곱하기, 나누기, 나머지 연산이 존재
- 연산 대상 데이터가 반드시 2개가 있어야함
문자 결함 연산자
- 피연산자가 문자형 데이터일 때 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용
- 피연산자 중 문자형 데이터가 포함되어 있으면 다른 데이터형들을 문자형 데이터로 변환하고 문자 결합을 하여 하나의 문자형 데이터로 반환

기본형

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
문자형 데이터 + 문자형 이외 형태의 데이터 = 하나의 문자형 데이터

예시
'do it' + ' javaScript' = 'do it javaScript';
'100' + 200 = '100200';

대입 연산자
- 연산된 데이터를 변수에 저장할 때 사용
- 복합 대입 연산자는 산술 연산자와 대입 연산자가 복합적으로 적용
- HTML에서 문자형 데이터를 복합 대입 연산자를 이용하여 하나의 문자로 결합하여 사용가능
증감 연산자
숫자형 데이터를 1씩 증가/감소 시키는 증가/감소 연산자가 존재

기본형

변수의 값을 1만큼 감소 : 변수--; 또는 --변수;
변수의 값을 1만큼 증가 : 변수++; 또는 ++ 변수;

변수++ 과 ++변수의 차이

var A = ++B;
먼저 B의 값을 증가 시키고 증가된 B의 값을 A에 대입
var A = B++;
먼저 B의 값을 A에 대입하고 B의 값을 증가

비교 연산자

* 두 데이터를 비교할 때 사용하는 연산자
* 연산된 결과값은 `true` 또는 `false`로 논리형 데이터를 반환

종류	설명	비고
A > B	A가 B보다 크다.	-
A < B	A가 B보다 작다.	-
A >= B	A가 B보다 크거나 같다.	-
A <= B	A가 B보다 작거나 같다.	-
A == B	A와 B는 같다.	데이터형과 상관없이 표기된 데이터만 일치하면 `true`를 반환
A != B	A와 B는 다르다.	데이터형과 상관없이 표기된 데이터만 일치하지 않으면 `true`를 반환
A === B	A와 B는 같다.	데이터와 데이터형 모두가 같아야 `true`를 반환
A !== B	A와 B는 다르다.	데이터와 데이터형 중 하나 또는 모두가 달라야 `true`를 반환

논리 연산자
피연산자가 논리형 데이터인 true 또는 false로 결과값을 반환

종류	설명
OR ( \|\| )	둘중 하나라도 `true`일때 `true` 반환
AND ( && )	둘 모두 `true`일때 `true` 반환
NOT ( ! )	피연산자의 값의 반대값을 반환

삼항 조건 연산자
조건식의 결과에 따라 실행 결과가 달라지는 연산자, 피연산자가 3개 필요

형태

조건식 ? true일때 출력값 : false일때 출력값

연산자의 우선순위

우선순위

()

단항 연산자 ( -- , ++ , ! )

산술 연산자 ( + , - , * , / , % )

비교 연산자 ( < , > , <= , >= , == , != , === , !== )

논리 연산자 ( && , || )

(복합)대입 연산자 ( = , += , -= , *= , /= , %= )

전상욱

더 높은 곳으로

이전 포스트

[JS] 입문

다음 포스트