'분류 전체보기'에 해당되는 글 508건

  sec01.ex01 패키지를 만들고 AjaxTest1.java, AjaxTest.java를 생성합니다. 그리고 test03 폴더에  ajax1.html, ajax2.html을 추가하겠습니다.

저는 이렇게 준비하였습니다.

  AjaxTest1은 클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 서블릿입니다. 브라우저에서 매개변수 이름인 param으로 데이터를 보내면 getParameter()를 이용해 데이터를 가져옵니다. 그리고 서블릿에서는 PrintWriter의 print() 메서드의 인자로 응답 메시지를 브라우저에 보냅니다.

ajax1.html 은 제이쿼리 Ajax기능을 이용해 서블릿에 매개변수 이름 param으로 "Hello, jquery"를 서버로 전송하면 서버로부터 받은 메시지를 id가 message인 <div>태그에 표시합니다.

전송하기를 누르시면 서버에서 ajax로 전송된 데이터를 <div> 엘리먼트에 표시합니다.

  클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax기능을 사용합니다. Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 xml이나 JSON 데이터를 주고받는 기술을 의미합니다.

  Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징을 가지고 있습니다.

  개인 정보를 입력하고 서버에 요청하면 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송하여 다른 페이지를 보여줍니다. 즉, 페이지 이동이 발생합니다.

  반면에 Ajax로 페이지를 처리할 경우를 보면 요청 페이지의 결과를 서버에서 처리한 후 다시 XML이나 JSON으로 원래 요청 페이지로 전송합니다. 즉, 페이지 이동이 발생하지 않습니다.

  제이쿼리에서 Ajax를 사용하려면 $ 기호 다음에 ajax라고 명명한 후 속성에 대한 값을 설정해야 합니다.

다음 글부터 제이쿼리 Ajax를 사용해 서블릿과 비동기식 방식으로 데이터를 송수신 해보겠습니다.

  이전 글에서 알아본 제이쿼리 선택자를 이용해 HTML 태그에 접근하여 여러가지 작업을 수행해 보겠습니다. 먼저 제이쿼리의 ID선택자 기능을 이용해 HTML 태그의 ID에 접근하는 방법입니다.

  사용하실 이미지 파일과 test02폴더를 만들고 연습할 jQuery.html 파일을 만들겠습니다.

  jQuery1.html을 작성하도록 하겠습니다. 페이지 로드 시 $("#unique2")는 # 다음에 오는 id가 unique2인 태그를 웹 페이지에서 검색합니다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻습니다.

  다음으로는 제이쿼리의 id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가해보겠습니다. jQuery2.html을 작성합니다.

제이쿼리로 id가 article인 태그를 찾아서 html() 메서드의 인자값을 태그에 설정합니다.

추가하기를 누르면 안녕하세요라는 메시지가 나타납니다.

  이번에는 class 선택자로 <div> 태그에 접근하여 기능을 수행해 보겠습니다. 버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냅니다.

다음은 제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해 보겠습니다. jQuery4.html을 다음과 같이 작성합니다.

사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 내용입니다. 제이쿼리의 val()메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 합니다.

  Jquery란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리입니다. 제이쿼리는 여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용합니다.

Jquery 특징

• CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있습니다.
• 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있습니다.
• 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있습니다.
• 크로스 브라우징을 제공하므로 브라우저 종류에 상관없이 동일하게 기능을 수행합니다.

  제이쿼리를 사용하는 방법으로는 2가지의 방법이 있습니다. 첫번째는 www.jquery.com에서 서 라이브러리를 다운로드해서 사용하는 방법이고, 두 번째는 네트워크로 CDN 호스트를 설정해서 사용하는 방법입니다. 여기 티스토리에서는 상대적으로 간편하게 설정할 수 있는 두 번째 방법을 사용해 글을 작성하도록 하겠습니다.

• <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> 지정한 버전의 제이쿼리를 사용합니다.
• <script src="http://code.jquery.com/jquery-latest.min.js"></script> 가장 최신버전의 제이쿼리를 사용합니다.

  제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용합니다. 제이쿼리의 선택자 종류와 이를 표현하는 방법을 정리해보겠습니다.

다음 글에서부터 Jquery를 실습하도록 하겠습니다.

HTML5 웹페이지 구조 관련 태그를 사용해 보도록 하겠습니다.

<section>: 제목별로 나눌 수 있는 태그

  다음은 <section>태그 안에 <article>태그를 사용해 본문을 표시하겠습니다

<article> 개별 콘텐츠를 나타내는 태그

3번째는 여러 가지 시맨틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용입니다.

4번째로는 레이아웃을 표시하려면 각 태그에 CSS를 적용해야 합니다.

출처 : 자바웹을 다루는 기술

깃허브: github.com/soulwine-it

  시맨틱 웹(Semantic Web)의 사전적 정의는 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것으로, 1998년 월드와이드웹(WWW)의 창시자인 팀 버너스 리(Tim Berners Lee)에 의해 개발되고 정의된 개념입니다.

  HTML4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때(div)태그에 CSS를 적용하는 방식으로 작업을 했습니다. 그러다 보니 <div> 태그만 봐서는 그 의미를 잘 알수 없다는 문제가 있었습니다.

  따라서 HTML5에서는 이 문제를 보와하기 위해 의미있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였습니다. HTML5에 추가된 태그를 정리하면

쉽게 그려 본다면 시맨틱 웹의 자체 태그를 이용해 구성한 레이아웃입니다.

  웹 브라우저는 웹 사이트를 만드는 프로그래밍 언어인 HTML, CSS와 자바스크립로 이루어진 구문만 인식하여 화면에 나타냅니다. 그리고 JSP는 웹 사이트 화면을 구성하는 HTML을 좀 더 동적으로 구현하기 위해 도입된 기능입니다. HTML 기능도 꾸준히 업그레이드 되어 지금은 HTML5 버전이 사용되고 있습니다.

  HTML5는 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보등을 지원합니다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있습니다.

HTML5 여러가지 기능

 HTML5의 문서 구조

  이전 글에서는 파일 업로드에 대해서 적었습니다.

  이번에는 파일을 다운로드하여 출력하는 예제를 해보겠습니다.

이렇게 파일을 준비해 주세요.

첫번째 jsp에서 다운로드할 이미지 파일 이름을 두 번째 jsp로 전달하도록 first.jsp를 작성해 줄게요

  두번째 jsp는 이미지 파일 표시창에서 <img>태그의 src 속성에 다운로드를 요청할 서블릿 이름 download.do와 파일 이름을 GET방식으로 전달합니다. 다운로드한 이미지 파일을 바로 <img>태그에 표시하고, <a> 태그를 클릭해 서블릿에 다운로드를 요청하면 파일 전체를 로컬 PC에 다운로드 합니다.

파일 다운로드 기능을 할 서블릿인 FileDownload클래스입니다.

  파일 다운로드 기능은 자바 IO를 이용해 구현합니다. 먼저 response.getOutputStream);를 호출해 OutputStream을 가져옵니다. 그리고 배열로 버퍼를 만든 후 while 반복문을 이용해 파일에서 데이터를 한 번에 8KB씩 버퍼에 읽어 옵니다. 이어서 OutputStream의 write() 메서드를 이용해 다시 브라우저로 출력합니다.

이제 first.jsp로 요청하고 이미지 다운로드를 해보겠습니다.

여기서 파일 내려받기를 누르시면

아래에 이렇게 다운로드가 됩니다.