221025 Javascript #8

김혜진·2022년 10월 25일

Javascript

목록 보기

7/9

폼 객체

폼 객체의 메소드
폼 양식을 보면 '등록' 버튼과 '다시 작성' 버튼이 공식처럼 배치되어 있다.
등록은 <submit> , 다시 작성은 <reset> 태그를 사용한다.

이벤트 핸들러를 직접 작성하여 submit() 메소드를 호출한다.
action으로 지정한 루틴이 없기 때문에 실제 등록처리를 하지는 않는다.
폼 객체의 이벤트
각각의 submit()과 reset() 메소드가 존재함으로써 그에 대응하는 이벤트도 제공되는데, onSubmit과 onReset 이벤트이다.

<form> 태그에 onSubmit과 onReset 이벤트를 등록한다.

    <form name = "test" method="post" onsubmit="register()" onreset="rewrite()">
        아이디 : <input type="text" name = "id" size="20" value="아이디 입력"/><br/>
        비밀번호 : <input type="password" name = "pw" size="20" value="비밀번호 입력"/>
        <p></p>
        <input type="submit" name="btn1" value="등록하기" >
        <input type="reset" name="btn2" value="다시 작성" >
    </form>
    <script>
        function register()
        {
            document.test.submit();
            alert("회원가입을 축하합니다.");
        }

        function rewrite()
        {
            document.test.reset();
            alert("다시 입력하세요.");
        }
	</script>

text 객체

text 객체의 속성
HTML에서 생성했던 텍스트 박스를 자바스크립트 text 객체를 통해 관리할 수 있다.
앞선 예제들에서 HTML을 통해 텍스트 박스를 생성하는 구문이다.

생성된 텍스트 박스를 자바스크립트를 이용하여 접근하는 형태이다. 두 방식 중 편한 방식을 선택하여 사용하면 된다.
text 객체의 메소드

<body onload="init()">
    <form name = "test" method="post" onsubmit="register()" onreset="rewrite()">
        아이디 : <input type="text" name = "id" size="20" value="아이디 입력"/><br/>
        비밀번호 : <input type="password" name = "pw" size="20" value="비밀번호 입력"/>
        <p></p>
        <input type="submit" name="btn1" value="등록하기" >
        <input type="reset" name="btn2" value="다시 작성" >
    </form>
    <script>
        function init()
        {
            document.test.id.focus();
        }

        function register()
        {
           if(document.test.id.value == "")
           {
            alert("ID를 입력하세요.");
           }
           else if (document.test.pw.value == "")
           {
            alert("PW를 입력하세요.");
           }
           else
           {
            document.test.submit();
            alert("회원가입을 축하합니다.");
           }
        }

        function rewrite()
        {
            document.test.reset();
        }
	</script>

text 객체의 이벤트

아이디 : <input type="text" name = "id" size="20" value="아이디 입력" onchange="change()"/><br/>

function change()
{
	alert("ID가 변경되었습니다.");
}

password 객체

password 객체의 사용법
일반 텍스트 박스와 같은 형태이다. 다만 패스워드 보안 특성상 문자를 * 형태로 보여준다는 것 뿐이다.

패스워드 박스를 자바스크립트를 이용하여 접근하는 방법
password 객체의 속성
password 객체의 메소드
password 객체의 이벤트

textarea 객체

textarea 객체의 사용법
여러 줄을 입력할 수 있는 textarea 사용 형태이다.

텍스트 영역 객체를 이용하여 접근하는 방법

하고 싶은 말 : <br/> <textarea name="diary" rows="10" cols="20" value="전체 선택" onclick="selectAll()"></textarea>

function selectAll()
{
	document.test.diary.select();
}

버튼(button/submit/reset) 객체

버튼 객체의 사용법
일반적으로 사용하는 버튼은 button이고, submit과 reset은 등록 및 재작성 버튼이다.

버튼 객체를 이용하여 접근하는 방법

<input type="button" name="btn4" value="버튼 이름 바꾸기" onclick="changeName()">

var btoggle = true;
function changeName()
{
	if(btoggle)
	{
		document.test.btn1.value = "제거하기";
        btoggle = false;
    }
	else
	{
		document.test.btn1.value = "등록하기";
        btoggle = true;
     }
}

checkbox 객체

checkbox 객체의 사용법
체크박스라는 것은 여러 항목 중에서 원하는 것을 선택할 수 있는 버튼이다.
체크박스 상태이면 true, 미체크 상태이면 false 값을 갖는다.

체크박스 객체를 이용하여 접근하는 방법
checkbox 객체의 속성
checkbox 객체의 메소드
checkbox 객체의 이벤트

개인정보동의<p>
<input type="checkbox" name="chk1" value="1">개인정보 수집<p>
<input type="checkbox" name="chk2" value="2">개인정보 조회<p>
<input type="checkbox" name="chk3" value="3">개인정보 재공<p>

var check1 = document.test.chk1.checked;
var check2 = document.test.chk2.checked;
var check3 = document.test.chk3.checked;

if(check1 && check2 && check3)
	{
		document.test.submit();
		alert("회원가입을 축하합니다.");
	}
else
	{
		alert("모든 항목을 체크해주세요.")
	}

재공 -> 제공

<input type="checkbox" name="chkall" onclick="checkAll()">전체선택<p>

function checkAll()
{
	for(var i = 4; i < 7; i++)
		{
			document.test.elements[i].click();
		}
}

radio 객체

radio 객체의 사용법
라디오버튼은 여러 항목 중에서 한 개만 선택할 수 있는 버튼이다.

라디오 객체를 이용하여 접근하는 방법
radio 객체의 속성
radio 객체의 메소드
radio 객체의 이벤트

이름을 같게하여 그룹화 시킨다. (중복체크 X)

연령대<p>
<input type="radio" name="age" value="10대">10대
<input type="radio" name="age" value="20대">20대
<input type="radio" name="age" value="30대">30대
<input type="radio" name="age" value="40대">40대

for(var i = 0; i < document.test.age.length; i++)
{
	if(document.test.age[i].checked == true)
	{
		alert(document.test.age[i].value + "이시군요")
	}
}

<form name="test">
	<h2>메모리의 주소값을 저장하는 변수를 무엇이라고 하는가?</h2><p></p>
	<input type="radio" name="exam" value="1" onclick="result()"/>1. 약수터<p></p>
	<input type="radio" name="exam" value="2" onclick="result()"/>2. 화개장터<p></p>
	<input type="radio" name="exam" value="3" onclick="result()"/>3. 포인터<p></p>
	<input type="radio" name="exam" value="4" onclick="result()"/>4. 놀이터<p></p>
</form>
    <script>
        function result()
        {
            if(document.test.exam[2].checked == true)
            {
                alert("정답입니다.");
            }
            else
            {
                alert("다시 풀어주세요.");
            }
        }
    </script>

select 객체

select 객체의 사용법
콤보메뉴는 콤보박스와 리스트박스의 형태를 섞어놓은 것이다.
메뉴 중 일부만 표시되고, 드롭다운 단추를 누르면 모든 메뉴를 펼쳐보이게 하는 형태

콤보 메뉴를 이용하여 접근하는 방법
select 객체의 속성
select 객체의 메소드
select 객체의 이벤트