cozyboy

function initDataTables(id, ajax, columns){

$(id).DataTable( {

"ajax": {"url":ajax, "async":false},

"columns":columns,

"oLanguage": {

   "sSearch": "",

   "sLengthMenu": "<span>_MENU_</span>"

},

"sDom": "T<'row'<'col-md-6 col-xs-12 'l><'col-md-6 col-xs-12'f>r>t<'row'<'col-md-4 col-xs-12'i><'col-md-8 col-xs-12'p>>",

});

}

console.log($._data($(".nextm").get(0),"events").click[0].handler);

펌 : 

http://stackoverflow.com/questions/11065358/find-attached-bound-events-of-an-element-using-chrome-development-tools-fire

style="position:absolute;left:50%; width:300px; overflow:hidden; margin-left:-100px;"

http://blog.daum.net/infominton/57

html,body

{

  height: 100%;

  padding: 0px;

  margin: 0px;

}

http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height

[HTML 내용 추가하기]

$(selector).append(content)

append() 메소드는 일치하는 HTML 엘리먼트 안에 컨텐츠를 추가시킵니다.

$(selector).prepend(content)

prepend() 메소드는 일치하는 HTML 엘리먼트 안의 내용 앞쪽에 컨텐츠를 추가시킵니다.

$(selector).after(content)

after() 메소드는 일치하는 모든 엘리먼트 뒤쪽에 HTML 내용을 삽입합니다.

$(selector).before(content)

before() 메소드는 일치하는 모든 엘리먼트 앞쪽에 HTML 내용을 삽입합니다.

[html 내용 제거하기]

$(selector).detach() – 지정한 요소를 포함 하위 요소 모두 제거

$(selector).empty() – 지정한 요소의 하위 요소를 제거

$(selector).remove() – 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

[html 내용 변경]

$(selector).html(content) → 선택한 엘리먼트의 HTML 내용을 변경한다

[참조]

http://findfun.tistory.com/255

http://blog.naver.com/PostView.nhn?blogId=topsaga&logNo=140155679866

http://blog.daum.net/haha25/5390044

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

http://stackoverflow.com/questions/9413737/how-to-append-script-script-in-javascript

1. checked 여부 확인

2. checked/unchecked 처리

3. 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제

전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택해주는 것을 만들어보자.

 전체선택

 1  2

이런식으로 html이 있고, javascript 부분은 

같이 해주면 된다.

[펌] http://hobbiez.tistory.com/321

var s = '';

var num = parseInt(s) || 0;

NaN은 if문으로 잡히지도 않는다._-;; 위와 같이 처리하든지, 아래 url 참조.

http://stackoverflow.com/questions/6736476/javascript-parseint-return-nan-for-empty-string

비록 현재 왕성한 액션 히어로의 역할로 웹의 커다란 한 부분을 담당하고 있는 JavaScript라도 그 결점은 있기 마련이고, 언젠가는 이러한 언어 설계상의 오류가 자기의 뒤통수를 때릴 때가 있을 것이다. 결국, 미리 알아서 조심해야지.

JavaScript에서 NaN 값은 not a number라는 뜻으로, 즉 숫자가 아니라는 의미이다. 하지만,

typeof NaN === 'number'    // true

이렇듯, typeof로는 NaN와 숫자를 구분할 수가 없거니와, 자신과의 비교도 불허한다.

NaN === NaN    // false
NaN !== NaN    // true

결국, JavaScript에서는 숫자와 NaN를 구분하는 isNaN라는 함수를 제공하고 있다:

isNaN(NaN)       // true
isNaN(0)         // false
isNaN('oops')    // true
isNaN('0')       // false

결국, 숫자를 구별하는 가장 확실한 방법으로 다음과 같은 함수가 쓰일 수 있겠다:

function isNumber(value) { 
    return typeof value === 'number' && isFinite(value);
}

typeof 얘기가 나와서 그러는데,

typeof null     // object

null 대신에 object를 돌려받는다. 그래서, null 값을 알아보기 위한 가장 좋은 방법은 아래와 같다:

my_value === null

또한, JavaScript의 Reserved Words는 보통 변수 이름으로 사용될 수 없는데, 굳이 reserved words를 object literals의 키 값으로 사용하려 할 경우에는, 항상 따옴표도 함께 써줘야 하고 dot notation 대신에 bracket notation을 사용해야 한다:

var method;                // ok
var class;                 // illegal
object = {box: value};     // ok
object = {case: value};    // illegal
object = {'case': value};  // ok
object.box = value;        // ok
object.case = value;       // illegal
object['case'] = value;    // ok

JavaScript는 프로그램 상 오류를 자동 수정하려는 성질이 있어서 문단 마지막에 항상 semicolons을 삽입하는데, 이것이 오히려 아래처럼 뜻하지 않는 문제를 일으킬 수도 있다.

return
{
    status: true
};

return 뒤에 바로 semicolon이 붙어버리면서 결국, undefined 값을 돌려주게 된다. 그래서 { 는 항상 아래처럼 앞 줄의 맨 마지막에 붙여주는 스타일을 손에 익혀야 한다.

return {
    status: true
};

그리고 string을 integer로 바꾸어주는 parseInt 함수를 사용할 때는 항상 radix 매개 변수를 사용하는 버릇을 들여서, 아래와 같이 뜻하지 않는 결과를 초래하는 일을 미연에 방지한다.

parseInt("08")      // 0
parseInt("09")      // 0
parseInt("08", 10)  // 8

또 하나, JavaScript의 소수점 계산은 형편없는 것으로 악명높다:

alert(0.1 + 0.2); // 0.30000000000000004

이것은 JavaScript만의 문제가 아니라, Binary Floating-Point Arithmetic(IEEE 754)을 채용한 언어들에서 공통적으로 나타나는 문제점으로, ECMAScript 4에서는 Real Decimals의 채용하면서 이를 극복할 수 있는 문제지만, 당분간은 미리 scaling 해서 이 문제를 피할 수 밖에.

다음은 JavaScript에서 사용되는 여러가지 "falsy" 값들이다:
0(Number), NaN(Number), "(String), false(Boolean), null(Object), undefined(Undefined).

모두 "falsy" 값을 가지지만 번갈아 서로 혼용되서 사용될 수는 없어서, 예를 들어 null값을 구하는데, undefined를 대신 사용하면 잘 못된 결과를 얻게 된다. 이 얘기는 자동 타입 변환(type coercion)을 일으키는 == 연산자 대신에 더 염격한 === 연산자를 사용하라는 얘기와 맞닿아 있다.

이 외에도, 실수든 혹은 필요에 의해서든 상호 운용성을 떨어뜨리는 global variables의 남용 등, JavaScript 문법 검사기인 JSLint를 한번 돌려 본 사람이라면 많은 골칫거리를 떠안게 된다. 하지만, 대부분의 골 때리는 일들은 잘못된 습관에서 비롯되는 경우가 많으므로 평소에 많은 코드를 접하면서 좋은 습관을 들이도록 노력하는 것이 중요할 것이다.

[펌] http://appletree.or.kr/blog/web-development/javascript/javascript%EC%9D%98-%EC%9D%B4%EB%9F%B0-%EC%A0%90%EC%9D%B4-%EB%92%A4%ED%86%B5%EC%88%98%EB%A5%BC-%EB%95%8C%EB%A6%AC%EB%8D%94%EB%9D%BC/

$("#selectBoxoption option:selected").val();

1. jQuery로 선택된 값 읽기

$("#selectBoxoption:selected").val();

$("select[name=name]").val();

2. jQuery로 선택된 내용 읽기

$("#selectBoxoption:selected").text();

3. 선택된 위치

var index =$("#test option").index($("#test option:selected"));

4. Addoptions to the end of a select

$("#selectBox").append("<optionvalue='1'>Apples</option>");

$("#selectBox").append("<optionvalue='2'>After Apples</option>");

5. Addoptions to the start of a select

$("#selectBox").prepend("<optionvalue='0'>Before Apples</option>");

6. Replaceall the options with new options

$("#selectBox").html("<optionvalue='1'>Some oranges</option><option value='2'>MoreOranges</option>");

7. Replaceitems at a certain index

$("#selectBoxoption:eq(1)").replaceWith("<option value='2'>Someapples</option>");

$("#selectBoxoption:eq(2)").replaceWith("<option value='3'>Somebananas</option>");

8. 지정된 index값으로 select 하기

$("#selectBoxoption:eq(2)").attr("selected", "selected");

9. text 값으로 select 하기

$("#selectBox").val("Someoranges").attr("selected", "selected");

10. value값으로 select 하기

$("#selectBox").val("2");

11. 지정된 인덱스값의 item 삭제

$("#selectBoxoption:eq(0)").remove();

12. 첫번째 item 삭제

$("#selectBoxoption:first").remove();

13. 마지막 item 삭제

$("#selectBoxoption:last").remove();

14. 선택된 옵션의 text 구하기

alert(!$("#selectBoxoption:selected").text());

15. 선택된 옵션의 value 구하기

alert(!$("#selectBoxoption:selected").val());

16. 선택된 옵션 index 구하기

alert(!$("#selectBoxoption").index($("#selectBox option:selected")));

17. SelecBox 아이템 갯수 구하기

alert(!$("#selectBoxoption").size());

18. 선택된 옵션 앞의 아이템 갯수

alert(!$("#selectBoxoption:selected").prevAl!l().size());

19. 선택된 옵션 후의 아이템 갯수

alert(!$("#selectBoxoption:selected").nextAll().size());

20. Insertan item in after a particular position

$("#selectBoxoption:eq(0)").after("<option value='4'>Somepears</option>");

21. Insertan item in before a particular position

$("#selectBoxoption:eq(3)").before("<option value='5'>Someapricots</option>");

22. Gettingvalues when item is selected

$("#selectBox").change(function(){

           alert(!$(this).val());

           alert(!$(this).children("option:selected").text());

});

출처 : http://blog.daum.net/twinsnow/124

[javascript] 새창 띄우기 ( window.open )

1. window.open(URL,WindowName[,WindowFeatures]);

1) URL

- 웹 문서 URL

2) WindowName

- open 창 이름

3) WindowFeatures

- fullscreen = 전체 창. (yes/no)(default : no)

- location = 주소창이 활성화. (yes/no)(default : yes)

- menubar = 메뉴바 visible. (yes/no)(default : yes)

- titlebar = 타이틀바. (yes/no)(default : yes)

- toolbar = 툴바. (yes/no)(default : yes)

- resizable = 창 사이즈 변경. (yes/no)(default : yes)

- scrollbars = 스크롤바. (yes/no)(default : yes)

- width = 창 가로 크기

- height = 창 세로 크기

2. 새창 띄우는 방법

3. 새창 닫기

[펌] http://rocabilly.tistory.com/84

웹페이지에서 어떤 링크를 클릭했을 때, 현재창으로 열리는 것과, 새창으로 열리는 것이 있습니다. 새창으로 열리게 하려면 그 링크 속에

target="_blank"

이런 속성을 추가해 주면 됩니다. 현재창으로 열리게 하려면, 위의 속성을 삭제하면 됩니다.

다음 예제와 같습니다. 그런데 다만 키보드의 Shift키를 누르면서, 어떤 링크를 클릭하면, 무조건 항상 새창으로 뜹니다.

새창으로 뜨게 하는 것이 편리할 수도 있지만, 새창 열기는 웹표준이 아닙니다. 파이어폭스 같은 탭브라우저에서는 새창 열기가 오히려 불편할 수도 있습니다

[펌] http://mwultong.blogspot.com/2008/04/html-new-win.html

jQuery에서 append()등의 함수를 사용하다보면 그동안 DOM을 얼마나 무식하게 만지고 있었는지 느끼게 됩니다. 하지만 이 append()를 사용 할 때도 잘 사용해야지 잘못하면 JavaScript의 실행 속도가 무지 느려지게 된다고 합니다.

일단 원문에서 사용한 예제를 하나 보여드리지요.

var arr = reallyLongArray;
$.each(arr, function(count, item) {
    var newTd = $('<td></td>').html(item).attr('name','pieTD');
    var newTr = $('<tr></tr>');
    newTr.append(newTd);
    $('table').append(newTr);
});

저도 위와 같이 append()되는 녀석들을 만들어서 append()합니다. 더 심하게 하면 $(‘<td></td>’)를 사용하지 않고 $(document.createElement(“td”))와 같이 사용합니다.

하지만 원문에서는 이렇게 하면 상당히 느리다네요. 그러면서 다음과 같이 했더니 3배 정도 더 빨라졌다고 합니다.

1
2
3
4
5

var arr = reallyLongArray; 
$.each(arr, function(count, item) {
    var newTr = '<tr><td name="pieTD">' + item + '</td></tr>';
    $('table').append(newTr);
});

뭐가 달라 보이시나요? … 네 append() 사용 수가 줄었습니다. 그리고 TD, TR을 각각 하나씩 만들어 append()하지 않고 내용을 한번에 만들어 append()를 하도록 했습니다. 즉, 완벽한 tr 하나를 만들어 table에 추가하도록 한것입니다.

엇! 실행 속도를 더 빨리 할 수 있는 것이 있다네요. 좀더 볼까요?

1
2
3
4
5
6

var arr = reallyLongArray; 
var textToInsert = '';
$.each(arr, function(count, item) {
    textToInsert  += '<tr><td name="pieTD">' + item + '</td></tr>';
});
$('table').append(textToInsert);

음… 위에 보시면 뭐가 달라졌는지 아시겠나요? … 네. 바로 append() 를 $.each() 함수 밖으로 빼버렸습니다. 즉, table에 추가되는 내용을 한번만 append()하도록 했습니다. 그렇게 하기 위해 추가되는 내용을 arr이라는 변수에 문자열로 담아 버렸군요. 오호. 문자열로 전부 담아버렸답니다.

엇! 조금더 빨리 하는 것이 있다네요. 더 볼까요?

1
2
3
4
5
6
7
8
9

var arr = reallyLongArray; 
var textToInsert = [];
var i = 0;
$.each(arr, function(count, item) {
    textToInsert[i++]  = '<tr><td name="pieTD">';
    textToInsert[i++] = item;
    textToInsert[i++] = '</td></tr>';
});
$('table').append(textToInsert.join(''));

아하~~ 아시겠나요? table에 들어가는 Elements들을 변수 하나에 넣지 않고 배열에 넣었군요. 들어가야 하는 내용이 아주아주 많은 경우 변수 하나에 문자열로 주~~욱 넣는것보다 배열로 나눠서 넣으면 속도가 조금 빨라지나 봅니다. 배열을 join해서 append 하는데 하나의 변수에 내용을 계속 추가하는 시간보다 배열로 저장하고 join()하는 시간이 더 짧게 걸리나 봅니다.

마지막으로 아래와 같이 하면 더 속도를 빨리 할 수 있다고 합니다.

1
2
3
4
5
6
7
8
9
10
11

var arr = reallyLongArray; 
var textToInsert = [];
var i = 0;
var length = arr.length;
for (var a = 0; a <length; a += 1) {
    textToInsert[i++]  = '<tr><td name="pieTD">';
    textToInsert[i++] = arr[a];
    textToInsert[i++] = '</td> </tr>' ;
 
}
$('table').append(textToInsert.join(''));

이번에는 뭐가 다를까요? … 네! $.each() 함수를 사용하지 않았습니다. $.each()함수도 어찌보면 jQuery 함수라 불필요한 로직이 있을 수 있습니다. 따라서 단순한 반복이라면 for문을 사용하는 것이 더 빠르다는 것이네요.

이상과 같이 append()할때 몇가지 사항을 적용해 주면 실행 속도가 상당히 빨라진다고 하니 상품목록을 생성하거나 RSS Item들을 생성할때 사용해 보면 좀더 빨라 질것 같네요.

아래 원문링크를 들어 가시면 브라우저별로 실행한 결과를 보실 수 있습니다. 또 각각의 예문의 실행 시간이 얼마나 되는지도 확인 하실 수 있습니다.

ps1: 원문에 달려 있는 코멘트 중에서 table에 들어가는 내용을 tbody태그로 둘러 싸서 아래와 같이 넣으면 tbody로 감싸지 않았을때보다 속도가 더 빨라진다고 합니다. 그것도 6배나 !!!!

$('#testTable').append('<tbody>' + newTr + '</tbody>');

[펌] http://devrada.tistory.com/61

크롬에서 Ajax를 내 마음대로

하이브리드 어프리케이션을 제작하다보면 API 서버와의 통신이 필요한 어플리케이션을 만들 경우가 있습니다. 이러할 경우 개발단계에서 크롬에서 크로스 도메인에 대한 보안을 해체하여 사용할 수 있는 방법이 있어서 소개해 드립니다.

크로스 도메인

웹브라우저에서의 보안정책 으로 서로 다른 도메인간의 양방향 정보 교환을 막아 놓은 것입니다.(보내는 것은 가능하지만 보낸 데이터의 결과를 읽는 것은 불가능)

문제점

개발 초기에 하이브리드 어플리케이션에서 API 서버를 통해서 json 파일을 ajax를 이용하여 호출을 하면 다음과 같은 오류가 발생 합니다.

위에서 말한 크로스 도메인 문제를 크롬 설정을 통해서 해제 할 수 있습니다.

Window

1. 실행 되어 있는 크롬 브라우저를 모두 종료해야 합니다.

2. 크롬 실행 파일을 우클릭 합니다.

3. Google Chrome 메뉴에서 우클릭 합니다.

4. Properties 메뉴를 선택 합니다.

5. Shortcut 메뉴의 Target을 선택합니다.

6. 맨뒤의 chrome.exe뒤에 한칸 띄우고 --disable-web-security를 입력 하여 줍니다.

7. OK 버튼을 선택해 저장을 합니다.

Mac

1. 실행 되어 있는 모든 크롬 브라우저를 종료 해야 합니다.

2. 터미널을 실행 시킵니다.

3. open -a Google\ Chrome --args --disable-web-security 다음 명령어를 입력하고 실행 합니다.

마무리

위의 방법대로 하면 크롬에서 자유롭게 서로다른 도메인이라도 데이터를 주고 받을 수 있습니다. 혹시 위의 방법대로 해도 안되는 분이 있으시다면 크롬을 완전히 종료하고 다시 실행을 하면 될 것입니다.

[펌] http://mhrinc.tistory.com/126