14 개방형 도구 - 자바스크립트

14 개방형 도구 - 자바스크립트

자바스크립트 JavaScript의 기초

1. 자바스크립트의 소개

자바스크립트의 기초

자바스크립트에 대해 살펴보겠습니다. 개인 컴퓨터가 등장하였을 때 컴퓨터 시스템을 구동시키는 소프트웨어를 작성하기 위한 언어로 베이직이 있었습니다. 이와 마찬가지로 사물인터넷에서도 사물을 동작하게 하는 프로그래밍 언어가 있어야 하는데, 그중에서도 자바스크립트가 대표적입니다.

자바스크립트란 프로그래밍 언어로, 정확히는 클라이언트 사이드스크립트 언어(Client-side Script Language)에 해당됩니다. 대부분의 웹 브라우저에 인터프리터가 내장되어 있기 때문에, 메모장이나 텍스트 에디터로 편집하여 HTML 문서 내에 삽입된 형태로 저장을 하면 사용자의 PC에 있는 웹 브라우저에서 스크립트를 해석하여 화면에 결과를 보여줍니다.

오늘날 자바스크립트의 주된 용도는 동적 웹 페이지 제작으로 웹 페이지상의 구성 요소를 제어하기 위한 용도로 사용합니다.

HTML,CSS와 함께 웹을 구성하는 요소의 하나인데, HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 자바스크립트는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당합니다.

웹 브라우저에서 주로 사용되던 자바스크립트는 이제 서버로 그 영역이 확장되어 사용되고 있습니다.

자바스크립트의 특징을 정리해보면, 웹에서 성장하였으며 클래스 개념이 없는 언어로 일급함수를 사용할 수 있으며 동적 언어입니다.

2. 자바스크립트의 구성

자바스크립트는 객체, 문법, 이벤트로 구성됩니다. 객체는 속성과 메소드를 지니며, 종류에는 사용자 정의 객체, 내장 객체, 브라우저 객체가 있습니다. 문법에는 자료형, 변수, 제어문, 함수 등이 있으며, 이벤트는 웹 브라우저상에서 일어날 수 있는 동작으로 이벤트 핸들러를 통해 지정됩니다. 자바스크립트의 구성 중 객체에 대해 알아보도록 하겠습니다. 프로그램에서다루는 것은 대부분 객체입니다. 각각의 객체는 고유한 속성과 메소드를 가지고 있는데, 속성이란 각각을 이루고 있는 성질, 객체의 크기나, 색깔이나, 그 위에 씌워진 글귀 등 모든 특징을 총칭하며, 메소드란 그 각각의 객체가 할 수 있는 일을 뜻합니다.

자바스크립트의 기본적인 문법을 살펴보면, 값, 변수명, 문자열로 나누어 볼 수 있습니다. 값에는 정수, 실수를 포함한 숫자와 ‘Hello World’와 같은 문자열, 참/거짓을 나타내는 논리값과 null 등이 있습니다. 변수명은 항상 문자나 언더바(_)로 시작해야 하며, 두 번째 문자부터는 영문 알파벳과 언더바(_), 숫자로 구성됩니다. 변수명에 대한 대, 소문자 구분하므로 주의할 필요가 있습니다. 문자열은 값을 표현하는 방법으로 문장 표현, 연산자, 문장 설명 등으로 표현합니다.

이벤트란 어떠한 조치나 행동을 필요로 하는 사건이 발생했음을 의미하는 것입니다. 즉, 각각의 객체가 어떠한 일을 당했을 때 자동적으로 일어나는 메소드나 속성의 변화를 말합니다. 예를 들면, 버튼을 클릭하는 것이나 버튼 위로 마우스 커서를 가져간 것 등이 이벤트가 될 수 있습니다. 이와 같은 이벤트가 중요한 이유는, 프로그래머가 특정한 이벤트가 발생했을 경우 그것에 상응하는 조치를 해줄 수 있기 때문인데, 이것을 이벤트 핸들링이라고 합니다.

3. 값의 타입

자바스크립트 문법의 기초가 되는 값의 타입에 대해 살펴보겠습니다. 자바스크립트 프로그램은 어떠한 값을 다루고 해당 값은 모두 타입을 가지고 있는데, 그 내용은 다음과 같이 수, 문자열, 부울, 기호, 객체, 널, 그리고 정의되지 않으므로 나눌 수 있습니다. 객체에는 함수, 배열, 날짜, 정규식이 포함됩니다.

수는 이중정밀도 64비트 형식 IEEE 754 값으로 정의합니다. 덧셈, 뺄셈, 계수 등 연산을 포함하는 표준 산술 연산자가 지원됩니다. 그리고 내장 함수 parseInt()를 사용하여 문자열을 정수로 변환할 수 있습니다. 옵션으로 주어지는 두 번째 매개변수를 밑으로 하여 2진수, 8진수, 10진수 등의 변환이 가능합니다. 또한, 문자열이 수가 아닌 경우 ‘Not a Number’의 약자인 NaN을 출력하는데, 이것은 수가 아님을 뜻합니다. 수 값은 표준 산술 연산자뿐 아니라 고급 수학 함수와 상수를 다루기 위해 ‘수학(Math)’ 내장 객체를 사용하기도 합니다. 수학 객체의 메소드에는 다음과 같은 것들이 있습니다.

문자열은 이름 그대로 문자를 나열한 것으로, 각각 16비트로 표현된 유니코드 문자들이 길게 이어져 있는 것을 뜻합니다.

한 개의문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다. 만약, 문자열의 길이를 알고 싶다면, 해당 문자열의length 속성에 접근하면 됩니다. 문자열도 역시 객체로 취급되는데, 문자열을 취급하는 객체는 스트링(String)객체입니다. 글자의 모양을 지정하거나 문자열을 처리하기 위한 객체로 다양한 속성과 메소드를 이용하여 글자의 모양이나 하이퍼링크 등을 설정합니다.

부울, 혹은 블린으로 불리우는 부울 값은 참(true), 또는 거짓(false)으로 나타내는 논리형 데이터를 말합니다.

다음과 같은 규칙에 따라 어떤 임의의 값을 부울 값으로 변환할 수 있습니다. 우선, false,?0, 따옴표만으로 이루어진 빈 문자열, 수가 아님을 뜻하는?NaN,?null과?정의되지 않은 undefined는 모두 거짓값이 됩니다. 반면 참값은 위에 제시된 거짓값을 제외한 나머지 모든 값이며, “0”, “false”라는 단어 또한 문자열로 참값이 됩니다.

수, 문자열, 부울 값 외에 널(Null)과 정의되지 않음(Undefined) 값이 있습니다. 널은 의도적으로 값이 없음을 가리키는 객체이며, Undefined, 즉 정의되지 않음은 초기화되지 않은 값으로 아직 어떤 값도 할당되지 않은 변수임을 가리킵니다. 자바스크립트에서는 변수에 값을 주지 않고 선언하는 것이 가능한데, 이 경우 변수의 타입이 바로 Undefined가 되는 것입니다.

4. 변수

자바스크립트의 변수에 대해 살펴보도록 하겠습니다. 변수란 데이터 값을 저장하는 기억공간을 말합니다. 일반적으로 ‘변수명 = 값’의 형식으로 사용됩니다. 변수는 일반적으로 다음과 같은 형태로 이름을 정할 수 있습니다.

첫째, 영문자, 숫자 그리고 언더바(_)를 조합하여 만들 수 있습니다. 둘째, 첫 글자는 반드시 영문자나 언더바(_)를 사용해야 합니다. 셋째, 영문자는 대소문자를 철저히 구분합니다. 넷째, 변수명에는 공백이 들어가면 안됩니다. 마지막으로 미리 정해진 예약어는 사용하면 안됩니다. 변수로 사용할 수 없는 예약어를 살펴보겠습니다. 예약어란 자바스크립트 내에 특별한 의미를 담고 있으며 문법을 구성하는 요소로 일반적으로 사용할 수 없는 단어들을 말합니다. 예약어의 종류에는 다음과 같은 것들이

있습니다. 표로 정리된 단어를 살펴보세요.

자바스크립트에서 새로운 변수는 var 키워드로 선언됩니다. 변수의 선언은 필요한 곳에서 사용만 하면 자동적으로 생성되기 때문에 변수를 굳이 미리 선언할 필요는 없습니다. 값을 넣는 순간 자료형도 자동으로 결정되는데, 변수에 아무런 값을 주지 않고 선언하면 해당 변수의 타입은 ‘정의되지 않음’이 됩니다. 변수 선언의 예는 다음과 같습니다.  

5. 객체 생성

자바스크립트에서 객체를 생성하는 방법에 대해 살펴보도록 하겠습니다. 자바스크립트는 동적으로 객체를 만들 수 있으므로 빈 객체에서 출발합니다. 빈 객체를 만드는 방법에는 세 가지가 있습니다. 첫 번째는 new Object()를 사용하는 방법이고,

두 번째는 {}를 사용하는 방법입니다. 이 방법은 객체 리터럴 구문이라고도 부르며 간결하고 편리하다는 장점이 있습니다.

세 번째는 object(Object.prototype)을 사용하는 방법입니다. 객체 리터럴 구문을 살펴보면, 객체 변수의 선언을 다음의

예시와 같이 나타낼 수 있습니다.

각각 이름, 별명, 학년, 나이 등에 부여한 값을 확인할 수 있습니다. 다시 말해, 변수 키와 값이 한 쌍을 이루는데, 이러한 것들의 집합으로 볼 수 있습니다. 이 구문은 아래와 같이 사용되기도 합니다.

오브젝트 프로토타입 구문을 사용하여 객체를 만들 수 있습니다. 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는데, 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라고 합니다.

즉, 자바나 PHP에서 말하는 Class가 바로 자바스크립트의 프로토타입과 동일한 의미입니다.

다음과 같은 구문을 예로 들면, 먼저, 빈 함수 객체를 만들고 prototype에 매개변수의 참조값을 지정합니다. 매개변수 객체의 constructor 값이 리턴하는 함수 객체를 가리키도록 하는 내용입니다. 실제 함수를 호출하려면 그림과 같이 newobject 객체는 obj를 prototype 속성이 참조하고 있어서 obj 객체의 속성이나 메소드를 참조할 수 있습니다.

자바스크립트에서 객체를 생성하는 방법으로 함수를 이용한 싱글톤을 사용할 수 있습니다. 싱글톤이란 생성하고자 하는 인스턴스의 수를 오직 하나로 제한하는 디자인 패턴을 말합니다. 사실 자바스크립트는 클래스가 없기 때문에 객체는 다른 객체와 같지 않아 이미 그 자체로 싱글톤이라고 할 수 있습니다. 사용 예시는 다음과 같습니다.

싱글톤의 특징을 살펴보면, 객체 자체에는 접근이 불가능하고, 객체에 대한 접근자를 사용해서 실제 객체를 제어할 수 있으며, 객체는 단 하나만 만들어져 해당 객체를 공유합니다.

6. 함수

함수는 객체와 마찬가지로, 자바스크립트를 이해하는데 핵심이 됩니다. 일반적인 함수 선언으로 다음과 같은 방법이 사용됩니다.

함수 객체는 이름과 매개변수, 구문으로 정의됩니다. 자바스크립트에서는 함수 리터럴이라고 하는 별도의 정의 방법이 있는데, 명령문 대신 표현 식에서 선언하는 이름이 지정되지 않은 함수를 말합니다.

함수 리터럴은 함수를 임시로 사용해야 하거나 표현 식을 대신 사용할 수 있는 코드에서 함수를 사용해야 하는 경우에 유용합니다. 함수 리터럴의 구문은 다음과 같습니다. 자바스크립트 함수 객체는 Arguments 객체로, 따로 동적으로 사용할 수 있습니다. 함수 객체를 정의할 때 명시적으로 표현하지 않아도 Arguments 객체를 통하여 동적으로 전달받을 수 있습니다.

그 예는 다음과 같습니다.