BS Blog

2012-12-12

JQuery] 이클립스 jquery min js파일 validator 에러 대처법

jquery*.min.js 파일에 에러가 표시되어 프로젝트에 x 표시가 되는 경우에 아래와 같은 방법으로 해결을 할 수 있다.

1) Project->Properties->JavaScript->Include Path->Source

2) Inclusion and Exclusion Patterns 창에서 Exclusion patterns Add 버튼 클릭

3) 상황에 적합한 패턴 입력 (예 : **/jquery*.js )

4) 적용시키면 에러 표시 제거됨

위의 방법으로 적용시에 간혹 Project->Properties 에서 javascript 항목이 안보이는 경우가 발생한다.

이럴 경우,

Project->Properties-> Builders -> "Javascript Validator" 를 체크 해제.

2012-11-23

scripts] ms sql server total size check

'// sql server
'// Displays the total size of a SQL Server database
'//

strDBServerName = "database server name"
strDBName = "ScriptingGuysTestDB"

Set objSQLServer = CreateObject("SQLDMO.SQLServer")
objSQLServer.LoginSecure = True
objSQLServer.Connect strDBServerName

Set objDB = objSQLServer.Databases(strDBName)
WScript.Echo "Total Size of Data File + Transaction Log of DB " & strDBName & ": " & objDB.Size & "(MB)"

scripts] smtp 서비스 사용해서 메일 보내기

'//
'// smtp 서비스 사용해서 메일 보내기
'// ms technet site 내용.
'// 메일 보내기 테스트

Set objEmail = CreateObject("CDO.Message")

objEmail.From = "send email address"
objEmail.To = "receive email address"
objEmail.Subject = "메일 보내기 테스트 입니다/"
objEmail.Textbody = "내용을 만들어서 보내세요."
objEmail.Send

javascript] array를 이용한 중복제거

//TIPS
//[JS] Array 중복제거하기(2009/06/01)
//written by Kim Yeonview : 36
//
Array.prototype.removeSame = function() {

var oldArray = this;
var b = [];
var j = 0;
oldArray.sort();
while(oldArray.length > 0) {

var newKey = oldArray.shift();
if(j == 0) {
b.push(newKey);
j++;
} else if(b[j-1] != newKey) {
b.push(newKey);
j++;
}
}

return b;

};

jquery] jquery 사용 가이드

출처 : http://www.anyframejava.org/node/1061

jQuery 사용 가이드

Submitted by sooyeon.park on 월, 06/07/2010 - 09:03.

안녕하세요. kk3134님,
추후 릴리즈될 Anyframe 4.5.0 버전에서 jQuery 1.4.2 버전을 Integration한 jQuery Anyframe Plugin을 제공할 예정입니다.
필요 파일과 샘플 코드 그리고 사용가이드를 제공할 예정입니다.
(Grid, UI(tab), Tree, Autocomplete, Popup, DropDownList 제공 예정)
현재 바로 jQuery를 사용하고 싶으시다면, 아래와 같이 JSP 페이지에서 사용하고자 하는 jQuery Plugin에 대한 Javascript 파일 및 CSS 파일을
포함시켜야합니다. jQuery 또한 core 기능을 제공하는 jquery-1.4.2.min.js 외 나머지 autocomplete, tree, popup, grid 등의 기능을
Plugin 형태로 제공하므로 원하는 기능을 선택하여 포함시키도록 합니다.

  <!-- for jquery -->

  <script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">



  <!-- jquery:autocomplete -->

  <link rel="stylesheet" type="text/css" href="/jquery/autocomplete/jquery.autocomplete.css">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.autocomplete.js">

  <script type="text/javascript" src="/jquery/autocomplete/jquery.bgiframe.min.js">  

  

  <!-- jquery:jstree-0.9.9 -->

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.cookie.js">

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.metadata.js">

  <script type="text/javascript" src="/jquery/jstree/jquery.tree.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.contextmenu.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.cookie.js">



  <!-- jquery ui, jqGrid -->

  <script type="text/javascript" src="/jquery/jqgrid/i18n/grid.locale-en.js">

  <link href="/jquery/jquery-ui/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js">

  <link href="/jquery/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jqgrid/jquery.jqGrid.min.js">

 

  <!-- jquery popup -->

  <script type="text/javascript" src="/jquery/nyromodal/js/jquery.nyroModal-1.6.2.pack.js">

  <link href="/jquery/nyromodal/styles/nyroModal.css" rel="stylesheet" type="text/css" />

  

  <!-- jquery tab -->

  <link href="/jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />

            

  <!-- jquery uploadify -->

  <script type="text/javascript" src="/jquery/uploadify/swfobject.js">

  <script type="text/javascript" src="/jquery/uploadify/jquery.uploadify.v2.1.0.min.js">

     

  <!-- jquery image dropdown -->

  <script type="text/javascript" src="/jquery/dropdown/msdropdown/js/jquery.dd.js">

  <link href="/jquery/dropdown/msdropdown/dd.css" rel="stylesheet" type="text/css" />

이 중 간단한 Autocomplete 기능을 예로 들어보면, 아래와 같은 간단한 코드로 Auto Complete 기능을 적용하실 수 있습니다.
- 필요파일) jquery.js(ver. 1.4.2), jquery.autocomplete.js, jquery.bgiframe.js (이상 ver. 1.1), jquery.autocomplete.css

$(“#searchKeyword”).autocomplete(

   ””, {

   width : 200,

   scrollHeight : 200,

   selectFirst:true,

   mustMatch:true,

   matchCase:true,

   autoFill:true,

   scroll: true

 });

위와같이 url을 지정해 주면 바로 autocomplete 기능을 사용할 수 있습니다.

jquery-autocomplete

jquery] jquery jqgrid 설정

원본 출처 : http://dayg.tistory.com/239?srchid=BR1http%3A%2F%2Fdayg.tistory.com%2F239

http://www.trirand.com/blog/?page_id=6 에서 기능별 js파일을 선택하여 zip파일 다운로드.

압축을 풀면 세가지 폴더가 나온다.

jquery.jqGrid-3.6.5/js :

jquery.jqGrid.min.js - jqGrid의 모든 기능이 포함된 압축버전, 배포시 사용

/i18n/grid.locale-en.js - 언어별 locale파일이 있는 i18n폴더. 난 rid.locale-en.js파일을 사용했다.

jquery.jqGrid-3.6.5/css: grid에서 사용하는 css

jquery.jqGrid-3.6.5/src: src폴더는 디버깅을 위한 비압축된 기능별 스크립트 파일이 포함되어있다. 개발시 사용

jqGrid 디버깅을 위한 설정

jquery.jqGrid-3.6.5/src/grid.loader.js

- 비압축된 js파일들을 include해주는 스크립트다. 소스에서 pathtojsfiles라는 변수에 src폴더의 js파일들의 경로를 설정하고, 이 파일을 include하면 된다.

메시지: '$.jgrid.formatter.integer'은(는) null 이거나 개체가 아닙니다.

줄: 711

문자: 5

코드: 0

URI: http://61.250.201.238:8080/memberManagement/js/jqgird_3_6_5/grid.base.js

위 에러는 locale파일의 경로가 틀렸을 경우에 발생한다.

jquery] jquery 튜토리얼

jquery 설명 사이트 : http://godffs.tistory.com/category/ASP.NET/jQuery

[jQuery in Action 내용중]

Selector : html 내의 원하는 작업 대상 엘리먼드를 선택할 수 있는 방법

$("ELEMENT") -> 기본문법

$("p") -> html 내의 모든 p ELEMENT

$("p a") -> html 내의 모든 p ELEMENT 내의 a ELEMENT

$("p:even") ->html 내의 p ELEMENT 중 짝수번째

$("tr:nth-child(1)") -> html 내 모든 테이블 중 첫번째 tr

$("body > div") -> body 아래 첫번째 div

$("a[href$=pdf]") -> pdf 파일이 링크된 a ELEMENT ($는 끝이 pdf로 끝나는 , 반대는 ^)

$("a[href^=http://]") -> a ELEMENZT 중 href attribute가 http://로 시작하는

$("body > div:has(a)") -> body 내 div 중 a ELEMENT를 포함하고 있는 div

$("form[method]") -> method attribute를 가진 모든 form ELEMENT

$("input[type=text]") -> type이 text인 모든 input

$("a[href*=jquery.com] -> href에 jquery.com이 포함된

li:has(a) <> li a

Selector 참고 링크 : http://docs.jquery.com/Selectors

CSS Selector

#someID -> someID를 가지고 id로 가지고 있는 ELEMENT

.someClass -> someClass를 class로 가지고 있는 모든 ELEMENT

a#someID.someClass -> a 태그 중 id가 someID이면서 class가 someClass인

$("p a.someClass") ->p ELEMET 내에 있는 a 태그 중 class가 someClass인

a:first

a:even

a:odd
li:last-child

[jQuery in Action 내용중]

jQuery로 만들어진 기본 유틸리티

$.trim("string")

아래의 세 개가 동일한 효과를 나타내나, 맨 아래가 제일 단순함

window.onload = function() {

$("table tr:nth-child(even)").addClass("class집합");

}; --> 페이지가 모두 로드된 다음 실행되므로, 이미지 등이 로딩 모두 로딩될 때까지 기다려야 하므로 체감 속도가 느리다.

$(document).ready(funtion() {

$("table tr:nth-child(even)").addClass("class집합");

}; --> DOM 트리가 로드된 다음 실행 되어 위보다 상대적으로 빠름

$(function() {

$("table tr:nth-child(even)").addClass("class집합");

};

JQuery 사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.

각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

해당 엘리먼트 접근하기

일반 :document.getElementById("id");

JQuery : $("#id");

- 엘리먼트의 ID 접근시 #, class 접근시 .

해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;

JQuery : $("#id").val();

- 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드

일반 : document.getElementById("id").checked;

JQuery : $("#id").is(':checked');

- 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환

- $("#id").is(".orange, .blue, lightblue"); id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");

JQuery : $("#id").css("border", "4px solid yellow");

- 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";

JQuery : $("#id").hide(); , $("#id").show();

- hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.

- 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

체크박스의 전체선택 / 해제

일반

functionselectAll() {
var blnChecked = document.getElementById("allCheck").checked; // 전체선택 체크박스의 상태
checkBoxes = document.getElementsByName('delCheck'); // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

    for(var i=0; i<checkBoxes.length; i++) {
    objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

JQuery

$(document).ready(function() {
$('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
   if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   });
});

엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)

- 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다.

jQuery 함수 $(...)

jQuery(expression,context)

CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.

예제1

div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.

$("div > p").css("border", "1px solid gray");

예제2

document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.

$("input:radio", document.forms[0]);

예제3

AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다

$("div", xml.responseXML);

jQuery(html)

예제1

div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.

$("<div><p>Hello</p></div>").appendTo("body")

예제2

input 요소를 type 요소없이 만들 수 없다.

이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.

// IE에서 작동하지 않음

$("<input/>").attr("type", "checkbox");

// IE에서 작동

$("<input type='checkbox'/>");

jQuery(elements)

이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.

예제1

body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)

$(document.body).css( "background", "black" );

예제2

myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)

$(myForm.elements).hide()

jQuery(callback)

$(document).ready()의 약어

DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다.

이 함수는 $ (document) ready ()와 같게 동작한다.

이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.

예제1

DOM 준비가 가능하면 작업을 수행한다.

$(function(){

// Document is ready

});

예제2

$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다.

jQuery(function($) {

// Your code using failsafe $ alias here...

});