개발 프로세스/Front-end
-
[JavaScript] window 객체의 setTimeout() 메소드개발 프로세스/Front-end 2021. 6. 18. 04:02
setImeout() 메소드에 밀리초 단위의 타임아웃 지연 시간과 타임아웃 코드를 지정하면, 타임아웃 지연 시간 후 타임아웃 코드를 1회 실행한다. var timerID = setTimeout("타임아웃 자바스크립트 코드", msec); clearTimeout(timerID); 이미지 위에 마우스를 올린 상태로 5초가 지나면 네이버로 연결. 5초 전에 이미지를 벗어나면 타이머 해제. var timerID=null; function startTimer(time) { // 타이머 시작 timerID = setTimeout("load('http://www.naver.com')", time); // 툴팁 메시지 document.getElementById("img").title = "타이머 작동 시작..."; }..
-
[JavaScript] 캔버스에 마우스로 드래깅하여 그리기개발 프로세스/Front-end 2021. 6. 17. 21:58
마우스를 누른 채 드래깅하여 그림 그려 보세요 var canvas, context; function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); context.lineWidth = 2; // 선 굵기를 2로 설정 context.strokeStyle = "blue"; /* 마우스 리스너 등록. e는 MouseEvent 객체 */ canvas.addEventListener("mousemove", function (e) { move(e) }, false); // 마우스 움직이는 동안 canvas.addEventListener("mousedown", function (e) { down(e) }, ..
-
[JavaScript] 캔버스에 이미지 그리기개발 프로세스/Front-end 2021. 6. 17. 21:36
캔버스에 이미지를 그리기 위해서는 이미지를 담을 이미지 객체가 필요하다. 이미지 파일로부터 이미지를 로딩시키기 위해서는 Image 객체의 src 프로퍼티를 이용한다. 이미지 로딩이 완려되어야 이미지를 그릴 수 있으므로, 이미지 로딩을 지시하기 전 onload 리스너에 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다. 원본 이미지 크기로 그리기 drawImage(img, dx, dy) img : 이미지 객체 dx, dy : 이미지가 그려질 캔버스 좌표 (dx, dy) var img = new Image(); // 이미지 객체 생성 img.src = "text.png";// img 객체에 text.png 파일로부터 이미지 로딩 img.onload = function () {// 이미지 ..
-
[JavaScript] 캔버스에 텍스트 그리기개발 프로세스/Front-end 2021. 6. 17. 21:36
캔버스에 텍스트를 생성하면 비트맵 이미지로 출력되므로 쓴다기보다는 그린다는 것이 옳다. 따라서 캔버스에서 텍스트만 지우거나 뗴어 내어 옮기는 것은 불가능하다. /* 텍스트의 외곽선만 그리기 */ strokeText(text, x, y [,maxWidth]); /* 외곽선 없이 텍스트 내부 채워 그리기 */ fillText(text, x, y [,maxWidth]); text : 출력하고자 하는 문자열 텍스트 x, y : 텍스트가 출력되는 시작 점 (x, y) maxWidth : 텍스트가 출력되는 최대 폭 주요 프로퍼티 strokeStyle strokeText() 에서 외곽선 색 정할 때 사용하는 프로퍼티 fillStyle fillText() 에서 텍스트 내부 색 정할 때 사용하는 프로퍼티 font con..
-
[JavaScript] 캔버스에 도형 그리기개발 프로세스/Front-end 2021. 6. 17. 21:36
캔버스 생성하기 이 태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트 캔버스객체를 생성한 후 태그를 찾아 DOM 객체를 얻어낸다. 그리고 캔버스 객체로부터 그림을 그리는 도구(rendering tool)을 얻어낸다. 이 도구를 캔버스 컨텍스트(context)라고 한다. /* Script */ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); getContext("2d") : 2차원 그래픽에 사용되는 프로퍼티와 메소드를 가진 CanvasRenderingContext2D 타입의 객체이다. strokeStyle 선 색 fillStyle 채우기 색 lineWidth 도형의 선 두께. 픽셀 단위 fo..
-
[JavaScript] 폼과 이벤트 활용 : onreset, onsubmit개발 프로세스/Front-end 2021. 6. 17. 15:32
onreset : 을 클릭하여 폼을 초기화할 때 호출 onsubmit : 을 클릭하여 폼을 서버로 전송할 때 호출 http://webprogramming.co.kr/ 명품 웹 프로그래밍 브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가 webprogramming.co.kr
-
[JavaScript] 폼과 이벤트 활용 : 키 이벤트, onkeydown, onkeypress, onkeyup개발 프로세스/Front-end 2021. 6. 17. 15:30
onkeydown : 모든 키에 대해 키가 눌러지는 순간 호출 onkeypress : , , 키와 문자키에 대해서만 키가 눌러지는 순간 추가 호출. onekeyup : 모든 키에 대해 눌러진 키가 떼어지는 순간 호출 키 이벤트 객체의 프로퍼티 code 눌러진 키의 이름 저장 r key 눌러진 키의 문자열 저장, 키 판별에 사용. (한글 x, 영문) r altKey 키가 눌러진 상태이면 true r ctrlKey 키가 눌러진 상태이면 true r shiftKey 키가 눌러진 상태이면 true r http://webprogramming.co.kr/ 명품 웹 프로그래밍 브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방..
-
[JavaScript] 폼과 이벤트 활용 : select 객체와 onchange개발 프로세스/Front-end 2021. 6. 17. 15:23
목차 select 객체의 프로퍼티와 컬렉션 length 옵션 개수 r selectedIndex 선택된 옵션의 인덱스 번호 r/w size 콤보박스에 보여지는 옵션의 개수 r/w options 콤보 박스에 들어 있는 모든 옵션 객체(option 타입)들의 컬렉션 option 객체의 프로퍼티 selected 옵션이 선택 상태이면 true r/w text 옵션 문자열 r/w value value 속성 문자열 r/w onchange 리스너 select 객체에 다른 옵션이 선택되면 select 객체의 onchange 리스너가 호출된다. function drawImage() { var sel = document.getElementById("fruits"); var img = document.getElementByI..