📌
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 출력하기</title>
<style type="text/css">
input {text-align: right;}
table { width : 100%; border-collapse: collapse; }
th,td {
border : 3px solid #bcbcbc;
text-align: center;
padding: 8px;
}
th { background-color: #B7F0B1; color : #353535; }
td { background-color: #F2F2F2;}
caption { color : #111111; font-size: 20px;
background-color: #FFFFFF; }
input[type=text],input[type=password],textarea {
width:100%;
}
</style>
<script type="text/javascript">
// window.onload : window load 되는 경우 발생 되는 이벤트
window.onload=function(){
let html = "<table>"
for (let i=2;i<=9;i++) {
html += "<tr><th>"+ i+"단</th></tr>"
for(let j=2;j<=9;j++) {
html += "<tr><td>"+i+"*"+j+"="+(i*j)+"</td></tr>"
}
}
html += "</table>"
console.log(html)
gugudan.innerHTML = html;
}
</script>
</head>
<body>
<h3>2단~ 9단까지의 구구단 출력하기</h3>
<div id="gugudan"></div>
</body>
</html>
'수업(국비지원) > JavaScript' 카테고리의 다른 글
| [JavaScript] open() 함수- 새 창 열기, Date 객체 (0) | 2023.04.18 |
|---|---|
| [JavaScript] 로그인(method[get,post], onsubmit, action) (0) | 2023.04.18 |
| [JavaScript] 문자열 함수 (0) | 2023.04.18 |
| [JavaScript] TTS(Text to Speech) 연습 (0) | 2023.04.18 |
| [JavaScript] 이미지 선택하기(function, drawimg, sel, img, onchange,option), 마우스를 이용한 이미지 변경 (0) | 2023.04.18 |