자바스크립트 기초
1. 자바스크립트 개요 및 특징
자바스크립트(JavaScript)는 웹 페이지에서 사용자와 상호작용하는 동적 웹 페이지를 구현하는 데 필수적인 언어입니다.
가장 많이 사용되는 웹 표준 프로그래밍 언어이며, 모든 브라우저가 지원하고 HTML5의 공식적인 스크립트 언어입니다.
자바와의 차이점
| 구분 | 자바(Java) | 자바스크립트(JavaScript) |
|---|---|---|
| 실행 방식 | 컴파일 언어 (JVM 위에서 실행) | 인터프리트 언어 (브라우저에서 직접 해석 및 실행) |
| 변수 선언 | 변수의 타입을 반드시 선언 | 변수의 타입 선언 없이 사용 가능 |
| 언어적 특성 | 클래스 기반 객체지향 | 프로토타입 기반 객체지향, 함수형 프로그래밍 지원 |
| 용도 | 서버, 데스크톱, 모바일 등 다양한 환경 | 주로 웹 클라이언트, 최근에는 서버(Node.js)까지 확장 |
- 자바스크립트는 자바와 구문이 유사하지만, 완전히 다른 언어입니다.
역사
- 1995년 넷스케이프의 브렌든 아이크(Brendan Eich) 가 개발
- 최초 이름: 라이브스크립트(LiveScript)
- 1997년 ECMA(European Computer Manufacturer’s Association) 에서 ECMAScript라는 이름으로 표준 제정
주요 특징
- 인터프리트 언어: 컴파일 과정 없이 바로 실행
- 동적 타이핑(Dynamic Typing): 변수의 자료형 선언 없이 사용 가능
- 구조적 프로그래밍 지원:
if-else,while,for등 제어 구조 지원 - 객체 기반: 객체는 연관 배열(associative array)과 유사
- 함수형 프로그래밍 지원: 함수도 객체이며, 속성과 메서드를 가질 수 있음
- 프로토타입 기반: 클래스 대신 프로토타입을 통한 상속 구조
주요 용도
- 이벤트에 반응하는 동작 구현
- Ajax를 이용한 서버와의 비동기 통신
- HTML 요소의 크기, 색상 등 동적 변경
- 게임, 애니메이션 등 상호작용 콘텐츠 구현
- 사용자 입력값 검증
미래와 확장성
- 원래는 클라이언트 웹 페이지용 언어였으나,
Node.js를 통해 서버 프로그래밍 언어로도 확장 - jQuery 등 다양한 라이브러리와 함께 사용
- JSON(JavaScript Object Notation): 데이터 전송 및 저장 형식으로 널리 활용
2. 자바스크립트 코드 작성 위치
자바스크립트 코드 작성 위치
자바스크립트 코드는 HTML 문서 내에서 다양한 방식으로 삽입할 수 있습니다. 각 방식은 목적과 사용 환경에 따라 선택할 수 있습니다.
내부 자바스크립트
HTML 문서의 <head> 또는 <body> 섹션 내에 <script> 태그를 사용하여 코드를 직접 작성합니다.
HTML5에서는 type 속성 지정이 필요하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.write("컴퓨터공학과!");
</script>
</head>
<body>
<br />
컴퓨터공학과입니다.
</body>
</html>
외부 자바스크립트
자바스크립트 코드를 별도의 .js 파일로 분리하여 관리할 수 있습니다.
여러 웹 페이지에서 공통으로 사용하는 코드를 작성할 때 유용합니다.
<script src="myscript.js"></script>
인라인 자바스크립트
HTML 태그의 이벤트 속성(예: onclick)에 직접 자바스크립트 코드를 작성합니다.
<button type="button" onclick="alert('컴퓨터공학과')">학과 구성</button>
참고:
- 내부/외부 자바스크립트는 주로 기능 구현에 사용하며,
- 인라인 자바스크립트는 간단한 이벤트 처리에 적합합니다.
3. 문장과 자료형
자바스크립트의 기본 문법 요소와 데이터를 다루는 방법을 알아봅니다.
문장(Statement)
- 문장: 웹 브라우저에게 내리는 명령입니다.
- 세미콜론(
;): 문장 끝에 사용하며, 줄 바꿈 시 생략할 수 있습니다.
let x = 10;
let y = 20;
console.log(x + y);
블록(Block)
- 블록:
{}로 묶인 문장들의 집합입니다. - 조건문, 반복문, 함수 등에서 여러 문장을 함께 실행할 때 사용합니다.
if (x > y) {
console.log("x가 y보다 큽니다.");
}
문자 집합 및 주석
- 문자 집합: 유니코드를 지원하며, 대소문자를 구별합니다.
- 공백 문자: 대부분 무시되지만, 붙여 써야 하는 부분에 공백이 있으면 오류가 발생할 수 있습니다.
- 주석
- 한 줄 주석:
// - 여러 줄 주석:
/* ... */
- 한 줄 주석:
// 한 줄 주석
/*
여러 줄 주석
*/
변수(Variable)
- 변수: 데이터를 저장하는 공간입니다.
var,let,const키워드로 선언합니다. (ES6 이후에는let,const사용 권장)- 자료형을 지정하지 않으며, 값이 할당되는 순간 자료형이 결정됩니다.
- 변수 이름은 문자,
$,_로 시작할 수 있고, 대소문자를 구별합니다. - camelCase 표기법을 권장합니다.
let userName = "Alice";
var $score = 100;
const MAX_VALUE = 999;
자료형(Data Type)
- 동적 타이핑: 변수에 저장되는 값에 따라 자료형이 결정됩니다.
typeof연산자로 자료형을 확인할 수 있습니다.
주요 자료형
| 자료형 | 설명 | 예시 |
|---|---|---|
| number | 정수, 실수, 지수 표현 등 모든 숫자 | 123, 123.45, 1.2e3 |
| boolean | 참/거짓 값 | true, false |
| string | 문자들의 집합, 유니코드 지원 | "hello", 'world' |
| object | 속성과 동작(메서드)을 묶은 자료형 | {name: "Tom", age: 20} |
| undefined | 선언만 되고 값이 할당되지 않은 변수의 자료형 | let a; // typeof a === undefined |
문자열(String)
- 속성/메서드:
.length,.charAt(),.replace(),.toUpperCase()등 - 결합:
+연산자 사용
let str = "Hello";
let msg = str + " World!"; // "Hello World!"
console.log(msg.length); // 12
객체(Object)
- 도트(
.) 표기법으로 속성 및 메서드에 접근
let person = { name: "Kim", age: 25 };
console.log(person.name); // "Kim"
undefined
- 변수가 선언되었지만 값이 할당되지 않은 상태를 의미합니다.
let temp;
console.log(temp); // undefined
4. 연산자
자바스크립트에서 값을 조작하거나 비교할 때 사용하는 다양한 연산자에 대해 알아봅니다.
산술 연산자
숫자 값을 계산할 때 사용합니다.
| 연산자 | 설명 | 예시 | 결과 |
|---|---|---|---|
+ | 덧셈 | 5 + 2 | 7 |
- | 뺄셈 | 5 - 2 | 3 |
* | 곱셈 | 5 * 2 | 10 |
/ | 나눗셈 | 5 / 2 | 2.5 |
% | 나머지 | 5 % 2 | 1 |
++ | 1 증가 | x++ | x = x+1 |
-- | 1 감소 | x-- | x = x-1 |
대입 연산자
변수에 값을 할당하거나 연산 결과를 저장할 때 사용합니다.
| 연산자 | 설명 | 예시 | 결과 |
|---|---|---|---|
= | 대입 | x = 10 | x에 10 저장 |
+= | 더해서 대입 | x += 2 | x = x + 2 |
-= | 빼서 대입 | x -= 2 | x = x - 2 |
*= | 곱해서 대입 | x *= 2 | x = x * 2 |
/= | 나눠서 대입 | x /= 2 | x = x / 2 |
%= | 나머지로 대입 | x %= 2 | x = x % 2 |
문자열 결합 연산자
+ 연산자를 사용하여 문자열을 연결할 수 있습니다.
let greeting = "Hello, " + "world!"; // "Hello, world!"
비교 연산자
값을 비교하여 참(true) 또는 거짓(false)을 반환합니다.
| 연산자 | 설명 | 예시 | 결과 |
|---|---|---|---|
== | 값이 같으면 참 | 5 == '5' | true |
!= | 값이 다르면 참 | 5 != 3 | true |
> | 왼쪽이 크면 참 | 5 > 3 | true |
< | 왼쪽이 작으면 참 | 5 < 3 | false |
>= | 왼쪽이 크거나 같으면 참 | 5 >= 5 | true |
<= | 왼쪽이 작거나 같으면 참 | 5 <= 3 | false |
=== | 값과 타입이 모두 같으면 참 | 5 === '5' | false |
!== | 값이나 타입이 다르면 참 | 5 !== '5' | true |
논리 연산자
여러 조건을 조합하여 참/거짓을 판단합니다.
| 연산자 | 설명 | 예시 | 결과 |
|---|---|---|---|
&& | AND(그리고) | true && false | false |
|| | OR(또는) | true || false | true |
! | NOT(부정) | !true | false |
조건(삼항) 연산자
조건에 따라 값을 선택합니다.
let max = x > y ? x : y;
x > y가 참이면max는x, 거짓이면y가 저장됩니다.
연산자의 우선순위
연산자마다 실행 순서가 다르며, 괄호 ()를 사용해 우선순위를 명확히 할 수 있습니다.
let result = (3 + 5) * 2; // 16
숫자와 문자열 간 변환
parseInt(): 문자열을 정수로 변환let num = parseInt("123"); // 123String(): 숫자를 문자열로 변환let str = String(123); // "123"
사용자 입력 받기
prompt()함수로 사용자의 입력을 받을 수 있습니다.
let name = prompt("이름을 입력하세요:");
HTML 요소 접근
document.getElementById(id)메서드로 HTML 요소에 접근하고 속성을 변경할 수 있습니다.
document.getElementById("demo").innerHTML = "변경된 내용";
5. 제어문, 배열, 함수
자바스크립트의 흐름 제어, 데이터 관리, 코드 재사용의 핵심 개념입니다.
제어문
-
조건문
if,if-else,else if: 조건에 따라 코드 실행 분기switch: 여러 경우의 분기 처리에 유용
-
반복문
while: 조건이 참인 동안 반복do-while: 최소 1회 실행 후 조건 검사for: 정해진 횟수 반복for-in: 객체의 속성 반복
-
제어문 보조
break: 반복문/조건문 즉시 종료continue: 다음 반복으로 건너뜀
배열
- 정의: 여러 데이터를 하나의 변수에 저장하는 자료구조
- 생성
- 리터럴:
let fruits = ["apple", "banana", "peach"]; - 생성자:
let fruits = new Array("apple", "banana");
- 리터럴:
- 특징
- 다양한 자료형 혼합 저장 가능
length속성으로 크기 확인- 연관 배열(객체처럼 키-값 저장):
let names = [];
names["a"] = "홍길동";
함수
- 정의: 입력을 받아 작업 후 결과를 반환하는 코드 블록
function add(a, b) {
return a + b;
} - 무명 함수(익명 함수)
let greeting = function () {
alert("안녕하세요?");
}; - 반환값:
return문으로 결과 반환 - 변수의 범위
- 지역 변수: 함수 내부에서만 사용, 함수 종료 시 소멸
- 전역 변수: 함수 외부에서 선언, 전체 스크립트에서 사용