KoXo 자바스크립트 매뉴얼 - 일반 참조

보통 Javascript의 문장은 쓰여진 순서대로 하나씩 수행된다.
이를 순차적 실행이라고 하며 프로그램 흐름의 기본 방향이다.

순차적 실행 외에 프로그램의 흐름을 스크립트의 다른 부분으로 옮기는 방법이 있다.
즉, 순차적으로 다음 문장을 실행하기 전에 다른 문장이 대신 실행된다.

스크립트를 유용하게 사용하려면 논리적인 방법으로 제어를 전송해야 한다. 프로그램 제어를 전송하는 것을 결정하면 이 결과가 실제 문장이 되어 true 또는 false 부울을 반환하다. 식을 만들고 결과가 true인지 테스트하는 작업을 수행하기 위한 두 가지 주요 프로그램 구조가 있다.

조건 검정

프로그램 제어 구조의 첫 번째 유형은 선택 구조로서 프로그램의 흐름에 다른 경로를 지정할 수 있다. 즉, 도로의 교차점처럼 프로그램에 교차점을 만들 수 있다. Javascript에서 사용 가능한 선택 구조는 다음 네 가지이다.

단일 선택 구조(if)
이중 선택 구조(if...else...)
인라인 삼항 연산자(?...:...)
다중 선택 구조(switch)

루프

프로그램 제어 구조의 두 번째 유형은 반복 구조로서 어떤 조건이 true로 남아 있는 동안 작업이 반복되도록 지정할 수 있다. 제어문의 조건이 만족되면(보통 특정 수만큼 반복된 후) 제어는 반복 구조를 넘어 다음 문장으로 전달된다. Javascript에서 사용 가능한 반복 구조는 다음의 네 가지이다.

카운터 제어 반복(for)
루프 위쪽에서 식 테스트(while)
루프 아래쪽에서 식 테스트(do...while...)
각각의 개체 속성에 연산 수행(for...in...)

선택 구조와 반복 제어 구조를 적절히 중첩해서 사용하면 복잡한 스크립트도 만들 수 있다.

프로그램 흐름의 세 번째 유형은 예외 처리에서 제공되며 여기서는 다루지 않다.

Javascript는 if 조건문과 if...else... 조건문을 지원한다.
if 문장에서는 한 조건이 테스트되고 해당 조건이 테스트를 충족하면 적절한 Javascript 코드가 실행된다. if...else... 문장에서는 조건이 테스트를 충족하지 못하면 다른 코드가 실행된다. 가장 간단한 형태의 if 문장은 한 줄로도 쓸 수 있지만 여러 줄로 된 if 문장과 if...else... 문장이 훨씬 더 일반적이다.

다음 예제들은 if 문장과 if...else... 문장에서 사용할 수 있는 구문을 보여주고 있다. 첫째 예제는 가장 간단한 부울 테스트를 보여준다. 괄호 안의 항목이 true로 산출되거나 true로 강제 변환될 수 있고 또한 그럴 경우에만 if 뒤의 문장이나 문장 블럭이 실행된다.

<SCRIPT>
var name='홍길동';
if (name=='홍길동') document.write(name,'님 안녕하세요!<BR>'); // 이 예제에서는 조건이 맞아야 출력한다.

var day=new Date().getDay();
if (day==5||day==6){ // 이 예제에서는 두 조건이 모두 false가 아니면 테스트는 실패이다.
   document.write('즐거운 주말이군요');
} else {
   document.write('주말은 아니군요.');
}
</SCRIPT>

Javascript는 또한 함축적인 조건 형식 ?... : ... 삼항 조건 연산자을 지원한다.
조건 앞에 if라는 단어를 사용하지 않고 테스트할 조건 뒤에 물음표를 사용한다.
여기에서는 두 가지 대안을 지정하는데, 하나는 조건이 만족될 경우에 사용될 대안이고
다른 하나는 조건이 만족되지 못할 경우에 사용될 대안이다. 두 대안은 콜론으로 구분되어야 한다.

<SCRIPT>
var hour=new Date().getHours();;
document.write('지금은 ',hour<=12 ? '오전':'오후');
</SCRIPT>

하나의 조건이 다른 것들보다 실패하거나 성공할 확률이 높은 상태에서 한꺼번에 여러 개의 조건을 테스트해야 할 경우 '순환 단축 계산'이라는 기능함수를 이용하면 스크립트의 실행을 빠르게 할 수 있다.

Javascript는 논리식을 계산할 때 필요한 만큼만 하위 식을 계산하여 결과를 산출할 수 있다.

예를 들어 ((x==777)&&(y==38)) 같은 AND(&&) 연산식을 사용하면 Javascript는 먼저 x가 777인지 검사하다.
만약 x가 777이 아니면 y가 38이더라도 전체 식은 true가 될 수 없다.
그러므로 y에 대한 테스트는 수행되지 않으며 Javascript는 false 값을 반환하다.

이와 유사하게 몇 개의 조건 중 하나만이 true일 경우(OR || 연산자 사용), 하나의 조건이 테스트에 통과되자마자 테스트가 중지된다.
이 기능함수는 테스트할 조건이 기능함수 호출 또는 다른 복잡한 식을 수반할 경우 유용하다.
OR(||) 식을 작성할 때 이를 염두에 두고 true가 될 가능성이 높은 조건을 앞에다 놓고
AND(&&) 식을 작성할 때는 false가 될 가능성이 높은 조건을 앞에다 놓으면 연산시간을 단축할 수 있다.

이런 식으로 스크립트를 만들 때의 기능함수를 수행하기 전에 유효 변수를 점검하는 코드를 넣는 경우가 많다.

장문이나 문장 블럭을 반복 실행하는 데는 몇 가지 방법이 있다.
일반적으로 반복적인 실행을 루핑 또는 반복 작업이라하며, 반복은 하나의 루프가 한번 실행되는 것을 의미한다.
반복은 전형적으로 하나의 변수를 테스트하여 제어되는데, 여기에서 변수의 값은 루프가 실행될 때마다 달라진다.
Javascript는 for 루프, for...in... 루프, while 루프, do...while... 루프 등 4가지 종류의 루프를 지원한다.

for 문장은 카운터 변수, 테스트 조건 및 카운터를 업데이트하는 동작을 지정하다. 매번 루프가 반복되기 전에 조건이 테스트된다. 테스트가 성공적일 경우 루프 내부의 코드가 실행된다. 테스트가 실패할 경우 루프 내부의 코드가 실행되지 않으며, 루프 바로 다음 코드의 첫 번째 줄에서 프로그램이 계속된다. 루프가 실행된 후 카운터 변수는 다음 반복이 시작되기 전에 업데이트된다.

루핑조건이 단 한번도 만족되지 않으면 루프는 실행되지 않고, 테스트 조건이 항상 만족되면 무한루프가 발생된다.
루프가 전혀 실행되지 않는 경우는 경우에 따라서는 바람직하지만 무한 루프가 발생하는 경우는 바람직하지 않으므로 루프 조건을 만들 때 주의하라.

<SCRIPT>
var imax=5; // 루프의 반복 횟수를 5로 제한.
var Sum=0; // 누적 변수 초기화.
for (icount=0;icount<=imax;icount++){
  // icount++ 는루프의 끝에서 실행되는데, 루프의 본문을 형성하는 문장 블럭이 실행된 후 조건이 테스트되기 전에 실행된다.
  Sum+=icount;
  document.write('icount=',icount,' 누계=',Sum,'<BR>')
}

 // icount가 imax보다 클수 없으므로 실행되지 않다.
for (icount=0;icount<=imax;icount++){
  Sum+=icount;
  document.write('icount=',icount,' 누계=',Sum,'<BR>')
}

 // 항상 icount가 0보다 크므로 무한 루프이다.
for (icount=0;icount>0;icount++){
  Sum+=icount;
  document.write('icount=',icount,' 누계=',Sum,'<BR>')
}
</SCRIPT>

Javascript는 개체의 모든 사용자 정의 속성 또는 배열변수의 모든 요소를 통하여 단계적으로 작업할 수 있는 특별한 종류의 루프를 제공하다.

for...in... 루프의 루프 카운터는 숫자가 아닌 문자열로서 현재 속성의 이름 또는 현재 배열변수 요소의 인덱스를 포함한다. 이 루프로 모든 요소를 조회할 수 있다.

<SCRIPT>
var myObject=new Object(); // 개체를 만든다.
myObject.name='홍길동'; // 개체의 속성을 지정한다.
myObject.age=21;
myObject.gender='남';
myObject.phone='1234-5678';

for (propName in myObject){ // 루프로 개체의 전요소인 각 속성명을 호출한다.
  document.write('myObject.',propName,'="',myObject[propName],'"<BR>'); // 속성명을 출력한다.
}
</SCRIPT>

for...in... 루프가 VBScript의 For Each...Next 루프와 비슷하기는 하지만 같은 방식으로 수행되지 않다.
Javascript의 for...in... 루프는 Javascript 개체의 속성에 걸쳐 반복된다.
VBScript의 For Each...Next 루프는 하나의 컬렉션 안에 있는 항목들을 반복하다.

Javascript에서 컬렉션에 걸쳐 루핑하려면 Enumerator 개체를 사용해야 한다.

일부 개체는 Internet Explorer에 있는 개체와 같이 VBScript의 For Each...Next와 Javascript의 for...in... 루프를 동시에 지원하지만 대부분의 개체는 그렇지 않다.

while 루프는 for 루프와 유사하다.
두 루프의 차이점은 while 루프에는 내장 카운터 변수나 업데이트 식이 없다는 것이다.
문장이나 문장 블럭의 반복 실행을 제어하려면 단순히 "이 코드를 n번 실행하는 것"보다 복잡한 규칙이 필요할 때가 있는데, 이 경우 while 루프를 사용하라.

다음의 예제는 개체 모델과 while 루프를 사용하여 사용자에게 간단한 질문을 한다.

<FORM><INPUT type="button" value="클릭해 보라." onClick="todayTest()"></FORM>

<SCRIPT>
function todayTest(){ // 페이지의 번잡을 피하기 위하여 기능함수를 시작한다.
  var inDate=0; // 입력 대화창 변수를 초기화한다.
  var today=new Date().getDate(); // 오늘 날자를 얻는다.
  while ((inDate!=today&&(inDate!=null)){ // 오늘 날자가 안맞고 입력 변수값이 있으면 계속한다.
    inDate=window.prompt('오늘이 몇일입니까?',inDate); // 대화입력창을 띄워 변수를 받는다.
  } // 날자가 맞던가, 입력 변수값이 없으면 종료한다.

  if (inDate==null) window.alert('포기했군요! 오늘은 '+today+'일 입니다.'); // 입력 변수값이 없으면...
  else window.alert('오늘 '+today+'일 맞습니다!'); // 날자가 맞으면...
} // 기능함수를 종료한다.
</SCRIPT>

참고 : 루프가 명시적인 내장 카운터 변수를 가지지 않기 때문에 다른 루프 형식보다 무한 루프에 빠지기 쉽습니다. 게다가 루프 조건이 언제 어디에서 업데이트되는지를 알아내는 것이 쉽지 않으므로 조건이 업데이트되지 않는 while 루프를 작성하기 쉽습니다. 따라서 while 루프를 설계할 때는 주의해야 한다.

JScript는 위 while 루프와 do...while... 루프를 지원한다
위와 같은 방식이지만 조건이 검정을 while 루프에서는 처음에 하는데 반해, do...while... 루프에서는 루프의 맨 끝에서 테스트되기 때문에 항상 적어도 한번 이상 실행되지는 않으면 안된다. 위 예제를 다음과 같이 다시 작성할 수 있다.

<FORM><INPUT type="button" value="클릭해 보라." onClick="todayTest()"></FORM>

<SCRIPT>
function todayTest(){ // 페이지의 번잡을 피하기 위하여 기능함수를 시작한다.
  var inDate=0; // 입력 대화창 변수를 초기화한다.
  var today=new Date().getDate(); // 오늘 날자를 얻는다.
  do{ // 오늘 날자가 안맞고 입력 변수값이 있으면 계속한다.
    inDate=window.prompt('오늘이 몇일입니까?',inDate); // 대화입력창을 띄워 변수를 받는다.
  } while ((inDate!=today&&(inDate!=null)); // 날자가 맞던가, 입력 변수값이 없으면 종료한다.

  if (inDate==null) window.alert('포기했군요! 오늘은 '+today+'일 입니다.'); // 입력 변수값이 없으면...
  else window.alert('오늘 '+today+'일 맞습니다!'); // 날자가 맞으면...
} // 기능함수를 종료한다.
</SCRIPT>

Javascript에서는 정한 조건이 만족되면 switch등 루프의 실행을 중단하는 break 문장을 사용한다.

continue 문장을 사용하여 나머지 코드 블럭의 실행을 생략하고 다음 반복으로 즉시 이동할 수 있으며, 이와 동시에 for 또는 for...in... 루프일 경우 카운터 변수를 업데이트 한다.

다음 예제는 break와 continue 문장을 사용하여 루프를 제어한다.

<FORM><INPUT type="button" value="클릭해 보라." onClick="todayTest()"></FORM>

<SCRIPT>
function todayTest(){ // 페이지의 번잡을 피하기 위하여 기능함수를 시작한다.
  var inDate=0; // 입력 대화창 변수를 초기화한다.
  var today=new Date().getDate(); // 오늘 날자를 얻는다.
  do{ // 오늘 날자가 안맞고 입력 변수값이 있으면 계속한다.
    inDate=window.prompt('오늘이 몇일입니까?',inDate); // 대화입력창을 띄워 변수를 받는다.

    if (inDate==null) break; // 사용자가 취소하였으면 루프를 중단한다.
    if (Number(inDate)==inDate) continue; // 사용자가 숫자를 입력하였으면 루프를 계속한다.
    window.alert('숫자만 입력하시오!');  // 숫자가 아니므로 사용자에게 숫자만 입력하라고 경고하고 계속한다.

  } while (inDate!=today); // 날자가 맞으면 종료한다.

  if (inDate==null) window.alert('포기했군요! 오늘은 '+today+'일 입니다.'); // 입력 변수값이 없으면...
  else window.alert('오늘 '+today+'일 맞습니다!'); // 날자가 맞으면...
} // 기능함수를 종료한다.
</SCRIPT>