728x90
조건문과 반복문
1. 조건문
a. if문
<button onclick="ifTest();">if버튼</button>
<script>
// 실습 예제
// 당신의 성별은 무엇입니까? 라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
// 필드에는 '남자/여자'라는 값이 자동으로 들어가 있는 상태
// 남자라고 입력하면 "XY입니다", 여자라고 입력하면 "XX입니다", 둘다 아니면 "잘못 입력했습니다"
// 라는 문구가 알람창으로 뜨게 하기
function ifTest(){
var gender = prompt('당신의 성별은 무엇입니까?','남자/여자');
if(gender == '남자'){
console.log("XY입니다")
}else if(gender == '여자'){
console.log("XX입니다")
}else{
console.log("잘못 입력했습니다")
}
// 당신의 성별은 무엇입니까? 라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
// 필드에는 '남자/여자'라는 값이 자동으로 들어가 있는 상태
// -> var gender = prompt('당신의 성별은 무엇입니까?', '남자/여자');
}
</script>
b. switch
<button onclick="switchTest();">switch문</button>
<script>
function switchTest(){
var month = Number(prompt("현재는 몇 훨입니까?")); // prompt가 문자열 반환이라 문자를 숫자로 바꿔줘야함.
console.log(typeof(month)); // 디버깅용 타입확인. 숫자인 것 같은데 비교가 안되는 상황이 자주 발생하니
var day;
switch(month){
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
day = 31; break;
case 4: case 6: case 9: case 11:
day = 30; break;
case 2:
day = 28;
}
alert(month + "월은 " + day + "일까지입니다.");
}
// '현재는 몇 휠입니까? '라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
// 입력을 하고 나면 'M월은 N일까지입니다' 라는 결과가 알람창에 뜨게 하기
</script>
2. 반복문
a. for문
<h4>for</h4>
<button onclick="forTest();">for문</button>
<script>
function forTest(){
var result = '';
for(var i = 1; i<=10; i++){
result += i + ' ';
}
alert(result); // 1 2 3 4 5 6 7 8 9 10출력
}
</script>
b. while문
<h4>while문</h4>
<button onclick="whileTest();">while문</button>
<script>
function whileTest(){
var result = '';
var i = 1;
while(i<=10){
result += i + ' ';
i++;
}
alert(result); // 1 2 3 4 5 6 7 8 9 10
}
</script>
c. for in문
객체의 프로퍼티 키 열거 전용
자바 foreach랑 비슷
for in문에서 배열을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김 for in문에서 객체를 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 객체의 키가 담기게 됨
<button onclick="forInTest();">for in문</button> <!-- 자바 foreach랑 비슷함 -->
<script>
function forInTest(){
var result = '';
var array = ['A', 'B', 'C', 'D', 'E'];
for(var i in array){ // i의 디폴트값 0
// for in문에서 배열을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김
console.log(i); // 01234 <- 배열의 인덱스
result += array[i] + ' ';
}
alert(result); // A B C D E
/*
// 자바에서 이런식으로 사용
for(Emp e : list){
System.out.prinln(e);
}
*/
}
</script>
forEach()문
배열 순회 전용 메서드
forEach(function(item, index, arr){ ... })
item : 배열의 각 대상을 의미
index : 배열의 순서를 의미 (현재 몇번째 반복문이 돌고있는지)
arr : forEach 반복문에 사용되는 배열을 의미
자바스크립트 반복문 종류
1. for : 고전적인 for문
2. for in : 객체의 프로퍼티 키 열거 전용
3. for of : 이터러블 순회 전용
4. forEach(): 배열 순회 전용 메서드
5. while : 고전적인 while문
6. do while : 고전적인 do...while문
7. Object 객체 메서드: 객체 순회 전용
8. Array.prototye 메서드 : 배열 전용
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [JS] 함수(Function) : 매개인자로 전달하기, 함수 리턴처리, 매개변수로 함수 전달, 함수 리턴, 내장함수 (0) | 2022.07.27 |
|---|---|
| [JS] 배열(Array) : 선언 & 초기화 & 메소드 종류 (0) | 2022.07.26 |
| [JS] 데이터 형변환 & 연산자 (0) | 2022.07.25 |
| [JS] 변수 & 자료형 (0) | 2022.07.24 |
| [JS] HTML태그에 접근하기 : document.getElementByXXX() (0) | 2022.07.22 |
