Level 2 : 1~5 (숙제 및 깨달은 점)_if문

1. 2년 후 받을 총예금액 구하기

조건

50000원 미만: 연 15% / 50000원 이상 : 연 20%

function depositResult(amount) {
    const amountOver = amount * 1.2 * 1.2;
    const amountLess = amount * 1.15 * 1.15;
    if (amount >= 50000) {
        console.log(amountOver);
    } else {
        console.log(amountLess);
    }
}

---

2. 커피 총리필액 구하기

조건

커피는 총 3번 리필되며, 직전 마신 커피의 2/3만 리필된다.

let first = 360;
let total = 0;

console.log(first + first * (2/3) + first * (2/3) * (2/3));

깨달은 점

var과 let은 재할당이 가능하다.

---

3. 간단한 퀴즈 만들기

조건

맞추면 '성공', 틀리면 '실패', 3번 틀리면 '멍청아' alert 띄우기

let answerBtn = document.querySelector('#send-answer');
let answerCount = 1;

answerBtn.addEventListener('click', function(){
    let answer = document.querySelector('#answer').value;
    if (answer == '1335') {
        alert(`성공`);
    } else if (answerCount == 3 && answer != '1335') {
        alert(`멍청아`);
    } else {
        alert(`실패`);
    }
    answerCount ++;
})

깨달은 점

answer 변수선언을 클릭이벤트함수 바깥에 하니 정답을 맞추어도 실패가 떴다. 이벤트리스너 안에 있어야 이벤트 발동 시 실행되고, 밖에 있는 함수는 새로고침시에만 1회 실행되기 때문. 변수의 범위를 알게 된 좋은 예제였다.

---

4. 5초 제한 배너 만들기

조건

배너 텍스트가 5->1초로 매 초 줄어들고, 0이 되면 배너가 숨겨진다.

틀린 코드

let alertTimer = function(phrase){
    let time = 5;
    if (time > 0){
        document.querySelector('.alert').innerHTML = time + phrase;
        time --;
    } else if (time = 0){
        document.querySelector('.alert').style.display = "none";
    }
}
setTimeout(alertTimer, 1000, "초 이내 구매시 사은품 증정!");

수정한 코드

let time = 5;
let alertTimer = function(phrase){
    if (time > 0){
        document.querySelector('.alert').innerHTML = time + phrase;
        time --;
    } else {
        document.querySelector('.alert').style.display = "none";
    }
}
setInterval(alertTimer, 1000, "초 이내 구매시 사은품 증정!");

깨달은 점

setTimeout은 코드를 x초 후에 1회 실행해주었다. setInterval은 코드를 x초마다 반복적으로 실행해주었다. setTimeout에 콜백함수를 넘길때는 ()를 붙이지 말고 실행하지 않은 상태로 넘겨야 한다.(()가 붙으면 실행 결과가 전달되어 버린다.)

틀린 이유

time변수의 선언이 함수 밖에서 일어나야 했다. (함수 안에 초기값을 선언해버리니 함수가 실행될 때마다 초기값으로 돌아가기 때문인 듯 하다.) 저번 문제도 그렇고 변수 선언 위치로 인해 작동되지 않는 경우가 자주 생겨 앞으로 오류가 생기면 변수선언 위치를 우선적으로 체크하면 좋을 것 같다.

더 개선할 점

innerHTML 전체를 setInterval 파라미터로 통제하려고 하니 맨 처음에 setInterval이 동작하기 이전 시점에 아무 텍스트가 없는 상태로 존재했다. 이는 time--을 if문 안에 넣어버리니 해결은 되었지만 5초인 상태로 2초간 존재했기에 기능에 문제가 있는건 매한가지다. 그냥 span태그로 숫자만 바꾸는 게 나을 것 같다. (파라미터 사용이 낯설어 파라미터 제어를 사용해보고자 한번 넣어봤다.)

 

참고하면 좋은 페이지 : https://ko.javascript.info/settimeout-setinterval#ref-2102

setTimeout과 setInterval을 이용한 호출 스케줄링

---

5. 이메일과 비밀번호 정규표현식으로 검증하기

document.querySelector('form').addEventListener('submit', function(e){
    let userEmail = document.querySelector('#email').value;
    let userPW = document.querySelector('#password').value;
    if (/\S+@\S+\.\S+/.test(userEmail) == false) {
        alert(`올바른 이메일 형식으로 작성해야 합니다.`);
        e.preventDefault();
    } else {userEmail.submit();}
    if (/[A-Z]/.test(userPW) == false) {
        alert(`영문 대문자를 포함해야 합니다.`);
        e.preventDefault();
    } else {userPW.submit();}
})

깨달은 점 : preventDefault에 ()를 붙이지 않았더니 함수가 실행되지 않았다. 함수 붙일 때 () 쓸 때 안 쓸때를 잘 구분하여 주의하자.

---

출처 : 코딩애플 https://codingapple.com/