전체 글294 Saving Username 우리는 원하는 값을 저장하고, 저장한 다음에는 그 값을 불러올 수 있으며 그 값을 지울수도 있다. 이를 위해서 우리는 key와 value만 사용하면 되고, 유저가 이름을 제출할 때 그걸 저장하도록 코드를 구현하면 된다. localStorage.setItem(key, value) 의 형식으로 입력하면 되는데, 이때 key는 저장될 값의 이름이고 value는 저장될 값을 의미한다. 이제 파일을 실행하여 이름을 입력한 뒤 login 버튼을 누르면 cookie에 key와 value가 저장되는 것을 확인할 수 있다. 그런데 아직도 새로고침을 하면 form이 사라지지 않고 유지되는데, 우리는 이것을 원하지 않기 때문에, 다음 주제에서는 local storage에 username이 존재하는지 확인한 다음, 존재하면 .. 2022. 2. 23. 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. 이전 1 ··· 51 52 53 54 55 56 57 ··· 74 다음
