프로그램

[스크랩] form 태그 처리법

고요한하늘... 2005. 5. 25. 01:20

5.10 radio button tag & radio객체

  5.10.1 radio button만들기     

 

    <input type="radio" name="group_name" [checked] [onClick="event_handler"]>라디오버튼에 나타나는 문자열

     

    속성

    설명

    type

    "radio"

    name

    라디오 버튼 이름 지정, 자바스크립트에서 지정할 때 사용

    value

    라디오 버튼에 할당하고 싶은 값 지정

    checked

    라디오 버튼을 선택된 상태로 만듬

    onClick

    라디오 버튼을 클릭하는 순간 실행되는 이벤트 헨들러

 

 예)

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    </HEAD>

    <BODY>

    <H1> 컴퓨터 선택 </H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

    <OL>

    <LI><INPUT TYPE="radio" NAME="com" VALUE="personal" CHECKED> 개인용 컴퓨터

      <OL>

      <LI><INPUT TYPE="radio" NAME="pc" VALUE="386"> 386 컴퓨터

      <LI><INPUT TYPE="radio" NAME="pc" VALUE="486"> 486 컴퓨터

      <LI><INPUT TYPE="radio" NAME="pc" VALUE="펜티엄" CHECKED> 펜티엄 컴퓨터

      <LI><INPUT TYPE="radio" NAME="pc" VALUE="펜티엄II" > 펜티엄II 컴퓨터

      </OL>

    <LI><INPUT TYPE="radio" NAME="com" VALUE="workstation"> 워크스테이션

      <OL>

      <LI><INPUT TYPE="radio" NAME="work" VALUE="digital" checked> Digital

      <LI><INPUT TYPE="radio" NAME="work" VALUE="hp"> HP

      <LI><INPUT TYPE="radio" NAME="work" VALUE="sun"> SUN

      <LI><INPUT TYPE="radio" NAME="work" VALUE="SGI"> Silicon Graphics

      </OL>

    </OL>

    <input type="submit">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

 

  5.10.2  radio 객체    

     

    radio 객체

    특 성

    name

    라디오 버튼의 이름

    value

    라디오 버튼에 할당하고 싶은 값

    length

    그룹 안에 포함되어 있는 라디오 버튼의 수

    checked

    라디오 버튼이 체크되었는지의 여부

    defaultChecked

    라디오 버튼이 처음 체크되었는지의 여부

    type

    <input> tag에서 type에 입력된 값("radio")

    메소드

    click()

    라디오 버튼을 click하는 메소드

    이벤트헨들러

    onClick

    라디오 버튼을 click하는 순간 실행되는 event handler

     

    예)

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function findSelected(form) {

        for(var i = 0; i < form.drive.length; i++) {

          if(form.drive[i].checked == true) {

            alert(form.drive[i].value + " 드라이브가 선택되었습니다.")

          }

        }

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <H1> 드라이브 선택 </H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <INPUT TYPE="radio" NAME="drive" VALUE="A" CHECKED> A 드라이브<BR>

      <INPUT TYPE="radio" NAME="drive" VALUE="B"> B 드라이브<BR>

      <INPUT TYPE="radio" NAME="drive" VALUE="C"> C 드라이브<BR>

      <INPUT TYPE="radio" NAME="drive" VALUE="D"> D 드라이브<P>

      <INPUT TYPE="button" VALUE="Check" onClick="findSelected(this.form)">

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

 

    예)

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function change(rad) {

        document.bgColor = rad.value

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <H1> 배경색 바꾸기 </H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <INPUT TYPE="radio" NAME="color" VALUE="white" onClick="change(this)"> 흰색<BR>

      <INPUT TYPE="radio" NAME="color" VALUE="yellow" onClick="change(this)"> 노란색<BR>

      <INPUT TYPE="radio" NAME="color" VALUE="green" onClick="change(this)" CHECKED> 녹색<BR>

      <INPUT TYPE="radio" NAME="color" VALUE="blue" onClick="change(this)"> 파란색<P>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    <html>
    <head>
    <title>자바스크립트 테스트</title>
    <SCRIPT LANGUAGE="JavaScript">
        <!--
        function change(    form) {
            for(var i = 0; i <     form.color.length; i++) {
                if(    form.color[i].checked == true) {
                         document.bgColor = form.color[i].value
                }
            }
        }
        // 자바스크립트 끝 -->
    </SCRIPT></head>
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <h1>배경색 바꾸기 </h1>
    <form method="get" action="http://peter.yonsei.ac.kr/cgi-bin/query">
    <input type="radio" name="color" value="white" onclick="change(    this.form)"> 흰색<br>
    <input type="radio" name="color" value="yellow" onclick="change(    this.form)"> 노란색<br> <input type="radio" name="color" value="green" checked onclick="change(this.form)">녹색<br>
    <input type="radio" name="color" value="blue" onclick="change(    this.form)">파란색</p>
    <p><input type="submit"></p>
    </form>
    </body>
    </html>

    화면 보기

 

  5.11 list box tag & select객체 

    5.11.1 리스트박스 만들기

     

    <select name="name"

           [size="num"] [MULTIPLE]

           [onFocus="event_handler"]

           [onBlur="event handler"]

           [onChange="event handler"]

         <option [SELECTED] [value="value"]>    목록문자열

         [<option [SELECTED] [value="value"]>  목록문자열 ]

         [<option [SELECTED] [value="value"]>  목록문자열 ]

         ......

    </select>

     

    select tag 속성

    속     성

    설       명

    name

    리스트 박스의 이름 지정. 자바스크립트에서 지정할 때 사용

    size

    리스크 박스에서 밖으로 보이고 싶은 목록의 수

    multiple

    리스트 박스에서 하나 이상 선택할 것인지 지정

    onFocus

    마우스나 텝키로 리스트 박스를 선택할 때 발생하는 이벤트 헨들러

    onBlur

    리스트 박스에 있는 포커스를 없어지게 할 때 발생하는 이벤트 헨들러

    onChange

    리스트 박스에서 다른 묵록을 선택할 때 발생하는 이벤트 헨들러

     

    option tag 속성

    속     성

    설        명

    value

    리스트 박스의 목록에 설정하고 싶은 값 지정

    selected

    현재 목록이 선택된 상태로 만들고 싶을 때

     

     

    <HTML>

    <HEAD>

    <TITLE>리스트 박스</TITLE>

    </HEAD>

    <BODY>

    <H1> 좋아하는 동물을 선택하시요.</H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <SELECT NAME="animal">

        <OPTION> 개

        <OPTION> 고양이

        <OPTION> 말

        <OPTION> 토끼

        <OPTION> 다람쥐

      </SELECT>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>리스트 박스</TITLE>

    </HEAD>

    <BODY>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <H2> 주변기기 종류 </H2><P>

      <SELECT NAME="peripheral" SIZE=3 MULTIPLE>

        <OPTION VALUE="cdrom"> CD-ROM 드라이브

        <OPTION VALUE="printer"> 프린터

        <OPTION VALUE="sound"> 사운드 카드

        <OPTION VALUE="scanner"> 스캐너

        <OPTION VALUE="modem"> 모뎀

      </SELECT>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>리스트 박스</TITLE>

    </HEAD>

    <BODY>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <H2> 주변기기 종류 </H2><P>

      <SELECT NAME="peripheral" SIZE=5 MULTIPLE>

        <OPTION VALUE="printer" SELECTED> 프린터

        <OPTION VALUE="cdrom"> CD-ROM 드라이브

        <OPTION VALUE="mouse" SELECTED> 마우스

        <OPTION VALUE="sound"> 사운드 카드

        <OPTION VALUE="scanner"> 스캐너

        <OPTION VALUE="mpeg"> MPEG 보드

        <OPTION VALUE="stick"> 조이스틱

      </SELECT>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

     

    화면 보기

 

5.11.2 select 객체의 특성

     

    select 객체

    특  성

    name

    리스트 박스의 이름

    length

    리스트 박스에 포함된 목록의 수

    selectedIndex

    리스트 박스에서 현재 선택된 목록의 인덱스(0,1,2..)

    options

    리스트 박스에 포함된 목록 정보의 배열

    options[i].index

    각 목록의 인덱스

    options[i].text

    각 목록의 문자열(수정 가능)

    options[i].value

    각 목록에 할당되어 있는 값

    options[i].selected

    각 목록이 현재 선택되어 있는지 여부(true, false)

    options[i].defaultSelected

    각 목록이 처음 선택되어 있는지의 여부

    options[i].prototype

    옵션 메뉴에 새로운 특성을 만들기 위한 것

    type

    type에 입력된 값("select")

    메소드

    없음

     

    이벤트헨들러

    onChange

    다른 목록을 선택했을 때 발생하는 이벤트 헨들러

     

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function selectCom(form) {

        alert("당신은 " + form.com.selectedIndex + "번째를 선택했습니다.")

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <H1> 컴퓨터 선택 </H1><P>

      <SELECT NAME="com" SIZE=3>

        <OPTION VALUE="XT" SELECTED> XT 컴퓨터

        <OPTION VALUE="AT"> AT 컴퓨터

        <OPTION VALUE="386"> 386 컴퓨터

        <OPTION VALUE="486"> 486 컴퓨터

        <OPTION VALUE="펜티엄"> 펜티엄 컴퓨터

      </SELECT><P>

      <INPUT TYPE="button" VALUE="선택 결과" onClick="selectCom(this.form)">

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function selectCom(form) {

        alert(form.com.options[form.com.selectedIndex].text)

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <H1> 컴퓨터 선택 </H1><P>

      <SELECT NAME="com" SIZE=3>

        <OPTION VALUE="XT" SELECTED> XT 컴퓨터

        <OPTION VALUE="AT"> AT 컴퓨터

        <OPTION VALUE="386"> 386 컴퓨터

        <OPTION VALUE="486"> 486 컴퓨터

        <OPTION VALUE="펜티엄"> 펜티엄 컴퓨터

      </SELECT><P>

      <INPUT TYPE="button" VALUE="목록 정보" onClick="selectCom(this.form)"><BR>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function selectCom(form) {

        var str = "선택 : "

        for(i = 0; i < form.com.length; i++) {

          if(form.com.options[i].selected == true) {

            str += form.com.options[i].text + "\n"

          }

        }

        alert(str)

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <H1> 컴퓨터 선택 </H1><P>

      <SELECT NAME="com" SIZE=5 MULTIPLE>

        <OPTION VALUE="XT" SELECTED> XT 컴퓨터

        <OPTION VALUE="AT"> AT 컴퓨터

        <OPTION VALUE="386"> 386 컴퓨터

        <OPTION VALUE="486"> 486 컴퓨터

        <OPTION VALUE="펜티엄"> 펜티엄 컴퓨터

      </SELECT><P>

      <INPUT TYPE="button" VALUE="선택 결과" onClick="selectCom(this.form)"><BR>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function change(form) {

        document.bgColor = form.color.options[form.color.selectedIndex].value

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <H1> 배경색 바꾸기 </H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <SELECT NAME="color" SIZE=5 onChange=change(this.form)>

        <OPTION VALUE="white" SELECTED> 흰색

        <OPTION VALUE="black"> 검은색

        <OPTION VALUE="green"> 녹색

        <OPTION VALUE="blue"> 파란색

        <OPTION VALUE="yellow"> 노란색

      </SELECT>

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function appendOption1(form) {

        var option1 = new Option("Option1", "1st_option", true)

        form.test_select.options[1] = option1

      }

      function appendOption2(form) {

        var option2 = new Option("Option2", "1st_option")

        form.test_select.options[2] = option2

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <H1> 옵션 메뉴 추가 </H1><P>

    <FORM ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <SELECT NAME="test_select" SIZE=5>

        <OPTION VALUE="option_existed"> Option0

      </SELECT><P>

      <INPUT TYPE="button" VALUE="append Option1" onClick="appendOption1(this.form)">

      <INPUT TYPE="button" VALUE="append Option2" onClick="appendOption2(this.form)">

              <INPUT TYPE="SUBMIT">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

     

    <HEAD>

    <TITLE>TV Networks</TITLE>

    </HEAD>

    <BODY BGCOLOR="#FFFFFF">

    <script language="JavaScript">

      <!--

      function go_to_station(){

      if (document.stationform.stationselect.options[0].selected){

        window.location.href = "http://www.abctelevision.com";}

      else if (document.stationform.stationselect.options[1].selected)

        { window.location.href = "http://www.cbs.com";}

      else if (document.stationform.stationselect.options[2].selected)

        { window.location.href = "http://www.nbc.com";}

      else if (document.stationform.stationselect.options[3].selected)

        { window.location.href = "http://www.foxnetwork.com";}

      else if (document.stationform.stationselect.options[4].selected)

        { window.location.href = "http://www.filmzone.com/SpaceGhost/cartoonnet.html";}

      else if (document.stationform.stationselect.options[5].selected)

        { window.location.href = "http://www.discovery.com";}

      else if (document.stationform.stationselect.options[6].selected)

        { window.location.href = "http://www.cs.brandeis.com";}

      else if (document.stationform.stationselect.options[7].selected)

        { window.location.href = "http://www.qvc.com";}

      else if (document.stationform.stationselect.options[8].selected)

        { window.location.href = "http://www.historychannel.com";}

      else if (document.stationform.stationselect.options[9].selected)

        { window.location.href = "http://www.mtv.com";}

      else if (document.stationform.stationselect.options[10].selected)

        { window.location.href = "http://www.cnn.com";}

      else if (document.stationform.stationselect.options[11].selected)

        { window.location.href = "http://www.aetv.com";}

      else if (document.stationform.stationselect.options[12].selected)

        { window.location.href = "http://www.amctv.com";}

      else if (document.stationform.stationselect.options[13].selected)

        { window.location.href = "http://www.bravotv.com";}

      else if (document.stationform.stationselect.options[14].selected)

        { window.location.href = "http://www.c-span.org";}

      else if (document.stationform.stationselect.options[15].selected)

        { window.location.href = "http://www.comcentral.com";}

      else if (document.stationform.stationselect.options[16].selected)

        { window.location.href = "http://espnet.sportszone.com";}

      else if (document.stationform.stationselect.options[17].selected)

        { window.location.href = "http://www.fxnetworks.com";}

      else if (document.stationform.stationselect.options[18].selected)

        { window.location.href = "http://www.hbohomevideo.com";}

      else if (document.stationform.stationselect.options[19].selected)

        { window.location.href = "http://www.scifi.com";}

      else if (document.stationform.stationselect.options[20].selected)

        { window.location.href = "http://showtimeonline.com";}

      else if (document.stationform.stationselect.options[21].selected)

        { window.location.href = "http://vh1.com";}

      else if (document.stationform.stationselect.options[22].selected)

        { window.location.href = "http://www.weather.com";}

      else if (document.stationform.stationselect.options[23].selected)

        { window.location.href = "http://www.disneychannel.com";}

      return true;

      }

       

      function textValue(){

        var stationInteger, stationString

        stationInteger=document.stationform.stationselect.selectedIndex

        stationString=document.stationform.stationselect.options[stationInteger].text

        document.stationform.stationtext.value = "Go to " + stationString +"!" }

      //-->

    </script>

     

    </head>

    <h1>National Networks</h1>

    Select a television station from the list to go to it's site

    <form name="stationform" ACTION="http://peter.yonsei.ac.kr/cgi-bin/query" method="get">

      <select name="stationselect" onChange="textValue()" multiple size="5">

        <option>ABC

        <option>CBS

        <option>NBC

        <option>Fox

        <option>Cartoon Network

        <option>Discovery Channel

        <option>Warner Brothers Network

        <option>QVC

        <option>History Channel

        <option>MTV

        <option>CNN

        <option>A&E

        <option>American Movie Classics(AMC)

        <option>Bravo

        <option>C-SPAN

        <option>Comedy Central

        <option>ESPN

        <option>fX

        <option>HBO

        <option>Sci-Fi Channel

        <option>Showtime

        <option>VH-1

        <option>Weather Channel

        <option>Disney Channel

      </select>

      <br><p>

      <input type="button" name="stationbutton" value="Go!" onClick="go_to_station()">

      <p>

      <input type="text" name="stationtext" value="" size="35" maxlength="35">

      <p>

      <input type="submit">

    </form>

    </html>

    화면 보기

     

     

    <html>

    <title>Preview Graphics</title>

    <SCRIPT language="JavaScript">

    function GoBack()

    {

      if (confirm("Go Back to the previous page?"))

      {

        history.back()

      }

    }

    function select_item(name, value) {

      this.name = name;

      this.value = value;

    }

    function get_selection(select_object)

    {

      contents = new select_item();

      for(var i=0;i<select_object.options.length; i++)

        if(select_object.options[i].selected == true)

        {

          contents.name = select_object.options[i].text;

          contents.value = select_object.options[i].value;

        }

      return contents;

    }

    function display_image(formfield)

    {

      selection = get_selection(formfield.imagename);

      myWindow = window.open("", "Preview", "toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=1,resizable=1, copyhistory=0,width=280, height=350");

      myWindow.document.open();

      myWindow.document.write("<HTML><HEAD>");

      myWindow.document.writｅ("<TITLE>Preview</TITLE>");

      myWindow.document.writｅ("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");

      myWindow.document.writｅ("<FORM><CENTER><B><FONT SIZE=2>" + selection.name + "</FONT></B> <br>");

      myWindow.document.writｅ("<table border=2> <tr> <td> <IMG " + "SRC = 'http://cybers.yonsei.ac.kr/" + selection.value + "'> </td></tr></table><br>");

      myWindow.document.writｅ("<FORM><INPUT TYPE='button' VALUE='Close' " + onClick = 'window.close()'></FORM>");

      myWindow.document.writｅ("</CENTER>");

      myWindow.document.writｅ("</BODY></HTML>");

      myWindow.document.close();

    }

    </SCRIPT>

    <FORM NAME="previewForm"><FONT size=3>

    <CENTER>

    리스트 박스에서 미리불 그림을 선택하고 버튼을 누르면 새로운 창이뜨면서 그림이 나타남.<br>

    <HR color="red"><CENTER><TABLE BORDER="5" CELLPADDING="3"><TD>

    <FORM>

    <SELECT NAME="imagename">
                <option value="images/yslogo.gif">전산교육원 Logo</option>
                <option value="images/cybers_sky_blue.jpg">전산교육원 Title</option>
                <option value="images/education.gif">전산교육과정 text</option>
                <option value="images/gameschool.gif">게임스쿨과정 text</option>
    </SELECT>

    <INPUT type=button value="Preview Image" onClick="display_image(this.form)">

    </TABLE></CENTER> </FORM>

    </b>

    </html>

    화면 보기

     

     

    <html>

    <HEAD>

    <TITLE>Pull Down Surfing</TITLE>

    <script language="JavaScript">

    function surfto(form)

    {

      var myindex=form.dest.selectedIndex

      window.open(form.dest.options[myindex].value,"main","");

    }

    </script><br>

    </HEAD>

    <BODY BGCOLOR="FFFFFF">

    <CENTER>

    <FORM NAME="myform">

    <SELECT NAME="dest" SIZE=1>

      <OPTION SELECTED VALUE="">---------- A Simple Menu -----------

      <OPTION VALUE="http://www.yahoo.co.kr">야후

      <OPTION VALUE="http://www.lycos.com">라이코스

      <OPTION VALUE="http://www.chosun.com">조선일보

      <OPTION VALUE="http://www.yonsei.ac.kr">연세대학교

      <OPTION VALUE="ftp://ftp.yonsei.ac.kr">anonymous ftp

    </SELECT>

    <P>

      <INPUT TYPE="BUTTON" VALUE="Pull Down Surfing!" onClick="surfto(this.form)">

    </FORM>

    </CENTER>

    </html>

    화면 보기

     

    예) List box로 메뉴 만들기

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    </HEAD>

      <!-- 좌우 두 개로 프레임을 나눔 -->

      <FRAMESET COLS="30%, 70%">

        <!-- 풀다운 메뉴를 보여줄 프레임 -->

        <FRAME SRC="PULL1.HTM">

        <FRAME SRC="about:blank" NAME="result">

      </FRAMESET>

    </HTML>

    화면보기

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      function change(form) {

      // 인덱스 0번은 풀다운 메뉴 제목

      if(form.url.selectedIndex != 0)

        parent.result.location = form.url.options[form.url.selectedIndex].value

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM>

      <SELECT NAME="url" SIZE=1 onChange=change(this.form)>

        <OPTION SELECTED> 검색 서비스 선택

        <OPTION VALUE="http://www.yahoo.com"> 야후 서비스

        <OPTION VALUE="http://www.altavista.digital.com"> 알타비스타 서비스

        <OPTION VALUE="http://www.lycos.com"> 라이코스 서비스

        <OPTION VALUE="http://simmany.chollian.net"> 심마니 서비스

      </SELECT>

    </FORM>

    </BODY>

    </HTML>

     

     

    *브라우져 상태선에 메시지 스트롤 시키기

    <HTML>

    <HEAD>

    <TITLE>자바스크립트 테스트</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

      <!--

      // 상태선에 보여줄 메시지, 여기만 자신이 원하는 메시지로 수정하면 된다.

      var msg = "Welcome to My Homepage... Welcome to My Homepage..."

      // 메시지 제일 앞에 붙혀줄 빈 칸의 수

      var space = 170

      // setTimeout() 메소드의 리턴값

      var timer_id = null

      // 현재 상태선에 메시지 스크롤이 일어나는지의 여부를 보여준다.

      var running_flag = false

      // 스크롤 시간 간격

      var waiting_time = 30

      // 출력 메시지 만들기 : 메시지 앞에 빈칸을 넣는 것은 스크롤이

      // 오른쪽에서 시작되는듯한 효과를 주기 위한 것.

      for(i=0; i<space; i++)

      msg = " " + msg

       

      // 메시지를 상태선에 보여주는 함수

      function scrollStatus() {

        // 현재 msg 문자열 중 처음부터 170번째까지 문자까지만

        // 상태선에서 보여준다.

        window.status = msg.substring(0, 169)

        // msg 문자열의 첫 번째 문자를 제일 뒤로 보낸다.

        msg = msg.substring(1, msg.length) + msg.substring(0, 1)

        // waiting_time 후에 scrollStatus() 함수 실행되도록 ...

        timer_id = setTimeout("scrollStatus()", waiting_time)

        running_flag = true

      }

      // 메시지 스크롤을 중지시키는 함수

      function stopScroll (){

        // 현재 상태선에 스크롤이 될 때에만 clearTimeout() 메소드 사용

        if(running_flag)

          clearTimeout(timer_id)

        running_flag = false

        // 스크롤이 중지되었으니 상태선을 지운다.

        window.status = " "

      }

      // 메시지 스크롤을 시작시키는 함수

      function startScroll() {

      // 메시지 스크롤을 확실히 끝낸다.

        stopScroll()

      // 메시지 스크롤 시작

        scrollStatus()

      }

      // 자바스크립트 끝 -->

    </SCRIPT>

    </HEAD>

    <BODY onLoad="startScroll()">

    <H2> 브라우저 상태선에 메시지 스크롤시키기 </H2> <P>

    <FORM NAME="clock_form">

      <INPUT TYPE="button" VALUE="스크롤 시작" onClick="startScroll()">

      <INPUT TYPE="button" VALUE="스크롤 중지" onClick="stopScroll()">

    </FORM>

    </BODY>

    </HTML>

    화면 보기

     

 

 
가져온 곳: [필요한 정보 모으기..]  글쓴이: 김응진 바로 가기
 
스크랩 해갑니다. 고맙습니다.

'프로그램' 카테고리의 다른 글

valgrind  (0) 2005.10.18
ctags 설치및 사용법(펌)  (0) 2005.07.12
오탈자 교정  (0) 2005.05.04
[스크랩] [스크랩] outlook의 편지함 데이터가 2G가 넘어 문제가생긴경우...  (0) 2005.04.20
한글이 안써질때  (0) 2005.03.23

'프로그램'의 다른글

  • 현재글[스크랩] form 태그 처리법

관련글

티스토리툴바