작성자

freewebkorea

카테고리

비밀번호

제목

<H2>JavaScript 의 연산 기호</H2>
Operator 라는 영어 단어는 흔이 수학이나 컴퓨터 서적 등에서 연산자(演算子) 라고 부르는 단어 인데 子 라는 단어는 탁자나 의자 같이 물건에 붙이는 접미어인 것 처럼 Operator 뒤에 붙은 or을 사람이나 사물로 취급하여 붙인 한자 인 것 같습니다. 이 사이트에서는 연산자 보다는 그냥 영어 단어로 Operator 또는 연산 기호로 부르겠습니다. JavaScript 에서는 계산할 때의 수식 이나 조건문에 들어가는 논리 연산 기호등이 많이 사용됩니다. 이번 페이지에서는 연산 기호의 종류에는 어떤 것이 있고, 사용법과 간단한 예제를 다루어 보겠습니다. 이 번 페이지에서 다룰 연산 기호의 종류는 다음과 같습니다. 페이지 목차 
<UL class=lineHeight>
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_operator.asp#arithmetic_operator">산술 연산 기호</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_operator.asp#assignment_operator">할당 연산 기호</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_operator.asp#comparision_operator">비교 연산 기호</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_operator.asp#logical_operator">논리 연산 기호</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_operator.asp#string_operator">문자열 합치기 기호</A> </LI></UL><A name=arithmetic_operator>
<HR class=grayHr>
</A> 산술 연산 기호 
산술 연산 기호는 문자 그대로 산술 계산에 사용하는 연산 부호 입니다. 따라서 긴 설명은 필요없을 것 같고 다만 컴퓨터에서는 ÷(나누기) 표시를 /(slash) 로 하고 ×(곱하기) 표시를 *(asterisk)로 한다는 정도로만 설명하겠습니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=4>Arithmetic Operators</TD></TR>
<COLGROUP>
<COL class=syntaxRightCell span=4>
<TBODY>
<TR>
<TH>Operator</TH>
<TH>설명</TH>
<TH>사용 예</TH>
<TH>결 과</TH></TR>
<TR>
<TD vAlign=top>+</TD>
<TD vAlign=top>더하기 </TD>
<TD vAlign=top>x = 2 x + 2 </TD>
<TD vAlign=top>4 </TD></TR>
<TR>
<TD vAlign=top>-</TD>
<TD vAlign=top>빼기 </TD>
<TD vAlign=top>x = 2 5 - x </TD>
<TD vAlign=top>3 </TD></TR>
<TR>
<TD vAlign=top>*</TD>
<TD vAlign=top>곱하기 </TD>
<TD vAlign=top>x = 4 x * 5</TD>
<TD vAlign=top>20 </TD></TR>
<TR>
<TD vAlign=top>/</TD>
<TD vAlign=top>나누기 </TD>
<TD vAlign=top>15 / 5 5 / 2 </TD>
<TD vAlign=top>3 2.5</TD></TR>
<TR>
<TD vAlign=top>%</TD>
<TD vAlign=top>Modulus (나눈 나머지) </TD>
<TD vAlign=top>5 % 2 10 % 8 10 % 2</TD>
<TD vAlign=top>1 2 0</TD></TR>
<TR>
<TD vAlign=top>++</TD>
<TD vAlign=top>증가(Increment)</TD>
<TD vAlign=top>x = 5 x++ </TD>
<TD vAlign=top>x = 6 </TD></TR>
<TR>
<TD vAlign=top>--</TD>
<TD vAlign=top>감소(Decrement)</TD>
<TD vAlign=top>x = 5 x-- </TD>
<TD vAlign=top>x = 4 </TD></TR></TBODY></TABLE> <A name=assignment_operator>
<HR class=grayHr>
</A> 할당 연산 기호 
할당 연산 기호는 일명 대입 연산자 라고도 부르는 Operator 인데 앞 페이지의 Variable 에서 설명한 대로 변수에 어떤 값을 할당하기 위한 Operator 입니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=4>Assignment Operators</TD></TR>
<COLGROUP>
<COL class=syntaxRightCell span=4>
<TBODY>
<TR>
<TH>Operator</TH>
<TH>사용 예는</TH>
<TH>아래의 수식과 같음.</TH>
<TH>설명</TH></TR>
<TR>
<TD vAlign=top>=</TD>
<TD vAlign=top>x = y</TD>
<TD vAlign=top>x = y</TD>
<TD>x 라는 변수에 y 라는 값을 넣어라.</TD></TR>
<TR>
<TD vAlign=top>+=</TD>
<TD vAlign=top>x += y</TD>
<TD vAlign=top>x = x + y</TD>
<TD>x 라는 변수에 x와 y를 더한 값을 넣어라.</TD></TR>
<TR>
<TD vAlign=top>-=</TD>
<TD vAlign=top>x -= y</TD>
<TD vAlign=top>x = x - y</TD>
<TD>x 라는 변수에 x에서 y를 뺀 값을 넣어라.</TD></TR>
<TR>
<TD vAlign=top>*=</TD>
<TD vAlign=top>x *= y</TD>
<TD vAlign=top>x = x * y</TD>
<TD>x 라는 변수에 x와 y를 곱한 값을 넣어라.</TD></TR>
<TR>
<TD vAlign=top>/=</TD>
<TD vAlign=top>x /= y</TD>
<TD vAlign=top>x = x / y</TD>
<TD>x 라는 변수에 x를 y로 나눈 값을 넣어라.</TD></TR>
<TR>
<TD vAlign=top>%=</TD>
<TD vAlign=top>x %= y</TD>
<TD vAlign=top>x = x % y</TD>
<TD>x 라는 변수에 x를 y로 나누고 남은 값을 넣어라.</TD></TR></TBODY></TABLE> <A name=comparision_operator>
<HR class=grayHr>
</A> 비교 연산 기호 
비교 연산 기호는 2 개의 값을 비교하여조건에 맞을 경우 true(참) 값을을 return(반환) 하고 조건에 맞지 않을 경우 false(거짓) 값을 return 하여 그 결과에 따라 각기 다른 지시 내용을 수행 할 수 있게 해주는 연산 기호 입니다. 아래 표의 return true, return false 는 참 또는 거짓의 값을 반환 한다는 뜻 입니다. 뒤에 나올 조건문에서 많이 사용되는 연산 기호져.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=3>Comparison Operators</TD></TR>
<COLGROUP>
<COL class=syntaxRightCell span=3>
<TBODY>
<TR>
<TH>Operator</TH>
<TH>설명</TH>
<TH>사용 예</TH></TR>
<TR>
<TD vAlign=top>==</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇과 같다.</TD>
<TD vAlign=top>5 == 8 returns false</TD></TR>
<TR>
<TD vAlign=top>!=</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇과 같지 않다.</TD>
<TD vAlign=top>5 != 8 returns true</TD></TR>
<TR>
<TD vAlign=top>&gt;</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇 보다 크다.</TD>
<TD vAlign=top>5 &gt; 8 returns false</TD></TR>
<TR>
<TD vAlign=top>&lt;</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇 보다 작다.</TD>
<TD vAlign=top>5 &lt; 8 returns true</TD></TR>
<TR>
<TD vAlign=top>&gt;=</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇 보다 크거나 무엇과 같다.</TD>
<TD vAlign=top>5 &gt;= 8 returns false</TD></TR>
<TR>
<TD vAlign=top>&lt;=</TD>
<TD vAlign=top>무엇과 비교 했을 때 무엇 보다 작거나 무엇과 같다.</TD>
<TD vAlign=top>5 &lt;= 8 returns true</TD></TR></TBODY></TABLE> <A name=logical_operator>
<HR class=grayHr>
</A> 논리 연산 기호 
논리 연산 기호 역시 조건문의 조건식을 만들 때 사용하는 연산 기호로서 and, or, not 등이 있습니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=3>Logical Operators</TD></TR>
<COLGROUP>
<COL class=syntaxRightCell span=3>
<TBODY>
<TR>
<TH>Operator</TH>
<TH>설명</TH>
<TH>사용 예</TH></TR>
<TR>
<TD vAlign=top>&amp;&amp;</TD>
<TD vAlign=top>and a &amp;&amp; b 이면 조건 a와 조건 b를 모두 만족 시켜야 true</TD>
<TD vAlign=top>x = 6 y = 3 
(x &lt; 10 &amp;&amp; y &gt; 1) returns true</TD></TR>
<TR>
<TD vAlign=top>||</TD>
<TD vAlign=top>or a || b 이면 조건 a와 조건 b 둘 중 하나 이상만 만족 시키면 true</TD>
<TD vAlign=top>x = 6 y = 3 
(x == 5 || y == 5) returns false</TD></TR>
<TR>
<TD vAlign=top>!</TD>
<TD vAlign=top>not a != b 이면 a와 b가 같지 않으면 true</TD>
<TD vAlign=top>x = 6 y = 3 
!(x == y) returns true</TD></TR></TBODY></TABLE> <A name=string_operator>
<HR class=grayHr>
</A> 문자열 합치기 기호(String Operator) 
문자열 합치기 기호는 그저 단순히 + 기호인데, 기호가 중요한게 아니라 어떻게 쓰느냐가 중요하다고 할 수 있겠습니다. 문자열을 합친다는 것은 문자, 단어, 문장 등의 문자들을 합친다는 의미인데 우선 왜 그래야 되는지부터 알아야 되겠군요. 간단히 설명을 하고 예제를 하나 보겠습니다. 문자열이 " " 속에 들어 간다는 사실은 Variable에서 설명했으니까 아실거고, 변수는 " " 속에 들어 가지 않으며 따옴표 속에 들어가면 변수도 문자로 취급된다고 했져... 전체가 문자열이라면 구태여 합치고 뭐고 할게 없겠지만 문자열과 변수를 합쳐야 할 때가 많기 때문에 하나의 연산 기호로 따로 취급을 했습니다. 그럼 예제를 보져...변수 끼리 합친 경우 <PRE class=input id=operator_ex01>&lt;body&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 txt1 = "Web designer"
 txt2 = " must be creative."
 txt3 = txt1 + txt2
 document.write(txt3)
 // --&gt;
 &lt;/script&gt;
&lt;/body&gt;
</PRE><A href="javascript:copy2Clipboard(operator_ex01);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
위의 txt2 = " must be creative."부분을 보면 "와 must be creative."사이에 space 가 들어가 있는 것을 확인 할 수 있습니다. 만약 "must be creative." 처럼 공백을 주지 않으면 어떻게 될까요? txt3을 출력했을 때 Web designermust be creative 로 출력 됩니다. 이와 같이 문자가 담긴 변수들을 합칠 때는 어디서 space를 주어야 되는지가 무지 유의해야 될 부분 입니다. 그러면 이 번에는 변수와 문자열을 합칠 경우를 생각해 보져. 우선 위의 txt3 을 굵은 글씨로 출력하려면 어떻게 할까요? scripting이 아닌 HTML 코드 만으로 입력한다면 아래와 같겠죠. b element를 사용해서 말이져...입력 
<DIV class=input>... &lt;body&gt; &nbsp;&nbsp;&lt;b&gt;Web designer must be creative&lt;/b&gt; &lt;/body&gt; ... </DIV>
하지만 이걸 scripting 하면 아래와 같습니다.변수와 문자열을 합친 경우 <PRE class=input id=operator_ex02>&lt;body&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 txt1 = "Web designer"
 txt2 = " must be creative."
 txt3 = "&lt;b&gt;" + txt1 + txt2 + "&lt;/b&gt;"
 document.write(txt3)
 // --&gt;
 &lt;/script&gt;
&lt;/body&gt;
</PRE><A href="javascript:copy2Clipboard(operator_ex02);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
txt3 = "&lt;b&gt;" + txt1 + txt2 + "&lt;/b&gt;" 중에서 갈색 글씨 부분이 추가된거 맞져? 이렇게 해서 txt3 이라는 변수에는 결과적으로 &lt;b&gt;Web designer must be creative&lt;/b&gt; 라는 값이 들어가게 되고, document.write 에 의해서 Body 에 출력이 되면 Web designer must be creative 라는 출력이 나오게 되는거져. 그런데 처음에는 이게 coding 하기가 무척 헷갈립니다. 한 번 정리를 해 보져.
<OL class=lineheight>
<LI class=ulcolor>변수는 따옴표 속에 넣지 않는다. 
<LI class=ulcolor>문자열은 따옴표 속에 넣는다. 
<LI class=ulcolor>변수와 문자열을 합치든, 변수끼리 합치든 그 사이에는 + 로 연결 시킨다. </LI></OL> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

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