자바스크립트란?

웹은 크게 3요소

        - html : 웹 문서의 큰 틀을 잡기 위한 요소
        - css  : html로 구성된 DOM에 다양한 스타일을 적용하기 위한 요소
        - javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 할 기능(동작) 처리하기 위한 요소

자바스크립트 개요

1. 스크립트 언어란 ?

 프로그램의 동작을 사용자 요구에 맞게 수행하도록 해주는 용도

 빠르게 배울 수 있고 짧은 소스코드로 상호작용 되도록 고안됨

2. 자바스크립트

웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
=> 인터프리터 방식 : 코드를 한줄씩 읽어가며 바로 실행하는 방식 (실시간으로 텍스트 분석해서 실행됨)
-> 코드에 문법 오류가 있으면 실행 시점에 알 수 있음

3. 장단점

* 장점

컴파일 과정 없이 인터프리터로 코드를 한줄씩 읽어가면서 바로 실행되기 때문에 수행속도가 빠름

코드 작성이 간단해서 초보자에게 접하기 수월하다. (단순한 구조, 원칙/규칙)

ex) 접근제한자 개념 없음, 변수 선언 시 자료형을 정해줄 필요 없음

* 단점

웹에 특화된 기술 -> 내부에서 제공하는 기능이 제한적

html 소스코드 내에 작성하면 외부에 공개됨 -> 보안취약점 발생

4. 자바스크립트 사용법

inline(인라인) : 태그 내에 간단한 소스코드를 작성해서 실행하는 방법

internal(내부) : html 문서 내에 소스코드를 작성해서 실행하는 방법 (script 태그)

external(외부) : 별도의 .js 파일로 소스코드를 작성해서 현재 문서에 연결하여 실행하는 방법

1) 인라인 (inline)

[표현법] 태그명 on이벤트명="해당 요소의 이벤트 발생 시 실행할 코드"

소스코드가 소량일 경우(간단한 경우) 인라인방식으로 사용
-><button onclick='window.alert("Hello, javascript!")'>알림창 출력</button>
<button onclick="console.log('콘솔에 출력할거야!!!!!!')">콘솔에 출력</button>

2) 내부 (internal)

script 태그 영역 안에 소스코드를 작성
 -> head 태그, body 태그 내에 모두 작성 가능!

 <button id="btn">알림창 출력</button>
 <button onclick="btnClick()">콘솔에 출력</button>

    <script>
        // 자바스크립트 영역 -------------------------
        // 한줄 주석
        /*
           여러줄 주석
        */

        // 현재 문서에서 요소를 선택하여 변수에 담아두기
        let btn = document.getElementById("btn");
        btn.onclick = function() {      // 이름이 없는 함수(익명함수)
            window.alert("스크립트에서 실행했어요~~");
        }

        // 함수의 이름을 부여하여 정의
        function btnClick() {
            console.log("스크립트에서 출력한다~~");
        }
    </script>

3) 외부 (external)

외부 파일(.js)을 작성하여 현재 문서에 연결
script 태그를 이용하여 연결!

<script src="resources/js/01_sample.js"></script>

<button onclick="test()">알림창 출력</button>
<button id="btn2">콘솔창 출력</button>