2021-06-03 (52일차) 자바스크립트 - mouseenter, mouseleave, addClass, removeClass, hasClass, 색상변경버튼, 좌측에서 이미지 들어오는 애니메이션

21강~25강

 

- alert('내용');

  실행되는지 확인할 때 자주 이용됨  

 

- .mouseover과 .mouseout은 사용 비추천

 

- .mouseenter

  마우스가 닿으면 실행

 

- .mouseleave

  마우스가 닿았다가 떨어지는 순간 실행

---

- .addClass, .removeClass

  클래스 추가, 클래스 제거

  사용하는 이유 : 기존까지 배워왔던 방식은 자바스크립트에서 모두 다 해냈지만(css값을 주는 등…)

                        기존의 방식은 자바스크립트 코드가 길어지기 때문에 실무에서 잘 사용하지 않음

                       → css에서 class를 이용해 먼저 값을 준 후, 자바스크립트에서 실행시킴

 

- 실행값에 함수를 합쳐 쓰는 방법

  기존에는 함수를 지정하고 실행값에 함수를 넣어줬었다

  하지만 함수 지정하지 않고 합쳐 쓸 수 있음

  함수 이름 생략 가능

  ex) ('태그').click(function() { });

 

- 색상 변경 버튼

  : 2개의 버튼을 만들어서 이용할 때

클릭하면 클래스를 추가되게 실행시키기

---

- 색상 변경 버튼

  : isred=false 이용

  : 실무에서 사용하지 않음

 

- .hasClass~

  : ~라는 Class를 가지고 있다. (단정문)

  ㄴ 참/거짓으로 나뉨

 

- 색상 변경 버튼 <실무사용>

  : let으로 함수 지정 후, hasClass 이용

  : 실무에서 사용

---

< 좌측→우측 이미지 들어오는 애니메이션 효과 >

※ 제이쿼리로 스타일을 직접 조종하면 안 되고, addClass를 이용해야 하는 이유

※ 자바스크립트는 무조건 짧아야 좋음

 

  - 버전1) 제이쿼리로 직접 스타일 변경

 

  - 버전2) addClass로 제이쿼리를 최소화