addEventListener 안에 있는 함수는 우리가 직접 실행하는게 아니라 브라우저가 실행하는 것
원래 존재하던 클래스를 없애버리지 않고 특정 클래스만 추가 삭제하는 다섯줄의 과정이
toggle 로 인해 단 한 줄이 되었다.
종합반에서 박스작업할 땐 toggle이 그저 '나타났다 사라지게한다' 라고만 이해했었는데
toggle 을 사용하지 않았을 땐 If도 가져오고 class에 특정값을 포함하고 있는지 확인하고 추가하고 제거하고 이런저런 과정들을 거친다는 것을 알게 된 후에 보니까
더욱 기억에 잘 남고 이해도 잘 된다. 무엇보다 다섯줄이 한줄이 되는 느낌이 너무 좋다.
classList : class들을 작업할 수 있게 허용 className : className이 주어지면 이전에 있던 것을 포함해서 바꿈 -> 그래서 classList.contains 를 이용해 특정한 class만 활용할 수 있게 해줬다.
니꼬쌤 화면 "=" : 오른쪽에 있는 값을 왼쪽에 대입!! 같다는 의미가 아니다 currentColor 변수 선언 후 태그.style.color 값 복사 newColor 변수 선언 ( ="") 조건 따라서 newColor에 값을 대입 (그래서 let 사용한 거였다) 그리고 태그.style.color 에 값이 대입된 newColor를 대입
h1.style.color = newColor; 이 부분이 이해가 안갔었는데 조건에 따라 statement를 지나와서 h1의 칼라가 지정되고 그게 돌아서 currentColor 로 들어오고.
2 Log-In
너무 기니 있는 기능을 활용
input 의 속성을 활용
그런데 이대로는 Log In 을 클릭해도 확인작업이 나오지 않는다.
----왜??
Input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다.
유효성 검사란 : 서버로 데이터를 제출하기 전, 포함되어야 할 정보들이 올바른 형식이고, 입력 조건에 맞게 잘 입력되었는지 확인하는 것 : html5의 유효성 검사는 <input> 태그의 속성을 활용함
form 안에 넣으니 정상적으로 뜬다
input에 값을 입력하고 login 버튼을 클릭면 값이 사라짐
<= form 안의 button을 클릭 / type이 submit인 input을 클릭 / form 안에서 엔터를 누르고 input이 더 존재하지 않는다면
form이 submit 돼서 웹을 재시작함
<= 브라우저가 그렇게 되도록 프로그래밍 되어있다.기본 동작!
event가 발생하면 브라우저는 onLoginsubmit 함수를 호출하고 그 함수를 실행시키는데
이때 onLoginsubmit ( -----이 안에서 브라우저가 event로부터 잡아낸 정보를 가진 채로-----) 함수를 실행시킨다.
모든 eventListener function의 첫번째 agument는 항상 일어난 일들에 대한 정보가 된다.
