반응형
HTML과 자바스크립트 만 사용해서 구구단을 만들어 본다.
1. HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
</head>
<body>
<pre>
<script src="gugudan.js"> </script>
</pre>
</script>
</body>
</html>
HTML에서는 자바스크립트 코드를 연결하고, 띄어쓰기를 위해서 pre 태그를 사용했다.
pre 태그 사용법은 하기 포스팅을 참고한다.
2. 자바스크립트 코드
[ gugudan.js]
for(var i=1; i <= 9 ; i++){
document.writeln("");
document.writeln( i + "단");
for(var j=1; j <= 9 ; j++){
document.writeln( i + "*" + j + "=" + i*j);
}
}
for 문을 사용해서 구구단을 출력하고 있다.
HTML pre 태그로 인해서 writeln 은 한줄 띄우기 동작이 된다.
결과는 하기와 같다.
구구단을 통해서,
1. 자바스크립트와 HTML 문서 연결방법
2. 자바스크립트 반복문 로직 공부
두가지를 익힐 수 있다.
Good!
HTML에 자바스크립트 연결 하기
자바스크립트 파일을 HTML 파일과 분리하여 만들면 소스 관리 및 유지보수에 유용합니다., 여러 HTML에 하나의 자바스크립트 파일을 연동해서 사용할 수 있고, HTML 에는 웹 문서의 구조만 표현하고
soo0100.tistory.com
반응형
댓글