JavaScript 01. 자바스크립트 개요

1. 스크립트 언어란? 

프로그램의 동작을 사용자의 요구에 맞게 수행되게끔 해주는 용도 
매우 빠르게 배우고 짧은 소스코드로 상호작용되도록 고안됨

 

2. 자바 스크립트 

웹브라우저에서 많이 사용되는 "인터프리터" 방식의 스크립트 언어

-인터프리터방식:
코드를 한줄씩 읽어가면서 바로 실행하는 방식
실시간으로 텍스트를 분석해서 실행됨 -> 속도가 빠름 / 코드에 문법적 오류가 있으면 코드가 실행되는  시점에서 알려줌 
         

3. 자바스크립트의 장단점

* 장점

• 컴파일 과정 없이 인터프리터 코드를 한줄씩 읽어가며 바로 실행 되기때문에 수행속도가 빠름
• 코드 작성이 간단하기 때문에 초보자가 접하기 쉬움( 단순한 구조, 원칙)
   ex) 접근제한자의 개념 없음, 변수 선언시 자료형을 정해둘 필요 없음

* 단점

• 웹에 특화된 기술 => 내부에서 제공되는 기능이 다소 제한적
• html소스코드에서 같이 작성하면 외부에 공개됨=> 보안에 취약점 발생 

 

4. 자바스크립트 사용법

1) inline방식 : 태그내에 간단한 소스코드를 작성해서 실행되게 하는 방법 

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

</p>
    <button onclick="window.alert('알람창 출력버튼 클릭!!');">알람창 출력</button>
    <button onclick="console.log('콘솔출력버튼 클릭!')">콘솔창 출력</button>
    <br><br>

 

2) internal방식 : html문서 내 script태그 영역 안에 소스코드 작성 , head태그/body태그 어디에나 작성가능

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

    <script>
        // 이벤트를 부여하고자 하는 요소 선택해서 변수에 담기 
        var btn = document.getElementById("btn");
        // 해당 버튼요소에 마우스 클릭이라는 이벤트 발생시 실행할 함수(이벤트 핸들러)  정의
        btn.onclick= function(){
            window.alert("버튼 클릭");
        };

        //위쪽과는 다르게 나만의 함수 정의해보기(이름지어서)
        function btnClick(){
            console.log("버튼 클릭!!");
        };

    </script>

 

3) external방식 : 별도의 .js파일 소스코드를 작성해서 가져다 사용하는 방법