자바스크립트 정리

🧰 JavaScript 정리(치트시트)

현대 브라우저 표준 중심으로 재정리. 오래된 IE/넷스케이프 전용 항목은 (레거시) 표기.

---

1) 기본 개념

🔹 객체(Object)

HTML 문서, 브라우저 창, 날짜/시간 등.

• 메서드: 객체가 수행하는 동작
• 속성: 객체의 상태/특징

자주 쓰는 객체:

• window(브라우저 창)
• document(현재 문서)
• location(URL/이동)
• history(탐색 기록)
• navigator(브라우저/플러그인 정보)
• screen(화면 정보)
• Date(날짜/시간)

const now = new Date();        // 현재 시각
parent.location = 'index.html' // 상위창 URL 이동

---

2) 메서드(Method)

브라우저 대화상자

window.alert('메시지');              // 경고
const v = prompt('입력', '초기값');  // 입력
const ok = confirm('확인?');         // 확인/취소
window.print();                      // 인쇄

문서 출력 (레거시)

document.write('텍스트'); // 동적 DOM 권장 (아래 참고)

수학/숫자

parseInt('10.9', 10);    // 10
parseFloat('10.9');      // 10.9
Math.ceil(1.2);          // 2 (올림)
Math.floor(1.8);         // 1 (내림)
Math.round(1.5);         // 2 (반올림)
Math.abs(-3);            // 3
Math.pow(4,2);           // 16
Math.PI;                 // 원주율
Math.floor(Math.random()*6)+1; // 1~6 난수

---

3) 컬렉션/문자열 유틸

배열

const arr = ['1','2','5','4','3'];
arr.length;     // 길이
arr.sort();     // 정렬 (문자열 기준)
arr.reverse();  // 역순
arr.concat([9]) // 병합
arr.slice(1,3); // 슬라이스
arr.join(',');  // "1,2,5,4,3"

문자열

const s = 'ABC';
s.length;             // 길이
s.charAt(0);          // 'A'
s.charCodeAt(0);      // 65
String.fromCharCode(65,66,67); // "ABC"
'hello'.toUpperCase(); // "HELLO"
'hello'.toLowerCase(); // "hello"
'ABCDE'.indexOf('C');  // 2
'ABCDABC'.lastIndexOf('ABC'); // 4
'abcdef'.substring(2,5); // 'cde'
'abcdef'.substr(2,3);    // 'cde' *(비표준)*
'1997, 1998'.replace('1997','2000'); // 첫 항목만
'1,2,3'.split(','); // ['1','2','3']

---

4) 제어문/검사

if (cond) { ... } else if (...) { ... } else { ... }

switch (v) {
  case '1': ...; break;
  case '2': ...; break;
  default : ...; break;
}

for (let i=0;i<5;i++) { ... }
while (i<5) { ... }

isNaN(value); // 숫자면 false, 문자는 true

---

5) Date (날짜/시간)

const d1 = new Date();                         // now
const d2 = new Date(2000, 0, 31, 15, 35, 20);  // 월 0=1월
d1.getFullYear(); d1.getMonth(); d1.getDate();
d1.getDay(); d1.getHours(); d1.getMinutes();
d1.getSeconds(); d1.getMilliseconds();

d1.setFullYear(2025); d1.setMonth(10); d1.setDate(3);
d1.valueOf(); // 1970-01-01부터 ms

---

6) 윈도우/문서/네비게이션

// location
location.href = 'https://example.com';
location.reload();
location.replace('/login'); // 히스토리 남기지 않음

// history
history.back(); history.forward(); history.go(-1);

// navigator (브라우저 정보)
navigator.userAgent;

// screen
screen.width; screen.height; screen.colorDepth;

---

7) DOM (표준)

<h1 id="heading1">제목</h1>

const el = document.getElementById('heading1');
el.style.fontFamily = 'serif';

const tds = document.getElementsByTagName('td'); // HTMLCollection
document.documentElement.tagName; // "HTML"

// 노드 탐색
el.firstChild; el.lastChild;
el.parentNode; el.nextSibling; el.previousSibling;

// 생성/삽입
const h1 = document.createElement('h1');
const text = document.createTextNode('새 제목');
h1.appendChild(text);
document.body.appendChild(h1);

// 속성
h1.setAttribute('align','center');
h1.getAttribute('align');
h1.removeAttribute('align');

document.all, layer/ilayer, outerHTML 직접 조작 등은 (레거시).
표준 DOM API 사용 권장.

---

8) 폼/이미지/링크 (일부 레거시 포함)

document.forms[0].elements['name'].value;
document.images['logo'].src = 'logo.png';
document.links[0].onclick = () => { ... };

// Select 옵션 조작
const opt = new Option('표시텍스트','값');
document.form1.selectObject.options[0] = opt;
document.form1.selectObject.options[0] = null; // 제거
const v = document.form1.selectObject
            .options[document.form1.selectObject.selectedIndex].value;

---

9) 창 제어 / 관계

// 새 창 열기
const w = window.open(
  '/popup.html',
  'targetName',
  'width=600,height=400,left=100,top=100,resizable=yes,scrollbars=yes,status=yes,toolbar=no'
);

w.resizeTo(350,200);
w.moveTo(100,400);
w.resizeBy(100,200);
w.moveBy(20,50);

window.close();

// 창 관계
window.name;
window.opener; // 나를 연 창
window.parent; // 부모 프레임
window.top;    // 최상위 창

---

10) 이벤트 핸들러

HTML 속성형(onclick="...") 대신 addEventListener 권장.

element.addEventListener('click', handler);
element.addEventListener('mouseover', handler);
element.addEventListener('change', handler);
// 포커스: focus/blur, 로드: load, 언로드: beforeunload/unload 등

이벤트 객체 일부

e.type;
e.currentTarget;
e.bubbles; e.cancelable;

e.clientX; e.clientY; // 뷰포트 좌표
e.screenX;  e.screenY; // 스크린 좌표
e.altKey; e.ctrlKey; e.shiftKey; e.metaKey;

원문에 있는 on_click, on_mouseOver 등 언더스코어 표기는 (레거시).
표준은 소문자 onclick, onmouseover 또는 addEventListener('mouseover', ...).

---

11) 정규식(Regex) 메모

// 리터럴과 플래그
const re = /\d-\d{3}-\d{3}-\d{4}/gi;

// 메타
// \d 숫자, \D 비숫자, \w 단어문자, \W 비단어, \s 공백, \S 비공백, . 임의문자
// ^ 시작, $ 끝, \b 단어경계
// 수량자: {n}, {n,}, {n,m}, ?, +, *

'1999, 2000'.match(/\d{4}/g); // ['1999','2000']
'1999'.replace(/(\d{4})/g, 'year $1'); // "year 1999"

---

12) 타이머

const id1 = setTimeout(() => alert('3초 후'), 3000);
clearTimeout(id1);

const id2 = setInterval(tick, 5000);
clearInterval(id2);

---

13) 쿠키 (간단 예시)

document.cookie = 'UserName=홍길동; expires=Tue, 28 Dec 2030 00:00:00 GMT; path=/';

const expires = new Date();
expires.setMonth(expires.getMonth()+6);
document.cookie = `UserName=홍홍홍; expires=${expires.toUTCString()}; path=/mystore`;

escape/unescape (레거시) → encodeURIComponent 사용 권장.
보안/편의성 위해 localStorage 또는 서버 세션/토큰 고려.

---

14) 디버그 유틸(원문 제공, IE 전용 API 포함)

// 모든 프로퍼티/값 나열 (IE: clipboardData 사용, 현대 브라우저는 navigator.clipboard 권장)
function debug(node) {
  let out = '';
  for (const key in node) out += `${key} : ${node[key]}\n`;
  if (window.clipboardData) window.clipboardData.setData('Text', out);
  alert('복사완료');
}

// 특정 element outerHTML 복사 (IE 전용)
function debug2(id) {
  if (window.clipboardData) {
    window.clipboardData.setData('Text', document.all[id].outerHTML);
    alert('복사완료');
  }
}

---

15) 레거시/주의 항목 요약

• document.all, layer/ilayer, bgColor, status, ActiveX <OBJECT>,
  언더스코어 이벤트명(on_mouseover) → 현대 표준 아님
• 동적 문서 구성은 DOM API 권장 (createElement, appendChild, innerHTML)
• 문자열 substr는 비표준. substring/slice 사용 권장