[JavaScript] 1. 자바스크립트 개요(inline, internal, external)

😊자바스크립트 개요

   [자바스크립트]

   웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어(객체지향) 

    - 스크립트 언어 : 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도

    - 인터프리터 : 컴파일 과정 없이 실행하면서 코드를 하나씩 읽어내는 방식

                       (코드에 문법 오류가 있으면 실행시점에서 알수 있다.)

---

   1. 자바스크립트 사용법

       - inline(인라인) : 태그 내에 직접 간단한 코드를 작성하여 실행한다.

       - internal(내부) : 문서 내에 script 태그 영역에 소스코드를 작성하여 실행한다.

       - external(외부) : 별도의 .js 파일로 작성해서 가져다가 실행하게 한다.

 

   1) inline 방식

        태그내에 직접 간단한 소스코드를 작성해서 실행되게 하는 방법 

        <태그 on이벤트명="해당 이벤트 발생시 실행할 소스코드">

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

 

   2) internal 방식

        script 태그 영역에 함수담위로 소스코드들을 작성해놓고, 이벤트 발생시 해당 함수 호출하여 실행하는 방식이다.

        - script 태그는 head 태그 body 태그 내에 다 작성이 가능하다.

<button id="btn1">알림창 출력</button>
<button onclick="btnClick()">console 출력</button>

<script>
   // script 태그 내에서 아이디를 통해 각 button 요소를 변수에 담기
   var btn1 = document.getElementById("btn1");

   // 해당 버튼을 클릭 했을 때의 이벤트 핸들러 연결해서 실행
   btn1.onclick = function () {
   	alert('버튼클릭');
    }

   function btnClick() {
     console.log('버튼클릭');
   }
</script>

 

   3) external 방식

        별도의 js 파일로 작성해서 가져다 사용하는 방법

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

         js/sample.js는 js파일이 있는 주소이다.

 

 

---

 

3가지 방식 모두 아래와 같은 버튼을 만들고

버튼을 클릭하면 아래와 같은 버튼클릭이라 쓰여져있는 알림창을 출력하게 한다.