JavaScript 시험 공부 (feat.Claude)

 

JavaScript 시험 공부 요약

1. JavaScript 기본 개념

웹 기술의 역할 분담

• HTML: 웹페이지의 구조 정보 표현
• CSS: 스타일링 담당
• JavaScript: 브라우저에서 동적 효과, 요소 제어, 이벤트 제어

스크립트 언어의 특징

• 애플리케이션 제어를 사용자 요구에 맞게 수행
• 빠른 학습이 가능하고 짧은 소스코드로 상호작용
• 컴파일 과정 없이 바로 실행 (인터프리터 방식)

2. JavaScript의 주요 특징 ⭐시험출제포인트⭐

컴파일 vs 인터프리터

• 컴파일: 컴파일 단계를 거친 후 실행
• 인터프리터: 컴파일 단계 없이 곧바로 실행
• JavaScript/Java: JIT Compiler (컴파일 + 인터프리터 혼합)

JavaScript만의 특징

1. 함수를 일급객체로 취급
2. 단순한 문법 구조
   • 접근제한자 개념 없음
   • 함수 정의 시 반환형 정의 불필요
   • 변수 선언 시 자료형 지정 불필요 (타입추론)
3. 확장성이 좋음 - 다양한 분야에서 활용 가능

3. JavaScript 코드 작성 위치 ⭐시험출제포인트⭐

1) Inline 방식 (인라인)

 

html

<button onclick="window.alert('알림창')">버튼</button>
<button onclick="console.log('콘솔출력')">콘솔 버튼</button>

• 특징: 요소 속성에 간단한 코드 작성
• 사용 시기: 매우 소량의 코드이거나 다른 방식과 혼합 사용 시

2) Internal 방식 (내부)

 

html

<script>
    function fn1() {
        window.alert('함수 출동~~');
        console.log('콘솔창도 찍혀라~~');
    }
</script>

• 특징: HTML 문서 내 <script> 태그에 코드 작성
• 권장사항: 성능 향상을 위해 HTML 가장 하단에 배치

3) External 방식 (외부)

 

html

<script src="resources/sample.js"></script>

• 특징: 별도의 .js 파일로 작성하고 HTML에서 연결
• 장점: 모듈화, 재사용성, 유지보수성 향상

4. 이벤트 처리 방법 ⭐시험출제포인트⭐

방법 1: Inline + Internal 혼합

 

html

<button onclick="fn1()">누르시오</button>

방법 2: 순수 Internal 방식

 

javascript

// 1. 요소 선택
const btnEl = document.getElementById('btn1');

// 2. 이벤트 리스너 등록
btnEl.onclick = function() { // 익명함수
    console.log('나는 1번 버튼이다');
    alert('호잇~');
};

방법 3: addEventListener 사용

 

javascript

const btnEl2 = document.querySelector('#btn2');
btnEl2.addEventListener('click', () => { // 화살표 함수
    alert('이벤트 리스너 방식');
});

5. 함수 정의 방식 ⭐시험출제포인트⭐

선언적 함수 (Named Function)

 

javascript

function fn1() {
    // 함수 내용
}

익명 함수 (Anonymous Function)

 

javascript

const func = function() {
    // 함수 내용
};

화살표 함수 (Arrow Function)

 

javascript

const func = () => {
    // 함수 내용
};

6. DOM 요소 선택 방법

getElementById

 

javascript

const element = document.getElementById('btn1');

querySelector

 

javascript

const element = document.querySelector('#btn2'); // ID로 선택
const element = document.querySelector('.class'); // 클래스로 선택

7. 시험 예상 문제 유형

객관식 문제 예시

1. JavaScript의 특징이 아닌 것은?
   • ① 함수를 일급객체로 취급
   • ② 접근제한자 개념 존재
   • ③ 타입추론 지원
   • ④ 인터프리터 방식

코드 해석 문제

 

javascript

function test() {
    console.log('테스트');
}
document.getElementById('btn').onclick = test;

위 코드의 실행 결과를 설명하시오.

코드 작성 문제

"버튼 클릭 시 '안녕하세요'라는 알림창이 뜨도록 하는 코드를 3가지 방식으로 작성하시오."

8. 주의사항 및 팁

성능 최적화

• 스크립트는 가능한 HTML 하단에 배치
• 외부 파일 방식 권장 (모듈화, 캐싱 효과)

코딩 관례

• 함수명, 변수명은 camelCase 사용
• 의미있는 이름으로 명명
• 적절한 주석 활용

디버깅

• console.log() 활용한 디버깅
• 브라우저 개발자 도구 활용

9. JavaScript 데이터 입출력 ⭐시험출제포인트⭐

출력 방법 4가지

1. window.alert() - 알림창에 출력
2. console.log() - 콘솔창에 출력
3. document.write() - 문서에 직접 출력 (HTML 태그 포함 가능)
4. 요소객체.innerHTML / innerText - 특정 요소에 출력

innerHTML vs innerText

 

javascript

divEl.innerHTML = "<b>태그 포함</b>"; // HTML 태그 해석됨
divEl.innerText = "<b>태그 미포함</b>"; // 태그가 문자열로 표시됨

입력 방법 4가지

1. window.confirm() - 확인/취소 버튼 (true/false 반환)
2. window.prompt() - 텍스트 입력창 (문자열 반환, 취소시 null)
3. 요소객체.속성 - 요소의 속성값 가져오기
4. input요소.value - input 요소의 입력값 가져오기 ⭐중요⭐

10. DOM 요소 선택 방법 ⭐시험출제포인트⭐

6가지 요소 선택 방법

1. getElementById('id') - ID로 요소 1개 선택
2. getElementsByTagName('tag') - 태그명으로 여러 요소 선택 (배열 반환)
3. getElementsByName('name') - name 속성으로 여러 요소 선택
4. getElementsByClassName('class') - 클래스명으로 여러 요소 선택
5. querySelector('선택자') - CSS 선택자로 첫 번째 요소 선택
6. querySelectorAll('선택자') - CSS 선택자로 모든 요소 선택

선택된 요소 스타일 변경

 

javascript

element.style.backgroundColor = "red";
element.style.color = "white";

11. 변수 선언 ⭐시험출제포인트⭐

var, let, const 차이점

구분varletconst

중복선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화	선택적	선택적	필수
스코프	function scope	block scope	block scope

전역변수 vs 지역변수

• 전역변수: 함수 외부에서 선언, window 객체의 속성
• 지역변수: 함수 내부에서 선언, 해당 함수에서만 사용

JavaScript 자료형 6가지

1. String (문자열)
2. number (숫자)
3. boolean (논리)
4. object (객체)
5. function (함수)
6. undefined (초기화되지 않은 상태)

12. 문자열 및 수학 메소드 ⭐시험출제포인트⭐

문자열 메소드

 

javascript

const str = "Hello World";
str.length           // 길이
str.toUpperCase()    // 대문자 변환
str.toLowerCase()    // 소문자 변환
str.indexOf('l')     // 문자 위치 (첫 번째)
str.lastIndexOf('l') // 문자 위치 (마지막)
str.substring(0,5)   // 부분 문자열 추출
str.split(',')       // 문자열 분할 (배열 반환)

강제 형변환

 

javascript

Number("123")     // 문자열을 숫자로
parseInt("123")   // 정수로 변환
parseFloat("1.5") // 실수로 변환

13. 배열 메소드 ⭐시험출제포인트⭐

주요 배열 메소드

 

javascript

const arr = ['A', 'B', 'C'];

// 요소 추가/제거
arr.push('D')      // 마지막에 추가
arr.pop()          // 마지막 요소 제거
arr.unshift('Z')   // 첫 번째에 추가
arr.shift()        // 첫 번째 요소 제거

// 유틸리티
arr.indexOf('B')   // 요소 위치 찾기
arr.concat(arr2)   // 배열 합치기
arr.reverse()      // 순서 뒤집기
arr.sort()         // 정렬
arr.slice(1,3)     // 부분 배열 추출
arr.splice(1,1)    // 요소 제거/추가
arr.join('-')      // 문자열로 합치기

배열 반복문

 

javascript

// for in문 (인덱스)
for(let i in array) {
    console.log(array[i]);
}

// for of문 (값)
for(let value of array) {
    console.log(value);
}

14. 함수 ⭐시험출제포인트⭐

함수 정의 방법

 

javascript

// 1. 선언적 함수
function functionName() {
    // 코드
}

// 2. 익명함수 (변수에 대입)
const func = function() {
    // 코드
};

// 3. 화살표 함수
const func = () => {
    // 코드
};

매개변수와 this

 

javascript

function test(...params) {  // 가변 매개변수
    console.log(params);
}

// this 키워드 전달
<button onclick="changeColor(this)">버튼</button>

15. 객체 ⭐시험출제포인트⭐

객체 생성과 접근

 

javascript

const obj = {
    name: "홍길동",
    age: 20,
    getName: function() {
        return this.name;  // 메소드에서 this 사용
    }
};

// 접근 방법
console.log(obj.name);      // 점 표기법
console.log(obj['name']);   // 대괄호 표기법

객체 반복문

 

javascript

for(let key in obj) {
    console.log(obj[key]);  // 대괄호 표기법 필수
}

생성자 함수

 

javascript

function Person(name, age) {
    this.name = name;
    this.age = age;
}
const person1 = new Person("김철수", 25);

16. BOM과 DOM ⭐시험출제포인트⭐

BOM (Browser Object Model)

• window : 브라우저 창 객체
• location : URL 정보 조작
• screen : 화면 정보
• navigator : 브라우저 정보

DOM 동적 요소 생성

 

javascript

// 1. 요소 노드 생성
const element = document.createElement('h3');

// 2. 텍스트 노드 생성  
const textNode = document.createTextNode('내용');

// 3. 연결
element.appendChild(textNode);

// 4. 문서에 추가
document.body.appendChild(element);

타이머 함수

 

javascript

setTimeout(함수, 시간);    // 일정 시간 후 1회 실행
setInterval(함수, 시간);   // 일정 간격으로 반복 실행

17. 이벤트 처리 ⭐시험출제포인트⭐

3가지 이벤트 모델

1. 고전 이벤트: element.onclick = function() {}
2. 인라인 이벤트: <button onclick="함수()">
3. 표준 이벤트: element.addEventListener('click', function() {})

이벤트 객체

 

javascript

// 이벤트 타겟 접근
window.event.target  // IE 방식
e.target            // 표준 방식
this               // function 키워드 사용시

기본 이벤트 제거

 

javascript

// 방법 1: return false
<a href="url" onclick="return false;">링크</a>

// 방법 2: 조건부 return
<a href="url" onclick="return validate();">링크</a>

18. 정규표현식 ⭐시험출제포인트⭐

정규표현식 생성

 

javascript

const regExp = /패턴/플래그;
const regExp = new RegExp('패턴');

주요 메타문자

• ^ : 시작
• $ : 끝
• [] : 문자 클래스
• . : 모든 문자 (개행 제외)
• + : 1글자 이상
• \d : 숫자 [0-9]
• \w : 영문자,숫자,_ [a-zA-Z0-9_]

수량문자

• {n} : 정확히 n글자
• {n,m} : n글자 이상 m글자 이하
• {n,} : n글자 이상

플래그

• i : 대소문자 구분 안함
• g : 전역 검색
• m : 여러 줄 검색

정규식 메소드

 

javascript

regExp.test(문자열)        // 패턴 일치 여부 (boolean)
문자열.replace(regExp, 값) // 패턴 치환

19. 시험 예상 문제 유형

1. 객관식 - 개념 문제

• var, let, const 차이점
• DOM 요소 선택 방법
• 이벤트 모델 종류
• 정규표현식 메타문자

2. 단답형 - 코드 결과 예측

 

javascript

console.log(7 + "7");        // "77"
console.log(7 + 7 + "7");    // "147"
console.log("7" - 7);        // 0

3. 코드 작성 - 실무 응용

• 버튼 클릭 이벤트 처리
• 배열 데이터 화면 출력
• 입력값 유효성 검사
• 객체를 이용한 데이터 관리

4. 디버깅 - 오류 찾기

• 변수 스코프 문제
• 이벤트 this 참조 오류
• 정규식 패턴 오류

20. 암기할 핵심 키워드

• 일급객체: JavaScript에서 함수가 갖는 특성
• JIT Compiler: Java/JavaScript의 실행 방식
• 타입추론: 변수 선언 시 자료형을 자동으로 추론
• 이벤트 핸들러: onclick, addEventListener 등
• DOM: Document Object Model - HTML 요소에 접근하는 방법
• BOM: Browser Object Model - 브라우저 제어
• 호이스팅: var 변수의 선언부가 위로 끌어올려지는 현상
• 클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수
• this 키워드: 현재 실행 컨텍스트의 객체 참조