[JavaScript] 1. 개요

1. 웹의 3요소

- HTML : 웹 문서의 뼈대를 잡음

- CSS : 스타일을 입힘(색상, 테두리, 디자인 ...)

- JavaScript : 웹 문서상에 이벤트가 발생했을 때 실행해야할 동작을 처리(동적인 효과)

 

 

2. 자바스크립트 개요

1) 자바스크립트 언어란?

프로그램의 동작을 사용자(클라이언트)의 요구에 맞게 수행되도록 해주는 용도. 매우 빠르게 배우고 소스코드로 상호 작용되도록 고안됨.

 

2) 자바스크립트란?

▶ 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터" 방식의 스크립트 언어

- 자바 : 컴파일 방식 → 컴파일 과정을 거치고 나서 실행이 된다.

- 자바스크립트 : 인터프리터 방식 → 컴파일을 거치지 않고 곧바로 실행이 된다. (브라우저 html 문서가 로딩될 때 코드를 한줄씩 읽어내는 방식)

 

 

▶ 자바는 컴파일 방식 + 인터프리터방식 이라는 의견 => 소스코드를 한번 다 읽고나서 프로그램 실행.

.java => .class(컴파일) => 실행 => 인터프리터방식으로 한줄씩 실행 => 컴파일 방식은 코드상에 문법적인 에러를 컴파일단계에서 빨간 밑줄로 알려준다.

 

 

▶ 인터프리터 방식

- 실행되면서 소스코드를 한줄씩 읽어내면서 바로 실행(실시간으로 텍스트를 분석해서 실행됨)

- 코드상에 문법적인 문제가 있다면 바로 알려주지 않고 실행지점에서 알려줌(자바에 비해 오류찾기 힘들다)

 

 

3. 장단점

▶ 장점

- 요소에 이벤트가 발생했을 때 코드를 한줄씩 읽어나가면서 수행되기 때문에 수행속도가 빠름

- 간단한 코드 작성으로 초보자가 접하기 쉬운 언어(단순한 구조, 원칙)

ex)접근제한자의 개념 x, 메소드 정의시 반환형 x, 변수 선언시 자료형지정 x

 

 

▶ 단점

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

- HTML 내에 소스코드를 작성하게 되면 외부에 공개됨

 

 

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

- inline(인라인) : 이벤트를 부여하고자하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법

- internal(내부) : 현재 html문서 내에 script 태그 영역에 소스코드를 작성해서 실행되게 하는 방법

- external(외부) : 소스코드들을 별도의 .js 파일로 작성해서 가져다가 실행되게 하는 방법

 

 

1) inline(인라인) 

- 태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행시킴.

- 주로 실행해야 되는 소스코드가 매우 소량일 경우 사용

 

[표현법]
<태그명 이벤트속성="해당 요소에 해당 이벤트가 발생했을 때 실행할 소스코드">

 

&lt; &gt;  => <> 을 의미함

 

'zzz' 콘솔창에 출력됨

 

 

2) internal(내부) 방식

- script 태그 영역에 함수단위로 소스코드들을 작성해 놓고 어떤 요소에 어떤 이벤트 발생시 해당 함수를 호출함으로써 실행시키는 방식
=> script태그는 html페이지 어느위치에든 다 작성 가능하다

 

- script 태그 안에는 자바스크립트 소스코드를 기술할 수 있는 영역이다. 주석은 자바와 동일하다.

- script 태그는 일반적으로 파일 하단에 작성하는 것을 권장함

 

▶ 인라인방식 + 내부방식

    <button onclick="abc()">알람창 출력</button>

 

▶ 내부방식

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

 

 

 

■ 01_개요.html 파일 body태그안에 script태그

    <!-- 인라인방식 + 내부방식 -->
    <button onclick="abc()">알람창 출력</button>

    <!-- 내부방식 -->
    <button id="btn">콘솔창 출력</button>
    

    <script>
        // 자바스크립트 소스코드를 기술할 수 있는 영역
        /*
            여러줄 주석 => 주석은 자바와 동일하다.
        */

        // 매개변수 없는 단순한 함수 만들기
        // abc라는 이름의 함수를 선언(선언적 함수라고 부름)
        function abc(){
            // 현재 함수가 호출시 실행할 코드를 기술하는 영역
            window.alert('버튼 클릭 !');
        }

        // 1) 이벤트를 적용시키고자하는 요소 객체를 선택
        var btn = document.getElementById("btn"); 
        console.log(btn);

        // 2) 선택된 요소의 이벤트 속성에 접근해서 해당 이벤트 발생시 실행시킬 함수를 대입
        btn.onclick = function () {  /* 익명함수(이름이 없는 함수) */
            abc(); // 익명함수 내부에 미리 정의된 선언적 함수 호출 가능
        }
    </script>

 

 

☞ 위에 두 button 태그를 출력해보면...

 

 

 

 

3) external(외부)방식

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

 

 

■ 01_개요.html 파일

    <button onclick="test();">알림창 출력</button>

 

☞ 내가 가져다 쓸 외부 .js파일을 script 태그의 src 속성으로 연결시켜준다.

    <script src="resources/js/test.js"></script>

 

 

■ test.js 파일

function test(){

    window.alert('외부방식 실행');

}