[자바15]JavaScript와 HTML 7

김지희·2023년 4월 12일
1

[자바]

목록 보기
15/17

https://developer.mozilla.org/en-US/docs/Web/API/Window

참고하실 사이트를 이제 올려드리네요!!
위 사이트에는 많은 event들을 찾아볼 수 있고, 많은 정보를 제공하고 있습니다.

  • event listener들을 지우겠습니다.
  • 이제는 handle TitleClick function에 초점을 맞출 것이기 때문이죠

유저가 title을 click했을 때 title을 파란색으로 칠해주는 것을 해봅시다.

하지만 한번 더 누르면 title의 색깔을 토마토색으로 변경하는 것

그리고 다시 클릭하면 파란색으로 그 다음엔 토마토색으로 click할 때마다 색이 변하는 것을요!

  • 이 말은 무언가가 true인지를 확인해야 한다는 것입니다.



클릭하면 title이 파란색으로 변하고 console에 blue라고 클릭시마다 나타나는 것을 확인해볼 수 있습니다.

여기서 원하는 것은 이 값을 검사해서 만약 h1.style.color가 blue이면 이걸 tomato로 변경해주라고 하는 것입니다.

그리고 만약 h1.style.color가 blue가 아니라면 blue로 변경해주라고 하는 것입니다.



===은 h1의 값이 blue와 일치하는지 확인하는 것입니다.

if의 다음은 else를 사용하는 것입니다. 앞부분이 true라면 이걸 tomato 색으로 바꾸는 것이죠, 그리고 이게 flase라면 이걸 blue로 바꾸는 것입니다.

코드를 개선해서 더 깔끔하게 만들어 봅시다.

  • 먼저 이 color 현재 상태를 저장하는 것을 해보죠

currentColor가 blue인지 확인합니다.

여기서 true 또는 false를 반환해줍니다.

그리고나서 이걸 두번씩 하는 것 대신에 여기에 let으로 변수를 하나 생성해도록 했죠

  • 이제, 만약에 currentColor가 blue라면, newColor는 tomato로 변경해주도록 해보겠습니다.

    결과는 동일하게 나와서 결과는 생략했습니다!
profile
프론트엔드 개발자로 취업한 인턴

0개의 댓글