내 Github 저장소에서 확인하십시오 :)

진심으로 Brittany / tip-calculator-js

팁-계산기-js

이 Github Repo는 HTML, CSS, Bootstrap 및 Javascript를 실습으로 사용하여 만든 간단한 팁 계산기입니다.



View on GitHub



다음은 이 계산기를 만들면서 배운 몇 가지 사항입니다.

e.preventDefault()

자바스크립트를 개발하고 사용할 때 e.preventDefault()의 중요성을 배웠습니다.

계산기를 만드는 동안 숫자를 입력하면 페이지가 즉시 새로고침됩니다. e.preventDefault()에 대해 과거에 기록한 일부 메모를 검토하기 전까지는 그 이유를 알 수 없었습니다.

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

위 내용을 해석하는 방법은 JS에 이벤트 리스너에 대한 기본 설정이 있고 e.preventDefault() 호출되지 않는 한 기본 설정이 수행되는 것을 중지한다는 것입니다. 내가 틀릴 수도 있지만 내가 아는 것은 내 클릭 이벤트를 처리해야 할 때 내 페이지가 지속적으로 새로 고쳐지지 않는다는 것입니다.

입력 값을 문자열에서 정수로 변경

문자열을 정수로 변환하는 쉬운 방법도 배웠습니다.

    let checkAmount = document.getElementById('check-amount').value;

위document.getElementById('check-amount').value는 사용자가 입력한 문자열 값을 반환합니다. 그러나 나는 계산을 해야 한다는 의미의 팁 계산기를 만들고 있었고 문자열로는 그렇게 할 수 없습니다. 그래서 값을 변환하기 위해 값 앞에 +를 입력하기만 하면 값이 변환된다는 것을 배웠습니다.

    let checkAmount = +document.getElementById('check-amount').value;

isNaN 함수

마지막으로 에러 캐치! isNaN 함수를 사용하여 값이 NaN인지 아닌지 확인하는 방법을 배웠습니다.

    if (isNaN(checkAmount)){
        displayResults("Error, please enter a number");
        return;
    }

오늘의 노래: 저는 항상 브라스트랙에 푹 빠져 있었습니다! 그들에게 들어주세요 💕



진정으로,
브르타뉴