[JS] 01. JavaScript 개요

교육을 받으면서 FrontEnd와 관련 된 언어로 JS를 가장 먼저 배웠었다.

 

JavaSript?

JavaScript는 "스크립트 언어"이자 인터프리터 방식의 언어라고 한다.

인터프리터 방식이라하면 한 줄씩 읽어가며 실행하는 방식이다. 

 

JS 장점?

자바스크립트의 장점으로는 인터프리터 방식으로 한줄씩 실행되기 때문에 수행속도가 빠르다.

또한 코드 작성이 간단한 편으로 초보자가 접하기 쉽다고 한다.

 

그 중에서 내가 생각하는 장점 중 하나는 바로 접근제한자의 개념이 없다던가 , 변수를 선언 할 때 자료형을 선언할 필요가 없다는 점이었다.

 

JS사용법

1) 인라인 사용법(inline)

 인라인 사용법은 주로 소스코드가 소량일 경우 주로 사용한다.

예시를 간단하게 들면

<button onclick="window.alert('알람창 출력')">알람창 출력</button>

button 태그 내에서 onclick을 사용하여 alert창을 출력하는 방식이라고 할 수 있다.

 

2) 내부(internal) 방식

 내부 방식은 HTML 내에 <script>  태그를 선언하여 사용하는 방식이다. 

인라인 방식과의 차이점으로는 인라인은 해당 이벤트가 일어나는 태그 내에서 사용하는 반면,

내부 방식은 <script>내부에서 우리가 구현 할 기능의 코드를 작성하는 것이라 생각하면 되겠다.

 

간단한 예시를 살펴보면

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

 <script>
    // 자바스크립트 영역에서 주석

    // 1. 이벤트를 부여하고자 하는 요소 선택해서 변수에 담아두기
    var btn = document.getElementById("btn");

    // 2. 해당 버튼 요소에 클릭이벤트 발생 시 실행할 함수 정의
    // 2-1. 익명함수
    btn.onclick = function() {
        window.alert("버튼 클릭");
    }

    // 2-2. 이름있는 함수
    function btnClick() {
        console.log("콘솔버튼 클릭");
    }
 </script>

 코드와 같이 두가지 방법이 있다.

 

첫번째는 id 를 부여하여 script 태그 내에서 2-1 방법과 같이 사용하는 방법

두번째는 2-2와 같이 함수를 선언하여 script 태그 내에서 함수를 정의하는 방법이다.

 

3) 외부(external) 방식

 외부 방식은 기존의 방법과 다르게 애초에 .js 파일을 만들어서 사용하는 방식이다.