저번시간 숙제는
다크모드 버튼눌렀을 때
버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~
버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~
코드를 짜봅시다.
그대로 코드로 번역만 하면 됩니다.
var count = 0;
$('.badge').on('click', function(){
count += 1;
if (count가 홀수면) {
내부글자를 Light로 변경
} else {
내부글자를 Dark로 변경
}
});한글만 잘 채우면 되겠네요.
count += 1 왜하냐고요?
버튼누를 때 마다 버튼누른 횟수를 계속 업데이트하고싶으니까 쓴 것임
var count = 0;
$('.badge').on('click', function(){
count += 1;
if (count % 2 == 1) {
$('.badge').html('Light');
} else {
$('.badge').html('Dark')
}
});2로 나눠서 나머지가 1이면 항상 홀수입니다.
jQuery로 찾은 요소 innerHTML을 바꾸고 싶으면 .html('바꿀내용') 쓸 수 있습니다.
이러면 이제 버튼 누를 때 마다 글자가 Light <-> Dark 왔다갔다합니다.
실제 다크모드처럼 사이트가 시커멓게 변하는건
1. 부착하면 시커매지는 class 하나를 만들어놓고 2. 버튼누를 때 class를 부착해보길 바랍니다.
CSS 수업시간이 아니니 여기까지하겠습니다.
(참고) Bootstrap 스타일이 적용된 요소는 css 덮어쓰기가 어려울 수 있습니다.
bg-dark 클래스명을 bg-light 이런 식으로 바꾸거나
아니면 붙어있던 class를 제거하거나 그러면 됩니다.
변수의 선언, 할당, 범위라는 개념
변수쓸 땐 선언과 할당이라는 용어가 있는데
변수만드는걸 선언
변수에 뭐 집어넣는걸 할당이라고 합니다.
var 나이;
var 이름;이건 변수의 선언이라고 합니다.
var 나이;
var 이름;
나이 = 20;
이름 = 'kim';밑의 2줄은 할당이라고 합니다.
- 저렇게 선언만 따로, 할당만 따로 할 수 있습니다.
- 이미 있는 변수를 재선언도 가능합니다.
- 이미 들어있는 값을 등호로 재할당도 가능합니다.
function 함수(){
var 나이 = 20;
console.log(나이); //가능
}
console.log(나이); //불가능변수는 사용가능한 범위가 있습니다.
함수 안에서 변수를 만들었을 경우 함수 안에서만 사용가능합니다.
밖에선 사용불가능합니다. 밖에서 출력하면 변수가 정의 안되었다고 에러남
- 반대로 함수 바깥에서 만든 변수는 함수 안에서는 사용가능합니다.
var let const 문법 전부 변수생성 가능
let 거주지 = 'seoul';
const 가격 = 3000;var 대신 let, const 문법 써도 똑같이 변수생성이 가능합니다.
근데 let, const는 이런 기능을 제공합니다.
let 거주지 = 'seoul';
let 거주지; //에러내줌let, const는 재선언 불가능합니다. 재선언하면 에러를 내줍니다.
Q. 장점이 뭐임
여러분 코드 천줄 만줄 짜다보면 나중에 변수만든거 또 만들고 그런 실수가 있습니다.
그걸 미연에 방지해주는 고마운 변수생성 키워드입니다.
const 가격 = 3000;
가격 = 4000; //에러내줌const는 재할당도 불가능합니다. 재할당하면 에러를 내줍니다.
Q. 장점이 뭐임
값을 수정하면 큰일나는 변수들을 만들고싶을 때 유용합니다.
나중에 값을 변경하는 실수를 방지하고 싶을 때 쓰면 됩니다.
if (true) {
let 이름 = 'kim';
}
console.log(이름); //없다고 나옴let과 const는 범위가 더 좁습니다. 모든 중괄호가 범위입니다.
if, function, 나중에 배울 for 반복문 이런 것은 중괄호가 있습니다.
중괄호 안에서 만든 let const 변수의 경우 중괄호를 벗어나면 없다고 나옵니다.
정리하자면 이렇습니다.
var 변수는 유연해서 재선언 재할당이 자유롭습니다.
Q1. 변수를 만들어봅시다
내 나이와 출신지역을 자바스크립트 변수에 저장해봅시다.
나이는 맨날 변하니 재할당가능한 변수,
출신지역은 바뀌지 않으니 재할당불가능한 변수에 저장해보십시오.
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번 붙음)
(힌트)
자바스크립트에선 + - / * 연산자로 사칙연산이 가능합니다.
Q4. 커피 리필을 이상하게 해주는 곳이 있습니다. 최대한 마실 수 있는 커피양을 계산해봅시다.
방금 마신 커피의 3분의 2만큼 총 2번 리필해주는 카페가 있습니다.
예를 들면 처음 커피를 90ml 주문하면 첫 리필은 60ml를 해주며, 그 다음 리필은 40ml를 해주는 카페입니다.
그럼 처음 주문한 커피 양에 따라서 최대한 마실 수 있는 커피를 콘솔창에 계산해주는 코드를 작성해봅시다.
var first = 360;
//여기 어떤 코드가 들어가면 될까요? (동작예시)
var first에 360을 집어넣으면 위 코드를 실행했을 때 콘솔창에 760이 출력되어야합니다. (360 + 240 + 160)
Q5. 간단한 퀴즈 UI를 만들어봅시다.
<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
여기에 기능 알아서 만드십시오
</script>유저가 <input>에 답을 적고 제출버튼을 누를 수 있는 퀴즈 UI 입니다.
1. 유저가 답을 맞추면 alert('성공');
2. 유저가 답을 3번 찍어서 못맞추면 alert('멍청아') 를 띄워봅시다.
하단에 자바스크립트 작성하면 됩니다.
(위 문제의 답은 1335입니다)
(응용 1)
위에서 1.2를 여러번 곱했는데 1.2를 10번 곱하려면 코드를 어떻게 짜야될까요?
1.2 * 1.2 * 1.2 ... 계속 하면 되긴 하는데
자바스크립트엔 ** 이런 거듭제곱 연산자 기능도 있습니다.
(응용 2)
커피리필 문제에서
커피리필을 무한으로 해준다면 처음 담아주는 커피가 360ml일 때 총 몇 ml의 커피를 마실 수 있을까요?
무한등비수열의 합 그런건데 공식이 가물가물해서 여기까지 하겠습니다.
'자바스크립트' 카테고리의 다른 글
| 자바스크립트> 함수의 return 문법 & 소수 다루기 (0) | 2024.07.08 |
|---|---|
| 자바스크립트>캐러셀(이미지 슬라이드)만들기 (1) | 2024.07.08 |
| 자바스크립트> 연산자 & 함수 테스트 (0) | 2024.07.07 |
| 자바스크립트>FORM & if & int,change이벤트 (0) | 2024.07.07 |
| 자바스크립트>모달창과 간단한 애니메이션 (0) | 2024.07.07 |