자바스크립트 기초 (2)

Coosla·2020년 12월 22일

JavaScript 자바스크립트 기초

자바스크립트 및 제이쿼리 기초

목록 보기

2/9

1. 자바스크립트 기초 문법

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

예시코드

<html>
	<head>
		<script>
			head에서도 가능
		</script>
	</head>
  	<body>
		<script>
			body에서도 가능
		</script>
	</body>
</html>

1-2 주석처리
선언문 안에서 설명글을 적거나 코드를 생략할 때 주석처리를 하면 됩니다.

예시코드

<html>
	<head>
	</head>
  	<body>
		<!-- html소스 주석처리 -->
		<script>
			// 한줄 주석처리
			/*
			   여러줄 주석처리
			   여러줄 주석처리
			*/
		</script>
	</body>
</html>

1-3 내부 스크립트를 외부로 분리하기
1-1의 예제를 이용하여 내부에 정의된 스크립트를 외부로 분리하여 사용하는 법

내부분리.js 파일
document.write("환영합니다.");

스크립트 외부로 분리.html 파일

...
<head>
    <title>Document</title>
    <script src="JS/내부분리.js"></script>
</head>
...

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

1-4 코드 입력 시 주의 사항

자바스크립트는 대,소문자를 구분하여 작성
코드를 한줄에 혀러 코드를 작성할때는 세미콜론(;)을 쓰는 것이 좋습니다.
가독성을 높이기 위해 한 줄에 한 문장씩 작성하는 것이 좋습니다.
문자형 데이터를 쓸 때 큰따옴표("")와 작은따옴표('')의 겹침 오류를 주의해야 합니다.
코드를 작성할때 괄호의 짝이 맞아야 합니다.

2. 변수

2-1 변수

변수란?

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

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

2-2 변수 선언

기본형

var 변수명; 또는 var 변수명=값;

변수를 선언할 때 한글을 사용할 수 없고, 영문과 숫자, 일부 특수 문자(_ , $)만 사용가능 합니다. 그리고 변수를 선언할 때 여러 표기법이 있습니다. 이부분은 나중에 포스팅할 예정입니다.

2-3 변수에 저장할 수 있는 자료형

문자형
문자형 데이터는 데이터가 큰따옴표또는 작은따옴표로 감싸져 있습니다.
그리고 HTML 태그를 포함되어있는 문자형 데이터를 출력하면 태그로 인식됩니다.
기본형
```
var 변수명 = "문자/숫자"
```
예시
```
 var s = "javascript"
  var num = "100"
  var tag = "<h1>String</h1>"
```
숫자형
숫자를 의미하고 큰따옴표가 숫자를 감싸고 있다면 Number("숫자")를 이용하여 문자형 데이터를 숫자형 제이터로 바꿔야됩니다.
기본형
```
var 변수 = 숫자/Number("문자형 숫자");
```
예시
```
var s = 100;
 var t = Number("500");
```

논리형
true(참) 또는 false(거짓), 주로 2개의 데이터를 비교할 때 나오는 결과입니다.

기본형

var 변수 = true/false; 또는 Boolean(데이터);

예시

var s = true;
var t = 10>=100;  // 결과 : false
var k = Boolean("hello"); // 결과 : true

null 과 undefined 데이터

undefined
변수를 선언하고 값이 저장되기 전의 기본값

null
변수에 저장된 데이터를 비우고자 할 때 사용하는 값
typeof
지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용
기본형
```
typeof 변수 또는 데이터;
```

2-4 변수 선언 시 주의 사항

변수명 첫 글자로는 $ , _ , 영문자만 사용가능합니다.
변수명 두번째 글자는 영문자, 숫자, $, _만 사용가능합니다.
변수명으로 예약어를 사용할 수 없습니다.
변수명을 지을ㄹ 때는 되도록 의미를 부여해 작성하는 것이 좋습니다.
변수명을 사용할 때는 대, 소문자를 구분해야 합니다.

3. 연산자

3-1 연산자 종류

산술 연산자
더하기, 빼기, 곱하기, 나누기, 나머지 연산이 존재하고, 연산 대상 데이터가 반드시 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는 다르다.	숫자형 데이터형과 문자형 데이터형 상관없이 표기된 숫자만 다르면 false 반환
A === B	A와 B는 같다.	숫자를 비교할 경우 데이터형도 일치하지 않을 때 true반환
A !== B	A와 B는 다르다.	숫자를 비교할 경우 데이터형이 일치하지 않을 때 true반환

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

종류 설명
or( || ) 하나라도 true가 존재하면 true 반환
and( && ) 하나라도 false가 존재하면 false 반환
not( ! ) 피연산자의 값의 반대값을 반환
삼항 조건 연산자
조건식의 결과에 따라 실행 결과가 달라지는 연산자, 피연산자가 3개 필요하다.

형태

조건식 ? 참일때 출력값 : 거짓일때 출력값

종류	설명
or( \|\| )	하나라도 true가 존재하면 true 반환
and( && )	하나라도 false가 존재하면 false 반환
not( ! )	피연산자의 값의 반대값을 반환