1. 자바스크립트 시작

# 자바스크립트 기초
1. 자바스크립트(JavaScript)란?

자바스크립트(JavaScript) = 객체(object) 기반의 스크립트 언어 (주로 웹 브라우저에서 사용)
→ HTML = 웹의 내용을 작성, CSS = 웹을 디자인, 자바스크립트 = 웹의 동작을 구현

→ Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용가능
→ 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장

2. 자바스크립트의 역사
1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어짐
이름: 처음에는 모카(Mocha)라는 이름으로 개발 → 라이브스크립트(LiveScript) → 자바스크립트(JavaScript)

3. 자바스크립트의 특징
자바스크립트의 언어적 특징

• 객체 기반의 스크립트 언어
• 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
• 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능

참고 :
C언어와 같은 언어

: 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용
인터프리터 언어

: 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어
→ 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행

4. 자바와 자바스크립트
자바와 자바스크립트 : 그 이름만 놓고 보면 서로 관련이 있는 언어로 생각되기 쉬움
But 두 언어는 서로 직접적인 관련은 없으며, 비슷한 점보다는 다른 점이 훨씬 많음
→ 문법상 비슷한 부분은 두 언어의 문법이 모두 C언어를 기반으로 만들어졌기 때문

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

 

5. 자바스크립트 표준
1996년에 넷스케이프(Netscape)

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

→ ECMA는 ECMAScript라는 새로운 표준을 제정 & 그 첫 번째 버전인 ECMA-262를 1997년에 공표
→ ECMAScript는 자바스크립트뿐만 아니라 마이크로소프트의 JScript나 어도비의 액션스크립트도 따르는 국제 표준이 됨
→ 현재 자바스크립트의 최신 표준 = 2015년에 발표된 ECMAScript 6

 

# 자바스크립트 소개
자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일
: HTML의 '내용'을 변경 + HTML의 '속성'을 변경 + HTML의 '스타일'을 변경

 

# 자바스크립트 문법
1. 프로그램(program)이란?
프로그램 : 컴퓨터가 실행할 수 있는 명령(instruction)으로 이루어짐
실행문(statement) = 컴퓨터 프로그래밍에서 컴퓨터가 실행할 수 있는 명령들
→ 프로그램 = 특정 결과를 얻기 위해서 컴퓨터에 의해 실행되는 실행문의 집합

2. 자바스크립트 문법
자바스크립트의 실행문 : 세미콜론(;)으로 구분

var x = 10;
var result = x + 3;

 

 

변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용

var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.

 

 

3. 리터럴(literal)
리터럴 : 직접 표현되는 값 그 자체

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

 

 

4. 식별자(identifier)
식별자 : 변수나 함수의 이름을 작성할 때 사용하는 이름
→  영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용 가능 in 자바스크립트
→ 숫자로는 시작 불가능 (숫자와 식별자의 구별을 빠르게 하기 위함)
참고: 자바스크립트는 유니코드(unicode) 문자셋을 사용

5. 식별자 작성 방식
(1) Camel Case 방식

 : 식별자를 구성하는 여러 단어들 중 첫 번째 단어는 모두 소문자로 작성 & 그다음 단어부터는 첫 문자만 대문자로 작성
(2) Underscore Case 방식

 : 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결
→ 자바스크립트에서는 식별자를 작성할 때 관행적으로 Camel Case 방식을 많이 사용

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

 

참고 ) 자바스크립트에서 하이픈(-)은 뺄셈을 위해 예약된 키워드 → 식별자를 작성할 때는 사용 X

6. 키워드(keyword)
키워드(keyword), 예약어(reserved word)

: 특별한 용도로 사용하기 위해 미리 예약된 단어들
→ 키워드들은 프로그램 내에서 식별자로 사용 불가능

var firstVar = 10;      // var는 변수의 정의를 위해 예약된 키워드입니다.
function myFirstFunc {  // function은 함수의 정의를 위해 예약된 키워드입니다.
    var secondVar = 20; // var는 변수의 정의를 위해 예약된 키워드입니다.
}

 

 

7. 주석(comment)
주석(comment) : 코드 내에 삽입된 일종의 설명문
→ 작성자나 다른 개발자가 나중에 코드를 수정할 때 참고 가능 / 웹 페이지 개발 시 디버깅에도 사용됨
→ 주석은 자바스크립트 코드의 어느 부분에라도 작성 가능 / 웹 브라우저의 동작에는 전혀 영향 X
 
다음과 같은 두 가지 형식을 지원

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

var x = 10;
// var y = 20; 한 줄의 주석문 : 이 부분은 실행되지 않을 것입니다.
/*
x = x + y;
여러 줄의 주석문 :
이 부분 또한 실행되지 않을 것입니다.
*/
document.getElementById("text").innerHTML = x;

 

 

→ 자바스크립트에서 여러 줄 주석 안에 또 다른 주석을 삽입하는 예제

(1) 여러 줄 주석 내부에 또 다른 한 줄 주석을 삽입

/* 여러 줄
    // 이렇게 두 줄 주석 안에 또 다른 한 줄 주석을 삽입할 수 있습니다.
주석입니다. */

 

(2) 여러 줄 주석 내부에 또 다른 여러 줄 주석을 삽입 (불가능!)

/* 여러 줄
    /* 또 다른 여러 줄 주석입니다. */
주석입니다. */

 

여러 줄 주석 안에 또 다른 여러 줄 주석을 삽입

    → 삽입한 주석의 종료를 알려주는 기호(*/)를 첫 번째 주석이 자신의 종료를 알려주는 기호(*/)로 인식
    → 위의 예제에서 세 번째 라인은 주석으로 정상 인식 X

    → Uncaught SyntaxError가 발생

    → 실행중이던 스크립트는 중지될 것
 
→ 자바스크립트에서 여러 줄 주석은 절대로 중첩해서 사용 X

# 자바스크립트 출력
1. window.alert() 메소드

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

→ 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법

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

참고 : window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략 가능

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>

 

But 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행

    → 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력

    → document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 함

<button onclick="document.write(4 * 5)">버튼을 눌러보세요!</button>

 

 

4. console.log() 메소드
: 웹 브라우저의 콘솔을 통해 데이터를 출력
→ 대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용 가능
→ 이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 줌

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

 

 

# 자바스크립트 적용
1. 내부 자바스크립트 코드로 적용
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입 가능
→ 이렇게 삽입된 자바스크립트 코드는 HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치 가능

문법
<script>
    document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>

 

<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>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

 

외부 자바스크립트 파일을 사용

→ 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리
→ HTML 코드와 자바스크립트 코드를 각각 읽기도 편해짐 & 유지 보수도 쉬워짐
→ 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라짐