외부 파일의 JavaScript 파일을 참조하려면 다음 코드를 사용합니다: <script src="Path"></script> 여기서 Path는 index.html이 위치한 루트 디렉터리에서 시작됩니다.

함수 및 메소드

• window.alert() : 경고 창을 표시합니다. 경고 창의 스타일은 브라우저에 의해 결정됩니다.
• document.write() : 내용을 HTML 문서에 작성합니다. HTML 값을 수정하려면 document.getElementById("id").value = "새로운 값";을 사용합니다.
• innerHTML : HTML 요소에 내용을 삽입합니다.
• console.log() : 내용을 콘솔에 출력합니다.

변수

• 변수를 선언하지 않고 값만 할당하면 그 변수는 window 객체의 속성으로กลาย합니다.
• 객체 내부에서 멤버 변수를 선언할 때는 변수 선언 키워드를 사용하지 않습니다.

변수 선언 방법

• var varname 함수 단위로 스코프가 결정됩니다. var로 선언된 변수는 호이스팅 현상이 발생합니다. 즉, 변수가 처음 선언된 곳으로 실행순서가 올라갑니다. 하지만 값 대입은 올라가지 않습니다. 선언 전에 변수를 참조하면 undefined가 됩니다. 같은 이름의 변수를 두 번 선언하면 첫 번째로 선언된 변수의 값을 유지합니다.

• let과 const let은 값을 변경할 수 있는 변수를 선언하며, const는 변경할 수 없는 변수를 선언합니다. 블록 단위로 스코프가 결정됩니다.

데이터 유형

JavaScript 변수 유형은 동적입니다. 변수에 다른 유형의 값을 할당할 수 있습니다. 새 변수를 선언할 때 유형을 지정하려면 new 키워드를 사용합니다. 예: var v = new String;

값 유형

• 문자열 (String)
• 숫자 (Number)
• 불리언 (Boolean)
• null
• undefined

참조 유형

• 객체 (Object)
• 배열 (Array)
• 함수 (Function)
• 정규 표현식 (RegExp)
• 일자 (Date)

함수

함수는 function 키워드를 사용하여 선언합니다.

function myFunction(parameter1, parameter2, ...) {
    // 함수 로직
}

객체 내부의 함수는 메소드라고 불れます. 다음과 같이 특수한 방법으로 선언합니다.

functionName: function(parameter1, parameter2, ...) {
    // 메소드 로직
}

이벤트

이벤트는 사용자가 웹페이지에서 수행하는 작업입니다. HTML DOM 이벤트 객체를 통해 사용할 수 있습니다.

외부 JavaScript 파일에서 특정 요소에 이벤트 리스너를 등록하려면 document.getElementById("id")와 같은 방법으로 요소를 가져오고 obj.addEventListener()를 사용합니다.

예를 들어, HTML 파일에 다음 버튼이 있습니다.

<button id="btnElement">테스트 텍스트</button>

외부 JavaScript 파일에서 버튼을 클릭했을 때 경고창을 띄우는 코드는 다음과 같습니다.

window.onload = function() {
    let button = document.getElementById("btnElement");
    button.addEventListener("click", function() {
        alert("테스트 텍스트입니다.");
    });
};

페이지가 완전히 로드되기 전에 요소에 접근하려면 오류가 발생합니다. 따라서 페이지 로드가 완료된 후에 이벤트를 등록해야 합니다.

간단한 방법으로는 다음과 같이 할 수 있지만 기존에 등록된 이벤트를 덮어쓰는 단점이 있습니다.

window.onload = function() {
    let button = document.getElementById("btnElement");
    button.onclick = function() {
        alert("테스트 텍스트입니다.");
    };
};

addEventListener()의 경우 이벤트를 추가할 수 있지만, onclick은 기존 이벤트를 덮어쓰는 단점이 있습니다.