IT/JavaScript

javascript - 이벤트 기초 및 활용법, preventDefault, stopPropagation, form, radio, checkbox

노마드오브 2018. 8. 27. 22:10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

* {

margin: 5px;

padding: 5px;

border: 3px solid black;

}

</style>

<script>

function func1 (e) {

var a = e.target; // a태그, 이벤트타겟(소스)

a.style.backgroundColor = 'blue';

// 하이퍼링크 기능 막기

// return false;

e.preventDefault();

// 이벤트 전파막기(버블단계. 자식->부모)

e.stopPropagation();

}


function func2 (h1) {

h1.style.backgroundColor = 'red';

}

</script>

</head>

<body>

<h1 onclick="func2(this)">

<a id="a" href="http://www.naver.com" onclick="return func1(event)">네이버</a>

</h1>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function init() {

var t = document.getElementById('t');

var h1 = document.getElementById('h1');

t.onkeyup = function () {

var inputLength = t.value.length;

var remain = 150 - inputLength;

h1.innerHTML = remain;

// remain 남은 글자수가 0 이상이면 'h1' black

//       0보다 작으면 'h1' 글자색 red

if (remain >= 0) {

h1.style.color = 'black';

} else {

h1.style.color = 'red';

}

};

}

</script>

</head>

<body onload="init()">

<h1 id="h1">150</h1>

<textarea id="t" rows="5" cols="70"></textarea>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

// window - document - forms

// document.forms[0].속성   action method name

// document.forms[0].메소드()  submit()  reset()

// document.폼이름.속성   

// document.폼이름.메소드()     

function func1() {

alert(document.forms[0].action);

alert(document.frm.method);

}

function func2() {

// action => b.jsp 변경

document.forms[0].action = "b.jsp";

// method => get 변경

document.frm.method = "get";

// submit() 메소드 호출

document.frm.submit();

}

</script>

</head>

<body>


<form action="a.jsp" method="post" name="frm">

<input type="text" name="id" value="11">

<input type="button" value="폼정보" onclick="func1()">

<input type="button" value="폼정보변경" onclick="func2()">

<input type="submit" value="전송">

<input type="reset" value="초기화">

</form>


</body>

</html>



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function func1() {

//document.frm.id.focus();  // 포커스 설정

//document.frm.id.blur();  // 포커스 해제

document.frm.id.select();  // value값 선택

}


function func2() {

// 아이디 입력하지 않았으면 '입력하세요' 포커스주기

if (document.frm.id.value == '') {

// (document.frm.id.value.length == 0)

alert('아이디를 입력하세요');

document.frm.id.focus();

return;

}

// 4~10자 아이디 글자수 제한

if (frm.id.value.length < 4 || frm.id.value.length > 10) {

// if (!(frm.id.value.length >= 4 && frm.id.value.length <= 10))

alert('아이디는 4~10자 사이로 입력하세요');

frm.id.focus();

frm.id.select();

return;

}

if (frm.passwd.value == '') {

alert('패스워드를 입력하세요');

frm.passwd.focus();

return;

}

// 전송

document.frm.submit();

}


function j1() {

// jumin1의 value값 길이가 6자면 포커스를 jumin2로 이동

if (frm.jumin1.value.length == 6) {

frm.jumin2.focus();

}

}

function j2() {

// jumin2의 value값 길이가 7자면 포커스를 t로 이동

if (frm.jumin2.value.length == 7) {

frm.t.focus();

}

}


</script>

</head>

<body>

<form action="a.jsp" method="post" name="frm">

아이디: <input type="text" name="id"><br>

패스워드: <input type="password" name="passwd"><br>

주민번호: <input type="text" name="jumin1" onkeyup="j1()">-

<input type="text" name="jumin2" onkeyup="j2()"><br>

자기소개:

<textarea rows="3" cols="8" name="t"></textarea>

<br>

<input type="button" value="버튼" onclick="func1()">

<input type="button" value="전송" onclick="func2()">

</form>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

// document.폼이름.라디오,체크박스이름[0].속성

// checked(체크되면 true, 아니면  false) name, type, value

// document.폼이름.라디오,체크박스이름[0].메소드()

// focus()  blur()  click()

function func1() {

alert('name : ' + frm.gender[0].name); // gender

alert('type : ' + frm.gender[0].type); // radio

alert('value : ' + frm.gender[0].value); // 남

alert('checked : ' + frm.gender[0].checked); 

}


function func2() {

// 성별이 체크 안되어있으면, '성별을 체크하세요' 포커스 return

if (frm.gender[0].checked == false && frm.gender[1].checked == false) {

alert("성별을 체크하세요");

frm.gender[0].focus();

return;

}

// 전송

frm.submit();

}

</script>

</head>

<body>

<form action="a.jsp" method="post" name="frm">

성별 : <input type="radio" name="gender" value="남">남자

<input type="radio" name="gender" value="여">여자

<br>

취미 : <input type="checkbox" name="hobby" value="여행">여행 

<input type="checkbox" name="hobby" value="게임">게임

  <input type="checkbox" name="hobby" value="야구">야구

  <br>

<input type="button" value="정보" onclick="func1()">

<input type="button" value="전송" onclick="func2()">

</form>

</body>

</html>