자바스크립트23 자바스크립트 (19) - 시계기능 구현. 로그인 기능에 이어 두번쨰 기능인 시계 기능 구현에 앞서 폴더들을 새로 만들어 주었다. 파일 하나에 모든 코드를 몰아 넣는 것은 가독성 등에서 별로 좋은 일이 아니기 때문에 서로 다른 기능(앱)에 대해 하나씩 다른 파일로 분리시키는 것이 좋다. 따라서 자스 폴더에 greetings 와 clock 을 만들어주고 css 폴더도 따로 만들어 주었다. 이렇게 세분화해서 관리하고 작업하는 방식을 divide and conquer 방식이라고 한다. 이후 html에서 두가지 자스를 불러오도록 했다. path가 바뀌었으니 path도 수정해준다. 또한 바디태그에 clock 표시를 위한 새로운 h2태그를 만들어 주었다. - 인터벌과 타임아웃 기능 인터벌은 매번 특정 간격으로 일어나야 하는 무언가이다. 우리가 개발을 하면서.. 2022. 11. 10. 자바스크립트 (18) - 로그인 기능 구현 총정리 html css js html에는 form과 h1 두가지 요소만이 있다. 그리고 두개들은 히든 클래스의 스타일 때문에 숨겨져 있을 것이다. 그다음 자바스크립트가 실행돼 유저 네임 키를 가지고 로컬 스토리지를 확인하게 된다. 로그인창에 서밋한 기록이 없다면, 처음에는 if문에서 null조건에 따라 폼의 hidden클래스를 지우고 onsubmit이벤트 함수를 호출한다. 호출하면서 이벤트 객체에 대한 정보를 넘겨주게 되는데, 거기에는 event 에 관한 정보들이 담겨있다. 그 정보에는 브라우저가 이벤트에 대한 기본 동작을 못하도록 막는 프로퍼티가 있다. 이것을 실행해 로그인폼 객체에 다시 히든을 추가해 폼을 숨긴다. 그런 다음 인풋 값을 가져와 username이라는 변수에 저장해준다. 그리고 셋 아이템 메소드.. 2022. 11. 9. 자바스크립트 (17) - 저장하기. 로컬스토리지 이제 밸류 저장을 배운다. 유저의 이름이든 뭐든, 뭔가를 저장하는 것은 매우 중요하다. 예를들어 유튜브에서 우리가 볼륨을 조절하고 새로고침하면 플레이어가 볼륨값을 기억하고 있다. 전에도 말했듯이 클래스 네임을 추가하고 삭제하는 등 개발자가 자주하는 작업들은 이미 api가 존재한다. 콘솔에 로컬 스토리지를 입력하면 이미 정의가 되어 있다. 개발자 도구에 들어가 화살표모양을 클릭하고 application으로 들어가면 로컬 스토리지를 발견할 수 있다. 세션스토리지, 인덱스트 디비, 웹sql,쿠키등도 있는데, 우리는 로컬 스토리지를 다뤄본다. 이 모든것들이 다 정보를 저장할 수 있지만, 그중에 로컬 스토리지가 다루기 가장 쉽다. 그냥 작은 디비같은 것이며 키밸류만 있으면된다. 아직 로컬 스토리지에 아무것도 없으.. 2022. 11. 9. 자바스크립트 (16) - 로그인 기능 구현 Log In console dir 해서 loginInput을 객체 조회해보면 value값이 있는데 즉 이게 입력을 받을때 할당되는 값이다. 이게 input 안에 있는 텍스트이다. 폼에 아무것도 없이 섭밋을 했는데 섭밋이 된다. 유저가 이름입력했을때만 입력되도록 확인 작업이 필요하다. 사실 우리가 부딪히는 문제는, 다른 프로그래머들도 자주 부딪히는 문제들이다. 클래스네임 더하기 삭제하기나 문자열 개수세기등은 많이쓰기 때문에 내장함수가 준비되어 있다. 이렇게 if문을 작성해 일정 길이 이하면 입력이 안되도록 할 수도 있지만. 브라우저 자체의 기능을 사용할 수 있다. 우리는 자스를 쓰고 있기 때문이다. 프로그래밍을 할때는 항상 최고의 툴을 쓰며 이미 있는 기능을 활용하는 것이 좋다. div태그 대신 폼태그를 .. 2022. 11. 9. 이전 1 2 3 4 5 6 다음
