336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

jQuery(document).ready(function() { 

    var tableHeight = jQuery("table").height(); 

    alert(tableHeight); 

}); 







$("table tr:eq(0)").height(); // 첫번째 높이 가져오기 
$("table tr:eq(0)").height("높이") //첫번째 높이 설정





Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<script type="text/javascript">

    /* 금액 한글배열 */

    var nString = new Array();

    nString[0] = "";

    nString[1] = "일";

    nString[2] = "이";

    nString[3] = "삼";

    nString[4] = "사";

    nString[5] = "오";

    nString[6] = "육";

    nString[7] = "칠";

    nString[8] = "팔";

    nString[9] = "구";

    /* 금액단위 한글배열 */

    var nbString = new Array();

    nbString[0] = "";

    nbString[1] = "";

    nbString[2] = "십";

    nbString[3] = "백";

    nbString[4] = "천";

    nbString[5] = "만";

    nbString[6] = "십";

    nbString[7] = "백";

    nbString[8] = "천";

    nbString[9] = "억";

    nbString[10] = "십";

    nbString[11] = "백";

    nbString[12] = "천";

    nbString[13] = "조";

    nbString[14] = "십";

    nbString[15] = "백";

    nbString[16] = "천";


    function NumberString(obj) {

        var nStr = document.getElementById("nStr");

        var str = obj.value;

        var strCode = "";

        var codeStr = "";

        var nHan = "";

        var cnt = 0;

        /* 천조이상이면 */

        if (str.length > 16) {

            //alert("한글 표현은 천조 이하에 금액까지 가능합니다.");   

            //경고창 후 마지막 입력값 제거 필요 귀찮아서 안함!! ㅡㅡ;   

            return false;

        }

        /* 뒷자리부터 루프 */

        for (var i = str.length; i > 0; i--) {

            /* 유니코드 구하기 */

            strCode = str.charCodeAt(i - 1);

            /* 숫자가 맞다면 */

            if (strCode >= 48 && strCode <= 57) {

                cnt++; // 단위계산을 위해 카운팅   

                codeStr = Number(String.fromCharCode(strCode)); // Number형으로   

                if (codeStr != 1) {

                    if (codeStr == 0) {

                        if (cnt / 5 == 1) { // 만단위표현   

                            nHan = nbString[5] + nHan;

                        } else if (cnt / 9 == 1) { // 억단위표현   

                            nHan = nbString[9] + nHan;

                        } else if (cnt / 13 == 1) { // 조단위 표현   

                            nHan = nbString[13] + nHan;

                        }

                    } else {

                        /* 0이 아니면 입력값에 한글과 단위 */

                        nHan = nString[codeStr] + nbString[cnt] + nHan;

                    }

                } else if (codeStr == 1 && i == str.length) {

                    /* 1이고 마지막입력값이면 한글 일 표현 */

                    nHan = nString[codeStr] + nHan;

                } else {

                    if (codeStr == 1 && i == 1 && (cnt == 9 || cnt == 13)) {

                        /**  

                        *    입력값이 1이고 첫입력값이며 단위가 억이거나 조이면   

                        *    예) 일억 또는 일조   

                        *    억이하 단위에선 일을 표현안되기 때문에 일백만원을 백만원 일십만원을 십만원으로 표현되고  

                        *    억, 조 단위는 일억원 일조원 으로 표현하기 위해  

                        */

                        nHan = nString[codeStr] + nbString[cnt] + nHan;

                    } else {

                        nHan = nbString[cnt] + nHan;

                    }

                }

                /* 단위표현에서 억만, 조억에 두번째 단위 제거 (이거 때문에 삽질했네..) */

                nHan = nHan.replace('억만', '억').replace('조억', '조');

            } else {

                //alert("숫자로 입력하세요.");   

                //경고창 후 마지막 입력값 제거 필요 귀찮아서 안함!! ㅡㅡ;   

                return false;

            }

        }

        nStr.innerHTML = nHan + "원";

    }   

</script> 


Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

document).on("이벤트", "이벤트발생객체", function(){

// 동작 삽입
});

 

$(document).on("change", "#BIZ_IDX", function() {

    alert("동적 이벤트");

});



Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

/*

** 폼

**

** <input type="text" numberonly="true" />  // 숫자만 입력 가능한 텍스트박스

** <input type="text" datetimeonly="true" /> // 숫자, 콜론(:), 하이픈(-)만 입력 가능한 텍스트박스

*/

$(function()

{

 $(document).on("keyup", "input:text[numberOnly]", function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );});

 $(document).on("keyup", "input:text[datetimeOnly]", function() {$(this).val( $(this).val().replace(/[^0-9:\-]/gi,"") );});

});


Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


javascript에서 숫자를 문자로 ... 문자를 숫자로 변경



자바코드를 자바스크립트로 변경하는 작업을 하면서 ... 문자로 인식된 숫자들을 덧샘을 해야할 경우가 생겼다.. 


그래서 문자->숫자 ,  숫자->문자 로 변경하는 방법을 알아 보았다.. 

Javascript에서 문자를 숫자로 변경하기 

<Script language="javascript"> 

var str1 = '10'; 

var str2 = '20'; 

var num1 = Number(str1) + Number(str2); 

document.write(num1); 

</Script> 

출력하면 30이 나온다 



Javascript에서 숫자를 문자로 변경하기 

<Script language="javascript"> 

var num1 = 20; 

var num2 = 10; 

var str1 = num1.toString() + num2.toString(); 

document.writr(str1); 

</script> 

출력하면 2010이 나온다.



'IT > jquery_javascript' 카테고리의 다른 글

jquery 동적 이벤트(dynamic event). ㅋㅋ 맞나?  (0) 2014.06.23
jquery 숫자만 입력 가능 정규식  (1) 2014.05.22
jQuery Radio  (0) 2014.03.11
jquery 숫자 여부 체크 isNumeric  (0) 2014.02.13
jquery each callback function  (0) 2014.02.13
Posted by 당양부부34

2014. 3. 11. 15:20 IT/jquery_javascript

jQuery Radio

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. radio 버튼 에서 체크된 값 가져오기.
var mailTp = $(':radio[name="mailTp"]:checked').val();

2. radio 버튼 값 체크하기
$('input:radio[name=mailTp]:input[value='+mailTp+']').attr("checked", true);

Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

jQuery.isNumeric( value )Returns : Boolean

개요 : 인자가 숫자인지 판별합니다.

  • jQuery.isNumeric( value )
  • value 숫자인지 확인할 인자

$.isNumeric() 함수는 인자가 숫자 값인지 확인합니다. 숫자라면 true. 아니라면 false를 반환합니다. 인자는 뭐든지 사용가능합니다. 16진수도 체크 가능하네요.

예 제  
다양한 값들을 체크해 봅니다.

$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (octal integer literal)
$.isNumeric("");     // false
$.isNumeric({});     // false (empty object)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

jQuery.each ( callback )

 

jQuery에서 for, while 문과 비슷한 역할을 하는 each 메소드 사용 시

break, continue와 같은 프로세스를 수행해야 할 때가 있다.

 

그럴 때 return true;는 continue와 같은 역할을, return false; break와 같은

역할을 수행한다.

 

예제 >>

 

$('#loop').each ( function() {

  if ( i==0 ) return true; // continue;

  else return false; // break;

} );

Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

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());

});

Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

필자는 최전방 개발자로서 자바스크립트를 사용하는 사람들을 많이 만난다. 이들 대부분은 주로 jQuery와 몇 가지 플러그인을 사용해 멋진 라이트박스 효과나 이미지 슬라이더를 추가하는 정도의 작업을 하지만, 그중 일부는 키보드 위로 손을 올려 놓기만 해도 코드가 저절로 써진다는 ‘제다이’급 개발자들이 있다.

이 두 가지 기술 수준의 중간 어딘가에 있는 사람은 때로 어떻게 해야 할지 모르는 상황에 부닥친다. 전문적인 지식을 찾는 길은 많다. 지금 구덩이에 빠져 도움이 필요하다면 모든 자바스크립트 전문가가 알아야 하는 다음과 같은 몇 가지 개념을 살펴보라.

자바스크립트 비밀 1: 클로저(Closures)
자바스크립트의 클로저는 함수에 부모 함수의 범위에 대한 접근성을 제공한다. 개발자에게는 극히 혼란스러운 개념이다. 필자는 자바스크립트를 배울 당시 의도하지 않은 클로저로 인해 코드를 디버깅하는 데 몇 시간을 소비한 적이 있다. 이런 실수를 통해 배운 이후에는 클로저가 상당히 멋지다고 생각했고 다시 몇 시간 동안 클로저를 사용하여 문제를 해결하려 헛되이 노력하기도 했다.

결국, 배운 것은 클로저는 부모 범위에 대한 접근성을 가진 안쪽 함수(아래 고차 함수 참조)를 반환할 때 유용하다는 점이다. 이로써 변수를 보관하기 위한 일종의 비공개, 또는 보호된 환경이 만들어진다. 아래 예에서 count는 threeTimer가 호출될 때 접근 및 증분되며, 점이나 괄호 기호를 통해 직접 접근할 수는 없다.

// **Closures**
function makeThreeTimer(){
var count = 0;
return function(){
if(count < 3){
console.log('doing work');
count++;
}
else {
throw new Error('No more work');
}
}
}
var threeTimer = makeThreeTimer();
threeTimer(); // logs 'doing work' (count gets incremented)
threeTimer(); // logs 'doing work' (count gets incremented)
threeTimer(); // logs 'doing work' (count gets incremented)
threeTimer(); // throws an error
threeTimer.count; // returns undefined


자바스크립트 비밀 2: 고차 함수
기능적 프로그래밍 언어에서 함수는 1급 구성원이다. 다른 모든 값과 마찬가지로 전달할 수 있으며 이로써 흥미로운 가능성이 열린다. 고차 함수는 다른 함수를 소비 또는 생산하는 함수를 말한다. call 또는 bind와 같은 function 프로토타입의 메소드는 모두 고차 함수다. 커링(currying), 메모이제이션(memoization)과 같은 기법을 고차 함수로 표현할 수 있다. 자바스크립트에서 고차 함수를 사용하면 관점 지향 프로그래밍(Aspect-oriented programming)도 가능하다.

자바스크립트 비밀 3: 함수 호출
함수를 호출하는 가장 일반적인 방법(괄호 연산자를 사용하는 방법)을 이해한 다음에는 call과 apply를 사용하는 방법을 배울 차례다. 괄호 연산자 대비 call/apply를 사용할 때의 장점은 함수가 실행되는 컨텍스트를 지정할 수 있다는 점이다(this의 값). 이러한 형태는 고차 함수, 특히 이러한 고차 함수가 나중에 실행되는 함수를 소비할 때 볼 수 있다. Function 프로토타입에서 bing 메소드의 내부는 call/apply의 훌륭한 예다.

// Possible implementation of bind using apply
function bind(func, context){
return function(){
func.apply(context, Array.prototype.slice.apply(arguments));
}
}


자바스크립트 비밀 4: this는 무엇인가?
this 키워드는 많은 자바스크립트 개발자에게 큰 장애물로, 어떤 사람들은 아예 이 키워드를 외면한다. 필자가 지금까지 접한 이 키워드에 대한 최고의 설명은 예후다 캐츠가 함수 호출에 대한 블로그에 쓴 글이다. call/apply 또는 bind를 사용하지 않을 경우 this 값은 다음과 같은 경우를 제외하고 항상 전역 객체를 참조한다.

1. 문제의 함수가 새로운 연산자를 사용하여 호출된 경우, 현재 만들어지고 있는 새로운 객체를 가리킨다.
2. 문제의 함수가 객체의 멤버인 경우, 이 객체를 가리킨다.

단, 호출되는 함수가 클릭 핸들러 또는 setTimeout 등에서 비동기적으로 호출될 때는 2번 규칙을 무시해야 한다. 다음을 참고하라.

Person.getName(); // 'this' points to Person
setTimeout(Person.getName, 1000); // 'this' points to the global object
JavaScript secret No. 5: Protecting the global scope


자바스크립트 비밀 5: 전역 범위 보호
자바스크립트의 결함 중 하나는 페이지의 모든 스크립트가 공유되는 전역 컨텍스트에서 실행된다는 점이다. 이 결함이 악용될 경우 웹 사이트는 교차 사이트 스크립팅 공격에 취약하게 된다. 공유 전역 컨텍스트는 다른 문제도 일으킨다. 예를 들어 많은 스크립트가 한 페이지에서 실행되는데, 모든 스크립트를 개발자가 결정하는 것은 아니다(광고 스크립트 등이 대표적이다). 이 스크립트들은 전역 공간에서 실행되며 모두 같은 전역 변수에 접근할 수 있다. 이러한 스크립트 두 개가 같은 전역 변수를 사용하게 되면 서로 간섭하기 시작하고, 그러면 코드는 망가지게 된다.

전역 범위의 사용을 최소화하는 것은 간섭을 막고 긴 디버깅 시간을 줄이는 데 도움이 되는 방어적 기법이다. 변수를 전역적으로 저장하는 것을 완전히 없앨 수는 없지만 네임스페이싱과 같은 기법을 사용하면 최소화할 수 있다.

// **Namespacing**
// The global footprint is a single object containing
// all other references needed.

var MyApp = {};

MyApp.id = 42;
MyApp.utils = {
validate: function(){
//do work
}
};


또는 모듈 패턴도 있다.

// **Module pattern**
// This relies on immediately invoked anonymous functions and the
// closure they create to maintain access to variables within the
// function.

var MyApp = (function(){
//declare a local variable
var appId = 42;

function getAppId(){
//referring to a variable in this function's parent scope
return appId;
}

return {
getAppId: getAppId
};
}());

appId; // undefined
MyApp.appId; //undefined
MyApp.getAppId(); // returns 42. (Brought to you by closures)
JavaScript secret No. 6: Inheritance


자바스크립트 비밀 6: 상속
자바스크립트에서 상속은 여러 가지 이유로 긴 혼란의 역사를 갖고 있다. 대부분 개발자(필자가 만난 많은 자바스크립트 개발자들 포함)들은 클래스 모델을 충실하게 이해하지만, 프로토타입 모델에 대해서는 매우 혼란스러워한다. 프로토타입 상속을 사용하는 언어 목록을 살펴보고 나면 아마 이러한 현상을 이해할 수 있을 것이다.

자바스크립트를 제외한 다른 주류 언어에는 프로토타입 상속이 없다. 게다가 자바스크립트에서는 클래스 모델을 에뮬레이션하는 것이 가능하다. 그 결과 상속에 대한 접근 방식이 매우 다양하며, 이들 중 상당수가 독선적, 모순적이다. 의사 클래스 방식(pseudo-classical approach)은 자바스크립트의 함정 중 하나이므로 필자는 절대 사용하지 말 것을 제안한다. 대부분 개발자에게 친숙하게 보이겠지만 사실 근사치일 뿐이므로 금방 깨진다. editor@itworld.co.kr

'IT > jquery_javascript' 카테고리의 다른 글

jquery each callback function  (0) 2014.02.13
jQuery Select Box  (0) 2014.02.10
mouseover 와 mouseenter 의 차이점  (0) 2013.09.03
jquery select selector  (0) 2013.08.23
DOM Script 정리  (0) 2013.08.21
Posted by 당양부부34
이전버튼 1 2 3 4 5 이전버튼

블로그 이미지
주요 토렌트를 블로깅하고 있습니다. 토렌트 순위 등은 다른 사이트를 찾아보세요. 주요 웹툰 순위도 게재했어요 경제를 좋아하는 일산의 행복한 프로그래머입니다.
당양부부34
Yesterday
Today
Total

달력

 « |  » 2024.3
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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함