231108 노마드 바닐라 JS 크롬 앱 -로그인1

1  toggle

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는 항상 일어난 일들에 대한 정보가 된다.

 

 어떤 event의 기본 동작이든지 발생되지 않도록 막음(alert 도 마찬가지)

---

오타!!!!!!!!!

---

관습 :string만 포함된 + 중요한 정보를 담고 있지 X 변수 => 대문자로 쓴다

---

    

"Hello " + 변수명;	`Hello ${변수명}`;
	string과 결합할 때 ${} `` : 백틱

---

빨리 끝날 줄 알았는데 생각보다 시간이 더 걸렸다.

내일은 꼭 끝내자😂