Never be weak

글쓴이 : 김정용
작성일 : 2008. 8. 27(수)


------------ 자바스크립트 DOM ---------------
정말 오랜만에 올리는 강좌네요.
2월달에 올리고 안올렸으니....음.....

일단 현재 시간이 새벽 2시를 가르킬려고 안간힘을 쓰고 있어서 간단하게 하고 넘어가겠습니다.
자세한 내용은 다음 포스트에 올리도록 해야겠죠.

DOM이란 무엇일까요?
돔?? 음 생선을 말하는걸까요....아니면 지붕이 덮히는 스타뒤움~???
이런 개그 요즘에 먹히지 않는다는거 알고 있습니다. 에헴...
DOM 이란 이것도 저것도 아닌 Document Object Model의 약자입니다. 이게 뭐냐구요?
웹상에서 보여지는 화면들은 모두 태그들로 이루어져 있죠. 이러한 태그들을 XML에선 엘리먼트라고 불리기도 합니다. 크게 HTML문서의 구성을 나눠보자면 텍스트, 이미지, 하이퍼링크, 폼엘리먼트 이런식으로 나눌수가 있겠죠.

이 얘기를 왜 하냐면 DOM이라는 것이 바로 이러한 HTML문서를 구성하고 있는 엘리먼트를 제어하는 일종의 API라고 할수 있기 때문입니다. 정보의 바다를 헤엄치다보면 종종 텍스트가 저절로 움직이거나 이미지가 슬라이드 된다거나 메뉴가 스크롤바를 따라다닌다거나 하는걸 보실수가 있습니다. 이러한것들 모두 DOM을 이용해 만든 효과들입니다.

예전엔 자바스크립트가 굉장히 천대받던 시절이 있었습니다. 제가 처음에 공부를 시작할때만 해도 자바스크립트는 COPY&PASTE로만 활용되는 기본이 중요하지 않는 언어라고 인식되던것이 대부분일겁니다. 최근에 들어서 WEB2.0이 부각되면서 자바스크립트의 중요성을 일깨워주고 있는데 DOM객체를 제어하는건 자바스크립트를 이용해 다양한 효과를 만들어내기 위한 기본적이며 아주 중요한 사항이라고 할수가 있지요.


간단한 예제를 하나 볼까요...
test.html



매우 간단한 예제를 한번 작성해보았는데요.
일단 설명을 드리자면 div1을 클릭하면 배경색과 글자색이 바뀌는 것이고,
다른 하나는 div2를 클릭하면 텍스트가 추가 되는것입니다.

여기서 집고 넘어가야 할게 몇가지 있는데 차례대로 살펴보겠습니다.
우선 제일 많이 쓰는 getElementById 에 대해서 알아보죠.
이건 document 객체의 메서드로 아이디값을 이용해서 해당 엘리먼트를 찾아내는 역할을 합니다. 이렇게 찾은 엘리먼트를 이용해 배경색이나 글자색 혹은 여러가지 변화를 줄수가 있지요. 이밖에도 많은 메서드가 존재합니다만 가장 기본적이고 많이 쓰이는 메서드라서 먼저 소개해드렸습니다.

두번째로 createTextNode 와 appendChild가 보이네요.
createTextNode는 텍스트를 만들어 내는 것인데, 그냥 var text = "div2의 영역이죠"; 이런식으로 정의하는 것과는 다릅니다. 왜냐하면 createTextNode는 텍스트 자체를 하나의 엘리먼트로 만들어 내는것과 같은 것이기 때문입니다. 약간 사용용도가 다른것이죠.

appendChild에선 해당 객체에 인자로 받아들인 엘리먼트객체를 추가하는 것입니다.
위 소스를 실행해 보시면 아시겠지만 클릭할때마다 텍스트가 하나씩 추가되는 것을 보실 수 있을겁니다.
엘리먼트 객체가 아닌 그냥 일반 텍스트를 넣게 되면 추가가 되지 않습니다. 그래서 appendChild같이 엘리먼트를 인자로 받아들이는 메서드에선 createTextNode같이 엘리먼트 객체로 만들어주는 메서드를 써서 객체로 만든 후 그것을 인자로 넘겨야 하는 것이죠.


하나 유념해 두셔야 할 부분은 getElementById를 이용하실때는 문서가 모두 로드가 된 후 사용이 되게 만드셔야 되는겁니다. 무슨말이냐 하면 아래 예제를 보겠습니다.



DOM에 대해서 처음 접하시는 분들은 저것을 실행하면 배경색이 바뀔것으로 예상합니다.
하지만 예상과는 달리 에러가 나게 됩니다. 아마 객체를 찾을수 없다는 오류가 날텐데 그 이유는 문서가 생성되기 전에 저 div1이라는 엘리먼트를 찾을려고 했기 때문이죠. 그러면 저걸 바르게 바꿔볼까요?



window.onload 라는 것은 문서가 로드되면이라는 뜻의 이벤트 프로퍼티 입니다.
문서가 로드되면 function 으로 감싼 문장이 실행되겠죠. 그렇게 되면 바르게 배경색이 바뀌게 될겁니다.
이점만 유의하시면 getElementById 를 사용하시는데 지장이 없으실 듯 합니다.


마치며... DOM 호환 브라우저

솔직히 브라우저간의 완벽한 호환은 현실적으로 불가능합니다. 브라우저의 업그레이드에 따라 차이점이 줄고는 있지만 완벽히 모든 메서드와 프로퍼티가 동일하게 적용될지는 의문스럽습니다.
현재도 IE나 파폭, 오페라, 사파리 등등 많은 브라우저가 있지만 모두가 각각 다른 동작을 합니다. 같은 메서드를 사용하더라도 효과가 다르거나 혹은 이벤트 발생이 다르게 이루어진다던가 하는 등의 문제가 많이 있죠.
그래서 이런 호환성을 생각하며 개발하기는 쉽지 않습니다. 최근에 들어 웹표준에 대한 인식이 뚜렷해지면서 많은 사이트들이 웹표준을 따라가기 위해 노력들을 하고 있지만 우리나라의 특성상 모든 사이트가 웹표준을 따라가기에는 너무나 어렵습니다.

브라우저간의 차이점을 줄이기 위해서 자바스크립트에선 프로토타입이라는 기능을 활용할수 있습니다. 이러한 기능에 대해선 추후 강좌에서 언급을 하겠지만 여기서 말하는 프로토타입은 흔히 인터넷에서 배포하고 있는 prototype.js 라이브러리를 말하는 것이 아닙니다. 혹시 헷갈려 하시는 분이 계실까봐 말씀드렸습니다. ㅎㅎ;


오늘의 강좌는 여기까지 하도록 하고 다음 시간도 마찬가지로 DOM에 대해서 알아보도록 하겠습니다.
감사합니다.

글쓴이 : 김정용
작성일 : 2008. 2. 28(목)


------------ 자바스크립트 사용자 정의함수 ---------------

강좌를 오랜만에 올리는거 같습니다. ㅎㅎ

앞선 시간에는 반복문과 조건문에 대해서 알아보셨죠? 이번에는 함수라는 놈을 알아보겠습니다.

자바스크립트에 있어 함수는 없어서는 안될 존재이며, 꼭 알고 넘어가셔야 합니다.

함수란건 특정 역할을 하는 코드들을 감싸서 정의해주는 놈입니다.
예를 들어서 밥상을 차린다고 하지요. 밥상을 차리기 위해선 밥도 지어야 하고 여러가지 반찬을 만들고 찌개도 끓이겠지요. 그리고 이 각각의 요리들을 만들기 위해선 칼질도 하고 양념도 하고 간도보고 하는 등의 행동들을 할겁니다. 이러한 각각의 요리방식을 저장할수 있는 로보트가 있고 이 로봇이 저장된 요리법으로 똑같이 요리를 할수 있다면 굉장히 편하겠지요?
만들고 싶은 요리만 로보트에게 로드시켜 바로 바로 만들어낼수 있을테니까요.
함수란 놈도 마찬가지입니다. 이러한 일련의 작업들을 모아서 이를 호출할시 똑같은 연산을 하게 되는것이지요.
어떠한 프로그래밍 언어든 함수의 개념은 존재하는것이니 잘 모르시는 개념이라면 꼭 짚고 넘어가시기 바랍니다.


함수정의

크게 3가지 방법으로 나눌수 있습니다.
선언적 함수(가장 기본적인 형태)
정적,동적 함수
익명, 리터럴 함수

자세한 내용은 하나하나 밑으로 내려가면서 알아보도록 하겠습니다.


선언적 함수
가장 널리 쓰이는 함수종류로 아래와 같이 구성됩니다.

function 함수명(인자1, 인자2, ..., 인자n){
    실행문장
}

기타 프로그래밍언어에서도 많이 쓰이는 형태이며 가장 익숙한 형태일 겁니다.
이러한 선언적/정적 함수는 페이지를 로드할때 단 한번만 파싱된다는 특징이 있습니다. 그래서 코드내에서 찾기도 쉽고 부작용또한 생기지 않습니다.

예)

<script type="text/javascript">
//<![CDATA[
function helloFunc(value){
    alert(value);
}

helloFunc('안녕 히드라야');
//]]>
</script>

위 예제는 함수를 선언하고 호출하는 예입니다.
value라는 인자를 받아서 경고창으로 이 value값을 호출하고 있습니다.


익명함수

자바스크립트만의 특징으로 이상하게 보일수 있는 선언법입니다.
사실 자바스크립트에서의 함수는 객체의 의미를 가지고 있습니다. 그래서 생성자를 이용해 함수를 생성할수 있습니다. 객체지향언어를 경험해 보셨다면 어떤 의미인지 쉽게 아실수 있을겁니다.

형태는 아래와 같습니다.
var func = new Function("x","y", "return x + y");

예)
var helloFunc = new Function("value","alert(value);");
helloFunc("안녕 드라군아");

이러한 익명함수는 함수를 동적으로 생성할수 있다는 장점이 있습니다.
즉 페이지가 실행된 상태에서 함수를 동적으로 바꿔줘야 할 경우 쓰시면 유용하게 사용할수 있습니다.

예제)

<html>
<head>
<script type="text/javascript">
//<![CDATA[

//대화상자를 통해 실행문장과 인자를 받아냅니다.
var func = prompt("Enter function Body : ");
var x = prompt("Enter value of x: ");
var y = prompt("Enter value of y: ");

//익명함수 선언과 호출
var anonyFunc = new Function("x", "y", func);
var result = anonyFunc(x, y);

//출력
document.write("Function is: " + func + "<br />");
document.write("x is : " + x + " y is : " + y + "<br />");
document.write("Result : " + result);

//]]>
</script>
</head>
<body>
</body>
</html>

위 예제를 실행해서 프롬프트 창이 뜨면 프롬프트  창에 아래와 같이 입력하시고 결과값을 확인해보세요.
첫번째 창 : return x + y
두번째 창 : 20
세번째 창 : 30

이렇게 하면 결과값이 화면에 출력이 될겁니다.
위 예제는 아주 극단적인 방법으로 사용자가 함수 몸체를 생성하는 방법입니다. 하지만 이러한 형태는 문제가 생길수 있기때문에 권장하지 않는 방법이므로 이해를 돕기위한 예제로 생각하시고 그냥 넘어가시기 바랍니다.


함수 리터럴

일단 리터럴이란 개념을 알아야 할텐데...흔히 문자열 리터럴 숫자 리터럴 이러한 말들을 들어보셨나요?
리터럴이란건 그 자체를 말합니다. 즉 문자열 리터럴이라면 문자 자체를 의미하는 것이고 숫자 리터럴이라면 숫자 자체를 의미하는 것입니다.
"질럿"    <==== 이것을 문자열 리터럴이라고 합니다.
55          <==== 이것을 숫자 리터럴이라고 합니다.

그렇다면 함수리터럴이라는 말은 함수 자체를 의미하는 것이겠지요.
아직은 무슨말인지 감이 안오실겁니다. 그렇다면 어떤 형태인지부터 알아보도록 하겠습니다.

var func = function(인자들){
    실행문장;
}

약간은 익명함수랑 비슷하기도 하지요?
하지만 다른점은 익명함수와는 달리 선언적함수처럼 페이지내에서 한번만 파싱된다는 점입니다.

아래는 자바스크립트 for 웹 2.0(한빛미디어 번역) 이라는 책에서 발췌한 예제입니다.

<html>
<head>
<script type="text/javascript">
//<![CDATA[

//세번째 인자를 함수로 호출
function funcObject(x, y, z){
    alert(z(x, y));
}

//세번째 인자를 잘보세요.
funcObject(1, 2, function(x, y) { return x * y} );
//]]>
</script>
</head>
<body>
</body>
</html>

인자에다 직접 함수를 선언해서 넘겨주는 예제입니다.
그리고 받은 인자값으로 함수를 호출하고 있지요.
처음 접하시는 분들은 이런것도 있구나라는 개념만 머릿속에 숙지하시면 될거 같습니다.
너무 머리싸매며 괴로워하지 마세요.^^;;


정리

선언적함수
function 키워드로 시작하는 함수로 한번만 파싱되며 정적인 형태입니다.

익명함수
new 연사자로 생성자를 호출해 동적으로 함수내용을 바꿔주고 싶을대 사용한다.

함수리터럴(함수식)
다른 구문내에서 식의 한 부분으로 생성된 함수.
선언적 함수처럼 한번만 파싱되며 정적인 형태.
함수명은 지정할수도 있고 안할수도 있다.


여기까지 자바스크립트내에서 함수를 선언하는 방법에 대해서 배워봤습니다.
이것을 응용하는 방법은 아주 많은 형태가 있습니다만 거기까진 너무 내용이 방대해질것 같아 다루지 않았습니다.
추후에 몇가지 기법들을 알아보도록 하고 오늘은 여기까지 하도록 하지요.

다음 시간에는 배열에 대해서 알아보도록 하지요.
그럼 다음시간에 뵈요~~ bye~~

글쓴이 : 김정용
작성일 : 2008. 2. 24(일)

-------- 반복문 연습코드 ---------------------------

1. 1부터 10사이의 짝수만 출력하기

1부터 10까지 뺑뺑이를 돌면서 if문을 이용해 짝수인지 판단합니다.
짝수인지 판단하는 방법은 2로 나눠서 나머지가 없다면 짝수겠죠?
나머지를 구하는것은 % 연산자를 쓰시면 됩니다.


2. 구구단 출력하기

<script type="text/javascript">
//<![CDATA[

for (var i=1; i <= 10; i++){
    for(var j=1; j <= 10; j++){
       var res = i * j;
       document.write(i + "*" + j + "=" + res + "<br />");
    }
}
//]]>
</script>

출력방식은 간단하게 한줄씩 나오도록 했습니다.
출력방식을 바꿔보는것도 연습에 많은 도움이 될겁니다. 한번 바꿔서 출력해보세요~^^

3. 1부터 10사이의 소수 출력

소수를 구하는 방법은 여러가지가 있지만 저는 이런식으로 하였습니다.
직접 작성해보시고 한번 비교해 보시는게 좋을거 같아요.
설명을 하자면
일단 for문을 이용하여 구하고 싶은 범위의 숫자를 지정합니다.
그리고 chk라는 변수를 이용해서 소수일때는 true를 대입하고 아닐때는 false를 대입하는 역할을 하게 합니다.

for문을 이용해서 판별하는 수를 2부터 그 사이값들로 나눠봅니다.

if문에서는 다음과 같은 사항을 체크합니다.
이 사이값들로 나눠지는게 하나라도 있다면 그것은 소수가 아닙니다.
반대로 이 사이값들중 나눠지는게 하나도 없다면 소수겠죠.

위 식에선 예외가 하나 있습니다. 바로 2라는 수입니다.
체크하는 범위가 2부터 체크하기 때문에 2는 소수가 아닌걸로 판단됩니다.
그래서 if문을 이용해 예외를 처리해주지요.

마지막으로 if문을 이용해 chk 변수를 검사하여 true 이면 소수니까 출력을 하게 됩니다.

4. 1부터 10까지의 수를 모두 더하세요.

저번 시간에 내드렸던 연습코드 4문제였습니다.
어떠신가요? 직접 작성하신 코드랑 비슷하신가요?
프로그래밍을 할땐 정답이 되는 코드는 없습니다. 단지 최적화된 코드가 존재할뿐이며 누구라도 그러한 최적화된 코드를 작성하실수 있습니다.

시작은 미약하지만 그 끝은 창대하리라!!

다같이 노력합시다.

그럼 다음시간에는 사용자 정의 함수에 대해서 알아보겠습니다.
그럼 ~ 몸 건강히 다음 시간에 뵈요.

글쓴이 : 김정용
작성일 : 2008. 2. 21(목) 따스하구만....


-------- 자바스크립트 반복문 ------------------

오늘은 반복문에 대하여 알아보겠습니다.

반복문이란건 일정조건에 해당하면 블럭안에 있는코드들이 반복해서 실행되며 그 조건이 거짓이 되면 반복문을 빠져나오는 구조를 가지고 있습니다.

반복문은 상당히 많이 쓰이기 때문에 혹시라도 프로그래밍에 접해본지 얼마 안되신분이라면 꼭 숙달하시기 바랍니다. 어려운 부분이 아니기 때문에 조금만 노력하시면 개념을 빨리 깨우칠수 있다고 생각합니다.

반복문에는 while문 do...while문 for문 for ... in 문 등등이 있습니다.
차례 차례 하나씩 배워가도록 하지요.


while문

구문)
while(조건식){
   실행문장
}

예제)

<html>
<head>
<title>1부터 10까지 출력</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var i = 1;

while(i <= 10){
    document.write("카운트 : " + i + "<br />");
    i++; //1씩 증가시켜줍니다.
}

document.write("while문 종료");
//]]>
</script>
</body>
</html>

위 예제에서는 1부터 10까지 출력하는 코드입니다.
i라는 변수에 1이라는 초기값을 주고 while문을 이용해 조건을 부여합니다.
i라는 변수가 10보다 작거나 크면 블럭안의 실행문장들을 실행시킨다는 말이죠.
여기서 i++ 이란건 i를 1씩 증가시키는 역할을 합니다. 결국엔 i가 11이 되면 조건식에 부합되지 않기때문에 빠져나오게 됩니다.


do...while문

구문)
do {
    실행문장
} while (조건식)

예제)

<html>
<head>
<title>1부터 10까지 출력</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var i = 1;

do{
    document.write("카운트 : " + i + "<br />");
    i++; //1씩 증가시켜줍니다.
}while(i > 1 && i <= 10)

document.write("do...while문 종료");
//]]>
</script>
</body>
</html>

while문이랑 형태가 비슷하나 틀린점이라면 조건식을 쓰는 while쪽이 밑으로 내려갔지요?
do...while문이란건 무조건 한번은 실행하고 조건을 검사하여 블럭내의 코드를 실행하는 구문입니다. 실생활의 예를 든다면 만약 학교에서 지각을 하면 운동장 다섯바퀴를 돌리는 선생님이 있다고 합시다. 그런데 이 선상님은 지각을 하지 않아도 운동장을 한반퀴는 돌라고 시킵니다.
눈물을 머금고 운동장을 돌게 되지요... 이게 바로 do...while문입니다.
조건식이 밑에 있기때문에 한번은 무조건 실행하게 되는것이지요. 이해 되시죠?

for문

구문)
for(초기값; 조건식; 가감연산){
    실행문장;
}

예제)

<html>
<head>
<title>1부터 10까지 출력</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[

for(var i = 0; i < 5; i++){
    document.write("요소 : " + i + "<br />");
}

//]]>
</script>
</body>
</html>

위 예제는 0부터 4까지 출력하는 예제입니다.
for문은 세단계의 형식으로 구성되어 있습니다.
실행순서는 아래와 같습니다.
1. var i = 0;     // 초기값을 설정합니다.
2. i < 5; //조건식을 검사합니다.

참일경우
3. 아래 문장을 실행합니다.
4. 문장을 다 실행하고 나서는 i++ 이 부분을 실행하여 값을 증가시킵니다.
5. 조건식을 검사합니다.
6. 참일경우 3,4,5번을 다시 실행합니다. 거짓일땐 빠져나오겠죠?

거짓일경우
3. 뒤도 안돌아보고 거냥~~~ 빠져나옵니다.


위 실행순서를 보시면 아시겠지만 초기값은 처음에만 설정되며 조건식과 가감연산만을 반복해서 실행합니다.


for ... in문은 배열에 접근할때 유용하게 쓰일수 있습니다. 아직 배열에 대해선 언급을 하지 않은 상태이니 추후에 함께 다루도록 하겠습니다.

위 3가지의 반복문 중에서 어떤것을 써야할지는 때에 따라 달라지며 많은 소스코드들을 보고 작성해보시면서 몸으로 익히시는 수밖에 없습니다.

약간의 훈련을 하기 위해 몇가지 예제를 준비하였습니다.
일단 혼자힘으로 풀어보시고 예제코드와 비교해보시기 바랍니다.

1. 1부터 10 사이의 짝수만 출력해보세요. (출력방식은 자유입니다)
2. 구구단을 출력해보세요. (1단부터 10단까지)
3. 1부터 10 사이의 소수만 출력해보세에요. (소수란건 약수가 1과 자기 자신뿐인수)
4. 1부터 10까지의 수를 모두 더하고 그 결과값을 출력해보세요.


일단 이 네가지만 풀어보시기 바랍니다.
네가지를 쉽게 푸실수 있다면 개념을 잡았다고 할수 있습니다. 하지만 쉽게 못푸신다고 하더라도 끝까지 포기하지 말고 연구하신다면 답이 보이실겁니다. 혼자서 해낼수 있을때 정말 프로그래밍의 재미를 느낄수 있으며 실력도 크게 향상이 된다는걸 명심하시고 시간이 걸리더라도 꼭 한번 풀어보시기 바랍니다.


풀이코드는 다음시간에 올리도록 하겠습니다.
다음시간에 뵙지요~ bye bye~~~

글쓴이 : 김정용
작성일 : 2008. 2. 16(토) 뭔놈의 추위가 가시질 않는구만...


-------- 자바스크립트 Switch문, 삼항연산자 ------------------

오늘은 스위~취!! 문과 삼항연산자에 대해서 알아보도록 하겄습니다!


Switch문 뭡니까?

스위치 !! 일상생활에서도 많이 들어보는 단어이지요. 불을 끄고 키는 스위치도 있고 방송장비등에 붙어있는 수많은 스위치들도 있고 주위를 둘러보면 스위치가 없는곳이 없습니다.

그렇다면 Switch 구문은 무엇을 하는 놈일까요?
바로 조건식의 결과가 여러가지일 경우 그 결과값을 비교하여 맞는놈의 블럭을 실행하는 구문입니다.

문법
switch (조건값) {
    case firstlabel :
       실행구문;
       break;
    case secondlabel :
       실행구문;
       break;
       .....
    case lastlabel :
       실행구문;
       break;
    default :
       실행구문;
}

위 구문을 설명하면 조건값을 case 뒤의 label값과 비교를 하여 같으면 콜론 뒤부터 실행을 시킨다. 그리고 break문을 만나면 switch 문을 빠져나오는 형태가 됩니다.
default는 해당되는 label값이 없을경우 기본적으로 실행되는 문장입니다.

2개 이상의 case문에 대해서 동일한 코드를 수행하고 싶을땐 아래와 같이 하세요.
case labelone :
case labeltwo :
case labelthree :
    실행 구문;
    break;

혹은

case labelone, labeltwo, labelthree :
    실행구문;
    break;


예제)

<html>
<head>
<script type="text/javascript">
//<![CDATA[

var attackUnit = "zealot";
var alertMsg = "";

switch (attackUnit) {
     case "zealot" :
          alertMsg = "질럿이니까 파뱃으로 조지자!!!";
          break;
     case "dragoon" :
     case "dark" :
     case "templar" :
          alertMsg = "이것들은 럴커로 조지자!!!";
          break;
     case "observer" :
          alertMsg = "이건 무시해";
          break;
     default :
          alertMsg = "이놈들은 정보가 부족하니 알아서 조져";
}

document.write(alertMsg);
//]]>
</script>
</head>
<body>
</body>
</html>

위 예제는 attackUnit 가 무엇이냐에 따라 대처방법을 웹브라우저에 띄우는 예제입니다.
switch 문에서 검사하는 값은 attackUnit 라는 변수값입니다.
이것을 switch (attackUnit) 로 표시를 해주고 case문을 이용하여 검사를 합니다.
첫번째 case에서는 zealot을 검사하는군요.
두번째는 3가지 값을 한번에 검사하여 그중에 한가지만 해당되면 그쪽의 실행구문을 실행합니다.
세번째는 observer를 검사합니다.
네번째는 default값으로 위 case문에서 일치하는 값이 없을경우 실행되는 문장입니다.
if문에서 else 구문이랑 똑같은 역할을 하지요.


삼항 조건 연산자

이건 좀 특이한 형태의 연산자로 일단 예를 보시겠습니다.

var nValue = 24;
var sResult = (nValue > 20) ? "오 20살 넘었는데~" : "아직 어리구만";

설명을 하면 (nValue > 20) 이 부분은 조건문이며 ? 뒤에 오는 것들은 참이냐 거짓이냐에 따라 반환되는 값을 명시해준겁니다. 간단하게 표기하자면 아래와 같습니다.

조건 ? 참일때 값 : 거짓일때의 값

실제로 이러한 삼항연산자는 유용하게 쓰일때가 많습니다. 예를 들자면 브라우저의 차이점을 파악하는데에도 쓰이며 간단한 조건문일경우 삼항연산자를 이용하시면 가독성도 좋아지고 소스코드도 줄일수 있다는 장점이 있습니다.

한가지 예를 들어보지요.
아래와 같은 코드를 삼항연산자로 바꿔보세요.

var unitName = "zealot";
var msg = "";

if (unitName == "zealot"){
    msg = "깡패같은 쉐이!!!";
} else {
    msg = "넌 누구냐!!!";
}

어떻게 바꿔야 될지 감이 오시나요? 안오신다면 아래를 보세요.

var msg = (unitName == "zealot") ? "깡패같은 쉐이!!!" : "넌 누구냐!!!";

소스코드가 간단해졌지요? ㅎㅎ


오늘은 여기까지 하도록 하겠습니다.
주말이라 힘들군요....전 내일 또 알바를 하러 가야 하니 아침일찍 일어나야겠습니다.

그럼 다음시간에는 반복문을 알아보도록 하자구요!!
끝까지 읽어주셔서 감사합니다.