👀 함수

🧩 min, max function

💁‍ 전달 된 매개변수 중 최소값을 반환하는 함수 min(a, b)과 전달 된 매개변수 중 최대값을 반환하는 함수 max(a, b)를 정의하고
변수 초기화 숫자를 변경하며 최소값과 최대값을 함수 호출을 통해 리턴 받아 콘솔에 출력하는 테스트를 하세요.

🚩 Example Output

최소값 : 10
최대값 : 20

// 최소값을 반환하는 함수
function min(a, b) {
    a < b ? result = a : result = b
    return result;
};

// 최대값을 반환하는 함수
function max(a, b) {
    a > b ? result = a : result = b
    return result;
};

// 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
function apply(func, a, b) {

    return func(a, b);
}

const num1 = 10;
const num2 = 20;
console.log(`최소값 : ${apply(min, num1, num2)}`);
console.log(`최대값 : ${apply(max, num1, num2)}`);

🧩 pow function

💁‍ x의 n제곱을 반환해주는 함수 pow(x, n)를 정의하고 변수 초기화 숫자를 변경하며 함수 호출하여 콘솔로 리턴 받은 결과 값을 출력하세요.

• x의 n 제곱은 x를 n번 곱해서 만들 수 있습니다.
• 주의사항 : n은 1 이상의 자연수여야 하므로 이외의 경우엔 자연수를 입력하라는 문구를 콘솔로 출력합니다.

🚩 Example Output

1024
또는
-1은 양의 정수이어야 합니다.

// x의 n제곱을 반환해주는 함수
function pow(x, n) {

    let result = 1;
    if(n > 0) {
        for(let i = 0; i < n; i++){
            result = result * x;
        }
    } else {
        result = `${n}은 양의 정수이어야 합니다.`
    }

    return result;
}

const x = 2;
const n = 10;

console.log(pow(x, n));

🧩 min, max function 화살표 함수

💁‍ 2-1에서 함수 선언문으로 작성한 min, max 함수를 화살표 함수로 변경하여 생성 후 변수 초기화 숫자를 변경하며 최소값과 최대값을 함수 호출을 통해 리턴 받아 콘솔에 출력하는 테스트를 합니다.

• 삼항 연산자를 이용하면 하나의 구문으로 변경할 수 있습니다.

🚩 Example Output

최소값 : 10
최대값 : 20

// 최소값을 반환하는 함수
min = (a, b) => { a < b ? result = a : result = b; return result;};

// 최대값을 반환하는 함수
max = (a, b) => { a > b ? result = a : result = b; return result;};

// 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
apply = (func, a, b) => func(a, b);

const a = 10;
const b = 20;
console.log(`최소값 : ${apply(min, a, b)}`);
console.log(`최대값 : ${apply(max, a, b)}`);

---

👀 객체

🧩 객체 리터럴로 계산기 객체 만들기

💁‍ calculator 라는 객체에 아래와 같은 메소드를 정의하고 메소드 실행을 테스트 하세요.

• sum 메소드 : 객체의 a, b 두 값의 합을 반환
• multi 메소드 : 객체의 a, b 두 값의 곱을 반환

🚩 Example Output

합 : 30
곱 : 200

const calculator = {
    a : 10,
    b : 20,
    sum : function() { 
        return `합 : ${this.a + this.b}`},
    multi : function() { 
        return `곱 : ${this.a * this.b}`}
};

console.log(calculator.sum());
console.log(calculator.multi());

🧩 객체 생성자로 계산기 객체 만들기

💁‍ Calculator라는 생성자 함수에 아래와 같은 메소드를 정의하고 해당 생성자를 통해 객체를 만들어 메소드 실행을 테스트 하세요

• sum 메소드 : 저장된 두 값의 합을 반환
• multi 메소드 : 저장된 두 값의 곱을 반환

🚩 Example Output

합 : 30
곱 : 200

function Calculator() {
    this.a = 10;
    this.b = 20;
    this.sum = function() { 
        return `합 : ${this.a + this.b}`},
    this.multi = function() { 
        return `곱 : ${this.a * this.b}`}
}

const sum = new Calculator().sum();
const multi = new Calculator().multi();

console.log(sum);
console.log(multi);

---

👀 배열

🧩 split, indexOf

💁‍ 전달 받은 문자열(str) 안에 있는 값을 ',' 기준으로 배열로 분리하고 전달받은 단어(word)가 있는 index 위치를 문자열로 리턴하는 함수 findWord(str, word)를 작성하세요.

🚩 Example Output

고양이는 배열 index 10번째에 있습니다.
샌드위치는 배열에 존재하지 않습니다.
결과를 확인할 수 없습니다.

const str = '사과,바나나,당근,김밥,치즈,떡볶이,햄버거,환타,사이다,콜라,고양이,강아지';

console.log(findWord(str, '고양이'));     
console.log(findWord(str, '샌드위치'));  
console.log(findWord(str));             

function findWord(str, word) {
  
  if (!word) {
    return "결과를 확인할 수 없습니다.";
  }

  let wordArr = str.split(",");

  let index = wordArr.indexOf(word);

  if (index >= 0)
    return `${word}는 배열 index ${index}번째에 있습니다.`;
  else
    return `${word}는 배열에 존재하지 않습니다.`;
}

🧩 splice

💁‍ 배열(arr)의 요소 중 a와 b 사이에 속하지 않는 요소는 삭제해주는 함수 filterRange(arr, a, b)를 작성하세요.

🚩 Example Output

[5, 3, 1, 4]

function filterRange(arr, a, b) {

    for(let i = 0; i < arr.length; i++) {
        if(arr[i] < a || arr[i] > b)  {
          arr.splice(i, 1);
          i--;
        }
      }
  }
  const arr = [5, 3, 8, 1, 10, 4];
  
  filterRange(arr, 1, 5); 
  
  console.log(arr); 

💡 Another Solution

function filterRange(arr, a, b) {

    arr.forEach((item, index) => {
        if (item < a || item > b) {
            arr.splice(index, 1);
        }
    });
      
}

const arr = [5, 3, 8, 1, 10, 4];

filterRange(arr, 1, 5); // 1과 5 사이에 있지 않은 요소는 모두 제거함

console.log(arr); // [5, 3, 1, 4]

🧩 sort

💁‍ 제시 된 숫자값 배열과 문자값 배열을 오름차순 정렬, 내림차순 정렬하여 출력하세요.

🚩 Example Output

[ 9, 20, 37, 54, 88, 100 ]
[ 100, 88, 54, 37, 20, 9 ]
[ 'hello', 'js', 'party', 'wow' ]
[ 'wow', 'party', 'js', 'hello' ]

let numbers = [20, 100, 37, 54, 88, 9];
let strings = ['wow', 'js', 'party', 'hello'];

console.log(numbers.sort((a, b) => a - b)); // 숫자 오름차순
console.log(numbers.sort((a, b) => b - a)); // 숫자 내림차순
console.log(strings.sort());                // 문자열 오름차순
console.log(strings.reverse());             // 문자열 내림차순

💡 Another Solution

let numbers = [20, 100, 37, 54, 88, 9];
let strings = ['wow', 'js', 'party', 'hello'];

// 숫자 오름차순
numbers.sort((a, b) => a - b);           
console.log(numbers);
// 숫자 내림차순
numbers.sort((a, b) => b - a);
// numbers.reverse(); - 역순 처리도 가능
console.log(numbers);

// 문자 오름차순
strings.sort();
console.log(strings);
// 문자 내림차순
strings.sort(function (a, b) {
  if(a > b) return -1;
  if(a == b) return 0;
  if(a < b) return 1;
});
// strings.reverse(); - 역순 처리도 가능
console.log(strings);

🧩 sort, map

💁‍ Student 생성자 함수를 통해 생성 된 3명의 학생 객체를 studentList 배열에 담았습니다. 해당 배열을 전달하여 score 내림차순 기준으로 정렬해주는 sortFromScore(arr) 함수, 해당 배열을 전달하여 lastName과 firstName을 합성하여 name 속성으로 만들어 반환하는 makeFullName 함수를 작성하세요.

🚩 Example Output

[
  Student { firstName: '관순', lastName: '유', score: 80 },
  Student { firstName: '보고', lastName: '장', score: 70 },
  Student { firstName: '길동', lastName: '홍', score: 60 }
]
[
  { name: '유관순', score: 80 },
  { name: '장보고', score: 70 },
  { name: '홍길동', score: 60 }
]

function Student(firstName, lastName, score){
  this.firstName = firstName;
  this.lastName = lastName;
  this.score = score;
}

const studentList = [
  new Student('길동', '홍', 60),
  new Student('보고', '장', 70),
  new Student('관순', '유', 80)
];

sortFromScore(studentList);
console.log(studentList);
console.log(makeFullName(studentList));

function sortFromScore (arr) {	
  arr.sort((a , b) => b.score - a.score);
}

function makeFullName(arr){
  return arr.map(user => ({ 
    name : user.lastName + user.firstName,
    score : user.score })
  );
}

---

👀 표준 빌트인 객체

🧩 Date

💁‍ 년, 월, 일을 전달하면 해당 날짜의 요일을 '월', '화', '수', '목', '금', '토', '일' 문자열로 반환해주는 함수 getWeekDay를 만드세요.

🚩 Example Output

화
월

console.log(getWeekDay(2022, 6, 21));       // 2022년 6월 21일
console.log(getWeekDay(2022, 12, 12));      // 2022년 12월 12일 

function getWeekDay(year, month, date) {

    const weekDayArr = new Array('일', '월', '화', '수', '목', '금', '토');

    const idx = new Date(`${year}-${month}-${date}`).getDay();
    const weekDay = weekDayArr[idx]; 

    return weekDay;
}

💡 Another Solution

console.log(getWeekDay(2022, 6, 21));       // 2022년 6월 21일
console.log(getWeekDay(2022, 12, 12));      // 2022년 12월 12일 

function getWeekDay(year, month, date) {

  let when = new Date(year, month - 1, date);
  let days = ['일', '월', '화', '수', '목', '금', '토'];
  return days[when.getDay()];

}

🧩 Date

💁‍ 오늘 흐른 시간을 초 단위로 알려주는 getSecondsToday 함수와 오늘 남은 시간을 초단위로 알려주는 getSecondsToTomorrow 함수를 만드세요.

🚩 Example Output

xxxxx초나 흘렀습니다. 시간을 소중히 씁시다^^
xxxxx초 밖에 안 남았습니다. 다시는 오지 않는 오늘입니다^^

console.log(getSecondsToday());
console.log(getSecondsToTomorrow());

function getSecondsToday() {
  let now = new Date();
  let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  let diff = now - today; 
  return `${Math.round(diff / 1000)}초나 흘렀습니다. 시간을 소중히 씁시다^^`; 
}

function getSecondsToTomorrow() {
  let now = new Date();
  let tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1);
  let diff = tomorrow - now;
  return `${Math.round(diff / 1000)}초 밖에 안 남았습니다. 다시는 오지 않는 오늘입니다^^`;
}

🧩 정규 표현식

💁‍ 상근이는 생명과학 연구소에서 염색체가 특정한 패턴인지를 확인하는 일을 하고 있습니다. 염색체는 알파벳 대문자 (A, B, C, ..., Z)로만 이루어진 문자열이다. 상근이는 각 염색체가 다음과 같은 규칙을 만족하는지 검사해야 합니다.

• 문자열은 {A, B, C, D, E, F} 중 0개 또는 1개로 시작해야 한다.
• 그 다음에는 A가 하나 또는 그 이상 있어야 한다.
• 그 다음에는 F가 하나 또는 그 이상 있어야 한다.
• 그 다음에는 C가 하나 또는 그 이상 있어야 한다.
• 그 다음에는 {A, B, C, D, E, F} 중 0개 또는 1개가 있으며, 더 이상의 문자는 없어야 한다.
  
  
  문자열이 주어졌을 때, 위의 규칙을 만족하는지 구하는 프로그램을 작성하세요.

🚩 Example Output

Good
Infected!
Infected!
Infected!
Infected!
Infected!
Good
Good
Good
Good

const words = [
  '15',
  'AFC',
  'AAFC',
  'AAAFFCC',
  'AAFCC',
  'BAFC',
  'QWEDFGHJMNB',
  'DFAFCB',
  'ABCDEFC',
  'DADC'
];

const regexp = /^[A-F]?A+F+C+[A-F]?$/;

words.forEach(item => {
  if(item.match(regexp))
    console.log('Infected!');
  else
    console.log('Good');
});

🧩 map, slice

💁‍ arr 배열에는 숫자 뒤에 단위 문자가 붙거나 숫자 앞에 특수 문자가 1개 붙는 형태의 문자열들이 담겨있습니다. 해당 값들의 앞 또는 뒤에 위치한 문자를 제거하고 숫자로 형변환한 값들이 담긴 새로운 배열을 반환하는 removeChar 함수를 작성하세요.

🚩 Example Output

[ 1080, 100, 200, 60, 6, -15 ]

let arr = ["1080px", "$100", "+200", "60kg", "6m", "-15"];
console.log(removeChar(arr));

function removeChar(arr){
    return arr.map(item => parseInt(item) || +item.slice(1));
}

🧩 split, reverse, join

💁‍ 앞으로 읽어도 거꾸로 읽어도 똑같은 문자인지 판별하는 palindrom 함수를 만드세요.

🚩 Example Output

true
true
true
true
true
false

const list = ['기러기', '토마토', '스위스', '인도인', '별똥별', '우별림'];

list.forEach(item => console.log(palindrom(item)));

function palindrom(str) {
  return str === str.split('').reverse().join('')
}

---

👀 DOM

🧩 클릭 시, 색상 변경하기

💁‍ input type="color" 태그로 색상 선택 후 변경 버튼을 클릭하면 하단 div의 색상이 변경되도록 만드세요.

🚩 Example Output
[이미지]

<div id="div1" class="area"></div>

<input type="color" id="selectColor">
<button onclick="colorChange();">변경</button>

function colorChange() {
	const $area = document.getElementById('div1');
	const $color = document.getElementById('selectColor');

	$area.style.backgroundColor = $color.value;
};

🧩 클릭 시, 크기 조절하기

💁‍ 버튼 클릭 시 하단 div의 크기가 조절 되도록 만드세요.

🚩 Example Output
[이미지]

<div id="div2" class="area"></div>
<button onclick="halfSize();">50x50</button>
<button onclick="defaultSize();">원본(100x100)</button>
<button onclick="doubleSize();">200x200</button>

function halfSize() {
    const $area = document.getElementById('div2');
    $area.style.width = '50px';
    $area.style.height = '50px';
};
function defaultSize() {
    const $area = document.getElementById('div2');
    $area.style.width = '100px';
    $area.style.height = '100px';
}
function doubleSize() {
    const $area = document.getElementById('div2');
    $area.style.width = '200px';
    $area.style.height = '200px';
}

🧩 계산기 만들기

💁‍ 첫 번째 값과 두 번째 값을 입력 후 연산자 버튼 클릭 시 동작하는 calculator 함수를 만드세요. 함수의 매개변수로 연산자 버튼이 가지고 있는 value 값이 전달됩니다.

🚩 Example Output
[이미지]

첫 번째 값 : <input id="num1">
두 번째 값 : <input id="num2">
<input type="button" value="+" onclick="calculator(this.value);">
<input type="button" value="-" onclick="calculator(this.value);">
<input type="button" value="x" onclick="calculator(this.value);">
<input type="button" value="/" onclick="calculator(this.value);">
<input type="button" value="%" onclick="calculator(this.value);">
계산 결과 : <span id="calc"></span>

function calculator(value) {
    const $calc = document.getElementById('calc');

    switch(value){
        case '+' : result = Number(num1.value) + Number(num2.value); break;
        case '-' : result = Number(num1.value) - Number(num2.value); break;
        case 'x' : result = Number(num1.value) * Number(num2.value); break;
        case '/' : result = Number(num1.value) / Number(num2.value); break;
        case '%' : result = Number(num1.value) % Number(num2.value); break;
    }
    $calc.innerHTML = result;
}

💡 Another Solution

function calculator(value) {
    let su1 = Number(document.getElementById("num1").value);
    let su2 = Number(document.getElementById("num2").value);
    let result = 0;
    switch (value) {
        case "+": result = su1 + su2; break;
        case "-": result = su1 - su2; break;
        case "x": result = su1 * su2; break;
        case "/": result = su1 / su2; break;
        case "%": result = su1 % su2; break;
	}
	document.getElementById("calc").textContent = result;
}

🧩 목록 삭제, 생성하기

1) 목록 삭제

💁‍ 버튼 클릭 시 아래 ul 태그(id:list)의 하위 태그(li)를 모두 삭제하는 deleteList 함수를 만드세요.

🚩 Example Output
[이미지]

<button onclick="deleteList();">목록 삭제</button>
<ul id="list">
    <li>의류</li>
    <li>잡화</li>
    <li>가전</li>
    <li>가구</li>
    <li>식품</li>
    <li>레저</li>
    <li>여가</li>
    <li>도서</li>
</ul>

function deleteList() {
    const $list = document.getElementById('list');
    $list.innerHTML = "";
}

2) 목록 생성

💁‍ 버튼 클릭 시 "추가할 목록을 입력하세요"라는 prompt 창을 띄우고 입력 받은 값을 내부 텍스트로 하여 동적으로 li 요소 생성 후 위 ul 태그(id:list)의 하위 태그로 추가합니다.
입력하지 않고 취소 했을 시에는 추가하지 않습니다.

🚩 Example Output
[이미지]

<button onclick="createList();">목록 생성</button>

function createList(){
    let content = prompt('추가할 목록을 입력하세요');
    const $list = document.getElementById('list');
    const $li = document.createElement('li');

    if(!content==""){
        $li.textContent = content;
        $list.appendChild($li);
	}
};

🧩 appendChild

💁‍ 왼쪽으로 버튼 클릭 시 하단의 first, second, third div가 한 칸씩 왼쪽으로 이동하게 하는 left 함수를 작성하세요.

• ex)
  first - second - third 인 상태에서 left 1번 클릭하면 second - third - first로 변경
  left 한 번 더 클릭하면 third - first - second 로 변경

🚩 Example Output
[이미지]

<button onclick="left();">왼쪽으로</button>
<div id="area">
    <div class="first">first</div>
    <div class="second">second</div>
    <div class="third">third</div>
</div>

function left(){
	const $area = document.getElementById("area");
	$area.appendChild($area.firstElementChild);
}

---

👀 Event

🧩 lastElementChild

💁‍ 추가하기 버튼을 한 번 클릭하면 가로, 세로 100px, 1px의 직선 검은 테두리를 가진 빨간색 div를 area1 내부에 추가하고 한 번 더 클릭하면 같은 스타일의 노란색 div를 area1 내부에 추가하세요. 삭제하기 버튼을 누르면 마지막에 추가 된 div를 삭제합니다. div는 수직이 아닌 수평으로 추가되어야 하며 삭제 된 div 이후에 추가 될 때도 빨간색과 노란색 div가 번갈아가며 추가 되어야 합니다.

🚩 Example Output
[이미지]

<button id="add">추가하기</button>
<button id="remove">삭제하기</button>
<div id="area1" class="area"></div>

document.getElementById("add").addEventListener('click', function () {

	const $area1 = document.getElementById("area1");
 	const $newDiv = document.createElement("div");

  	$newDiv.style.width = "100px";
  	$newDiv.style.height = "100px";
    $newDiv.style.border = "1px solid black";
    $newDiv.style.display = "inline-block";

    if (!$area1.lastElementChild || $area1.lastElementChild.style.backgroundColor != "red") {
      $newDiv.style.backgroundColor = "red";
    } else {
      $newDiv.style.backgroundColor = "yellow";
    }

    $area1.appendChild($newDiv);
});

    document.getElementById("remove").addEventListener('click', function () {
      const $area1 = document.getElementById("area1");
      if ($area1.lastElementChild)
        $area1.removeChild($area1.lastElementChild);
});

🧩 예금 이자 계산기 만들기

💁‍ 예치금액, 예치기간, 연이자율 값이 변경 될 때마다 계산 된 결과를 원금과 만기지급금액으로 표기합니다.

🚩 Example Output
[이미지]

<form name="calculator">
  <table>
    <tr>
      <td>예치금액</td>
      <td>
        <input name="money" type="number" value="10000" required>
      </td>
    </tr>
    <tr>
      <td>예치기간</td>
      <td>
        <select name="months">
          <option value="3">3 (최단 예치기간)</option>
          <option value="6">6 (반년)</option>
          <option value="12" selected>12 (1년)</option>
          <option value="18">18 (1.5년)</option>
          <option value="24">24 (2년)</option>
          <option value="30">30 (2.5년)</option>
          <option value="36">36 (3년)</option>
          <option value="60">60 (5년)</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>연이자율</td>
      <td>
        <input name="interest" type="number" value="5" required>
      </td>
    </tr>
  </table>
</form>
원금 : <span id="money-before">10000</span>
만기지급금액 : <span id="money-after">10500</span>

// 폼 얻기
const $form = document.forms.calculator;

// 3개 입력 양식에 계산용 함수 이벤트 걸기
$form.money.oninput = calculate;
$form.months.oninput = calculate;
$form.interest.oninput = calculate;

function calculate() {

	const $form = document.forms.calculator;

    // 예치금액 : 문자 -> 숫자로 형변환
    let initial = +$form.money.value;
    if (!initial) return;

    // 예치 기간 : 1년 기준을 위해 12로 나눔
    let years = $form.months.value / 12;
    if (!years) return;

    // 연이자율 : 퍼센트이므로 0.01을 곱함
    let interest = $form.interest.value * 0.01;
    if (!interest) return;

    // 반올림 처리 (예치금액 * (1 + 연이자율 * 예치 기간(년)))
    let result = Math.round(initial * (1 + interest * years));

    // 원금과 만기지급금액 입력
    document.getElementById('money-before').textContent = $form.money.value;
    document.getElementById('money-after').textContent = result;
}

// 문서 로드 후 1번 자동 연산해서 값 설정
calculate();

🧩 blur, focus

💁‍ div를 클릭하면 textarea로 변경이 되고 그 안에서 값을 입력한 뒤 Enter를 누르거나 blur 이벤트가 발생하면 결과를 div 안에 저장합니다.

• HTML을 적으면 태그로 기능
• 참고 : textarea 태그를 만들면 edit이라는 클래스명을 부여 (CSS 설정이 있음)
• node.replaceWith(노드나 문자열) 메소드를 사용해보기

🚩 Example Output
[이미지]

<div id="view" class="view">여기를 클릭해서 내용을 입력하세요.</div>

let $area = null;
let $view = document.getElementById('view');

$view.onclick = editStart;

function editStart() {
	$area = document.createElement('textarea');
    $area.className = 'edit';
    $area.value = $view.innerHTML;

    $area.onkeydown = function (event) {
        if (event.key == 'Enter') {
          this.blur();
        }
    };

    $area.onblur = editEnd;

    $view.replaceWith($area);
    $area.focus();
}

function editEnd() {
    $view.innerHTML = $area.value;
    $area.replaceWith($view);
}

---

👀 Timer & BOM

🧩 setInterval, clearInterval

💁‍ 시작 버튼을 누르면 hh:mm:ss의 공간에 현재 시간이 보여지고 멈춤 버튼을 누르면 다시 hh:mm:ss로 보여지게 하는 start, stop 함수를 작성하세요. 단, 한자리 숫자는 앞에 0을 붙여서 두자리로 표현합니다.

🚩 Example Output
[이미지]

<button onclick="start();">시작</button>
<button onclick="stop();">멈춤</button>
<div id="clock">
	<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>

const $clock = document.getElementById('clock');
const $hour = document.getElementsByClassName('hour');
const $min = document.getElementsByClassName('min');
const $sec = document.getElementsByClassName('sec');
        
function start(){
	const date = new Date();
	const hour = date.getHours();
	const min = date.getMinutes();
	const sec = date.getSeconds();
	$clock.innerHTML = `${$hour.innerHTML = hour < 10 ? `0${hour}` : hour}:${$min.innerHTML = min < 10 ? `0${min}` : min}:${$sec.innerHTML = sec < 10 ? `0${sec}` : sec}`
            
	const timerId = setInterval(start, 1000);
}
        
function stop() {
	location.reload();
}

💡 Another Solution

let timer;
const clock = document.querySelector("#clock");

function start(){
	if(!timer){
		timer = setInterval(update, 1000);
		update();
	}
}

function stop(){
    clearInterval(timer);
    timer = null;
    clock.children[0].textContent = 'hh';
    clock.children[1].textContent = 'mm';
    clock.children[2].textContent = 'ss';
}

function update(){
    let date = new Date();
    let hour = date.getHours();
    let min = date.getMinutes();
    let sec = date.getSeconds();
    clock.children[0].textContent = hour < 10 ? '0' + hour : hour;
    clock.children[1].textContent = min < 10 ? '0' + min : min;
    clock.children[2].textContent = sec < 10 ? '0' + sec : sec;
}

🧩 입력받은 값을 배열에 저장하고 합산하기

💁‍ 아래의 조건에 맞는 sum 함수를 작성합니다. prompt로 사용자에게 숫자 입력을 반복 요청한 후, 입력받은 값들을 배열에 저장합니다. 숫자가 아닌 값 혹은 빈 문자열을 입력하거나 취소 버튼을 누르면 prompt 창의 반복을 멈추고 배열에 담긴 숫자의 합계를 반환합니다.
(단, 숫자 0은 유효한 입력으로 간주합니다.)

🚩 Example Output
[이미지]

function sum() {

    let numbers = [];

    while (true) {
        let value = prompt("숫자를 입력해 주세요.", 0);

        if (!value || isNaN(value)) break;
        numbers.push(Number(value));
    }

    let sum = 0;
    for (let key in numbers) {
        sum += numbers[key];
    }
    return sum;
}
console.log("합계 : " + sum());

🧩 prompt, alert

💁‍ 값 추가 버튼을 눌렀을 때 뜨는 prompt에 입력 된 값을 배열에 순서대로 저장합니다. 단, 취소 및 값 입력 없이 확인을 눌렀을 경우는 저장하지 않습니다. 값 출력 버튼을 누르면 지금까지 입력 된 값을 alert로 출력합니다. 단, 아직 입력 된 값이 없는 상태에서 버튼이 눌리면 '값이 먼저 입력 되어야 합니다.'를 출력합니다. 값 삭제 버튼을 누르면 지금까지 입력 되었던 배열의 값을 모두 제거한 뒤 '값이 모두 삭제되었습니다.'를 출력합니다.

🚩 Example Output
[이미지]

<button onclick="input(prompt('값을 입력하세요'));">값 추가</button>
<button onclick="print();">값 출력</button>
<button onclick="reset();">값 삭제</button>

let data = [];

function input(value) {
    if (value)
        data.push(value);
}

function print() {
    if (data.length != 0)
        alert(data);
    else
        alert('값이 먼저 입력 되어야 합니다.');
}

function reset() {
    data.length = 0;
    alert('값이 모두 삭제되었습니다.');
}