1강 / 변수, 사칙연산 실력향상 과제
Q1. 변수를 만들어봅시다
내 나이와 출신지역을 자바스크립트 변수에 저장해봅시다.
나이는 맨날 변하니 재할당가능한 변수,
출신지역은 바뀌지 않으니 재할당불가능한 변수에 저장해보십시오.
풀이
우리는 이전 Level 1 14강 강의에서 선언과 할당에 대해 배웠다.
간단히 이 사진을 보면 이해가 쉽게 될 것 같다.
우리는 var을 사용하지 않기로 했기 때문에 let 과 const 로 문제를 풀어보자
정답
let age = 27 const area = 'Seoul'
Q2. 왜 이 변수는 동작하지 않죠?
const name = 'park';
const id = 0;
function showName(){
const name = 'kim';
const id = 1;
console.log(name);
}
showName();
console.log(id);다음 코드를 실행했을 때 콘솔창에 무엇이 출력될까요?
풀이
위 문제는 Scope에 대한 문제 같다. Scope는 Level 1 14강 에서 다루었으므로 기억이 나지 않는다면 14강으로 다시 돌아가거나 아래 사이트를 참고하면 될 것 같다.
Scope
정답
kim 0
showName()함수 내부에서name과id라는 새로운 변수가 선언되었다. 이 변수들은 함수 내부의로컬 스코프에 존재하며, 함수 내에서만 유효하다.- 따라서 함수 내부에서
name 변수는'kim'이고,id 변수는1이다.
- 함수 외부에 선언된
name 변수와id 변수는 함수 내부에서의 선언에 영향을 받지 않는다. 함수 내부에서의 선언이 우선시된다.- 그래서
showName()함수가 호출되어'kim'이 출력되고, 함수 외부에서의id 변수인0이 출력된다.
요약하자면, 함수 내부에서의 변수 선언이 우선시되며, 함수 외부에 선언된 변수와는 별개의 변수로 취급된다!
Q3. 이자율 계산하기
철수는 은행에 예금을 하러 갔는데 예금 금액에 따라 이율이 달라지는 것을 보고 크게 당황했습니다.
첫 예금액이 5만원 미만이면 이율이 연 15퍼센트,
첫 예금액이 5만원 이상이면 이율이 연 20퍼센트라고 합니다.
그래서 민준이는
(1) 변수에 예금액을 넣으면
(2) 2년 후의 총 예금액을 자동으로 콘솔창에 출력해주는 기능을 자바스크립트로 만들려고하는데
어떻게 코드를 짜면 될까요?
const deposit = 60000;
let futureDeposit = 0;
//여기에 코드짜보십시오
console.log(미래예금액)(동작예시)
var 예금액이라는 변수에 60000을 집어넣으면 86400 이게 콘솔창에 출력되어야 합니다. (이자 20%가 2번 붙음)
var 예금액이라는 변수에 10000을 집어넣으면 13225 이게 콘솔창에 출력되어야 합니다. (이자 15%가 2번 붙음)
(힌트)
자바스크립트에선 + - / * 연산자로 사칙연산이 가능합니다.
풀이
이자율 계산하는 방법
예금액 >= 50000 예금액 * (1 + 20/100) ** 2 // 예금액 < 50000 예금액 * (1 + 15/100) ** 2
** 2을 한 이유는 2년 후 총 예금액이기 때문!
정답
let deposit = 60000;
let futureDeposit = 0;
function level2Test(number) {
if (number >= 50000) {
futureDeposit = number * (1 + 20 / 100) ** 2;
console.log(futureDeposit);
}
deposit = 10000;
if (deposit < 50000) {
futureDeposit = deposit * (1 + 15 / 100) ** 2;
console.log(Math.ceil(futureDeposit));
}
}
level2Test(deposit);올림
위 코드에서 올림을 사용한 이유는 예금액이 10000인 경우에 13224.99999998 이런식으로 나왔기 때문에 올림을 사용해주었다.
Q4. 커피 리필을 이상하게 해주는 곳이 있습니다. 최대한 마실 수 있는 커피양을 계산해봅시다.
방금 마신 커피의 3분의 2만큼 총 2번 리필해주는 카페가 있습니다.
예를 들면 처음 커피를 90ml 주문하면 첫 리필은 60ml를 해주며, 그 다음 리필은 40ml를 해주는 카페입니다.
그럼 처음 주문한 커피 양에 따라서 최대한 마실 수 있는 커피를 콘솔창에 계산해주는 코드를 작성해봅시다.
let first = 360;
//여기 어떤 코드가 들어가면 될까요?(동작예시)
let first에 360을 집어넣으면 위 코드를 실행했을 때 콘솔창에 760이 출력되어야합니다. (360 + 240 + 160)
풀이
식 완성
처음커피 + 처음커피 * 2 / 3 + 처음커피 * 2 / 3 * 2 / 3위 식을 코드로 다시 해석하면 완성될 것 같다!
정답
let first = 360;
function coffeeTest(number) {
let last = number + number * 2 / 3 + number * 2 / 3 * 2 / 3;
console.log(last);
}
coffeeTest(first);
Q5. 간단한 퀴즈 UI를 만들어봅시다.
<p>태조 이성계가 태어난 년도는?</p>
<form>
<input type="text" id="answer" />
<button type="reset" id="send-answer">제출</button>
</form>
<script>
여기에 기능 알아서 만드십시오
</script>유저가
<input>에 답을 적고 제출버튼을 누를 수 있는 퀴즈 UI 입니다.
1. 유저가 답을 맞추면alert('성공')
2. 유저가 답을 3번 찍어서 못맞추면alert('실패')를 띄워봅시다.
하단에 자바스크립트 작성하면 됩니다.
(위 문제의 답은 1335입니다)
풀이
- 유저가
<input>에 1335를 적으면 '성공'이라는 알림이 떠야한다.
- 유저가
- 정답 카운트인
count변수를 만들어야 한다.
- 정답 카운트인
- 유저가 정답을 틀리면 '??번 틀렸습니다.' 라는 문구가 나오고
count가 + 1이 된다.
- 유저가 정답을 틀리면 '??번 틀렸습니다.' 라는 문구가 나오고
count가 3이상이 되면 '실패'라는 문구가 떠야한다.
- 4자리 숫자를 입력하지 않으면 '4자리 숫자를 입력하세요'라는 문구가 뜬다.
정답
const quizBtn = document.querySelector("#send-answer");
const inputAnswer = document.querySelector("#answer");
quizBtn.addEventListener("click", test5);
let answerCount = 0;
function test5() {
if (inputAnswer.value.length != 4) {
alert("4자리 숫자를 입력하세요");
} else if (inputAnswer.value == 1335) {
alert("성공");
} else if (answerCount >= 2) {
alert("실패");
} else if (inputAnswer.value != 1335) {
answerCount += 1;
alert(answerCount + "번 틀렸습니다");
}
}
응용 문제 1번
위에서 1.2를 여러번 곱했는데 1.2를 10번 곱하려면 코드를 어떻게 짜야될까요?
1.2 1.2 1.2 ... 계속 하면 되긴 하는데
자바스크립트엔 ** 이런 거듭제곱 연산자 기능도 있습니다.
let money = 60000;
let 미래예금액 = 0;
//여기에 코드짜보십시오
console.log(미래예금액);풀이
거듭제곱 연산자를 이미 사용했기 때문에 바로 정답으로 넘어가려고 한다.
혹시 연산자에 대한 이해가 부족하다면 아래 사이트를 참고하면 된다.
산술 연산자
정답
let deposit = 60000;
let futureDeposit = 0;
function level2Test(number) {
if (number >= 50000) {
futureDeposit = number * (1 + 20 / 100) ** 10;
console.log(futureDeposit);
}
deposit = 10000;
if (deposit < 50000) {
futureDeposit = deposit * (1 + 15 / 100) ** 10;
console.log(Math.ceil(futureDeposit));
}
}
level2Test(deposit);응용 문제 2번
커피리필 문제에서
커피리필을 무한으로 해준다면 처음 담아주는 커피가 360ml일 때 총 몇 ml의 커피를 마실 수 있을까요?
무한등비수열의 합에 대해서 알아보기
풀이
무한등비수열의 합 공식
원래커피 / (1 - (2/3))2/3은 뭔가요?
아까 3분의2만큼 리필을 해준다고 했으니 리필값을 넣어준 것이다.
정답
let first = 360;
function coffeeTest(number) {
let infinite = number / (1 - (2/3))
console.log(infinite);
}
coffeeTest(first);
2강 / setTimeout 타이머주는 법
기본 함수 중에 setTimeout() 이런게 있는데
자바스크립트 기본 함수 중에 setTimeout() 이라는게 있다.
이거 쓰면 X초 후에 코드를 실행해준다.
setTimeout()사용 방법setTimeout(function(){ 실행할코드~ }, 기다릴시간);시간은 ms 단위로 적으면 된다. (1ms는 1000분의 1초)
예시
setTimeout(function test() { console.log("안녕"); }, 1000);위처럼 쓰면 1초 후에 콘솔창에 '안녕'이 뜬다.
한번 쉬운문제 1개를 풀어보자
문제1
<div class="alert alert-danger"> 5초 이내 구매시 사은품 증정 </div>Q. 페이지 방문 5초 후에 위의
<div>를 숨기려면 코드를 어떻게 짜야할까요?
정답
const gifts = document.querySelector(".alert-danger");
setTimeout(function second_5() {
gifts.style.display = "none";
}, 5000);5초 후에 gifts.style.display = "none"; 이 코드가 실행되고 끝이 난다.
X초마다 코드를 실행하고 싶으면 setInterval()
setInterval()사용방법setInterval(function(){ 실행할코드~ }, 기다릴시간);
X초마다 안에 있는 코드를 실행해준다.
예시
setInterval(function(){ console.log('안녕') }, 2000);위처럼 쓰면 2초 마다 콘솔창에 '안녕'이 뜬다.
잠깐상식 : 자바스크립트 문법 vs 브라우저 사용법
var let const if function🔼이런건 자바스크립트 프로그래밍 문법이다.
document.querySelector()
alert()
setTimeout()
addEventListener()🔼이런건 웹브라우저 사용법이다.
우리가 웹개발 잘하고 싶으면 자바스크립트 문법만 배우면 안된다.
웹브라우저 사용법도 많이 알아야 이쁜 UI도 만들고 폼 기능도 만들고 이벤트도 걸고 그럴 수 있으니까!
웹브라우저 사용법가지고 코드짜다가
코드 약간 줄이고 싶으면 function
자료를 잠깐 보관하고 싶으면 let, const
코드를 조건부로 실행하고 싶으면 if
이런거 쓰면 되는 것일 뿐이다.
위 설명들을 읽고 아래 내용을 이해해야 한다 (반드시!!)
브라우저의 비동기 함수 작동 원리
콜백함수관련 짧은 테크닉
그냥 함수 파라미터 자리에 들어가는 함수를 콜백함수라고 한다.
addEventListener(), setTimeout() 이런건 안에 콜백함수를 요구한다.
왜 콜백함수가 필요할까? setTimeout 만든 사람이 그래야 작동하도록 만들어놔서 그렇다.
중요한 점은 콜백함수도 일종의 함수기 때문에
다른 곳에서 만든 함수를 집어넣어도 잘 작동한다는 것이다.
setTimeout(함수, 1000);
function 함수(){
console.log('안녕')
}예를 들어 아까랑 다르게 이렇게 써도 잘 된다. 1초 후에 '안녕' 잘 출력됨
그래서 콜백함수자리에 있는 코드가 좀 더러우면
다른 곳에서 함수로 만들어놓고 그 함수 이름만 콜백함수자리에 집어넣는 식으로 코드짜도 된다.
숙제
위에서 만든
<div>안에 "5초 이내 구매시 사은품 증정" 이라는 문자가 있습니다.
1초마다 5라는 문자를 1씩 감소시켜봅시다.
0이 되면<div>를 안보이게 처리합시다.
(힌트) 5라는 문자만<span>5</span>이걸로 감싸면 html 조작하기 쉬워집니다.
(참고) 타이머를 삭제하고 싶으면
let 타이머 = setInterval(??);
이렇게 변수에 저장해둔 다음
타이머 삭제하고 싶을 때clearTimeout(타이머)이 코드 실행하면 됩니다.
5따로
<span>으로 묶기<div class="alert alert-danger"> <span id="time-second">5</span>초 이내 구매시 사은품 증정 </div>
5요소 가져와 변수명 지정하기
const gifts = document.querySelector(".alert-danger"); //div태그 const timeSecond = gifts.querySelector("#time-second"); //span태그
1초씩 감소하며 0이되면 없어지는 textChange 함수 만들기
let second = 5;
setInterval(textChange, 1000);
function textChange() {
second -= 1;
if (second >= 0) {
timeSecond.innerText = second;
} else {
gifts.style.display = "none";
}
}- 1초마다
textChange함수가 실행된다.
- 1초마다
- 1초마다
second의 5가 -1이 된다.
- 1초마다
second가 0이하가 될 때 까지if문의 코드가 실행된다.
⇒ 5에서 시작되었으면 1초뒤 second의 숫자는 -1이되어 4가 될 것이고 4는 0보다 크기 때문에timeSecond.innerText = second;의 코드가 실행된다.second는 현재 4이기 때문에 5에서 4로 문자가 바뀌게 됨
⇒ 이런식으로 0까지 총 5번의 코드가 반복된다.
- 0이되었으면
if문의 조건이false가 되기 때문에else문의 코드가 실행된다.
⇒gifts(div)태그가 사라진다.
- 0이되었으면
