반응형
출처: http://www.ibm.com/developerworks/kr/xml/standards/x-soapspec.html
 난이도 : 중급

필자: W3C

2007 년 6 월 26 일

SOAP 프로토콜에서는, 인터넷 프로토콜로 연결된 시스템들간 통신에 XML을 사용할 수 있습니다. XML 정보에 표준 인벨롭(envelope)을 제공하여 네트워크 메시지들을 통해 전송될 수 있도록 하고, 메시지 바디(body)에 대한 규약도 제공합니다. SOAP의 역사를 이해하고, 웹 서비스, 서비스 지향 아키텍처(SOA), Representational State Transfer (REST)와의 관계를 이해해 봅시다.

SOAP [W3C Recommendation]은 인터넷 프로토콜을 사용하여 연결되어 있는 시스템들 간 통신에 XML을 사용하는 프로토콜이다. 많은 사람들은 SOAP을 XML 웹 서비스의 토대, XML 데이터 포맷을 사용하여 연결된 시스템간 인터랙션을 관리 및 구성하는 기술, 인터넷 통신 프로토콜로 생각하고 있다. SOAP은 원래 IBM®을 비롯한 다양한 기업에서 모인 사람들에 의해 개발되었다. 견고한 아키텍처와 상용 지원을 갖추었던 초기 XML 메시징과 유사한 기능을 제공했기 때문에 빠르게 대중화되었다. World Wide Web Consortium (W3C)으로 넘어간 SOAP의 개발은 SOAP 1.2까지 탄생시켰고, 많은 아키텍처 향상을 이룩했지만, 이에 못지않게 많은 논란의 대상이 되었다. SOAP 프로토콜은 가상 XML 페이로드를 포함하여 XML Envelope 포맷을 정의하고 있다. (실제 SOAP 메시지의 페이로드가 XML의 완전한 기능을 사용하지 못한다는 사실은 상당한 논쟁거리가 된다.)

XML 웹 서비스는 서비스 지향 아키텍처(SOA)라고 하는 일반적인 개념과 밀접하게 연관되어 있지만, 이 중 어떤 개념들도 SOAP을 대체하지는 못한다. 많은 사람들은 HTTP를 통해서 직접 미가공 XML 문서들을 교환한다는 개념을 옹호하고 있다. 이는 Representational State Transfer (REST)가 추구하는 방식이기도 하다. REST는 Roy Fielding이라고 하는 아키텍트가 명명한 웹의 아키텍처 스타일이다. REST 스타일의 웹 서비스 옹호자는 SOAP은 복잡하고, XML 페이로드를 방해하고, 웹의 강점을 충분히 활용하지 못한다고 지적하고 있다. SOAP 옹호론자들은 SOAP의 원격 프로시저 호출(RPC) 루트에서 document-literal 스타일의 SOAP으로 강조를 옮김으로써 이러한 문제를 해결해왔다. RPC 스타일에서, 전송되는 데이터는 특별한 XML 페이로드 포맷(SOAP encoding)에 개별 데이터 유형으로 마샬링 된다. document-literal 스타일에서, XML 페이로드는 보다 설명적이고 가독성 있는 자연스러운 XML 포맷으로 구성된다.

SOAP 조직

SOAP과 관련하여 많은 표준들이 만들어지고 있지만, 이 글에서는 다루지 않겠다. 다음은 SOAP 관련 표준과 관련한 리소스들이다.

SOAP의 전신에 해당하는 XML Remote Procedure Calls (XML-RPC) [community specification]는 여전히 광범위하게 사용되고 있다. XML-RPC는 XML로 인코딩 되고 HTTP를 통해 통신하는 프로시저 호출을 정의한다. 단순함(전체 스팩은 불과 10페이지 밖에 안된다.)과 대부분의 언어와 많은 애플리케이션 프레임웍이 표준 또는 쉽게 사용할 수 있는 XML RPC 구현을 갖고 있다는 사실 때문에 여전히 대중성을 확보하고 있다. 원시적인 데이터 타이핑과 문자 인코딩 지원의 부족이라는 치명적인 단점이 있다.


아는 지인이 SOAP 과 ebXML에 대한 질문을 해왔다. 현재 일하고 있는 곳에서 사용하고 있지만
개념을 확실히 알고 사용하는 것이 아니였기에 지인에게 정확한 답변을 해주지 못하였다.
이에 개념을 확실히 정리해야 겠다는 생각이 들어 자료를 정리해본다.
현재 하고 있는 일에 관한 많은 부분에 대해서 개념은 없고 사용만 하는 부분이 많다.
좀 더 하는 일에 대해 개념을 정립하고 그에 관련된 정보를 모아서 정리해야겠다.
반응형

' http://www.meadroid.com의 ScriptX 공개 프린트 컴포넌트로 상당히 많은 기능이 있으나
무료로 사용할수 있은 기능은 아래와 같고.  그 외의 기능은 라이센스가 필요하다.

<script language="javascript">

function printWindow() {
   factory.printing.header = "머릿글" //머릿말 설정
   factory.printing.footer = "바닥글"   //꼬릿말 설정
   factory.printing.portrait = true                    //출력방향 설정: true-세로, false-가로
   factory.printing.leftMargin = 1.0                 //왼쪽 여백 설정
   factory.printing.topMargin = 1.0                 //왼쪽 여백 설정
   factory.printing.rightMargin = 1.0               //왼쪽 여백 설정
   factory.printing.bottomMargin = 1.0            //왼쪽 여백 설정
  factory.printing.Print(false, window)
}
</script>

 


<object id="factory" viewastext  style="display:none"
  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
  codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=6,2,433,14">
</object>

 

<input type="button" name="print" value="프린트" onClick="printWindow();">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 - 프린터 팁 : 웹페이지를 다음 페이지에 인쇄

     <p style="page-break-before:always"> 

     이 태그를 만나면 다음페이지에 인쇄함.

다음은 MeadCo 사에서 제공하는 ScriptX 에 대한 보다 더 자세한 설명입니다.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

ASP나 자바스크립트로는 이러한 웹브라우저의 인쇄기능 설정을 변경할 수 없습니다.
사용할수 있는것이라고는 오직 여러분들이 잘 아시는 window.print(); 밖에 없습니다. ASP나 자바스크립
트 같은 스크립트 언어로는 윈도우 API를 사용할수 없기 때문이죠.

따라서 할수 있는 방법은 컴포넌트를 따로 만들어서 이것을 ASP 같은 스크립트 언어를 사용해 제어하는 것
이 현재까지의 방법중 가장 확실한 것이죠.

근데 문제는....
직접 서버를 운영하는 분들이 아니고 호스팅 서비스를 이용하시는 분들의 경우 개인이 만든 컴포넌트를 서버
에 인스톨하는 것이 불가능합니다. 대부분의 호스팅 회사들은 이것을 전혀 허락하지 않으니까요. 그리고 만
일 직접 컴포너트를 제작할 능력이 안된다면 그건 더 말할게 없겠죠.

이러한 문제점들을 안고 어려운 환경속에서도 열쒸미 프로젝트 개발에 여념이 없으신 분들에게 좋은 팁하나
가르쳐 드리겠습니다. 남의 손으로 코푼다고 할까요~~ 아주 간단하지만 강력한 인쇄기능 제어 방법입니다.
이 방법을 사용하시면 웹사이트에서 인쇄를 할때...

1. Header, Footer를 완벽히 제어할수 있습니다. Header, Footer를 빼고 인쇄할수도 있고 자기가 원하는 것으
로 바꿔서 인쇄할 수도 있습니다.

2. 코딩으로도 화면을 가로로 인쇄할지 세로로 인쇄할지 설정할수 있습니다.

3. 웹브라우저에 기본으로 되어있는 건 언제나 1부씩 출력이죠.... 이것을 자기가 원하는 부수로 설정할 수 있
습니다.

4. 왼쪽, 오른쪽, 위, 아래 여백 사이즈를 자기가 원하는데로 설정할 수 있습니다.

5. 프린터 이름을 입력해 어느 프린터로 출력 할지도 미리 설정할 수 있습니다.

6. 종이의 종류를 A4로 할지 다른걸로 할지등을 지정할 수 있습니다.

7. Manual Feed로 할지 Auto Feed로 할지 지정할 수 있습니다.

어떠세요. 이 정도 기능을 웹페이지 안의 코딩으로 미리 다 설정이 가능하다면 더 이상 웹어플리케이션 개발
할때 봉착하는 프린트 제어 기능 문제는 겪지 않으시겠죠?
또한 서버에 컴포넌트를 설치할 필요도 없으니 호스팅 서비스를 이용하시는 분들이나 컴포넌트 제작이 어려
우신 분들에게도 아주 좋으실 겁니다.

자 이제 딴소린 다 집어치우고 어떻게 하는지에 대해 말씀 드리겠습니다.

MeadCo라는 회사에서 개발한 ScriptX 라는 컴포넌트가 있습니다. 이것을 사용하는 것입니다.
물론 무료로 사용 가능하구요. Cab 파일 형태로 제공됨으로 서버에 설치하지 않고 클라이언트 컴터에 설치하
여 쓸수 있습니다. 여러분들 어떤 사이트를 방문하면 팝업이 뜨면서 0000 가 배포하는 000 프로그램을 설치하
겠나는 메세지 많이들 보셨죠? '예'를 선택하면 자동으로 그 프로그램이 설치되고 해당하는 웹페이지의 기능
들을 쓸수 있었잖아요. 이게 바로 그겁니다.

1.
우선 MeadCo 사의 웹사이트에서 ScriptX.Cab을 다운 받으세요.
이름(First Name), 성(Last Name), 이메일 주소를 입력하면 무료로 다운 받으실 수 있습니다.

http://www.meadroid.com/scriptx/sxdownload.asp

2.
다운받은 ScriptX.CAB 파일을 본인 웹서버의 원하는 곳에 업로드 시키세요.
http://www.test.com/ActiveX/ScriptX.cab 에 올렸다고 가정하죠.

3.
이제 인쇄기능이 필요한 웹이지 안에 다음의 오브젝트 태그를 삽입하세요.

<object id="factory" style="display:none" viewastext classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
codebase="http://www.test.com/ActiveX/ScriptX.cab#Version=6,1,431,2">
</object>

여기는 게시판이라 짤려서 3줄이 됐지만 짤리지 않게 두줄로 삽입하세요.

4.
이제 준비 끝입니다. 다음의 설정 스크립트를 삽입합니다.

<script defer>
function Print() {
factory.printing.header = "영수증 원본"; // Header에 들어갈 문장
factory.printing.footer = "감사합니다."; // Footer에 들어갈 문장
factory.printing.portrait = false // true 면 가로인쇄, false 면 세로 인쇄
factory.printing.leftMargin = 1.0 // 왼쪽 여백 사이즈
factory.printing.topMargin = 1.0 // 위 여백 사이즈
factory.printing.rightMargin = 1.0 // 오른쪽 여백 사이즈
factory.printing.bottomMargin = 1.0 // 아래 여백 사이즈
factory.printing.SetMarginMeasure(2); // 테두리 여백 사이즈 단위를 인치로 설정합니다.
factory.printing.printer = "HP DeskJet 870C"; // 프린트 할 프린터 이름
factory.printing.paperSize = "A4"; // 용지 사이즈
factory.printing.paperSource = "Manual feed"; // 종이 Feed 방식
factory.printing.collate = true; // 순서대로 출력하기
factory.printing.copies = 2; // 인쇄할 매수
factory.printing.SetPageRange(false, 1, 3); // True로 설정하고 1, 3이면 1페이지에서 3페이지까지 출력
factory.printing.Print(true) // 출력하기
}
</script>

이제 버튼 하나 만들어서 Print() 만 호출하면 위에 설정된 구성들로 프린트가 될것입니다.

만일 폼값을 받아 위의 설정값들을 변경하려면
frm = document.forms[0]; 처럼 폼 다큐먼트를 설정해 준 후
document.factory.printing.copies = frm.CopiesValue.value; 처럼 그 값을 받아오면 됩니다.
<출처: http://flashcafe.org/?mid=programming_study&page=2&sort_index=readed_count&order_type=desc&document_srl=12026 >
반응형
  1. Select 객체

    리스트박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
    그렇기 때문에 Select 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

    • Select 속성

      속성 의미
      name 리스트박스의 이름지정
      size 리스트박스에서 밖으로 보이는 목록의수
      value 리스트 박스의 목록에 설정할 값 지정
      selected 목록이 선택된 상태로 만든다.
      multiple 리스트 박스에서 하나이상 선택할 것인지를 지정

    • Select 객체의 특성

      특성 의미
      name 리스트박스의 이름
      length 리스트박스에 포함되어 있는 목록의수
      type type에 입력된값(select)
      selectedIndex 리스트 박스에서 현재 선택된 목록의 인덱스
      options 리스트박스에 포함된 목록 정보의 배열
      options[i].index 각 목록의 인덱스
      options[i].text 각 목록의 문자열
      options[i].value 각 목록에 할당되어 있는 값
      options[i].prototype 옵션 메뉴에 새로운 특성을 만들기 위한 것
      options[i].selected 각 목록이 현재 선택되어 있는지의 여부
      options[i].defaultSelected 각 목록이 처음 선택되어 있는지의 여부

    • Select 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onChange 다른 목록을 선택 했을때 발생하는 이벤트 핸들러

      예제1 실행화면
      <script>
      function foods(mira) {
      var sel = "선택된 음식 \n\n"
      for(i = 0;i if(mira.food.options[i].selected == true) {
      sel += mira.food.options[i].text + "\n"
      }
      }
      alert(sel)
      }
      </script>
      <form>
      좋아하는 음식을 선택해 주세요.
      <select name="food" size=6 multiple>
      <option value="김치찌게">김치찌게
      <option value="된장찌게">된장찌게
      <option value="해물탕">해물탕
      <option value="짜장면">짜장면
      <option value="짬뽕">짬뽕
      <option value="피자">피자
      <option value="냉면">냉면
      </select>
      <input type="button" value="선택" onclick="foods(this.form)">
      </form>
      <FORM>좋아하는 음식을 선택해 주세요.
      <INPUT onclick="foods(this.form)" type="button" value="선택"> </FORM>

      예제2 실행화면
      <script>
      function colch(mirage) {
      document.bgColor = mirage.color.options[mirage.color.selectedIndex].value
      }
      </script>
      <form>
      배경색바꾸기
      <select name="color" size=5 onChange=colch(this.form)>
      <option value="white">화이트
      <option value="ivory">아이보리
      <option value="lavender">라벤더
      <option value="pink">핑크
      <option value="lightblue">라이트블루
      <option value="gold">골드
      <option value="aqua">아쿠아
      </select>
      </form>
      <FORM>배경색바꾸기
      </FORM>

  2. Option 객체

    • Option 객체 만들기

      option_name = new Option( optionText , optionValue , defaultSelected , selected )

      optionText : 옵션 메뉴에 나타날 문자열
      optionValue : 옵션 메뉴를 선택했을때 리턴되는 값
      defaultSelected : 옵션 메뉴를 초기에 선택된 상태로 만들 것인지 아닌지를 지정
      selected : 옵션 메뉴가 선택되어 있는지 아닌지를 가리킨다.

      예제3 실행화면
      <script>
      function mirage8(form) {
      var option1 = new Option("자두","optiontest1",true)
      form.test2.options[form.test2.length] = option1
      }
      function mirage9(form) {
      if(form.test2.value != "") {
      form.test2.options[form.test2.selectedIndex] = null
      }
      else {
      alert("제거할 대상을 선택하세요")
      }
      }
      </script>
      <form>
      <select name="test2" size=7>
      <option value="optiontest1"> 사과
      <option value="optiontest2"> 앵두
      <option value="optiontest3"> 감
      <option value="optiontest4"> 수박
      </select>
      <input type="button" value="추가" onclick="mirage8(this.form)">
      <input type="button" value="제거" onclick="mirage9(this.form)">
      </form>
      <FORM> <INPUT onclick="mirage8(this.form)" type="button" value="추가"> <INPUT onclick="mirage9(this.form)" type="button" value="제거"> </FORM>

  3. FileUpLoad 객체

    • FileUpLoad 객체의 특성

      특성 의미
      name 파일업로드 입력양식 이름
      value 파일업로드 입력양식에 입력된 파일이름

      예제4 실행화면
      <script>
      function fileinfor(form) {
      if(form.fileup.value != "") {
      mirage = window.open("","","status=no,scrollbars=yes")
      mirage.document.write("<img src=" + form.fileup.value + ">" )
      }
      else {
      alert("이미지를 선택하세요")
      }
      }
      </script>
      <form name=form6>
      이미지 파일보기<input type="file" name="fileup">
      <input type="button" value="보기" onclick="fileinfor(this.form)">
      </form>
      <FORM name="form6">이미지 파일보기<INPUT type="file" name="fileup"> <INPUT onclick="fileinfor(this.form)" type="button" value="보기"> </FORM>

      [출처] [16]입력양식3|작성자 붉은매


반응형


Button 객체
버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Button 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Button 객체의 특성
특성 의미
name  버튼 입력양식의 이름 
value  버튼 입력양식에 입력한 값 
type  type택에 입력된값(button) 

 

Button 객체의 메소드
메소드 의미
click()  버튼을 클릭시키는 메소드 

 

Button 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  버튼을 클릭하는 순간 실행되는 이벤트 핸들러 
onMouseDown  마우스 버튼을 눌렀을때 실행되는 이벤트 핸들러 
onMouseUp  마우스 버튼을 놓았을때 실행되는 이벤트 핸들러 

 

Submit 객체
데이터 보내기 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Submit 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Submit 객체의 특성
특성 의미
name  데이터 보내기 버튼 입력양식의 이름 
value  데이터 보내기 버튼 입력 양식에 입력한 값 
type  type에 입력된 값(submit) 

 

Submit 객체의 메소드
메소드 의미
click()  데이터 보내기 버튼을 클릭시키는 메소드 

 

Submit 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  데이터 보내기 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Reset 객체
리셋 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Reset 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Reset 객체의 특성
특성 의미
name  리셋 버튼 입력양식의 이름 
value  리셋 버튼 입력양식에 입력한 값 
type  type에 입력된 값(reset) 

 

Reset 객체의 메소드
메소드 의미
click()  리셋 버튼을 클릭시키는 메소드 

 

Reset 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  리셋 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Checkbox 객체
체크박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Checkbox 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Checkbox 객체의 특성
특성 의미
name  체크박스의 이름 
value  체크박스에 할당할 값 
type  type에 입력된 값(checkbox) 
checked  체크박스가 체크 되었는지의 여부 
defaultChecked  체크박스가 처음 체크 되었는지의 여부 

 

Checkbox 객체의 메소드
메소드 의미
click()  체크박스를 클릭시키는 메소드 

 

Checkbox 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  체크박스를 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Radio 객체
라디오 버튼을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Radio 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Radio 객체의 특성
특성 의미
name  라디오 버튼의 이름 
value  라디오 버튼에 할당할 값 
type  type에 입력된 값(radio) 
checked  라디오 버튼이 체크 되었는지의 여부 
defaultChecked  라디오 버튼이 처음 체크 되었는지의 여부 
length  그룹안에 포함되어 있는 라디오 버튼의 수 

 

Radio 객체의 메소드
메소드 의미
click()  라디오 버튼을 클릭시키는 메소드 

 

Radio 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  라디오 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 


예제1 실행화면
<script language="javascript">
function sel(mirage) {
ans = mirage.value
alert(ans + "를 선택했습니다")
}
</script>
선택하세요
<form name=form5 action="">
<input type="radio" name="color1" value="사과" onClick="sel(this)">사과
<input type="radio" name="color1" value="배" onClick="sel(this)">배
<input type="radio" name="color1" value="앵두" onClick="sel(this)">앵두
</form>
 선택하세요
<FORM name="form5" action=""><INPUT onclick="sel(this)" type="radio" value="사과" name="color1">사과
<INPUT onclick="sel(this)" type="radio" value="배" name="color1">배
<INPUT onclick="sel(this)" type="radio" value="앵두" name="color1">앵두
</FORM>

 

[출처] [15]입력양식2|작성자 붉은매

반응형
HTML만을로는 모든정보를 처리 할 수가 없기 때문에 이것을 지원하기 위해 외부 프로그램과 웹서버간의
연결역활을 하기위한 규약이 CGI이다.
홈페이지를 방문해서 방명록이나 게시판에 글을 남기면 CGI 프로그램이 입력한 테이터들을 서버로 전달한다.
CGI를 사용하기 위해서 웹쪽 에서는 FORM태그를 사용 입력값을 서버에 전달해주고 서버에서는 입력값을 받아서
CGI프로그램으로 넘겨주게 된다.
우리가 알아야 할것은 서버쪽이 아닌 클라이언트 즉 CGI를 사용할수 있는 입력부분인 FORM태그만
홈페이지에 구현해주면 된다.

  1. Form 객체

    form택을 자바스크립트에서 접근하기 위한 객체로 document객체 하위에 속한다.

    • Form 객체의 특성

      특성 의미
      target 데이터를 서버로 보낸후 받아보는 결과를 어느 윈도우에서 받아 볼지를 지정
      action 압력한 데이터를 처리할 CGI 프로그램의 URL지정
      method 데이터를 어떤 HTTP 프로토콜로 보낼 것인지 지정한다
      encoding CGI 프로그램에 보내질 데이터 타입을 지정한다
      elements form택안에 있는 모든 입력양식을 배열로 저장

    • Form 객체의 메소드

      메소드 의미
      submit() 입력된 데이터를 서버로 보내기 위한 메소드
      reset() 입력양식을 리셋 시키는 메소드

    • Form 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onSubmit 데이터를 서버에 보내라는 명령을 내렸을때 실행되는 이벤트 핸들러
      onReset() 리셋버튼을 눌렀을때 실행되는 이벤트 핸들러

      예제1 실행화면
      <script language="javascript">
      <!--
      function forminfor() {
      var mirage = "Action : " + document.form1.action + "\n"
      mirage += "Target : " + document.form1.target + "\n"
      mirage += "Method : " + document.form1.method + "\n"
      mirage += "encoding : " + document.form1.encoding + "\n"
      alert(mirage)
      }
      //-->
      </script>

      <form name="form1" action="http://mirage728.com.ne.kr"
      target=" _blank" method=post>
      <input type="button" value="form 정보" onclick="forminfor()">
      <input type="submit" value="submit">
      </form>

      <FORM name="form1" action="http://mirage728.com.ne.kr" method="post" target=" _blank"><INPUT onclick="forminfor()" type="button" value="form 정보">
      <INPUT type="submit" value="submit"> </FORM>

      예제2 실행화면
      <script>
      function chform() {
      mirage = document.form2.elements[0].value
      if(mirage != "")
      alert(mirage + "님 홈 방문을 환영 합니다.\n\n좋은 시간 되세요..^^")
      else
      alert("이름을 입력해 주세요")
      }
      </script>

      <form name=form2>
      이름을 입력해 주세요
      <input type="text">
      <input type="button" value="확인" onclick="chform()">
      <input type="reset" value="취소">
      </form>

      <FORM name="form2">이름을 입력해 주세요
      <INPUT>

      <INPUT onclick="chform()" type="button" value="확인"> <INPUT type="reset" value="취소"> </FORM>

  2. Text 객체

    한줄짜리 문자열을 입력 받기 위한 형식으로 form 객체의 하위에 속한다.

    • Text 객체의 특성

      특성 의미
      name 텍스트 입력양식의 이름
      value 텍스트 입력양식에 입력한 값
      defaultValue 처음 input 택의 value에 입력했던 값
      type input 택에서 type에 입력된 값

    • Text 객체의 메소드

      메소드 의미
      select() 텍스트 입력필드에 있는 모든 값 선택하기
      focus() 텍스트 입력필드안에 커서 넣기
      blur() 텍스트 입력필드안의 커서 제거하기

    • Text 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onSelect 마우스로 입력필드의 문자열을 선택했을 때
      onFocus 마우스나 탭으로 커서가 입력필드 안에 들어갔을 때
      onBlur() 마우스나 탭으로 커서가 입력필드 에서 나갔을때
      onChange 텍스트 입력양식의 값을 바꾸었을 때

      예제3 실행화면
      <script>
      function mirage5(mir) {
      test = mir.tex1.value
      if(test == "") {
      alert("답을 입력해 주세요")
      mir.tex1.focus()
      }
      else if(test == "3" || test == "3번" || test == "삼" || test == "신기루") {
      alert("정답입니다.\n\n상품은 아직 마련하지 못했습니다..^^;" )
      }
      else {
      alert("틀렸습니다.\n다시선택해 주세요.")
      mir.tex1.focus()
      mir.tex1.select()
      }
      }
      </script>

      문제1) mirage는 무슨 뜻일까요..?
      1 바보 2 미꾸라지 3 신기루 4 신발
      <form name=form4>
      정답: <input type="text" name="tex1">
      <input type="button" value="확인" onclick="mirage5(this.form)">
      </form>

      문제1) mirage는 무슨 뜻일까요..?
      1 바보 2 미꾸라지 3 신기루 4 신발
      <FORM name="form4">정답: <INPUT name="tex1">
      <INPUT onclick="mirage5(this.form)" type="button" value="확인">
      </FORM>

      ※ 간단해석
      input 버튼을 클릭하면 mirage5함수를 호출하는데 매개변수로 this.form을 함께 넘겨주고 있다.
      this란 객체 자기 자신을 가리키는 말로 this.form은 form객체 자신을 가리킨다.
      위에있는 스크립트를 보면 mirage5함수의 매개변수에 this.form 이 아닌 mir로 되어있다.
      위에있는 mir은 this.form을 담은 하나의 변수이다

      객체에 접근 할때는 매개변수에 들어있는(mir) 이름으로 접근하면 된다.
      mir(mirage5함수에 들어있는 매개변수로 this.form을 담고있는 form객체 자신이다).text1.value
      객체에 접근 할때는 상위 객체부터 하위객체로 . 을 구분으로 해서 써주면 된다.
      보통 최상위객체는 생략해도 상관없다.[(window.document.)mir.text1.value]

  3. Textarea 객체

    여러줄을 입력할 수 있는 양식이다.
    텍스트 영역을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
    그렇기 때문에 Textarea 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

    • Textarea 속성

      속성 설명
      name 텍스트 영역의 이름지정
      rows 텍스트 영역의 높이
      cols 텍스트 영역의 너비
      wrap 글자가 우측 끝까지 갔을때 자동 줄바꿈할 것인지의 여부

    • Textarea 객체의 특성

      특성 설명
      name 텍스트 영역의 이름
      value 텍스트 영역에 입력한 값
      defaultValue <textarea> </textarea> 사이에 들어간 글자
      type input 택에서 type에 입력된값(textarea)

    • Textarea 객체의 메소드

      메소드 설명
      select() 텍스트 영역 안에 있는 모든값 선택하기
      focus() 텍스트 영역안에 커서 넣기
      blur() 텍스트 영역안에서 커서 제거하기

    • Textarea 객체의 이벤트 핸들러

      이벤트 핸들러 설명
      onSelect 마우스로 텍스트 영역에서 글을 선택했을 때
      onFocus 마우스나 탭으로 커서가 텍스트안에 들어갔을 때
      onBlur 마우스나 탭으로 커서가 텍스트 영역을 나갔을 때
      onChange 텍스트 영역의 값을 바꿨을 때
      onKeyDown 입력필드에서 키를 눌렀을때
      onKeyPress 입력필드에서 키를 눌렀을때
      onKeyUp 입력필드에서 키를 놓았을때

  4. Password 객체

    글내용을 * 표시로 나타내서 주위의 다른 사람이 글내용을 볼수없게 하는 기능이다.
    암호 입력 양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
    그렇기 때문에 Password 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

    • Password 속성

      속성 설명
      name 암호 입력 양식의 이름지정
      value 암호 입력 양식에 미리입력할 문자열 지정
      type password
      size 암호 입력양식의 가로 길이지정

    • Password 객체의 특성

      특성 설명
      name 암호 입력 양식의 이름지정
      value 암호 입력 양식에 입력한 값
      defaultValue 처음 value속성에 설정된 값
      type type에 입력된값(password)

    • Password 객체의 메소드

      메소드 설명
      select() 암호 입력양식에 있는 모든값 선택하기
      focus() 암호 입력 양식안에 커서넣기
      blur() 암호 입력 양식안에서 커서 제거하기

  5. Hidden 객체

    숨겨진 입력양식으로 사용자가 브라우저를 통해 볼수가 없다.
    숨겨진 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
    그렇기 때문에 Hidden 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

    • Hidden 속성

      속성 설명
      type hidden
      value 숨겨진 입력양식에 저장할 문자열 지정
      name 숨겨진 입력양식의 이름지정

    • Hidden 객체의 특성

      특성 설명
      name 숨겨진 입력양식 이름
      value 숨겨진 입력양식에 입력한 값
      defaultValue 처음 value속성에 설정된 문자열
      type type에 입력된값(hidden)

[출처] [14]입력양식1|작성자 붉은매


반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Navigator 객체

    브라우저에 대한 정보를 제공하는 객체로 계층구조에 포함되지 않고 따로 존재한다.

    • Navigator 객체의 특성

      특성 의미
      appVersion 브라우저의버전
      appName 애플리케이션 이름
      appCodeName 브라우저 코드 이름
      userAgent 브라우저의 user Agent
      mimeTypes 브라우저에서 지원하고 있는 MIME 타입들
      plugins 브라우저에 설치된 플러그인의 종류
      language 브라우저가 사용하는 언어
      platform 브라우저가 설치된 시스템 종류

    • Navigator 객체의 메소드

      메소드 의미
      javaEnabled() 현재 브라우저가 자바를 지원하고 있는지를 체크한다

      예제1 실행화면
      <script language="javascript">
      <!--
      function infor() {
      var mirage = "방문자 브라우저 정보" + "\n \n" mirage += "브라우저 버전 : " + navigator.appVersion + "\n"
      mirage += "애플리케이션 이름 : " + navigator.appName + "\n"
      mirage += "코드이름 : " + navigator.appCodeName + "\n"
      mirage += "User Agent : " + navigator.userAgent + "\n"
      alert(mirage)
      }
      //-->
      </script>
      <input type="button" value="브라우저정보" onclick="infor()">
      <INPUT onclick="infor()" type="button" value="브라우저정보">

    • mimeTypes

      현재 브라우저가 지원하는 mime 타입을 보여주는 배열변수로서 mime타입의 종류,설명,파일확장자,플러그인 객체 등의 정보를 포함하고 있다

      • mimeTypes 의 특성

        특성 의미
        type MIME 타입의 이름
        description MIME 타입에 대한설명
        enabledPlugin MIME 타입을 처리할 Plugin 객체
        suffixes MIME 타입에 해당하는 파일의 확장자 리스트

    • plugins

      현재 브라우저가 지원하는 플러그인 프로그램에 관한 정보를 보여주는 배열변수로서 플러그인의 이름,설명,지원하고 있는 MIME타입 등의 정보를 포함하고 있다.

      • plugins 의 특성

        특성 의미
        type 플러그인의 이름
        description 플러그인에 대한설명
        filename 디스크에있는 플러그인 파일이름
        [...] 플러그인이 처리할 수 있는 mimetype 객체의 배열
        length 배열의크기

    • javaEnabled()

      자바를 사용할수 있는지를 검사한다.
      자바를 사용할 수 있으면 true를 사용할 수 없으면 false를 리턴한다.

      예제2 실행화면
      <script>
      function javain() {
      if(navigator.javaEnabled()) {
      alert("방문하신 님의 PC는 자바를 사용할 수 있습니다.")
      }
      else {
      alert("방문하신 님의 PC는 자바를 사용할 수 없습니다.")
      }
      }
      </script>
      <input type="button" value="자바사용유무" onclick="javain()">
      <INPUT onclick="javain()" type="button" value="자바사용유무">

      [출처] [13]객체5|작성자 붉은매


반응형

브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Link 객체

    HTML문서에 들어있는 모든 링크에 대한 정보를 제공하는 객체로 document 객체의 하위객체이다.

    • Link 객체의 특성

      특성 의미
      target 정보를 보여줄 윈도우나 프레임
      href 문서의 URL주소
      port 포트번호
      host URL주소의 호스트이름과 포트번호
      hostname URL주소의 호스트이름
      protocol 프로토콜 종류
      pathname 디렉토리 위치
      search 검색엔진을 호출할때 사용하는 형식
      hash 표식이름

    • Link 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onClick 마우스로 링크를 클릭 했을때 발생하는 이벤트 핸들러
      onMouseOver 마우스로 링크위를 지나갔을 때 발생하는 이벤트 핸들러
      onMouseOut 마우스가 링크 밖으로 나갔을때 발생하는 이벤트 핸들러
      onMouseDown 마우스 버튼을 눌렀을때 발생하는 이벤트 핸들러
      onMouseUp 마우스 버튼을 놓았을때 발생하는 이벤트 핸들러
      onDblClick 마우스로 링크를 더블클릭 했을때 발생하는 이벤트 핸들러
      onKeyDown 키보드에서 키를 눌렀을 때 발생하는 이벤트 핸들러
      onKeyUp 키보드에서 키를 놓았을 때 발생하는 이벤트 핸들러
      onKeyPress 키보드에서 키를 눌렀을 때 발생하는 이벤트 핸들러

  2. Anchor 객체

    HTML문서에 들어있는 모든 표식에 대한 정보를 제공하는 객체이다.
    document 객체의 하위객체로 문서에 들어있는 표식의 수를 구할때 사용한다.

    document.anchors.length

  3. Image 객체

    이미지에 대한 정보를 제공하는 객체이다.

    • Image 객체의 특성

      특성 의미
      name image객체의 이름
      src 이미지파일의 위치
      lowsrc 이미지파일의 위치
      height 이미지의 세로길이
      width 이미지의 가로길이
      border 이미지 테두리선 굵기
      hspace 이미지 가로여백
      vspace 이미지 세로여백
      complete 이미지 전송이 끝났는지의 여부
      prototype image 객체에 특성을 추가하기 위한 것

    • Image 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onLoad 이미지가 브라우저에 나타날때 실행되는 이벤트 핸들러
      onError 이미지 전송중 에러 발생시 실행되는 이벤트 핸들러
      onAbort 이미지 전송을 중단시켰을 때 실행되는 이벤트 핸들러
      onKeyDown 이미지상에서 키를 눌렀을때 실행되는 이벤트 핸들러
      onKeyPress 이미지상에서 키를 눌렀을때 실행되는 이벤트 핸들러
      onKeyUp 이미지상에서 키를 놓았을때 실행되는 이벤트 핸들러

      예제1 실행화면
      <script language="javascript">
      <!--
      function imageinfor() {
      var mirage = "이미지이름 : " + document.coffee.name + "\n"
      mirage += "위치 : " + document.coffee.src + "\n"
      mirage += "테두리 : " + document.coffee.border + "\n"
      mirage += "가로 : " + document.coffee.width + "\n"
      mirage += "세로 : " + document.coffee.height + "\n"
      mirage += "가로여백 : " + document.coffee.hspace + "\n"
      mirage += "세로여백 : " + document.coffee.vspace + "\n"
      mirage += "배치 : " + document.coffee.align + "\n"
      mirage += "전송완료여부 : " + document.coffee.complete + "\n"
      alert(mirage)
      }
      //-->
      </script>
      <img align=center name="coffee" src="img/f9.gif" border=0 hspace=2 vspace=3>
      <input type="button" value="이미지등록정보" onClick="imageinfor()">


       <INPUT onclick="imageinfor()" type="button" value="이미지등록정보">

[출처] [12]객체4|작성자 붉은매

반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. History 객체

    브라우저 내장객체 계층구조상 윈도우객체 바로 아래에 있는 객체로 브라우저 히스토리 리스트 정보를 저장해 두는 곳이다.
    히스토리 정보는 브라우저가 최근 방문했던 url주소를 의미한다.

    • History 객체의 특성

      특성 의미
      length 히스토리 리스트에 포함되어 있는 URL 주소의 갯수

    • History 객체의 메소드

      메소드 의미
      back() 히스토리 리스트에서 한단계 뒤로 이동
      forward() 히스토리 리스트에서 한단계 앞으로 이동
      go() 히스토리 리스트에서 임의의 위치로 이동

      예제1 실행화면
      <script language="javascript">
      <!--
      function historygt() {
      alert("히스토리갯수 : " + history.length +"개")
      }
      //-->
      </script>
      <input type="button" value="히스토리 정보" onClick="historygt()">
      <INPUT onclick="historygt()" type="button" value="히스토리 정보">

      예제2 실행화면
      <input type="button" value = "뒤로" onclick="history.back()">
      <input type="button" value = "앞으로" onclick="history.forward()">
      <INPUT onclick="history.back()" type="button" value="뒤로"> <INPUT onclick="history.forward()" type="button" value="앞으로">

      예제3 실행화면
      <input type="button" value = "3단계 뒤로" onclick="history.go(-3)">
      <input type="button" value = "뒤로" onclick="history.back()">
      <input type="button" value = "앞으로" onclick="history.forward()">
      <input type="button" value = "3단계 앞으로" onclick="history.go(3)">
      <INPUT onclick="history.go(-3)" type="button" value="3단계 뒤로"> <INPUT onclick="history.back()" type="button" value="뒤로">

      <INPUT onclick="history.forward()" type="button" value="앞으로"> <INPUT onclick="history.go(3)" type="button" value="3단계 앞으로">

  2. Location 객체

    현재 열려진 윈도우의 URL 주소에 관한 정보를 제공하는 객체이다.
    frame으로 나누어져 있다면 최상위에 있는 문서의 URL주소를 갖게 된다.

    • Location 객체의 특성

      특성 의미
      href 문서의 URL주소
      port 포트번호
      host URL주소의 호스트이름과 포트번호
      hostname URL주소의 호스트이름
      protocol 프로토콜 종류
      pathname 디렉토리 위치
      search 검색엔진을 호출할때 사용하는 형식
      hash 표식이름

    • Location 객체의 메소드

      메소드 의미
      reload() 브라우저의 현재문서를 다시 읽도록 하는 메소드
      replace() 현재 브라우저의 특정 URL에 있는 문서로 바꾸어 주는 메소드

      예제4 실행화면
      <script language="javascript">
      <!--
      function cominfor() {
      var mirage5 = "문서주소 : " + top.frames[0].location.href + "\n"
      mirage5 += "프로토콜 종류 : " + top.frames[0].location.protocol + "\n"
      mirage5 += "호스트 : " + top.frames[0].location.host + "\n"
      mirage5 += "호스트이름 : " + top.frames[0].location.hostname + "\n"
      mirage5 += "포트번호 : " + top.frames[0].location.port + "\n"
      mirage5 += "표식이름 : " + top.frames[0].location.hash + "\n"
      mirage5 += "디렉토리위치 : " + top.frames[0].location.pathname + "\n"
      alert(mirage5)
      }
      //-->
      </script>
      <input type="button" value="문서정보" onclick="cominfor()">
      <INPUT onclick="cominfor()" type="button" value="문서정보">

[출처] [11]객체3|작성자 붉은매


반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Frames 객체

    프레임객체는 배열로 되어있어서 length를 이용해서 모두 몇개의 프레임이 있는지 알아낼수 있고 인덱스를
    이용하여 각 프레임의 정보에도 접근할수 있다.
    frames[0],frames[1],.....
    프레임 객체는 윈도우 객체와 특성이나,메소드,이벤트 핸들러가 같기 때문에 윈도우 객체를 참고하면 된다.

  2. Document 객체

    브라우저 내장객체 중에 window객체 아래에 위치하며 html문서의 body택안에 있는 내용들과 연관이 있다.

    • document 객체의 특성

      특성 의미
      location 문서의 URL위치
      title 문서의제목
      layers 문서에 있는 레이어들의 배열
      embeds 문서에 있는 플러그인들의 배열
      applets 문서에 있는 자바 애플릿의 배열
      images 문서에 있는 이미지들의 배열
      cookie 클라이언트 pc에 저장한 정보
      links 문서에 있는 링크들의 배열
      forms 문서에 있는 입력양식의 배열.
      anchors 문서에 있는 표식들이 배열
      vlinkColor 이전에 방문했던 링크를 표시하는색
      alinkColor 링크를 클릭 했을때 나타나는 색
      linkColor 링크를 표시하는 색
      fgColor 문서의 전경색
      bgColor 문서의 배경색
      referer 링크로 현재문서에 왔을때 이전문서의 URL위치정보
      lastModified 문서를 마지막으로 수정한 날짜

    • Document 객체의 메소드

      메소드 의미
      open() 문서에 데이터를 출력 시키기 위한 준비
      close() 문서에 데이터를 출력 시키는 것을 마무리
      write() 문서에 데이터를 출력
      writeln() 문서에 데이터를 출력한후 줄을 바꾼다
      clear() 브라우저에서 문서지우기
      getSelection() 현재 선택된 문자열을 리턴

    • document 객체의 이벤트 핸들러

      이벤트핸들러 의미
      onFocus 문서가 포커스를 얻었을때
      onBlur 문서가 포커스를 잃었을때
      onClick 문서에서 마우스를 클릭했을때
      onDblClick 문서에서 마우스를 더블클릭 했을때
      onKeyPress 키보드에서 키를 눌렀을때
      onKeyUp 키보드에서 키를 눌렀다 놓았을때
      onKeyDown 문서에서 키를 입력했을 때
      onMouseDown 마우스 버튼을 눌렀을 때
      onMouseUp 마우스 버튼을 눌렀다 놓았을 때

    • cookie

      브라우저 사용중에 html 문서상에서 만들어낸 정보를 클라이언트쪽 컴퓨터에 저장해 놓는곳을 의미한다.
      서버로 정보를 보내는 cgi프로그램을 보조해 주는 기능으로 많이 쓰인다.
      서버로 부터 HTTP 헤더를 통해 전달받는 Set-Cookie와 클라이언트가 서버로보내는 Cookie 라는 구조로 나누어져 있다.

      Set-Cookie 설명
      name=value cookie 이름으로 반드시 지정 되어야 하고 이름에 세미콜론(;)쉼표(,)빈칸이 들어가면 안된다.
      expires=Date cookie가 종료되는 날짜를 지정한다.날짜 지정이 없으면 현재 브라우저 세션 동안에만 유효하게 된다.
      날짜형식:일-월-년 시-분-초
      path=PATH cookie가 사용될 URL주소의 디렉토리 부분의 경로를 설정한다.
      지정을 하지 않으면 cookie를 설정한 문서위치가 적용된다.
      domain = DOMAIN cookie가 사용될 URL주소의 도메인 부분의 경로를 지정한다.
      지정을 하지 않으면 cookie를 설정한 문서위치의 도메인이 적용된다.
      secure 데이터 전송에 보안이 요구되는지를 지정한다.
      필요하다면 secure라는 키워드를 사용하면 된다.
      Cookie 설명
      name=value1; name=value2 각 cookie 정보 사이에는 세미콜론(;) 기호를 사용하고 마지막 부분에는 기호를 붙이면 안된다.

      예제1 실행화면
      <a href="http://mirage728.com.ne.kr/index.html">홈</a>
      <a href="http://daum.net">다움</a>
      <script language="javascript">
      <!--
      document.write("링크수 : " + window.document.links.length + "<br>")
      for(i=0 ; i document.write(i + " : " + window.document.links[i] + "<br>")
      }
      //-->
      </script>

      다움

      링크수 : 2
      0 : http://mirage728.com.ne.kr/index.html
      1 : http://daum.net/

      예제2 실행화면
      <script>
      newday = new Date(document.lastModified)
      year=newday.getYear()
      month=newday.getMonth()+1
      day=newday.getDate()
      document.write("수정일 : " + year + "년" + month + "월" +day + "일")
      </script>
      수정일 : 2008년5월5일

    • open()

      window의 객체의 open() 메소드와는 다르며 지정된 윈도우에 데이터를 보낼 준비를 할때 사용한다.

      open("Mime형식")

      Mime(Multipurpose Internet Mail Extension)은 인터넷을 통해 다양한 형식의 문서나 이미지를 전송하기 위한 규약이다.
      생략하면 text/html이 기본값으로 사용된다.

    • close()

      open()메소드로 열려진 문서를 닫아주는 역활을 한다.

    • clear()

      브라우저에 나타난 문서를 지워주는 기능을 한다.

    • write()

      지정된 문서에 데이터를 출력하는 기능을 한다.

    • writeln()

      지정된 문서에 데이터를 출력하는 것은 write()메소드와 같지만 줄을 바꿔주는 기능도 함께있다.

      예제3 실행화면
      <script language="javascript">
      <!--
      var mirage1 = null
      function mir_open() {
      mirage1 = window.open("","","status=no,width=400,height=300")
      }
      function mir_close() {
      if(mirage1 != null)
      mirage1.close()
      }
      function mir_write() {
      if(mirage1 != null) {
      mirage1.document.open()
      mirage1.document.write("<title>안녕하세요</title>")
      mirage1.document.write("<center>")
      mirage1.document.writeln("<h3>방문을 환영 합니다</h3>")
      mirage1.document.writeln("즐거운 시간 보내세요")
      mirage1.document.write("</center>")
      mirage1.document.close()
      return mirage1.focus()
      }
      }
      function mir_clear() {
      if(mirage1 != null) {
      mirage1.document.open()
      mirage1.document.write("")
      mirage1.document.close()
      return mirage1.focus()
      }
      }
      //-->
      </script>
      <input type ="button" value="open" onclick="mir_open()">
      <input type ="button" value="close" onclick="mir_close()">
      <input type ="button" value="write" onclick="mir_write()">
      <input type ="button" value="clear" onclick="mir_clear()">
      <INPUT onclick="mir_open()" type="button" value="open">

      <INPUT onclick="mir_write()" type="button" value="write">

      <INPUT onclick="mir_clear()" type="button" value="clear">

      <INPUT onclick="mir_close()" type="button" value="close">

      [출처] [10]객체2|작성자 붉은매


반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. 계층구조

    계층구조 계층순위
    window ↑상위


    ↓하위

    frames document history locations classes tags
    layers title anchors links forms pathname protocol port hostname
    elements action method

    예외)navigator(브라우저 정보)

  2. Window 객체

    브라우저 내장객체 중에 최상위에 있는 객체로 window 하위에 있는 객체를 가리킬때 window객체를
    생략해도 된다.

    • window 객체의 특성

      특성 의미
      toolbar 윈도우의 툴바를 보여줄지의 여부
      status(bar) 윈도우의 상태선을 보여줄지의 여부 ()←생략
      scrollbars 윈도우의 스크롤바를 보여줄지의 여부
      menubar 윈도우의 메뉴를 보여줄지의 여부
      location(bar) 윈도우의 주소창을 보여줄지의 여부 ()←생략
      personalbar 윈도우의 Personalbar를 보여줄지의 여부
      status 상태선에 나타날 문자열
      defaultStatus 상태선에 지정된 문자열이 없을 때 나타날 문자열
      self 자기 자신 객체
      perent 윈도우 객체간에 게층구조가 생길때 상위객체
      top window 객체간에 계층구조가 생길때 최상위 객체
      frames 윈도우 객체안에 들어간 프레임들
      tags html문서에 사용된 모든 택들
      classes html문서에 사용된 모든 스타일시트 클래스들
      opener open() 메소드로 윈도우를 연 문서가 있는 윈도우
      innerWidth 윈도우에서 내용이 나타나는 영역의 너비
      innerHeight 윈도우에서 내용이 나타나는 영역의 높이
      outerWidth 윈도우 바깥테투리 너비
      outerHeight 윈도우 바깥테투리 높이
      pageXOffset 윈도우에서 현재 나타나는 페이지의 x 위치
      pageYOffset 윈도우에서 현재 나타나는 페이지의 Y 위치

    • window 객체의 메소드

      메소드 의미
      open() 윈도우 열기
      close() 윈도우 닫기
      confirm() 사용자로부터 확인을 받기위한 다이얼로그 박스
      prompt() 사용자로부터 문자열을 입력받기 위한 다이얼로그 박스
      alert() 메세지를 전달하기 위한 경고창
      back() 뒤페이지로 이동
      forward() 앞페이지로 이동
      home() 홈페이지로 이동
      find() 윈도우에 포함된 텍스트 검색
      setTimeout() 지정된 시간동안 기다린후 지정된 명령실행
      clearTimeout() setTimeout 해제
      setInterval() 주기적으로 명령실행
      stop() 문서전송 중지
      print() 윈도우에 포함된 내용출력
      moveBy() 윈도우 상대이동
      moveTo() 윈도우 절대이동
      resizeBy() 윈도우의 상대적 크기 바꾸기
      resizeTo() 윈도우의 절대적 크기 바꾸기
      scrollBy() 윈도우의 보여지는 부분을 상대적으로 스크롤
      scrollTo() 윈도우의 보여지는 부분을 절대적으로 스크롤

    • window 객체의 이벤트 핸들러

      이벤트핸들러 의미
      onFocus 브라우저가 포커스를 얻었을때
      onBlur 브라우저가 포커스를 잃었을때
      onError 브라우저가 문서를 읽다가 에러가 발생했을때
      onLoad 브라우저가 문서를 모두 읽은후에 실행할 명령지정
      onUnload 브라우저가 현재문서를 지운후에 실행할 명령지정
      onDragDrop 브라우저에서 객체를 드래그앤드롭 시켰을때
      onResize 윈도우 크기를 바꾸었을때
      onMove 윈도우를 움직였을때

      예제1 실행화면
      <a onclick="window.open('http://mirage728.com.ne.kr/index.html','_blank',
      'toolbar=no,location=yes,menubar=no,status=no,width=350,height=250')"
      onMouseOver="window.status='mirage728홈으로 이동합니다' ; return true" onMouseout="window.status=' ' ; return true">
      마우스 올린후 상태선을 보세요 </a>
      마우스 올린후 상태선을 보세요

    • open() 메소드

      open("문서이름","윈도우이름","윈도우특징")

      문서이름은 만들고자 하는 윈도우에 보여줄 html파일 이름을 지정하면 된다
      윈도우 이름은 만들고자 하는 윈도우의 이름으로 target 지정할때 쓰이게 된다.
      (_top,_self,_parent,_blank,프레임이름,윈도우이름,"")

      윈도우 특징의 종류

      윈도우특징 입력값 설명
      status boolean 상태선
      width 픽셀수 윈도우 바깥너비
      height 픽셀수 윈도우 바깥 높이
      toolbar Boolean 툴바메뉴
      location Boolean 문서위치 정보
      directories Boolean 디렉토리메뉴
      menubar Bollean 메뉴
      scrollbars Boolean 스크롤바
      resizable Boolean 윈도우 크기조절 가능
      copyhistory Boolean 히스토리 정보 복사

      예제2 실행화면
      <script>
      function win1() {
      window.open("","","")
      }
      </script>
      <a href="javascript:onclick=win1()">윈도우열기</a>
      윈도우열기

      예제3 실행화면
      <script>
      function win2() {
      window.open("","","status=no,width=200,height=100")
      }
      </script>
      <a href="javascript:onclick=win2()">윈도우열기</a>
      윈도우열기

      예제4 실행화면
      <script>
      function win3() {
      window.open("aaa.html","win3","status=no,width=200,height=100,directories=yes")
      }
      </script>
      <a href="javascript:onclick=win3()">윈도우열기</a>
      윈도우열기

      예제5 실행화면
      <script>
      function win4() {
      make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
      make1.document.write("mirage728홈 입니다<p>")
      make1.document.write("<input type='button' value='닫기' ")
      make1.document.write("+ onclick='window.close()' >")
      }
      </script>
      <a href="javascript:onclick=win4()">윈도우열기</a>
      윈도우열기

      예제6 실행화면
      <script>
      var make1 = null // make1 변수에는 아직 값이 없다
      function win5() {
      make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
      // 텅빈 make1 변수에 새로 만들어진 윈도우를 집어 넣는다
      // make1은 이제 새로 만들어진 윈도우 자체이다
      make1.document.write("mirage728홈 입니다<p>")
      // make1에 글을 출력한다
      }
      function close5() {
      if(make1 != null) // 윈도우가 만들어져 있다면 = make1에 값이 들어 있다면
      make1.close() // 윈도우(make1)를 닫아라
      }
      </script>
      <a href="javascript:onclick=win5()">윈도우 열기</a><p>
      <!-- 링크를 클릭하면 win5()함수를 호출(실행)하라 -->
      <a href="javascript:onclick=close5()">윈도우 닫기</a><p>
      <!-- 링크를 클릭하면 close5()함수를 호출(실행)하라 -->
      <a style="cursor:hand;" onmouseOver=win5() onmouseOut=close5() >마우스위로</a>

      윈도우 열기

      윈도우 닫기

      마우스위로


    • setTimeout() 메소드

      지정된 시간동안 기다린후 지정된 명령실행

      setTimeout(함수-명령,시간)

      함수-명령은 지정된 시간이 지난후 실행할 함수또는 명령어이다.
      시간은 기다리는 시간이다.단위:1/1000초

      예제7 실행화면
      <script>
      function wtime() {
      var today = new Date()
      var mirage = "현재시각 : " + today.getHours()
      mirage += "시 " + today.getMinutes() + "분 "
      mirage += today.getSeconds() + "초"
      window.status = mirage;
      timecall = setTimeout("wtime()",1000) }

      function stime() {
      clearTimeout(timecall)
      }
      </script>

      <input type=button value="시계실행" onclick="wtime()">
      <input type=button value="시계멈춤" onclick="stime()">
      상태선을 보세요<br>

      <INPUT onfocus="this.blur()" onclick="wtime()" type="button" value="시계실행"> <INPUT onfocus="this.blur()" onclick="stime()" type="button" value="시계멈춤">

      상태선을 보세요

    • clearTimeout() 메소드

      setTimeout() 메소드로 지정한 것을 해제하는 역활을 한다.

      clearTimeout(setTimeout-ID)

      setTimeout-ID는 setTimeout() 실행시 리턴된 값이다(식별자)
      위 예제에서 setTimeout() 메소드로 지정한 실행명령을 clearTimeout() 메소드로 해제시킨 경우이다.

      예제8 실행화면
      <script>
      function load1() {
      location = 'http://mirage728.com.ne.kr/index.html'
      }
      </script>
      <body onLoad="setTimeout('load1()',4000)">
      <center><b>잠시후에 이동합니다.</b></center>
      setTimeout 예제2

    • setInterval() 메소드

      일정한 간격을 두고 명령을 주기적으로 실행 시킬때 사용된다.
      setTimeout은 지정된 명령를 일정한 시간이 지난후에 한번만 실행 시키기 때문에
      시간을 계속 보여주는 경우에는 setInterval() 메소드를 사용하는 것이 효과적이다.

      예제9 실행화면
      <script>
      function rtime() {
      var today = new Date()
      var mirage = "현재시각 : " + today.getHours()
      mirage += "시 " + today.getMinutes() + "분 "
      mirage += today.getSeconds() + "초"
      window.status = mirage;
      }
      function r1time() {
      setInterval("rtime()",1000)
      }
      </script>
      <input type=button value="시계실행" onclick="r1time()">
      <INPUT onfocus="this.blur()" onclick="r1time()" type="button" value="시계실행">

    • find() 메소드

      윈도우에 포함되어 있는 텍스트 중에서 원하는 문자열을 찾고자 할때 사용한다.

      find("검색할문자열",대소문자구분(Boolean),뒤로-앞으로(Boolean))

      검색할 문자열을 지정하지 않으면 찾기 다이얼로그 박스가 나타난다.
      대소문자 : true=대소문자구분,false=구분하지않음(디폴트값)
      뒤로-앞으로: true=뒤로검색 ,false=앞으로검색(디폴트)
      리턴값: true:찾았을때,false:찾지못했을때

    • print() 메소드

      현재 보여지는 내용을 프린트로 출력하는 기능이다.

      예제10 실행화면
      <input type=button value='프린트하기' onClick="window.print()"> <INPUT onfocus="this.blur()" onclick="window.print()" type="button" value="프린트하기">

    • moveBy() 메소드

      윈도우를 상대적인 위치로 이동시킨다.

      moveBy(수평거리,수직거리)

    • moveTo() 메소드

      윈도우를 절대적인 위치로 이동시킨다.

      moveBy(x좌표,y좌표)

      예제11 실행화면
      <script>
      function move1() {
      mirage3 = window.open("","ret","width=300,height=200");
      mirage3.moveTo(50,20);
      return mirage3.focus();
      }
      function move2() {
      mirage3 = window.open("","ret","width=300,height=200");
      mirage3.moveBy(50,20);
      return mirage3.focus();
      }
      </script>
      <input type=button value="moveTo" onclick="move1()">
      <input type=button value="moveBy" onclick="move2()">
      <INPUT onclick="move1()" type="button" value="moveTo"> <INPUT onclick="move2()" type="button" value="moveBy">

      여러번 클릭 해보면 moveBy는
      상대적인 위치 이동을 한다

    • resizeBy() 메소드

      윈도우의 크기를 상대적인 길이만큼 바꾼다.

      resizeBy(가로길이,세로길이)

    • resizeTo() 메소드

      윈도우의 크기를 절대적인 길이만큼 바꾼다.

      resizeTo(가로길이,세로길이)

      예제12 실행화면
      <script>
      function inone() {
      window.resizeBy(10,10);
      }
      function outone() {
      window.resizeBy(-10,-10);
      }
      function inone1() {
      window.resizeBy(10,10);
      }
      function outone1() {
      window.resizeBy(-10,-10);
      }
      </script>
      <input type="button" value="윈도우확대(by)" onclick="inone()">
      <input type="button" value="윈도우축소(by)" onclick="outone()">
      <input type="button" value="윈도우확대(to)" onclick="inone1()">
      <input type="button" value="윈도우축소(to)" onclick="outone1()">
      <INPUT onclick="inone()" type="button" value="윈도우확대(by)"> <INPUT onclick="outone()" type="button" value="윈도우축소(by)">

      <INPUT onclick="inone1()" type="button" value="윈도우확대(to)"> <INPUT onclick="outone1()" type="button" value="윈도우축소(to)">

    • scrollBy() 메소드

      상대적인 크기만큼 윈도우를 스크롤시킨다.

      scrollBy(수평길이,수직길이)

    • scrollTo() 메소드

      절대적인 크기만큼 윈도우를 스크롤시킨다.

      scrollBy(x,y)

      x:가로 좌표값이 x가 되도록 스크롤
      y:세로 좌표값이 y가 되도록 스크롤

      예제13 실행화면
      <input type=button value="scrollBy" onclick='window.scrollBy(0,-400)'>
      <input type=button value="scrollTo" onclick='window.scrollTo(0,300)'>
      <INPUT onclick="window.scrollBy(0,-400)" type="button" value="scrollBy">
      <INPUT onclick="window.scrollTo(0,300)" type="button" value="scrollTo">


+ Recent posts