웹/Javascript8 Javascript 에서 StringBuilder 사용하기 Java 나 .Net 을 보면 StringBuilder 라는 클래스가 있어서 점진적으로 문자열을 늘려나갈 때 유용하게 사용할 수 있습니다. 성능을 고려하지 않고 이를 구현할 경우 아래와 같이 보통 코드를 작성합니다. str = str + "abc"; str = str + "def"; str = str + "hijk"; ... 하지만 위의 코드는 str 이라는 변수에 늘어난 문자열을 계속 새로 저장하기 때문에 메모리 할당이나 I/O 측면에서 비효율적인 걸로 알고 있습니다. 그래서 보통 StringBuilder 를 사용하여 append 하여 문자열을 생성해 나갑니다. 그러나 Javascript 에서는 StringBuilder 라는 클래스나 함수가 없기 때문에 위와 같이 비효율적인 코드를 작성하는 경우가 빈번.. 2013. 12. 10. 모달 팝업창 만들기 2 - Javascript 의 showModalDialog 를 이용한 모달 팝업창 만들기 Javascript 에서 제공하는 window.showModalDialog() 를 사용한 모달 팝업창을 생성하는 예제입니다. 참고로 팝업창 띄울 때 흔히 사용하는 window.open() 은 모달리스 팝업창입니다. showModalDialog 의 문법은 아래와 같습니다. var retval = window.showModalDialog(dialog, [varArgIn], [varOptions]); dialog: 모달 팝업으로 표시할 페이지 URL varArgln(옵션): 모달 팝업창에 전달할 변수 혹은 객체 varOptions(옵션): dialogWidth, dialogHeight 와 같은 팝업창 속성 자세한 내용은 아래 MSDN 페이지를 참고하시면 됩니다. MSDN 페이지: http://msdn.micr.. 2013. 10. 22. 레이어 공지 팝업창 만들기 대부분 웹사이트에서 볼 수 있는 공지사항과 같은 팝업창을 레이어를 이용하여 띄우는 예제입니다. cookie 를 사용하여 하루 동안 창이 뜨지 않도록 하는 기능을 포함하고 있습니다. 이 예제에서는 jquery v1.7.1 과 cookie 처리를 위한 jquery 플러그인인 jquery.cookie v1.3.1 을 사용합니다. jquery.cookie 는 GitHub 에서 진행되는 오픈소스 라이브러리이며 아래 URL 을 참고하셔서 다운로드 받거나 아래 첨부파일을 받아서 사용하시면 됩니다. URL: https://github.com/carhartl/jquery-cookie 1. CSS 부분 2. HTML 부분 공지사항입니다. 오늘 하루 이 창을 열지 않음 [닫기] 쿠키 삭제 테스트입니다.테스트입니다.테스트입니.. 2013. 10. 1. 모달 팝업창 만들기 1 - dhtmlwindow를 이용하여 레이어 모달 팝업창 만들기 dhtmlwindow 라이브러리를 사용하여 레이어 모달 팝업창을 생성하는 예제입니다. Dynamic Drive 라는 곳에서 만든 dtml window widget 이라는 위젯처럼 팝업창을 띄워주는 기능을 확장해서 만들어진 오픈소스 기반 라이브러리이며 스크립트 주석을 그대로 사용해야 합니다. 이 라이브러리는 iframe 과 div 를 사용해서 레이어로 모달 팝업창을 만들 수 있고 iframe 을 사용할 경우 외부 페이지를 팝업창으로 띄워서 값을 받아올 수 있습니다. 아래 예제에서는 div 와 iframe 두 가지 방법으로 모달 팝업창을 띄우며, 이를 위해 아래 사이트에서 관련 리소스를 받아서 사용하시거나 아래 첨부파일을 받으시면 됩니다. URL: http://www.dynamicdrive.com/dynam.. 2013. 9. 9. Javascript 와 Css 로 원하는 영역만 인쇄하기 Javascript 와 Css @media print 기능을 사용하여 웹 페이지의 원하는 영역만 인쇄하는 방법입니다. 이 예제에서는 JQuery 를 사용하고 결과화면을 보여주기 위해 인쇄 미리보기 기능을 사용하며 필요하시면 아래 글을 참고하세요. Javascript 로 인쇄 미리보기 기능 추가하기 http://ninebear.tistory.com/123 1. Css 부분 2. Html 부분 여기는 헤더영역입니다. 인쇄 미리보기 화면을 열겠습니다. 3. Javascript 부분 4. 결과화면 여기는 헤더영역입니다. 를 출력시 제외시켰습니다. 2013. 9. 3. Javascript 로 인쇄 미리보기 기능 추가하기 Javascript 를 이용하여 IE(Internet Explorer) 의 인쇄 미리보기 화면을 먼저 띄운 뒤 출력될 내용을 확인 및 조정 후 출력하는 예제입니다. 참고로 아래 예제는 IE 를 ActiveX 형태로 이용하는 것이기 때문에 타 브라우저에서는 작동하지 않을 것이고, IE 7 이전 버전에서는 작동하지 않을 수 있습니다. 그리고, 아래 사이트를 참고하시면 보다 많은 정보를 얻으실 수 있습니다. 참고 URL: http://docs.servicerocket.com/display/WMFAQ/How+to+add+Print+and+Save+to+File+buttons+to+Workflow+forms 1. javascript 부분 2. html 부분 인쇄 미리보기 화면을 열겠습니다. 3. 결과화면 2013. 9. 2. 웹 개발에 유용한 프레임워크와 라이브러리 [JQuery Plug-in] LazyLoad (OpenSource) - 이미지가 화면에 잡힐 때만 로드하게 해준다. - 페이지 로딩 시 한꺼번에 이미지를 가져오지 않아 페이지 로딩 속도를 개선할 수 있다. - 페이지에 수많은 이미지를 출력할 때 scrollstop 플러그인과 같이 사용하면 화면에 잡힌 이미지들만 나오게 할 수 있다. scrollstop (OpenSource) - 스크롤 시작 혹은 끝 이벤트를 발생시킨다. - 스크롤 중일 때 어떤 처리를 하거나 LazyLoad 와 같은 플러그인와 연동할 수 있다. jquery.cookie (OpenSource) URL: https://github.com/carhartl/jquery-cookie - Cookie 를 손쉽게 사용할 수 있게 해준다. [Fram.. 2013. 8. 29. iframe 을 이용한 페이지 로딩 처리 예제 페이지에서 iframe 이 있거나 혹 iframe 을 이용하여 다른 페이지를 읽어올 때 로딩하는 동안 로딩 이미지나 문구를 화면에 뿌려주는 예제입니다. 이 예제는 http://jsfiddle.net/CPadm/ 에도 동일한 내용이 있으므로 참고하실 수 있습니다. 이 예제에서는 JQuery 를 이용합니다. 1. 안에 들어갈 내용Click to load Page is loading... 2. Css (head 부분에 3. Javscript 내용 예제파일: 결과 화면 2013. 8. 27. 이전 1 다음
