✔ input, change 이벤트와 and, or 연산자 (11강)
input 이벤트와 change 이벤트
<input>태그에서 발생하는 이벤트<input>안에 입력할 때 발생
input 이벤트
document.getElementById('firstInput').addEventListener('input', function(){
console.log('한 글자 추가마다')
});
change 이벤트
<input>에 입력한 값이 바뀌고 포커스를 잃을 때 발생
document.getElementById('firstInput').addEventListener('change', function(){
console.log('커서 옮겼을때')
});
true / false
-
true와 같은 역할
0제외 모든 숫자
'아무문자'
[]
{} -
false와 같은 역할
0
''
null
undefined
NaN
and/or 연산자
- && ||
- 알고 있으니까 스킵!
✔ if/else, function 실력향상 과제 (12강)
369게임
- 3의 배수에서 박수 1번, 9의 배수에서는 박수를 두번, 그 외 통과
function 삼육구(num){
if(num % 9 == 0){
console.log("박수 X 2");
} else if (num % 3 == 0) {
console.log("박수");
} else {
console.log("통과");
}
};진짜 369 게임
- 일반적인 369게임
function 리얼삼육구(num){
const strnum = num.toString();
let cnt = 0;
for (let i=0; i<strnum.length; i++){ // 문자열의 길이만큼 반복, i는 i번째 자릿수
if(strnum[i] === '3' || strnum[i]==='6' || strnum[i]==='9'){ // 문자열의 각 자릿수에서 확인
cnt++;
}
}
if (cnt > 0 ){
console.log("박수 X " + cnt );
} else {
console.log("통과");
}
};
bg-dark text-light / 총점 불합격 / 통과
- 개론, 민법 2개 과목
- 과목마다 100점 만점이지만 두 과목 합해서 120점 이상이면 합격
- 다만 한 과목이 40점 미만이면 과락으로 불합격
- 0~100 사이의 점수가 아니면 alert으로 유효한 값 입력받기
function 시험(개론, 민법){
if(개론 < 0 || 개론 > 100 || 민법 < 0 || 민법 > 100){
alert("0~100사이의 점수를 입력하세요.")
} else if(개론 < 40 || 민법 < 40 ){
console.log("과락 불합격")
} else if ((개론 + 민법) < 120 ){
console.log("총점 불합격")
} else {
console.log("합격");
}
}
시험(14, 5);
✔ 변수 & Dark 모드 버튼 (13강)
변수
- 자료를 임시로 저장하고 싶을 때 사용
var 변수명 = 넣을 값 - 문자, 숫자 외에도 거의 모든 것을 넣을 수 있음
- document.getElementById() 이것도 변수에 넣어쓰기 가능
- camelCase로 작성
변수 작성 이유
1. 길고 복잡한 자료를 자주 사용 할 때 변수에 넣어 저장해서 사용하면 편리함var 인삿말 = '안녕하세요 반갑습니다 오랜만인데 그동안 잘지냈니';
- 특정 값을 기록하고 싶을 때 사용
var count = 0;
Dark 모드 버튼
classList.replace: 한 번에 클래스를 교체할 때 사용- var badge 에 document.querySelector('.badge'); 담음
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark text-light">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<script>
var cnt =0;
var badge = document.querySelector('.badge');
badge.addEventListener('click', function() {
if (cnt % 2 == 0) {
badge.innerHTML = "Dark 🔄";
badge.classList.replace('bg-light', 'bg-dark');
badge.classList.replace('text-dark', 'text-light');
} else {
badge.innerHTML = "Light 🔄";
badge.classList.replace('bg-dark', 'bg-light');
badge.classList.replace('text-light', 'text-dark');
}
cnt++;
});
</script>
</body>- 진짜 다크모드 하고 싶으면?
: body 태그에css 입힌 클래스 탈부착 하면 됨
✔ 변수 심화학습 (14강)
선언 & 할당 & 범위
선언
: 변수를 만드는 것 var age;
할당
: 변수에 넣는 것 age = 10;
범위
: 변수는 사용 가능한 범위가 있음
function old(){
var age = 20;
console.log(age); //가능
}
console.log(age); //불가능var & let & const
재선언과 재할당
-
let,const는 재선언 불가
: 같은 변수를 만들지 않도록 방지 -
const는 재할당 불가
: 값을 수정하면 안되는 변수를 만들 때 유용
값을 변경하는 실수 방지
var
- 재선언 O 재할당 O (유연)
- 범위 : 함수
let
- 재선언 X 재할당 O
- 범위 : {모든 중괄호}
const
- 재선언 X 재할당 X
- 범위 : {모든 중괄호}
코딩애플 JavaScript 입문과 웹 UI개발
ByeolGyu