자바스크립트 function, select, checkbox, radiobox, 개인정보 샘플, location, history, useragent

AlreadyNo 2014. 6. 3. 17:31

2014. 6. 3. 17:31

function

util.js

function catchEvent(eventObj, event, eventHandler) {

if (eventObj.addEventListener) {

eventObj.addEventListener(event, eventHandler,false);

} else if (eventObj.attachEvent) {

event = "on" + event;

eventObj.attachEvent(event, eventHandler);

}

function cancelEvent(event) {

if (event.preventDefault) {

event.preventDefault();

event.stopPropagation();

} else {

event.returnValue = false;

event.cancelBubble = true;

}

functiondemo.html

<!DOCTYPE html>

<head>

<title> Function Demo </title>

catchEvent(window, "load", setup);

function setup(){

catchEvent(document.getElementById('btnCalc'), "click", myclick);

}

function myclick(){

var a = document.getElementById("first").value;

var b = document.getElementById("second").value;

document.getElementById('result').innerHTML = a + b;

}

</script>

</head>

<body>

<input type="number" id="first"> +

<input type="number" id="second"> =

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

select : 드롭다운

<!DOCTYPE html>

<head>

catchEvent(window, "load", setup);

function setup(theEvent){

catchEvent(document.getElementById('btnSubmit'), "click", myfun);

}

function myfun(theEvent){

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

var idx = editors.selectedIndex;

alert(editors.options[idx].value); //선택한 옵션의 값.

}

</script>

</head>

<body>

<form>

<p><label for="editors">당신은 다음 중 주로 어느 에디터를 사용하십니까?</label></p>

<option value="Editplus">Editplus</option>

<option value="Notepad++">Notepad++</option>

<option value="Sublime">Sublime</option>

<option value="Eclipse">Eclipse</option>

</select></p>

</form>

</body>

</html>

여기서 <select id="editors" name="editors" multiple size="6"> 로 바꿔주면 여러개 선택가능하고 한번에 보여주는 개수가 6개로 한다는 뜻.

위처럼 바꾼다면 출력부분도 아래와 같이 바꿔주면 된다.

var str = "";

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

if(editors.options[i].selected) str += editors.options[i].value + ",";

}

str = str.substring(0, str.length - 1); //마지막 , 를 뺴주기 위함.

alert("귀하가 선택하신 에디터는 \n" + str + "\n입니다.");

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

checkbox , radiobx

<!DOCTYPE html>

<head>

<title> Checkbox, Radio </title>

catchEvent(window, "load", setup);

function setup(theEvent){

catchEvent(document.getElementById('male'), "click", genderCheck);

catchEvent(document.getElementById('female'), "click", genderCheck);

catchEvent(document.getElementById('btnHobby'), "click", hobbyClick);

}

function hobbyClick(theEvent){

var str = "";

for(var i = 0 ; i < document.forms[0].hobby.length ; i++){

if(document.forms[0].hobby[i].checked)

str += document.forms[0].hobby[i].value + ",";

}

str = str.substring(0, str.length - 1);

alert("귀하가 선택하신 취미는 \n" + str + "\n이군요...");

}

function genderCheck(theEvent){

alert(theEvent.target.value);

}

</script>

</head>

<body>

<form>

</p>

</fieldset>

<p>

<input type="checkbox" name="hobby" value="낚시">낚시  

<input type="checkbox" name="hobby" value="등산">등산  

<input type="checkbox" name="hobby" value="독서">독서  

</p>

<p>

<input type="checkbox" name="hobby" value="음악감상">음악감상  

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

<input type="checkbox" name="hobby" value="코딩">코딩  

</p>

</fieldset>

</form>

</body>

</html>

//checkbox는 각각에 이벤트를 달기보다 버튼하나로 묶어주는 것이 좋다.(여러개가 선택될 수 있으므로)

//this.value 해도 선택된 라벨의 value를 얻어올 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

개인정보 입력 (주민등록번호, 성별, 생년월일 등) (radiobox, checkbox, keyup, substr, charAt 등 사용)

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(evt){

//document.forms[0].elements[8].addEventListener("click", myclick, false);

document.forms[0].elements[4].addEventListener("change", mychange, false); //이름을 안쓰고 elements의 몇번째 인지로 접근 하는 방법

document.forms[0].elements[4].addEventListener("keyup", keyup, false); //키보드를 눌렀다 떨어질 때 이벤트발생.

document.forms[0].elements[5].addEventListener("keyup", keyup1, false);

}

function keyup1(evt){

if(this.value.length == 7) {

var str = "";

document.forms[0].elements[6].focus();

if(this.value.charAt(0) == '1' || this.value.charAt(0) == '3'){

document.forms[0].elements[1].checked = true;

}else if(this.value.charAt(0) == '2' || this.value.charAt(0) == '4'){

document.forms[0].elements[2].checked = true;

}

//주민번호 입력하면 자동으로 생년월일과 성별 자동입력되게

var jumin1 = document.forms[0].elements[4].value;

if(this.value.charAt(0) == 1 || this.value.charAt(0) == 2) str += "19";

else str +="20";

str += jumin1.substr(0,2) + "-" + jumin1.substr(2,2) + "-" + jumin1.substr(4,2);

document.forms[0].elements[3].value = str;

//alert(str);

}

function keyup(evt){

var jumin1 = this.value;

if(jumin1.length == 6) document.forms[0].elements[5].focus(); //주민번호 앞자리 6자리를 다 썼을때 뒷자리로 자동이동.

}

function mychange(evt){

var jumin1 = evt.target.value;

if(jumin1.length != 6 || !jumin1){

alert("첫번째 주민번호의 값이 없거나 형식에 일치하지 않습니다.");

document.forms[0].elements[4].focus();

return false;

}

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

if(isNaN(jumin1.charAt(i))) {

alert("숫자를 넣으세요.");

document.forms[0].elements[4].focus();

return false;

}

//alert(jumin1);

}

function myclick(evt){

//alert(document.forms[0].elements[1].value);

alert(document.forms[0].elements[3].value);

}

</script>

</head>

<body>

<form>

</p>

<input type="text" maxlength="6" name="jumin1" size="8"> -

</p>

</select> -

</p>

</fieldset>

</form>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

evt.target.innerHTML , getElementsByTagName 사용

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(evt){

var Ps = document.getElementsByTagName("p");

Ps[0].addEventListener("click", myOpen, false);

Ps[1].addEventListener("click", myOpen, false);

}

function myOpen(evt){

var url = "";

switch(evt.target.innerHTML){

case "네이버" : url = "http://www.naver.com"; break;

case "구글": url = "https://www.google.com"; break;

}

//순서는 주소, 창이름, 옵션

window.open(url, "w",

"left=400, top =200, width=500, height=400, toolbar=1, menubar=yes, location=0, resizable=0, scrollbars=1, status=yes");

}

</script>

</head>

<body>

</body>

</html>

-------------------------------

위코드에서 닫기 추가

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

var w;

function setup(evt){

var Ps = document.getElementsByTagName("p");

Ps[0].addEventListener("click", myOpen, false);

Ps[1].addEventListener("click", myClose, false);

}

function myClose(evt){

w.close();

}

function myOpen(evt){

w = window.open("http://www.naver.com", "w",

"left=400, top =200, width=500, height=400, menubar=yes, location=0, resizable=0, scrollbars=1, status=yes");

}

</script>

</head>

<body>

<p>네이버열기</p>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

위 개인정보 소스를 새창으로 띄어 입력된 값 읽어오는 소스

windowdemo2.html

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

var w;

function setup(evt){

var btn = document.getElementById("btn");

btn.addEventListener("click", myOpen, false);

}

function myOpen(evt){

window.open("formdemo1.html", "w",

"left=400, top =200, width=600, height=400, menubar=yes, location=0, resizable=0, scrollbars=1, status=yes");

}

</script>

</head>

<body>

<ol>

<li>휴대전화번호 : <span id="hp"></span></li>

</ol>

</body>

</html>

formdemo1.html

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(evt){

document.getElementById('myclosebtn').addEventListener("click", myClose, false);

document.getElementById("jumin1").addEventListener("keyup", keyup, false);

document.getElementById("jumin2").addEventListener("keyup", keyup1, false);

}

function keyup1(evt){

if(this.value.length == 7) {

var str = "";

document.forms[0].elements[6].focus();

if(this.value.charAt(0) == '1' || this.value.charAt(0) == '3'){

document.forms[0].elements[1].checked = true;

}else if(this.value.charAt(0) == '2' || this.value.charAt(0) == '4'){

document.forms[0].elements[2].checked = true;

}

var jumin1 = document.forms[0].elements[4].value;

if(this.value.charAt(0) == 1 || this.value.charAt(0) == 2) str += "19";

else str +="20";

str += jumin1.substr(0,2) + "-" + jumin1.substr(2,2) + "-" + jumin1.substr(4,2);

document.forms[0].elements[3].value = str;

}

function keyup(evt){

var jumin1 = this.value;

if(jumin1.length == 6) document.forms[0].elements[5].focus();

}

function mychange(evt){

var jumin1 = evt.target.value;

if(jumin1.length != 6 || !jumin1){

alert("첫번째 주민번호의 값이 없거나 형식에 일치하지 않습니다.");

document.forms[0].elements[4].focus();

return false;

}

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

if(isNaN(jumin1.charAt(i))) {

alert("숫자를 넣으세요.");

document.forms[0].elements[4].focus();

return false;

}

//alert(jumin1);

}

function myClose(evt){

//opener는 부모 창을 뜻하고, self는 현재 내 창을 뜻한다.

if(document.getElementById('male').checked)

opener.document.getElementById('gender').innerHTML = "남자";

else if(document.getElementById('female').checked)

opener.document.getElementById('gender').innerHTML = "여자";

opener.document.getElementById('birthday').innerHTML =

self.document.getElementById('birthday').value;

opener.document.getElementById('jumin').innerHTML =

self.document.getElementById('jumin1').value + "-" +

self.document.getElementById('jumin2').value;

opener.document.getElementById('hp').innerHTML =

self.document.getElementById('hp1').options[self.document.getElementById('hp1').selectedIndex].value +

"-" + self.document.getElementById('hp2').value;

//confirm 을 이용해서 확인창을 띄움.

if(window.confirm("정말 창을 닫으시겠습니까?"))

self.close();

else

self.location.href ="";

}

</script>

</head>

<body>

<form>

</p>

<input type="text" maxlength="6" name="jumin1" id="jumin1" size="8"> -

</p>

</select> -

</p>

</fieldset>

</form>

</body>

</html>

-------------------------

위의 windowdemo2.html 에 move 추가 : 창이 1초마다 움직이게

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

var w;

function setup(evt){

var btn = document.getElementById("btn");

btn.addEventListener("click", myOpen, false);

}

function myOpen(evt){

w = window.open("formdemo1.html", "w",

"left=0, top =0, width=600, height=400, menubar=yes, location=0, resizable=0, scrollbars=1, status=yes");

moveWindow(evt);

}

function moveWindow(evt){

w.moveBy(10, 10); //10,10의 방향으로 계속해서 움직임. 끝에 도달하면 멈춤.

window.setTimeout(moveWindow, 1000);

}

</script>

</head>

<body>

<ol>

<li>휴대전화번호 : <span id="hp"></span></li>

</ol>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

frameset

frameparent.html

<!DOCTYPE html>

<head>

</head>

</frameset>

</html>

menu.html

<!DOCTYPE html>

<head>

<style>

body {background-color:yellow}

</style>

window.addEventListener('load', setup, false);

function setup(evt){

document.getElementById('bookmark').addEventListener('change', change, false);

}

function change(evt){

var sel = document.getElementById('bookmark');

parent.frames[1].location = sel.options[sel.selectedIndex].value; //부모의 2번째 프레임의 위치에 선택된 값을 뿌려줌.

}

</script>

</head>

<body>

<option value="https://www.google.com">Google</option>

<option value="https://www.yahoo.com">Yahoo</option>

<option value="http://www.naver.com">Naver</option>

</select>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

location : href는 새창으로, replace는 현재창에서 이동.

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(evt){

document.getElementById('btn').addEventListener("click", change, false);

}

function change(evt){

var age = Number(document.getElementById('age').value);

if(age < 10){

window.location.href = "http://kids.daum.net/";

}else if(age >= 10 && age < 19){

window.location.replace("http://jr.naver.com/");

}else if(age >= 19){

window.location.href = "http://www.nec.go.kr/portal/lwMain.do";

}//else if(age >= 65){

// window.location.replace("");

//}

}

</script>

</head>

<body>

</p>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

history : 방문기록이라고 생각하면 됨

historydemo.html

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(evt){

var As = document.getElementsByTagName('a');

As[1].addEventListener("click", myclick, false);

As[2].addEventListener("click", myclick1, false);

}

function myclick(evt){

alert(window.history.length);

}

function myclick1(evt){

window.history.go(1);

}

</script>

</head>

<body>

<p><a href="historydemo1.html">historydemo1.html로 가기</a></p>

<p><a href="#">history 정보보기</a></p>

<p><a href="#">Forward</a> </p>

</body>

</html>

historydemo1.html

<!DOCTYPE html>

<head>

</head>

<h1>historydemo1.html</h1>

<input type="button" onclick="javascript:history.go(-1);">뒤로가기

</body>

</html>

//go(-1)대신 back() 사용해도 같다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

navigator 객체

useragent : os와 브라우저에 대한 정보

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(){

document.getElementsByTagName('p')[0].innerHTML = navigator.userAgent;

}

</script>

</head>

<body>

<p></p>

</body>

</html>

출력:

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

저작자표시 (새창열림)

'Java & Oracle' 카테고리의 다른 글

제품관리프로그램, dom : childNodes, nextSibling, attribute, 성적관리프로그램 (0)	2014.06.05
cookie , dom : 접근법 (0)	2014.06.04
자바스크립트 배열의 값 복사, 전달된 인자 검사, function, event, this, dom leve (0)	2014.06.02
array : join, sort, concat, slice, push, unshift, 성적관리프로그램, RegExp (0)	2014.05.30
자바스크립트 for ~ in, email형식, 객체만들기, 출력을 새창으로, number, string, 달력, date, 시계, math, d-day 계산기 (0)	2014.05.29

AlreadyNo의 블로그

자바스크립트 function, select, checkbox, radiobox, 개인정보 샘플, location, history, useragent

'Java & Oracle' 카테고리의 다른 글

+ Recent posts

티스토리툴바