본문 바로가기

WEB

 (88)
[JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제 Ajax는 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자입니다. 자바스크립트를 통해 서버에 데이터를 비동기 방식으로 요청하는 것입니다. 비동기 방식이란, 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 방식입니다. Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포합니다. 비동식 방식을 이용할 경우 페이지 리로드를 하지 않아 전체 리소스를 불러올 필요가 없기 때문에 리소스 낭비를 불필요하게 하지 않습니다. AJAX의 주요 특징 페이지 새로고침 없이 웹 페이지의 일부분만을 갱신 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음 웹 페이지가 로드된 후에 서버로부..
[JQuery] Fotorama 사용해보기 / 이미지 슬라이드 만들기 Fotorama를 사용하면 이미지 슬라이드를 쉽게 만들 수 있습니다. 구현 방법을 알아봅시다. 위 코드를 HTML에 삽입해줍니다. class를 fotorama로 지정해줍니다. 이미지는 원하시는 것으로 넣으시면됩니다. https://fotorama.io/#80713821-5d54-4819-810a-19991502ca56 Fotorama — Simple and Powerful Responsive jQuery Image Gallery A simple yet powerful responsive jQuery image gallery. Set up Just copy and paste the snippets below to integrate Fotorama. 1. This goes to the of your page..
[JQuery] plugin 사용해서 DateTimePicker 만들기 JQuery의 plugin을 사용해서 DateTimePicker를 만들어봅시다. DateTimePicker는 날짜, 시간을 클릭 할 수 있습니다. https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html#google_vignette Clean jQuery Date and Time Picker Plugin - datetimepicker datetimepicker is a jQuery plugin that popups a simple and clean date & time picker interface when an input field on focus. www.jqueryscript.net ..
[JQuery] JQuery로 effect 넣기 - 숨기기/보이기/토글 효과 JQuery를 사용하여 숨기기/보이기/토글 효과를 넣어봅시다. jquery를 사용하기 위해 위 코드를 추가해줍니다. 숨기기 보이기 토글 div1 숨기기, 보이기, 토글 버튼을 만들어줍니다. 이 버튼을 사용하여 div를 조작할 것 입니다. ()안의 숫자는 함수 실행 시간을 의미합니다. 만약 slideUp(1000)이면 1초동안 슬라이드 되면서 사라지게 됩니다. 각 버튼을 누르면 실행되는 모습을 볼 수 있습니다. [전체 코드] 숨기기 보이기 토글 div1
[JQuery] JQuery를 사용해서 동적으로 요소 추가하기 JQuery를 사용해서 엔터를 누를때마다 li에 추가 되게 만들어봅시다. jquery를 사용하기 위해 위 코드를 추가해줍니다. 메세지를 입력하고 Enter 를 입력해 보세요 하나 두울 텍스트를 입력 할 input박스를 만들어주고 ul안에 li을 만들어줍니다. 키를 업할때 작동하는 이벤트 리스너를 만들어줍니다. e를 파라미터로 받아 키 코드가 13일때(엔터) if 문을 실행시켜줍니다. input박스이므로 val()으로 텍스트를 읽어옵니다. $("")로 li를 하나 만들어주고 text(msg)로 텍스트를 만들어줍니다. appendTo()로 ul의 가장 뒤에 더해줍니다. 추가하기를 적고 엔터를 누르면 추가가 된 모습을 볼 수 있습니다. 전체 코드 메세지를 입력하고 Enter 를 입력해 보세요 하나 두울
[JSP/Servlet] Filter 사용하기 / 인코딩 필터, 로그인 필터 각 파일마다 한글 인코딩을 하기위해 request.setCharacterEncoding을 매번 작성한다면 몹시 번거로울 것입니다. 이때 사용하는 것이 Filter입니다. 클라이언트가 요청을 보내 서버가 작업하기전에 Filter에서 작업을 가로채 Filter 안에서 request.setCharacterEncoding 같은 작업을 미리 하면 다른 jsp 페이지에서는 Filter안의 작업을 신경쓸 필요가 없어집니다. Filter 구조 package test.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import ja..
[WEB] Forward & Redirect 개념과 차이점, 예제 웹에서 페이지를 전환할때 Forward 방식과 Redirect 방식 이렇게 2가지를 제공합니다. 예제를 보면서 이해해봅시다. [Forward 방식] 응답을 위임하여 처리 Web Container 차원에서의 페이지 이동만 존재 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없음 그렇기 때문에 웹 브라우저에는 최초에 호출한 URL이 표시 현재 실행중인 페이지와 forward에 의해 호출된 페이지는 request와 resonse 객체를 공유 [Redirect 방식] 페이지 자체를 이동하여 처리 Web Container는 redirect 명령이 들어오면 웹 브라우저에게 다른 페이지로 이동하라는 명령을 내림 즉, 다른 페이지를 호출해서 이동 웹 브라우저는 URL을 redirect된 주소로 변경 새로운 페이..
[WEB] HTML, JSP에서 JQuery 사용법 / chainAction 속성 https://cdnjs.com/libraries/jquery jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make cdnjs..

티스토리툴바