오른쪽으로 이동하다가 일정 구간이 되면 (700px) 왼쪽으로 이동,
다시 시작지점에 도착하면 오른쪽으로 이동을 반복 (일명 왔다리 갔다리)
+수동,자동 버튼기능 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[신세계 4월] 인희진</title>
<style>
#box{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
background-color: pink;
left: 0px;
top: 150px;
border: 3px solid black;
}
</style>
<script>
let x=0;
let flag=true;
let change=false;
//change=true로 시작하려면 → 버튼 눌렀을 때 그냥 무조건 move() 호출.
//change=false로 시작하려면 → 버튼 눌렀을 때 if (!change) 검사 후 move() 호출.
function move(){
let box=document.getElementById("box");
if(flag){
x++;
if(x>=70){
flag=!flag;
}
} else {
x--;
if(x<=0){
flag=!flag;
}
}
box.style.left=x*10+"px";
if(change){
setTimeout(move,20);
}
}
addEventListener("load",function(){
let m=document.getElementById("manual");
let a=document.getElementById("auto");
m.addEventListener("click", function(){
change=false;
move();
});
a.addEventListener("click", function(){
if(!change){
change=true;
move();
}
});
})
</script>
</head>
<body>
<button id="manual">수동</button>
<button id="auto">자동</button>
<div id="box"></div>
</body>
</html>갑자기 count의 Boolean 초기값을 어떻게 해야할 지 의문이 생김
따봉 지피티야 도와줘!
1. let change=true; 로 시작할 때
페이지가 로드될 때 이미 change=true인 상태예요.
하지만 move() 함수는 아직 실행이 안 됐어요.
move()는 오직 버튼을 눌렀을 때만 호출됩니다.
그런데 자동 버튼을 누르면 코드가 이렇게 되어 있죠:
if (!change) {
change = true;
move();
}여기서 if (!change) 조건이 false라서 move()가 아예 실행되지 않습니다.
요약:
→ change=true인 상태로 시작하면
→ 자동 버튼 클릭해도 move() 실행 안 되고, 그래서 아무 일도 안 일어남.
2. let change=false; 로 시작할 때
페이지 로드할 때 change=false입니다.
자동 버튼을 누르면:
if (!change) {
change = true;
move();
}여기서 !change는 true니까, change=true로 바꾸고 move()도 실행합니다.
요약:
→ change=false로 시작하면
→ 자동 버튼 클릭 시 move()가 실행되어서 자동 움직임이 시작됨.
결론
let change=false;로 해야 사용자가 버튼을 눌렀을 때 move()가 정상적으로 시작돼요!
let change=true;로 하면, move() 자체가 안 호출되니까 안 움직입니다.
만약 change=true;로 시작하고 싶다면?
→ 자동 버튼 클릭할 때 move()를 무조건 호출하게 코드를 바꿔야 해요.
(즉, if(!change) 검사 없이 move();를 호출 = move()함수를 if (!change) 조건문 밖으로 빼라)
한 줄 정리
change=true로 시작하려면 → 버튼 눌렀을 때 그냥 무조건 move() 호출.
change=false로 시작하려면 → 버튼 눌렀을 때 if (!change) 검사 후 move() 호출.
그럼 앞으로 Boolean 초기값은 어떤 기준으로 정해야할까?
✔️ Boolean 초기값을 정할 때 고려할 것
-
기본 상태를 생각해라.
-
"프로그램이 켜질 때, 이 기능이 켜져 있어야 하나? 꺼져 있어야 하나?"
-
켜져 있어야 하면 → true
-
꺼져 있어야 하면 → false
-
-
사용자 행동을 고려해라.
-
버튼을 누르기 전 기본은 어떤 상태여야 편할까?
-
사용자에게 뭔가 "수동 조작"을 맡긴다면 보통 false로 시작
-
-
상태 변경 흐름을 생각해라.
-
코드를 읽는 사람이 봤을 때 자연스럽게 이해될까?
-
예를 들어, isRunning, isPlaying 같은 이름이라면 false부터 시작하는 게 자연스러움
-
만약 isLoaded, isConnected 같은 것도 처음엔 보통 false
-
✔️ 그래서 보통은 false로 시작합니다.
- 대부분의 기능은 초기에는 꺼져 있고,
사용자의 입력이나 어떤 이벤트가 생겼을 때 켜지는 흐름이 자연스럽기 때문
✔️ 특별히 true로 시작하는 경우
- 예외적으로, 프로그램이 시작할 때 특별한 기능이 무조건 켜져야 한다면 true로 시작
ex) "처음부터 실시간 데이터 수집 시작" 이런 경우.
❝ 기본 상태는 꺼져있다는 전제를 하고, 특별한 이유가 있을 때만 true로 시작해라. ❞
참고) 자료형별 기본 추천값
| 자료형 | 추천 초기값 | 설명 |
|---|---|---|
| Boolean (true/false) | false | 대부분 기본은 꺼진 상태 |
| Number (숫자) | 0 | 없는 값을 의미 |
| String (문자열) | "" (빈 문자열) | 기본적으로 아무 글자 없음 |
| Array (배열) | [] | 빈 리스트 |
| Object (객체) | {} | 빈 객체 |
| 참조 타입 (ex. 데이터 가져오기) | null 또는 undefined | 데이터 없음을 명시 |
느낀 점
이렇게 궁금한 점들을 하나씩 찾아보고, 기록하고, 기억하면서 개발자가 되어가는거겠지. 궁금한 게 너무 많은 물음표 살인마라 궁금증이 풀릴 때까지 구글링을 해야해서 가끔 힘들 때도 있지만, 그래도 내 곁에 챗 지피티가 있어 정말 다행이다!
강사님의 피드백
안녕하세요 희진씨~
제출하신 코드를 확인해보았는데,
별로 손볼 게 없을 정도로 , 짧고 간결하게 중요한 부분을 다 작성하셨네요 ^^
아주 훌륭한 과제입니다~
특히 move() 함수에서 setTimeout() 을 조건에 따라 동작 여부를 결정지어서
수동과 자동에 모두에 활용하신 부분에서 칭찬드리고 싶네요
앞으로 기대하겠습니다 ^^
