[JavaScript] 2021.01.18. DAY_58 반복문 _ 배열
2021. 1. 18. 17:47ㆍWeb_Front-end/JavaScript
※ 1. 배열
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var arr = ["가족", "돈", "건강", "사랑", "가치관", "우정"]
window.onload = function(){
document.getElementById("btnOK").onclick = function(){
var r = "<ul>";
for(i=0; i<arr.length; i++){
/* r += "<li>" + arr[i] + "</li>"; */
/* templateString을 사용해서 출력해보기 */
r += `<li>${arr[i]}</li>`;
}
r += "</ul>";
document.getElementById("result").innerHTML = r;
}
}
</script>
<div id="result"></div>
<hr>
<button id="btnOK">확인</button>
</body>
</html>
※ 항상 실행해볼때에는, 최신브라우저에서 사용한다 (내장브라우저X) - Chrome이 가장 좋다
※ 2. for in 반복문과 for of 반복문
객체에 쉽게 반복문을 적용함
for in 반복문과 for of 반복문은 for 반복문 사용과 역할이 같음
for( let 인덱스 in 배열 ) {
}
for( let 요소 of 배열 ) {
}
for( let i=0; i<배열.길이; i++){
let 인덱스 = i;
let 요소 = 배열[i];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var arr = ["가족", "돈", "건강", "사랑", "가치관", "우정"]
window.onload = function(){
document.getElementById("btnOK").onclick = function(){
var r = "<ul>";
/* Java의 for-each 반복문과 같다 */
for(var item of arr){
r += `<li>${item}</li>`;
}
r += "</ul>";
document.getElementById("result").innerHTML = r;
}
}
</script>
<div id="result"></div>
<hr>
<button id="btnOK">확인</button>
</body>
</html>
※ 달력모양의 테이블 생성해보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript로 테이블 생성하기</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btnOK").onclick = function(){
var r = "<table border=1>";
r += "<tr>";
/* Java의 for-each 반복문과 같다 */
for(i=1; i<=31; i++){
r += `<td>${i}</td>`;
if(i%7 == 0){
r += "</tr><tr>";
}
}
r += "</tr>";
r += "</table>";
document.getElementById("result").innerHTML = r;
}
}
</script>
<div id="result"></div>
<hr>
<button id="btnOK">확인</button>
</body>
</html>
'Web_Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 2021.01.19. DAY_59 함수_익명함수, 선언적함수, 화살표함수, 매개변수 초기화, 콜백함수 (0) | 2021.01.19 |
|---|---|
| [JavaScript] 2021.01.19. DAY_59 let, var 차이점 / scope, hoisting (0) | 2021.01.19 |
| [JavaScript] 2021.01.18. DAY_58 조건문_ Boolean(), || 연산 등 (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 template String (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 유효성검사 (2) | 2021.01.18 |