JavaScript36 Getting Username 이번에는 유저가 이름을 제출했을 때 해당 form 자체를 사라지게 하는 것을 구현해보기로 했다. 우리는 이 form을 css로 지울 수 있는데, 이를 위해 hidden이라는 class를 가진 요소를 지워지게 하는 css 코드를 작성했다. 이제 html의 form 태그에 hidden이라는 class를 추가하면 새로고침 후 form이 사라지는 것을 확인할 수 있는데, 여기에 JS를 사용하여 이름을 입력했을 때만 form을 사라지게 하도록 구현해보자 먼저 form의 submit이라는 기본 동작을 막아주는 preventDefault()를 사용한 다음 username을 loginInput.value에 저장해 주고, loginForm에 hidden이라는 class를 추가해주는 코드를 작성했다. 이것을 실행 해보면 .. 2022. 2. 23. 4.3 Events part Two 이제는 form에서 살짝 벗어나서, 특정 사이트로 이동하는 a 태그를 작성해 보았다. 저번에는 form의 기본 동작이 submit이었던 것 처럼 링크의 기본 동작이 클릭 시 다른 페이지로 이동한다는 것을 이용하여 그것을 JS로 막아보기로 했다. 위의 코드를 작성 후 실행해보면 링크를 클릭했을 때 alert 창이 뜨면서 다른 페이지로의 이동을 순간적으로 막아주는 것을 확인할 수 있다. (하지만 alert는 모든 동작들을 막아주기 때문에 자주 사용하지는 않는다.) 이때 handleLineClick() 함수에 event를 인자(argument)로 넣어주면 이 event가 어떤 종류인지, 좌표가 어디인지 등 다양한 정보를 얻을 수 있다. 이번에는 링크의 기본 동작을 막아주고 event의 내부를 출력하는 코드를 .. 2022. 2. 22. 4.2 Events 이제 form이 submit 이벤트를 감지하도록 js 코드를 수정해보자 loginForm 변수를 만들어 그에 맞게 코드를 작성하고 이를 실행 해 보면, 이름을 입력하고 login 버튼을 눌렀을 때 consol창에 이름이 출력됐다가 다시 사라지는 것을 확인할 수 있다. 그렇지만 우리는 form을 submit 할 때 입력값을 받아내는 것을 해냈다. 이제 login 버튼을 눌렀을 때 새로고침을 하지 않도록 막는 것만 해결하면 된다. 브라우저가 우리에게 어떤 정보를 주고있는지 알기위해 코드를 추가한 다음 출력해보도록 하자 새로고침 후 실행해보면 아까처럼 consol 창에 무언가 출력되는걸 확인할 수 있는데 이는 onLoginSubmit function에 대한 argument(event)로 얻어온 정보이다. 즉,.. 2022. 2. 21. Form Submission 이번에는 이름을 입력했을 때만 login 버튼을 누를 수 있게 해보려고 한다. 먼저 loginInput.value를 변수로 지정해준 다음, value 값이 없으면(이름을 입력하지 않으면) 이름을 입력하라는 안내문을 출력하도록 코드를 작성했다. 이제 새로고침 후 실행했을 때 이름을 입력하지 않으면 안내문이 출력되는 것을 확인할 수 있다. 이 내용을 user가 볼 수 있도록 console.log가 아닌 alert로 바꿔보자 이번에는 else if 를 추가하여 value 값(user가 입력한 username)을 확인해보자 헷갈리지 않게 하려고 변수 명을 value -> username 으로 변경했다. stirng의 길이를 알 수 있는 .length를 활용하여 이름의 길이가 15자를 초과하면 안내문을 출력하도록.. 2022. 2. 15. 이전 1 ··· 4 5 6 7 8 9 다음
