[JS] 자바스크립트 적용 방식

inline(인라인) 방식

• 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
• 실행하는 소스코드가 소량일 경우 사용
• 실행 코드가 여러개 있으면 세미콜론으로 구분
• 이벤트 속성에 debugger;를 넣으면 디버깅 모드가 됨

[표현법]
<태그명 이벤트속성="해당 요소에 이벤트가 발생했을때 실행할 js코드">

<!-- 버튼이 클릭(클릭이벤트)되는 순간 알람창 띄워보기 -->
<button onclick="window.alert('버튼클릭!!')">알림창 출력</button>

<!-- 실행 코드가 여러개 있으면 세미콜론으로 구분 시켜줘야함-->
<button onclick="debugger; console.log('ㅎㅎ'); window.alert('버튼클릭!!');">콘솔창 출력</button>

internal (내부) 방식

• script 태그 영역에 함수단위로 소스코드를 작성하고 특정 요소에 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식
• css의 style과 비슷하지만 script 태그는 head, body 태그 내에 다 작성 가능 (body태그 마지막에 작성하는걸 권장)
• 주석은 자바와 동일 (/*, //)
• 중괄호 내에는 해당 함수 호출 시 실행할 코드 기술
• 코트에 세미콜론은 안 써도 자동삽입 되지만 써주는게 관례

인라인+내부 방식

• 선언적 함수 : function으로 선언하고 함수명을 작성한 함수

<button onclick="abc();">알림창 출력</button>

function abc(){
    window.alert("인라인 방식 + 내부방식");
}

내부방식

• 익명함수
  • 이름이 없는 함수
  • 이름이 없으므로 재사용 불가
  • 익명함수는 선언적 함수가 아님

<button id="btn">콘솔창 출력</button>


// 이벤트를 적용시키고자 하는 요소객체를 가지고 오기 + 가지고온 요소를 변수에 담기
// id값이 btn인 요소(element)를 가지고오는 구문

const btn = document.getElementById("btn");


//선택된 요소의 이벤트 속성에 접근해서 해당 이벤트가 발생했을 때 실행할 함수 대입
//html 속성은 attribute, 자바스크립트 속성은 property
//onclick : 이벤트 리스너 (이벤트 감지)
//function : 이벤트 핸들러 (이벤트 처리)

btn.onclick = function (){ 
       console.log("순수 내부방식으로 실행됨");
       abc(); // 함수 내부에서 미리 정의된 선언적 함수 호출 가능.
}

external(외부방식)

• 소스코드들을 별도의 .js파일로 작성하고 해당 HTML에 가져다가 실행하는 방법
• 맨 아래에 추가하는걸 권장
• JS 파일 : script 태그의 src 속성으로 연결
• CSS 파일 : link 태그의 href 속성으로 연결

<button onclick="test();">알림창 출력하기</button>
<script src="resources/js/sample.js"></script>

//sample.js파일
function test(){
    window.alert("외부방식 ");
}