?? ???? (Javascript) by HC120830211958

VIEWS: 6 PAGES: 104

									   자바 스크립트
브라우저객체와 이벤트처리

    류승택
    2004. 6




                1
지난 주 정리

                       브라우저          Form
  객체      내장객체                                   실전예제
                       내장객체         관련객체
 객체의 개념   배열객체         window객체     Form객체
 객체의 사용   String객체     document객체   이벤트 핸들러
          Date객체       links객체      text객체
          Math객체       images객체     button객체
          Function객체   location객체   reset객체
          Number객체     history객체    password객체
          screen객체     frame객체      radio객체
                                    checkbox객체
                                    select객체
                                    textarea객체
                                    submit객체
                                    hidden객체




                                                        2
오늘 배울 내용

•   이벤트 핸들러
•   브라우저객체의 계층구조
•   window객체
•   document객체
•   anchor객체
•   links객체
•   images객체
•   location객체
•   history객체
•   frame객체




                   3
이벤트 핸들러 [1]

• 이벤트(Event)
  – 사용자가 발생시키는 사건
     • 키 입력, 마우스 클릭 등
  – HTML문서의 동작에 의해 발생하는 사건
     • Html문서 실행/종료 등


• 이벤트 핸들러(Event Handler)
  – 이벤트 발생시 이를 처리하기 위해 동작하는 프로그램




                                   4
이벤트 핸들러 [2]

       이벤트     이벤트핸들러                 핸들러 동작 발생 이유

Click        onClick       하이퍼링크/버튼 등을 클릭

Focus        onFocus       마우스나 탭키로 포커스 이동

Blur         onBlur        포커스를 잃을 때 동작

Change       onChange      text/textarea에서 사용자가 내용 변경

Select       onSelect      text/textarea에서 내용 선택

Load         onLoad        Html 문서가 실행될 때 발생

Unload       onUnload      Html 문서가 종료될 때 발생

MouseOver    onMouseOver   하이퍼링크로 마우스가 위치할 때 발생

MouseOut     onMouseOut    하이퍼링크에서 마우스가 떠날 때 발생
                                                        5
이벤트 핸들러 [3]

    이벤트      이벤트핸들러                  핸들러 동작 발생 이유

Mousedown   onMousedown   마우스로 클릭

Mouseup     onMouseup     마우스로 클릭했다가 떼었을 경우

submit      onsubmit      폼의 자료 전송

reset       onReset       폼의 리셋 버튼 클릭

Abort       onAbort       이미지 적재중 멈춤 버튼으로 취소

Keydown     onKeydown     키보드를 눌렀을 경우

Keypress    onKeypress    키보드를 누르고 있을 경우

Keyup       onKeyup       키보드를 눌렀다 떼었을 경우



                                                    6
이벤트 핸들러 [4]

• 이벤트핸들러의 동작 지정
  – <TAG 이벤트핸들러=‘자바스크립트 명령이나 함수’>



 <INPUT type=‘button’ value=‘더하기’ onClick=‘add()’>

 <BODY onLoad=“window.defaultStatus=‘상태선의 초기메시지’;”>




                                                      7
브라우저 객체의 계층구조
                             Textarea
Window    Frame     Layer      Text
                     Link    FileUpload
         document
                    Image    Password
         Location
                    Area      Hidden

         History    Anchor    Submit

                    Applet     Reset

                    Plugin     Radio

                    Form     Checkbox
                              Button
                              Select      Option
                                                   8
window 객체 [1]

•    웹 브라우저를 나타내는 최상위 객체


             속성                          기능

    status          상태표시줄에 문자열 출력

    defaultStatus   status에 값이 없을 때 표시되는 문자열

    self            window객체 자신을 가리키는 속성

    parent          프레임 사용시 상위 프레임 지시

    top             프레임 사용시 최상위 프레임 지시

    frames          프레임 사용시 배열로 구성, frames[0], frames[1],…

    opener          open()메소드로 윈도우를 연 문서가 있는 윈도우

                                                             9
window 객체 [2]

          메소드                      기능


open()           현재 브라우저와 동일한 브라우저 생성


close()          open()메소드로 생성한 윈도우 제거




alert()
confirm()
prompt()
                 내장함수
setTimeout()
setInterval()
clearTimeout()




                                         10
window 객체 [3]

   이벤트핸들러                    기능


onLoad      HTML 문서 실행시 동작


onUnload    HTML 문서 종료시 동작


onError     브라우저가 문서를 읽던 중 오류발생시 동작


onFocus     현재 브라우저가 포커스를 가질 경우 동작


onBlur      현재 브라우저가 포커스를 읽을 경우 동작




                                      11
window 객체 [4]
• onLoad/onUnload 사용 예제

 <HTML>
 <HEAD>
 <TITLE> 예제 10-1 </TITLE>
 </HEAD>

 <BODY onLoad="alert('홈페이지 방문을 환영합니다.')"
      onUnload="alert('안녕히가세요')” >

 onLoad시험 예제입니다.

 </BODY>
 </HTML>




                                           12
실습 [10-1]

• window객체의 onFocus와 onBlur 이벤트핸들러 발생시 메시지를
  출력하는 프로그램을 작성하라.




                                              13
window 객체 [5]
• defaultStatus/status 사용예제

 <HTML>
 <HEAD>
 <TITLE> 예제 10-2 </TITLE>
 </HEAD>
 <BODY onLoad="window.defaultStatus='초기메시지입니다'">
 <a href='http://kr.yahoo.com'
   onMouseOver="window.status='야후로 이동합니다.';return true;">
  야후</a>
  <br>
 <a href='http://www.naver.com'
   onMouseOver="window.status='네이버로 이동합니다.';return true;">
  네이버</a>
 </BODY>
 </HTML>




                                                             14
window 객체 [6]

• open() 메소드 사용방법
  open(“URL”, “윈도우이름”, [“브라우저 구성요소”])
     구성요소                              기    능

  toolbar       toolbar의 표시 유무 결정(yes/no)

  menubar       menubar의 표시 유무 결정(yes/no)

  location      URL 주소 입력장의 표시 유무 결정(yes/no)

  directories   디렉토리의 표시 유무 결정(yes/no)

  status        상태바의 표시 유무 결정(yes/no)

  scrollbars    스크롤바의 표시 유무 결정(yes/no)

  resizable     크기 조절 유무 결정(yes/no)

  width         브라우저의 너비 지정(pixel 수)

  height        브라우저의 높이 지정(pixel 수)

                                                15
window 객체 [7]

<HTML>
<HEAD>
<TITLE> 예제 10-3 </TITLE>
<script language='javascript'>
function makeWin() {
   window.open(“http://www.chungkang.ac.kr", "subwin")
}
</script>
</HEAD>
<BODY>
<form>
   <input type='button' value='subwin 생성' onClick='makeWin()'>
</form>
</BODY>
</HTML>




                                                                 16
window 객체 [8]

<HTML>
<HEAD>
<TITLE> 예제 10-4 </TITLE>
<script language='javascript'>
function makeWin() {
   window.open("http://www.chungkang.ac.kr", "subwin",
           "toolbar=no, menubar=no")
}
</script>
</HEAD>
<BODY>
<form>
<input type='button' value='subwin 생성2' onClick='makeWin()'>
</form>
</BODY>
</HTML>




                                                               17
실습 [10-2]

• 브라우저의 크기를 300*400 으로 지정하고 크기 조절이 안되도록
  윈도를 생성하는 프로그램을 작성하라.
  – toolbar,menubar도 나오지 않는다.




                                          18
window 객체 [9]

• close() 메소드
  – open() 메소드의 리턴값을 사용하여 윈도우 제거


  a = open(“URL”, “윈도우이름”, [“브라우저 구성요소”])
  a.close()




                                            19
window 객체 [10]

<HTML>
<HEAD>
<TITLE> 예제 10-4 </TITLE>
<script language='javascript'>
function makeWin() {
   a = window.open("http://www.chungkang.ac.kr", "subwin")
}
function closeWin() {
   a.close()
}
</script>
</HEAD>
<BODY>
<form>
<input type='button' value='subwin 생성' onClick='makeWin()'>
<input type='button' value='subwin 닫기' onClick='closeWin()'>
</form>
</BODY>
</HTML>




                                                               20
document 객체[1]

•    window 객체의 자식
•    문서의 타이틀, 배경색, 폼, 링크, 애플릿 등과 같은 문서의 내용물들을
     직접적으로 처리

            속성                         기 능

    title          <title> 태그에 기술된 문서의 제목

    location       현재 브라우저에 나타난 문서의 URL

    lastModified   문서를 마지막으로 수정한 날짜를 문자열로 표시

    referrer       이전 문서의 URL

    bgColor        문서의 배경색

    fgColor        문서의 글자색

    linkColor      문서에서 링크를 표시하는 색

    alinkColor     링크를 클릭했을 때 표시하는 색

    vlinkColor     이전에 방문했던 링크를 표시하는 색
                                                21
document 객체[2]

<HTML>
<HEAD>
<TITLE> 예제 10-4 </TITLE>
<script language='javascript'>
function printDocu() {
   msg = "Title : " + document.title + "\n";
    msg = msg + "URL : " + document.location;
    alert(msg);
}
</script>
</HEAD>
<BODY>
<form>
<input type='button' value='document 정보' onClick='printDocu()'>
</form>
</BODY>
</HTML>




                                                                  22
실습 [10-3]

• document의 나머지 정보도 출력하도록 앞의 예제를 수정하여
  작성하라.

• 버튼을 선택하면 document의 배경색이 바뀌도록 프로그램을
  작성하여라.
  – red, green, blue, yellow…




                                        23
document 객체[3]
• document 객체의 자식 객체들


    속성객체                          기 능

 anchors    문서에 표식으로 지정된 수와 특정 단어정보

 forms      <form> 태그 정보(12주강의)

 links      하이퍼링크의 수와 URL정보

 images     <img> 태그로 생성된 이미지 정보

 applets    자바애플릿 정보

 embeds     플러그인 정보

 cookie파일   쿠키 파일 정보

                                        24
anchors 객체[1]

• <A> 태그의 name 속성
• String 객체의 anchor()메소드


        HTML TAG        String객체              기능

 <A NAME=          문자열.anchor(“#특정단      문서의 특정표식 부분으로
 “#특정단어”>          어”)                   이동할 수 있도록 지정된
 글자</A>                                  책갈피




   속성객체                            기 능

 length        책갈피로 지정된 표식의 수

 name          책갈피로 지정된 표식의 특정 단어

                                                         25
anchors 객체[2]

<BODY>
<li><a href='#yahoo'>야후 사이트</a><br>
<li><a href='#naver'>네이버사이트</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<a name='yahoo'>
야후사이트<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<a name='naver'>
네이버사이트<br>

<script language='javascript'>
msg = '책갈피 수 : ' + document.anchors.length + '\n';
for(a=0; a<document.anchors.length; a++)
  msg = msg + '책갈피 이름 : ' + document.anchors[a].name + '\n';
alert(msg);
</script>
</BODY>




                                                               26
links 객체[1]

• <A> 태그의 href 속성
• String 객체의 link()메소드
       HTML TAG             String객체                기능
 <A HREF=“URL”>       문자열.link(“URL”)         URL로 기술된 특정 문서로
 글자</A>                                       이동




    속성객체                                기 능

 length           하이퍼링크로 지정된 수

 links[0]         links객체의 하이퍼링크로 지정된 URL


                                                            27
links 객체[2]

<BODY>
<li><a href='http://kr.yahoo.com'>야후 사이트</a><br>
<li><a href='http://www.naver.com'>네이버사이트</a>

<script language='javascript'>
msg = 'URL 수 : ' + document.links.length + '\n';
for(a=0; a<document.links.length; a++)
  msg = msg + 'URL이름 : ' + document.links[a] + '\n';
alert(msg);
</script>
</BODY>




                                                       28
실습 [10-4]

• 다음 사이트를 하이퍼링크로 작성하고 links객체를 이용하여
  하이퍼링크 정보를 출력하는 프로그램을 작성하라.
  –   청강문화산업대학 : www.chungkang.ac.kr
  –   문화방송 : www.imbc.com
  –   한국일보 : www.hankooki.com
  –   구글검색 : www.google.com
  –   다나와 : www.danawa.co.kr




                                       29
imges객체[1]

• <IMG> 태그와 관련된 정보 및 동작
                         HTML TAG                            기능
 <IMG name=‘이미지이름’ src=‘URL’                          문서에 이미지 출력
 width=‘ ‘ height=‘ ‘ alt=‘ ‘ border=‘ ‘>



       속성객체                                    기 능

 length              문서에 포함된 이미지 수(document.images.length)

 name                이미지 이름(document.images[x].name)

 src                 URL 정보(document.images[x].src)

 lowsrc              해상도가 낮은 이미지로 표현

 width               이미지의 너비(document.images[x].width)

 height              이미지의 높이(document.images[x].height)

 border              이미지의 테두리(document.images[x].border)

                                                                   30
imges객체[2]

<HEAD>
<TITLE> 예제 10-9 </TITLE>
<script language='javascript'>
function imgInfo() {
   msg = '이미지 수 : ' + document.images.length + '\n';
   for(a=0; a<document.images.length; a++) {
      msg = msg + '이름 : ' + document.images[a].name + '\n';
      msg = msg + 'URL : ' + document.images[a].src + '\n';
      msg = msg + '너비 : ' + document.images[a].width + '\n';
      msg = msg + '높이 : ' + document.images[a].height + '\n';
     }
   alert(msg);
}
</script>
</HEAD>
<BODY>
<img name='작은 딸1' src=lee4.gif>작은 딸 1<br>
<img name='작은 딸2' src=lee5.gif>작은 딸 2<br>
<form>
<input type='button' value='이미지정보' onClick='imgInfo()'>
</form>
</BODY>




                                                                31
실습 [10-5]

• 이미지에 마우스가 올라오면 다른 이미지로 바뀌고 마우스가
  이미지를 벗어나면 원래의 이미지로 돌아오도록 프로그램을
  작성하라.
  – onMouseOver, onMouseOut 이벤트 이용
  – document.images[0].src=‘URL’




                                     32
location객체[1]

• 현재 연결된 브라우저의 URL주소에 관한 정보
       – 새로운 문서의 URL로`` 지정 가능



        속성                      기 능

href           문서의 현재 URL주소

host           URL주소의 호스트 이름과 포트번호

hostname       URL주소의 호스트 이름

protocol       프로토콜 종류

pathname       디렉토리 위치

port           포트 번호

hash           표식(책갈피) 이름

search         검색엔진을 호출할 때 사용하는 방식
                                      33
location객체[2]

     메소드                        기 능

reload()         현재 문서를 다시 읽어오는 기능

replace(‘URL’)   현재 문서를 지정된 URL의 문서로 대체




                                          34
location객체[3]

<BODY>
<H3>Location 객체의 값 출력</H3>
<script language='javascript'>
document.write('현재 URL : ' + location.href + '<br>');
document.write('Protocol : ' + location.protocol+ '<br>');
document.write('경로 : ' + location.pathname);
</script>
</BODY>




                                                             35
실습 [10-6]

• 버튼을 3개 만들고, 각 버튼을 누르면 해당 사이트가 브라우저에
  나타나도록 프로그램을 작성하라.
  –   야후
  –   네이버
  –   엠파스
  –   location.href=‘http://www.naver.com’을 사용




                                                 36
history객체[1]

• 최근에 방문한 브라우저의 URL주소들을 히스토리에 보관



       속성                        기 능

length       히스토리에 저장된 URL의 개수

current      히스토리 목록중 현재 URL을 나타냄

next         히스토리 목록중 다음 URL을 나타냄(Netscape만 사용)

previous     히스토리 목록중 이전 URL을 나타냄(Netscape만 사용)
       메소드                        기 능

 back()      히스토리 목록중 이전 URL로 이동

 forward()   히스토리 목록중 다음 URL로 이동

 go(n)       히스토리 목록중 +/-n으로 지정한 URL로 이동

                                                  37
history객체[2]

• 사용 예
  –   history.length
  –   history.back()
  –   history.forward()
  –   history.go(2)
  –   history.go(-3)




                          38
실습 [10-7]

• ‘다음’과 ‘이전’을 나타내는 버튼을 만들고 이를 클릭하면
  브라우저의 문서가 이전문서나 다음문서로 바뀌도록 히스토리
  기능을 이용하여 프로그램을 작성하라.




                                     39
frame 객체[1]

• window내에 포함된 프레임(자식윈도)에 대한 정보를 제공
• window객체와 동일한 속성과 메소드 제공




                                      40
frame 객체[2]

• FRAME TAG사용법
 <FRAMESET> … </FRAMESET>
 <FRAME> … </FRAME>

 <FRAMESET rows=‘n’ cols=‘n’ border=‘n’>
 <FRAME src=‘URL’ name=‘이름’ marginwidth=‘n’
        marginheight=‘n’ scrolling=‘yes|no|auto’ noresize>
 • name 속성 예약어
 _blank : 새 윈도우를 열고 결과를 표시
 _self : 자신의 프레임에 결과 표시
 _parent : 부모 프레임이나 윈도우에 결과 표시
 _top : 프레임은 사라지고 전체 윈도우에 결과 표시

                                                             41
frame 객체[3]

<HTML>
<HEAD>
<TITLE> frameset </TITLE>
</HEAD>
<FRAMESET rows='30%,*' border='1'>
  <FRAME name='head' src='a.html'>
    <FRAMESET cols='50%,50%' border='1'>
      <FRAME name='left' src='b.html'>
    <FRAME name='right' src='c.html'>
    </FRAMESET>
</FRAMESET>
</HTML>




<BODY bgColor='yellow'>      <BODY bgColor=‘blue'>   <BODY bgColor=‘green'>
<h3>a.html</h3>              <h3>b.html</h3>         <h3>c.html</h3>
</BODY>                      </BODY>                 </BODY>


                                                                              42
frame 객체[4]

• frames 객체
       – frames[0], frames[1], frames[2],…



  속성               기 능                             예

                                 ‘head’프레임이 ‘left’와 ’right’프레임의
parent      부모 프레임
                                 부모프레임

self        자신

top         최상위 프레임




                                                                  43
frame 객체[5]
<BODY bgColor='yellow'>
<h3>a.html</h3>
<script language='javascript'>
parent.document.write('메시지 from left');
</script>
</BODY>




<BODY bgColor='yellow'>
<h3>a.html</h3>
<script language='javascript'>
parent.frames[2].document.write('메시
   지 from left');
</script>
</BODY>


                                          44
폼 관련 객체와 이벤트처리




                 45
오늘 배울 내용은?

                       브라우저          Form          사용자
  객체      내장객체                                     정의객체
                       내장객체         관련객체
 객체의 개념   배열객체         window객체     Form객체
 객체의 사용   String객체     document객체   이벤트 핸들러
          Date객체       links객체      text객체
          Math객체       images객체     button객체       실전예제
          Function객체   location객체   reset객체
          Number객체     history객체    password객체
          screen객체     frame객체      radio객체
                                    checkbox객체
                                    select객체
                                    textarea객체
                                    submit객체
                                    hidden객체
                                    fileUpload객체




                                                          46
Form 관련 객체의 계층구조
                             Textarea
Window    Frame     Layer      Text
                     Link    FileUpload
         document
                    Image    Password
         Location
                    Area      Hidden

         History    Anchor    Submit

                    Applet     Reset

                    Plugin     Radio

                    Form     Checkbox
                              Button
                              Select      Option
                                                   47
<FORM> TAG

• <FORM> Tag 형식

  <FORM
       [name = “form name”]
       [target = “target window”]
       [action = “cgi_url” | “asp_url” | “php_url”]
       [method = “GET” | “POST”]
       [enctype = “MIME_type”]
       [onsubmit = “자바스크립트 명령이나 함수”]
       [onreset = “자바스크립트 명령이나 함수”] >
       …

  </FORM>


                                                      48
FORM 객체 [1]

      action     <form> tag의 action 속성 값

      target     <form> tag의 target 속성 값

 속성   method     <form> tag의 method 속성 값

      encoding   <form> tag의 enctype 속성 값

      elements   <form> tag내의 구성요소를 배열로 저장

      submit()   입력된 데이터를 서버에 전송하는 메소드
메소드
      reset()    입력양식을 reset시키는 메소드

      onsubmit   submit 버튼을 눌렀을 때
이벤트
핸들러
      onreset    reset 버튼을 눌렀을 때

                                             49
FORM 객체 [2]

<BODY>
<form name="test" method="post">
</form>
<script language='javascript'>
document.write("document.test.name = " +
                        document.test.name + "<br>");
document.write("document.test.method = " +
                        document.test.method + "<br>");
</script>
</BODY>




                                                          50
FORM 객체 [3]

<form name="firstform">
<B>forms[0]</B><br>
비밀번호 :
<input type="password" name="pwbox1" size="10">-> element[0]<br>
비밀번호 확인 :
<input type="password" name="pwbox2" size="10">-> element[1] <br>
<input type="button" name="ok_btn" value=" 확 인 ">-> element[2]
</form>
<BR>
<form name="secondform">
<B>forms[1]</B><br>
당신의 성별은? <br>
<input type="radio" name="gender" value="male" checked >남자 ->
    element[0]<br>
<input type="radio" name="gender" value="female" >여자 -> element[1]<br>
</form>




                                                                         51
FORM 객체 [4]
 <SCRIPT LANGUAGE="JavaScript">
 document.write("</H3>첫 번째 폼의 이름과 입력 양식 이름 출력</H3>")
 document.write("document.forms[0].name = " + document.forms[0].name+
    "<br>")
 document.write("document.forms[0].elements[0].name = " +
    document.forms[0].elements[0].name + "<br>")
 document.write("document.forms[0].elements[1].name = " +
    document.forms[0].elements[1].name + "<br>")
 document.write("document.forms[0].elements[2].name = " +
    document.forms[0].elements[2].name + "<br>")

 document.write("</H3>두 번째 폼의 이름과 입력 양식 이름 출력</H3>")
 document.write("document.forms[1].name = " + document.forms[1].name+
    "<br>")
 document.write("document.forms[1].elements[0].name = " +
    document.forms[1].elements[0].name + "<br>")
 document.write("document.forms[1].elements[1].name = " +
    document.forms[1].elements[1].name + "<br>")
 </SCRIPT>




                                                                        52
FORM 객체 [5]




              53
FORM 객체 [6]

• Form객체의 이벤트 핸들러


 <form action=“http://www.domain.com/action.cgi”
       method=“post”
       onsubmit=“input_check()”
       onreset=“reset_check()”>




                                                   54
실습 [12-1]

• 앞의 예제 실행해보기




                55
text 객체 [1]

• text 양식

  <INPUT type=“text”
       [name = “input name”]
       [value = “init value”]
       [size = “number”]
       [maxlength = “number”]
       [onChange = “자바스크립트 명령이나 함수”]
       [onBlur = “자바스크립트 명령이나 함수”]
       [onFocus = “자바스크립트 명령이나 함수”]
       [onselect = “자바스크립트 명령이나 함수”] >




                                         56
text 객체 [2]

      form           text를 포함하고 있는 form 객체

      name           text양식의 이름

 속성   value          text양식에 입력한 값

      defaultValue   처음에 text에 나온 값

      type           INPUT tag에서 type으로 지정한 값

      focus()        text 양식 안으로 커서 이동

메소드   blur()         text 양식 밖으로 커서 이동

      select         text 양식안의 값 선택

      onFocus        text 양식 안으로 커서 이동하면 발생

      onBlur         text 양식 밖으로 커서 이동하면 발생
이벤트
핸들러   onSelect       text 양식안의 값 선택하면 발생

      onChange       text 양식의 값을 변경하였을 때 발생

                                                57
button 객체

• button 양식

  <INPUT type=“button”
       [name = “input name”]
       [value = “value”]
       [onClick = “자바스크립트 명령이나 함수”] >

       form      button을 포함하고 있는 form 객체
       name      button 양식의 이름
  속성
       value     button의 제목
       type      INPUT tag에서 type으로 지정한 값
 메소드   click()   button을 클릭시키는 메소드
 이벤트
       onClick   button을 클릭했을 때 동작하는 이벤트 핸들러
 핸들러



                                               58
text와 button 객체 예제 [1]
<BODY>
문제 : 한일월드컵이 열린 해는 언제인가?<br>
a) 2000년 b) 2001년 c) 2003년 d) 2002년<br>
<form name="test">
답:<input type='text' name='answer'>
<input type='button' value='확인' onClick='sel(this.form)'>
</form>
</BODY>




                                                            59
text와 button 객체 예제 [2]
<script language='javascript'>
function sel(form) {
  var temp = form.answer.value;

   if(temp == '') {
       alert("답을 선택하세요.");
           form.answer.focus();
   }
   else if(temp == 'd' || temp == 'D') {
       alert("정답입니다.");
   }
   else {
     alert("틀렸습니다. 다시 선택하세요.");
           form.answer.select();
           form.answer.focus();
   }
}
</script>




                                           60
reset 객체

• reset 양식

  <INPUT type=“reset”
       [name = “input name”]
       [value = “value”]
       [onClick = “자바스크립트 명령이나 함수”] >

        form      button을 포함하고 있는 form 객체
        name      button 양식의 이름
  속성
        value     button의 제목
        type      INPUT tag에서 type으로 지정한 값
  메소드   click()   button을 클릭시키는 메소드
  이벤트
        onClick   button을 클릭했을 때 동작하는 이벤트 핸들러
  핸들러



                                                61
실습 [12-2]

• text, button, reset을 이용하여 계산기 만들기
  – eval()함수 이용
  – ‘지우기’는 reset이용
  – 홈피의 소스 이용




                                      62
password 객체[1]

• 암호 입력에 사용되는 텍스트 입력양식

 <INPUT type=“password”
      [name = “input name”]
      [value = “value”]
      [size = “number”]
      [maxlength = “number”]
      [onBlur = “자바스크립트 명령이나 함수”]
      [onFocus = “자바스크립트 명령이나 함수”]
 >




                                     63
password 객체[2]

      name           암호 양식의 이름

      value          암호 양식에 입력한 값
 속성
      defaultValue   처음에 value에 지정한 값

      type           INPUT tag에서 type으로 지정한 값

      focus()        암호 양식 안으로 커서 이동

메소드   blur()         암호 양식 밖으로 커서 이동

      select         암호 양식안의 값 선택

이벤트   onFocus        암호 양식 안으로 커서 이동하면 발생
핸들러   onBlur         암호 양식 밖으로 커서 이동하면 발생




                                                64
radio 객체[1]

• radio 양식

  <INPUT type=“radio”
         [name = “group name”]
         [value = “value”]
         [checked]
         [onBlur = “자바스크립트 명령이나 함수”]
         [onFocus = “자바스크립트 명령이나 함수”]
         [onClick = “자바스크립트 명령이나 함수”]
  > radio 버튼 옆의 문자열




                                        65
radio 객체[2]

      form             radio를 포함하고 있는 form 객체

      name             radio 양식의 이름으로 배열로 처리

      value            radio 양식에 할당하고 싶은 값

 속성   length           radio 버튼 수

      checked          radio 버튼이 체크되면 true, 아니면 false

      defaultChecked   처음에 버튼을 체크하였는지 확인

      type             INPUT tag에서 type으로 지정한 값

메소드   click()          radio 버튼을 클릭시키는 메소드

      onClick          radio 버튼을 클릭하면 동작
이벤트   onBlur           radio 버튼에서 밖으로 이동하면 발생
핸들러
      onFocus          radio 버튼으로 위치하면 발생



                                                        66
radio 객체[3]
<script language="JavaScript">
function check_gender(form)
{
  if(form.gender[0].checked == true)
    alert("남성 선택");
  else
    alert("여성선택");
}
</script>



<body>
<form name=“genderform">
당신의 성별은?
<input type="radio" name=“gender" value="male" checked>남자
<input type="radio" name=“gender" value="female">여자
&nbsp;&nbsp;&nbsp;
<input type="button" name="ok_btn" value=" 확 인 "
             onclick="check_gender(this.form)">
</form>
</body>
                                                            67
radio 객체[4]
<script language="JavaScript">
function check(hobby)
 {
    alert("당신의 취미는 " +hobby.value + "이군요.");
  }
</script>


<body>
<form name="hobby_form">
당신의 취미는 무엇입니까?<br>
<input type="radio" name="hobby" value="여행" onclick="check(this)">여행<br>
<input type="radio" name="hobby" value="음악감상" onclick="check(this)">음악감상<br>
<input type="radio" name="hobby" value="영화감상" onclick="check(this)">영화감상<br>
<input type="radio" name="hobby" value="게임" onclick="check(this)">게임<br>
<input type="radio" name="hobby" value="기타" onclick="check(this)">기타<br>
</form>
</body>




                                                                               68
checkbox 객체[1]

• checkbox 양식

  <INPUT type=“checkbox”
        [name = “name”]
        [value = “value”]
        [checked]
        [onBlur = “자바스크립트 명령이나 함수”]
        [onFocus = “자바스크립트 명령이나 함수”]
        [onClick = “자바스크립트 명령이나 함수”]
  > checkbox 옆의 문자열




                                       69
checkbox 객체[2]

      form             checkbox를 포함하고 있는 form 객체

      name             checkbox 양식의 이름으로 배열로 처리

      value            checkbox 양식에 할당하고 싶은 값

 속성   length           checkbox 버튼 수

      checked          checkbox 버튼이 체크되면 true, 아니면 false

      defaultChecked   처음에 버튼을 체크하였는지 확인

      type             INPUT tag에서 type으로 지정한 값

메소드   click()          checkbox 버튼을 클릭시키는 메소드

      onClick          checkbox 버튼을 클릭하면 동작
이벤트   onBlur           checkbox 버튼에서 밖으로 이동하면 발생
핸들러
      onFocus          checkbox 버튼으로 위치하면 발생
                                                           70
checkbox 객체[3]
 <body>
 <form name="hobby_form">
 당신의 취미는 무엇입니까?<br>
 <input type="checkbox" name="hobby" value="여행">여행<br>
 <input type="checkbox" name="hobby" value="음악감상">음악감상<br>
 <input type="checkbox" name="hobby" value="영화감상">영화감상<br>
 <input type="checkbox" name="hobby" value="컴퓨터 게임">컴퓨터 게임<br>
 <input type="checkbox" name="hobby"
  value="기타">기타
 <input type="button" name="ok_btn"
  value=" 확 인 " onclick="check_choice(this.form)">
 </form>
 </body>




                                                                 71
checkbox 객체[4]

<script language="JavaScript">
function check_choice(hobby_form) {
  choice_ok = false;
  hobby_list = " [ 당신이 선택한 취미 ] \n\n "

  for(var i = 0; i < hobby_form.hobby.length; i++) {
      if (hobby_form.hobby[i].checked == true){
          hobby_list = hobby_list + hobby_form.hobby[i].value + "\n "
          choice_ok = true;
      }
  }
  if (choice_ok == true ) {
       alert( hobby_list )
       hobby_form.reset()
  }
  else
      alert(" 먼저 당신의 취미를 선택하고 확인을 눌러 주세요.");
}
</script>




                                                                        72
select & option 객체 [1]

• List Box 생성하는 방법

  <select name=“name”
         [size = “num”]
         [multiple]
         [onBlur = “자바스크립트 명령이나 함수”]
         [onFocus = “자바스크립트 명령이나 함수”]
         [onChange = “자바스크립트 명령이나 함수”]>
     <option [selected][value=“value”]>항목 문자열
     <option [selected][value=“value”]>항목 문자열
         …
     <option [selected][value=“value”]>항목 문자열
  </selece>


                                                73
select & option 객체 [2]

• select 객체

       name            list box 양식의 이름으로 배열로 처리

       length          list box에 포함된 항목의 수

  속성   selectedIndex   list box에서 현재 선택된 항목의 index를 알려주는 속성

                       list box에 구성된 항목들 중 어떤 항목이 선택되어
       selected
                       있는지를 판단하게 해주는 속성
       type            INPUT tag에서 type으로 지정한 값
 이벤트
       onChange        list box에서 다른 항목을 선택할 때 발생
 핸들러




                                                              74
select & option 객체 [3]

<body>
<form name="form">
당신이 좋아하는 게임은?
<select name="game" onchange="check_choice(this.form)">
 <option value="스타크래프트">스타크래프트
 <option value="레인보우 식스">레인보우 식스
 <option value="디아블로">디아블로
 <option value="리니지">리니지
 <option value="포트리스">포트리스
 <option value="한게임고스톱">한게임고스톱
</select>
</form>
</body>




                                                          75
select & option 객체 [4]

<script language="JavaScript">
function check_choice(form)
{
   index = form.game.selectedIndex + 1;
   alert("당신은 " + index +"번째를 선택하셨고 " +
         "그 내용은 \"" + form.game[index-1].value + "\"입니다.");
  }
</script>




                                                              76
select & option 객체 [5]

• option 객체

       options                      항목정보로 배열로 처리

       options[i].index             list box에 포함된 각 항목의 index(0부터)


       options[i].text              각 항목의 문자열로 수정도 가능
  속성

       options[i].value             각 항목에 할당되어 있는 값

       options[i].selected          항목이 선택되어 있는지를 판단

       options[i].defaultselected   selected속성으로 생성된 항목인지 판단




                                                                     77
select & option 객체 [6]

• Listbox에 항목 추가
                         defaultselected
                              속성           selected
                                             속성

 add=new Option(“삼국지”,”삼국지”,false,true);
 form.game.options[form.game.length] = add;

• Listbox의 항목 삭제


                         삭제할 인덱스번호

 form.game.options[index] = null;


                                                      78
select & option 객체 [7]
• Listbox의 항목 수정


                       수정할 인덱스번호


 form.game.options[index].text = “삼국지”;




                                          79
textarea 객체[1]

• text 영역 생성

  <textarea name=“name”
        [rows = “num”]
        [cols = “num”]
        [wrap =“off” | “virtual” | “physical”]
        [onBlur = “자바스크립트 명령이나 함수”]
        [onFocus = “자바스크립트 명령이나 함수”]
        [onChange = “자바스크립트 명령이나 함수”]
        [onselect = “자바스크립트 명령이나 함수”]
  >
  text 영역에 초기에 나타날 문자열
  </textarea>


                                                 80
textarea 객체[2]

      name           textarea양식의 이름

 속성   value          textarea양식에 입력한 값

      defaultValue   처음에 textarea에 나온 값

      focus()        textarea 양식 안으로 커서 이동

메소드   blur()         textarea 양식 밖으로 커서 이동

      select         textarea 양식안의 값 선택

      onFocus        textarea양식 안으로 커서 이동하면 발생

      onBlur         textarea양식 밖으로 커서 이동하면 발생
이벤트
핸들러   onselect       textarea 양식안의 값 선택하면 발생

      onChange       textarea 양식의 값을 변경하였을 때 발생




                                                  81
submit 객체[1]

• submit 버튼

  <INPUT type=“submit”
       [name = “name”]
       [value = “value”]
       [onClick = “자바스크립트 명령이나 함수”] >
        form      button을 포함하고 있는 form 객체
        name      button 양식의 이름
  속성
        value     button의 제목
        type      INPUT tag에서 type으로 지정한 값
  메소드   click()   button을 클릭시키는 메소드
  이벤트
        onClick   button을 클릭했을 때 동작하는 이벤트 핸들러
  핸들러




                                                82
submit 객체[2]
<body>
 <form name="form" method="post"
         action="http://www.domain.com/test.asp" >
 웹서버로 전송할 당신의 이름은?
 <input type="text" name="textbox" size="10"><p>
   <input type="submit" value="웹서버로 데이터 전송하기"
        onclick="msg(this.form)">
  <input type="reset" value=" 이름 지우기">
 </form>
</body>




                                                     83
submit 객체[3]
<script language="JavaScript">
function msg(form)
 {
  send = "[ 웹서버로 데이터를 전송할 자료] \n\n"
  send = send + "텍스트 박스의 name 속성으로 지정한 \""
  send = send + form.textbox.name
  send = send + "과 \" value 속성값인 \" "
  send = send + form.textbox.value + "\"이다."
  alert( send );
 }
</script>




                                               84
Hidden 객체[1]

• 숨겨진 입력 양식

 <INPUT type=“hidden”
      name = “name”
      [value = “value”]
 >
       form           hidden을 포함하고 있는 form 객체
       name           hidden 양식의 이름
  속성   value          hidden 양식의 값
       defaultValue   처음 value속석에 설정된 문자열
       type           INPUT tag에서 type으로 지정한 값




                                                 85
Hidden 객체[2]

<script language="JavaScript">
function msg(form)
 {
  send = "[ 웹서버로 전송할 숨겨진 데이터] \n\n"
  send = send + "hidden 타입의 name 속성으로 지정한 \""
  send = send + form.mode.name
  send = send + "\"와 value 속성값인 \""
  send = send + form.mode.value + "\"이다."
  alert( send );
 }
</script>



<body>
 <form name="form" method="post" action="./test.asp" >
   <input type="hidden" name="mode" value="insert" >
  <input type="submit" value="데이터 전송하기"
      onclick="msg(this.form)">
 </form>
</body>


                                                         86
FileUpload 객체 [1]

• File Upload 양식

  <INPUT type=“file”
       name = “name”
  >




                       87
FileUpload 객체 [2]

      form       FileUpload 양식을 포함하고 있는 form객체

      name       FileUpload 양식의 이름
 속성
      value      FileUpload 양식에 입력한 값

      type       INPUT 태그에서 type에 입력한 값

      focus()    FileUpload 양식 안으로 커서 이동
메소드
      blur()     FileUpload 양식 밖으로 커서 이동

      onFocus    FileUpload 양식 안으로 커서 이동하면 발생

이벤트
      onBlur     FileUpload 양식 밖으로 커서 이동하면 발생
핸들러
      onChange   FileUpload 양식의 값을 변경하였을 때 발생




                                                 88
FileUpload 객체 [3]

<body onload="document.upload_form.mail.focus()">
<form name="upload_form" enctype="multipart/form-data"
   action="www.web.com/upload.asp" method="post"
              onsubmit="return input_ok(this);">
당신의 메일 주소는 ? :
 <input type="text" name="mail" size="15"><br>
upload할 파일이름 :
 <input type="file" name="file_name" size="30"><br>
 <input type="submit" value="보내기">
</form>
</body>




                                                         89
FileUpload 객체 [4]

<script>
function input_ok(form){
 if ( form.mail.value == ""){
   alert("메일 주소를 입력하십시요.");
   form.mail.focus();
   return false;
 }

 if (form.file_name.value == ""){
     alert("파일을 선택하여 주십시요.");
     form.file_name.focus();
     return false;
 }
 alert("당신의 메일 주소는 " + form.mail.value + "이고\n" +
       "업로드할 파일이름은 " + form.file_name.value + "입니다.");
  /*원래는 return true로 하여 웹서버로 전송시켜야 한다.*/
   return false;
}
</script>




                                                         90
사용자정의객체 & 실전예제




                 91
오늘 배울 내용은?

                       브라우저          Form          사용자
  객체      내장객체                                     정의객체
                       내장객체         관련객체
 객체의 개념   배열객체         window객체     Form객체
 객체의 사용   String객체     document객체   이벤트 핸들러
          Date객체       links객체      text객체
          Math객체       images객체     button객체       실전예제
          Function객체   location객체   reset객체
          Number객체     history객체    password객체
          screen객체     frame객체      radio객체
                                    checkbox객체
                                    select객체
                                    textarea객체
                                    submit객체
                                    hidden객체
                                    fileUpload객체




                                                          92
사용자 정의 객체 [1]

• 사용자가 자신의 필요에 따라 객체를 정의하여 사용
  – 생성자 함수를 이용하여 객체 정의
  – 생성자 함수의 이름은 객체의 이름과 동일하게 정의
  – function을 사용하여 정의




                                  93
사용자 정의 객체 [2]

• 학생 객체 정의
  – 속성 : 학번, 이름, 학과


  function Student(num, name, dept) {
    this.number = num;
    this.name = name;
    this.department = dept;
  }


 one = new Student(“200393001”, “홍길동”, “네트과”);
 one.number = “200393002”;



                                                 94
사용자 정의 객체 [3]

<SCRIPT LANGUAGE="JavaScript">
   function Student(num, name, dept) {
         this.number = num;
         this.name = name;
         this.department = dept;
   }
   oneStudent = new Student("200393001", "홍길동", "네트과");

    oneStudent.name = "임꺽정"
    oneStudent.department = "영어과"
    // 학번, 이름, 학과 속성을 출력한다.
    document.write("학번 : " + oneStudent.number + "<br>")
    document.write(" 수정된 이름 : " + oneStudent.name + "<br>")
    document.write(" 수정된 학과 : " + oneStudent.department)
</SCRIPT>




                                                              95
for … in 반복문

for (변수 in 객체) {
   반복 수행 문장;
}


function Student(num, name, dept) {
  this.number = num;
  this.name = name;
  this.department = dept;
}
one = new Student(“200393001”, “홍길동”, “네트과”);

for(a in one)
  document.write(“속성 : “ + one[a] + “<br>”);

                                                96
객체에 메소드 정의 [1]

• 학생객체에 메소드 정의
 function display() {
   document.write(“학번 : “ + this.number + “<br>”);
   document.write(“이름 : “ + this.name + “<br>”);
   document.write(“학과 : “ + this.department +”<br>”);
 }

 function Student(num, name, dept) {
   this.number = num;
   this.name = name;
   this.department = dept;
   this.display = display;
 }

                                                        97
객체에 메소드 정의 [2]
<SCRIPT LANGUAGE="JavaScript">
function display() {
  document.write(“학번 : “ + this.number + “<br>”);
  document.write(“이름 : “ + this.name + “<br>”);
  document.write(“학과 : “ + this.department +”<br>”);
}

function Student(num, name, dept) {
   this.number = num;
   this.name = name;
   this.department = dept;
   this.display = display;
}
oneStudent = new Student("200393001", "홍길동", "네트과");
oneStudent.display();
</SCRIPT>




                                                       98
실습 [13-1]

• 다음 객체를 정의하여 값을 저장하고 출력하다.
  – 성적 객체(grade)
  – 영어, 자바, ASP
  – 합계를 구하여 출력해주는 메소드 정의




                              99
실전예제[1] - 236

<head>
 <title>이름을 입력받아 상태바에 출력하기</title>
   <script language="LiveScript">
   function getname(str) {
     self.status = "안녕하세요! " + str +"님"
   }
   </script>
 </head>

 <body>
   이름을 입력하세요 :
   <form>
    <input type="text" name="textbox">
    <input type="button" value="click" onclick="getname(textbox.value)">
   </form>
 </body>




                                                                           100
실전예제[2] - 241

<head>
 <title> 상태바에서 글자 반짝이기 </title>
    <SCRIPT LANGUAGE="JavaScript">
    var a = 1;
    function blink(){
      if (a == 1) {
             window.status = "상태바의 글자가 깜박이지요!";
             a = 0;
      }
      else{
             window.status=" ";
             a = 1;
      }
      setTimeout("blink()",500)
    }
    </SCRIPT>
 </head>
 <body onload="blink()">
 </body>




                                                  101
실전예제[3] - 244

<head>
 <title>상태바에 글자가 왔다갔다 하기</title>
   <script language="JavaScript">
   function statusMessageObject() {
     this.msg = MESSAGE;
     this.out = " ";
     this.pos = POSITION;
     this.delay = DELAY;
   }

  var DELAY = 100
  var MESSAGE = "         안녕하세요? 김성훈입니다.“
                          + " 좌우로 움직이는게"
                          + "보이시나요?";
  var POSITION = MESSAGE.length;
  var scroll = new statusMessageObject()




                                            102
실전예제[3] - 244

function scroller() {
   if (scroll.pos >= 0)
     //메세지가 왼쪽으로 이동하게 한다.
      scroll.out = scroll.msg.substring(scroll.pos,scroll.msg.length) +
                              scroll.out;
   else
       //메세지가 오른쪽으로 이동하게 한다.
     scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

    window.status = scroll.out
    scroll.out = " "
    scroll.pos--;
   if (scroll.pos < -(scroll.msg.length))
         scroll.pos = POSITION
      setTimeout ('scroller()',scroll.delay)
}
</SCRIPT>
</head>




                                                                          103
실전예제[3] - 244

<body onLoad="scroller()">
  <center>
   상태바를 보세요.
  </center>
</body>




                             104

								
To top