본문 바로가기

javascript8

ID, PW 입력 시 로그인 버튼 활성화 기능 구현하기 멘토님께서 미션 5도 함께 해보는것이 좋다고 하셔서 한번에 진행했다. Mission 5 | ID, PW validation 현재 id, pw 입력 시 무조건 로그인 버튼이 활성화 외어 있도록 구현이 되어 있습니다. 실제 로그인 하는 경우를 생각하며 validation(유효성 검사) 기능을 추가해주세요. ex) id >>> '@' 포함 / pw >>> 5글자 이상 일단 id의 value 값과 pw의 값을 확인한 후 두개 다 조건을 만족했을 때 버튼이 활성화되고 addEventListener의 click과 keyup event를 써서 로그인 버튼을 누르면 main 페이지로 넘어가게 만들고 싶었다. 먼저 DOM으로 필요한 값들을 불러냈다. const idForm = document.getElementById(.. 2023. 6. 13.
javascript에서 파일의 위치와 async, defer에 대해 알아보기 html과 css로 레이아웃을 꾸민 후 input tag의 id 칸과 pw 칸에 조건이 맞으면 활성화가 되어 로그인 버튼이 파란색으로 바뀌는게 첫 과제였다. 구글링을 해가며 코드는 맞게 짠 것 같은데 실행이 되지 않아 제일 첫 줄 부터 디버깅을 시작했다. ID값을 가져오는 부분부터 console.log를 찍어봤는데 첫번째 줄 부터 null이 나와서 당황스러웠다. 왜때문일까 고민하며 혹시 틀린 부분이 있나 싶어서 철자 하나하나 점 하나하나 다시 살펴봤지만 문제가 없다 생각했고 결국 SOS를 쳤다. 그 결과 javascript 태그의 위치의 문제였다. html 파일을 위에서부터 아래로 순서대로 실행을 하는데 javascript 태그도 그의 영향을 받기 때문이었다. css 파일은 head 태그에 넣어 맨 위에.. 2023. 6. 6.