1. event
# event
: 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
- 이벤트 이용하여 사용자와 상호작용 가능
- ex) onclick, onchange
1.1. 버튼 두개로 day/night 모드 전환
<javascript />
<input type="button" value="night" onclick="
document.querySelector('body').style.color='white';
document.querySelector('body').style.backgroundColor='black';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.color='black';
document.querySelector('body').style.backgroundColor='white';
">
1.2. 버튼 하나로 day/night 모드 전환 - if문 사용
<html />
<input id="night_day_btn" type="button" value="night" onclick="
if(document.querySelector('#night_day_btn').value === 'day'){
document.querySelector('#night_day_btn').value = 'night';
document.querySelector('body').style.color='black';
document.querySelector('body').style.backgroundColor='white';
}else{
document.querySelector('#night_day_btn').value = 'day';
document.querySelector('body').style.color='white';
document.querySelector('body').style.backgroundColor='black';
}
2. 리팩토링
# 리팩토링
: 결과의 변경 없이 코드의 구조를 재조정함
- 가독성을 높이고 유지보수 편해짐
- 중복된 코드와 비효율적인 코드 제거
- 틈틈히 리팩토링해야 좋은 코드가 됨
2.1. 버튼 하나로 day/night 모드 전환 - 반복된 코드 제거 (리팩토링)
<html />
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'day'){
this.value = 'night';
target.style.color='black';
target.style.backgroundColor='white';
}else{
this.value = 'day';
target.style.color='white';
target.style.backgroundColor='black';
}
2.2. 버튼 하나로 day/night 모드 전환 - a태그 글씨 변경 (배열과 for문 사용)
<html />
<input type="button" value="night" onclick="
var target = document.querySelector('body');
var alist = document.querySelectorAll('a');
if(this.value === 'day'){
this.value = 'night';
for(var i = 0; i<alist.length; i++){
alist[i].style.color='blue';
}
target.style.color='black';
target.style.backgroundColor='white';
}else{
this.value = 'day';
for(var i = 0; i<alist.length; i++){
alist[i].style.color='powderblue';
}
target.style.color='white';
target.style.backgroundColor='black';
}
2.3. 버튼 하나로 day/night 모드 전환 - 함수사용
<javascript />
<script>
function nightDayHandler(self) {
var target = document.querySelector('body');
var alist = document.querySelectorAll('a');
if (self.value === 'day') {
self.value = 'night';
for (var i = 0; i < alist.length; i++) {
alist[i].style.color = 'blue';
}
target.style.color = 'black';
target.style.backgroundColor = 'white';
} else {
self.value = 'day';
for (var i = 0; i < alist.length; i++) {
alist[i].style.color = 'powderblue';
}
target.style.color = 'white';
target.style.backgroundColor = 'black';
}
}
</script>
<html />
<input type="button" value="night" onclick="nightDayHandler(this)">
2.4. 버튼 하나로 day/night 모드 전환 - 객체 사용 & 파일로 분리
<javascript />
var setColor = {
setTextColor: (color) => {
document.querySelector('body').style.color = color;
},
setBackGroundColor: (color) => {
document.querySelector('body').style.backgroundColor = color;
},
setLinksColor: (color) => {
var alist = document.querySelectorAll('a');
for (var i = 0; i < alist.length; i++) {
alist[i].style.color = color;
}
}
};
function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value === 'day') {
self.value = 'night';
setColor.setBackGroundColor('white');
setColor.setTextColor('black');
setColor.setLinksColor('blue');
} else {
self.value = 'day';
setColor.setBackGroundColor('black');
setColor.setTextColor('white');
setColor.setLinksColor('powderblue');
}
}
<html />
<script src = "color.js"></script>
3. 라이브러리와 프레임워크
# 라이브러리
: 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것
- 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않으므로 제작 의도에 맞게 작성하면 됨
- ex) jQuery
# 프레임워크
: 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것
- 라이브러리가 포함
- 프레임워크만으로는 실행되지 않으며 기능 추가를 해야 함
- 프레임워크에 의존하여 개발해야 함
- 프레임워크가 정의한 규칙을 준수해야 함
- ex) Java - Spring / Python -Django / JavaScript - Angularjs / PHP -Laravel
3.1. 버튼 하나로 day/night 모드 전환 - jQuery사용
<html />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src = "color.js"></script>
<javascript />
var setColor = {
setTextColor: (color) => {
$('body').css('color', color);
},
setBackGroundColor: (color) => {
$('body').css('backgroundColor', color);
},
setLinksColor: (color) => {
$('a').css('color', color);
}
};
function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value === 'day') {
self.value = 'night';
setColor.setBackGroundColor('white');
setColor.setTextColor('black');
setColor.setLinksColor('blue');
} else {
self.value = 'day';
setColor.setBackGroundColor('black');
setColor.setTextColor('white');
setColor.setLinksColor('powderblue');
}
}
4. UI와 API
# UI
: 사용자 인터페이스
- ex) 버튼
# API
: 애플리케이션 프로그램 인터페이스
- ex) alert
'FRONTEND > JavaScript' 카테고리의 다른 글
| [ JavaScript ] 비동기 통신 - Promise, async, await (0) | 2023.01.23 |
|---|---|
| [ 노마드코더 - 바닐라 JS로 크롬 앱 만들기 ] 소스코드 및 완성본 (0) | 2022.12.22 |
| [코드잇 - 자바스크립트 객체 지향 기본기] 2. 객체지향 프로그래밍의 4개의 기둥 : 추상화, 캡슐화, 상속, 다형성 (0) | 2022.11.22 |
| [코드잇 - 자바스크립트 객체 지향 기본기] 1. 객체와 클래스 (0) | 2022.11.22 |
| [코드잇 - 모던 자바스크립트] 06. 자바스크립트 모듈 (0) | 2022.11.22 |
