2022. 10. 3. 09:37ㆍ애플코딩 javascript 강의
Q1. 변수를 만들어봅시다
내 나이와 출신지역을 자바스크립트 변수에 저장해봅시다.
나이는 맨날 변하니 재할당가능한 변수,
출신지역은 바뀌지 않으니 재할당불가능한 변수에 저장해보십시오.
let age = 20;
const place = '서울';대충 이렇게 하면 되겠군요.
Q2. 왜 이 변수는 동작하지 않죠?
var name = 'park';
var id = 0;
function showName(){
var name = 'kim';
var id = 1;
console.log(name);
}
showName();
console.log(id);다음 코드를 실행했을 때 콘솔창에 무엇이 출력될까요?
console.log(name) 부분에선 'kim' 이 출력되고
console.log(id) 부분에선 0이 출력됩니다.
var name의 경우 함수 안에서 재선언 + 재할당 해버리고 출력해버렸으니 그냥 'kim' 잘 나오는데
var id의 경우 함수 안에 있던 변수는 바깥으로 탈출하지 않습니다.
그래서 함수 바깥에서 console.log(id) 하면 그냥 위에있던 var id = 0 이 출력됩니다.
Q3. 이자율 계산하기
철수는 은행에 예금을 하러 갔는데 예금 금액에 따라 이율이 달라지는 것을 보고 크게 당황했습니다.
첫 예금액이 5만원 미만이면 이율이 연 15퍼센트,
첫 예금액이 5만원 이상이면 이율이 연 20퍼센트라고 합니다.
그래서 민준이는
(1) 변수에 예금액을 넣으면
(2) 2년 후의 총 예금액을 자동으로 콘솔창에 출력해주는 기능을 자바스크립트로 만들려고하는데
어떻게 코드를 짜면 될까요?
var 예금액 = 60000;
var 미래예금액 = 0;
//여기에 코드짜보십시오
console.log(미래예금액)
(동작예시)
var 예금액이라는 변수에 60000을 집어넣으면 86400 이게 콘솔창에 출력되어야 합니다. (이자 20%가 2번 붙음)
var 예금액이라는 변수에 10000을 집어넣으면 13225 이게 콘솔창에 출력되어야 합니다. (이자 15%가 2번 붙음)
(힌트)
자바스크립트에선 + - / * 연산자로 사칙연산이 가능합니다.
답
은행 처음 가는 사람을 위해 이자율 계산 어떻게 하는지 설명드리면
연 이자가 15% 붙으면
1년 후 총금액 계산할 땐 원금 x 1.15 하면 끝입니다.
연 이자가 20% 붙으면
1년 후 총금액 계산할 땐 원금 x 1.20 하면 끝입니다.
이제 자바스크립트로 표현하면 됩니다.
var 예금액 = 60000;
var 미래예금액 = 0;
미래예금액 = 예금액 * 1.20 * 1.20 ;
console.log(미래예금액) 이러면 이율 20%인 경우 2년 후 총 금액을 잘 출력해줄듯 합니다.
근데 조건이 있군요
"첫 예금액이 5만원 미만이면 15% 이자줌" 이런 조건이 있습니다.
딱봐도 if 조건문 쓰면 되겠군요
var 예금액 = 60000;
var 미래예금액 = 0;
if ( 예금액 >= 50000 ){
미래예금액 = 예금액 * 1.2 * 1.2 ;
} else {
미래예금액 = 예금액 * 1.15 * 1.15 ;
}
console.log(미래예금액) 그래서 60000 넣으면 86400 출력되고
10000 넣으면 13225 잘 출력됩니다.
Q4. 커피 리필을 이상하게 해주는 곳이 있습니다. 최대한 마실 수 있는 커피양을 계산해봅시다.
방금 마신 커피의 3분의 2만큼 총 2번 리필해주는 카페가 있습니다.
예를 들면 처음 커피를 90ml 주문하면 첫 리필은 60ml를 해주며, 그 다음 리필은 40ml를 해주는 카페입니다.
그럼 처음 주문한 커피 양에 따라서 최대한 마실 수 있는 커피를 콘솔창에 계산해주는 코드를 작성해봅시다.
var first = 360;
//여기 어떤 코드가 들어가면 될까요? (동작예시)
var first에 360을 집어넣으면 위 코드를 실행했을 때 콘솔창에 760이 출력되어야합니다. (360 + 240 + 160)
초등학교 사칙연산 수학문제인데 프로그래밍으로 풀 뿐입니다.
종이와 연필로 풀어보면
360 + 360 x ⅔ + 360 x ⅔ x ⅔
이거 구하면 됩니다. 자바스크립트로 그대로 옮기면 되겠습니다.
var first = 360;
var total = 0;
total = first * 2 / 3 + first * 2 / 3 * 2 / 3
console.log(total)다 마신 양을 저장할 변수부터 만들었습니다.
이러면 끝입니다.
Q5. 간단한 퀴즈 UI를 만들어봅시다.
<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
여기에 기능 알아서 만드십시오
</script>유저가 <input>에 답을 적고 제출버튼을 누를 수 있는 퀴즈 UI 입니다.
1. 유저가 답을 맞추면 alert('성공');
2. 유저가 답을 3번 찍어서 못맞추면 alert('멍청아') 를 띄워봅시다.
하단에 자바스크립트 작성하면 됩니다.
(위 문제의 답은 1335입니다)
답
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제풀이</title>
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
</head>
<body>
<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
var cnt=0;
$('#send-answer').on('click',function(){
if($('#answer').val()=='1335'){
alert('성공');
}else{
cnt++;
alert('땡');
if(cnt==3){
alert('멍청아');
cnt=0;
}
}
})
</script>
</body>
</html>
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기 (0) | 2022.10.03 |
|---|---|
| JavaScript 입문과 웹 UI개발(13)-setTimeout 타이머주는 법 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자 (0) | 2022.10.02 |