자바스크립트 개요
1995년 넷스케이프(상업적으로 성공한 웹 브라우저)사의 브랜든 아이크라는 분에 의해서 자바스크립트가 등장하게 됩니다.
자바스크립트는 정적인 문서를 동적으로 사용자와 상호작용하는 복합적인 역할을 담당하고 있습니다.
처음에 자바스크립트는 웹이라는 울타리안에 있었고 나쁘게 얘기하면 웹이라는 감옥에 갖혀있었다라고도 얘기할 수 있습니다.
최초에 자바스크립트 등장했을 때는 웹에서만 동작할 수 있었기 때문입니다.
지금만큼 웹이라는 환경이 중요하지 않았던 시대에는 자바스크립의 효용이나 가치가 지금만큼 크지는 않았습니다.
자바스크립트를 만든 철학은 누구나 쉽게 접근하여 개발할 수 있는 언어로 만들기 위한 바탕에서 출발했었기 때문에 전문적인 개발자 입장에서 다른 언어에 비해 너무 부족한 언어라고 여겼고 그 개발자들의 시선은 자바스크립에 냉대했으며 천대받은 측면이 있었습니다.
자바스크립트에 대한 관점이 변화하기 시작한 사건이 있었는데 2004년도에 구글이 만든 GMAIL 서비스가 발표되었습니다.
이 지메일은 순수한 웹 기술로만 만든 웹 애플리케이션이었는데 그 애플리케이션의 기능성이 상당히 뛰어났는데 그 중심에는 자바스크립트가 있었습니다.
그때부터 서서히 개발자들이 관심을 갖기 시작했고 그 이후에 구글은 또다시 지도서비스인 구글맵을 오픈하게 됩니다.
이 구글맵은 전세계의 모든 지형도가 담겨있는 거대한 데이터를 순수한 웹 기술로만으로 웹을 통해서 서비스를 하였고 이에 수많은 개발자들은 다시한번 큰 변화를 실감하게 됩니다.
이때부터 본격적으로 자바스크립트가 재조명되기 시작됩니다.
그리고 2008년 구글에 의해서 또 한번의 큰 사건이 일어나는데 그것은 구글 크롬 웹브라우저를 발표하면서 그 브라우저의 성능을 높이기 위해 자바스크립트 엔진을 직접 개발했는데 그 엔진의 이름이 V8 엔진입니다.
그리고 구글은 이 엔진을 개발한 소스를 오픈소스로서 공개해 버립니다.
이 V8 엔진을 만들기란 대단히 어려운 일이지만 구글이 오픈소스로 공개함으로써 많은 개발자가 이것을 가져다 사용하면서 자신들의 시스템을 자바스크립트로 프로그래밍할 수 있는 길이 열리게 되었습니다.
이 이후로 자바스크립트는 웹이 아닌 곳에서도 사용하게 되는 전환점을 맞이하게 됩니다.
다시 말해서 자바스크립트라는 기술이 웹이라는 테두리 안에 국한되는 것이 아니라 탈웹화되는 현상이 가속화되기 시작합니다.
이때부터 자바스크립트는 승승장구를 하면서 현재까지 자바스크립트 전성시대를 누리고 있으며 개발언어중 탑5에 지속적으로 랭크될 정도의 인기 언어로서의 스크립팅 언어입니다.
브라우저와 자바스크립트
Model-View-Controller 구조에서 HTML 은 데이터인 Model 을, CSS 는 화면을 구성하는 View 를 처리한다면 마지막으로
javaScript 는 브라우저라는 작은 세계에서
Controller 의 역할을 수행합니다.
자바스크립트의 스크립트(Script)라는 단어의 의미는 영화나 연설등에 사용하는 원고를 의미합니다.
원래 스크립트라는 단어는 연극 대본을 의미합니다.
즉, 연설자나 배우가 어떤 장면에서 어떻게 해야 하는지를 알려주는 내용입니다.
이러한 스크립트를 받은 사람은 스크립트를 보면서 자신이 어떻게 행동해야 하는지를 판단하게 되는데 이러한 작업을 해석(Interpreter)한다고 표현합니다.
이런 의미에서 스크립트 언어들은 작업을 지시하는 대본 정도의 의미가 있습니다.
자바스크립트를 이런 의미로 생각해보자면 HTML 문서를 표현하는 브라우저에게 부탁하는 작업 명세서(대본)라고 할 수 있습니다.
브라우저들은 각자 자바스크립트 해석기를 가지고 있으며 이를 이용해서 HTML 에 선언되거나 링크로 처리된 자바스크립트를 해석하게 됩니다.
HTML 에는 <script> 라는 태그를 통해 이 부분을 스크립트가 들어 있으니 별도로 처라하라는 식으로 브라우저에게 지시하게 됩니다.
자바스크립트의 실행시점
브라우저는 HTML 데이터를 만나면 HTML 파서를 이용해서 파싱을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="example.js"></script>
</head>
<body>
<img src="/images/sample.png" alt="">
<script>
alert('경고창을 출력합니다.');
</script>
<ul>
<li>HTML 을 파싱</li>
<li>외부 CSS파일 및 외부 자바스크립트 파일을 로드</li>
<li>자바스크립트가 전달된 시점에 실행</li>
<li>DOM 트리의 구축 완료</li>
<li>이미지 파일 및 플래시 등의 외부 리소스를 로드</li>
<li>모두 완료</li>
</ul>
</body>
</html>여기서 중요한 사실은 HTML 데이터는 DOM 트리로 구성되어서 나중에 처리되는 반면에 <script> 태그의 내용은 바로(즉시) 해석(interpret)되어 실행된다는 것입니다.
위 코드에 alert() 이라는 경고 창을 띄우기에 앞서 <script> 태그를 만나고 있으며 이렇게 되면 브라우저는
<script> 태그를 해석하기 위해서 브라우저 내부의 컴포넌트 중의 하나인
자바스크립트 해석기(혹은 자바스크립트 엔진)에게 처리를 의뢰하게 됩니다.
자바스크립트 엔진은 이 내용을 해석하고 즉시 실행합니다.
즉시라고 표현한 것에 주의할 필요가 있습니다.
DOM 트리를 모두 구성하여 완료된 시점에 동작하는 것이 아니라 바로 실행되기 때문에 뒤에서 작성된 데이터는 그 이후에 로드되게 됩니다.
자바스크립트 코드를 문서 마지막에 위치시키는 이유
현재도 자바스크립트를 CSS와 같이 HTML 상단에 위치시키는 것이 일반적이지만 가끔 다른 소스를 살펴보면 자바스크립트 코드가 HTML 문서의 하단에 위치한 것을 볼 수 있습니다.
자바스크립트는 그 실행 자체가 모든 작업을 멈추고 처리를 하는 방식으로 동작하기 때문에 가능하면 DOM 트리를 최대한 진행한 다음에 자바스크립트를 실행,동작하도록 하게 하는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 실행 시점</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="/images/sample.png" alt="">
<ul>
<li>HTML 을 파싱</li>
<li>외부 CSS파일 및 외부 자바스크립트 파일을 로드</li>
<li>자바스크립트가 전달된 시점에 실행</li>
<li>DOM 트리의 구축 완료</li>
<li>이미지 파일 및 플래시 등의 외부 리소스를 로드</li>
<li>모두 완료</li>
</ul>
<script src="script-01.js"></script>
<script src="script-02.js"></script>
</body>
</html>jquery 를 이용하는 경우에 $(document).ready() 메서드를 이용하는 것이 DOM 구성이 끝난 상태에 이벤트를 감자하고 동작해서 자바스크립트의 실행으로 인한 성능 저하를 막으려는 것과 비슷한 맥락으로 이해할 수 있습니다.
CSS 가 HTML 문서 상단에 위치해야 하는 이유
어떠한 프로그래밍이건 코딩 컨벤션(코딩규칙,관례)이라는 것이 있습니다.
HTML 에서는 일반적으로 CSS 선언을 HTML 문서 상단인 head 안에 위치시키게 되는데 그 이유는 CSS 를 이용해서 렌더링 엔진이 화면에서 어떤 방식으로 처리(보이거나 안보이게 혹은 어떤 색상을 사용할 지..)하는가 하는 기준을 빨리 제공할수록 렌더 트리를 구성하기 쉬워지기 때문입니다.
브라우저가 전달받은 HTML 은 항상 맨 위에서부터 차례대로 처리됩니다.
따라서 렌더링 엔진이 참고할 수 있는 부분을 상단에 두면 화면에서의 "선별 기준"을 미리 파악할 수 있도록 하게 할 수 있는 것입니다.
실제로 렌더링 엔진이 본격적으로 작업하는 부분이 바로 화면에 나오는 <body> 태그이기 때문에 특별한 경우가 아니라면
<body> 태그가 나오기 전에 CSS 를 지정하는 것이 일반적입니다.
JavaScript 의 라이브러리인 jQuery란?
- jQuery 창시자인 존 레식(John Resig)이 2006년에 첫 번째 버전을 배포
- Javascript 를 어떻게 하면 쉽게 이용할 수 있을 것인지에 고민으로부터 시작
- 여러 개의 자바스크립트 라이브러리(Javascript library) 중 하나로 출발
( 라이브러리란 자주사용되는 기능 또는 구현하기 어려운 기능들을 하나로 묶어서 만들어 놓은 코드창고 )
jQuery가 가장 널리 알려주는 기술로 자리잡을 수 있었던 이유는 웹 브라우저에 따라 일부 다르게 작동하는 Javascript 가 jQuery 라이브러리를 이용하여 동일하게 작동하도록 크로스 브라우징을 구현하면서도 쉽고 빠르게 작성할 수 있기 때문입니다.
jQuery를 공부하기 위한 선수 학습
- HTML/CSS
- javaScript Core
- DOM(Document Object Model)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert & console.log</title>
<link rel="stylesheet" href="style.css">
<!-- 라이브러리 경로를 작성 -->
<script src="js/libs/jquery-2.2.4.min.js"></script>
<!-- 사용자 정의 스크립트를 작성 -->
<script src="js/debug.js"></script>
</head>
<body>
<script>
// 작업할 JavaScript 공간이며 스크립트 태그 내에 작성하는 것은 내부(internal) 스크립트라고 한다.
alert('Hello World');
// 한줄 주석
/*
멀티라인 주석
CSS 주석과 동일하다.
*/
</script>
</body>
</html>Deburgging - console, alert
디버깅이란 컴퓨터 분야에서 디버깅이란 컴퓨터 프로그램이나 하드웨어 장치에서 잘못된 부분, 즉 버그를 찾아서 수정하거나 또는 에러를 피해나가는 처리과정입니다.
프로그램이나 하드웨어 장치의 결함을 제거하기 위해서는 문제가 되는 부분을 분리시킨 후 수정해야 합니다. 프로그램이 디버깅되었다거나 프로그램의 결함을 해결하였다는 것은 더 이상의 잘못된 부분이 없다는 것을 의미합니다.
다시말해, 프로그램의 버그를 고치는 일이라고 할 수 있습니다.(디버깅이란 버그를 해결하다라는 의미)
버그는 프로그램의 오동작을 말하는데 긴 프로그램이라도 기본적으론 의심되는 코드부분에 브레이크 포인트를 걸고 조금씩 실행해 보면서 여러 가지 값들이 제대로 나오는지 검사해 보는 것도 좋지만 처음부터 프로그램을 작성할 때 버그를 발견하기 쉽게 짜는 게 더 효율적일 수도 있습니다.
잘못된 변수가 인수로 넘어오면 리턴 값을 특정한 값으로 한다던가, 아니면 중요한 함수 같은데서 2개 이상의 알고리즘으로 하여서 계산결과를 서로 비교한다던가.. 이러한 디버깅은 오직 연습과 경험이 바탕이 되어야 할 것입니다.
alert
자바스크립트 안에 alert 문을 작성하는 단순한 방법입니다.
이렇게 하면 웹 브라우저를 열 때 alert 대화상자가 표시됩니다. 이른바 print를 이용한 디버깅의 자바스크립트 버전입니다.
이 방법은 어떠한 웹 브라우저에서도 이용할 수 있습니다. 또한 alert 대화상자가 표시되고 있는 도중에는 모든 자바스크립트의 실행이 정지됩니다.
따라서 alert 를 대량으로 작성하여 단계적인 실행과 같은 것이 가능해집니다.
단, alert 대화상자(경고창)를 하나하나 닫아야 하므로 그다지 편리한 방법은 아닙니다.
더욱이 실수로 무한 루프 안에서 alert 를 실행할 경우 웹 브라우저의 프로세스를 종료시킬 수 없으면 윈도우를 닫을 수 없는 사태에 빠지게 되므로 주의가 필요합니다.
console
요즘의 웹 브라우저에는 자바스크립트를 실행하기 위한 콘솔 기능이 표준으로 탑재되어 있는 것이 있습니다.
원래는 파이어폭스용 애드온인 파이어버그에 구현돼 있는 기능이었지만 파이어버그를 이용하는 개발자가 많아져서 사파리나 구글 크롬 등에서는 표준으로 콘솔을 탑재하게 되었습니다.
console.log('콘솔 객체를 사용합니다.'); 와 같은 코드를 자바스크립트 안에 작성하면 해당 콘솔에 "콘솔 객체를 사용합니다" 라고 표시됩니다.
alert 를 이용하는 경우와 본질적으로는 같지만 console을 이용하는 경우는 하나하나 대화상자를 닫을 필요는 없으므로 alert 보다 사용하기 좋을 것입니다.
또한 alert 보다도 상세한 데이터를 표시할 수 있습니다.
하지만 인터넷 익스플로러 등 표준에서 console 객체가 존재하지 않는 브라우저(콘솔객체를 탑재하지 않은)에서는 에러가 발생하므로 주의하시기 바랍니다.( IE는8+ 이상에서만 지원)
Variable(변수)
변수란 어떠한 값을 저장하고 포함하는 역할을 합니다. 즉, 변하는 데이터(값)을 저장할 수 있는 메모리 공간(데이터를 담는 그릇)입니다.
변수는 사용자가 이름을 정의하여 사용하며 정의한 이름을 통해서 저장 또는 포함된 값을 읽어올 수 있습니다.
또한 선언한 변수에 다른 값을 저장하거나 포함시키면 사라지고 새로운 값으로 대체가 가능합니다.
변수 선언하기
변수를 선언할 때는 var 키워드를 변수명 앞에 붙이고 변수명은 사용자가 임의 단어로 지정할 수 있으며 변수명은 영어와 숫자 그리고 일부 특수문자($,_)를 혼합하여 지정할 수 있습니다.
하지만 첫 글자를 숫자로 선언할 수 없으며 일반적으로 소문자로 시작해서 단어의 중간에 대문자 알파벳을 넣어 단어의 가독성을 높이고자 낙타 표기법을 사용합니다.
- 어떤 값을 지속적으로 저장하여 필요할 때마다 사용할 수 있게 하는 저장소
- 변수명에 포함된 값들은 언제든지 변경할 수 있음
- javascript 내부적으로 미리 사용하는 키워드나 예약어는 사용안됨
- 변수명 첫글자로 특수기호 사용가증 (underscore, $)는 가능
var i;
i = 10;
// 변수 i 에 10 을 저장함
var str = "abc";
// 변수명 str 에 "abc" 라는 문자열을 저장변수에 값을 정의,대입하는 것을 변수에 값을 할당한다 라고 표현합니다.
위 코드는 미리 선언한 변수 i 에 10이라는 값을 할당하였기 때문에 변수 i 의 값을 10이 됩니다.
그리고 10 이라는 값을 할당하기 전에는 undefined 라는 값이 초기값으로 할당되어 있습니다.
str 에 값을 대입한 것은 변수를 선언함과 동시에 값을 할당한 것입니다.
|
javaScript 예약어 |
abstract, boolean, braek, byte, case, catch, char, class, const, continue, default, do, double, else, extends, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, transient, try, var, void, while, with, false, true |
변수의 범위(scope)
자바스크립트에서는 변수의 스코프가 함수에 의해 결정되며 각 변수는 전역변수이거나 지역변수입니다.
전역 변수는 어디서나 접근할 수 있지만, 지역 변수는 변수가 선언된 스코프 내에서만 접근할 수 있습니다.
자바스크립트에서 변수의 스코프를 정의할 수 있는 블록은 함수뿐입니다.
다시 말해서, 지역 변수는 함수 내에 선언되는 반면에 전역 변수는 함수 밖에서 선언됩니다.
이 법칙은 무조건입니다!!!
var a = 1111;
console.log(a); // 전역변수로서 전체 영역에 영향을 미침
function outer() {
var a = 222; // 함수 내부에 선언되었기 때문에 지역 변수로써 함수 내부에만 영향을 미침
console.log(a);
function inner() {
var a;
console.log(a);
}
inner();
}
outer();
console.log(a);- 변수의 범위를 명확히 하려면
var를 선언하는 것이 좋음(코드에 따라 지역변수에var를 사용하지 않기도 함) - 특정 함수 안에서
var를 통해 선언된 변수는 지역 변수로 인식되지만,var를 사용하지 않 는 변수는 전역 변수로 인식한다.
변수의 기본타입과 참조타입
변수의 타입에는 기본타입과 참조타입 두 가지가 존재합니다.
기본 타입(형)을 데이터 타입이라고도 하며 기본 타입의 값은 고유하게 본인 하나이지만 참조(reference)타입은 하나의 값을 여러 변수에 할당할 수 있습니다.
즉, 참조타입은 같은 값을 가지고 있는 경우 한 곳에서 수정되면 다른 곳에도 영향을 미칠 수 있습니다.
다음은 기본타입과 참조타입의 종류를 구분하여 정리한 표입니다.
기본 타입의 종류
|
종 류 |
설 명 |
사용 예 |
|---|---|---|
|
숫자(Number) |
숫자는 기본타입으로 정수와 실수를 의미한다. |
var i = 20; |
|
문자(String) |
문자는 따옴표나 쌍따옴표를 사용해 문자열을 구성한다. |
var str = "abc"; |
|
불리언(Boolean) |
true(1), false(0) 두가 지 값을 가지고 참, 거짓을 나타내는 용도로 사용한다. |
var bool = true; |
|
null |
아무런 값도 가지지 않은 값이다. |
var n = null; |
|
undefined |
변수를 선언하고 값을 할당하지 않으면 undefined 라는 값을 가진다. |
var a; |
참조 타입의 종류
|
종 류 |
설 명 |
사용 예 |
|---|---|---|
|
객체(Object) |
변수와 메서드를 한 곳에 모아주는 꾸러미 역할을 한다. |
var obj = new Object(); |
|
배열(Array |
여러 개의 데이터의 원소를 순서를 가지고 구성한다. |
var arr = new Array(); |
|
함수(Function) |
실행할 구문을 미리 정의해 놓고 호출하여 사용한다. (재사용을 위해) |
function sum() { ... }; |
기본 타입과 참조 타입의 특성
* ======================================+
* 기본 타입의 특성(메모리 번지의 값을 비교)
* ======================================+
var a = 20;
var b = 20;
console.log(a == b); // 메모리 번지가 다르더라도 기본타입은 값 자체를 비교한다.
var c = 100;
var d = c;
console.log(c, d);
d = 50;
console.log(c, d); // 다른 메모리 번지에 값을 가지고 있기 때문에 c 값은 보존된다.
* ==================================+
* 참조 타입의 특성(메모리 번지를 비교)
* ==================================+
var obj1 = {a: 1};
var obj2 = {a: 1};
console.log(obj1 == obj2); // 메모리 번지를 비교하므로 false 가 출력
var obj3 = {b: 30};
var obj4 = obj3;
obj4.b = 50;
console.log(obj3.b, obj4.b); // 같은 메모리 번지를 가리키고 있기 때문에 obj.3 도 변경된다.거의 모든 책에서 기본 타입은 값 자체를 비교하고 참조타입은 참조 비교를 한다고 설명되어 있다.
문자형 데이터
문자형(String) 데이터는 문자나 숫자를 큰 따옴표 또는 작은 따옴표로 감싸서 작성합니다.
var str = 'javaScript';
var num = "100";숫자형 데이터
숫자형(Number) 데이터는 변수에 저장된 데이터가 숫자만 들어가야 합니다.
var num = 100;
var num2 = Number("200"); // 문자형 데이터를 숫자형으로 변환하여 숫자형 200으로 변환됩니다.논리형 데이터
논리형(Boolean) 데이터는true(참) 또는 false(거짓)을 가지고 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과입니다.
예를 들면, "100보다 10이 크다" 는 잘못된 비교이므로 false 라는 결과를 반환하게 됩니다.
논리형 데이터의 기본형은 다음과 같습니다.
var a = true; // 변수 a에 true 를 저장
var b = (100 < 10); // 변수 b에는 연산된 결과로 인해 false 를 저장null & undefined 데이터
undefined 는 변수에 아무 값도 등록되어 있지 않은 경우이고, null 은 변수에 데이터로 null 이 저장되어 있는 경우를 가리킵니다.
null 은 값이 저장은 되어있지만 아무런 의미가 없는 값이 등록되어 있다는 의미입니다. (변수에 저장된 데이터를 비우고자할 때 사용되기도 합니다.)
'JavaScript > Core & 개념ㆍ용어' 카테고리의 다른 글
| javaScript - 기본 타입 null (0) | 2016.09.29 |
|---|---|
| JS Basics #3 - Array(배열), Object(객체) 그리고 함수(Function) (1) | 2016.09.09 |
| JS Basics #2 - 연산자, 조건문 그리고 반복문 (0) | 2016.09.09 |
| 자바스크립트 모듈 - module (0) | 2016.03.09 |
| 쿠키(Cookie) (0) | 2015.02.26 |
