it-ux

[제7강] Literal, expression, Statements

꽃광 — Wed, 29 Jun 2011 10:54:19 +0900

원래 이번 강좌는 배열에 대해 설명하기로 했었죠?^^, 목차를 정확하게 잡지 않은 상태에서 연재를 하다보니 중간에 추가로 설명해야 하는 부분들이 생겨나네요. (죄송합니다..하하)

배열을 들어가기에 앞서 자바스크립트(다른 언어도 마찬가지)에서 기본이 되는 주요 개념에 대해 먼저 소개하고 나아가도록 하겠습니다.

오늘 소개할 개념은 literal, expression, statement입니다. 우리말로는 값(사전적으로는 '문자의' 라는 의미), 표현식, 문장 정도로 번역이 가능합니다. 하지만 언어의 특성상 가급적 기본 개념은 영문 그대로 받아들이는 것이 서로간의 의사소통에 도움을 주기 때문에 글에서는 영문표기를 사용하도록 하겠습니다.

자바스크립트에서의 literal은 데이타타입에 들어가는 값 그 자체를 의미합니다.
literal의 예를 들어보면

12  // 숫자 12
1.2 // 숫자 1.2
"hello world" //문자열
true // boolean값
/javascript/gi  // 정규식 표현값

위와 같은 것들을 literal이라고 부릅니다.

그럼 다음으로 expression에 대해 살펴보도록 하겠습니다.
자바스크립트에서의 expression은 자바스크립트엔진이 해석하여 값으로 출력할 수 있는 모든 구문들을 의미합니다.
expression은 literal, 연산자의 조합으로 이루어져 있습니다. 정확한 이해는 역시 예제로 설명하는 것이 빠릅니다.

"333"		//문자 literal
i	        //변수 i
(i+1.5)/3	//수식

마지막으로 살펴볼 개념은 statements 입니다. statement는 온전한 문장 또는 명령어를 의미하며, ;(세미콜론)으로 각각의 statement를 구분합니다. expression과의 가장 큰 차이점은 expression은 일반적으로(물론 expression이 특정 목적을 수행하는 경우도 있음) 그 자체로는 어떤 것도 하지 않지만, statement는 어떤 목적을 수행합니다. 예를 통해 statement에 대해 알아보도록 하겠습니다.

var a = 5+3;	//statement
a++;		//expression 이면서 sentence, a값을 증가시키는 의미를 가지 때문에 statement임
a+10;		//expression, a+10이 어떤 영향을 미치지는 못함
if (a){a++};	//statement, 제어를 수행하는 역할을 함

개념적으로 보면 statement >= expression >= literal 정도로 표현이 가능하겠네요.

자바스크립트 코드의 기본 구조이므로 이 개념은 명확하게 이해하고 넘어가는게 좋을 것 같아 부연설명하였습니다.

[제6강] 자바스크립트 연산자 - 논리연산자,비교연산자

꽃광 — Tue, 28 Jun 2011 16:16:00 +0900

지금까지 진행하는데 무리는 없으셨죠? 혹시나 제가 건너뛰고 가는 내용이 있으면 지적해주시면 보완하겠습니다. 이 번 강좌에서는 지지난 강좌의 산술연산자에 이어 나머지 다른 연산자에 대해 알아보기로 합니다.

우선 논리 연산자를 알아보기로 하겠습니다. 논리연산자는 true 또는 false 값을 인자로 취해 true/false를 결과로 보여주는 연산자입니다. 자바스크립트의 논리 연산자는 다음 세가지가 존재합니다.

연산자	설명	예제
!	NOT연산자로, 입력 값이 true이면 false로 , false이면 true로 값을 리턴합니다.	>>> var b = !true; >>> b; false >>> var c = !!true; // NOT연산자가 두번 사용됨 >>> c; true >>> var d = “one” >>> !d; //NOT연산자를 변수에 사용하면 boolean 타입으로 형변환이 이루어집니다 false;
&&	AND연산자로, 두 개의 입력 값을 취해, 두 개의 입력이 모두 true인 경우에만, true를 리턴합니다	>>> true && true; true >>> true && false; false >>> false && false; false >>> true && !”3”; //3은 true이고 여기에 NOT연산자를 취했으므로 결과적으로 true && false 구문 false
\|\|	OR연산자로, 두 개의 입력 값 중 어느하나라도 true이면 , true를 리턴합니다	>>> true \|\| false; true >>> false \|\| false; false; >>> true \|\| !”3”; true

앞 선 강좌에서도 잠깐 설명 했지만, 자바 스크립트의 기본 데이타는 다음 6가지 경우를 제외하고는 모두 true 입니다.
””             (빈 문자열)
NaN          (Not a Number)
undefined (정의되지 않은 값)
null           (Null값)
false         (기본 boolean false)
0              (숫자 0)

또 한가지 살펴볼 점은 자바스크립트에서의 형변환입니다. 형변환에 대해서는 중간 중간 강의를 진행하면서 짚고 넘어가겠지만, 서로 다른 데이타 유형끼리 연산이 이루어지거나, 특정연산자와 결합하면 자바스크립트의 문법규칙에 의해 형변환이 이루어지게 됩니다.

논리 연산자에서는 Not연산자와 결합하게 되면 boolean 데이타 유형으로 형변환이 이루어집니다.
논리 연산자는 매우 기본적인 개념이므로 반드시 정확하게 이해하고 넘어가셔야 합니다.

다음으로 비교연산자에 대해 알아보도록 하겠습니다. 비교연산자는 두 값을 취해 그 값을 비교하여 boolean(true/false) 값을 리턴합니다.

연산자	설명	예제
==	동치(Equal)연산자, 두 값이 동일한 경우 true를 리턴한다. 두 입력 값의 타입이 같지 않은 경우 형변환하여 비교한다	>>> 1 == 1; true >>> 1 == “1”; true >>> 1 == “2”; false >>> undefined == null true >>> NaN == NaN false
===	동치연산자(타입까지 비교), 두 값이 동일하고 타입까지 일치하는 경우에만 true를 리턴한다. 정확한 비교를 하고자 할 때에는 == 를 사용하는 것보다 안전하다	>>> 1 === 1; true >>> 1 === “1”; false >>> undefined === null; false
!=	NOT Equal연산자. 두 개의 입력값이 같지 않은 경우 true를 리턴한다, 타입이 다른 경우 형변환을 수행한다	>>> 1 != 1 false >>> 1 != “1” false >>> 1 != “2” true
!==	NOT Equal연산자(타입까지비교), 형 변환을 수행하지 않고 값을 비교하여 값이 같지 않으면 true를 리턴한다.	>>> 1 !== 1 false >>> 1 !== “1” true >>> 1 !== “2” true
>	~보다 크다 연산자	>>> 10 > 10 false >>> “44” > 1000 false >>> Infinity > 0 true
>=	~와 같거나 크다 연산자	>>> 30 >= 30 true >>> 1 >= 2 false
<	~보다 작다 연산자	>>> 30 < 30 false >>> 1 < 2 true
<=	~와 같거나 작다 연산자	>>> 1 <= 1 true

===, !== 를 제외하면 비교 시점에 형 변환이 일어나므로 이 점에 주의하여 코드를 작성해야 합니다.

기타 연산자로는
typeof ( 앞의 강좌에서 설명했듯이 데이타 유형을 나타내는 연산자), delete ( 메모리에서 변수/항목을 제거하는 연산자) , new (함수객체를 생성함)
등이 존재합니다. 이 외에도 몇몇 연산자(비트연산자,instance of, in)가 더 존재하지만, 이 정도만 알면 기본적인 코딩에는 별 무리가 없습니다. 나중에 새롭게 등장하는 연산자는 부연 설명을 하도록 하겠습니다.

이상으로 연산자 강좌를 마치고, 다음 강좌에서는 배열에 대해 간단히 알아보도록 하겠습니다.

무료 압축 프로그램 - 반디집.

꽃광 — Mon, 27 Jun 2011 16:52:13 +0900

다운로드 : http://apps.bandisoft.com/bandizip/

많은 분들이 아직까지 알집을 주력 압축프로그램으로 사용하리라고 생각된다. 알집의 가장 큰 장점은 아마 귀여운 아이콘이 아닐까 싶다. 그 뛰어난 디자인과 마케팅으로 대다수의 국민에게 사랑받는 압축프로그램이지만, 한번이라도 알집에 데여본 기억이 있는 사람이라면 아마 알집을 쓰기 싫어질 것이다.
알집에 대한 비판 글은 다음 링크에서 적나라하게 확인가능하다.
http://offree.net/entry/Removing-Altools

나 또한 과거 알집압축을 풀다가 화가났던 경험이 있기에 빵집, 윈집, 윈라등의 대체 프로그램을 사용했었는데, 아직 알집 전용 포맷(egg,alz)으로 압축파일을 보내주는 사람이 많아, 부득이 알집을 함께 사용했다.

하지만 이번에 보니 반디집이라는 국산 압축 프로그램을 찾았다. ZIP은 기본이고, 7zip, RAR, ALZ, EGG 포맷까지 압축을 해제해 준다. 게다가 개인/기업 모두 사용가능한 완전 freeware이다.

평도 좋은 걸 보니 이 프로그램을 주력 압축 프로그램으로 사용해야겠다.

[제5강] 자바스크립트의 기본 데이타 유형 (Primitive Data Type)

꽃광 — Mon, 27 Jun 2011 14:22:47 +0900

지난 강좌에서는 연산자가 무엇을 의미하는 지와 연산자 중에서 산술연산자에는 어떤 것이 있는지 알아보았습니다. 오늘 강좌에서는 남은 연산자에 대해 학습하기 앞서, 자바스크립트에 어떤 기본 데이타 유형이 있는지 먼저 알아보도록 하겠습니다. ^^ ( 기본 데이타 유형을 알면 나머지 연산자에 대한 설명도 자연스럽게 이루어지기 때문에 부득이 연산자 강좌 중간에 들어가게 되었습니다.)

자바스크립트에는 5가지 기본 데이타 유형이 존재합니다.
Number, String, Boolean, Undefined, Null

위의 5가지 기본 데이타 유형이 존재합니다. 그럼 각각에 대해 알아보도록 하겠습니다.
(아래 예제에서 연산자 하나가 소개되었네요..^^ typeof 연산자는 뒤이어 입력한 값의 데이타 유형을 보여주는 연산자입니다.)

1. Number
자바스크립트에서는 정수형, 실수형 구분 없이 숫자로 이루어진 값은 모두 Number입니다.
eg. 3.0, 100, 3.11111, 10e5 모두 결과 데이타 유형은 Number입니다.

참고로 10e5 는 지수표현으로 10 * 10의 5제곱을 의미합니다. 즉 1,000,000 이죠

위의 표기는 8진수형태로 숫자를 표현하는 방법입니다. 055 = 8*5 + 5를 의미하기 때문에 값을 출력해보면 45가 되죠.

위의 표기는 16진수 형태로 숫자를 표현하는 방법입니다 0xff = 16*15(f의 숫자값) + 15 = 255 가 됩니다.

Number에는 조금 더 독특한 형태의 값도 존재합니다.
바로 무한대 값인데, Infinity 라는 값을 지닙니다.

자바스크립트에서 다룰 수 있는 가장 큰 수는 1.7976931348623157e+308 이기 때문에 위에서처럼 1e309는 MAX값을 초과하여 Infinity(무한대)가 됩니다.

그럼 Infinity간의 연산은 어떤 결과를 보여줄까요?

NaN 이라는 결과값이 보이시죠? NaN은 Not a Number 라는 의미이며 NaN의 데이타 유형도 Number 타입입니다.

위와 같이 숫자와 문자의 연산이라던지, NaN과 일반 숫자의 연산결과도 NaN이 됩니다.

2. String
자바스크립트에서 모든 문자정보의 데이타는 String 유형입니다. (java나 c처럼, 문자와 문자열을 구분하는 것이랑은 다르죠?^^) , string유형은 작은따옴표 또는 큰타옴표로 데이타를 표현합니다.
eg. ‘3’, “333”, “aaa”, “123abb”

추가로 앞 선 강좌에서 설명한 연산자 중 '+'는 문자열에서 사용하면 문자열을 연결시키는 역할을 수행하게 됩니다.
따라서
>>> "abc" + "def"
abcdef
가 출력이 됩니다. (은근슬쩍, 연산자에서 놓친 부분을 이렇게 집어넣네요.^^)

3. Boolean
true/false 값을 가지는 연산자입니다. 제어문에서 주로 사용됩니다.

뒤에 문법시간에 다시 설명하겠지만, 형 변환이 이루어지는 경우 다음 값들을 제외하고는 모두 true가 됩니다.
"", null, undefined, 0, NaN, false

4. Undefined
자바스크립트에 존재하는 독특한 형태의 데이타 유형입니다. 값이 셋팅되지 않은 변수는 undefined 값이 됩니다.

물론 아예 선언되지 않은 변수에 대해 타입을 조사해도 undefined 입니다

5. Null
마지막으로 살펴볼 기본 데이타 유형입니다. Null유형은 값으로 null 만을 취합니다. 이 데이타 유형이 갖는 의미는 “값이 없다, 비어있다, 아무것도 없다”라는 의미를 지닙니다. Null 데이타 유형은 typeof 로 출력하면 Object 가 출력이 됩니다. 약간 이상하긴 하지만, Null 도 하나의 기본 데이타 유형이라는 점은 기억하기 바랍니다.

위에서 설명한 다섯 가지에 해당하지 않는 데이타 유형은 모두 객체(Object)라고 보면 됩니다. 객체에 대해서는 이 후 강좌에서 더욱 상세히 설명할 예정입니다.

[제4강] 자바스크립트 연산자(Operator) - 산술연산자

꽃광 — Mon, 27 Jun 2011 11:06:57 +0900

이번 강좌에서는 연산자에 대해 진행해 보려고 합니다.
연산자(Operator)는 하나 또는 두 개의 값(변수)을 취해 연산(operation)을 수행하고 결과(return)를 만들어냅니다.

말로 설명하니 어렵죠? 예를 들어 쉽게 설명하도록 하겠습니다.(>>>기호는 firebug의 콘솔창을 의미합니다.)

>>> 1+2
3

+ 는 연산자(Operator) 입니다.
연산(operation)은 더하기 입니다.
인풋 값은 1과 2입니다. ( 인풋값으로는 변수도 가능합니다.)
결과 값은 3입니다.

이해되시죠, 수학시간에 배운 4칙연산(+,-,*,/)등이 바로 연산자인 것입니다.
그럼 이제 본격적으로 자바스크립트의 연산자에 대해 알아보도록 하겠습니다.

우선 산술연산자에 대해 알아보도록 하겠습니다. 산술연산자는 주어진 값(변수)들에 대해서 수식 계산을 하는 연산자입니다.

연산자 심볼	연산	예
+	더하기	>>>1+2 3
-	빼기	>>>3 - 2 1
*	곱하기	>>> 35*3 105
/	나누기	>>> 6 / 4 1.5
%	나머지 구하기	>>> 6 % 3 2 >>> 6.2 % 4 2.2
++	1만큼 증가	//++표시가 뒤에 붙은 경우 연산을 먼저 수행하고 a의 값을 증가시킨다 >>> var a=123; var b = a++; >>> b; 123 >>> a; 124 //++표시가 앞에 붙은 경우 a의 값을 증가시킨 뒤 연산을 수행한다 >>> var a=123; var b = ++a; >>> b; 124 >>> a; 124
--	1만큼 감소	// -- 표시가 뒤에 붙은 경우 연산을 먼저 수행하고 a의 값을 감소시킨다. >>> var a=123; var b = a--; >>> b; 123 >>> a; 122 // –- 표시가 앞에 붙은 경우 a의 값을 감소시킨 뒤 연산을 수행한다. >>> var a=123; var b = –-a; >>> b; 122; >>> a; 122

산술 연산자 중 헷갈릴 수 있는 부분은 ++, -- 와 같은 연산자인데, 앞에 붙느냐 뒤에 붙느냐에 따라서 연산의 우선 순위가 달라지므로 주의하셔야 합니다.

위에서 언급한 연산들은 다음과 같은 방식으로 축약도 가능합니다.(C,Java 와 같은 언어와 유사합니다.)

>>> var a=5;
>>> a += 3; // a = a+3과 동일한 표현
8
>>> a -= 3; // a = a-3과 동일한 표현
5
>>> a *= 2 // a = a*2와 동일한 표현
10

산술 연산자에 대해 간략히 설명드렸습니다. 혹시 이해가 안되시면 댓글로 질문부탁드립니다.^^;
이번 강좌에서 모든 연산자에 대해 설명을 진행하려고 하였으나, 진행하기 전에 개념적으로 이해해야 할 부분이 있어서, 그 부분을 짚고 넘어간 뒤에 마저 설명하도록 하겠습니다.

[제3강] Javascript의 변수(Variables)

꽃광 — Fri, 24 Jun 2011 16:55:17 +0900

자, 이번 시간에는 변수에 대해 알아보도록 하겠습니다.

변수란 영어 단어에서 알 수 있듯이 vary[다양하게 하다] + able[할 수 있는]의 합성어입니다. 변수의 가장 큰 특징은 그 값이 할당된 뒤에 변할 수 있다는 것을 의미합니다. 이와 반대되는 의미는 상수입니다. 상수는 값이 한 번 초기화되면 변할 수 없다는 특성을 가지고 있습니다. 간단한 예를 한 번 들어볼까요?

만약 a 라는 이름의 상수가 있다고 가정해 봅시다.
var a = 3;
a가 상수라면 a는 3이라는 값이 한번 설정된 이후에는 그 값을 변경할 수 없습니다.

따라서, 저 문장 뒤에 a = 10; 이런 문장을 실행하면 오류가 발생합니다.
변수는 그 의미대로 값이 변할 수 있기 때문에 a=10; 을 해도 정상적으로 실행되며, a의 값은 3에서 10으로 변경됩니다.

강좌 제목이 변수인데, 왜 상수 얘기를 하는지 의아해 하시는 분이 있을 것 같습니다. 그 이유는 자바스크립트에서는 상수의 개념이 존재하지 않기 때문입니다. 자바스크립트에서 선언되는 모든 값들은 변수입니다. 하지만 상수의 개념을 이해하는 것은 대단히 중요하기 때문에 꼭 이해하시고 넘어가시기 바랍니다. (자바스크립트에서도 상수와 비슷한 효과를 내기 위해 변수명을 모두 대문자로 표기하여 변수지만 상수의 의미로 사용된다는 것을 명시하기도 합니다. eg. var MY_CONSTANT = “이것은 상수”; )

자, 그럼 본격적으로 자바스크립트 변수의 개념/특징에 대해 알아보도록 하겠습니다.

변수를 선언하는 법을 알아보도록 하겠습니다.
자바스크립트에서 변수는 var 키워드와 함께 선언합니다. (참고로 아래문자의 // 표시는 이 뒤 문장은 주석이라는 뜻을 나타냅니다.)

var test;  //test라는 변수를 선언합니다.

자바스크립트는 다른 프로그램 언어와 달리, var 키워드로 모든 변수를 선언합니다. (java나 c와 같은 언어의 경험이 있는 분들이라면 아시겠지만, 이런 언어에서는 숫자형, 문자형 각각 다르게[eg.char, double, int 등] 변수를 선언하죠..)

따라서 위에서 선언된 test 에는 숫자, 문자 등 아무 값이나 담을 수 있습니다.
test = 3; test = "String", test = 1.2; 모두 가능합니다.

변수는 대소문자를 구별합니다. (>>> 표시는 firebug의 명령프롬프트에서 입력한 값을 의미합니다.)

>>> var a = "lower";
>>> var A = "upper";
>>> a;
"lower"
>>> A;
"upper"

변수의 이름에는 문자/숫자/_(언더바) 입력이 가능합니다. 단 변수의 시작은 문자 또는 _(언더바) 가 되어야 합니다. 그리고 이미 예약되어있는 키워드는 변수명으로 사용이 불가 합니다.

var abcd2_name; // OK
var 2_nameffdFFa; // NOT OK
var _adfjalfd; // OK
var case; // NOT OK , case는 예약어임

자바스크립트에 변수에 대한 강좌는 여기까지입니다. 어렵지는 않으셨죠? ^^ ( 혹시나 설명이 부족한 부분은 말씀해 주시면 추가로 보완하겠습니다. )

오늘 강좌를 요약하면 다음과 같습니다.
1. 자바스크립에는 상수개념이 없다. 하지만 대문자로 변수를 선언함으로써 관례적으로 상수처럼 사용한다.
2. 자바스크립트의 변수는 var 키워드와 함께 선언되며 문자/숫자 상관없이 입력가능하다.
3. 변수는 대소문자를 구별하고 변수는 문자, _(언더바) 로 시작된다.
4. 변수의 시작을 예약어, 숫자로 하는 경우에는 문법 오류가 발생한다.

다음 시간에는 연산자에 대해 알아보도록 하겠습니다.

[제2강] 자바스크립트 테스트환경구축

꽃광 — Fri, 24 Jun 2011 13:40:34 +0900

본격적인 학습에 들어가기에 앞서, 이번 강좌에서는 자바스크립트를 테스트 할 수 있는 환경을 구축하는 법에 대해 알아보도록 하겠습니다. 물론 환경을 구축하는 방법에는 여러 가지가 존재하기 때문에, 반드시 본 강좌내용대로 할 필요는 없습니다. ^^ (이미 웹에 친숙하신 분들이라면 각자에게 맞는 방법을 선택하시면 됩니다)

우선 자바스크립트를 테스트하기 위해서는 자바스크립트를 실행해 볼 수 있는 실행환경(보통 브라우저)과 코딩을 할 수 있는 에디트 환경이 필요합니다.
본 강좌에서는 브라우저 : 파이어폭스, 코딩/실행/디버그환경 : 파이어버그로 진행하려고 합니다.

파이어폭스는 모질라 재단에서 무료로 배포하는 브라우저(현재 5.0까지 출시)입니다. 다음 경로에서 다운로드 가능합니다.
http://www.mozilla.or.kr/ko/

다운 후 실행파일을 클릭하면 쉽게 설치가 완료됩니다.

그 다음 설치할 것은 파이어버그입니다. 이름에서 알 수 있듯이 파이어폭스 브라우저에서 동작하는 디버깅을 돕는 확장 플러그인입니다. 설치방법은 다음과 같습니다.

1. 파이어폭스 메뉴의 부가기능 선택
2. 검색에서 firebug 입력
3. 검색된 부가기능 설치
4. 파이어폭스 재구동

참 쉽죠잉?^^ (웹사이트를 통해서 직접설치하셔도 무방합니다.)

설치가 완료되면 하단에 다음과 같은 아이콘이 보일 것입니다. (사용자 테마에 따라 위치가 다를 수 있음)

가장 우측에 있는 버튼이 파이어버그를 실행하는 버튼입니다.
빈 웹페이지를 열고 해당버튼을 클릭해 봅니다.

다음과 같은 실행창을 볼 수 있을 것입니다.

다양한 기능이 있지만 여기에서는 Javascript를 테스트 하는 환경만 살펴보도록 하겠습니다.

위의 메뉴중 콘솔버튼을 누르면 위와 같은 화면을 볼 수 있습니다.
>>> 보이시죠?, 이 곳에 명령어를 입력하면 바로바로 그 실행결과를 볼 수 있습니다.

한 번 테스트해볼까요?

3+5; 를 입력해 보았습니다. 바로 8이라는 결과가 뜨죠? 별도의 에디트창에서 자바스크립트를 입력하고 이를 브라우저에서 실행하는 절차 없이 간단하게 코드를 테스트해 볼 수 있습니다.

여기서 의문이 생깁니다.. 그럼 여러 줄 입력해야 하는 코드는 어떻게 실행하죠?

명령어 입력창의 우측에 있는 위로된 화살표 버튼을 누르면, 여러 줄을 입력할 수 있는 창이 뜹니다.

보이시죠? 이처럼 여러 줄의 문장도 한 번에 실행해 볼 수 있습니다.

자, 그럼 이제 본격적인 Javascript의 세계에 입문하기 위한 기본이 갖추어졌습니다. 다음 시간에는 javascript의 기본 개념 중 변수에 대해 설명해 보는 시간을 갖도록 하겠습니다.

[제1강] 자바스크립트(Javascript)의 역사

꽃광 — Fri, 24 Jun 2011 09:26:05 +0900

자바스크립트에 대한 강의를 시작해보려고합니다. 뭐 물론 저도 완전히 초짜입니다. ^^; 이것저것 자료를 찾아가며 본 블로깅을 할 계획입니다.(주 내용은 Object-Oriented Javascript , Javascript: The Definitive Guide) 책을 참고하였습니다. - 번역서가 없는 게 아쉬울 따름) 잘 부탁드립니다. (누군가에게 설명하려다 보면 제 스스로도 이해도가 높아지는 것 같아서요, 사실 지식전달의 목적보다는 글로써봄으로써 제 이해력을 높이는게 더 큰 의도입니다.^^;), 잘못된 정보는 댓글로 말씀해주시면 정정하도록 하겠습니다.

블로그의 내용은 프로그래밍 경험이 없는 분들도 어느정도 이해할 수 있게 써보려고 하지만, 혹시 이해가 안되는 부분이 있을 수도 있으니, 그런 때엔 댓글 달아주시면 내용 보완하도록 하겠습니다.

강의내용은
자바스크립의 역사, 문법, 주요개념 등에 대한 설명이 되겠습니다. 자유로운 마음으로 시작하는 만큼 여러분들의 댓글이나 제 마음에 의해 내용은 변경될 수 있습니다.

자 그럼 시작하겠습니다.

최초의 Web은 정적인 HTML문서만을 표현하였습니다. HTML을 통해 정보를 표현하고 정보간의 Link(연결)를 하는 것이면 Web의 기능을 다하는 것이라고 생각했습니다.

웹을 사용하는 이용자가 많아지고 규모가 커짐에 따라 웹 마스터들은 웹이 좀 더 다양한 기능(예.폼 밸리데이션)을 제공하면 좋겠다고 생각했습니다. 니즈에 맞추어 이런 기능을 구현하는 방법이 등장했습니다. java applet과 live script가 그러한 것을 가능하게 해주는 기술입니다. 자바 애플릿은 확산에 실패했고 live script 홀로 살아 남았는데, 이것이 추후 자바스크립트(Netscape에서 개발)라는 이름으로 변경되었습니다. ( 서버 Language인 Java와는 사실 아무런 관계가 없습니다. )

웹이 폭발적으로 성장하면서 Netscape진영(Netscape Navigator)과 Microsoft진영(Internet Explorer)간에 브라우저 1차대전(약 1996~2001년 사이)이 벌어지게 됩니다. 각각의 브라우저는 제각기 다른 기능을 Javascript(MS는 jScript라는 이름으로 개발)에 추가함으로써 비표준 기능들을 양산하게 됩니다. 이러한 비표준은 웹개발자를 괴롭게 하였습니다. 어느 한쪽에서 작동하는 자바스크립트 코드가 다른 쪽에서 작동하지 않는일이 비일비재하게 되었습니다.

이러한 문제 외에도 한가지 문제가 더 생겨났습니다. 그것은 바로 웹 개발자들이 자바스크립트의 기능을 활용하기 위해 웹사이트에 이런저런 기능들을 덕지덕지 붙인 것입니다. 사용성에 근거하지 않은 무분별한 기능들은 오히려 사용자가 원활하게 웹서핑을 하는 것을 방해하게 만들었습니다.

이 시기를 즈음하여 대다수의 사람들은 자바스크립트를 단지 웹을 꾸미는 역할을 수행하는 장식에 불과하다는 생각을 갖게 되었습니다.(오늘날까지도 국내의 많은 IT 관계자들이 자바스크립트를 이렇게 생각하고 있다는 것은 참 씁슬한 일입니다.)

1차 브라우저 대전이 끝난 뒤 승자는 MS가 되었습니다. 대부분의 브라우저 점유율을 IE가 차지하게 되면서 자바스크립트 관련 기술은 정체되었습니다.(발전의 필요성을 못느낀 것이기도 하겠지요..) 하지만 이런 정체된 시기를 기회로, 표준제정이 중요하다는 인식을 다같이 하게되었고, 자바스크립트 관련 기술도 ECMA-262라는 표준에 근거하는 형태로 안정을 찾게되었습니다.

표준화된 자바스크립트 기술은 이제는 IE뿐만 아니라 파이어폭스, 크롬, 사파리, 오페라 등 다양한 브라우저에서 큰 호환성 제약없이 사용할 수 있게 되었습니다.

오늘날 자바스크립트가 각광받는 이유도 이러한 표준이 존재했기 때문이 아닐까 생각을 해봅니다.

다음 시간에는 본격적으로 자바스크립트를 학습하기에 앞서, 기본적인 자바스크립트 테스트환경을 갖추는 법에 대해 살펴보도록 하겠습니다.

Storify - 온라인 컨텐츠 결합/발행 사이트

꽃광 — Thu, 28 Apr 2011 08:41:15 +0900

기능 : SNS,멀티미디어, 링크등의 글이나 자료를 조합하여 새로운 컨텐츠로 발행하는 것을 도와줌
장점 : 편리한 사용법
단점 : 트위터를 통해서만 가입가능, 국내서비스 미지원, 블로그발행시 스크립트형태로만 삽입가능 ( 해당서비스 폐쇄시 작성컨텐츠 유실우려)

평가 : ★★★★(4.0/5)

참고자료
Storyfy 사이트에 대한 설명이 되어있는 블로그

Tunefort - 온라인 음악 스트리밍 서비스

꽃광 — Tue, 19 Apr 2011 09:45:45 +0900

해당 서비스가 문을 닫았습니다. ㅠ_ㅠ

기능 : 웹상에서 음악을 듣고 싶을 때,
장점 : 가입필요없음, 국내/해외 음악 검색가능, 심플한 UI, 다운로드 가능(4Shared이용)
단점 : 한번 저장된 플레이리스트 편집불가..

평가 : ★★★★☆(4.5/5)