Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 조건문, 배열 본문

Programming/HTML

HTML - 조건문, 배열

Programmer. 2015. 8. 23. 15:02

조건문

    • 자바스크립트 프로그램에서는 조건문을 이용하여 조건에 맞는 명령을 지정할 수 있습니다. ~이면 ~한다 는 형태의 조건문은 if를 이용하여 표현할 수 있고 여러 조건들에 따른 각각의 작동을 표현하려면 Switch문을 이용하여 표현할 수 있습니다.

IF문

  • if문은 조건식이 참이면 내부의 실행문을 수행하고 거짓이면 수행하지 않습니다. 조건문에서 조건식이 참일때 실행하는 명령문이 여러개면 { } 를 이용하여 묶어 주어야합니다. 소스로 설명하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<HTML>
    <HEAD>
        <TITLE>
            IF 조건문
        </TITLE>
        <SCRIPT language="JavaScript">
        function pwChk()
        {
 
            if(document.frm1.pw.value == "mis")
            alert("비밀번호가 정확합니다.")
        }
        </SCRIPT>
    </HEAD>
    <BODY>
        <FORM name="frm1">
        비밀번호 : <INPUT type="password" size=12 name="pw">
        <INPUT type="button" value="로그인" onclick="pwChk()">
        </FORM>
    </BODY>
</HTML>
cs

결과입니다.
비밀번호 mis를 입력하고 로그인을 눌렀을 때의 결과입니다. (엔터로 입력해주시면 안됩니다.)


IF-else문


    • if-else문은 조건식이 참이면 내부의 실행문을 수행하며 거짓이면 else 이하의 문장을 수행합니다. if문과 다른점은 조건식이 거짓인 경우도 실행문을 지정해준다는 것입니다. if와 마찬가지로 실행문이 한줄이상인 경우 { }로 묶어 주어야 합니다. 아까전 소스를 이용하여 비밀번호를 입력하지 않거나 입력하지 않았을때 메세지를 출력하는 소스입니다.
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
<HTML>
    <HEAD>
        <TITLE>
            IF 조건문
        </TITLE>
        <SCRIPT language="JavaScript">
        function pwChk()
        {
 
            if(document.frm1.pw.value == "mis")
            alert("비밀번호가 정확합니다.")
            else
            {
                alert("다시 입력하여 주세요.")
            }
        }
        </SCRIPT>
    </HEAD>
    <BODY>
        <FORM name="frm1">
        비밀번호 : <INPUT type="password" size=12 name="pw">
        <INPUT type="button" value="로그인" onclick="pwChk()">
        </FORM>
    </BODY>
</HTML>
cs
소스의 결과는 다음과 같습니다. 비밀번호를 안넣고 로그인을 눌렀습니다.

if문과 else 문에 또 if 문 또는 if else문을 중첩시키는 것도 가능합니다. 중첩하여 더 많은 경우의 조건을 통제하는 것도 가능합니다.


switch문


    • 조건식이 많은 경우 if문이나 if-else 문을 이용하여 중복해서 작성하게 되면 코드도 길어지고 수정또한 어렵게 됩니다. 조건을 많을 경우에는 사용되는 선택문이 switch문입니다. switch문은 한개의 식이 가지는 값에 따라 각각 다른 실행문을 수행하게 되는 것입니다. 조건에 대해서는 case 문으로 구성이 되며 조건 이후 break; 나올때 까지 코드를 읽습니다. 또 설정한 조건에 없는 경우를 표현하는 default도 있으며 이는 생략도 가능합니다. switch문의 case는 실행코드가 2줄 이상이어도 { } 를 묶어 줄 필요는 없습니다 (구분을 위해서 묶어도 알맞게 작동합니다.) 다음 소스를 통해서 알아보겠습니다.

1월 2월 등을 입력하여 그 달이 몇일 까지 있는지 알아보는 소스입니다.

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
32
33
34
35
<HTML>
    <HEAD>
        <TITLE>
            switch 조건문
        </TITLE>
    </HEAD>
    <BODY>
        <CENTER>
            <SCRIPT language="JavaScript">
            month=prompt("달의 숫자만 입력해주세요 마지막 날은 몇일일까요?");
            switch(month)
            {
                case "1":
                case "3":
                case "5":
                case "7":오후 1:49 2015-08-23
                case "8":
                case "10":
                case "12":
                    document.write(month,"월은 31일 까지 있습니다.");
                    break;
                case "4":
                case "6":
                case "9":
                case "11":
                    document.write(month,"월은 30일 까지 있습니다.");
                    break;
                case "2":
                    document.write(month,"월은 28일 까지 있습니다.");
                    break;
            }
            </SCRIPT>
        </CENTER>
    </BODY>
</HTML>
cs

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



배열


    • 배열은 관련된 변수를 모아서 동일한 데이터 형식의 동일한 이름의 변수로 선언합니다. 만약 성적 처리를 한다고 가정했을때 학생 마다마다의 변수를 선언하게 될려면 a,b,c,d,e,f,g,h,i,j이렇게 변수를 선언하여 변수를 넣어줘야 합니다. 하지만 배열을 이용하면 a[0], a[1], .... a[9]으로 나타낼 수 있습니다. 배열은 각각을 구분할 때 연속적인 번호를 추가로 부여합니다. 부여되는 번호를 인덱스 또는 첨자라고 부르며 배열의 첨자는 0부터 시작하여 일련번호로 구성됩니다.

    • 10명의 학생의 성적을 넣은 배열 a[0]~a[9]중 a를 배열 이름이라고 하며 각각의 하나하나를 배열의 요소라고 합니다. 배열의 요소 하나는 하나의 변수와 똑같이 취급됩니다.

1차원 배열


    • 자바스크립트에서 배열은 개게입니다. 따라서 배열을 사용하기 위해서는 배열객체를 생성하는 과정이 선행되어야 합니다. 배열객체를 생성한다는 것은 배열변수를 선언하고 배열변수에 적절한 메모리공간을 지정하는 것을 말합니다. 배열객체를 생성하는 방법은 다음과 같습니다. 아래코드에서 첫 번째 코드는 배열원소의 개수를 3으로 지정 grade라는 이름의 배열 객체를 생성한 경우이고, 두 번째 코드는 배열 원소의 개수를 지정하지 않고 배열 개게를 생성한 경우입니다. 일반변수와 같이 var은 변수선언을 위한 것으로 생략할 수 있습니다.
      var grade=new Array(3)
      var grade=new Array()

    • 배열객체가 생성되고 나면, 배열에 값을 저장하거나 저장된 값을 출력할 수 있습니다. 다음 나오는 코드는 배열의 요소에 값을 지정합니다.
      grade[0]=45
      grade[10]=99

    • 배열객체의 생성과 초기값 할당을 한줄의 코드로 만드는 것도 가능합니다. 다음 코드는 2개의 요소를 가지며 각 요소에 값을 지정해주는 예입니다.
      var grad=new Array(23,45)

    • 배열의 원소의 개수를 알고 싶을 떄는 length라는 속성을 사용하면 됩니다. 아래코드는 grade라는 배열의 원소의 개수를 출력하는 예이며 grade배열은 원소의 개수를 3개로 하여 생성되었기 떄문에 grade.length에는 3이 저장되어있습니다
      grade=new Array(5)
      grade.array

    • 배열간의 대입도 가능합니다. 대입을 하면 array2는 array1과 동일한 요소들을 가지게 됩니다.
      array1=array2;
위의 것들을 소스를 통해 알아보겠습니다.
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
32
33
34
35
36
37
38
39
40
41
42
43
44
<HTML>
    <HEAD>
        <TITLE>
            배열 객체
        </TITLE>
    </HEAD>
    <BODY>
        <SCRIPT language="JavaScript">
            array1=new Array();
            array1[0]="C언어"
            array1[1]="JavaScript"
            array1[2]="HTML"
            document.write("<H3>크기를 정하지 않은 배열의 결과</H3><P>");
            document.write(" array1[0]= "+array1[0]+" <BR>");
            document.write(" array1[1]= "+array1[1]+" <BR>");
            document.write(" array1[2]= "+array1[2]+" <BR>");
 
            array2=new Array(3);
            array2[0]="C++"
            array2[2]="winAPI"
            document.write("<H3>크기를 지정한 배열의 결과</H3><P>");
            document.write(" array2[0]= "+array2[0]+" <BR>");
            document.write(" array2[1]= "+array2[1]+" <BR>");
            document.write(" array2[2]= "+array2[2]+" <BR>");
 
            array3=new Array("MFC","JAVA", "STL");
            document.write("<H3>초기값을 지정한 배열의 결과</H3><P>");
            document.write(" array3[0]= "+array3[0]+" <BR>");
            document.write(" array3[1]= "+array3[1]+" <BR>");
            document.write(" array3[2]= "+array3[2]+" <BR>");
 
            array4=new Array();
            array4=array3;
            document.write("<H3>배열에 대입한 결과</H3><P>");
            document.write(" array4[0]= "+array4[0]+" <BR>");
            document.write(" array4[1]= "+array4[1]+" <BR>");
            document.write(" array4[2]= "+array4[2]+" <BR>");
    
            document.write("<H3>배열의 원소의 갯수</H3><P>");
            document.write("array1.length = "+array1.length+" <BR>");
            document.write("array2.length = "+array2.length+" <BR>");
        </SCRIPT>
    </BODY>
</HTML>
cs
다음의 결과는 다음과 같이 나오게 됩니다.






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

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

HTML - 함수와 이벤트  (0) 2015.08.23
HTML - 반복문  (1) 2015.08.23
HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
'Programming/HTML' Related Articles more