티스토리 뷰
HTML과 JAVASCRIPT의 기초를 쌓고자 구구단을 출력하는 코드를 작성했습니다. 사용자로부터 숫자를 입력 받으면 구구단 출력 함수를 통해 결과를 보여주고 단이 바뀔 때마다 이전의 결과 내용을 초기화한 후 다시 새로운 단의 결과를 한번에 화면에 출력시킬 수 있게 하였습니다.
1. 사용자로부터 구구단의 단을 입력
웹 사이트 상에서 사용자가 구구단을 위한 숫자를 입력하는 코드
<h1>구구단 출력</h1>
<!--사용자로부터 입력 받음-->
<label for = "numberInput">단을 입력하세요 : </label>
<input type="number" id="numberInput" placeholder="1부터 9까지" oninput="Multiplication()">
<h2> 결과 : </h2>
<div id = "result"></div>
1) label 태그를 사용하여 숫자를 입력하는 레이블 지정
2) input 태그의 placeholder을 사용자가 입력 필드에 적절한 값을 입력할 수 있도록 짧은 도움말 명시
3) oninput을 통해 input 태그 안의 값들이 변경될 때마다 이벤트를 발생시킬 수 있도록 설정
cf) oninput과 더불어 onchange는 input 태그의 입력이 끝났을 때 이벤트를 발생시킬 수 있도록 설정
2. JavaScript을 이용한 구구단 출력 함수
구구단 출력 함수
<script>
function Multiplication() {
const number = parseInt(document.getElementById("numberInput").value, 10);
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; //결과 초기화(이전의 출력한 내용 없애기)
if(isNaN(number) || number<1 || number>9) {
resultDiv.innerHTML = "잘못 입력된 숫자입니다";
return;
}
//구구단 출력
let resultText = "";
for(let i = 1 ; i<=10; i++) {
resultText += `${number} X ${i} = ${number * i}<br>`;
}
resultDiv.innerHTML = resultText;
}
</script>
1) parseInt()은 입력받은 문자열을 숫자로 지정
2) 입력받은 number와 결과를 저장할 resultDiv을 태그에 있는 id 속성을 사용하여 해당 태그에 접근할 수 있는 getElementById로 선언
3) 입력받은 number가 적절한 형식인지, 1에서 9 사이의 숫자인지 검사
3. 결과물

TAG
- subquery #sql 코딩테스트
- 파이썬 #코딩테스트 #프로그래머스 #스택 #큐
- python #프로그래머스 #리스트 #인덱싱
- rnn #딥러닝 #시계열 데이터 #장기의존성 문제
- randomforest #bagging #머신러닝 #하이퍼파라미터 튜닝
- nlp #토큰화 #nltk #konply
- 로지스틱 회귀 #오즈비 #최대우도추정법 #머신러닝
- 머신러닝 #project #classification #dacon
- 머신러닝 #lightgbm #goss #ebf
- 잘라서 배열로 저장하기 #2차원으로 만들기
- gan #생성자 #판별자 #적대적 신경 신경망 #딥러닝 #computer vision
- html #javascript #구구단 출력
- pca #주성분분석 #특이값분해 #고유값분해 #공분산행렬 #차원의 저주
- 딥러닝 #오차역전파 #연쇄법칙 #계산그래프 #최적화
- #python #프로그래머스 #외계어사전 #itertools #순열과조합
- 프로젝트 #머신러닝 #regression #eda #preprocessing #modeling
- #opencv #이미지 연산 #합성
- #자연어 처리 #정수 인코딩 #빈도 수 기반
- python #deque #프로그래머스 #공 던지기 #문자열 계산하기 #코딩테스트
- #물고기 종류별 대어 찾기 #즐겨찾기가 가장 많은 식당 정보 출력하기 #mysql #programmers
- #attention #deeplearning
- #opencv #이미지 읽기 #이미지 제작 #관심영역 지정 #스레시홀딩
- #seq2seq #encoder #decoder #teacher forcing
- 파이썬 #시각화 #matplotlib
- 자연어 처리 #정제 #정규표현식 #어간 추출 #표제어 추출
- python #프로그래머스 #겹치는선분의길이
- #tf idf
- 머신러닝 #xgboost #
- ridge #lasso #정규화모델 #머신러닝
- seaborn #데이터시각화 #타이타닉
글 보관함
최근에 올라온 글