구구단 구하기
- 사용자 입력: 3-3단 제외 나머지 단 출력한다.
- 2-9: 범위 외의 입력: 해당단은 없습니다.
- 테이블 태그와 for문을 이용하도록 한다.
java에서 for문을 이용해서 구구단을 만드는 문제를 많이들 풀어보셧나요?!!
자바스크립트에서도 구구단을 만드는 것이 그렇게 어렵지 않습니다.
우선, body문에 기본적인 틀과함께 동작코드를 작성했습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<body>
<h1> 구구단을 출력합니다 </h1>
<table>
<script>
var input=prompt('제외할 단을 입력하세요 (2~9)');
if(input<2 || input>9){
document.write("<h2> 해당 단은 없습니다 </h2>")
}
else{
for(var i=1; i<10; i++){
document.write('<tr>');
for(var j=1;j<10; j++){
if(j==input){ continue;} //break를 쓰면안됨
document.write("<td>"+i+'*'+j+'='+(i*j)+"</td>");
}
document.write('</tr>');
}
}
</script>
</table>
</body>
|
이제, 만들어진 구구단 출력화면을 css를 통해서 꾸미도록 할게요 !
css를 사용할때 왠만하면 <head>태그에서 만드는게 좋다고 언급했엇죠!? 이유를 쉽게 말씀드리면,
사용되고있는 테이블과 텍스트태그등 태그들의 꾸미기 속성 default값을 변경시켜주는 것입니다.
그렇게되면 사용되는 선택자에 따라서 부분선택부터 전체선택까지도 적용시킬 수 있다고 말씀드렸어요
추가적으로, 개별적으로 속성을 부여하고 싶을때는 body태그에서 직접적으로 변경을 시켜주면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<head>
<meta charset="UTF-8">
<title> 2중 반복문을 이용한 구구단테이블 </title>
<style>
table{ /*외곽선: 전체선 */
border: aqua solid 3px;
margin: 0 auto; /* 상하 0 좌우중앙정렬 */
background-color:pink;
}
td{ /*내부선: 행마다 낱개선 */
border: black solid 1px;
}
h1{
text-align: center;
background-color: silver;
}
</style>
</head>
|
자, 그렇다면 위의 코드를 분석해볼게요.
테이블태그 {
선속성: 아쿠아색 솔리드선 3굵기;
정렬 : 위아래0 좌우자동정렬; (=좌우중앙정렬)
배경 : 핑크색
}
td태그 (행, 가로) {
선속성: 검정색 솔리드선 1굵기;}
h1태그{
텍스트정렬: 중앙;배경색: 은색;}
<코딩결과>
실행하면 아래와 같은 화면으로 입력창이 나옵니다.
2~9에서 제외할 값을 입력시, 그 값을 제외하고 아래처럼 출력됩니다.
2~9의 범위를 벗어나게 입력시, "해당 단은 없습니다"가 출력됩니다.
※ 헤깔리실까봐 다시 작성드리자면,
<td>: 행이고, <tr>:열입니다. 더 쉽게 설명드리자면, <tr>열은 단(층), 높이라고 생각하시면 됩니다.
<td>행은 내부내용, 가로라고 생각하시면 될 거 같아요.
이렇게 생각하니까 구구단을 이용한 이중포문이 테이블의 tr과 td과 비슷하다는게 느낌이 오시겟죠?
오셔야 됩니다!!
'WEB 기초 > Script' 카테고리의 다른 글
| 10. 임의의 수를 찾는 프로그램 (0) | 2018.04.12 |
|---|---|
| 9. 함수란, (변수의 종류까지 정리) (0) | 2018.04.12 |
| 7. 게시판 만들기 (테이블과 spilt이용) (0) | 2018.04.12 |
| 6. 배열 (0) | 2018.04.12 |
| 5. 로그인_창 만들기 (0) | 2018.04.12 |