자바에서 쓰는 확장 for문 같은 느낌!!
설명보단 바로 실전 투입이 이해가 잘 됨!
예제1.
어차피 나오는 결과는 같음 for~in문 쓰는게 더 간결하다!
var arr5=['가','나','다'];
console.log('[일반 for문 형식]');
for(var k=0; k<arr5.length;k++)
console.log(arr5[k]);
console.log('[for in 문 형식]');
for(var index in arr5)
console.log('인덱스:%s,요소값:%s',index,arr5[index]);
예제 2
컬렉션일 때!!
Value에 해당하는 값을 꺼내올 때는 obj.key 로는 쓸 수 없음 !! 대신 obj[key]라고 써야 함!
var obj = {name:'가길동',age:20,addr:'가산동'};
console.log('[for in]문');
for(var key in obj)
console.log('key:%s,value:%s',key,obj[key]); //키 값도 같이 출력하고 싶어서 이렇게 출력 함
예제3. 최종보스(HTML5 과 자바스크립트 콜라보)
몇 가지 먼저 개념 정리
document.querySelector('#a') : 함수의미는 a를 가진 요소를 다 찾는다는 뜻이래!
숫자를 출력할 때는
new Number(textNode.value) 이렇게 써도 되고
parseInt(textNode.value) 이렇게 써도 됨! 오 자스에도 parseInt가 있당!
숫자가 나와서 정리하는건데
숫자 인지 아닌지 확인할 땐
NaN으로 비교하는거 아니고 inNaN()함수로 확인해야 한다!
사용자에게 입력값 받을 때 쓰는 함수는 prompt() (자바에서 Scanner 역할 인 듯)
<fieldset>
<legend>학생의 평균 구하기</legend> <!--서버로 전송 안함 현재 페이지에서만 처리할 거-->
학생 수 입력 : <input type="text" id="students" />
<button onclick='getAverage()'>평균 구하기</button>
</fieldset> <!--- 여기까지는 html 영역--->
<script>
//배열선언
var score=[];
var textNode = document.querySelector('#students');
// console.log(textNode,parseInt(textNode.value)); 함수가 정의 되어있지 않아서 입력값 받아도 노 쓸모임
function getAverage(){ // 그러니 그냥 껍데기 뿐인 함수모양에 진짜 함수를 정의시키기
console.log('사용자 입력값',parseInt(textNode.value));
// console.log('사용자 입력값',new Number(textNode.value)); 이거도 가능!
//우선 사용자가 입력한게 숫자지 판단 해야함
var numberOfStudents=parseInt(textNode.value);
// console.log(numberOfStudents == NaN) ; 이렇게 비교 노노노노
console.log(isNaN(numberOfStudents)); //이거로 숫자 인지 아닌지 판단
if(isNaN(numberOfStudents)){
alert('숫자만 입력하세요!!'); // 숫자가 아닐 때 팝업창 띄워서 알려주고
return; // 다시 입력 받기
}
//학생 수 만큼 점수 입력 총합 평균구하기
var total=0;
// console.log(prompt('점수를 입력하세요')); 학생 수 만큼 점수를 받아야 하기 때문에 이렇게 받으면 안될 걸?
for(var i=0; i<numberOfStudents ; i++){
score.push( parseInt(prompt(i+1+'번째 점수를 입력하세요')));
total += score[i];
}
console.log('[학생의 성적 출력]');
for(var index in score){
console.log('%s번째 학생:%s',parseInt(index)+1,score[index]);
}
console.log('총점:%s,평균:%s',total,total/score.length);
}
</script>
'학원 > JS' 카테고리의 다른 글
10/31 32-7 [JS] Array 메소드 이어서.... (1) | 2022.10.31 |
---|---|
10/28 31-4 [JS] Array 주요 메소드 정리 (1) | 2022.10.29 |
10/27 30-6 [JS] Array (1) | 2022.10.27 |
10/27 30-6 [JS] Operator (0) | 2022.10.27 |
10/26 29-7 [JS] Variable01 (0) | 2022.10.26 |