2. Front-end/2-3. Java Script

JS - [좌석 만들기]

const seatContainer = document.querySelector('.select-seat .seat-container'); let test = []; let selectedSeats =[]; // 선택되어있는 '좌석번호' 담음 let selectedSeatsMap = []; let clicked = ""; // 선택되어있는 좌석 '태그' 담음 let div = ""; for (let i = 0; i < 7; i++) { div = document.createElement("div"); seatContainer.append(div); for (let j = 0; j < 10; j++) { const input = document.createElement('input'); // 좌석이 될 요..

JS - [ 오늘부터 14일간 날짜 출력 ]

date__mont에는 이번 달 연도/달, date__list에는 오늘 부터 14일 출력. 이번 달을 넘어가면 나머지는 다음 달에 출력! (date__nextMonth에는 다음 달 연도/달, date__nextList에는 다음 달 일 출력) // 날짜 출력하기 - 14일 const dateMonth = document.querySelector('.date-container .date__month'); const dateList = document.querySelector(".date__list"); const dateNextMonth = document.querySelector('.date-container .date__nextMonth'); const dateNextList = document.quer..

JS - [ Swiper 라이브러리 ]

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com HTML에 필요한 기본 구조 Slide 1 Slide 2 Slide 3 ... * swiper-button-prev, swiper-button-next 버튼은 swiper 태그 안에 있으면 swiper 의 가로 너비를 벗어나면 출력이 안됨. 그래서 swiper 태그 바깥쪽에 선언해서 사용했음! JS 코드 new Swiper('선택자', { // direct..

JQuery - [ DB정보 JSON 형태로 변경 ]

우선 라이브러리 설치가 필요하다. https://code.google.com/archive/p/json-simple/downloads 이동 왼쪽 카테고리에서 Downloads로 이동 제일 위에 json-simple-1.1.1.jar 다운 프로젝트에 라이브러리 설치하기! -------------------------------------------------- dbJSON.jsp -------------------------------------------------- - DB에서 데이터 가져와서 JSON 형태로 만드는 파일 - 아래쪽의 html 코드 내용은 지우고 작성 - contentType은 application/json; 으로 수정하기 JSON형태로 변경 // 1. 드라이버 로드 Class.forN..

JQuery - [ Ajax RSS ]

RSS는 "Rich Site Summary" 또는 "Really Simple Syndication" 이라 불리며, 사이트내 정보를 외부 채널에 전달하기 위한 기술이다. 사이트내 구성되어 있는 정보 단위를 디자인 없이 텍스트로만 간략하게 전달한다. JTBC에서 제공하는 뉴스 RSS를 ajax를 이용해 가져와보자. https://news.jtbc.joins.com/Etc/RssService.aspx 링크에서 원하는 카테고리의 뉴스 RSS를 가져와보자. 사이트에서 원하는 RSS를 복사해서 주소를 브라우저에 입력해보면 아래처럼 xml 파일로 뜨는걸 볼 수 있다. 보면 item 태그 안에 title 태그와 link 태그로 나뉘어 있다. ajax를 이용해 기사 타이틀과 타이틀을 클릭하면 해당 링크로 이동할 수 있도..

JQuery - [ XML / JSON + AJAX ]

* HTML - 웹 페이지를 구현하는 언어 > 장점 : 작업/요청을 처리하고 표시하기 쉽다. 서버에서 처리된 결과를 화면에 별도 처리 없이 추가 가능 > 단점 : html 형태의 데이터를 리턴해야만 올바른 값을 보여줌 요청이 반드시 동일한 도메인에서 처리해야 함. a.html -> a.html 페이지처리 * XML (확장 가능한 마크업 언어 ) - HTML 형태와 유사하게 생김. 태그의 형태로 정보 저장 > 장점 : 복잡한 구조의 데이터를 저장 가능. 이기종 및 응용 프로그램 사이의 데이터 교환이 좋음. HTML 기본 메서드 활용 가능(기능 제한) > 단점 : 데이터보다 많은 태그의 양(데이터 리소스가 많음, 처리속도 느림) 요청이 반드시 동일한 도메인에서 처리해야 함. a.html -> a.html 페..