제 23 장 WWW 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML 23.5 동적문서 23.6 CGI 23.7 액티브 문서 23.8 자바 23.9 요약
23. WWW 인터넷에 의해 제공된다 CERN 유연성, 이식성, 사용자 편의성 과학적 연구에 필요한 분산되어있는 자원들을 처리할 수 있는 시스템 창조를 위해 시작 European Laboratory for Particle Physics European Lab for Network Collision
23. WWW (계속) 브라우저를 사용하는 클라이언트가 서버를 사용하여 서비스 받음 제공되는 서비스는 웹 사이트에 분산 Site A Site B Site C Site F Site G Site E Site D 브라우저를 사용하는 클라이언트가 서버를 사용하여 서비스 받음 제공되는 서비스는 웹 사이트에 분산
23.1 하이퍼 텍스트와 하이퍼 미디어 A computer is a digital electronic machine made of a CPU, a control unit, and memory Computer It is random access memory. RAM It is used to do mathematical and logical calculation CPU It is part of a computer that controls the flow of data Control unit It can be RAM or ROM. It is used in a computer to store information. Memory It is read-only memory. ROM
23.2 브라우저 구조 … 브라우저 제어기, 클라이언트 프로그램, 해석기 Controller HTML Java HTTP FTP Browser HTML Java Controller HTTP FTP TELNET SMTP … 브라우저 제어기, 클라이언트 프로그램, 해석기
23.2 브라우저 구조(계속) WWW에서의 문서 Web document Static Dynamic Active
23.3 고정 문서 Request Web document Client Server a. Request Web document b. Response
The text to be boldfaced 23.4 HTML HTML (HyperText Markup Language) Beginning of boldface The text to be boldfaced End of boldface <B> this is the text that must be boldfaced. </B> <B> This is the test to be boldfaces. </B> This is the test to be boldfaces. Browser
23.4 HTML(계속) Web page 구조 Header Body Web page의 첫번째 부분 표제(title)와 browser가 사용할 다른 매개 변수들을 포함 Body Page의 실제 내용을 포함 Tag를 포함하여 문서를 표현한다.
23.4 HTML(계속) 태그 부등호 (< , >)로 둘러 싸여 보통 쌍으로 사용한다.
23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Skeletal Tags Defines an HTML document <HEAD> </HEAD> Defines the head of the document <BODY> </BODY> Defines the body of the document Title and Header Tags <TITLE> </TITLE> Defines the tiltle of th document <Hi> </Hi> Defines different headers(i is and integer)
23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Text Formatting Tags <B> </B> Boldface <I> </I> Italic <U> </U> Underlined <SUB> < /SUB > Subscript <SUP> </SUP> Superscript
23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Data Flow Tags <CENTER> </CENTER> Centered <BR> </BR> Line break List Tags <OL> < /OL > Ordered list <UL> </UL> Unordered list <LI> </LI> An item in a list
23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Image Tags <IMG> Defines an image Hyperlink Tags <A> </A> Defines an address(hyperlink) Executable contents <APPLET> < /APPLET > The document is an applet
23.4 HTML(계속) 예제 1 <HTML> <HEAD> <TITLE> First Sample Document </TITLE> </HEAD> <BODY> The body of the first sample program ........................................................... </BODY> </HTML>
23.4 HTML(계속) 예제 2 <HTML> <HEAD> <TITLE> Second Sample Document </TITLE> </HEAD> <BODY> <CENTER> <H1><B> ATTENTION </B></H1> </CENTER> You can get a copy of this document by: <UL> <LI> Writing to the publisher <LI> Ordering on-line <LI> Ordering through a bookstore </UL> </BODY> </HTML>
23.4 HTML(계속) 예제 3 <HTML> <HEAD> <TITLE> Third Sample Document </TITLE> </HEAD> <BODY> This is the picture of a book: <IMG SRC="Pictures/book1.gif" ALIGN=MIDDLE> </BODY> </HTML>
23.4 HTML(계속) 예제 4 <HTML> <HEAD> <TITLE> Fourth Sample Document </TITLE> </HEAD> <BODY> This is a wonderful product that can save you money and time. To get information about the producer, click on <A HREF=”http://www.phony.producer”> Producer </A> </BODY> </HTML>
23.5 동적문서 동적문서 동적문서 처리과정 미리 정의된 형식으로 존재하지 않음 브라우저가 요청할 때마다 웹 서버에 의해 생성 서버는 URL이 동적문서를 정의하고 있는지 알아내기 위해 검사한다. 만일 URL이 동적 문서를 정의하고 있다면, 서버는 프로그램을 수행 시킨다. 서버는 프로그램의 출력을 클라이언트(브라우저)로 송신한다.
23.5 동적문서
23.6 CGI CGI(Common Gateway Interface) 동적 문서를 생성하고 처리하는 기술 C, C++, Bouren Shell, Korn Shell, C Shell, Tcl, Perl Common Gateway Interface 공통적으로 정의 되는 규칙의 집합을 정의 다른 자원을 엑세스하기 위해 사용될 수 있는 게이트웨이라는 것을 의미 임의 CGI 프로그램에서도 사용될 수 있는 미리 정의된 용어, 변수, 함수 등의 집합이 존재한다는 것을 의미
23.6 CGI (계속) CGI 프로그램 환경변수 CGI 언어중 하나로 작성된 코드 일련의 논리를 코딩 브라우저의 질의에 응답하고 자원을 액세스 하기위해 일련의 환경변수를 사용 부모 프로세스로부터 변수들을 상속 받거나, 혹은 브라우저에 의해 제공된 변수
23.6 CGI (계속) 환경변수 Beginning Tag Meaning AUTH_TYPE Authentication method used to validate a user CONTENT_LENGTH The length of data passed to CGI CONTENT_TYPE The MINE type of the query data DOCUMENT_ROOT Directory of the Web document GATEQAY_INTERFACE Version of CGI HTTP_ACCEPT A list of MIME types that client can accept HTTP_FORM E-mail address of the user HTTP_REFERER URL of the document pointed to by the client HTTP_USER_AGENT Name of the client program(browser) PATH_INFO Extra path information given by URL PATH_TRANSLATED Translation of the contents of PATH_INFO
23.6 CGI (계속) 환경변수 Beginning Tag Meaning QUERY_STRING Input information supplied by the user REMOTE_ADDR IP address of the client REMOTE_HOST Name of the client REMOTE_IDENT Username of the user REMOTE_USER Authenticated name of the user SCRIPT_NAME Path of the script being executed SERVER-NAME Server name or IP address SERVER-PORT Port number of the server SERVER-PROTOCOL Name and version of protocol used to receive request SERVER-SOFTWARE Name and version of the protocol used to send response
23.6 CGI (계속) 입력 http://www.deanza/cgi-bin/prog.pl?file1 QUERY_STRING 서버가 URL을 수신하면, 서버는 수행될 프로그램을 액세스 하기위해 사용 클라이언트에서 전송된 입력으로 해석 QUERY_STRING 저장
23.6 CGI (계속) 출력 헤더 CONTENT_LENGTH : 출력 데이터를 바이트로 표시 Text, Http, …. CGI Program Server site Client 2진 data, 상태 코드, 명령어, …. Header 생성 헤더 CONTENT_LENGTH : 출력 데이터를 바이트로 표시 CONTENT_TYPE : 출력 데이터의 종류를 정의 EXPIRES : 날짜와 시간을 표시 LOCATION : 방향 재지정 PRAGMA : 문서의 캐쉬기능 설정 or 해제 STATUS : 요청의 상태 표시
23.6 CGI (계속) 방향 재지정 CGI 프로그램의 출력이 어떤 파일의 주소가 될 경우 프로그램의 출력이 요청을 고정문서로 방향 재지정하는 주소가 될 수 있다. 브라우저는 고정문서를 가져오기 위해 주소(URL)를 사용한다.
23.6 CGI (계속) 예제 1 (Bourne shell) #!/bin/sh # The head of the program echo Content_type: text/plain echo # The body of the program now=’date‘ echo $now exit 0
23.6 CGI (계속) 예제 2 (HTML) #!/bin/sh # The head of the program echo Content_type: text/html echo # The body of the program echo <HTML> echo <HEAD><TITLE> Date and Time </TITLE></HEAD> echo <BODY> now=’date‘ echo <CENTER><B> $now </B></CENTER> echo </BODY> echo </HTML> exit 0
23.6 CGI (계속) 예제 3 (Perl) #!/bin/perl # The head of the program print "Content_type: text/html\n" ; print "\n" ; # The body of the program print "<HTML>\n" ; print "<HEAD><TITLE> Date and Time </TITLE></HEAD>\n" ; print "<BODY>\n" ; $now = ’date‘; print "<CENTER><B> $now </B></CENTER>\n" ; print "</BODY>\n" ; print "</HTML>\n" exit 0
23.6 CGI (계속) 예제 4 (서버정보 생성, 클라이언트에 반환) #!/bin/perl # The head of the program print "Content/type: text/html\n" ; print "\n" ; # The body of the program print "<HTML>\n" ; print "<HEAD><TITLE> Server Information </TITLE></HEAD>\n" ; print "<BODY>\n" ; print " Server name:" , $ENV {’SERVER_NAME’}, "\n" ; print " Port Number:" , $ENV {’SERVER_PORT’}, "\n" ; print "</BODY>\n" ; print "</HTML>\n" ; exit 0
23.6 CGI (계속) 예제 5 (사용자 입력, C) #include <stdio.h> #include <stdlib.h> #include <string.h> int main (void) { char *query = getenv ("QUERY_STRING"); float balance; printf ("Content_type: text/plain\n\n"); if (query == NULL) { printf ("Sorry, you did not supply the name of the account.\n") ; printf ("To access the database, the account name is needed.\n") ; } else { balance = Access_Balance (query) ; printf ("The balance is: %f\n", balance); } return 0 ; }
23.7 액티브 문서 Active document 클라이언트 사이트에서 수행될 프로그램 서버로부터 클라이언트로 2진 형태로 운반 문서가 서버 사이트에서 압축 클라이언트 사이트에서 복원 대역폭과 전송시간을 절감할 수 있다.
23.7 액티브 문서 (계속)
23.7 액티브 문서 (계속) 생성, 컴파일, 실행 서버 클라이언트 소스 코드로된 프로그램 작성, 파일로 저장 프로그램 컴파일, 2진코드 생성 파일로 저장 (경로명은 URL에서 파일 참조로 사용) 파일 프로그램 명령어 : 2진 형태 식별자 : 2진 옵셋 주소에 의해 참조 (변수, 상수, 함수 이름 등) 클라이언트 2진 코드의 복사본 요청 (압축된 형태로 전송) 2진 코드를 실행 가능한 코드로 변환 프로그램 수행 애니메이션이나 사용자와의 상호작용을 포함할 수 있는 결과 출력
23.8 자바 Java 클래스 라이브러리의 조합 객체지향 언어 고급 프로그래밍 언어와 런타임 환경 활동적인 문서를 작성하고 브라우저가 이를 수행 (APPLET, JSP) 브라우저를 사용하지 않는 독립적 프로그램으로도 사용 (application) 애플릿을 생성하는데 사용 객체지향 언어 C++ 과 매우 유사 C++의 복잡성은 없다.( 연산자 오버로드, 다중 상속) 하드웨어에 독립적, 포인터를 사용하지 않음. Type 언어 : 데이터를 사용하기 전에 데이터 유형을 선언 다중처리 언어 : 다중성을 만들도록 복수 쓰레드 사용 가능
23.8 자바 (계속) 클래스와 객체 객체는 캡슐화 된 데이터를 처리하기 위해 메소드를 사용하는 클래스의 인스턴스이다. 데이터와 메소드 개방형(public) 데이터 클래스 정의에 속하지 않는 프로시저나 프로그램에 의해 액세스 될 수 있다. 어떤 프로시저나 프로그램에 의해서도 호출 가능 폐쇄형(private) 데이터 클래스 내에서 정의 된 메소드에 의해서만 액세스 될 수 있다. 클래스 내에서 정의 된 메소드에 의해서만 호출 가능
23.8 자바 (계속) 인스턴스 생성 객체를 사용하기 위해서, 프로세스는 객체의 인스턴스를 생성 인스턴스 프로세스 클래스에서 정의된 데이터의 집합을 캡슐화 프로세스 객체에 캡슐화된 데이터를 처리하기 위해 개방형 메소드 사용 가능
23.8 자바 (계속) 상속 객체의 계층 구조를 정의하여, 한 객체가 다른 객체로부터 데이터와 메소드를 상속 받을 수 있도록 한다. Java 하나의 클래스를 많은 클래스들에 공통된 데이터와 메소드를 포함하는 기초 클래스(base class)로 정의 할 수 있다
23.8 자바 (계속) 패키지 클래스 라이브러리로 하여금 애플릿에서 서로 다른 객체들을 생성하고 사용할 수 있도록 한다. java.lang : 쓰레드와 예외 처리와 같은 메소드를 포함 Java.io : 입출력 동작을 처리 Java.net : 네트워크를 통한 메시지 전송을 처리 Java.util : 공통적 데이터 구조를 처리 (스택, 벡터, 시간, 날짜, 해쉬 테이블 등) Java.applet : 웹 페이지를 취득하고 화면에 나타낼 수 있는 메소드를 포함 Java.awt : 자바 언어를 이식 가능하게 만들도록 설계된 패키지 (Abstract Window Toolkit)
23.8 자바 (계속) 애플릿의 골격 자바로 작성된 동적 문서로, 개방적으로 상속된 클래스의 정의 java.applet 라이브러리에 정의 된 애플릿 클래스로부터 상속 폐쇄형 데이터와 개방형 및 폐쇄형 메소드를 정의 할 수 있다
23.8 자바 (계속) 애플릿의 골격 클라이언트 프로세스는 애플릿의 인스턴스를 생성 브라우저는 폐쇄형 메소드를 호출 데이터를 액세스하기 위해 애플릿에 정의 된 개방형 메소드를 사용
23.8 자바 (계속) 생성 및 컴파일 텍스트 편집기를 사용하여 생성 File name : * . java 자바 컴파일러 바이트 코드 생성 File name : * . class
23.8 자바 (계속) HTML 문서 애플릿을 사용하기 위해선 HTML 문서를 만들어 애플릿의 이름을 <APPLET> 태그 사이에 삽입 태그는 애클릿을 위해 사용될 창의 크기를 결정
23.8 자바 (계속) 예제 1 import java.applet.* ; import java.awt.* ; public class First extends Applet { public void paint (Graphics g) g.drawString ("Hello World", 100, 100 ) ; } Java.awt에서 정의 된 메소드 호출 개방적으로 상속된 클래스 사용 브라우저는 paint를 통해 First의 인스턴스를 액세스 세 개의 매개변수가 drqwstring으로 전달
23.8 자바 (계속) 예제 2 import java.applet.* ; import java.awt.* ; public class Second extends Applet { public void paint (Graphics g) g.drawLine (0, 0, 80, 90 ) ; } 선을 그리도록 한다(시작점 x, y, 끝점 x, y)
23.8 자바 (계속) 예제 3 import java.applet.* ; import java.awt.* ; public class Third extends Applet { public void paint (Graphics g) g.drawRect (30, 30, 80, 20 ) ; g.setColor (Color.black) ; g.fillRect (30, 30, 80, 20) ; } 사각형을 그리도록 한다 (시작점 x, y, 폭, 높이) 사각형을 채우기 위한 메소드 사각형 안에 색칠을 한다
23.8 자바 (계속) 예제 4 import java.applet.* ; import java.awt.* ; public class Fourth extends Applet { public void paint (Graphics g) { g.drawTriangle (g, 10, 10, 10, 30, 50, 30 ) ; g.drawTriangle (g, 50, 30, 50, 10, 70, 10) ; } private void drawTriangle (Graphics g, int x1, int y1, int x2, int y2, int x3, int y3 ) { g.drawLine (x1, y1, x2, y2 ); g.drawLine (x2, y2, x3, y3 ); g.drawLine (x3, y3, x1, y1 ); } } 자체의 폐쇄형 메소드 정의 다른 위치에 서로 다른 삼각형을 원하는 수만큼 그릴수 있다.
23.8 자바 (계속) 예제 5 스크롤바를 생성(초기값, 증감단위, 범위(시작, 종료)) 사용자가 바를 스크롤할때, import java.applet.* ; import java.awt.* ; public class Fifth extends Applet { private Scrollbar bar ; private int barValue = 0 ; public void init () { bar = new Scrollbar (Scrollbar.HORIZONTAL, 0, 2, 1, 100) ; add (bar) ; } public void paint (Graphics g) { g.drawString ("Value is " + barValue, 100, 100 ) ; } public void boolean handleEvent (Event e) { barValue = bar.getValue ( ) ; repaint () ; return true ; } } 스크롤바를 생성(초기값, 증감단위, 범위(시작, 종료)) 사용자가 바를 스크롤할때, 바와 연관된 값이 포착 바의 값을 화면에 다시 그리기 위해 사용
6.6 요약