Web Programming 소개 인공지능 연구실. Artificial Intelligence Laboratory 목차  1. HTML5  2. 개발 환경 구축  3. JSP  4. 실습 2.

Presentation on theme: "Web Programming 소개 인공지능 연구실. Artificial Intelligence Laboratory 목차  1. HTML5  2. 개발 환경 구축  3. JSP  4. 실습 2."— Presentation transcript:

1 Web Programming 소개 인공지능 연구실

2 Artificial Intelligence Laboratory 목차  1. HTML5  2. 개발 환경 구축  3. JSP  4. 실습 2

3 Artificial Intelligence Laboratory HTML5 3

4 Artificial Intelligence Laboratory HTML5 소개  “ 웹을 둘러싼 난무한 비표준을 지양하고 지능적이고 실행 가능한 웹 구현을 위해 탄생한 차세대 웹 표준 기술이다.”  웹이 더 이상 문서공유나 문서 표현만을 위한 것이 아니라 하나의 응용프로그램으로 진화하고 있다.  웹에게 더 이상 텍스트, 이미지와 하이퍼링크로 이루어진 단순한 문서를 표현하고 공유하기 위한 것이 아니라 하나 의 응용 프로그램, 즉 애플리케이션으로써의 성격을 강하 게 요구하고 있습니다. 4

5 Artificial Intelligence Laboratory 모바일 환경과 HTML5  아이폰 어플리케이션은 안드로이드 폰이나 윈도우 폰에 서는 동작하지 않는다. OS 별로 어플리케이션을 개발하여 야 한다는 사실인데 이것은 시간, 비용 등 너무나 큰 risk 가 된다.  웹 표준을 이용한 HTML5 를 이용해서 개발하게 되면 모든 플랫폼에서 동일하게 실행될 수 있기에 좀 전의 risk 에 대 한 확실한 대안이 될 수 있다. 5

6 Artificial Intelligence Laboratory Hybrid App 6  크로스 플랫폼 / 크로스 디바이스  서버 기반 개발 가능  Native + Web 장점 포함

7 Artificial Intelligence Laboratory HTML5 목적  기존의 HTML 표준의 한계를 극복하는 차세대 웹 표준이 며, 리치 웹 응용을 가능하게 한다. => 엑티브엑스, 플래시등의 플러그인의 문제점 보완 ( https://www.koreahtml5.kr/jsp/supportCenter/activeXvsHtml5.jsp ) https://www.koreahtml5.kr/jsp/supportCenter/activeXvsHtml5.jsp 7

8 Artificial Intelligence Laboratory HTML5 특징 8

9 Artificial Intelligence Laboratory HTML5 사이트 9  Adobe 에서 제작한 테스트용 HTML5 사이트  http://beta.theexpressiveweb.com/ http://beta.theexpressiveweb.com/  메뉴에 따른 세로스크롤과 움직임  http://pitch.csspiffle.com/#intro http://pitch.csspiffle.com/#intro  Korea Html5 - https://www.koreahtml5.kr/https://www.koreahtml5.kr/  HTML5 예제 사이트  http://tympanus.net/codrops/category/tutorials/ http://tympanus.net/codrops/category/tutorials/

10 Artificial Intelligence Laboratory 개발 환경 구축 10

11 Artificial Intelligence Laboratory Apache Tomcat 설치하기 (1/4)  http://tomcat.apache.org http://tomcat.apache.org 11

12 Artificial Intelligence Laboratory Apache Tomcat 설치하기 (2/4) 12

13 Artificial Intelligence Laboratory Apache Tomcat 설치하기 (3/4) 13  다운 받은 파일을 D:\Tomcat 에 압축을 푼다.

14 Artificial Intelligence Laboratory Apache Tomcat 설치하기 (4/4)  Apache Tomcat 을 설치 한 폴더를 새 시스템 변 수 TOMCAT_HOME 을 추가합니다. 14

15 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (1/8)  http://www.eclipse.org/downloads/ 에서 다운로드 (Eclipse IDE for Java EE Developers 가 필요합니다.) http://www.eclipse.org/downloads/ 15

16 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (2/8) 16  File > New > Other > Server > Sever 선택 후 Next.

17 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (3/8) 17

18 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (4/8) 18 Browse 버튼을 눌 러 Tomcat 이 설치 된 폴더를 선택합니 다. JRE 를 현재 컴퓨터 에 설치된 버전으로 선택합니다.

19 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (5/8) 19 더블 클릭 !!

20 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (7/8) 20

21 Artificial Intelligence Laboratory Eclipse 와 Tomcat 연동 (8/8) 21

22 Artificial Intelligence Laboratory JSP(JAVA SERVER PAGE) 22

23 Artificial Intelligence Laboratory 웹 언어  SSS (Server Side Script) : 서버용 언어  ASP  ASP.NET (C#, VBScript)  PHP (Personal Home Page)  JSP (JAVA Server Pages)  CSS (Client Side Script) : 웹을 보여주기 위한 언어  javaScript  VBScript  JScript 23

24 Artificial Intelligence Laboratory JSP  JSP 는 HTML 내에 자바 코드를 삽입하여 웹 서버에서 동 적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언 어이다.  자바 서버 페이지는 실행시에는 자바 서블릿으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 볼 수 있다. 하 지만, 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다. 이와 비슷한 구조인 것인 PHP, ASP, ASP.NET 등도 있다. 24

25 Artificial Intelligence Laboratory JSP( 정적 페이지, 동적 페이지 ) 25 단순히 client 가 server 측에 서비스를 요청하는 경우에 이미 만들어져 있는 페이지를 그대로 전송 server 측에서 실시간으로 작업을 처리해 client 에게 서비스를 제공

26 Artificial Intelligence Laboratory JSP (cont.)  JSP - 장점 : HTML 중심의 코드구조이므로 디자인 작업에 바로 사용 가능하다 그리고 그 일이 끝나면 바로 프로그램 로직을 고칠 수 있다. 설 치 과 정이 간단하다 - 단점 : 프로그램 로직이 복잡할 경우 자바코드의 논리적 구조를 알아 보기 가 힘들다. 소스코드가 공개되며, 프로그래머가 아닌 다른 사람이 소스코 드를 만져서 손상시킬 위험성이 있다.  프로그램의 복잡한 로직을 구사하는 코드는 서블릿 클래스 안에 기술하고 프 로그램의 결과를 보여주는 HTML 중심의 코드만 JSP 페이지 안에 작성하는 것이 좋다. 26

27 Artificial Intelligence Laboratory JSP 의 동작 원리 27 1. 클라이언트로부터 JSP 페이지의 첫 요청이 전달 2. 서블릿 컨테이너는 JSP 페이지를 서블릿 코드 형태의 자바 파일로 변 환하게 된다. 3. 변환된 자바 파일은 클래스 파일로 컴파일 된 후 생명 주기에 따라 서 비스가 이루어진다

28 Artificial Intelligence Laboratory JSP 기본 문법 (1/2)  JSP 는 HTML 문서 사이에 JSP 문법코드가 삽입된 형태로 작성된다. 1. 선언 (Declarations) - 선언은 자바 변수와 메소드를 JSP 페이지 내에서 선언하기 위해 사용 된다. - 변수 선언 예 : - 메소드 선언 예 : 2. 표현식 (Expressions) - 표현식은 컨테이너에 의해 결과값 ( 문자열 ) 으로 바뀌는 JSP 요소 - 예 : Hello 3. 스크립트렛 (Scriptlets) - 스크립트렛에서는 자바 문장을 자유롭게 기술할 수 있다. - 용법 : 28

29 Artificial Intelligence Laboratory JSP 기본 문법 (2/2) (cont.)  page 지시자 - jsp 전체에 적용되는 정보를 기술한다.  include 지시자 - 다른 페이지를 불러다 현재 jsp 페이지의 일부로 만들기 위해 사용  html 주석  jsp 주석 29

30 Artificial Intelligence Laboratory Eclipse 에서 JSP 프로젝트 생성하기 (1/4) 30

31 Artificial Intelligence Laboratory Eclipse 에서 JSP 프로젝트 생성하기 (2/4) 31

32 Artificial Intelligence Laboratory Eclipse 에서 JSP 프로젝트 생성하기 (3/4) 32

33 Artificial Intelligence Laboratory Eclipse 에서 JSP 프로젝트 생성하기 (4/4) 33

34 Artificial Intelligence Laboratory JSP Hello World 34

35 Artificial Intelligence Laboratory JSP Hello World  HelloWorld.java 35

36 Artificial Intelligence Laboratory JSP Hello World  NewFile.jsp 36

37 Artificial Intelligence Laboratory JSP Hello World 37

38 Artificial Intelligence Laboratory JSP Hello World 38

39 Artificial Intelligence Laboratory 결과 화면 39