작성자

freewebkorea

카테고리

비밀번호

제목

<HR class=grayHr>
 <A name=var_terminology></A>
<H2>Variable☞ vs ☜ 변수</H2>
Variable 은 우리가 일반적으로 변수라고 번역해서 부르는 영어 단어죠. 변수라는 단어를 보면 왠지 수학 생각이 나지 않습니까? 저도 JavaScript가 처음 접하는 프로그램은 아니지만 처음에 프로그램을 배울 때 변수라는 단어 때문에 무척 고생을 했던 기억이 나는군요. 우선 제가 단언하는데 프로그램에서 variable은 수학 용어인 변수가 결코 아닙니다. 고정관념에 사로 잡히면 variable이라는 용어를 이해하는데 애를 먹게 됩니다. 그럼 재미 삼아 앞으로 우리가 얼마나 더 살지 한 번 계산해 보도록 하죠.앞으로 얼마나 더 살까? 
<DIV class=input>x = 앞으로 살 날들 y = 돌아 가실 날 z = 지금까지 산 날들 x = y - z </DIV> 
물론 이해 하시리라 믿습니다. 위의 수식 x = y - z 가 과연 수학적인 식 일까요? 이건 형태상 수학적이긴 하지만 이 식에서 수학적인 부분은 (=) 부호와 (-) 그리고 x, y, z에 값을 대입했다는 사실 뿐입니다. 이 수식은 다분히 컴퓨터의 프로그램적인 수식입니다. 또 한가지... 수학에서의 변수는 그 값이 뭔지 처음부터 알 수 없기 때문에 계산을 해서 알아 내지만, 컴퓨터 프로그램에서의 변수는 자기의 의도 대로 값을 지정 할 수 있다는 점 입니다. 의도한 대로 지정 한다... 이 말은 곧 내가 넣고 싶은 값을 넣는다 라는 말과 같은 말 아니겠습니까? 즉, 프로그래밍에서의 Variable 이란 수학 용어인 변수가 아닌 '뭘 담을지 모르지만 사용자가 지정한 Data를 담는 저장소' 라고 표현하는 것이 옳습니다. 하지만 제가 아무리 곰곰 생각을 해 봐도 뭐라고 부를 적당한 단어가 생각나지 않기 때문에, 아니 생각을 못 했기 때문에 그냥 관례상 변수라고 부르겠습니다. 혹시 이 문서를 읽는 분 중에서 적당한 단어가 생각나면 쩜 알려 주시기 바랍니다.<A name=var_naming></A>
<HR class=grayHr>
 변수 이름 만드는 방법 
뭐 든지 그렇지만 이름이란 매우 중요한 것이져. 사람의 경우에는 출생신고를 하고 나중에 커서 이름을 바꾸려면 재판까지 해야 되지 않습니까. 물론 변수의 경우는 그렇지 않습니다만, 연습이 아닌 실제 프로젝트를 진행한다면 일단 변수 이름을 만들고 나중에 고친다는 것이 결코 만만한 일이 아닙니다. 특히 외부 JavaScriipt 파일을 링크시켜서 여러개의 파일에서 사용할 경우 파일이 많아지면 도무지 어떤 파일에서 어떤 변수를 사용했는지 알아 내기가 여간 까다로운게 아니져. 뒤에 나올 ASP 에서도 마찬가지입니다. 왜 이름에 대해서 이렇게 강조를 하느냐 하면 실제 프로젝트 파일에서 사용되는 변수는 적게는 수 십개에서 수 백개가 되는 경우가 허다합니다. 그렇기 때문에 심지어는 변수를 만들 때 변수에 대한 설명 파일을 따로 하나 만들 정도니까요. 나중엔 스스로도 헤깔리거든요. 더구나 여러 사람이 공동으로 하는 프로젝트에서는 필수적인 작업입니다. 예를 들면 아래와 같이입력 
<DIV class=input>var strName //사용자 이름 var strAddress //사용자 주소 ... ... </DIV>
뭐 이런 식으로 옆에 comment를 붙인다든지 해서 말이져... 그리고 조금 귀찮더라도 나중에 알아 볼 수 있게 이름을 붙이는게 좋겠습니다. 귀찮다고 a, aa, x, xy 머 이런 식으로 붙이기 보다 cellBorder, cellColor 등으로 보기만 해도 아! cell의 Border 에 대한 변수구나... 하는 식으로 좀 구체적인 이름이 좋겠습니다. 다음은 변수 이름을 만드는데 지켜져야 될 사항입니다.
<UL class=lineHeight>
<LI class=ulColor>변수 이름의 시작은 문자나 underscore ( _ )로 시작한다. 
<LI class=ulColor>변수 이름은 대소문자를 확실하게 구분(case-sensitive)하기 때문에 예를 들어 cellBorder와 cellborder 는 전혀 다른 것 입니다. 
<LI class=ulColor>아래와 같이 JavaScript 문장에서 사용하는 Keyword는 변수이름으로 사용하지 않습니다. 경우에 따라 여러가지 에러가 납니다. 따라서 Keyword인지 아닌지 잘 기억이 나지않고 아리까리 하다면 시작을 underscore로 하면 확실합니다. 예를 들어 아래에 Keyword 중에서 boolean은 변수 이름으로 사용할 수 없지만 _boolean 으로 이름을 주면 사용 가능하다는 말입니다. </LI></UL>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=5>변수 이름으로 쓸 수 없는 JavaScript Keywords</TD></TR>
<COLGROUP>
<COL class=syntaxRightCell style="FONT-WEIGHT: bold" span=5>
<TBODY>
<TR>
<TD width="20%">abstract</TD>
<TD width="20%">boolean</TD>
<TD width="20%">break</TD>
<TD width="20%">byte</TD>
<TD width="20%">case</TD></TR>
<TR>
<TD>catch</TD>
<TD>char</TD>
<TD>class</TD>
<TD>const</TD>
<TD>continue</TD></TR>
<TR>
<TD>default</TD>
<TD>do</TD>
<TD>double</TD>
<TD>else</TD>
<TD>extends</TD></TR>
<TR>
<TD>false</TD>
<TD>final</TD>
<TD>finally</TD>
<TD>float</TD>
<TD>for</TD></TR>
<TR>
<TD>function</TD>
<TD>goto</TD>
<TD>if</TD>
<TD>implements</TD>
<TD>import</TD></TR>
<TR>
<TD>in</TD>
<TD>instanceof</TD>
<TD>int</TD>
<TD>interface</TD>
<TD>long</TD></TR>
<TR>
<TD>native</TD>
<TD>new</TD>
<TD>null</TD>
<TD>package</TD>
<TD>private</TD></TR>
<TR>
<TD>protected</TD>
<TD>public</TD>
<TD>return</TD>
<TD>short</TD>
<TD>static</TD></TR>
<TR>
<TD>super</TD>
<TD>switch</TD>
<TD>synchronized</TD>
<TD>this</TD>
<TD>throw</TD></TR>
<TR>
<TD>throws</TD>
<TD>transient</TD>
<TD>true</TD>
<TD>try</TD>
<TD>var</TD></TR>
<TR>
<TD>void</TD>
<TD>while</TD>
<TD>with</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE> <A name=var_declaration></A>
<HR class=grayHr>
 변수에 값을 지정하는 방법 
이 부분에서는 변수를 어떻게 지정하고 어떻게 사용하는지에 대해 알아 보겠습니다. 변수를 지정하는 방법에는 대체적으로 3 가지 형태가 있습니다.1. var (variable) Keyword로 변수를 지정하고 Data 까지 한꺼번에 저장하는 방법 
<DIV class=input>var a = 3 &nbsp;&nbsp;&nbsp;// a 라는 변수를 만들고 3 이라는 Data를 a에 저장하라! </DIV> 2. var 로 변수를 지정하고 Data는 나중에 저장하는 방법 
<DIV class=input>var a; &nbsp;&nbsp;&nbsp;&nbsp;// a 라는 변수를 만들고 a = 3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//3 이라는 Data를 a에 저장하라! </DIV> 3. var을 사용하지 않고 변수명만 지정하고 Data를 저장하는 방법 
<DIV class=input>a = 3 &nbsp;&nbsp;&nbsp;//변수 a 에 3 이라는 Data를 a에 저장하라! </DIV>
이렇게 위의 3가지 방법이 있는데, 모두 똑 같습니다. 다음은 위의 두 번째 방법으로 여러 개의 변수명을 지정하고 값을 나중에 지정하는 방법입니다. 
<DIV class=input>var a, b, c;&nbsp;&nbsp;// 변수 a, b, c 를 동시에 지정 a = 1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 변수 a에 1을 저장 b = 2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 변수 b에 2를 저장 c = 3;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 변수 c에 3을 저장 </DIV> <A name=what_is_good></A>
<HR class=grayHr>
 변수를 사용하면 뭐가 좋은가... 
변수가 얼마나 좋은 건지 앞 페이지에서 배운 document.write 명령을 사용하여 변수를 화면에 출력해 봅니다.입력 <PRE class=input id=var01>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;변수를 사용하여 화면에 출력하기&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var str01 = "처음으로 작성한 script" 
 document.write(str01)
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(var01);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
출력 결과는 '처음으로 작성한 script' 입니다. 앞 페이지의 결과와 똑 같습니다. 그런데 굳이 이렇게 타자도 많이 쳐 가면서 왜 변수를 사용하는지 궁금하겠지만, 일단 앞 페이지에서 document.write로 출력한 '처음으로 작성한 script' 와 어떤 점이 다른지 비교해 보시져. 앞 페이지에서는 document.write("처음으로 작성한 script") 로 괄호 안의 문자열을 따옴표로 둘렀습니다만 이 번 처럼 str01 이라는 변수를 사용했을 경우에는 document.write(str01) 과 같이 str01을 따옴표속에 넣지 않았습니다. 이와 같이 변수에 넣은 Data를 출력할 때는 변수를 따옴표로 두르지 않습니다. 그럼 만약 변수를 따옴표로 두르면 어떻게 될까요... 아래의 코드를 실행해 보시져...<PRE class=input id=var02>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;변수를 따옴표 속에 넣으면 어떻게 될까.&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var str01 = "처음으로 작성한 script" 
 document.write("str01")
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(var02);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
결과는 str01 이 됩니다. 이와 같이 변수이건 숫자이건 따옴표 속에 들어가면 문자열로 취급합니다. 이건 아주 조심해야 될 부분 입니다. 예를 들어 그냥 1 과 "1"은 전혀 다르다는 거져. 그냥 1은 계산이 가능한 숫자이지만 "1"은 계산 할 수 없는 문자이기 때문입니다. 이 부분에 대해서는 다음 페이지의 Operator 에서 자세히 다루기로 하고 변수를 사용하면 좋은 이유를 아래의 애국가 예제로 설명 하겠습니다. 이 예제는 또한 앞 부분에서 JavaScript를 소개하면서 '단순히 반복되는 지겨운 일을 JavaScript에게 시켜서 단순 작업에서 벗어난다.' 라는 말에 대한 설명이기도 합니다. 그러면 여러 분... 다 같이 일어서서 경건한 마음으로 군인과 경찰은 경례를 일반인은 가슴에 손을 얹어 주시기 바랍니다. 물론 남의 가슴이 아니고 자기 가슴에...입력 <PRE class=input id=var03>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;애국가&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var postLyric = "무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세"
 document.write("동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세&lt;br /&gt;") 
 document.write(postLyric + "&lt;br /&gt;&lt;br /&gt;")
 document.write("남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세&lt;br /&gt;")
 document.write(postLyric + "&lt;br /&gt;&lt;br /&gt;")
 document.write("가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세&lt;br /&gt;")
 document.write(postLyric + "&lt;br /&gt;&lt;br /&gt;")
 document.write("이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세&lt;br /&gt;")
 document.write(postLyric)
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(var03);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
혹시 위의 소스 코드를 보고 "그냥 4번 복사하면 되지 그게 머가 그리 편리하냐?" 라고 생각하시는 분들... 위의 결과만 가지고 보면 맞는 말씀입니다. 하지만 위의 예제는 간단한 예를 든거고 정말 변수가 좋은 점은 차차 설명 된다는 것으로 일단 대답을 대신하겠습니다. 그리고 위의 코드 중 (postLyric + "&lt;br /&gt;&lt;br /&gt;") 부분은 다음 페이지의 Operator(연산기호) 부분에서 자세히 설명하겠습니다.<A id=js_special_character name=js_special_character></A>
<HR class=grayHr>
 특수 문자의 출력과 따옴표의 처리 
앞에서도 언급했지만 문자열은 따옴표 속에 들어 간다고 했습니다. 이런 경우도 있습니다. 문자열을 출력하는데 예를 들어서 "우리 나라 만세!" 와 같이 따옴표 속에 어떤 단어나 문장을 넣어야 할 필요가 있을 때는 3 가지 정도의 방법이 있습니다.
<OL class=lineheight>
<LI class=ulColor>HTML 의 <A href="http://www.cadvance.org/doc/html/beginner/font.asp#escape">특수문자(HTML Token)</A>를 사용하는 방법 
<LI class=ulColor>JavaScript의 특수 문자를 사용하는 방법 아래의 특수 문자들을 필요한 부분에 끼워 넣습니다. 
<UL class=lineHeight>
<LI class=indexColor>n : 줄바꿈 
<LI class=indexColor>" : 이중 따옴표 
<LI class=indexColor>' : 단순 따옴표 
<LI class=indexColor>r : Enter 
<LI class=indexColor> : Back slash </LI></UL>
<LI class=ulColor>따옴표를 반대로 찍는 방법 </LI></OL>
이렇게 3가지 정도의 방법이 있겠습니다.입력 <PRE class=input id=pre_1>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var dw = document.write // 변수를 이런 식으로도 사용할 수 있습니다.
 dw("&amp;quot;우리 나라 만세!&amp;quot;&lt;br /&gt;") //&amp;quot;를 사용했습니다.
 dw(""우리 나라 만세!"&lt;br /&gt;") //JavaScript 특수 문자 " 를 사용했습니다.
 dw('"우리 나라 만세!" &lt;br /&gt;') //바깥을 단순 따옴표, 안을 이중 따옴표를 뒤 바꾸었습니다.
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(pre_1);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)