1-if문을 이용해서 토글 안쓰고 토글 구현하기
function colorChange() {
const current = h1.style.color
if (current !== 'blue')
{h1.style.color = 'blue'}
else {h1.style.color = 'pink'} }
이렇게 해도 누르는대로 색이 바뀌긴 하지만 좀 이해하기 어렵
function colorChange() {const current = h1.style.color
let newColor;
if (current === 'blue') {newColor = 'orange'}
else {newColor = 'blue'}
newColor = h1.style.color;}
h1.addEventListener("click",colorChange);
1) element 찾아서 가져오기 2) event를 listen하기(어떤 이벤트를 가져올건지 ex 클릭,리사이즈 등등) 3)listen할때 어떤 반응 일어나는지 설정(함수)
댓글 퍼온거)변수 2가지에 대해 헷갈려하시는 것에 대한 제 의견을 말씀드려보도록 하겠습니다.
1. currentColor는 getter로써, 최근 color값을 복사하는 역할을 합니다. 그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절합니다.
2. newColor는 setter로써, 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 합니다. 그리고 이것도 의미론적으로 봤을 때 값이 변경될 수 있다는 것을 염두에 두기 위해 let으로 선언하는 것이 적절합니다.
3. 다들 아시겠지만 프로그래밍언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻입니다. 이를 염두에 두시면 코드를 이해하는데 편하실 것 같습니다.
4. (참고) 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않습니다. 그렇기 때문에 const currentColor로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있습니다.
마지막으로 값을 할당받는 변수를 맨 마지막에 선언해줌으로써 위에서 아래로 읽으면서 의미가 더 뚜렷하지는듯
강의들을때는 알겠는데 나보고 이렇게 변수 두개로 만들라그러면 생각해낼 수 있을까...
하지만 js로 css style값을 바꿔버리는건 권장되는 방식은 아님. 차라리 js가 html을 건들고 그걸 읽는 css를 바꾸는 방식이 훨 좋음.
css에 .active {color: blue;}를 해놓고 js에서 조건에 따라 className === 'active'로 바꿔버리면 css를 직접 안건들고도 색 변경가능
if (h1.className === 'active') {h1.className ===''}
else {h1.className ==='active'}
이렇게 해도 작동은 하지만 두가지 문제점
1) 'active'에 오타가 나면 알아챌 수가 없음. 이럴땐 cost activeClass ='active' 라고 설정해놓고 h1.className= activeClass 로 해놓으면 만약에 activeClass를 오타내면 console창에서 not defined라고 알려줌
2) 애초에 className === a 라는게 기존에 설정되어있는 class명을 교체하는 거기 때문에 만약에 기존 class명으로 css설정을 해놨을 경우에 그 설정값이 다 날라가버림. a +(기존 class이름) 으로 className 설정해도 작동은 하지만 만약에 기존 class명을 수정하게 되면 그것도 다 바꿔줘야돼서 핵별로