JavaScript - 개념과 문법.

하쮸·2025년 5월 26일

JavaScript

목록 보기

1/4

1. 개념.

1-1. 자바스크립트.

HTML은 웹 문서의 내용을 구성.
CSS는 웹 문서의 레이아웃 or 색상 or 스타일 등을 지정.
JavaScript는 웹 문서의 각 요소를 가져와서 스타일을 변경하거나 움직이게 할 수 있음.

웹 브라우저에서 사용자가 입력한 정보(값)가 형식에 맞는지도 자바스크립트가 체크해줌.

웹 애플리케이션을 개발할 때 사용하는 리액트(React), 앵귤러(Angular), 뷰(Vue.js)같은 프레임워크가 있음.
그래픽 활용을 위한 D3.js, DOM을 쉽게 조작할 수 있게 해주는 제이쿼리(jQuery)같은 라이브러리도 있음.
자바스크립트로 백엔드 개발을 할 수 있는 Node.js라는 프레임워크도 있음.

1-2. 웹 브라우저와 자바스크립트.

웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScript interpreter)가 있음.
자바스크립트 소스는 웹 문서에서 <script>태그를 이용해서 작성할 수 있고
또는
자바스크립트 소스만 별도의 스크립트 파일로 작성한 다음 웹 문서와 연결해서 사용할 수도 있음.
- <script>태그는 웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행됨.
- <script>태그는 하나의 문서에서 여러 개 사용할 수도 있음.
자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많아서 되도록이면 이미자 or 텍스트 등을 다 표시한 후에 실행하는 것이 좋음.
- 그래서 일반적으로 </body>태그 직전에 자바스크립트 소스를 삽입함.
HTML, CSS와 달리 자바스크립트에서는 영어 대소 문자를 구별함.

HTML 문서 안에 자바스크립트 소스를 작성하면 웹 문서에서 바로 확인할 수 있는 장점이 있지만
단점이 더 많음.
- HTML과 JavaScript가 섞여 있어서 웹 문서가 복잡해보임.
- 소스코드를 유지보수할 때 필요한 코드를 찾아보기 불편하고 어려움.
- 여러 웹 문서에서 같은 자바스크립트 소스를 사용하는 경우에 똑같은 소스를 반복해서 삽입해야함.
따라서 자바스크립트 소스를 작성할 때 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용함.

1-3. 외부 스크립트 파일.

CSS와 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있음.
- 이렇게 할 경우 웹 문서 안에는 직접 자바스크립트 소스가 드러나지 않고 HTML과 CSS만 유지할 수 있어서 소스가 깔끔해짐.
외부 자바스크립트 파일은 <script>태그 없이 자바스크립트 소스만 작성하고
확장자는 *.js파일로 저장하면 됨.
- 그리고 HTML문서에서 <script>태그의 src속성을 이용해서 자바스크립트 파일을 연결하면 됨.

<script src="외부 스크립트 파일 경로"></script>

Ex

.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>
	<style>
		body { text-align:center; }
		#heading { color:blue; }
		#text { 
			color:gray;
			font-size:15px;
		}
	</style>	
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>

	<script src="js/change-color.js"></script>
</body>
</html>

.js

var heading = document.querySelector('#heading');

heading.onclick = function() {
	heading.style.color = "red";
}

// getComputedStyle : 적용한 모든 CSS 스타일 값을 반환하는 메서드.
var originalTextColor = getComputedStyle(text).color;

text.onclick = function() {
text.style.color = (text.style.color === "blue") ? originalTextColor : "blue";
}

1-4. 웹 브라우저가 스크립트를 해석하는 과정.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>

	<style>
		body { text-align:center; }
		#heading { color:blue; }
		#text { 
			color:gray;
			font-size:15px;
		}
	</style>	

</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>

	<script>
	  var heading = document.querySelector('#heading');

	  heading.onclick = function() {
	  heading.style.color = "red";
	  }

	  // getComputedStyle : 적용한 모든 CSS 스타일 값을 반환하는 메서드.
	  var originalTextColor = getComputedStyle(text).color;
	  
	  text.onclick = function() {
		text.style.color = (text.style.color === "blue") ? originalTextColor : "blue";
	  }
	</script>

</body>
</html>

1. 웹 브라우저는 <!DOCTYPE html>를 보고 해당 문서가 웹 문서라는 것을 알게됨.
- <html>...</html>태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작함.
- <html lang="ko"> : HTML 분석기.
2. 웹 문서에서 HTML 태그의 순서와 포함 관계를 확인 및 분석함.
3. <style>...</style>태그 사이에 있는 내용을 분석함.
- <style>...</style> : CSS 분석기.
4. <script>태그를 만나게 되면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘김.
- 자바스크립트 해석기가 <script>...</script>사이의 소스를 해석함.
5. 2에서 분석한 HTML과 3에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시함.
6. 분석해 놓은 자바스크립트를 실행해서 그 결과를 화면에 표시함.

1-5. 식과 문.

자바스크립트 언어의 큰 줄기는 식(expression)과 문(statement)임.
- 식은 표현식이라고도 하는데 연산식 뿐만 아니라 실제 값도 함수를 실행하는 것도 식이됨.
- 즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고 식은 변수에 저장됨.

num * 3.14		// 연산식도 식.
"감사합니다";	// 문자열도 식.
1				// 숫자도 식.

문은 명령이라고 생각할 수 있음.
- 문의 끝에는 세미콜론(;)을 붙여서 구분함.
넓은 의미에서 문은 값이나 식까지 포함함.

1-6. 간단한 입출력.

1-6-1. 알림창.

알림창(alert)은 가장 많이 사용하는 간단한 대화 상자임.
- 웹 브라우저에서 작은 알림창을 열어 메시지를 표시할 수 있음.
웹 브라우저에서 간단한 알림 내용을 표시하거나 사용자에게 어떤 값을 입력 하게 하는 창을 대화 상자(dialogue box)라고 함.

alert(메시지);

괄호 안에 따옴표("" or '')와 함께 메시지를 넣으면 됨

1-6-2. 확인 창.

확인 창(confirm)은 사용자가 확인 or 취소 버튼 중에서 하나를 직업 클릭할 수 있음.
- 확인 : true
  취소 : false

confirm(메시지);

1-6-3. 프롬프트 창.

프롬프트 창(prompt)은 텍스트 필드가 있는 작은 창임.
- 텍스트 필드 안에 간단한 메시지를 입력할 수 있고 그 내용을 가져와서 프로그램에서 사용할 수도 있음.

prompt(메시지);
prompt(메시지, 기본값);

var num = prompt("숫자 입력.");

기본값을 지정하면 텍스트 필드 안에 기본값이 표시됨.
- 기본값을 지정하지 않으면 빈 텍스트 필드로 표시됨.
프롬프트 창에서 취소버튼을 누르면 변수에는 null이 저장됨.

기본값 X	기본값 O

prompt()와 parseInt()
- prompt()를 사용해서 입력받은 값은 기본적으로 문자열로 저장됨.
  문자열값이라도 산술 연산에 사용할 경우 자동적으로 숫자형으로 변환되지만, 데이터 유형이 자동으로 변환되기 때문에 예상치 못한 곳에서 다르게 변환될 수도 있음.
따라서 prompt()로 입력받은 값을 처음부터 숫자로 바꿔주는 것이 안전함.
- parseInt()함수는 괄호 안의 값을 정수로 변환시켜줌.

1-6-4. 웹 브라우저 화면에 출력.

자바스크립트의 실행 결과는 텍스트나 이미지로 출력하거나 따로 지정한 영역에 내용을 표시하는 경우가 많음.
But 단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 document.write()를 많이 사용함.
- 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문.

document.write(메시지);

괄호 안에서 따옴표("" or '')사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨.
- 따옴표 안에 HTML 태그도 함께 사용할 수 있음.

<script>
	document.write("<h1>웹 브라우저에 출력</h1>");
</script>

1-6-5. 콘솔 창에 출력.

console.log();

console.log()문은 괄호 안의 내용을 콘솔 창에 표시함.
- 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있음.
  - 따옴표 안에 HTML 태그는 사용할 수 없음.

2. 문법

2-1. 변수.

변수(variable)란?
- 프로그램을 실행하는 동안 값이 여러 번 바뀔 수 있는 데이터.
값을 한번 지정하면 바뀌지 않는 데이터를 상수(constant).

2-1-1. JS 변수 규칙.

변수 이름은 영어, 언더스코어(_), 숫자를 사용.
영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없음.
낙타 표기법(camel case) 사용.

2-2. 변수 선언.

예약어 var뒤에 변수명을 적으면 됨.
- ES6이후에는 변수 선언할 때 let, const 사용할 수 있음.

var 변수명;
var 변수명1, 변수명2, 변수명3, ...;

변수 선언 후 =기호를 사용해서 변수에 값을 저장(할당)할 수 있음.

2-3. 자료형.

자료형(data type)이란?
- 프로그램에서 처리할 자료(data)의 형태.
- 컴퓨터가 처리할 수 있는 자료의 형태.

기본 유형.

종류	설명	예시
숫자형	따옴표 없이 숫자로만 표기.	var num = 3;
문자열	따옴표(" " or ' ')로 묶어서 나타냄.	var str1 = "abc"; var str2 = "123";
논리형	참(true)과 거짓(false)이라는 2가지 값만 있는 유형.	var bool = true;

복합 유형

종류	설명	예시
배열	하나의 변수에 여러 개의 값을 저장함.	var seasons = `['봄', '여름', '가을', '겨울']`;
객체	함수와 속성을 함께 포함함.	var date = new Date();

특수 유형

종류	설명
undefined	자료형이 지정되지 않았을 때의 상태. (Ex. 변수 선언만 하고 값을 할당하지 않은 변수는 `undefined` 상태임.
null	값이 유효하지 않을 때의 상태.

2-3-1. 숫자형.

자바스크립트에서 숫자형(number)은 정수와 실수로 나누어 구분함.
- 정수 : 소수점 없음.
- 실수 : 소수점 있음.
자바스크립트에서는 정밀하게 숫자를 계산하는 프로그램을 만들때 주의해야함.

2-3-2. 문자열.

문자열(string)은 작은따옴표('')나 큰따옴표("")로 묶은 데이터를 의미함.
- 만약 큰따옴표로 묶은 문자열 안에 또 다른 문자열을 넣고 싶다면?
  - 큰따옴표가 중복되지 않도록 속성값은 작은따옴표로 묶어서 표현하면됨.
  - ```
  document.write("<span style='color:blue'>", "abc", "</span>")
```

2-3-3. 논리형.

논리형은 불린(boolean)유형.
- 참(true) 또는 거짓(false)의 값을 표현함.

2-3-4. undefined, null.

undefined는 자료형이 정의되지 않았을 때의데이터 상태를 나타냄.
- 자바스크립트에서는 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정함.
- 즉, 변수 선언만 하고 값이 할당되지 않은 자료형을 undefined라고 함.
null은 데이터의 값이 유효하지 않은 상태를 나타냄.
따라서 undefined는 변수를 선언한 상태에서 값이 할당되지 않은 유형.
null은 변수에 할당된 값이 유효하지 않다는 의미.

2-3-5. 배열.

배열(array)은 하나의 변수에 값을 여러 개 저장할 수 있음.
- 여러 개의 데이터 값을 하나의 배열 이름으로 묶어서 선언함.
아래와 같이 데이터 값을 ,로 구분해서 [] 대괄호로 묶으면 배열을 선언할 수 있음.

배열명["값1", "값2", "값3", ...]
var season = ["봄", "여름", "가을", "겨울"];    
    
배열명[]	// 빈 배열.

값을 입력하지 않으면 빈 배열이 만들어짐.
- 빈 배열도 배열을 선언한 것.

자바스크립트의 장점이면서 단점인 부분이 데이터 유형이 유연하다는 것.
- 즉, 변수의 데이터 유형이 중간에 바뀔 수 있음.
- Ex) 프롬프트 창으로 사용자로부터 데이터를 입력받으면 문자열로 받아짐.
  그 후 사칙연산에 사용할 경우 자동으로 숫자형으로 변환되어 계산됨.

2-4. 연산자.

연산자(operator)란?
- 프로그램에서 특정한 동작을 하도록 지시하는 기호.

2-4-1. 산술 연산자.

수학 계산을 할때 사용하는 연산자.
++(증가), --(감소) 연산자.
- 연산자가 피연산자 뒤에 있을 때는 연산식의 처리가 끝난 다음에 적용.
- 반대로 피연산자 앞에 있을 때는 연산식을 처리하기 전에 적용.

var a = 10;
var b = a++ + 5;
// a = 11, b = 15

var c = 10;
var d = ++c + 5;
// c = 11, d = 16

2-4-2. 할당 연산자.

할당 연산자(assignment operator) = 대입연산자.
- 연산자(or 연산식) 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자.

2-4-3. 연결 연산자.

연결 연산자(= 문자열 연산자)는 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자.
- + 기호를 사용.

2-4-4. 비교 연산자.

비교 연산자(comparison operators)
- 피연산자 2개의 값을 비교해서 참이나 거짓으로 결괏값을 반환함.

헷갈리기 쉬운 거

종류	의미	예시	결괏값
==	- 피연산자가 서로 같으면 true.	3 == "3"	true
===	- 피연산자도 같고 자료형도 같으면 true.	a === "3"	false
!=	- 피연산자가 서로 같지 않으면 true.	3 != "3"	false
!==	- 피연산자가 같지 않거나 자료형이 같지 않으면 true.	3 !== "3"	true

==, !=연산자는 피연산자의 자료형을 자동으로 변환해서 비교함.
- ```
3 == "3"	// true
 3 != "3"	// false
```
- 숫자 3과 문자열 "3"을 비교하면 좌측 숫자3을 문자열로 변환해서 비교함.
===, !==연산자는 피연산자의 자료형을 변환하지 않음.
- ```
3 === "3"		// false
 3 !== "3"	// true
```
- 숫자 3과 문자열 "3"의 값과 자료형을 모두 비교함.
값을 비교할 때는 자료형을 자동 변환하지 않기 위해 ===, !==연산자를 더 많이 사용함.

문자열의 비교.
- 피연산자가 문자열이라면 문자열에 있는 문자들의 아스키(ASCII)값을 비교해서 결정함.
- 맨 앞의 문자부터 하나씩 비교함.
아스키 코드.
- (큰) 소문자 > 대문자 > 숫자 (작은)

2-4-5. 논리 연산자.

논리 연산자.
- 불리언(boolean)연산자.
- true, false를 처리하는 연산자.

OR : ||
AND : &&
NOT : !

2-5. 조건문.

2-5-1. if, if-else 문.

if (조건) {
  // 조건 결과가 true일 때 실행할 명령.
}

if (조건) {
  // 조건 결과가 true일 때 실행할 명령.
} else {
  // 조건 결과가 false일 때 실행할 명령.
}

2-5-2. 삼항 연산자.

(조건) ? (true일 때 실행할 명령) : (false일 때 실행할 명령);

2-5-3. switch문.

switch (조건) {
  case 값1 : 명령1
    break;
  case 값2 : 명령2
    break;
  case 값3 : 명령3
    break;
    ....
  default: 명령n;	// default는 break; 가 필요없음.
}

2-6. 반복문

2-6-1. for.

for (초깃값; 조건; 증가식) {
  // 실행할 명령.
}

2-6-2. while.

while (조건) {
  // 실행할 명령.
}

조건부터 체크한 후 명령을 실행할지 or 말지 결정.

2-6-3. do-while.

do {
  // 실행할 명령.
} while (조건)

먼저 명령을 실행한 후 조건을 체크함.

2-6-4. break.

종료 조건이 되기 전에 강제로 반복문을 빠져나오는 용도로 사용함.

2-6-5. continue.

주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뛰고 다시 반복문으로 돌아가서 다음 값을 수행함.

하쮸

Every cloud has a silver lining.

다음 포스트

JavaScript - 개념과 문법.

JavaScript

1. 개념.

1-1. 자바스크립트.

1-2. 웹 브라우저와 자바스크립트.

1-3. 외부 스크립트 파일.

1-4. 웹 브라우저가 스크립트를 해석하는 과정.

1-5. 식과 문.

1-6. 간단한 입출력.

1-6-1. 알림창.

1-6-2. 확인 창.

1-6-3. 프롬프트 창.

1-6-4. 웹 브라우저 화면에 출력.

1-6-5. 콘솔 창에 출력.

2. 문법

2-1. 변수.

2-1-1. JS 변수 규칙.

2-2. 변수 선언.

2-3. 자료형.

2-3-1. 숫자형.

2-3-2. 문자열.

2-3-3. 논리형.

2-3-4. undefined, null.

2-3-5. 배열.

2-4. 연산자.

2-4-1. 산술 연산자.

2-4-2. 할당 연산자.

2-4-3. 연결 연산자.

2-4-4. 비교 연산자.

2-4-5. 논리 연산자.

2-5. 조건문.

2-5-1. if, if-else 문.

2-5-2. 삼항 연산자.

2-5-3. switch문.

2-6. 반복문

2-6-1. for.

2-6-2. while.

2-6-3. do-while.

2-6-4. break.

2-6-5. continue.

JavaScript - 함수와 이벤트

0개의 댓글