day 15
코딩테스트 연습 > 하샤드 수
문제 설명
양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.
제한 조건
x는 1 이상, 10000 이하인 정수입니다.
입출력 예
x return
10 true
12 true
11 false
13 false
입출력 예 #1
10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.
입출력 예 #2
12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.
입출력 예 #3
11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.
입출력 예 #4
13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.
👉 문제 풀이
하샤드 수 ?
: 하샤드 수(harshad number)는 주어진 진법에서 그 수의 각 자릿수 숫자의 합으로 나누어떨어지는 자연수
예를 들어 12는 각 자릿수 숫자의 합이 1+2=3이고, 12가 3으로 나누어떨어지므로 12는 10진법에서 하샤드 수다. 그러나 16은 1+6=7이고, 16이 7로 나누어떨어지지 않으므로 16은 10진법에서 하샤드 수가 아니다.
x를 쪼개서 각 자리수를 더한다(n.toString, split, 반복문)
x % 더해진 수 = 0이되어야 한다.
function solution(x) {
let answer = true;
let arr = x.toString().split('')
let sum = 0;
for(i=0; i<arr.length; i++) {
sum += Number(arr[i]);
}
return x % sum == 0? true:false;
}처음에 let arr = parseInt(x.toString().split(''))를 썼더니 테스트 1,2에서 오답이 떴다. 그 다음에 반복문을 돌릴 때 arr[i]에 Number를 썻더니 통과할 수 있었다.
➕➕ parseInt()와 Number()의 차이점은?
- Number() : 문자열을 인자로 받으면 문자열을 숫자열로 바꿔 줌
하지만 받은 문자열이 숫자형이 아니라면 NaN이 나온다.
소수점이 있는 숫자를 입력 받으면 그대로 소수까지 표현한다. - parseInt() : 문자열이 숫자형이 아니라도 첫글자가 숫자형이면 숫자형이 끝나는 부분까지 숫자로 반환한다.
소수점 있는 숫자를 입력 받으면 소수점은 떼고 정수까지만 반환한다.
한식메뉴 렌더링
document.createElement('tag') : html의 tag 요소를 만들어 반환한다
(Dom에 추가하는 작업을 거쳐야 브라우저 화면에 요소들이 출력된다)
appendChild() : DoM내 계별 요소(노드)에 자식 요소를 추가한다.
부모요소.appendChild(자식요소)
$(document).ready(function() {
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.title {
text-align: center;
}
.
</style>
<script>
$(document).ready(function open() {
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
menuItems.forEach(a => {
let name = a.name
let description = a.description
let newli = document.createElement('li')
//createElement~appendchild사이에서 속성 조작 입력할 수 있음.
//예를들어 style속성을 조작할 수도 있다.
newli.style.textAlign = "center"
newli.innerText = name
document.body.appendChild(newli)
let newp = document.createElement('p')
//속성 조작 입력할 수 있음. 예를들어 style속성을 조작할 수도 있다.
newp.style.textAlign = "center"
newp.innerText = description
document.body.appendChild(newp)
});
});
</script>
</head>
<body>
<h1 class="title">한식 메뉴</h1>
<div id="back"></div>
</body>
</html>➕ 수정 보완
jabascript에서 폰트의 CSS 속성 조작
1) 폰트 크기
2) 볼드체
foreach로 만든 li요소와 p요소를 묶어서 테두리 박스 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.title {
text-align: center;
}
.foodbox {
text-align: center;
margin: 30px auto 0 auto;
padding-top: 20px;
border: solid, black, 2px;
width: 500px;
height: 100px;
}
.foodbox > li {
font-size: 20px;
font-style: bold;
}
</style>
<script>
$(document).ready(function open() {
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
menuItems.forEach(item => {
let box = document.createElement('div')
box.classList.add('foodbox') //HTML 요소에 CSS 클래스를 추가하는 JavaScript 코드
//box 요소에 'foodbox'라는 클래스를 추가하겠다는 의미
let newli = document.createElement('li')
//createElement~appendchild사이에서 속성 조작 입력할 수 있음.
//예를들어 style속성을 조작할 수도 있다.
newli.innerText = item.name
box.appendChild(newli)
let newp = document.createElement('p')
//속성 조작 입력할 수 있음. 예를들어 style속성을 조작할 수도 있다.
newp.innerText = item.description
box.appendChild(newp)
document.body.appendChild(box);
});
});
</script>
</head>
<body>
<h1 class="title">한식 메뉴</h1>
<div id="back"></div>
</body>
</html>