[35일차]2015.08.26.수, 이벤트, 내장객체

프로그래밍, 통계학/JavaScript 2015. 8. 26. 21:19

button과 submit 차이


submit은 이벤트가 발생한다.(기본적으로 이벤트가 내장되어 있다.)

submit은 <form></form>태그 안의 것들을 실행시킴



<h1>test1</h1>


<a href="test2.html><input type="button"></a>


<form action="test2.html">

<input type="text">

<input type="submit">

</form>


submit 버튼을 누르면 action 표기된 곳으로 가서 실행


***********************************************************************

이벤트란, 특정한 상황이 발생했을 때 특정한 일을 수행하도록 하는 일종의 트리거(방아쇠)다.

타 언어와 마찬가지로, 자바스크립트에서도 이벤트 관련 기능을 지원한다.

이벤트에 대해 파헤지기 전에 먼저, 이벤트의 작동 방식부터 살펴보자.


이벤트의 작동방식

이벤트의 작동 방식은 크게 bubbling과 capturing 으로 나뉜다.

이것은 DOM계층 구조에 따른 이벤츠 추출 방식으로,

bubbling의 경우 가장 하위 구조의 이벤트부터 처리하고

capturing의 경우 가장 상위 구조의 이벤트부터 처리한다.



***********************************************************************

버튼1을 눌렀을 때 상자가 노랑색으로 변하는 프로그램


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

window.onload = function(){

//이벤트를 달 버튼을 가지고 옴

var b1 = document.getElementById("button1");

//마우스를 클릭 했을 때 해야할 일을 만들어 줌

var f = function(){

var d = document.getElementById("d1");

d.style.backgroundColor="yellow";

}

b1.onclick=f;

}


</script>


<style type="text/css">

#d1{

width: 100px;

height: 100px;

background-color: gray;

margin: 0 auto;

}

</style>


</head>

<body>


<div id="d1">

</div>


<input type="button" id="button1" value="버튼1">

<input type="button" id="button2" value="버튼2">



</body>

</html>


***********************************************************************

http://www.w3schools.com/jsref/dom_obj_event.asp


Mouse Events

EventDescriptionDOM
onclickThe event occurs when the user clicks on an element2
oncontextmenuThe event occurs when the user right-clicks on an element to open a context menu3
ondblclickThe event occurs when the user double-clicks on an element2
onmousedownThe event occurs when the user presses a mouse button over an element2
onmouseenterThe event occurs when the pointer is moved onto an element2
onmouseleaveThe event occurs when the pointer is moved out of an element2
onmousemoveThe event occurs when the pointer is moving while it is over an element2
onmouseoverThe event occurs when the pointer is moved onto an element, or onto one of its children2
onmouseoutThe event occurs when a user moves the mouse pointer out of an element, or out of one of its children2
onmouseupThe event occurs when a user releases a mouse button over an element2


***********************************************************************

글씨입력하면 인풋 텍스트 상자색 바꾸기


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

window.onload=function(){

var i = document.getElementById("in1");

var t = function () {

var i1 = document.getElementById("in1");

i1.style.backgroundColor="orange";

}

i.onkeydown=t;

}

</script>


</head>

<body>

<input type="text" id="in1"> 


</body>

</html>



***********************************************************************

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info() {

var t = document.getElementById("d1");

alert(t.innerHTML);

}


</script>

</head>

<body>


<div id="d1">suji</div>






</body>

</html>



***********************************************************************

누르는 번호에 따라 이름바꾸기


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

if(num==1){

t.innerHTML="choa";

}else if(num==2){

t.innerHTML="hwasa";

}else{

t.innerHTML="IU";

}

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>




***********************************************************************

위와 같은 결과


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num,name) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

if(num==1){

t.innerHTML=name;

}else if(num==2){

t.innerHTML=name;

}else{

t.innerHTML=name;

}

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info(1, 'choa')">

<input type="button" value="2" onclick="info(2, 'hwasa')">

<input type="button" value="3" onclick="info(3, 'IU')">





</body>

</html>


***********************************************************************

같은 결과


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(name) {

var t = document.getElementById("d1");

//alert(t.innerHTML);

//1번 t.innerHTML="choa";

//2번,iu

//3번,suji

t.innerHTML=name;

}


</script>

</head>

<body>


<div id="d1">suji</div>

<input type="button" value="1" onclick="info('choa')">

<input type="button" value="2" onclick="info('hwasa')">

<input type="button" value="3" onclick="info('IU')">





</body>

</html>


***********************************************************************

Date Library 활용해서 현재 시간 . 월 . 년도 보이기



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

var d = new Date(); //자바처럼 객체개념

if(num==1){

t.innerHTML=d.getHours()+'시';

}else if(num==2){

t.innerHTML=d.getMonth()+1+'월'; //0부터니까 1씩 더한다

}else{

t.innerHTML=d.getYear()+1900+'년'; // 1900을 더해야 현재년도

}

}


</script>

</head>

<body>


<div id="d1">현재는?</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

현재시간 17:40 부터 19시까지 경과한 시간


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var t = document.getElementById("d1");

var d = new Date(); //자바처럼 객체개념

var d2 = new Date(2015,7,26,19);

alert("d:"+d.getTime()+"d2:"+d2.getTime());

alert(d2.getTime()-d.getTime());

var now = d.getTime();

var future = d2.getTime();

var flow = future - now;

alert(flow/(1000*60*60))

}


</script>

</head>

<body>


<div id="d1">경과한시간은?</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>



***********************************************************************

내장객체


Date


Math




***********************************************************************

0~9까지 난수추출해서 alert로 보여주기



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var nansu = Math.random()*10;

var t = parseInt(10, 2);

alert(t);

}


</script>

</head>

<body>


<div id="d1">0~9난수뽑기</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

Array 객체


var ar = new Array(5) // 저장 공간이 5칸인 배열 생성

ar[0]=10;

ar[1]="choa"




-저장 공간을 지정하지 않은 배열

var ar = new Array();



Array 객체의 메소드


reverse() : 배열데이터를 역순으로 반환

slice(번호1, 번호2) : 번호1부터 번호2 직전까지 잘라서 저장

sort() : 배열을 오름차순으로 정렬

shift() : 배열에서 인덱스의 0의 데이터를 삭제

pop() : 배열에서 마지막 인덱스의 데이터를 삭제

push(값) : 배열에서 마지막 인덱스에 새데이터를 중첩하여 추가

***********************************************************************

배열원소출력


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

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

alert(ar[i]);

}

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>





***********************************************************************

shift, pop 메소드 사용


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

ar.shift();

alert(ar.length);

ar.pop();

alert(ar.length);

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>


***********************************************************************

어레이 객체의 메소드 기능 확인



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function info(num) {

var ar = [10,20,30];

ar.shift();

alert(ar);

ar.pop();

alert(ar);

ar.push(100);

alert(ar);

ar.unshift("first");

alert(ar);

}


</script>

</head>

<body>


<div id="d1">배열출력</div>

<input type="button" value="1" onclick="info(1)">

<input type="button" value="2" onclick="info(2)">

<input type="button" value="3" onclick="info(3)">





</body>

</html>

***********************************************************************

문자열의 글자수를 보여주는 프로그램

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function info(num) {
//"suji"의 글자수를 보여줌
var s = "suji";
alert(s.length);
}

</script>
</head>
<body>

<div id="d1">배열출력</div>
<input type="button" value="1" onclick="info(1)">
<input type="button" value="2" onclick="info(2)">
<input type="button" value="3" onclick="info(3)">




</body>
</html>


***********************************************************************

ID는 6자이상, PW는 8자이상 입력받아야 회원가입시키기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}

</script>
</head>
<body>
<form action="#">

id<input type="text" id="idcheck"><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck"><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입" onclick="return idpwcheck()">
<input type="reset" value="취소">
</form>

</body>
</html>



여기서 form action의 #은 현재위치를 나타낸다.

***********************************************************************

위에거 온클릭 변경 onclick이 아니라 onsubmit을 form에 걸기
onsubmit


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}

</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">

id<input type="text" id="idcheck"><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck"><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>


***********************************************************************

ID와 PW 글자수가 모자르면 텍스트로 보여주고 글자수가 충분하면 다시 바뀌는 프로그램
+ 인풋텍스트박스 색깔 바꾸기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}
//id->글자를 입력할 때마다 확인 : 6자 이상 만족
//pw->글자를 입력할 때마다 확인 : 8자 이상 만족
//팝업창이 아니라 html로 
function id_check() {
var id = document.getElementById("idcheck"); //input
var result = document.getElementById("id_result"); //span
if(id.value.length<6){
result.innerHTML="ID는 최소6자 이상입력하세요."
id.style.backgroundColor="pink";
}else{
result.innerHTML="사용가능한 ID입니다."
id.style.backgroundColor="white";
}
}
function pw_check() {
var pw = document.getElementById("pwcheck"); //input
var result = document.getElementById("pw_result"); //span
if(pw.value.length<6){
result.innerHTML="PW는 최소8자 이상입력하세요."
pw.style.backgroundColor="pink";
}else{
result.innerHTML="사용가능한 PW입니다."
pw.style.backgroundColor="white";
}
}
</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">
id<input type="text" id="idcheck" onkeyup="id_check()"><span id="id_result">id글자수</span><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck" onkeyup="pw_check()"><span id="pw_result">pw글자수</span><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>

***********************************************************************

글자수가 부족하면 id,pw 옆에 이미지파일 모양바꾸기


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function idpwcheck() {
var id = document.getElementById("idcheck");
var pw = document.getElementById("pwcheck");
if((id.value.length<6)||(pw.value.length<8)){
alert("id는 6자 이상, pw는 8자이상 입력하세요.")
return false;
}
}
//id->글자를 입력할 때마다 확인 : 6자 이상 만족
//pw->글자를 입력할 때마다 확인 : 8자 이상 만족
//팝업창이 아니라 html로 
function id_check() {
var id = document.getElementById("idcheck"); //input
var result = document.getElementById("id_result"); //span
var checkimg1 = document.getElementById("idcheck_img");
if(id.value.length<6){
result.innerHTML="ID는 최소6자 이상입력하세요."
id.style.backgroundColor="pink";
checkimg1.src="./png/pyre.png";
}else{
result.innerHTML="사용가능한 ID입니다."
id.style.backgroundColor="white";
checkimg1.src="./png/checkbox6.png";
}
}
function pw_check() {
var pw = document.getElementById("pwcheck"); //input
var result = document.getElementById("pw_result"); //span
var checkimg2 = document.getElementById("pwcheck_img");
if(pw.value.length<6){
result.innerHTML="PW는 최소8자 이상입력하세요."
pw.style.backgroundColor="pink";
checkimg2.src="./png/pyre.png";
}else{
result.innerHTML="사용가능한 PW입니다."
pw.style.backgroundColor="white";
checkimg2.src="./png/checkbox6.png";
}
}
</script>
</head>
<body>
<form action="test1.html" onsubmit="return idpwcheck()">
id<input type="text" id="idcheck" onkeyup="id_check()"><span id="id_result">id글자수</span><img id="idcheck_img" src="./png/checkbox6.png" width=50px><br><!-- id는 최소 6글자 이상 -->
pw<input type="password" id="pwcheck" onkeyup="pw_check()"><span id="pw_result">pw글자수</span><img id="pwcheck_img" src="./png/checkbox6.png" width=50px><br><!-- pw는 최소한 8글자 이상 -->
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

</body>
</html>


***********************************************************************

window.onload=function(){} 사용 [쌤코드], window.onload=function(){} 용법공부


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var f = document.getElementById("f1");
var ch = function () {
var yid = document.getElementById("yid");
var ypw = document.getElementById("ypw");
if(yid.value.length <6 || ypw.value.length<8){
alert("아이디나 비번을 확인 해주세요");
return false;
}
}
f.onsubmit = ch;
//id => 글자를 입력할 때 마다 확인 6자 이상 만족
//pw => 글자를 입력할 때 마다 확인 8자 이상 만족

var yid = document.getElementById("yid");//iput
yid.onkeyup=id_check;
}
var id_check = function () {
var result = document.getElementById("id_result");//span
if(yid.value.length<6){
result.innerHTML ="아이디는 최소 6자 이상 지정";
}else {
result.innerHTML ="사용 가능합니다.";
}
}
</script>
</head>
<body>

<form action="test1.html" id="f1">
id <input type="text" id="yid" ><span id="id_result"></span><br><!-- id는 최소한 6글자이상 -->
pw <input type="password" id="ypw" onkeyup="pw_check()"><br><!-- 비번 최소한 8글자 이상 -->
<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 type="text/javascript">
function check() {
var d = document.getElementById("d1");
var idReg = /[^A-Z]+[^a-z]+[^0-9]/;
if(!idReg.test(d.value)){
alert("영어소문대문자 써야대");
}else {
alert("회원 가입 진행");
}
}

</script>
</head>
<body>
<input type="text" id="d1">
<input type="button" onclick="check()">
</body>
</html>


***********************************************************************




***********************************************************************





***********************************************************************




저작자표시 (새창열림)

'프로그래밍, 통계학 > JavaScript' 카테고리의 다른 글

[34일차]2015.08.25.화, 자바스크립트 연습  (0) 2015.08.25
[33일차]2015.08.24.월,자바 스크립트 document  (0) 2015.08.24
[32일차]2015.08.21.금,자바스크립트  (0) 2015.08.21
블로그 이미지

테시리

,

공지사항

태그목록

최근에 받은 트랙백

글 보관함

달력

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

티스토리툴바