[JavaScript] 자바스크립트 기본 : 개요, 문법, 출력, 적용

728x90

자바스크립트 (JavaScript)

> 자바스크립트

: 객체 (object) 기반의 스크립트 언어

- HTML은 웹의 내용, CSS은 웹을 디자인, JS로는 웹의 동작을 구현한다

- 주로 웹 브라우저에서 사용되지만, Node.js 같은 프레임 워크를 사용하면 서버 프로그래밍에서도 사용할 수 있다

- 컴퓨터, 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다

> 자바스크립트의 역사

- 1995년 Netscape의 Brendan Eich에 의해 만들어졌다

- Mocha, LiveScript의 이름을 거쳐 JavaScript라는 이름으로 변경됨

> 자바스크립트의 특징

- 객체 기반의 스트립트 언어

- 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다

- 객체 지향형 프로그래밍과 함수형 프로그래밍 모두를 표현 가능하다

▶ 인터프리터 언어
C언어와 같은 언어는 소스 파일을 컴파일하여 실행 가능한 실행 파일(.exe)로 만들어 사용한다
반면, 인터프리터 언어는 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 말한다

> 자바와 자바 스크립트의 차이

자바	자바스크립트
컴파일 언어	인터프리터 언어
타입 검사를 엄격하게 함	타입을 명시하지 않음
클래스(class) 기반의 객체 지향 언어	프로토타입(prototype) 기반의 객체 지향 언어
C언어 기반으로 만들어져 문법이 비슷함

> 자바스크립트 표준

- 1996년 Netscape는 자바스크립트를 국제 표준안으로 만들기 위해 ECMA(European Computer Manufacturers Association)에 제출

- ECMAScript라는 새로운 표준을 재정. 이는 자바스크립트뿐만 아니라 JScript나 어도비의 액션스크립트도 따르는 국제표준이다

- 현재 자바스크립트의 최신 표준은 2015년 발표된 ECMAScript 6 이다

: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMA-262 - Ecma International

ECMAScript® 2020 language specification, 11th edition - ECMAScript is a programming language based on several technologies like JavaScript and JScript.

www.ecma-international.org

- 자바스크립트에 대한 자세한 설명은 모질라 개발자 사이트(MDN)을 참고하면 된다

: https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

JavaScript (JS)는 경량, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많

developer.mozilla.org

> 자바 스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일

1. HTML의 내용을 변경할 수 있다

2. HTML의 속성을 변경할 수 있다

3. HTML의 스타일을 변경할 수 있다

자바스크립트 문법

> 프로그램 (program)

: 특정 결과를 얻기 위해서 컴퓨터에 의해 실행되는 실행문의 집합

- 실행문 : 컴퓨터 프로그래밍에서 컴퓨터가 실행할 수 있는 명령들

> 자바스크립트 문법

- 세미콜론(;)으로 구분

- 대소문자를 구분하므로, 변수나 함수 이름, 예약어 등을 작성하거나 사용할 때 주의해야 한다

> 리터럴 (literal)

- 직접 표현되는 값 그 자체를 의미한다

12            // 숫자 리터럴
"JavaScript"  // 문자열 리터럴
'안녕하세요'  // 문자열 리터럴
true          // 불리언 리터럴

> 식별자 (identifier)

- 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다

- 영문자(대소문자), 숫자, 언더스코어(_), 달러($) 만을 사용할 수 있다

- 숫자로는 시작할 수 없다

- 자바스크립트는 유니코드(unicode) 문자셋을 사용

> 식별자 작성 방식

1. Camel Case 방식

- 식별자를 작성할 때 관행적으로 많이 사용

- 식별자가 여러 단어로 이루어질 경우, 첫 번째 단어는 모두 소문자로, 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식

2. Underscore Case 방식

- 식별자를 이루는 단어들을 소문자로만 작성하고, 단어들을 언더스코어(_)로 연결하는 방식

var firstVar = 10;           // Camel Case 방식
function my_first_func {     // Underscore Case 방식
    var firstLocalVar = 20;  // Camel Case 방식
}

> 키워드 (keyword)

- 자바스크립트는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약한다. 이렇게 미리 예약된 단어들을 키워드(keyword) 또는 예약어(reserved word)라고 한다

- 키워드는 프로그램 내에서 식별자로 사용할 수 없다

> 주석 (comment)

- 코드 내에 삽입된 일종의 설명문

- 나중에 코드를 수정할 때 참고할 수 있고, 웹 페이지 개발 시 디버깅에도 사용된다

- 코드의 어느 부분에도 작성할 수 있으며, 웹 브라우저의 동작에는 영향을 미치지 않는다

1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */

- 여러 줄 주석 안에 다른 한 줄 주석을 삽입할 수 있지만, 여러 줄 주석 내부에 또 다른 여러 줄 주석을 삽입할 수는 없다

자바스크립트 출력

- 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같다

1. window.alert() 메소드

- 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달한다

<script>
    function alertDialogBox() {
        alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
    }
</script>

2. HTML DOM 요소를 이용한 innerHTML 프로퍼티

- 가장 많이 사용되는 방법

- document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드로 HTML 요소를 선택한 후, innerHTML 프로퍼티를 이용하여 선택된 HTML 요소의 내용(content)나 속성(attribute) 값 등을 변경할 수 있다

<script>
    var str = document.getElementById("text");
    str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>

3. document.write() 메소드

- 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다

- 대부분 테스트나 디버깅을 위해 사용

<script>
    document.write(4 * 5);
</script>

- 웹 페이지의 모든 내용이 로딩된 후에 이 메소드가 실행되면, 로딩된 데이터를 모두 지우고 자신의 데이터를 출력하기 때문에 테스트 이외의 용도로 사용할 때에는 주의해야 한다

4. console.log() 메소드

- 웹 브라우저의 콘솔을 통해 데이터를 출력

- 콘솔 화면을 통한 데이터 출력은 더 자세한 사항까지 출력되므로, 디버깅에 많은 도움을 준다

- 대부분의 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하여 콘솔 화면을 사용할 수 있다

<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
    console.log(4 * 5);
</script>

자바스크립트 적용 방법

- HTML 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있다

1. 내부 자바스크립트 코드로 적용

- 자바스크립트 코드는 <script> 태그를 사용하여 HTML 문서 안에 삽입할 수 있다

- 삽입된 자바 스크립트 코드는 HTML 문서의 <head> 태그나 <body> 태크 또는 양쪽 모두에 위치할 수 있다

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

2. 외부 자바스크립트 파일로 적용

- 자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생상하여 삽입할 수 있다

- 외부 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다

- 해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script> 태그를 사용해 외부 자바스크립트 파일을 포함하면 된다

// example.js
function printDate() {
    document.getElementById("date").innerHTML = Date();
}

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

- 이러한 방식은 HTML 코드와 자바스크립트 코드를 각각 읽기도 편하고, 유지 보수도 쉬워진다

- 외부 자바스크립트 파일은 웹 브라우저가 미리 읽을 올 수 있어 웹 페이지의 로딩 속도 또한 빨라진다

[참고자료] http://tcpschool.com/javascript/intro