DOM - If else - Function practice Two

***한 문장에서 2개의 식별자(h1, class="clicked")를 JS로 통제 할 수만 있다면, CSS에 스타일을 주고, JS로는 로직만
만져도 되는 상황을 만들 수 있다!!!***

const title = document.querySelector("#title");
//id = "title"(선택자)의 반환값을 title이라는 변수로 설정

const CLICKED_CLASS = "clicked";
//console에서 id="title" 옆에 class="clicked"도 추가했으므로 그 값을 일단 CLICKED_CLASS라는 변수로 할당하기

function handleClick(){
 const currentClass = title.className;
 if(currentClass !== CLICKED_CLASS){
    title.className = CLICKED_CLASS;
 } else {
    title.className = "";
  }
 }
 //1.function init()에서 받은 handleClick에 대한
  함수를 만드는 과정
   2.맨 처음에 받은 변수(title)안 현재의 클래스 속성
   (혹은 공백으로 구분된 클래스)의 값을 변수(currentClass)
   로 설정
   *className은 특정한 곳의 클래스 속성을 가져오는 문법이다.
   3.만약 2에서 만든 변수(className의 값을 나타내는)의
   value가 clicked가 아니라면 즉, 클래스 속성의 값이
   "clicked"가 아니라면! 클래스 속성을 "clicked"로 만들어
   주고, 현재 클래스 속성의 값이 "clicked"라면!
   공백(콘솔 창으로 확인해보면 class에 이름이 없어진걸 확인할
   수 있따)으로 주어라~~
 
 function init(){
  title.addEventListener("click", handleClick);
 }
 init();
 //title.addEventListener("이벤트종류", 함수이름)의 뜻
 은 지정한 이벤트가 일어날 시 뒤에 쓴 함수를 설정한다는 뜻
 웹에서 id = "title" 이런 걸 
 click했을 때 (event), handleClick(함수)이 실행되도록!
 
 
// 코드 설명
1)const title = document.querySelector("#title");
  -> html 문서 내 id 값
  "title"을 상수 "title"로 지정한 곳에 대입한다.
  즉 다른 title이다. 
  상수 "title"안에 id "title"이 들어있는 것!
  
2)const CLICKED_CLASS = "clicked";
  -> 상수 CLICKED_CLASS에 "clicked"값을 대입
  
3)function handleClick(){
   const currentClass = title.className;
   if(currentClass !== CLICKED_CLASS){
      title.className = CLICKED_CLASS;
   } else {
      title.className = "";
     }
   }
   -> handleClick이라는 함수를 정의한다. 그 내용은
  상수 currentClass에 title.className("clicked")을 
  대입한다.
  //html문서 내 ID title의 class를 지정해주는 코드가
   title.className이다.
   만약 currentClass에 대입한 값이 CLICKED_CLASS에 
   대입한 값과 같지 않다면 title.className 즉
   "clicked" = CLICKED_CLASS에 대입한 값 즉 
   "clicked"의 값을 가진다.
   그런데 if(currentClass !== CLICKED_CLASS)에서
   clicked == clicked라는 값을 충족하므로 ()의 조건을
   만족시키지 못하기 때문에 else로 넘어간다.
   그 때 title.className은 아무 값을 가지지 않는 것으로
   정해준다.
  //title.className은 값을 지정해 줄 수 있는
   특징이 있다.
   
   마지막으로 함수 init을 정의한다. 내용은
   title에 click이라는 이벤트가 발생했을 때 handleClick
   이라는 함수를 실행하시오.
   init함수를 실행한다.
   라고 해석할 수 있다.
   
   초기 html문서 내 class는 "clicked"값을 가진다.
   이때 This is work라는 글자를 클릭했을 때 init이라는 
   함수를 실행시키고 init함수의 정의대로 handleClick함수를
   실행시킨다.
   handleClick함수는 currentClass에 html문서 내 
   clicked값을 갖게 된 상태에서 if구문을 실행시킨다.
   하지만 currentClass는 clicked값을 갖고 있으므로
   if()안의 조건 currentClass !== CLICKED_CLASS를
   만족시키지 못한다. clicked == clicked 이란 값을 갖게 
   되어 else로 넘어가 html문서 내 title의 class값을
   "";으로 지정해준다.
   
   한마디로 클릭하면 html문서 내 title의 class값은
   아무 값도 가지지 못한다는 의미이다.
   그 때 CSS에 h1의 값을 지정해 놓았기 때문에 h1에 지정된
   색깔로 색깔이 변하게 되는 것이다.
   다시 클릭을 했을 땐 if()의 조건 
   currentClass !== CLICKED_CLASS를 만족시키기 때문에
   (currentClass = "", CLICKED_CLASS = "clicked")
   else로 넘어가지않고 title.className을 "clicked"로
   지정한다로 넘어갈 수 있다. 즉 다시 HTML문서 내 title의
   class 값 "clicked" 값이 생성되게 되고 그 때 CSS태그에
   clicked값에 지정해준 색으로 변하게 되는 것이다.
   간단히 말하면 다시 클릭하면 class = "clicked" 가 생성
   되어 색깔이 적용될 수 있다라는 것이다!!!!!!!
  
<마지막 정리>
HTML은 HTML파일만 CSS는 CSS파일만 작업, JS에선 로직만 처리
class가 전부 교체되어 복귀되지 않는 현상
-방법1
--title.classList.contains(CLICKED_CLASS)로 클래스
  가 있는지 체크(class="btn clicked"에서 clicked가
  포함되어 있는지 체크)
--title.classList.add(CLICKED_CLASS),
  title.classList.remove(CLICKED_CLASS)를 사용한
  로직문으로 클래스 변경
-방법2
--title.classList.toggle(CLICKED_CLASS); <-젤간편하고 좋다