PowerPoint Template

Size: px

Start display at page:

Download "PowerPoint Template"

항나 승
5 years ago
Views:

1 JavaScript 회원정보 입력양식만들기 HTML & JavaScript

2 Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2

3 Form 객체 Form 객체 입력양식의틀이되는 <FORM> 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 <FORM> 태그의속성들의정보에관련된것 <FORM> 태그안의여러입력양식을요소라고함 3

4 Form 객체의속성 4

5 Form 객체의메소드, 이벤트핸들러 5

6 Form 객체 Chapter05 형식 : <FORM NAME = " 이름 " TARGET = " 창이름 " ACTION = "URL" ENCTYPE = " 형식 " METHOD = GET POST onsubmit = " 이벤트 " onreset = " 이벤트 ">... </FORM> document. 폼이름.[ 속성 메소드 ] 속성 : action, method, elements, encoding, length, name, target, form, forms 메소드 : blur(), submit(), reset() 이벤트핸들러 : onsubmit, OnReset HTML 홈페이지만들기 6

7 Form 객체 Chapter05 예제 : <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <FORM NAME="FormObj"> <INPUT TYPE="button" VALUE="Form 정보확인 " onclick="output()"> </FORM> HTML 홈페이지만들기 7

8 프로그램 13-1 [ 그림 13-1] Form1 의실행결과 [ 그림 13-2] Form1 의실행결과 8

9 프로그램 13-2 [ 그림 13-3] Form2 의실행결과 [ 그림 13-4] Form2 의실행결과 9

10 Text 객체 Text 객체 <INPUT> 태그의 TYPE 속성의값으로 text 를입력하여만들어진텍스트박스에접근 Form 객체에서파생 형식 : <INPIUT TYPE = "text" NAME = " 이름 " VALUE =" 값 " SIZE = " 크기 " MAXLENGTH = " 크기 " onblur = " 이벤트 " onchange = " 이벤트 " onfocus = " 이벤트 " onselect = " 이벤트 "> 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 이벤트핸들러 : onblur, onchange, onfocus, onselect 10

11 Text 객체 Chapter05 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- function Output(strData) { if (strdata.id.value == " 이름입력 ") { alert(" 이름을입력하세요 "); form.id.focus(); } else { var strinfo = "name : " + strdata.id.name + "\n"; strinfo += "value : " + strdata.id.value + "\n"; strinfo += "defaultvalue : " + strdata.id.defaultvalue + "\n\n"; alert(strinfo) } } HTML 홈페이지만들기 11

12 Text 객체의속성, 메소드, 이벤트핸들러 12

13 프로그램 13-3 [ 그림 13-5] Text 의실행결과 [ 그림 13-6] Text 의실행결과 13

14 Password 객체 Password 객체 <INPUT> 태그의 TYPE 값을 password 로지정한텍스트박스에접근할경우사용 속성, 메소드들은기본적으로 Text 객체의것들과같음 Password 텍스트박스에어떠한정보를입력하였을경우 value 속성을사용하여해당값을가져올수없음 형식 : <INPUT TYPE = "password" NAME = " 이름 " VALUE = " 값 " SIZE = " 크기 "> 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 14

15 Password 객체 Chapter05 예제 : function Output(strData) { if (strdata.id.value == "") { alert(" 비밀번호를입력하세요 "); form.pwd.focus(); } else { var strinfo = "name : " + strdata.pwd.name + "\n"; strinfo += "value : " + strdata.pwd.value + "\n"; strinfo += "defaultvalue : " + strdata.pwd.defaultvalue + "\n\n"; alert(strinfo) } } HTML 홈페이지만들기 15

16 Password 객체의속성, 메소드, 이벤트핸들러 16

17 TextArea 객체 TextArea 객체 TYPE 속성의값으로 textarea 를입력하면여러줄을입력할수있는텍스트박스에접근할때사용 형식 : <TEXTAREA NAME = " 이름 " ROWS = " 크기 " COLS = " 크기 " onblur = " 이벤트 " onchange = " 이벤트 " onfocus = " 이벤트 " onselect = " 이벤트 " 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 이벤트핸들러 : onblur, onchange, onfocus, onselect 17

18 TextArea 객체 Chapter05 예제 : function Output(form) { var strinfo = "name : " + form.introduce.n strinfo += "value : \n" + form.introduce.v alert(strinfo); } function Output_Status(strInfo) { window.status = strinfo; } HTML 홈페이지만들기 18

19 TextArea 객체의속성, 메소드, 이벤트핸들러 19

20 프로그램 13-4 [ 그림 13-7] TextArea 의실행결과 20

21 프로그램 13-4 [ 그림 13-8] TextArea 의실행결과 21

22 Hidden 객체 Hidden 객체 <INPUT> 태그의 TYPE 속성의값으로 hidden 으로지정하여만든입력양식에접근할때사용 형식 : <INPUT TYPE = "hidden" NAME = " 이름 " VALUE = " 값 "> 속성 : defaultvalue, name, value 예제 : function Output(strData) { var strinfo = "name : " + strdata.hiddeninfo.name + "\n"; strinfo += "value : " + strdata.hiddeninfo.value + "\n"; strinfo += "defaultvalue : " + strdata.hiddeninfo.defaultvalue + "\n\n"; alert(strinfo) } 22

23 Hidden 객체의속성 23

24 Button 객체 Button 객체 <INPUT> 태그의 TYPE 속성의값으로 button 을입력하여만든버튼에접근할때사용 속성으로는버튼의이름을나타내는 name 속성, 버튼의값을나타내는 value 속성이있음 버튼을클릭한것과같은효과를내는 click() 메소드가있으며버튼을클릭하였을경우발생하는이벤트를처리하기위한 onclick 이벤트핸들러가있음 24

25 Button 객체 Chapter05 형식 : <INPUT TYPE = "button" NAME = " 이름 " VALUE = " 값 " onclick = " 이벤트 "> 속성 : name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(strData) { var strinfo = " 이름 : " + strdata.name + "\n"; strinfo += " 값 : " + strdata.value; alert(strinfo); } HTML 홈페이지만들기 25

26 Button 객체의속성, 메소드, 이벤트핸들러 26

27 프로그램 13-5 [ 그림 13-9] Button 의실행결과 [ 그림 13-10] Button 의실행결과 27

28 Checkbox 객체 Checkbox 객체 <INPUT> 태그의 TYPE 속성의값으로 checkbox 를입력하여만든체크박스에접근하고자할때사용하는객체 28

29 Checkbox 객체 Chapter05 형식 : <INPUT TYPE = "checkbox" NAME = " 이름 " VALUE = " 값 " CHECKED onclick = " 이벤트 "> 속성 : checked, defaultchecked, name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(form) { var strinfo = " 당신의취미는 \n"; if(form.check1.checked) strinfo += " 게임 \n"; if(form.check2.checked) strinfo += " 독서 \n"; strinfo += " 입니다. \n"; } HTML 홈페이지만들기 29

30 Checkbox 객체의속성, 메소드, 이벤트핸들러 30

31 프로그램 13-6 [ 그림 13-11] Checkbox 의실행결과 [ 그림 13-12] Checkbox 의실행결과 31

32 Radio 객체 Radio 객체 <INPUT> 태그의 TYPE 속성의값으로 Radio 를입력하여만든체크박스에접근하고자할때사용하는객체 속성, 메소드, 이벤트핸들러들은모두 Checkbox 객체의속성, 메소드, 이벤트핸들러들과같음 여기에한가지속성이더추가되어있는데바로 length 속성이있음 32

33 Radio 객체 형식 : <INPUT TYPE = "radio" NAME = " 이름 " VALUE = " 값 " CHECKED onclick = " 이벤트 "> 속성 : checked, defaultchecked, length, name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(form) { for(var i = 0; i < form.hobby.length; i++) { if(form.hobby[i].checked == true) { alert(" 당신의취미는 " + form.hobby[i].value + " 입니다."); } } } 33

34 Radio 객체의속성, 메소드, 이벤트핸들러 34

35 프로그램 13-7 [ 그림 13-13] Radio 의실행결과 [ 그림 13-14] Radio 의실행결과 35

36 Select 객체 Select 객체 <SELECT> 태그와 <OPTION> 태그를사용하여만든콤보박스에접근할때사용 selectindex 속성으로콤보박스에서현재선택되어있는항목의인덱스를알수있음 콤보박스에 MULTIPLE 속성이있을경우동시에여러개의항목을선택할수있는데이때 selectedindex 속성을사용하면선택된항목중제일첫번째항목의인덱스만을가져오게됨 콤보박스의각항목의정보를가져오기위해서는 options 속성을사용 36

37 Select 객체 형식 : <SELECT NAME = " 이름 " SIZE = " 크기 " MULTIPLE onfocus = " 이벤트 " onblur = " 이벤트 " OnChange = " 이벤트 "> <OPTION SELECTED VALUE = " 값 " > 항목 <OPTION SELECTED VALUE = " 값 " > 항목... </SELECT> 속성 : name, length, selectedindex, options, options[i].index, options[i].text, options[i].value, options[i].selected, options[i].defaultselected 메소드 : onchange 37

38 Select 객체 예제 : function Output(strData) { var strinfo = ""; strinfo += "name : "+ strdata.name+"\n"; strinfo += "length : "+ strdata.length + "\n"; for(var i=0; i < strdata.options.length; i++) { if(strdata.options[i].selected) strinfo += strdata.options[i].text + "\n"; } alert(strinfo); } 38

39 Select 객체의속성, 이벤트핸들러 39

40 프로그램 13-8 [ 그림 13-15] Select 의실행결과 [ 그림 13-16] Select 의실행결과 40

41 FileUpload 객체 FileUpload 객체 <INPUT> 태그의 TYPE 속성의값으로 file 을입력하여만든파일업로드버튼에접근할때사용 형식 : <INPUT TYPE = "file" NAME = "" 이름 > 속성 : name, value 예제 : function Output(form) strinfo += form.fileup.value + "\n"; alert(strinfo); } 41

42 FileUpload 객체의속성 42

43 프로그램 13-9 [ 그림 13-17] FileUpload 의실행결과 [ 그림 13-18] FileUpload 의실행결과 43

44 프로그램 [ 그림 13-19] INFO3 의실행결과 44

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.