1. JavaScript 개요

JavaScript는 웹 개발에서 필수적인 요소로, 웹 페이지에 동적 기능을 추가하는 스크립트 언어입니다. 이번 글에서는 JavaScript의 개요, 장단점, 그리고 기본적인 사용법에 대해 알아보겠습니다.

1. 스크립트 언어란?

스크립트 언어는 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용됩니다. 일반적으로 배우기 쉽고, 짧은 소스코드로 상호작용을 구현할 수 있도록 설계되어 있습니다.

2. JavaScript

JavaScript는 웹 브라우저에서 많이 사용되는 "인터프리터 방식"의 스크립트 언어입니다. 인터프리터 방식은 코드를 한 줄씩 읽어가며 바로 실행하는 방식으로, 실시간으로 텍스트를 분석해서 실행합니다. 이 방식은 문법 오류가 있는 경우, 실행 시점에서야 오류를 알려주는 특징이 있습니다.

<!-- JavaScript를 외부 파일로 불러오는 방법 -->
<script src="resources/js/sample.js"></script>

• 외부에서 JavaScript 파일을 불러와서 사용할 수 있습니다.

3. JavaScript의 장단점

장점

1. 빠른 수행 속도: 컴파일 과정 없이 인터프리터로 코드를 한 줄씩 읽어가며 바로 실행하기 때문에 수행 속도가 빠릅니다.
2. 쉽고 간단한 코드 작성: 코드 작성이 간단하여 초보자가 접하기 쉬운 구조를 가지고 있습니다.
   • 예: 접근 제한 개념이 없고, 변수 선언 시 자료형을 미리 정해둘 필요가 없습니다.

단점

1. 웹에 특화된 기술: JavaScript는 웹에 특화되어 있어 내부에서 제공하는 기능이 제한적입니다.
2. 보안 취약점: HTML 소스코드와 함께 작성되면 외부에 공개될 수 있어 보안 취약점이 발생할 수 있습니다.

4. JavaScript 사용법

JavaScript는 여러 가지 방법으로 웹 페이지에 포함될 수 있습니다. 여기서는 대표적인 세 가지 방법을 소개합니다.

1) Inline(인라인)

인라인 방식은 태그 내에서 간단한 소스코드를 작성하여 바로 실행되게 하는 방법입니다.

<!-- 인라인 방식으로 이벤트 처리 -->
<button onclick="window.alert('알림창 출력 버튼 클릭!')">알림창 출력</button>
<button onclick="console.log('콘솔창 출력 버튼 클릭!')">콘솔 출력</button>

• 버튼 클릭 시, alert와 console.log를 통해 각각 알림창과 콘솔에 메시지를 출력합니다.

2) Internal(내부)

Internal 방식은 HTML 문서 내의 <script> 태그 안에 JavaScript 코드를 작성하여 실행하는 방법입니다.

<!-- 내부 스크립트 작성 -->
<button id="btn">알림창 출력</button>
<button onclick="btnClick()">콘솔 출력</button>

<script>
    // 자바스크립트 영역
    // 이벤트를 부여할 요소를 선택하여 변수에 담기
    let btn = document.getElementById("btn");
    btn.onclick = function(){
        window.alert("알림창 출력 버튼 클릭");
    }
   
    // 함수 정의
    function btnClick(){
        console.log("콘솔 버튼 클릭");
    }
</script>

• getElementById 메서드를 사용해 버튼 요소를 선택하고, 클릭 이벤트를 부여합니다.
• btnClick 함수는 콘솔에 메시지를 출력합니다.

3) External(외부)

External 방식은 JavaScript 코드를 별도의 .js 파일로 작성하고, HTML 문서에서 해당 파일을 불러와 사용하는 방법입니다.

<!-- 외부 스크립트 파일 호출 -->
<button onclick="test()">알림창 출력</button>

• test() 함수는 외부의 sample.js 파일에서 정의된 함수로, 버튼 클릭 시 실행됩니다.