Blog Content

URL 주소에서 매개변수 값을 잘라내는 예제 입니다. (GET방식 매개변수 값 받아오기) function fn_load() { var str = returnUrlParams(); alert(str); } function returnUrlParams() { var array = [], hash; //직접가져오기 //var url = "http://goddfs?idx=233&name=goddfs"; //var url_Address = url.slice(url.indexOf('?') + 1).split('&'); //URL 에서 가져오기 var url_Address = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); f..

01.jQuery - jstree 기본 구성 02.jQuery - jstree ... DB에서 받은 값 json형식으로 출력하기 이어서 하겠습니다. 웹 페이지로 넘어가서 코드를 작성합니다. Colored By Color Scripter™ 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 결과 확인! 어때요? 참 쉽죠~? 끝~

웹서비스를 만들어서 DB정보를 불러와 json 형식으로 웹 페이지에 출력하는 예제 입니다. 먼저 웹 서비스를 하나 추가 합니다. 다음 디비에서 정보를 불러오는 메서드를 추가 하겠습니다. 제가 만들고 있는 프로젝트이므로 참고해서 응용하세요... Colored By Color Scripter™ 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 [WebMethod] public string Select_Category() { //json 형식으로 출력하기 위해서 Dictionary 사용 List lst = new List(); using (COFFEE.BLL.Board_BLL bll = new COFFEE.BLL.Board_BLL(..

jstree 사이트에서 파일을 다운받아 압축을 풀고 프로젝트에 추가하였습니다. 압축을 푼 파일을 보면 안에 _docs 폴더가 있는데요. 이 안에 예제가 많이 있습니다. _docs\ui.html 예제 내용입니다. Colored By Color Scripter™ 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 Root node 1 Child node 1 Child node 2 Root node 2 결과확인 참 쉽죠~? 끝~

jquery 를 이용해서 treeview 기능을 구현하려고 인터넷 검색을 했는데요. jstree를 많이들 사용하더라구요...거기에 무료이고...그래서 예제를 만들어 보려고 합니다... 공식 사이트 http://www.jstree.com/

HTML5 Canvas를 이용하여 그림판을 만들고, 호스팅 서비스에 올려서 모바일로 직접 실행했는데 잘됩니다. 잘되긴 하는데...모바일에 있는 기본 인터넷 브라우저로 열어서 보니 드래그가 안되고...;;; 네이버 웹을 통해서 접속하여 확인하니 잘 됩니다...;;; (컴퓨터에 익스플로러, 파이어폭스, 크롬에서는 잘 됩니다.) 이유가 먼지...아시는분 답변 부탁드립니다. ex08.Gradation.html Colored By Color Scripter™ 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 ..

마우스 이벤트 중에서 mousedown 상태에서 마우스를 이동하 mouserup 할 때 선을 그리는 예제 입니다. ex07.sketch.html Colored By Color Scripter™ 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 참 쉽죠~? 끝

사각형, 삼각형, 원 그리기 기초를 했는데요. 이를 응용해서 간단하게 제가 좋아하는 애니메이션중 그랑죠의 마법진을 그려봤습니다...피닉스랑, 포세이돈은...-_-a ex06.Shape.html Colored By Color Scripter™ 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..

캔버스를 이용해서 원을 그리는 예제 입니다. 원을 그리는데 사용되는 메서드는 arc()메서드를 사용해서 그립니다. arc(x좌표, y좌표, 반경(반지름), 시작점, 끝 점, 방향)을 설정합니다. ex05.Circle.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var canvas = document.getElementById("can1"); var cv = canvas.getContext("2d"); cv.beginPath(); cv.arc(100, 100, 50, 0, 2*Math.PI, true); cv.fill(); cv.closePath(); 결과를 확인합니다. 참 쉽죠~? 끝

캔버스를 이용하여 삼각형을 그리는 예제 입니다. 삼각형 모양을 그릴때는 moveTo(),lineTo() 메서드를 사용해서 좌표를 지정합니다. moveTo로 시작지점을 그리고, lineTo로 선을 그립니다. 안에 소스에 설명 추가 하였습니다. ex04.Triangle.html Colored By Color Scripter™ 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 #can1 { width:300px; height:300px; } var canvas = document.getElementById("can1"); var cv = canvas.getContext("2d"); //삼각형 그리기 cv...

HTML5 에 새로 추가된 캔버스 입니다. 캔버스는 그림을 그리드는 기능을 갖고 있는데요. 도형을 그리는 순서는 캔버스 객체를 얻고, 캔버스 객체로 부터 컨텍스트를 얻고, 컨텍스트의 메서드, 속성을 가지고 그림을 그립니다. 렌더링~ fillRect(시작 X좌표, 시작 Y좌표, 사각형의 가로, 사각형의 세로) 간단하게 사각형 모양으로 그림을 그려봅니다. ex03.canvas.html Colored By Color Scripter™ 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 결과를 확인합니다. 참 쉽죠~?

스파트폰 웹 개발을 할 때 가장 중요하고 기본이 되는거라고 생각하는게 ViewPort라고 생각이 됩니다. 뷰포트는 기기별로 화면의 크기가 다른데요. 뷰포트를 사용하게 되면 자동으로 화면 사이즈를 맞춰주는 기능이 있습니다. 뷰포트 속성 width, height : px 단위 기본 960px initial-scale : 초기 배율, (기본값 : 꽉 찬 화면) minimum-scale : 최소 배율 0~10.0 maximum-scale : 최대배율 0~10.0 user-scalable : 확대 축소 여부 : yes/no 뷰포트 사용 기본 코드 입니다. ex02.ViewPort.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 안..

실제 HTML5를 실행할때 실행 환경별로 어떻게 나오는지 궁금합니다. 가상으로 아이폰, 아이패드, 안드로이드, PC에서 보는 방법입니다. 먼저 설치를 하셔야 하는데요. 아이폰, 아이패드 같은 경우에는 iBBDemo 를 설치. 안드로이드는 안드로이드 SDK를 설치 하시면 됩니다. 설치방법은 크게 어렵지 않고 간단하고...검색을 통해서 찾으시면 쉽게 하실수 있습니다. 이전에 만든 HTML5 페이지를 실행합니다. 또는 마우스 오른쪽 클릭해서 브라우저에서 보기를 선택하세요. 실행을 하시면 웹 페이지에서 실행되는것을 확인 할 수 있습니다. 여기서 URL 주소 전체를 복사를 하시고... 설치하신 iBBDemo를 실행하고 URL 주소에 복사한 내용을 입력하면 확인 할 수 있습니다. 참 쉽죠~?

HTML5 작업을 하다보면 소스 오류가 생기면 고치기에 많은 시간이 걸립니다. 어디서 오류인지는 확인 하려면 전체 다 살펴보거나 자바스크립트로 메세지창을 띄워서 결과를 확인해야하니 번거롭습니다. Visual Studio에서 HTML5 자바스크립트 디버깅 하는 방법입니다. 버튼을 클릭을 하면 자바스크립트로 메세지창을 띄우는 코드를 작성합니다. ex01.Hello.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 디버깅 할 코드 라인을 찾습니다. 버튼 클릭 할때 이벤트를 보기 위해서 17번 라인에 디버깅을 걸어줍니다. 라인 숫자 옆에 보면 회색 줄이 보입니다. 이곳에 마우스 왼쪽을 클릭하시면 빨간 점으로 표시되는데요..

HTML5 공부를 하면서 코딩하면서 화면을 같이 보고 싶은데 코드 페이지만 보여지고, 화면을 직접 보고 싶으면 인터넷 화면을 실행해서 매번 확인해야하니 귀찮습니다. ASP.NET WebForm.aspx와 같이 소스,디자인 페이지를 같이 보고 싶어 찾아보니 방법이 있어 올립니다. 소스와 디자인 페이지를 같이 보고싶은 페이지를 선택합니다. 마우스 오른쪽 클릭 '연결 프로그램' 선택합니다. 연결 프로그램 팝업창이 나오면 'HTML(Web Froms) 편집기'를 선택 하고 '기본값으로 설정' 버튼을 클릭 후 확인 확인 버튼을 클릭하시면 메세지 창이 나옵니다. '예'를 클릭하시고 결과를 확인 합니다. 참~쉽죠~?