Coding Note

[JS] 구구단 출력하기 본문

Web/JavaScript

[JS] 구구단 출력하기

jinnkim 2022. 1. 27. 20:30

 

JavaScript로 구구단 출력해보자!

 

구현

 

코드

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 출력하기</title>
<script type="text/javascript">
	function gugudan() {
		  var dan = document.getElementById("dan").value;
		  var result = "";
		 
		  for (var i = 1; i <= 9; ++i) {
			   result += dan + " * " + i + " = " + (dan * i) + "<br>";
		   }	
		  document.getElementById("result").innerHTML = result;	
    }
		
</script>
</head>
<body>
	<h4>원하는 구구단을 입력하고 화면에 출력합니다.</h4>
	
		출력할 구구단을 입력하세요! : <input type="text" id = "dan">
		<input type="button" value ="출력" onclick="gugudan()">
		<p id="result"></p>
</body>
</html>

 

 

< JavaScript 공부하기 >

 

1.  document

     - 문서객체모델(Document Object Model)에 속함

     - 문서내 모든 내용을 정의하고 각각 요소에 접근

     - html에 대한 것들을 담당하는 객체

 

+ window

    - 브라우저모델(Brower Object Model)에 속함

    - 웹 브라우저 상태를 제어하는 객체

    - 생략 가능

 

 

2.  getElementById()

     - 태그에 있는 id 속성값을 해당 태그에 접근하는 함수

     - 해당하는 id이 없을 경우 null 에러 발생

 

3.  innerHTML

     - 요소(element) 내 포함 된 HTML 또는 XML 마크업을 가져오거나 설정함

 

 

'Web > JavaScript' 카테고리의 다른 글

REST 개념 정리  (0) 2022.03.13
[JS] 이메일 유효성 검사하기  (0) 2022.01.30
[JS] 아이디, 비밀번호 유효성 검사  (0) 2022.01.29
[JS] radio 속성을 이용해 사이트 이동하기  (0) 2022.01.28
[JS] 버튼 클릭 시 <div> 텍스트 생성, 삭제, 숨김  (0) 2022.01.28
'Web/JavaScript' Related Articles more
Comments