코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
input 이벤트
document.getElementById('email').addEventListener('input', function(){
console.log('안녕')
});☞ addEventListener에 'input'이 되면 값을 입력할때마다 출력됨
document.getElementById('email').addEventListener('change', function(){
console.log('안녕')
});☞ 값을 입력하고 포커스를 잃을때(다른 칸으로 이동) 출력됨
IF문 심화
if문은 true나 false를 넣어야 잘 작동하는 편
boolean : true, false만 있다.
true로 인정 되는 것 : 0 제외 모든 숫자, '아무 문자', [], {}
false로 인정 되는 것 : 0, '', null, underfined, NaN
연산자
== 같다
!= 다르다
=== 같다 엄격한 비교 (타입도 같아야 같다고 함)
&&연산자
if (1 == 1 && 2 == 2){
console.log('안녕')
}☞ 조건 2개 이상 동시에 비교해서 둘다 참인 경우 true, 하나만 참이라면 false
||연산자
if (1 == 1 || 2 == 2){
console.log('안녕')
}☞ 조건 2개 이상 동시에 비교해서 둘 중 하나라도 참이라면 true
IF 조건문 문제
문제 1. 369 게임 코드 (3의 배수는 박수 아니면 통과)
function Game369(number) {
if (number % 3 == 0) {
console.log("박수")
} else {
console.log("통과")
}
}
Game369(15);☞ add이벤트리스너도 넣고 난리를 쳤지만 생각보다 간단하게 가능했다.
문제 2. 369게임 업그레이드 (3의 배수는 박수, 9의 배수는 박수 두번 아니면 통과)
function Game369Plus(number) {
if (number % 9 == 0) {
console.log("박수 X2")
} else if(number % 3 == 0) {
console.log("박수")
}
else
{
console.log("통과")
}
}
Game369Plus(11);☞ 스스로 이건 풀어서 좋았음. 3의 배수를 먼저 넣으니 거기서 동작이 멈춰서 반대로하면 될까 했는데 성공!
문제 3. 시험점수 (둘다 합쳐서 120점이상이면 합격인데 한과목이 40점 미만이면 불합격)
function examPoint(score1,score2){
if (score1 < 40 || score2 < 40){
console.log('불합격')
} else if(score1 + score2 > 120) {
console.log('합격')
}
else{
console.log('불합격')
}
}
examPoint(100,59);
//실패한 로그 : 나는 한번에 다 할수 있을거라 생각했는데 아니라니..ㅠ
// function examPoint(score1,score2){
// if (score1 + score2 > 120 && score1 < 40 || score2 < 40){
// console.log('합격')
// } else {
// console.log('불합격')
// }
// }
// examPoint(39,39);
다크모드
다크모드는 주변 환경이 어두울때 다크모드로 보면 눈이 좀더 편안한 효과가 있음.
버튼을 누르면 내부 글자를 Dark 에서 Light로 변경
<script>
var count = 0;
$('.badge').on('click', function(){
count++;
if(count % 2 == 1){
document.querySelector('.badge').innerHTML = 'Light 🔄'
} else{
document.querySelector('.badge').innerHTML = 'Dark 🔄'
}
})
</script>dark라는 클래스만들어서 추가했다가 제거 했다가 하는 형식으로 작동함
변수
변수는 잠깐 자료를 저장하기 위해 필요하기도 하고 길고 복잡한 자료를 줄일수 있음
var 나이 = 20;
var 이름 ='kim'
console.log(나이)var 이름; : 변수를 만들겠다는 선언임
var 이름 = 'kim'; : kim을 이름에 할당하겠다는 뜻
var 이름 = kim;
이름 = 'park';
재할당도 가능함
변수의 범위 : 함수안에서 변수를 만들면 함수 안에서만 작동함
변수 +1 하는법
변수 ++
변수 += 1
변수 = 변수 + 1
let과 var과 const의 차이
1.let
let은 재선언이 안됨 (중복불가)
나중에 천줄정도 될때 만든 변수를 또 만드는 변수를 줄일 수 있음
범위 {}
-
const
재선언이 안되고 재할당도 안됨 (상수)
변하면 안되는 값 보관하기 좋음
범위{} -
var
재선언과 재할당 둘다 가능함
범위는 function
문제1. 5만원 미만 입금이면 연 15% 5만원 이상이면 연 20%, 변수에 예금액을 넘으면 2년후의 총 예금액은?
var 예금액 = 60000;
var 미래예금액 = 0;
if(예금액 >= 50000){
미래예금액 = 예금액 * 1.20 * 1.20
} else{
미래예금액 = 예금액 * 1.15 * 1.15
}
console.log(미래예금액) 문제2. 마신 커피의 3분의 2만큼 2번 리필을 해준다면 최대한 마실수 있는 커피를 계산하기.
마신 커피가 360이라면?
var 처음 = 360;
var 커피 = 0;
커피 = 처음 + (처음 * 2/3) + (처음 * 2/3 * 2/3)
console.log(커피)문제3. 답을 입력하고 맞으면 성공, 3번 실패하면 바보로 출력
<body>
<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
document.querySelector('#send-answer').addEventListener('click'<, function(){
if(document.getElementById('answer').value == '1335'){
alert ('성공')
}
else{
alert('바보')
}
})
</script>
</body>☞ 응용력을 열심히 기르도록 노력해야겠다.
[해답]
<body>
<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
var count = 0;
document.querySelector('#send-answer').addEventListener('click', function(){
count += 1;
var 유저답안 = document.querySelector('#answer').value;
if (유저답안 == '1335') {
alert('성공')
} else if (count >= 3 && 유저답안 != '1335'){
alert('바보')
}
});
</script>
</body>오늘의 한줄평 : 어느정도 감이 잡힌거같은데 역시 응용이 너무 어려운것 같다. 복습을 열심히 해야겠다고 생각했다.
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui
