hidden을 활용하여 다중 필터 기능을 구현해볼 것이다.배열에 사용할 수 있는 함수함수기능arr.forEach단순 반복arr.filter조건 필터arr.toSorted정렬arr.map재구성arr.slice잘라내기arr.includes포함여부 확인 다중필터boxList 는 check box의 내용을 모두 불러온것 (querySelect 로 불러온건 모두 nodeList)->   const boxList = document.querySelectorAll('div.left > label >  input[type="checkbox"]') 배열에서 원하는 속성만 가져오거나,  별도의 속성을 추가해서 가져올때 Array.map 사용map 을 이용하여 name 속성에 있는 데이터에서 a 를 지우고(replace) ..

오늘은 웹소켓을 활용하여 메모장 기능을 한 번 구현해볼 것이다.Ajax와 WebSocket의 차이연결의 지속성에 따라 둘을 구분한다. 클라이언트와 서버가 통신할 때 HTTP통신을 주로 사용한다. HTTP통신은 다음과 같은 특징이 있다.1. 비연결성 (connectionless) : 연결을 맺고 요청을 하고 응답을 받으면 연결을 끊어버린다.2. 무상태성 (stateless) : 서버가 클라이언트의 상태를 가지고 있지 않는다.3. 단방향 통신이다. 이러한 HTTP 통신의 경우 채팅과 같은 실시간 통신에 적합하지 않다.물론 HTTP 통신으로 실시간 통신을 흉내낼 수는 있으나 완벽하지는 않다. 실시간 통신이 필요할 때 사용하는 통신을 소켓 통신이라고 한다.HTTP통신과 다르게 연결을 맺고 바로 끊어버리는게 아니..

다른 웹서버의 데이터를 이용해서 원하는 형식으로데이터를 한 번 출력해보자. script 코드드 vscode로 작성할 거다.이미지 출력 AJAX 화면 구현  결과는 위와 같이 나올 것이다.style에는 .item에 width를 사용하여, 한 줄ㅇ 나오는 요소의 개수를 정해 줄 수 있다. 전체 목록 출력 (페이징) posts 번호 제목   개별 출력전체 목록 중에서 하나를 선택하면 (a태그를 이용하여 페이지 이동..

json 파일을 이용해서 화면 구현을 해보자.관련 기초 문법 익히기elementdiv를 이용하여 데이터를 미리 구성해둔 다음,그 데이터를 출력하는 방법에 대해 배워보기. element.html 이지은 31 홍진호 42 나단비 5  appendChild appendChild() : 새로운 요소를 추가하는 방법 6_appendChild.html  데이터를 직접 넣고 화면에 출력해보기 7_ JS 화면 구현  03   다른 사이트에 있는 json 파일 내용..

공공데이터 포털에 가면 오픈 되어 있는 여러가지 공공데이터들이 있다.오늘은 그 오픈 json데이터를 HashMap으로 mapping 해볼 것이다. home.jsp day09JSON : JavaScript Object Notation자바스크립트에서 객체를 표현하는데 사용하는 문법 ex01 - 부산 축제 정보 서비스 연습 ex02 - 부산 축제 정보 서비스 (AJAX) ex01.jsp json 파일을 자바 객체로 변환하여 출력하기ex01 - JSON을 자바 객체로 변환하여 출력하기 JS로 처리하기 ${dto.UC_SEQ }. ${dto.TITLE } (${dto.GUGUN_NM }) ${dto.HOMEPAGE_URL } 상세보기 ${dto.ITEMCNTNTS }  해..

우리가 사이트를 이용할 때 흔히 볼 수 있는 검색 필터 기능을 한 번 자바스크립트로 구현해볼 것이다.코드 풀이 filter는 boolean 형식이다. form태그를 쓴다면, form 이 제출될때 이벤트가 발생하도록 해야함.: input 에 대한 key 이벤트 사용 Xsubmit 에 대한 click 이벤트 사용 Xform 에 대한 submit 이벤트를 사용한다.form이 submit 되면 새로운 요청이 발생하고, 이후의 자바 스크립트는 무시한다. form 에 대한 submit 이벤트는 반드시 !! 첫줄에 이벤트 기본작동을 막아야함.->   event.preventDefault() 확실하게 하기 위해서는 console.log 를 이용하는 것이 가장 바람직하다.->   console.log(searchValu..