개발

event.ClientX,Y 로 마우스 X,Y좌표 할당 도장찍는 예제입니다. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 Document body{ margin: 0px; } .wrapper{ width: 700px; height: 600px; background-color: yellowgreen; overflow: hidden; position: relative; } .menu{ width: 100px; heigh..

else~if문 if(안의 내용이 참일 시){ 브래이스 안의 내용 실행 //1줄일 시 브레이스 없어도 실행 } 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 32 33 34 35 36 37 38 39 Document window.addEventListener("load", function(){ init(); }) function init(){ var result=prompt("원하시는 배경 색을 선택하세요 \n 무지개순서 1,2,3,4,5,6,7") var color; if(result==1){ color="red"; }else if(result==2){ color="orange"; }else if(r..

아스키 코드 출력예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document window.addEventListener("load", function(){ document.body.addEventListener("keydown", function(e){ console.log(e.keyCode, e.key) }) }) Colored by Color Scripter cs

이벤트 명 설명 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 땟을 때 발생 load 로드가 완료 되었을 때 발생 mousedown 마우스를 클릭 했을 때 발생 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 mousemove 마우스가 움직였을 때 발생 mouseup 마우스에서 손을 땟을 때 발생 select option 태그 등에서 선택을 햇을 때 발생 click 사용예제 addEventListener의 클릭 이벤트와 event.clientX, event.clientY를 응용한 클릭하여 이동시키는 예제 1 2 3 4 5 6 7..

1단계! 1버튼으로 x축 50~500 사이로만 왔다갔다 하게하기! 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 Document img{ position: absolute; top: 50px; left: 50px; } var flag=true; var x=50; function moveFunc(){ (flag)? x+=50:x-=50; document.querySelector("img").style.left=x+"px"; document.querySelector("#txt").value=x; ((x==500)||(x==50))? flag=!flag:0; } move! X값 Colored by Color..

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 Document .wrapper{ margin: auto; width: 900px; height: 600px; background-color: red; overflow:hidden; } .left-side{ width: 150px; height: 100%; background-color: aquamarine; float: left; } #content{ width: 750px; height: 100%; background-colo..