Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 변수, 상수, 자료형, 연산자 본문

Programming/HTML

HTML - 변수, 상수, 자료형, 연산자

Programmer. 2015. 8. 23. 11:03

변수와 상수


    • 프로그램에서 수치, 문자, 문자열등과 같이 직접 작성한 데이터를 상수 또는 리터럴(Literal)이라 하며, 데이터를 저장 할 수 있도록 기억장소에 이름을 부여한 것을 변수라고 합니다. 변수와 상수의 차이점은 변수는 그 안의 데이터값을 바꿀 수 있지만 상수는 데이더값이 정해져 있기 떄문에 바꿀 수가 없습니다.

상수 또는 리터럴의 사용

    • 리터럴(Literal) 또는 상수는 프로그램 내에서 사용되는 고정된 값을 말합니다. 지금까지의 예제에서 document.write()명령어의 괄호안에 있는 문자열 같은경우가 바로 이 리터럴에 해당합니다. 리터럴의 종류는 숫자, 문자열, 논리형, NULL이 있습니다.

    • 숫자형(NUMBER) 리터럴은 다시 정수형과 실수형으로 구분하는데 이는 컴퓨터는 숫자를 정수와 실수로 구분하여 처리하기 떄문입니다. 정수(Integer)는 소수점 이하의 값을 다르지 않는 숫자를 의미합니다. 정수를 표현하는 방법에는 일반적으로 10진법(decimal)을 사용하며 8빈법(octal)이나 16진법(hexademical)로도 표기할 수 있습니다. 실수(Floating Value)는 소수점 이하의 수치를 다룰 수 있는 숫자 형태를 나타냅니다. 자바스크립트에서의 실수 연산은 다소간의 수치의 오차를 나타내기도 합니다. 그렇기 떄문에 이를 염두하고 실수를 다뤄야 합니다. 숫자형 티러럴은 다음과 같은 것들이 있습니다.
      정수형 : 365, 043(8진수),0xFF1(16진수)
      실수형 : 3.1415,2.1E04(2.1x104), -3.928

    • string(문자열) 리터럴 : 문자열이라는 것은 0개 혹은 그 이상의 문자들로 구성된 큰따옴표 또는 작은따옴표로 묶여진 문자들의 나열로 정의됩니다. 즉 길이가 0인 문자열도 존재가 가능합니다. 다음은 문자열의 예입니다.
      문자열 : "Hello",'Welcome',""

    • boolean(논리형) : 논리형은 비교(>,<,=)연산이나 논리연산에 사용되는 값인 참과 거짓을 나타내는 true(참), false(거짓) 두가지 값만 갖는 자료형입니다.

    • null : null은 지정되지 않은 값, 정의되지 않은 상태를 나타내는 값을 나타내는 목적으로 특수하게 사용되는 자료형입니다. 예를 들어서 prompt대화창에 취소 버튼을 눌렀을 때 반환되는 값이 NULL입니다. 자바스크립트에서의 null은 길이가 0인 문자열 ""와는 다름을 기억해야합니다.

변수의 선언과 사용


    • 프로그램에는 이름을 가지면서 어떤 값을 저장할 수 있는 기억공간이 필요합니다. 이러한 이름을 가지는 기억공간을 변수(Variabe)이라고 합니다. 대부분 프로그래밍 언어에서는 변수를 사용하기 전에 그 변수의 이름, 자료형, 크기, 등의 정보를 프로그램의 서두에 미리 선언해줌으로써 컴퓨터에게 미리 준비하도록 해야합니다. 하지만 자바스크립트에서는 변수를 선언하지 않고도 사용은 허용합니다.

    • 변수를 선언하려면 var이라는 명령어를 이용하여 선언합니다. 다음은 Variable이라는 변수를 사용하겠다는 의미의 변수 선언문입니다.
      var Variable;

    • 변수를 선언함과 동시에 그 변수에 값을 할당 할 수도 있습니다. 아래는 Variable이라는 이름의 변수를 선언함과 동시에 이 변수의 값으로 similiar 이라는 문자열을 할당하고 있습니다.
      var Variable="similiar";

    • 일반적으로 =라는 연산자는 오른편에 있는 내용을 왼편에 할당하라는 대입연산자를 나타냅니다. 일반적인 수학에서의 =(equal)과 같이 왼쪽과 오른쪽 값이 같아진다는 자바스크립트의 표현은 관계연산자 == 로 나타냅니다. 변수에 값을 넣을 때는 변수가 왼쪽 대입대상이 오른쪽으로 항상 있어야 하며 보통 수학에서는 없는 x=x+1의 경우는 "현재의 x값에서 1을 더하여 x에 저장하여라" 로 해석됩니다.

    • 변수명 작성원칙 : 변수명은 첫 글자가 반드시 알파벳 문자나 밑줄문자(_)여야 하며 두번째 부터는 알파벳, 밑줄, 숫자 모두 됩니다. 변수명에서는 대소문자를 구분합니다. 같은 문자여도 대문자 소문자를 다르게 인지합니다. 또한 이미 자바스크립트에서 사용되는 지정어(예약어)는 변수명으로 사용할 수 없습니다. 사용할 수 있는 변수와 사용할 수 없는 변수들의 예시입니다.
      사용가능한 변수 : _123i, variable, Variable
      사용불가한 변수 : 변수, 123i, ~num, if

지금까지 있었던 변수들을 소스를 통해서 알아보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
    <HEAD>
        <TITLE>
            변수,상수
        </TITLE>
    </HEAD>
    <SCRIPT language="JavaScript">
        var name;
        var IQ=120;
        name=prompt("당신의 이름은 무엇인가요?","이름");
    </SCRIPT>
    <BODY>
        <SCRIPT language = "JavaScript">
            document.write('안녕하세요' + name +'님.<BR>');
            document.write('당신의 IQ는' +IQ+ '입니다!');
        </SCRIPT>
    </BODY>
</HTML>
cs
다음의 결과는 다음과 같습니다.



지역변수와 전역변수

    • 변수는 사용되는 번위에 따라서 전역변수, 지역변수로 나뉘게 됩니다. 전역변수는 프로그램 전체에서 사용되는 변수이며, 지역변수는 프로그램 내의 특정 블록에서만 사용되는 변수 입니다. 따라서 지역변수는 변수가 선언된 블록 ( { } ) 내에서만 기억된 값이 유지됩니다. 특정 블록내에서 선언된 지역변수명과 동일한 이름의 변수를 다른 블록에서 사용한다면 변수명은 같더라도 다른 변수로 인식하게 됩니다. 다음 소스를 통해서 확인해 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>
    <HEAD>
        <TITLE>
            지역, 전역 변수
        </TITLE>
        <SCRIPT language="javascript">
            var i="전역 i" 
            function func1()
            {
                var j="지역 j"
                document.write("func1() : i =  "+ i +" j = "+j+"<BR>")
            }
            function func2()
            {
                var i="지역 i"
                document.write("func2() : i =  "+  i  )
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <SCRIPT language = "javascript">
            func1()
            func2()
        </SCRIPT>
    </BODY>
</HTML>
cs

다음 소스의 결과는 다음과 같습니다.


연산자


    • 연산자는 산술, 비교, 논리 등의 연산식에 사용되는 기호를 말하며 수학에서의 연산자와 유사한 역할을 수행합니다. 여기서 연산식이라함은 연산의 대상이 되는 상수, 변수 등을 연산자로 연결한 것을 의미합니다. +나 -같은 것을 연산자Operator)라고 하며 계산 하는 대상 숫자들은 피연산자(Operand)라고 합니다. 프로그래밍에서는 연산자를 이용한 연산식은 변수값을 변경하거나 대입하는데 주로 이용됩니다.

산술연산자


    • 산술연산자는 사칙연산과 같은 다양한 연산을 수행합니다. 다음의 표는 산술연산자의 종류와 기능입니다.

    •  산술 연산자

       사용 예

      기능 

       +

       x + y

       x와 y 를 더함

       -

       x - y

       x에서 y를 뺌

       *

       x * y

       x와 y를 곱함

       /

       x / y

       x를 y로 나눔

       %

       x % y

       x를 y로 나눈 나머지

       ++

       x++ , ++x

       x의 값에 1을 더함(x=x+1)

       --

       y-- , --y

       y의 값에서 1을 뺌(y=y-1)

    • 나머지연산자(%)는 정수 나눗셈을 하고 난 뒤의 나머지 값을 결과로 산출하는 연산자 입니다. 11%4의 값은 3이고 11%3의 값은 2가 됩니다.

    • 증가(++)또는 감소(--)연산자는 피연산자를 하나만 취하며 피연산자의 원래 값을 증가시키거나 감소시키는 역할을 합니다.

    • 증가 및 감소연산자는 피연산자의 앞에 위치하는 경우, 전위 증가/감소 연산자라고 부르며 피연산자 뒤에서 사용되는 경우엔 후위 증가/감소 연산자라고 부릅니다

    • 전위증가/감소 연산자는 다른 연산자에 비해서 연산의 우선순위가 높습니다. 아래 코드에서는 증가 연산자에 의해 값이 증가된후 tmp에 할당이 되므로 tmp의 값은 6이됩니다.
      tmp = 5;
      tmp = ++ tmp;

    • 하지만 후위 증가/감소 연산자는 연산의 값을 반환 후에 감소나 증가를 하기 떄문에 아래의 경우는 tmp값을 5를 갖게 됩니다. 후위와 전위의 차이는 시점의 차이입니다.
      tmp = 5;
      tmp = tmp ++;
산술연산자를 이용한 소스는 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
    <HEAD>
        <TITLE>
            지역, 전역 변수
        </TITLE>
        
    </HEAD>
    <BODY>
        <SCRIPT language = "javascript">
            i=4;j=6;
            sum=i+j;document.write("i + j = "+sum+ "<BR>");
            sum=i-j;document.write("i - j = "+sum+ "<BR>");
            sum=i*j;document.write("i * j = "+sum+ "<BR>");
            sum=i/j;document.write("i / j = "+sum+ "<BR>");
            sum=i%j;document.write("i % j = "+sum+ "<BR>");
            sum=i++;document.write("i + + = "+sum+ "<BR>");
            sum=++j;document.write("+ + j = "+sum+ "<BR>");
        </SCRIPT>
    </BODY>
</HTML>
cs
다음의 결과는 다음과 같습니다.


비교연산자


    • 비교연산자는 정수, 실수, 문자, 논리 등 모든 기본데이터형을 연산의 대상으로 하며 연산의 결과 값으로는 논리형 값(TRUE 또는 FALSE)값을 반환하는 연산자입니다. 비교의 결과가 논리형 값 (Boolean)으로 나오며 반복문이나 주건문 등에서 많이 사용됩니다. 비교 연산자는 관계 연산자라고 부릅니다.  비교 연산자의 종류와 기능을 표로 알아보고 이에 대한 소스도 같이 보겠습니다.

 비교연산자

사용 예시 

기능 

 ==

x == y 

x와 y가 같으면 true 

 !=

 x != y

 x와 y와 같지 않으면 true

 >

 x > y

 x가 y보다 크면 true

 >=

 x >= y

 x가 y보다 크거나 같으면 true

 <

x < y 

 y가 x보다 크면 true

 <=

 x <= y

 y가 x보다 크거나 같으면 true


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<HTML>
    <HEAD>
        <TITLE>
            산술 연산자!
        </TITLE>
        
    </HEAD>
    <BODY>
        <SCRIPT language = "javascript">
            i=4;j=6;
            document.write(" 10 == 10 : "+(10==10)+" <BR>");
            document.write(" 10 > 10 : "+(10 > 10)+" <BR>");
            document.write(" 10 <= 10 : "+(10<=10)+" <BR>");
            document.write(" 20 < 10 : "+(20 < 10)+" <BR>");
        </SCRIPT>
    </BODY>
</HTML>
cs

다음 소스의 결과입니다.


논리연산자


    • 비교연산자가 모든 기본 데이터형을 연산의 대상으로 하는데 논리 연산자는 논리형식만을 연산의 대상으로 하며 반환값도 논리형의 값을 취합니다. 다음 표를 통해서 논리연산자의 종류와 진리 값을 알아보고 논리연산자를 활용한 소스를 알아보겠습니다.

 논리 연산자

 사용 예

 기능

|| 

X||y 

x와 y의 논리합을 구함 (OR 연산) 

 &&

x&&y 

 x와 y의 논리곱을 구함 (AND 연산)

 ^

 x^y

 x와 y의 배타적논리합을 구함 (XOR 연산)

 !

 !x

 x의 논리부정을 구함 (NOT연산)



 X

 Y

 X||Y

 X&&Y

 X^Y

 !X

 true

 true

 true

 true

 false

 false

 true

 false

 true

 false

 true

 false

 false

 true

 true

 false

 true

 true

 false

 false

 false

 false

 false

 true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<HTML>
    <HEAD>
        <TITLE>
            논리 연산자!
        </TITLE>
        
    </HEAD>
    <BODY>
        <SCRIPT language = "javascript">
            i=4;j=6;
            document.write("(4>6)&&(7<15) : ",(4>6)&&(7<15),"<BR>");
            document.write("(4>6)||(7<15) : ",(4>6)||(7<15),"<BR>");
            document.write("!(4>6) : ",!(4>6),"<BR>");
            document.write("(4>6)^(7<15) : ",(4>6)^(7<15),"<BR>");
        </SCRIPT>
    </BODY>,
</HTML>
cs

소스에 대한 결과입니다.


대입연산자


    • 대입연산자란 어떤 변수에 값을 할당하기 위해서 연산자입니다. 외쪽에는 입력할 변수가 오른쪽에는 피연산자가 들어가게 됩니다. 표를 통해 대입연산자의 종류를 알아보겠습니다.

 대입 연산자

 사용 예

 기 능

 =

 x=3

 x에 3을 할당

 +=

 x+=5

 x=x+5(x에 5를 더한후 x에 대입)

 -=

 x-=5

 x=x-5(x에 5를 뺀 후 x에 대입)

 *=

 x*=5

 x=x*5(x에 5를 곱한후 x에 대입)

 /=

 x/=5

 x=x/5(x에 5를 나눈후 x에 대입)

 %=

 x%=5

 x=x%5(x에 5를 나눈 나머지를 x에 대입)



저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 반복문  (1) 2015.08.23
HTML - 조건문, 배열  (2) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
HTML - 프레임 태그 입력 태그  (0) 2015.08.22
'Programming/HTML' Related Articles more