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) ..

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

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

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

오늘은 자바스크립트의 클릭이벤트를 활용하는 방법을 알아볼거다. 하나의 버튼을 이용하여, 오름차순 정렬과 내림차순 정렬 모두 수행할 수 있도록 한다. 즉, 홀수번째로 눌렀을때는 오름차순 정렬짝수번째로 눌렀을때는 내림차순 정렬로 바뀌도록 할 것이다 script 를 해당 폴더에 넣어두고, 선언해서 사용한다->     arrow 라는 클래스를 만들어서 여기에 🔺또는 🔻가 나오도록 할것이다.🔺: 오름차순을 의미🔻 : 내림차순을 의미 order 값이 1이라면, 버튼을 한번 더 눌렀을때에는 값이 -1로 바뀐다.->    const order = +target.getAttribute('order')target.setAttribute('order', -order) 문자열이 아닌, 정수형태로 비교하기 위해서 + 부..

이번엔 JavaScript의 정렬에 대해서 한 번 알아보자.출력할 js파일을 vscode에 넣어두어야한다.const arr = [ { "user": "TrynMst", "champion": "퀸", "team": "블루", "kill": 7, "death": 7, "assist": 7, "damage": 27176, "cs": 173 }, { "user": "강승우의 제발PLZ", "champion": "마오카이", "team": "블루", "kill": 4, "death": 6, "assist": 17, ..