[JavaScript] 스크립트언어/ 자바스크립트 개념 / 장단점 / 소스코드 작성방식

 

1. Script Language(스크립트 언어)

 

1) 스크립트 언어란?

 

다른 응용소프트웨어에 삽입되어 동작하며, 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어

스크립트 언어는 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해줌

 

2) 비 스크립트언어와의 차이

 

• 비(非)스크립트 언어

- 컴파일(Compile) 된 후 독립적으로 작동하는 하나의 완전한 응용 프로그램

- 작성한 소스를 컴파일러를 통해 기계어코드로 변경하는 과정을 거쳐야만 실행가능한 파일이 얻어짐

- 실행 속도가 빠름, 컴파일 과정을 거쳐야하므로 개발 과정이 복잡함

- C, C++, Java 등

 

• 스크립트 언어:

- 다른 응용 프로그램 안에 삽입되어 해석되는 방식으로 작동

- 소스코드를 컴파일하지 않고 , 내장된 interpreter에 의해 번역되어 바로 실행 가능

- 컴파일 과정 없이 바로 실행가능하지만, 번역과정을 거쳐야하므로 다소 느림

- 빠른  성능이 필요하지 않은 웹 어플리케이션을 만드는데 주로 활용 

    -> server-side script: 소스실행 결과 확인을 위해 웹서버를 거쳐야 하는 스크립트

        (ASP, PHP, JSP, PYTHON, PERL, RUBY)        

       

    -> client-side script:내장된 번역기(인터넷 익스플로러등)에 의해 실행되는 스크립트

        서버를 거치지 않고 사용자쪽(웹서버에 접속한PC)에서 처리되는 스크립트

         (JavaScript, VBScript, JScript등)

 

- 자바스크립트(JavaScript), 제이쿼리(jQuery), JSP, PHP, ASP, 펄(Perl), 파이썬(Python), 루비(Ruby), 브이비스크립트(VBScript) 등

 

2. 자바스크립트란?

웹브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터"방식의 스크립트 언어
- 자바:
   컴파일방식 => 컴파일단계를 거치고 난 후 실행되는 개념
   => 오류를 바로 알 수 있다 (컴파일러)
- 자바스크립트:
    인터프리터방식 -> 컴파일단계를 거치지 않고 곧바로 실행되는 방식
   (브라우저에서 html문서가 로딩될 때 코드를 한 줄씩 읽어내는 방식)
인터프리터 방식-> 실행하면서 소스코드를 한 줄씩 읽어냄

자바는 엄밀히 따지면 컴파일+인터프리터방식 컴파일을 먼저 다 한 뒤 실행은 한줄씩...
-> 소스코드를 한 번 다 읽어내고 나서 프로그램이 컴파일 후 실행되므로
      코드상 문법적 오류가있다면 빨간줄로 알려줌

 

3. 장단점

- 장점

요소에 이벤트 발생시 코드를 한 줄씩 읽어나가며 수행되므로 수행속도가 빠름
간단한 코드 작성으로 초보자 접하기 쉬움(단순한 구조,원칙)
접근제한자 개념 없음
메소드 정의시 반환형 정의 안함
변수 선언시 자료형을 지정할 필요 없음(타입추론)

 

- 단점

웹 특화 기술:내부에서 제공되는 기술이 제한적임
HTML내 소스코드를 작성하므로 외부에 공개됨(개발자 도구 이용)
-> 보안에 취약점이 있을 수 있음

 

4. 자바스크립트 소스코드 작성 위치에 따른 종류

• 1)inline(인라인): 이벤트를 부여하고자하는 <요소 내>에 간단한 소스코드를 작성하여 실행되게 하는 방법
• 2)internal(내부): 해당 html문서 내에 script태그 영역에 소스코드를 작성하여 실행되게 하는 방법
• 3)external: 소스코드를 별도의 .js파일로 작성하여 script태그를 가져다 실행되게 하는 방법

1)inline방식

태그 내에서 직접적으로 실행할 간단한 소스코드를 작성하여 실행

주로 실행해야할 소스코드가 소량일 경우 사용

<태그명 이벤트속성="해당태그에 해당이벤트가 발생했을 시 실행할 소스코드">

 

    <!-- 버튼이 클릭되는 순간 알림창을 띄움: 이벤트속성-->
    <button onclick="window.alert('생일축하해')">버튼</button>
    <!-- 버튼이 클릭되는 순간  -->
    <button onclick="console.log('콘솔창')">콘솔창 출력</button>
    <!-- 콘솔창(개발자도그탭): 주로 디버깅할 용도 -->

2)internal(내부)방식

script태그 영역(<script></script>)에 함수단위로 소스코드를 작성해두고
어떤 요소에 어떤 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식

=>스크립트태그는 head body 태그내에 아무곳에 적어도 상관없음 / 여러개 사용가능

 

inline+내부방식

    <button onclick="abc();">알림창 나와라</button>
    <!-- 버튼이 클릭되는 순간(클릭이벤트가 발생하는 순간)알림창 띄워보기 -->
    <!-- 버튼을 클릭하면 abc함수가 호출됨 -->
    <!-- 인라인+내부방식 -->

    // 매개변수가 없는 단순한 함수만들기
    // abc라는 이름을 가진 함수 정의
    function abc(){
        // 해당 함수 호출시 실행할 코드기술
        window.alert('알림창 출동');
    }

순수내부방식

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

 var btn = document.getElementById('btn');
    btn.onclick = function(){ // 익명함수 (이름이 없는 함수, 해당이벤트 발생시 호출)
        //함수 호출시 실행할 코드
        console.log('ㅎㅎㅎㅎㅎㅎ');

        abc();// 함수내부에서 미리 정의된 선언함수는 호출이 가능, 없는함수를 부르면 콘솔창 에러
    }

    //2.선택요소의 이벤트 속성에 접근하여 해당 이벤트발생시 실행할 함수 대입

external(외부방식)

별도의 .js파일로 소스코드를 작성하고 해당 html문서에 가져다가 실행하는 방법

    <!-- 외부방식+인라인 -->
    <button onclick="test(); ";>알림창 출동</button>
    <!-- 함수여러개를 호출하려면 (); ();.... -->

function test(){
    window.alert('test');
}

 

 

 

 

Reference

https://jokergt.tistory.com/81 [Gun's Knowledge Base:티스토리]