자바스크립트 MVC패턴 - Input animate
ActionScript3.0으로 MVC패턴을 살펴보면 [ Model ← Cotroller ← View ] 와 같이, View에서 데이터가 바뀔경우 Model까지 값이 전달되고, 굳이 중간관리자인 Controller를 거치지 않고 독립적인 데이터 모델로서 처리 할 수 있는 방법인, EventDipatch가 있었다. 따라서 Model에서는 EventDispatch를 상속하여 아래 코드와 같이 자체 이벤트를 발생 시키고, 다른 객체를 알 필요 없이 불특정 객체에 알리게 된다. View에서는 Model의 이벤트를 청취하므로 Model에서 변경된 값을 참조하여 사용 할 수 있다. 액션스크립트의 EventDispatch. (남용 되면 코드가 지저분해질수도 있지만 취향의 문제이고, 콜백함수와는 다른 성격일때 사용하는..
마우스로 클릭한 지점에 대한 x,y (left, top)에 대한 좌표는 1 2 3 $(".photo").click(function(e){ alert(e.clientX, e.clientY); }) 으로 알 수 있다. 참고로 스크롤이 되지 않은 상태이면 상관없지만 스크롤이 된 상태에서의 좌표값은 클라이언트 좌표에 스크롤된 amount를 합산해 주어야 한다. 1 2 document.getElementById(obj).style.left = event.clientX + document.body.scrollLeft + 'px'; document.getElementById(obj).style.top = event.clientY + document.body.scrollTop + 'px';
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var d = new Date(); document.write('현재 년: ' + d.getFullYear() + ' '); document.write('현재 월: ' + (d.getMonth() + 1) + ' '); document.write('현재 일: ' + d.getDate() + ' '); document.write(' '); // 줄바꿈 document.write('현재 시: ' + d.getHours() + ' '); document.write('현재 분: ' + d.getMinutes() + ' '); document.write('현재 초: ' + d.getSeconds() + ' '); document..
1.브라우저에따른 이벤트 검사 (addEventListener, on_mousewheel) 1 2 3 4 5 6 //scroll event; if (window.addEventListener) /** DOMMouseScroll is for mozilla. */ window.addEventListener('DOMMouseScroll', this.wheel, false); /** IE/Opera. */ window.on_mousewheel = document.on_mousewheel = this.wheel; 2. 휠 메서드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /****************************************************** * wheel *******..
키보드 입력 - 3가지 솔루션
다만들어놓고 브라우저 호환 (특히 IE8이하 버전의호환 문제는 사람을 여러모로 피곤하게 만든다.) 테스트한 브라우저는 - 파이어폭스, 크롬, IE, 오페라. (아래 그림참조) 참고로 사파리는 너무 불안정하게 에러가 떠서 자꾸만 컴이 다운되서 탈락시킴. 해결책으로 제시할 3가지정도의 솔루션은 다음과 같다. 1. IE7,8제외한 모든 브라우저 가능 - addEventListener : 21번 라인으로 2. 제이쿼리를 이용한 모든 브라우저 가능 - keydown / keyup : 53번 라인으로 3. 클래식 자바스크립트로 모든 브라우저 가능 - onkeydown / onkeyup : 65번 라인으로 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24..
데스크탑, 모바일, 태블릿으로 각 디바이스에 맞춰 페이지 처리한것. 결과 값으로 나온것을 switch으로 나누어서 location.href 로 띄웠다. 소스응용 : http://ultteky.egloos.com/ 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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
클래스 생성의 기초 var MyClass = function($w,$h){ this.width = $w; this.height = $h; this.name = "MyClass" } MyClass.prototype.build = function(){ console.log(this.name); } function init(){ var _myClass = new MyClass(100,200); _myClass.build(); //MyClass console.log(_myClass.width); //100 console.log(_myClass.height); //200 } 1 : MyClass 라는 클래스를 정의. 생성자를 두개 만들었다. 7 : MyClass에 build 객체를 추가. 여기서의 this는 My..
window.onload = function(){ doSomething }; window.onload와 는 동시에 사용 불가 가 실행이 되면 window.onload는 실행이 되지 않는다. 실무소스) 1 2 3 4 5 6 function openPop(){ window.open("contents/index.html",'_blank','scrollbars=no,width=1000,height=700,top=0,left=0'); window.close(); } 중복에 대한 해결책 function window::onload){ doSomething } 가 먼저 실행되고, 이어서 window::onload()가 실행
1.html 2.css .main_leftBtn{position:absolute;overflow:hidden;top:263px;left:5px;cursor:pointer;} .main_rightBtn{position:absolute;overflow:hidden;top:263px;left:928px;cursor:pointer;} 3.javascript function img_rolover_rolout(id,img_title,e){ var e = e || window.event; if(e.type == "mouseover"){ id.src = "images/" + img_title +"_on.png"; }else{ id.src = "images/" + img_title +"_off.png"; } } ps. ..
제이쿼리에서 제공하는 다양한 메서드를 통해서 css의 위치값을 가져올 수 있지만, 직접 substring으로 Number를 가져와보자. var myX = $(".textImg0").css("left"); var myY = $(".textImg0").css("top"); console.log(myX ); // 750px var findIndexX = myX.indexOf("p"); var findIndexY = myY.indexOf("p"); var compleX = Number(myX.substring(0, findIndexX)); var compleY = Number(myY.substring(0, findIndexY)); console.log(compleX); //750 1 : myX, myY에 css..
.NET Framework 3.0 requestAnimationFrame 메서드는 시스템이 프레임을 그릴 준비가 되었을 때 애니메이션 프레임을 호출하여 애니메이션 웹 페이지를 만들 수 있는 더 유연하고 효율적인 방법을 제공합니다. 이 API 전에 setTimeout 및 setInterval을 사용하여 그린 애니메이션은 웹 개발자에게 애니메이션의 그래픽 타이머를 예약할 수 있는 효율적인 방법을 제공하지 않았습니다. 따라서 애니메이션이 과도하게 그려지고, CPU 주기가 낭비되었으며, 추가 전력이 사용되었습니다. 또한 웹 사이트가 보이지 않을 때, 특히 웹 사이트가 배경 탭의 페이지를 사용하거나 브라우저가 최소화된 경우에도 애니메이션이 종종 발생합니다. 애니메이션에서 10밀리초의 aJavaScript 타이머 ..
.NET Framework 3.0 requestAnimationFrame 메서드는 시스템이 프레임을 그릴 준비가 되었을 때 애니메이션 프레임을 호출하여 애니메이션 웹 페이지를 만들 수 있는 더 유연하고 효율적인 방법을 제공합니다. 이 API 전에 setTimeout 및 setInterval을 사용하여 그린 애니메이션은 웹 개발자에게 애니메이션의 그래픽 타이머를 예약할 수 있는 효율적인 방법을 제공하지 않았습니다. 따라서 애니메이션이 과도하게 그려지고, CPU 주기가 낭비되었으며, 추가 전력이 사용되었습니다. 또한 웹 사이트가 보이지 않을 때, 특히 웹 사이트가 배경 탭의 페이지를 사용하거나 브라우저가 최소화된 경우에도 애니메이션이 종종 발생합니다. 애니메이션에서 10밀리초의 aJavaScript 타이머 ..
