javascript 반복문( while, for, for in ), 배열 / 간단한 야구게임 만들어보기에 대해서 정리한다.
반복문: while, for, for in
while( 조건 ) {
몸체
}
for( 초기화; 조건; 증감 ) {
몸체
}
for ( 변수 in 배열 ) {
몸체
}
for in
- 파이썬의 for 루프와 유사
- 배열(python의 리스트와 같은 개념)을 다룰때 주로 사용
- 배열내의 각 원소들의 인덱스를 가져온다
배열
- 파이썬에서의 리스트
- 전통적인 배열과 동일( C, java, ... )
* 배열내의 원소 타입은 가리지 않는다.
( 즉, 한개의 배열 안에는 여러가지 타입의 원소가 존재할 수 있다 )
1. 리터럴
2. 객체
( javascript에서 배열을 나타낼때는 '[]' 기호를 이용하거나 객체를 사용해서 배열을 만들 수 있다 )
( 배열을 리터럴 선언방식을 이용하거나 객체 방식을 이용해도 똑같은 모양의 배열을 가진다는걸 볼 수 있다 )
( 위 코드를 그대로 실행하면 배열 안에 있는 값을 순서대로 출력 해주는게 아니라 배열내의 각 원소들의 인덱스를 출력하게 된다 )
( document.write() 함수와 for in을 이용해서 배열의 내용을 순서대로 출력 했을때
위 그림처럼 해당 원소 안의 값을 가져오려고 하면 위 코드를 예시로 들었을때
for in문 안에 document.write( array[idx] ); 와 같은 코드로 작성 해줘야 한다 )
[실습] 야구게임
- 임의의 3자리 숫자를 한정된 횟수 내에 맞추는 게임
- 사용자한테 값을 입력 받아서 지정된 임의의 3자리 숫자랑 비교
( 입력 받는 값도 3자리 )
- 자리와 숫자가 모두 일치하면 스트라이크
- 숫자만 일치하면 볼
- 자리와 숫자가 모두 일치하지 않으면 아웃
- 중복되는 숫자는 없다.
예).
지정된 숫자: 935
1 입력: 123 -> 1B 2O
2 입력: 132 -> 1S 2O
...
10 입력: 935 -> 3S
baseball.html
<!doctype html>
<html>
<head>
</head>
<script>
var number = "361";
for ( var i = 0; i < 10; i++ ) {
var strike = 0;
var ball = 0;
var out = 0;
buffer = prompt("input number");
if( buffer[0] === number[0] ) { strike++; }
else if ( buffer[0] === number[1] || buffer[0] === number[2] ) { ball++; }
else { out ++; }
if( buffer[1] === number[1] ) { strike++; }
else if ( buffer[1] === number[0] || buffer[1] === number[2] ) { ball++; }
else { out ++; }
if( buffer[2] === number[2] ) { strike++; }
else if ( buffer[2] === number[0] || buffer[2] === number[1] ) { ball++; }
else { out ++; }
alert("strike: " + strike + ", ball: " + ball + ", out: " + out );
if( strike == 3 ) { break; }
}
if( i < 10 ) { document.write("correct!!!"); }
else { document.write("failed..."); }
</script>
<body>
</body>
</html>
( prompt() 함수를 이용해서 메시지 박스를 띄워 사용자에게 3자리 숫자를 입력 받는다 )
( 사용자에게 341이라는 숫자를 입력 받았는데 361이라는 숫자를 맞춰야 하기 때문에 2스트라이크 1볼!!!
이라고 사용자에게 alert() 함수를 통해서 출력해 알려준다 )
* 크롬의 경우 document.write()가 사용자 입력이 끝날때마다 매번 출력 해주는게 아니라
반복문이 다 끝난뒤에 그 결과를 한꺼번에 출력해주는데 이 부분은 웹브라우저의 종류에 영향을 받는다.
( 익스플로러의 경우에는 입력마다 바로 그 결과를 출력 해준다 )
( 10번 안에만 맞추면 되기 때문에 몇번의 시도 끝에 3스트라이크!!! )
( 이후 사용자에게 correct!!! 이라는 말을 보여주면서 성공 했다는 걸 알려준다!! )
( 만약 10번동안의 기회 안에 성공을 하지 못할 경우에는 failed...가 나온다.. )
'프로그래밍 > WEB HACKING' 카테고리의 다른 글
| [WEB HACKING] php 간단한 로그인 창 만들기 / 쿠키 & 세션 이용방법 (0) | 2017.08.29 |
|---|---|
| [WEB HACKING] php 연관 배열, foreach / 데이터를 서버로 전달하는 방법( GET / POST / 쿠키 ) / 웹 인증 방법 (0) | 2017.08.17 |
| [WEB HACKING] javascript 이벤트 / php 개념 및 슈퍼 글로벌 변수 (0) | 2017.08.17 |
| [WEB HACKING] html 태그(이미지, 표, 링크, 오디오, 비디오) / javascript 문법, 변수, 입/출력 (0) | 2017.08.12 |
| [WEB HACKING] 웹서버 구성 / html 기본구조 및 태그 (0) | 2017.08.11 |
댓글