JavaScript 기본
JavaScript는 브라우저에서 동작하는 스크립트 언어(줄여서 JS)입니다. 웹 페이지와 사용자 간의 상호작용을 가능하게 합니다.
1. 사용 방법
<input type="button" onclick="alert('ok!')">
<script type="text/javascript">
alert("ok!")
</script>
<script type="text/javascript" src="js/index.js"></script>
2. 변수
변수 선언 및 호출:
// 한 줄 주석
/* 여러 줄 주석 */
var num = 1;
var count = 0;
var a = 1, b = 2, c = 3;
기본 자료형:
| 자료형 | 설명 |
|---|---|
| number | 숫자형 |
| string | 문자열형 |
| boolean | 불리언형 |
| undefined | 정의되지 않음; 변수 초기화 전 값 |
| null | object, 빈 객체 의미 |
var a = 1;
var b = "bb";
var c = True;
var d;
var e = null;
복합 자료형:
| 자료형 | 설명 |
|---|---|
| object | JavaScript 객체 |
var a = {name:"홍길동", age:18}
// 변수 타입 확인
alert(typeof(a))
// 변수의 name 속성 확인
alert(a.name)
// 브라우저 콘솔 출력
console.log(a)
// 팝업창 출력
alert(a)
규칙:
- 대소문자 구분
- 첫 글자는 반드시 "_" 또는 "$" 또는 영문, 그 이후에는 숫자 허용
3. 함수
함수 선언 및 호출:
function function_name(argument) {
// body
}
예제:
function calc(argument) {
var aaa = 1; // 지역 변수, 함수 내부에서만 사용 가능
aaa++; // aaa += 1 과 동일
aaa += 1;
var abc = argument + aaa;
return abc
}
var ccc = "aaa:"; // 전역 변수
var abc = calc(ccc);
alert(abc); // 결과: aaa:3 (JavaScript에서 문자열과 숫자는 직접 더할 수 있음)
4. 조건문
문법:
if...else if...else
또는
if...else
예제:
function test(argument) {
var aaa = 1;
aaa++;
aaa += 1;
if (aaa < 2) {
var abc = argument + aaa;
} else if (aaa > 1){
var abc = argument + "1aaa" + aaa;
} else{
var abc = argument + "2aaa" + aaa;
}
return abc
}
var ccc = "aaa:";
var abc = test(ccc);
alert(abc); // 결과: aaa:1aaa3
5. 연산자
비교 연산자:
| 연산자 | 설명 | 예 (n=1) |
|---|---|---|
| == | 같음 | n=="1", true |
| === | 완전 같음 (값과 타입) | n==="1", false |
| != | 다름 | n!=2, true |
| > | 큼 | n>-1, true |
| < | 작음 | n<2, true |
| >= | 크거나 같음 | n>=1, true |
| <= | 작거나 같음 | n<=1, true |
논리 연산자:
| 연산자 | 설명 | 예 (x=1, y=10) |
|---|---|---|
| && | 그리고 (and) | (x<2 && y<11), true |
| \|\| | 또는 (or) | (x<1 \|\| y<11), true |
| ! | 부정 (not) | !(x<1 \|\| y<10), true |
6. 내장 객체
6.1 document
document 객체는 window 객체의 속성으로, 창에 표시되는 문서를 나타냅니다. window는 최상위 객체입니다. document는 웹 페이지 자체이고, window는 브라우저 창입니다.
document 노드는 문서의 루트 노드이며, window.document 속성이 이 노드를 가리킵니다.
6.1.2 document 노드 속성
| 속성 | 설명 |
|---|---|
| doctype | 문서 타입 선언(DTD) 정보. HTML5 문서의 경우 <!DOCTYPE html>을 나타냄. 선언되지 않으면 null 반환. |
| documentElement | 문서의 루트 노드 (일반적으로 <html>). 보통 document.doctype 다음에 위치. |
| defaultView | document 객체가 속한 window 객체 반환. 없으면 null. |
| body | 현재 문서의 <body> 또는 <frameset> 노드 반환. 작성 가능. |
| head | 현재 문서의 <head> 노드 반환. 여러 개면 첫 번째 반환. |
| activeElement | 현재 포커스를 가진 요소 반환. |
| URL / documentURI | 현재 문서의 URL 반환. documentURI는 모든 문서에, URL은 HTML 문서에만 있음. |
| domain | 현재 문서의 도메인 반환. |
| lastModified | 문서의 마지막 수정 시간(문자열) 반환. |
| location | 현재 문서의 URL 정보 제공 (읽기 전용). window.location과 동일. |
| referrer | 이전 문서의 URL 반환. 직접 접속 시 빈 문자열. |
| title | 문서 제목 반환 (작성 가능). |
| characterSet | 현재 문서의 문자 인코딩 반환 (예: UTF-8). |
| readyState | 문서 상태: loading(로딩 중), interactive(외부 리소스 로딩 중), complete(로딩 완료). |
| designMode | 문서 편집 가능 여부 제어. |
| compatMode | 브라우저 렌더링 모드: BackCompat(쿼크 모드) 또는 CSS1Compat(표준 모드). |
| anchors | name 속성이 있는 <a> 요소 리스트. |
| embeds | <embed> 요소 리스트 (NodeList). |
| forms | 모든 <form> 요소 리스트. |
| images | 모든 <img> 요소 리스트. |
| links | href 속성이 있는 <a> 또는 <area> 요소 리스트. |
| scripts | 모든 <script> 요소 리스트. |
| styleSheets | 모든 스타일 시트 리스트. cssRules 속성으로 각 규칙 접근 가능. |
6.1.3 document 객체 메서드
| 메서드 | 설명 |
|---|---|
| open() | 새 문서를 열어 write() 메서드로 내용을 쓸 수 있게 함. 기존 문서 내용은 지워짐. window.open()과 혼동 주의. |
| close() | open()으로 연 문서를 닫음. 닫힌 후 write()를 호출하면 다시 open()이 호출됨. |
| write() | 현재 문서에 내용을 씀. 문서가 닫히기 전까지는 내용이 추가됨. 페이지가 완전히 렌더링된 후 호출되면 기존 내용을 지움. |
| writeln() | write()와 동일하지만, 출력 끝에 줄바꿈 문자를 추가함 (HTML에서는 시각적 효과 없음). |
| hasFocus() | 문서의 요소가 포커스를 받았는지 boolean 반환. |
| querySelector() | CSS 선택자와 일치하는 첫 번째 요소 반환. 없으면 null. |
| getElementById() | 지정된 id 속성 값을 가진 요소 반환. 없으면 null. querySelector와 달리 CSS 선택자 문법을 사용하지 않음. |
| querySelectorAll() | CSS 선택자와 일치하는 모든 요소를 NodeList로 반환 (정적 컬렉션). |
| getElementsByClassName() | class 이름이 일치하는 모든 요소를 HTMLCollection으로 반환 (실시간 반영). |
| getElementsByTagName() | 태그 이름이 일치하는 모든 요소를 HTMLCollection으로 반환 (실시간 반영). |
| getElementsByName() | name 속성을 가진 요소를 NodeList로 반환 (form, img 등). IE에서는 id와 name 혼동 주의. |
| elementFromPoint() | 지정된 좌표에 위치한 요소 반환. |
| createElement() | 지정된 태그 이름으로 HTML 요소 생성. 대문자 입력 시 소문자로 변환. |
| createTextNode() | 텍스트 노드 생성. |
| createAttribute() | 새 속성 노드 생성. |
| createDocumentFragment() | DocumentFragment 객체 생성. |
| createEvent() | 이벤트 객체 생성. element.dispatchEvent()로 사용. |
| createNodeIterator() | DOM 하위 노드 반복자 생성. |
| createTreeWalker() | DOM 하위 트리 반복자 생성. createNodeIterator와 달리 전체 서브트리 순회. |
| adoptNode() | 다른 문서에서 노드를 가져와 현재 문서에 삽입. |
| importNode() | 다른 문서의 노드를 복사하여 현재 문서에 삽입. 두 번째 인자는 깊은 복사 여부 (기본 false, true 권장). |
6.2 window
JavaScript에서 브라우저 창 하나는 하나의 window 객체입니다. window 객체 안의 HTML 문서는 document 객체이며, document는 window의 하위 객체입니다.
6.2.1 window 객체의 주요 하위 객체
| 하위 객체 | 설명 |
|---|---|
| document | 페이지 요소 조작용 |
| location | URL 조작용 |
| navigator | 브라우저 버전 정보 획득용 |
| history | 브라우저 히스토리 조작용 |
| screen | 화면 너비/높이 조작용 |
6.2.2 window 객체 메서드
| 메서드 | 설명 |
|---|---|
| close() | 현재 창 닫기 |
| open() | 새 창 열기 (URL 지정) |
| window.onload | 페이지 로드 완료 시 실행할 함수 할당 |
| history.go(n) | 히스토리에서 n번째 페이지로 이동 (양수: 앞으로, 음수: 뒤로) |
| history.back() | 이전 페이지로 이동 (history.go(-1)과 동일) |
| history.forward() | 다음 페이지로 이동 (history.go(1)과 동일) |
| location.reload() | 페이지 새로고침 |
| location.href | 현재 URL 주소 (수정 가능) |
| screen.width | 화면 너비 |
| screen.height | 화면 높이 |
| screen.availWidth | 사용 가능한 화면 너비 |
| screen.availHeight | 사용 가능한 화면 높이 |
| navigator.appName | 브라우저 이름 |
| navigator.appVersion | 브라우저 버전 |
| document.getElementById() | id로 요소 획득 |
JavaScript 내장 함수 추가:
| 함수 | 설명 |
|---|---|
| confirm() | 확인/취소 팝업창 표시 |
| setTimeout() | 일정 시간 후 코드 실행 (타이머, 단위: ms) |
| clearTimeout() | setTimeout 타이머 해제 |
| setInterval() | 일정 시간 간격으로 코드 반복 실행 |
| clearInterval() | setInterval 타이머 해제 |
| replace() | 현재 페이지를 새 URL로 교체 (히스토리에 기록 안 남김) |
| assign() | 새 URL로 이동 (히스토리에 기록 남김) |
6.3 Global (전역 객체)
전역 속성은 모든 HTML 요소에서 사용할 수 있는 속성입니다.
6.3.1 주요 전역 속성
| 속성 | 설명 |
|---|---|
| accesskey | 키보드 단축키 힌트 제공. 공백으로 구분된 문자 목록. |
| autocapitalize | 자동 대문자 변환 제어. 값: off, on, sentences, words, characters. |
| autofocus | 페이지 로드 시 요소 자동 포커스. 불리언. |
| class | CSS 또는 JavaScript에서 요소 선택을 위한 클래스명 목록 (공백 구분). |
| contenteditable | 요소 편집 가능 여부. 값: true, false. |
| data-* | 사용자 정의 데이터 속성. dataset 속성으로 접근. |
| dir | 텍스트 방향. 값: ltr, rtl, auto. |
| draggable | 드래그 가능 여부. 값: true, false. |
| hidden | 요소 숨김. 브라우저가 렌더링하지 않음. |
| id | 문서 내 고유 식별자. |
| lang | 요소 언어 정의 (예: "ko"). |
| spellcheck | 맞춤법 검사 여부. 값: true, false. |
| style | 인라인 CSS 스타일. |
| tabindex | Tab 키를 통한 요소 포커스 순서 제어. 음수: 포커스 불가, 0: 문서 순서, 양수: 사용자 지정 순서. |
| title | 요소에 대한 추가 정보 (툴팁). |
| translate | 페이지 번역 시 요소 번역 여부. 값: yes, no. |
7. 배열
7.1 배열 생성
var a = new Array(1,1,1,2);
var b = [1,2,[1,1,3],4,"hello"];
7.2 배열 연산
| 연산/메서드 | 설명 | 예 (alst=[1,2,3,[4,5],"hello"]) |
|---|---|---|
| alst.length | 배열 길이 획득 | alst.length // 6 |
| alst[index] | 인덱스로 값 획득 | alst[0] // 1 |
| alst.push() | 끝에 데이터 추가 | alst.push(5) // alst = [1,2,3,[4,5],"hello",5] |
| alst.pop() | 끝에서 데이터 제거 | alst.pop() // alst = [1,2,3,[4,5],"hello"] |
| alst.splice(start, num, elementN) | 인덱스 기준 요소 추가/제거. start: 시작 인덱스, num: 제거 개수, element: 추가할 요소 | alst.splice(0,2,"a") // alst = ["a",3,[4,5],"hello"] |
8. 반복문
8.1 for 반복문
var b = [1,2,[1,1,2],4,"hello"];
for (var i = b.length - 1; i >= 0; i--) {
console.log(b[i])
}
8.2 while 반복문
var b = [1,2,[1,1,2],4,"hello"];
var index = 0;
while (index < b.length) {
console.log(b[index])
index++
}
8.3 do-while 반복문
var b = [1,2,[1,1,2],4,"hello"];
var index = 10;
do {
// 조건과 상관없이 최소 한 번은 실행됨
console.log("b[10]:", b[index]);
index ++;
} while (index < b.length)