본문 바로가기
앱 만들기/웹앱 개발

구구단 만들기

by 나도처음이야 2024. 8. 30.
반응형

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

 

반응형
저작자표시 비영리 변경금지

댓글

나도처음이야님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바