반응형
parseInt()를 사용시에 변환값으로 "07"과 같이 "0"으로 시작된 숫자를 변환할 경우 8진수로 변환처리하여
원하는 결과와 다른 결과를 리턴하게 된다.

javascript 엔진은 첫번째 스트링이 0x로 시작하면 16진수로, 0으로 시작하면 8진수로 가정하기 때문이다.

parseInt함수의 syntax
 parseInt(string[, radix])
  - string: 정수로 바꿀 대상 문자열
  - radix: 문자열을 바꿀때 사용할 기수(optional)
  - returns: 문자열을 parsing한 정수값(10진수) 또는 NaN

10진수인 경우에는 반드시 두번째 매개변수로 parseInt("07",10) 을 넣어줌으로서 명시적으로 10진수 변환

이런 소소한 실수로 인해 원인모를 버그로 고생하지 않길 바란다.

 var strNum = "07";
parseInt(strNum, 10);  //명시적으로 10진수 변환이란걸 지정하도록 하자.  
반응형
아래 자바스크립트는 드림위버에서 자동으로 생성시켜 주는 부분이다.
롤오버 이미지 관련 소스인데 웹사이트에 보면 흔히 있는 것을 볼 수 있다.
 

MM_swapImgRestore() : 원래 이미지로 되돌림.
MM_preloadImages() : 이미지를 미리 로딩해 놓음 (이미지를 바꿔줄때 속도를 빠르게 하기 위해서입니다)
MM_findObj(n, d) : 특정 개체를 찾기 위한 함수
MM_swapImage() : 이미지를 다른걸로 대체.


이를 다른 방법으로 교체하기 위해 아래와 같은 방법으로 변경하면 될듯 하다.^^




반응형



반응형

문서객체모델(Document Object Model, DOM)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스
문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 프로그램에서 접근할수 있는 방법 제공

DOM 노드의 유형
1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수

다른 노드 유형들도 많이 있지만 주로 이 네가지 유형을 다루기 때문에 예시 하지 않는다.

nodeType 속성
DOM 노드 유형에 대해 상수로 정의 되어 있으므로 모든 노드에서 사용할수 있는 nodeType 속성을
사용하여 위 상수와 비교 함으로서 노드 타입을 알수 있다.


Internet Explorer는 자바스크립트에서 Node 상수를 사용할때 에러를 보고 한다.
Internet Explorer 7.0부터 이러한 문제를 정정했다 하지만 보편적으로 사용하는 6.0에서는 정상작동 하지 않는다.
따라서 Node 사용을 피해야 할것이다. 그냥 이런 것이 있다고만 알아 두도록 하자.

반응형

페이지 로딩시 실행될 스크립트 선언시 대부분 <body onload="함수명();">  이렇게 작성하는데

브라우져별로 차이가 있어 정상작동 하지 않는 경우도 있으니 아래 코드처럼 작성하도록 하자.

반응형
출처 : www.taeyo.net

부모 페이지 자바 스크립트
function reSize()
{
       var ParentFrame       =   papermain.document.body;
       var ContentFrame   =   document.all["papermain"];
       ContentFrame.style.height = ParentFrame.scrollHeight + (ParentFrame.offsetHeight - 
ParentFrame.clientHeight);
      ContentFrame.style.width = ParentFrame.scrollWidth + (ParentFrame.offsetWidth - 
ParentFrame.clientWidth);
 
   
}
 
아이프레임 안의 페이지의 자바 스크립트(제일 하단부에 넣으세요)
<script>
   parent.reSize();
</script>
 

이렇게 아이프레임을 정했을때..
<IFRAME name=papermain src="post/list.asp?blogid=<%=blogID%>" 
            frameBorder=0 width=590 scrolling=no height=1024></IFRAME>


반응형

' 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|작성자 붉은매


+ Recent posts