Box 움직이기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js ex15</title>
<style>
div.box {
width: 100px;
height: 100px;
border: 3px solid red;
background-color: yellow;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<button id="startBtn">Start</button>
<div class="box" id="box0">Box</div>
<div class="box" id="box1">Box</div>
<div class="box" id="box2">Box</div>
<div class="box" id="box3">Box</div>
<script>
var startBtn = document.querySelector("#startBtn");
var move = function(selector, target, callback) { //선택자와 거리, 끝나고 처리할 함수를 매개변수로 받음.
let box = document.querySelector(selector); //id명이 box인 것
// 정해진 시간 간격으로 계속 반복.
if(box) {
// JS는 속성을 임의대로 추가 가능.
box.callback = callback; //박스 객체에 callback 속성을 넣어 어떤 box속성의 callback인지 구별하기 위해 사용한다.
box.changeBg = function(color) {
this.style.backgroundColor = color;
}
var x = 0;
//setInterval은 정해진 시간 간격으로 계속 반복한다.
var refInterval = setInterval(function() {
//console.log("0.1초 후 callback 함수 실행 ... " + x);
x += 10;
box.style.left = x + 'px'; //px를 문자열로 추가해야 정상적인 작동함.
if(x>=target) {
// x가 300이상 되면 움직임을 멈춘다.
clearInterval(refInterval); // setInterval을 변수로 만들어서
//clearInterval(변수명)을 지정해야 setInterval이 멈추게 된다.
box.callback(box);
//이렇게 해야 밑에 onclick에서 this.changeBg처럼 this로 사용이 가능해진다.
//selector를 이용해 해당 요소를 담았기 때문
}
}, 30);
}
}
startBtn.onclick = function() {
move("#box0", 300, function(element) { //마지막의 function은 callback에 들어가는 인자로 동작이 다 실행되고 나서 실행하는 부분이다.
console.log('동작 그만!');
console.log(this);
this.changeBg('pink');
move("#box1", 200, function() {
move("#box2", 100, function() {
this.changeBg('orange');
});
});
});
}
//setTimeout은 지정된 시간이 지나고 기능을 실행한다. 정해진 시간 이후에 1회 실행한다.
/* setTimeout(function() {
console.log("2초 후 callback 함수 실행 ...");
}, 2000); */
</script>
</body>
</html>
External 방식 라이브러리를 적용
- 코드 흐름 설명
1) $('#btn')을 만나서 JS코드 부분에 var $ = function(selector)가 실행된다.
2) $('#btn').click( )이라 element.click( )부분이 실행된다.
3) 버튼을 클릭하게 되면 onclick이 실행되고 매개변수로 들어간 함수타입 callback 변수가 실행된다.
4) $('.hello')를 만나 다시 var $ = function(selector)가 실행된다.
5) .changeColor('red')를 실행하고 그 뒤 .changeBg('yellow')를 실행한다.
- 주의해야할 것
만약, changeColor와 changeBg함수의 return을 하지 않으면 실행결과에 에러가 나거나 몇개의 실행만 진행된다. 그 이유는 메소드 체인 방식 때문인데 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.
만약, 이전 실행 메소드의 return값이 없으면 그 다음 메소드는 다른 함수를 호출 할 반환 객체가 없어서 정의가 되지 않았다는 에러를 뱉는다. 그래서 각 메소드마다 return값을 줘야한다.
- my_library2.js
// $는 그냥 변수명이다. 변수명에 익명함수 입력한거다. 매개변수로 어떤 element가 선택되었는지 selector를 넣어준다.
// 여기는 JS코드 부분
var $ = function(selector) {
let element = document.querySelector(selector);
// 함수 내 함수를 만들고 싶을 때 이렇게 사용한다.
element.changeColor = function(color) {
this.style.color = color; //여기서 this는 element이다.
return element; //color가 적용된 element를 반환한다.
}
// 함수 내 함수를 만들고 싶을 때 익명함수를 이용해 변수에 담아주면 된다.
// return으로 원하는 기능이 실행된 element속성을 반환해야한다.
// 메소드 체인
element.changeBg = function(color) {
this.style.backgroundColor = color; //여기서 this는 element이다.
return element; //배경이 적용된 element를 반환한다.
}
//클릭이 되었을 시 실행한다.
element.click = function(callback) {
element.callback = callback;
element.onclick = function(){
element.callback();
}
return element;
}
return element; //최종적으로 적용된 element를 반환한다.
}- js_ex.html
<!-- External 방식의 라이브러리 적용해서 사용하는 방법 -->
<script src = "my_library2.js"></script>
<script>
// 메소드 체인 만들기
//라이브러리를 적용했기 때문에 따로 코드 없어도 라이브러리 내 코드가 실행된다
//여기서 $는 그냥 변수명이라고 생각, 라이브러리에 var $ = function(selector)로 선언하여 그 코드가 실행된다.
//callback에는 함수명이 담겨야한다!
$('#btn').click(function(){
// 글자색은 red로 배경색은 yellow로 만듬
$('.hello').changeColor('red').changeBg('yellow'); //callback으로 이 실행문 자체가 넘어간다.
});
</script>
👨Education Computer Engineering 🎓Expected Graduation: February 2023 📞Contact info thstjddn77@gmail.com