728x90
반응형
◎ 구구단 만들기 예제) 홀수단은 1행, 짝수단은 2행으로 출력되도록 하시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerText, innerHTML 프로퍼티</title>
<style>
#gugu {
display: inline-block;
border: 1px solid #ccc;
margin: 15px;
padding: 0px 20px 30px 20px;
line-height: 2.0;
}
div h3 {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<button onclick="oddfunction()">홀수</button>
<button onclick="evenfunction()">짝수</button>
<table>
<tr>
<td id="odd"></td>
</tr>
<tr>
<td id="even"></td>
</tr>
</table>
<script>
var i, j;
var evenstr = "";
var oddstr = "";
for(i = 1; i <= 9; i++){
var str = "<div id='gugu'>";
str += "<h3>" + i + "단 </h3>";
for(j = 1; j<= 9; j++){
str += i + " X " + j + " = " + i*j + "<br>";
}
str += "</div>";
if(i % 2 == 0){evenstr += str;}
else{oddstr += str;}
}
function oddfunction(){
document.getElementById("odd").innerHTML = oddstr;
}
function evenfunction(){
document.getElementById("even").innerHTML = evenstr;
}
</script>
</body>
</html>table과 id를 이용해 홀수와 짝수 칸을 나눠주고 홀수, 짝수 버튼을 누르면 아래와 같은 출력이 되도록 만듭니다.
문자열은 변수에 더해서 저장하면 변수에 계속해서 문자열이 저장되게 됩니다.
ex) str += "<div id='gugu'>" => str = str + <div id='gugu'>
→ 이때, 자바스크립트 내부에서 id를 지정할 때면 작은따옴표로 지정하면 됩니다.
구구단이 계속해서 div로 구분되어 저장되고 지정한 변수에 짝수와 홀수를 구분해서 넣어줍니다.
→ 반복문 내부의 str은 계속 초기화 되기 때문에 반복해서 값들을 넣어줄 수 있습니다.
document.getElementById("odd").innerHTML = oddstr;
→ odd라는 id에 oddstr이라는 HTML을 넣어줍니다.
짝수, 홀수 버튼이 출력될 수 있도록 함수들을 만든 후 버튼을 누르면 원하는 값이 출력되도록 합니다.
◎ 배열을 이용한 구구단 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
<style>
div {
border: 1px solid #ccc;
padding: 10px 25px;
margin: 15px;
line-height: 2.0;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<h1>구구단</h1>
<table>
<tr>
<td id ="1"></td>
<td id ="2"></td>
<td id ="3"></td>
</tr>
<tr>
<td id ="4"></td>
<td id ="5"></td>
<td id ="6"></td>
</tr>
<tr>
<td id ="7"></td>
<td id ="8"></td>
<td id ="9"></td>
</tr>
</table>
<script>
var i, j;
var arr = new Array(9);
for(i=1; i<=9; i++){
arr[i-1] = "<div id =" + i + ">";
arr[i-1] += "<h3>" + i + "단</h3>";
for(j=1; j<=9; j++){
arr[i-1] += i + " X " + j + " = " + i*j + "<br>";
}
arr[i-1] += "</div>";
document.getElementById(i).innerHTML = arr[i-1];
}
</script>
</body>
</html>출력)
1단, 2단, 3단
4단, 5단, 6단
7단, 8단, 9단
해설 : arr라는 배열을 지정해 a[0]에는 1단 a[1]에는 2단 ... a[8]에는 9단이 저장되도록 합니다.
특이사항 : 자바와는 다르게 arr[i-1]이 아닌 arr[i]를 해도 동일한 결과 값이 출력됩니다.
→ 이유는 자바스크립트는 배열의 방 수를 지정해도 지정하는 만큼 늘어납니다.
→ 따라서 0~8까지 9개의 방을 지정했지만 arr[i]를 하면 0~9까지 10개의 방이 지정되고 arr[0]에는 undefined가 출력됩니다.
자바스크립트는 자바와는 다르게 변수의 변화, 배열의 크기 변화 등등 코드가 잘 못 되어도 프로그램 내부적으로 실행이 되게끔 만들어줍니다. 그래서 자바에서 코드에 대해 제대로 이해를 하고 자바스크립트로 코드를 가져오면 적용하기 훨씬 쉬울 거에요!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] DOM 노드 추가, 삭제 연습 문제 (0) | 2022.12.20 |
|---|---|
| [java script] DOM에서 노드 추가, 삭제하기 (0) | 2022.12.20 |
| [java script] addEventListener의 이벤트 사용 예시 (2) | 2022.12.19 |
| [java script] addEventListener의 이벤트 종류 (0) | 2022.12.19 |
| [java script] 문서 객체 모델(DOM) (0) | 2022.12.19 |
