티스토리 뷰
1. Event
: 웹사이트에서 발생하는 모든 동작
- 이벤트 함수를 정의할 때마다 JavaScript는 event 객체를 자동적으로 함수에 주입
// 이벤트 발생 시 함수 호출
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.addEventListner("eventName", "functionName"); // 창 전체에서 발생하는 모든 이벤트 감지
element.addEventListner("eventName", "functionName"); // 해당 요소에 발생하는 이벤트만 감지
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const title = document.querySelector("#title");
function handleResize(){
console.log("I have been resized");
};
window.addEventListener("resize", handleResize);
function handleOnline(){
console.log("Welcome back")
}
function handleOffline(){
console.log("Bye bye")
}
window.addEventListener("online", handleOnline); // 네트워크가 연결될 때
window.addEventListener("offline", handleOffline); // 네트워크가 끊길 때
window.addEventListener("resize", handleResize);
: resize 이벤트가 발생했을 때 함수가 호출됨window.addEventListener("resize", handleResize());
: document가 로드되자마자 자동적으로 호출됨
2. if - else
if (condition){
block
} else if (condition){
block
} else {
block
}
const age = prompt("How old are you?") // 사용자에게 입력값을 받는 함수(오래된 것이므로 사용권장X)
if (age >= 19 && age <= 22){
console.log("You can drink but you should not");
} else if (age > 22) {
console.log("Go ahead");
} else {
console.log("Too young");
}
==
: 값이 같은지만 비교 /===
: 값이 같고, 데이터의 타입 및 형식이 같은지까지 비교&&
: and||
: or
3. Practice 1
const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#0984e3";
function handleMouseenter(){
const currentColor = title.style.color;
if (currentColor === BASE_COLOR){
title.style.color = OTHER_COLOR;
} else {
title.style.color = BASE_COLOR;
}
}
function init(){ // 초기화 함수
title.style.color = BASE_COLOR;
title.addEventListener("mouseenter", handleMouseenter);
}
init()
4. Practice 2
const CLICKED_CLASS = "clicked";
function handleClick(){
const hasClass = title.classList.contains(CLICKED_CLASS);
if (hasClass){
title.classList.remove(CLICKED_CLASS);
} else {
title.classList.add(CLICKED_CLASS);
}
}
function handleClick2(){
title.classList.toggle(CLICKED_CLASS);
}
function init(){ // 초기화 함수
title.addEventListener("click", handleClick2);
}
init()
<classList>
: HTML5부터 class 추가, 삭제 등 class 속성값을 쉽게 조작하기 위해 추가된 프로퍼티
add(string)
: 지정한 클래스 값을 추가- 만약 추가하려는 클래스가 엘리먼트의
class
속성에 이미 존재한다면 무시함
- 만약 추가하려는 클래스가 엘리먼트의
remove(string)
: 지정한 클래스 값을 제거toggle(string)
- 하나의 인수만 있을 때: 지정한 클래스가 존재한다면 제거하고
false
를 반환, 존재하지 않으면 클래스를 추가하 고true
를 반환. - 두번째 인수가 있을 때: 두번째 인수가
true
로 평가되면 지정한 클래스 값을 추가하고false
로 평가되면 제거
- 하나의 인수만 있을 때: 지정한 클래스가 존재한다면 제거하고
contains(string)
: 지정한 클래스 값이 엘리먼트의class
속성에 존재하는지 확인replace(old, new)
: 존재하는 클래스를 새로운 클래스로 교체
참고 자료
바닐라 JS로 크롬 앱 만들기
크롬 앱 클론코딩하며, JS 이론 배우기
[초급] HTML, CSS, JS
academy.nomadcoders.co
Element.classList
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
[JavaScript] localStorage (0) | 2020.04.18 |
---|---|
[JavaScript] Momentum_01 (0) | 2020.04.18 |
[JavaScript] JavaScript_03 (0) | 2020.04.18 |
[JavaScript] JavaScript_02 (0) | 2020.04.18 |
[JavaScript] JavaScript_01 (0) | 2020.04.18 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Django 회원 정보 수정
- MySQL
- Django 업로드
- Django 북마크
- Django User
- Django 해시태그
- Django Instagram
- java
- Redis
- Django 인스타그램
- Django application
- Django 로그아웃
- 서점 어플리케이션
- Django 회원가입
- Django 검색
- Django 컬렉션
- Django
- 북마크 어플리케이션
- Django 로그인
- Django 어플리케이션
- Django 댓글
- query parameter
- Django 프로젝트 생성
- Django 팔로우
- Django 좋아요
- python
- 장고
- Django 비밀번호 수정
- Redis Cache
- 파이썬
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
글 보관함