프로그래밍

Size: px

Start display at page:

Download "프로그래밍"

규진 우
5 years ago
Views:

1 웹프로그래밍 공주대학교컴퓨터공학부 소선섭

2 들어가기 웹프로그래밍웹 + 프로그래밍인터넷 Inter + networks 인터넷서비스 www ftp E_mail SNS

3 웹서비스 역사 1969 미국방성알파넷 (ARPANET) 등장 1972 이메일탄생 1975 TCP/IP 개발, 시운전개시 1983 Apple 사에서최초의 GUI 컴퓨터 LISA 발표 1991 미정부일반기업에인터넷개방제네바의 CERN 연구실에서팀버너스리에의해 WWW 개발 1993 상용인터넷서비스개시 1994 넷스케이프네비게이터 1.0 발표 1995 본격상업화, 대중화, 정보고속화

4 웹서비스 Markup Language 의역사 SGML(Standard Generalized Markup Language) 1986 년 ISO 에서지정문서처리표준프로그래밍언어가아님 HTML(Hyper Text Markup Language) 1989 년도에 CERN 에있던팀버너스리가개발. 웹에서사용하는 Markup 표준언어 W3C 에서표준관리 XML(eXtensible Markup Language) 1996 년 W3C 에서제안 SGML 의장점과 HTML 의장점을수용

5 WWW 서비스 - 변천 1 세대정적인문서 Markup 과 Hyper link 로만구성 2 세대사용자와의상호작용지원사용자입력에의한동적변화지원프로그래밍컨셉지원 CGI 3 세대객체지향개념도입을동한동적개념지원 -DHTML 서버와클라이언트로드밸런싱을위한클라이언트사이드프로그래밍지원 - 자바스크립트대용량데이터처리지원 - 데이터베이스서버사이드프로그래밍진화 - JSP, ASP, PHP 등 4 세대웹에프리케이션프로그래밍으로확대 AJAX, XML 등다양한기술개발및수용

6 WWW 서비스 - 동작원리 URL IP 주소 DNS Web browser HTML+ Client-side script 응답 이벤트요청 IP 접속요청 이벤트응답 MySQL HTML5 (CSS Javascript) PHP ASP JSP 클라이언트 서버

7 Web App 동작원리

8 Web App 동작원리

9 Web App 동작원리

10 Web App 동작원리

11 웹프로그래밍 언어 HTML(Hyper Text Markup Language) XML Java Script CSS CGI(The Common Gateway Interface) ASP(Active Server Pages) PHP(Personal Home Page Tools) JSP(Java Server Pages) 표준화기구 W3C(World Wide Web Consortium) HTML 의표준버전정의 IETF(Internet Engineering Task Force) 인터넷제반기술의관리및정의

12 HTML 의역사 Html ( ) 웹페이지탄생텍스트중심의콘텐트가주류 Html 3(1995) 브라우저전쟁웹개발자고난의시대 Html 4(1998) W3C 의출현 Html 언어표준화웹페이지의구조 (html 4.0) 와프레젠테이션분리 (CSS)

13 HTML 의역사 ( 계속 ) Html 4.01(1999) Html 4.0 버전의수정본 Xhtml 1.0(2000, Extensible HTML) Html + Xml a family of current and future document types and modules all XML-based Xhtml 2.0(2006) XML 개념더욱강화 2009 년개발종료선언 WHATWG(Web Hypertext Application Technology WG) HTML5(2008 년초안발표 )

14 웹프로그래밍 웹프로그래밍실습입니다. 본페이지는드림위버를사용하여작성한것입니다.

15 <!DOCTYPE HTML > <HTML><HEAD><TITLE> 웹프로그래밍 </TITLE> <META http-equiv=content-type content="text/html; charset=euc_kr"> <META content="mshtml " name=generator></head> <BODY> <P> </P> <P align=center><font color=# size=5> 웹프로그래밍 </FONT></P> <P> </P> <P align=center><img height=80 src="legend/i_quest.png" width=100> </P> <P> </P> <P> </P> <P> 웹프로그래밍실습입니다.</P> <P> 본페이지는드림위버를사용하여작성한것입니다.</P></BODY></HTML>

16 HTML 기본구조 [HTML 기본구조 ] <html> <head> <title></title> </head> <body> </body> </html> consist of a tree of elements and text

17 What is HTML 웹페이지의구조를기술하는언어 다음과같은기능을제공 온라인문서출판 - headings, text, tables, lists, photos, etc. 온라인정보검색 - hypertext links 원격서비스를위한폼설계 문서내에서다양한응용실행 :spread-sheets, video clips, sound clips, and other applications

18 HTML5 Head part 문서에관한정보또는전체문서나웹과의관계를정의하는메타데이터컨텐츠의 elements 로구성 : <title>, <meta>, <script>, <style> <head> </head> 로표현 Body part 구성을표현하는 elements 브라우저가표시할내용 : 텍스트, 그림, 동영상, 소리등내용을표시하는데필요한 elements 주석  로표시

19 HTML5 Overview Evolution of HTML4 Focus on web application Adapts new elements and concepts Video, canvas, audio, and so on Strengthen structure concept with section, article, and so on Web worker, local storage, geography Support for various form input control and self validation Includes CSS and JavaScript More rich presentation than previous CSS version Define various JavaScripts APIs Reference site

20 HTML5 의비전 문서로서의표현력강화 CSS의기능강화구성표현을위한엘리먼트도입 앱개발언어로더욱강력해짐 동시처리를위한웹워커저장공간의확대다양한자바스크립트 API 스마트단말의급속한확대 스마트폰스마트 TV 사물인터넷단말

21 예제 1 <html> <head> <title>my first HTML document</title> </head> <body> <h2>hello New World</h2> </body> </html>

22 예제 2 <html> <head> <title>my 2nd HTML document</title> </head> <body> <h2>hello! <i>new World</i></h2> Greeting from<br> <a href=" National University</a> <a href= mailto:triples@kongju.ac.kr"> 소선섭 </a> <p> We love KNU <p> </body> </html>

23 Elements 의분류 약 100 여개의 elements 가있음 다음중하나이상의그룹에분류될수있음 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Form-associated element

24 Elements 의분류 Metadata content Content의나머지부분의표현이나동작을설정 Base, command, link, meta, noscript, script Style, title Flow content Body 부분에쓰여지는대부분의 elements Sectioning content Headings와 footers의영역을정의하는 elements Article, aside, nav, section Heading content 섹션의헤더를정의하는 elements H1, h2, h3, h4, h5, h6, hgroup

25 Elements 의분류 Phrasing content 단락내에있는문서의텍스트를마크업하는 elements 와그의텍스트 a (if it contains only phrasing content), abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, 등 Embedded content 문서안에다른자원을들여오는 elements Audio, canvas, embed, iframe, img, math, object, svg, video Interactive content 사용자와의상호작용을의도하는 elements a, audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the Hidden state) 등

26 CSS 개요 Cascading Style Sheets 의약자 계단형스타일시트 라고한다. CSS 의표준화작업과신기술및팁을제공하는 W3C 에서 1996 년 CSS 레벨 1 발표 1998 년 CSS 레벨 2 발표 W3C

27 CSS 스타일시트 문서의전체적인모양을일관성있게다룸 태그에프레젠테이션을적용하는방법 사용형태 인라인스타일 : style 속성 문서수준스타일시트 : style element 외부스타일시트 : link element <LINK rel="stylesheet" href="bach.css" type="text/css"> CSS 규칙 두개의부분으로나뉨 : selector 와 declaration Declaration 은 속성 : 값 으로표현 h1 { color: red }

28 <?xml-stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE> INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

29 CSS Selector 구문 element 유형 selector: element 유형별로선택 h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } 그룹화 : h1, h2, h3 { font-family: sans-serif } 자손 selector: 빈칸으로구분 h1 { color: red } em { color: red } h1 em { color: blue } 자식 selector: > 으로구분 div ol > li p

30 Selector 구문 속성 selectors [att] [att=val] [att~=val] [att =val] h1[title] { color: blue; } span[class=example] { color: blue; } a[rel~="copyright"] a[href="

31 CSS 클래스 selectors class 속성을이용하여클래스이름지정클래스별로프레젠테이션스타일지정.greenpara { color: green;}.redpara { color: red;} p.blackpara { dolor: black;} <h1 class= redpara > Green Tea </h1> <p class= greenpara > Green tea is good for health </p> <p class= blackpara > Black tea is not bad for health but it has a lot of caffeine </p>

32 <head><style> p.abstract {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm;} H1, p.centered {text-align:center; margin-left: 1cm; margin-right: 1cm;}.blue {color:blue;}.para {color:green;} </style></head> <BODY> <h1>centered paragraph defined by regular class</h1> <p class=abstract> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! <h1 class=para> Centered paragraph defined by Pseudo class</h1> <p class=abstract> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! </BODY>

33 CSS Id selector #para {text-align:center; margin-left: 1cm; margin-right: 1cm} </style> </head> <BODY> <p id=para> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation!

34 CSS 인라인스타일 :style 속성 태그와함께 style 속성사용 <h1 style= color: blue; font-style: italic > It s Coooooooool!</h1>

35 CSS 문서수준스타일시트헤드부분에 <style> 태그사용문서안에있는지정태그에모두적용속성 Type: 태그에포함될스타일의종류지정 CSS 경우 : text/css 자바스크립트스타일시트 : text/java-script <style type="text/css"> p {color: blue; font-style: italic;} h1, h2 { color: blue; font-style: bold; border-bottom: 1px solid black; } </style>

36 <style type="text/css"> p {color: black;} h1, h2 { color: blue; font-style: bold; } h1 {border-bottom: 1px solid black;} </style>

37 CSS 외부스타일시트 스타일을별도텍스트파일로저장 Html 문서에스타일시트파일을연결 연결형식 :<link> 태그, <Style src= > 원하는스타일을 sample.css 에저장했다고가정 헤드부분에서참조 <link rel= stylesheet Type= text/css href= sample.css />

38 <head><style> p.abstract {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm;} H1, h2, p.centered {text-align:center; margin-left: 1cm; margin-right: 1cm;} H1 {border-bottom: 1px solid red;} div {border-width: thin; border-style:solid; border-color:#007e7e;}.para {color:green;} </style></head> <BODY> <h1> This is for Style Class <p> <div> <h2>centered paragraph defined by style class</h1> <p class=abstract> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! </div> <div> <h2 class=para> Centered paragraph defined by style class</h1> <p class=centered> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! </div> </BODY>

39 <head><style> p.abstract {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm;} H1, h2, p.centered {text-align:center; margin-left: 1cm; margin-right: 1cm;} H1 {border-bottom: 1px solid red;} div {border-width: thin; border-style:solid; bordercolor:#007e7e;}.para {color:green;} </style></head> <BODY> <div class=blue> <h1>centered paragraph defined by style class</h1> <p class=abstract> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! </div> <div class=purple> <h1 class=para> Centered paragraph defined by style class</h1> <p class=abstract> This is a paragragh for testing Class Style, especially regular class. It a great feature for mature documentation! </div>

40 CSS 팁 목록의글머리기호바꾸기 <style type="text/css">  </style>

41 <style> P.BigFirst:first-letter { font-size: 200%; float: left } </style> <p class="bigfirst">the first letter in this paragraph will be twice the size of the other letters in this paragraph. The first letter in this paragraph will be twice the size of the other letters in this paragraph.</p>

42 <HEAD> <STYLE TYPE="text/css"> P {font-size: 24pt;}.redText {color: red;}.bluetext {color: blue;}.italictext {font-style: italic;} </STYLE> </HEAD> <BODY> <P> Large text, no class specified, one implied. </P> <P CLASS="redText"> Large text,.redtext class specified. </P> <P CLASS="blueText italictext"> Large text,.bluetext and.italictext classes specified. </P> <P style= font-size:14"> Only Large text. </P> <DIV STYLE="font-size:14" onmouseover="this.style.color='red'" onmouseout="this.style.color=''"> Mouseover this to make it red. Using the DIV tag, you must mouseover the text on this line. Mouseover this to make it red. Using the DIV tag, you can mouseover anywhere on the line in which the text is placed.</div> </BODY>

46 <html><head> <title> </title> <script language="javascript"> document.write("<h3>, </h3>"); </script> </head> <body> <hr noshade> <h3> </h3> <hr noshade> <script language="javascript"> document.write("<h2>, </h2>"); </script></body></html>

47 <html><head> <title> </title> </head> <body> <h3> </h3> <hr noshade> <a href=" onmouseout="document.bgcolor='white'" onmouseover="document.bgcolor='red'">. </a> </script></body></html>

49 <html><head> <title> </title> </head> <body> <h3> </h3> <hr noshade> <a href="javascript:alert(' ')" onmouseout="document.bgcolor='white'" onmouseover="document.bgcolor='red'">. </a> </script></body></html>

50 <html> <head> <title> 자바스크립트로 HTML 문서제작 </title> </head> <body> <script language=javascript> document.write("<html><head><title> 자바스크립트로처음만들어보는홈페이지 </title></head>") document.write("<body bgcolor=# topmargin=0>") document.write("<center><img src='model.jpg'><br><br>") //""( 쌍따옴표 ) 안에있는문자는 ''( 온따옴표 ) 로묶어주세요 ~ document.write("<font size=+2 color=#33ccff> 자바스크립트로만든홈페이지 </font></center>") document.write("</body></html>") </script> </body> </html>

53 <html><head> <title> </title> </head> <body> <hr noshade> <script language="javascript"> var answer answer=42; document.write("answer="+answer+"<br>"); answer=" 42 " document.write("answer="+answer+"<br>"); </script></script></body></html>

54 function func_name([arg1, argn]) { statements; [return expression;] } func_name([arg1, argn]); Varname = func_name([arg1, argn]); function big{x, y) { if(x>y) return x; else return y; } document.write(big(1, 2)

55 <HTML> <HEAD> <TITLE> Example: Function 1 </TITLE> <script> function big(x, y) { if(x>y) return x; else return y; } </script> </HEAD> <BODY> <script> document.write(big(1, 2)); </script> </BODY> </HTML>

56 <TITLE> Example: func2 </TITLE> <script> function small(x, y) { if(x<y) return x; else return y; } function common(x,y) { var res = 1; var s = small(x,y); for(var i = 1; i<=s; i++) { if(!(x % i) &&!(y % i)) { res = i; } } return res; } </script> </HEAD> <BODY> <h3> </h3><hr> <script> var x = prompt(" ", 1); x = parseint(x); var y = prompt(" ", 1); y = parseint(y); document.write("x=", x, ", y=", y, " ", common(x, y)); </script>

57 <title> </title> <script language="javascript"> function cal() { exp=prompt('.','23-5') result=eval(exp) alert(result) } </script></head> <BODY> <form> </form> </BODY> <input type=button value=" " onclick="cal()">

58 <title> </title> <script language="javascript"> function cal() { exp=prompt('.','23-5') result=eval(exp) alert(result) } </script></head> <BODY> <table align=center border=1 bordercolorlight=cornflowerblue> <tr> <td colspan=2 bgcolor=#33ccff align=center> <font size="6" color="white">calculator</font></td></tr> <tr width="213" height="297"> <td><img src="cal.jpg"></td> <td align=center width="150"> <form> <input type=button value=" " onclick="cal()"> </form> </td></tr> <tr> <td colspan=2 bgcolor=#33ccff height=5> </td></tr> </table>

59 자바스크립트 BOM 과 DOM 객체자바스크립트객체의한종류 BOM(Browser Object Model) DOM(Document Object Model) 브라우저와 HTML 문서의모든요소들을제어하기위함정의 (W3C) 플랫폼과언어에중립적인인터페이스로, 프로그램과스크립트를사용해서동적으로접근할수있도록하며, 문서의내용, 구조, 스타일을변경할수있다. 기존문서에추가적인작업을할수있으며, 처리결과를현재페이지에나타낼수있다.

60 브라우저객체모델 유형 도큐먼트객체 : HTML 문서객체 디폴트객체 : 현재문서에자동으로생성되는객체, window, document, history, location, 속성객체 : 객체의속성, 스타일, 텍스트정보를표현하는객체 임시객체 : 문서처리중동적으로생성되는객체 기타객체

61 BOM 객체의계층구조 window history location screen navigator clientinfomation document event clipboarddata 도큐먼트 datatransfer 디폴트객체 임시객체 도큐먼트객체

62 DOM document 객체 정의 HTML 태그의포함관계에따라계층구조형성 페이지안의모든 tag elements 에접근가능 직계자식은 HTML 객체, 그외에도 forms, images, links/anchors 등이있음 <HTML><HEAD> <TITLE> 계층관계 </TITLE> </HEAD><BODY> <h1> 이것은문장입니다 </h1> <form name="f"> <input type ="text" name="f"> <input type = "button" value=" 테스트 "> <hr id="hr1" color = "red"> </form> </BODY></HTML>

63 window history location clientinfomation navigator document screen forms html images head body text title h1 form button hr

64 자바스크립트 객체의접근 this 등을이용하여접근 id, name 속성과 getelementbyid 와 getelementbyname 메쏘드에의해접근

65 JSP- 들어가기 공주대학교컴퓨터공학부 소선섭

66 JSP Sun 이개발 HTML 코드내에직접비즈니스로직을자바코드로작성포함할수있는개발방식 29

67 JSP 엔진 JSP 컨테이너 JSP 프로그램은하나의서블릿프로그램으로변환 30

68 JSP 서블릿실행 JSP 프로그램의실행순서 31

69 JSP 라이프싸이클 (1) JSP 서블릿클래스의주요메소드 _jspinit(), _jspservice(), _jspdestroy() 메소드 기능 _jspinit() 요구되는자원의연결등의초기화작업을수행 _jspservice() 실제클라이언트의요청에대한작업처리수행으로, 클라이언트요청때마다반복수행 _jspdestroy() 웹서버또는애플리케니션이종료되는경우에서블릿을메모리에서언로드하는하는경우, JSP 서블릿종료를위한작업수행 32

70 JSP 라이프싸이클 (2) 클라이언트의요청에대한메소드실행 33

71 JSP 개발환경웹서버 JDK, JSP 엔진손쉬운개발환경에디터등 DBMS 필요시스템기본설치폴더편의를위한본서의설치폴더 자바개발및운영환경 Jdk [C:\2009 JSP\jdk1.6.x] 웹서버및 JSP 엔진 Apache Tomcat Server [C:\2009 JSP\Tomcat 6.0] JSP 통합개발환경 Eclipse [C:\2009 JSP\Eclipse jee] 데이터베이스관리시스템 MySQL [C:\2009 JSP\MySQL 1.6] 34

72 JSP 소스생성 w w

73 JSP 소스생성후 w w

74 w w 첫 JSP 프로그램 예제 HelloJSP.jsp

75 w w JSP 소스실행 (1) 소스에서오른쪽클릭메뉴 [Run As]/[Run on Server] 를선택

76 w w JSP 소스실행 (2) 이클립스내부에서웹브라우저실행

77 제 04 장 JSP 기본문법 공주대학교컴퓨터공학부 소선섭

78 JSP 태그방식 종류 스크립트태그액션태그커스텀태그 스크립트태그종류 종류태그형식사용용도 지시어 (directives) %> JSP 페이지의속성을지정 선언 (declaration) <%! %> 소속변수선언과메소드정의 표현식 (expression) <%= %> 변수, 계산식, 함수호출결과를문자열형태로출력 스트립트릿 (scriptlet) <% %> 자바코드를기술 주석 (comments) <%-- --%> JSP 페이지의설명추가

79 액션태그와커스템태그 액션태그 XML 스타일의태그로기술한동작기능을수행하는방식 커스템태그 새로운태그를정의하여이용하는방법으로 JSP 만의고유한방식종류태그형식사용용도 <jsp:include page= test.jsp /> 현재 JSP 페이지에서다른페이지를포함 <jsp:forward page= test.jsp /> 현재 JSP 페이지의제어를다른페이지에전달 액션태그 (action Tag) <jsp:plugin type= applet code= test /> <jsp:usebean id= login class= LoginBean /> 자바애플릿을플러그인 자바빈을사용 <jsp:setproperty name= login property= pass /> 자바빈의속성을지정하는메소드를호출 <jsp:getproperty name= login property= pass /> 자바빈의속성을반환하는메소드를호출 커스템태그 (Custom Tag) <tag:printdata dbname= mydb table= memb /> 사용자가직접정의한태그를이용 42

80 스크립트릿 자바코드삽입 <% code fragment %> <% out.print( 스크립트릿태그 ); %> 43

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4