Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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


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

Similar presentations


Ads by Google