FrontEnd/VanillaJs (12) 썸네일형 리스트형 [VanillaJS] 검색폼 구현 2 다음은 input태그에 값이 있을 경우에는 reset버튼이 사라지고값이 없을 경우에는 reset버튼이 생기는 코드가 15번째부터 추가되었다. bindEvents함수는 input엘리먼트에 이벤트리스너를 발생시키며keyup(키보드가 움직일 시 이벤트)function(e){this.onKeyup(e)} (이벤트 핸들러)가 발생한다. onKeyup함수는input엘리먼트의 벨류값의 길이를 부울형으로 받음만약 값이 있다면 True 없다면 false를 반납할 것임. [VanillaJS] 검색폼 구현 1 문서가 로딩될때, MainController의 메소드인 init이 실행된다. init()메소드는 작동여부 확인을 위한 콘솔을 찍고 FormView객체의 setup메소드를 호출한다.파라미터는 form엘리먼트이다. FormView.setup은 el을 파라미터로 가지는 함수이며,여기서 this.el(View.js의 init함수로 받음)this.inputElthis.resetEl 모두 FormView의 고유한 객체로 만들기 위함인듯하다. 그리고 showResetBtn이라는 함수를 선언한다. 파라미터로는 boolean형식을 받으며값에 따라FormView의 resetEl의 display스타일을 결정한다. 콘솔 결과는 위와 같다. this.el this.inputEl thisresetEL은 다음과 같이 정해졌다. 주.. [VanillaJS] 0.문서 구조 파일 구성은 Model - HistoryModel.js - KeywordModel.js - SearchModel.js View - FormView.js - View.js- app.js Controller - MainController.js index.htmlstyle.css로 구성되어 있다. style.css와 app.js를 참조하고 있다. 데이터가 컬렉션 형식으로 저장되어 있다(Map이라는 자료형식) list() - 이는 데이터를 리턴한다.Promise는 서버와 비동기로 통신하기 위해 사용하는 것resolve는 Promise의 상태를 이행(Fulfilled)상태로 만드는 것결론적으로만 말하자면 서버와 데이터를 통신하기 위한 방법인거 같다. add() - 데이터를 추가하는 기능.trim() - 문자열에 .. [Vanilla JavaScript]폴더구조 및 검색폼 index.html View.jsconst tag = '[View]' export default { init(el) { if (!el) throw el console.log(el) -----> this.el = el return this }, on(event, handler) { this.el.addEventListener(event, handler) return this }, emit(event, data) { const evt = new CustomEvent(event, { detail: data }) this.el.dispatchEvent(evt) return this }, hide() { this.el.style.display = 'none' return this }, show() { this.e.. 이전 1 2 다음
