태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

=============================================================
키 | 자바스크립트 코드(숫자)
=============================================================

←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57
INSERT = 45
DELETE = 46

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93
0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109
F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123
NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

 

 


































출처 : http://Ssemi.net


'프로그래밍 > 자바스크립트' 카테고리의 다른 글

자바스크립트 event.keyCode  (0) 2016.04.26
jQuery selectBox 제어  (0) 2016.04.14
jQuery 자식 팝업 창에서 부모 창 컨트롤  (0) 2016.03.17
jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

1. jQuery로 선택된 값 읽기

 

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

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

 

2. jQuery로 선택된 내용 읽기

 

$("#selectBox option:selected").text();

 

3. 선택된 위치

 

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

 

4. Add options to the end of a select

 

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

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

 

5. Add options to the start of a select

 

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

 

6. Replace all the options with new options

 

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

 

7. Replace items at a certain index

 

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

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

 

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

 

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

 

9. text 값으로 select 하기

 

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

 

10. value값으로 select 하기

 

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

 

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

 

$("#selectBox option:eq(0)").remove();

 

12. 첫번째 item 삭제

 

$("#selectBox option:first").remove();

 

13. 마지막 item 삭제

 

$("#selectBox option:last").remove();

 

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

 

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

 

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

 

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

 

16. 선택된 옵션 index 구하기

 

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

 

17. SelecBox 아이템 갯수 구하기

 

alert(!$("#selectBox option").size());

 

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

 

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

 

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

 

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

 

20. Insert an item in after a particular position

 

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

 

21. Insert an item in before a particular position

 

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

 

22. Getting values when item is selected

 

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

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

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

});


'프로그래밍 > 자바스크립트' 카테고리의 다른 글

자바스크립트 event.keyCode  (0) 2016.04.26
jQuery selectBox 제어  (0) 2016.04.14
jQuery 자식 팝업 창에서 부모 창 컨트롤  (0) 2016.03.17
jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

jQuery 자식 팝업 창에서 부모창 컨트롤


$(opener.document).find("#Form").attr("action","index.do").submit();

자식창 -> 부모창으로 값 전달하기


-opener.document.getElementById("id").value="value"; //dom 객체로 제어

$("#id",opener.document).val("value"); // jQuery 방식 1

$("input[name=imgFile]", parent.document.body).val() // 방식 2

$(opener.document).find("#id").val("value"); //방식 3

 

- opener.location.href="javascript:fun();"; //일반적인 방법

$(opener.location).attr("href","javascript:fun();"); //jQuery 이용

출처 : http://jp1020.tistory.com/

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

자바스크립트 event.keyCode  (0) 2016.04.26
jQuery selectBox 제어  (0) 2016.04.14
jQuery 자식 팝업 창에서 부모 창 컨트롤  (0) 2016.03.17
jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

select text값 가져오기

$("#select_box option:selected").text();


jQuery로 선택된 값 읽기
$("#myselect option:selected").val();
$("select[name=name]").val();


jQuery로 선택된 내용 읽기
$("#myselect option:selected").text();


선택된 위치
var index = $("#test option").index($("#test option:selected"));


// Add options to the end of a select
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

 
// Add options to the start of a select
$("#myselect").prepend("<option value='0'>Before Apples</option>");
 

// Replace all the options with new options
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");
 

// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");
 

// 지정된 index 값으로 select 하기
$("#myselect option:eq(2)").attr("selected", "selected");
 

// text 값으로 select 하기
$("#myselect").val("Some oranges").attr("selected", "selected");
 

// value 값으로 select 하기
$("#myselect").val("2");
 

// 지정된 인덱스 값의 item 삭제
$("#myselect option:eq(0)").remove();
 

// 첫번째 item 삭제
$("#myselect option:first").remove();
 

// 마지막 item 삭제
$("#myselect option:last").remove();
 
 
// 선택된 옵션의 text 구하기
alert($("#myselect option:selected").text());
 

// 선택된 옵션의 value 구하기
alert($("#myselect option:selected").val());
 

// 선택된 옵션 index 구하기
alert($("#myselect option").index($("#myselect option:selected")));
 

// SelecBox 아이템 갯수 구하기
alert($("#myselect option").size());
 

// 선택된 옵션 앞의 아이템 갯수
alert($("#myselect option:selected").prevAll().size());
 

// 선택된 옵션 후의 아이템 갯수
alert($("#myselect option:selected").nextAll().size());
 

// Insert an item in after a particular position
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");
 

// Insert an item in before a particular position
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");
 

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});



radio button 관련

radio button 값 가져오기

.........

<input type="radio" name="radio" id="radio" value="ta">
<input type="radio" name="radio" id="radio" value="do">
<input type="radio" name="radio" id="radio" value="ch">
.........

jQuery("input:radio[name=radio]:checked").val();
 
.........

checkbox 관련

checkbox:<input type="checkbox" name="chk" id="chk" value="000000000" />

checkall:<input type="checkbox" name="checkall" id="checkall">

check box 모두 체크/해제 하기
jQuery(function(){
  $("input[name=checkall]:checkbox").click(function(){
    if($("input[name=checkall]:checkbox").is(":checked")){
    $("input[name=chk]:checkbox").attr("checked","checked");
    }else{
    $("input[name=chk]:checkbox").removeAttr("checked");
    }
  })
});

check box 체크된 값 가져오기
var  v = '';
var  c = 0;
for (var i = 0; i < $("input[name=chk]:checkbox").length; i++) {
  if ($("input[name=chk]:checkbox")[i].checked == true) {
    if(c>0) v = v + "|";
    v = v + $("input[name=chk]:checkbox")[i].value;
    c++;
  }


'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jQuery selectBox 제어  (0) 2016.04.14
jQuery 자식 팝업 창에서 부모 창 컨트롤  (0) 2016.03.17
jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

Regular Expressions in Java


java.util.regex package 에 있는 Matcher 클래스와 Pattern 클래스를 사용하여 문자열을 정규표현식으로 검증할수 있다.

     

http://www.javamex.com/tutorials/regular_expressions/pattern_matcher.shtml#.UfdJmo1M-X8


e.g. )  boolean b = Pattern.matches(“^[a-zA-Z0-9]*$”, this.input);

 

A.     정규표현식 설명


^ : 문자열의 시작을 나타냄. 

$ : 문자열의 종료를 나타냄. 

. : 임의의 한 문자를 나타냄. (문자의 종류는 가리지 않는다)

| : or를 나타냄. 

? : 앞 문자가 없거나 하나있음을 나타냄. 

+ : 앞 문자가 하나 이상임을 나타냄. 

* : 앞 문자가 없을 수도 무한정 많을 수도 있음을 나타냄. 

[] : 문자 클래스를 지정할 때 사용한다. 문자의 집합이나 범위를 나타내며 두 문자 사이는 '-' 기호로 범위를 나타낸다. []내에서 ^ 가 선행하여 나타나면 not 를 나타낸다. 

{} : 선행문자가 나타나는 횟수 또는 범위를 나타낸다. 

a{3} 인 경우 a가 3번 반복된 경우를 말하며, a{3,}이면 a가 3번 이상 반복인 경우를 말한다. 또한 a{3,5}인 경우 

a가 3번 이상 5번 이하 반복된 경우를 나타낸다. 

( ): 소괄호 ‘( )’ 특수문자는 ‘( )’ 특수문자 안의 글자들을 하나의 문자로 봅니다. 예를 들어 ‘gu(gg){2}le’ 와 같은 패턴을 작성하게 되면 ‘guggggle' 문자열이 문자열에 포함되어 있어야 됩니다.

|: 패턴 안에서 OR연산을 사용할 때 사용합니다. 예를 들어 'hi|hello' 는 hi 나 hello 가 포함되어있는 문자열을 의미합니다.

\w : 알파벳이나 숫자

\W : 알파벳이나 숫자를 제외한 문자

\d : 숫자 [0-9]와 동일

\D : 숫자를 제외한 모든 문자

\: 위의 각 기능에서 벗어납니다(escape).

(?i): 앞 부분에 (?i) 라는 옵션을 넣어주면 대소문자를 구분하지 않는다 (물음표+소문자i(아이))


B.     기본적인 문자열 검증 정규식


^[0-9]*$  :  숫자만

^[a-zA-Z]*$  :  영문자만

^[가-힣]*$  :  한글만

^[a-zA-Z0-9]*$  :  영어/숫자만

.+ : 한문자 이상의 전체문자를 표시한다.

C. 정규식 표현 예제


이메일 : ^[a-zA-Z0-9]+@[a-zA-Z0-9]+$  or  ^[_0-9a-zA-Z-]+@[0-9a-zA-Z-]+(.[_0-9a-zA-Z-]+)*$ 

휴대폰 :  ^01(?:01[6-9]) - (?:\d{3}\d{4}) - \d{4}$ 

일반전화 : ^\d{2,3} - \d{3,4} - \d{4}$

주민등록번호 : \d{6} \- [1-4]\d{6}

IP 주소 : ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3})

파일확장자: ([^\s]+(\.(?i)(jpg|png|gif|bmp))$)



1. 자바스크립트 정규표현식은 RegExp 객체로 표현됨.

2. RegExp 객체 생성방법

    1) RegExp() 생성자 사용

    2) 한쌍의 슬래시(/) 안에 리터럴을 기술

           --> var pattern = /s$/;        

           --> var pattern = new RegExp("s$");

                              : 's' 로 끝나는 문자열에 매칭됨


3. 정규표현식 리터럴 문자

    1) \0 : 널문자

    2) \t  : 탭

    3) \n : 줄바꿈

    4) \v : 수직탭

    5) \f  : 폼피드

    6) \r  : 캐리지리턴


4. 문자클래스 ( 대괄호로 둘러싼 개별 리터럴 문자 --> 대괄호내에 정의된 모든 문자에 매치됨)

    1) /[abc]/   : a,b,c 모두 매칭

    2) /[^abc]/  : a,,b,c 가 아닌 모든 문자에 매치

    3) /[a-z]/    : 임의의 알파벳 소문자에 매치

    4) /[a-zA-Z0-9]/   : 임의의 알파벳 대소문자 및 숫자에 매치

    5) 특수문자

          a) \s : Unicode 공백문자

          b) \S : Unicode 공백문자가 아닌 문자

          c) \w : ASCII 문자([a-zA-Z0-9]) 와 동일

          d) \W : ASCII 문자가 아닌 문자 ([^a-zA-Z0-9]) 와 동일

          e) \d  : ASCII 숫자([0-9]) 와 동일

          f) \D : ASCII 숫자가 아닌 문자([^0-9]) 와 동일

          g) \b : 백스페이스


               ==> /[\b]/    백스페이스에 매치됨.


               ==> /[\s\d]/  공백문자나 숫자 하나에 매치


5. 정규표현식 반복 문자 

      1) {n,m} n번이상 m번 보다 이하

      2) {n,}   n번이상

      3) {n}    딱 n번

      4) ?        0또는 한번 나타남  ({0,1}과 동일)          

      5) +        한번이상      ({1,}과 동일)

      6) *        0번이상       ({0,} 과 동일)


           ==> /\d{2,4}/    : 2에서 4자리 사이의 숫자와 매치


           ==> /\w{3}\d?/    : 정확히 3 문자와 매치 돠고 생략 가능한 숫자가 하나 있다.


           ==> /\s+java\s+/  : 앞뒤에 하나 이상의 공백이 있는 java 와 매치


           ==> /[^"]*/            : 0개 이상의 따옴표가 아닌 문자와 매치


6. 대체표현식 (|문자)  ==>  왼쪽에서 오른쪽으로 검색됨 (먼저 매치되면 뒤의 것은 매칭 안됨)

                    /ab|cd|ef/          : ab 문자열 또는 cd문자열 또는 ef문자열 매치

                    /d{3}|[a-z]{4}/  : 세자리 숫자나 네개의 소문자에 매치 

                    /a|ab/                : "ab" 에 적용되면 첫번째 표현식에만 매칭됨.


7. 그룹화 (소괄호)  : 

# 정규표현식 플래그

   i    : 대소문자 구별하지 않음

   g   : 전역매칭 수행 , 첫번째 매치에서 끝내지 않고 매치되는 모든 것을 찾는다.

   m  : 여러줄 상태


# 정규표현식 패턴 매칭을 위한 String 메서드

(1) search()  : - 정규표현식을 파라미터로 받아 가장 처음 매칭되는 부분 문자열의 위치를 리턴, 

                    - 파라미터가 정규표현식이 아니라면 RegExp()생성자로 정규표현식으로 변환된다. 

                     - 매칭되는 부분 문자열이 없다면 -1 리턴 

                     - 전역기능 지원안함. g플래그가 있다면 무시 


               "javaScript".search(/script/i);               ==>  4리턴


(2) replace() : - 찾아서 바꾸기 작업 수행

                      - 첫번째 파라미터 : 정규표현식 , 두번째 파라미터 :바꿀 문자열(두번째파라미터 함수가능,동적문자열가능)

                      - g플래그가 있으면 모두다 바꾸고, 없으면 첫번째 매치만 바꿈

                      - 첫번째 파라미터가 정규표현식이 아니면 주어진 문자열을 그대로 검색한다.

                      - 

                 text.replace(/javascript/gi,"JavaScript");           ==> 문자열의 대문자가 어떤상태던지 JavaScript로 변환한다.


(3) match()

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jQuery 자식 팝업 창에서 부모 창 컨트롤  (0) 2016.03.17
jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript">

 $(function(){
  var currentTop = parseInt($("#quickmenu").css("top"));
  $(window).scroll(function() {
   $("#quickmenu").stop().animate({"top": $(window).scrollTop()+currentTop+"px"}, 500);
  });
 });

</script>

 

- quick menu bar 부분

<div id="quickmenu" style="position:absolute; left:50%; top:100px; width:100px; margin-left:450px;">...</div>

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jquery radio, select, checkbox  (0) 2013.10.28
정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
jQuery 요약  (0) 2011.08.02
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.


if( navigator.appName.indexOf("Microsoft") > -1 ) // IE?

{

if( navigator.appVersion.indexOf("MSIE 6") > -1) // IE6?

{

// code

}

else if( navigator.appVersion.indexOf("MSIE 7") > -1) // IE7?

{

// code

}

}


출처 - http://www.dezrare.com/604


===================================================================================


1. 브라우저 헤더정보

<script language="javascript">

function userAgent()
{
var browserType = "";
if(navigator.userAgent.indexOf("MSIE") != -1)
{
browser = "IE";
return browserType;
}
if(navigator.userAgent.indexOf("Firefox") != -1)
{
browser = "FF";
return browserType;
}
if(navigator.userAgent.indexOf("Mozilla") != -1)
{
browser = "MZ";
return browserType;
}
if(navigator.userAgent.indexOf("Opera") != -1)
{
browser = "OP";
return browserType;
}
if(navigator.userAgent.indexOf("Safari") != -1)
{
browser = "SF";
return browserType;
}
if(navigator.userAgent.indexOf("Mac") != -1)
{
browser = "MC";
return browserType;
}

browser = "NG";
return browserType;
}
</script>

2. 객체존재여부
<script language="javascript">
function userAgent()
{
if(window.ActiveXobject){
browser = "IE";
return browserType;
}
else {
browser = "NG";
return browserType;
}
}
</script>


출처: http://blog.naver.com/cowboy0626/30007053474

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

정규 표현식 요약  (0) 2013.10.02
quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
jQuery 요약  (0) 2011.08.02
자바스크립트 실수 모음  (0) 2011.05.20
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.



자주 쓰이는 jQuery AJAX 예제
개발일정에 치여 도무지 블로깅 할 시간이 안나 미치겠네요. 새로운 것 정리하기는 힘들고 자주 사용하고 있는 Ajax 패턴 정리해 봅니다.
Ajax 구현할 때는 거의 jQuery 를 활용하고 있습니다. 모바일 웹 구현할 때 네이티브 앱과 같은 UX 를 위해 Ajax 를 많이 사용하게 됩니다.
■로그인
로그인은 보통 화면에서 폼 값을 입력한 후 해당 값과 함께 ajax 호출합니다.
호출된 액션에서 로그인 관련 인증 및 예외처리 프로세스를 돌인 후
인증 상태에 따라 결과 값을 출력합니다.
출력된 값에 따라 로그인 페이지에서 경고를 띄우든 다음 페이지로 진행하든 처리하죠.
ajax 루틴을 돌고 있을 때 사용할 로딩 바를 띄우는 작업도 함께 해주면 좀더 나은 UX 를 구현할 수 있겠죠.
- login view script
<script>
function checkLogin(){
   
    if( $.trim($("#userId").val()) == '' ){
        alert("아이디를 입력해 주세요.");
        $("#userId").focus();
        return;
    }
    if( $.trim($("#userPw").val()) == '' ){
        alert("비밀번호를 입력해 주세요.");
        $("#userPw").focus();
        return;
    }
    // 로그인 프로세스 호출
    $.ajax({
        type: 'post'
        , async: true
        , url: '/member.do?cmd=login'
        , data: $("#frm").serialize()
        , beforeSend: function() {
             $('#ajax_load_indicator').show().fadeIn('fast');
          }
        , success: function(data) {
            var response = data.trim();
            console.log("success forward : "+response);
            // 메세지 할당
            switch(response) {
                case "nomatch":
                    msg = "아이디 또는 비밀번호가 일치하지 않습니다."; break;
                case "fail":
                    msg = "로그인에 실패 했습니다."; break;
                default :
                    msg = "존재하지 않는 사용자입니다."; break;
            }
            // 분기 처리
            if(response=="success"){
                window.location.href = "${targetUrl}";
            } else {
                alert(msg);
            }
          }
        , error: function(data, status, err) {
         console.log("error forward : "+data);
            alert('서버와의 통신이 실패했습니다.');
          }
        , complete: function() {
         $('#ajax_load_indicator').fadeOut();
          }
    });
}
</script>
- login view html
<form id="frm" name="frm" method="post" action="" onSubmit="checkLogin();return false;">
    <fieldset>
        <legend>login</legend>
        <div class="login_item mg_top34">
            <label>id</label>
            <input id="userId" name="memberVo.xcWebMbrId" type="text" class="i_login" />
        </div>
        <div class="login_item mg_top10">
            <label>password</label>
            <input id="userPw" name="memberVo.xcPswd" type="password" class="i_login" />
        </div>
       
        <div id="ajax_load_indicator" style="display:none">
            <p style="text-align:center; padding:16px 0 0 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
        </div>
        <p class="keeping mg_left89">
            <input id="keepidpw" class="rd_box22" value="1" type="checkbox" name="idPswdSave" >
            <label for="keepidpw">ID/PW 저장</label>
        </p>
        <p class="keeping mg_left20">
            <input id="keepid" class="rd_box22" value="1" type="checkbox" name="idSave" >
            <label for="keepid">ID 저장</label>
        </p>
        <span class="btn_login">
            <input type="image" src="<%=imageUrl%>/btn/btn_login.jpg" title="로그인" onclick="checkLogin();return false;">
        </span>
        <p class="btn_register"><a href="/member.do?cmd=memberJoin"><img src="<%=imageUrl%>/btn/btn_join.jpg" alt="회원가입" /></a>
        <a href="/member.do?cmd=goIdPwFind" class="mg_left5"><img src="<%=imageUrl%>/btn/btn_sch.jpg" alt="아이디/비밀번호 찾기" /></a></p>
    </fieldset>
</form>
- login ajax result
<%@ include file="/mobile/common/include/config.jsp" %>
${result}
■내용 추가
페이지 하단으로 스크롤 이동했을 때 추가되는 자동으로 다음 페이지 데이터가 추가되는 UX를 구현할 때 사용하는 기법으로 jQuery 의 append() 함수를 사용할 수 있다.
- product list view script
<script>
function paging(){
    count++;
   
    $.ajax({
        type: 'post'
        , async: true
        , url: "/display.do?cmd=productListAppend&ordFlag="+'${ordFlag}'+"&categoryCd="+categoryCd+"&itemCode="+'${itemCode}'+"&count="+count
        , beforeSend: function() {
             $('#ajax_load_indicator').show().fadeIn('fast');
          }
        , success: function(data) {
            var response = data.trim();
            console.log("success forward : "+response);
            // 상품 리스트 할당
            $('#view_list').append(response);
            $('#product_count').html($('#view_list li.thumb').size());
          }
        , error: function(data, status, err) {
            console.log("error forward : "+data);
            alert('서버와의 통신이 실패했습니다.');
          }
        , complete: function() {
            $('#ajax_load_indicator').fadeOut();
          }
    });
}
</script>
- product list view html
<!-- 상품 목록 -->
<div id="view_list" class="product_list" style="display: none;">
<c:forEach var="list" items="${returnMap}">
  <a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
    <ul>
      <li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
      <li class="b_title"><span class="brand">[${list.brandNm }]</span><span class="title">${list.prodNm }</span></li>
      <li class="price">
      <c:if test="${list.priceDpYn eq 'Y'}">
      ${list.listPrice }원
      </c:if>
      <c:if test="${list.priceDpYn eq 'N'}">
      <span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
      </c:if>
      </li>
      <li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
    </ul>
  </a>
</c:forEach>
</div>
<div id="ajax_load_indicator" style="display:none">
    <p style="text-align:center; padding:14px 0 14px 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
</div>
   
<!-- 더보기 bar-->
<div class="more_bar">
<a href="javascript:paging()">
  <ul class="sec01">
    <li class="btn_arr"><img src="<%=imageUrl%>/common/arr_down.png" alt="" /></li>
    <li class="text_more">15개 더보기</li>
    <li class="text_num"><span id="product_count">${total}</span> / 999</li>
  </ul>
  </a>
  <p><a href="#"><img src="<%=imageUrl%>/btn/btn_top.jpg" alt="맨위로" /></a></p>
</div> 
- append view html
<%@ include file="/mobile/common/include/config.jsp"%>
<!-- 상품 목록 -->
<c:forEach var="list" items="${returnMap}">
    <a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
        <ul>
            <li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
            <li class="b_title"><span class="brand">[HAZZYS]</span><span
                class="title">${list.prodNm }</span></li>
            <li class="price">
            <c:if test="${list.priceDpYn eq 'Y'}">
            ${list.listPrice }원
            </c:if>
            <c:if test="${list.priceDpYn eq 'N'}">
            <span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
            </c:if>
            </li>
            <li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
        </ul>
    </a>
</c:forEach>

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
jQuery 요약  (0) 2011.08.02
자바스크립트 실수 모음  (0) 2011.05.20
자바스크립트 팁  (0) 2011.05.20
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.

[jQuery Cookbook - 1장 jQuery의 기초]

 

• jQuery는 HTML문서, 보다 정확하게는 문서객체모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈소스자바스크립트 라이브러리이다.
•jQuery의 철학 : Write less, do more (적게 작성하고, 보다 많이 한다)
•jQuery 선택자 : #은 id, .은 class
•jQuery('div').hide() => 모든 div를 숨긴다.
•jQuery('div').text('new content') => 모든 div의 내부텍스트를 변경한다.
•jQuery('div').addClass("updatedContent") => 모든 div에 updatedContent클래스를 추가한다.
•jQuery('div').show() => 모든 div를 나타낸다.
•jQuery 온라인문서 : http://docs.jquery.com/Main_Page
•문서에 jQuery 포함하기 (부가적인 기능향상을 위해 방법1을 사용하자!)
방법1 : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

방법2 : 다운로드 받아 포함시키기

•DOM 로드된 후 함수 실행 (로딩속도 향상을 위해 방법3을 사용하자!)

방법1 : jQuery(document).ready(function() { //실행구문 })

방법2 : jQuery(function() { //실행구문 })

방법3 : </body> 앞에 스크립트 추가

•DOM요소 선택

jQuery('a') => 모든 a요소 (== document.getElementsByTagName('a'))

jQuery('a').length => 모든 a요소의 개수

jQuery('input', $('form')) => 모든 form요소내의 input요소(들)

jQuery('input', document.forms[0]) => 첫번째 form요소내의 input요소(들)

jQuery('input', 'body') => body요소내의 input요소(들)

•DOM요소 필터링

jQuery('a').filter('.external') => 모든 a요소 중 클래스명이 external인 a요소(들) (== jQuery('a').filter(function(index) { return $(this).hasClass('external'); }))

jQuery('p').filter('.middle').end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 필터링 전 요소(들) (== jQuery('p'))

•파괴작업 (end()도 파괴작업의 이) : 일치된 jQuery요소집합에 변경을 가하는 모든 종류의 작업
•DOM요소 검색

jQuery('p').find('em') => 모든 p요소 하위의 em요소(들) (== jQuery('em', $('p')) ==jQuery('p em'))

jQuery('p').filter('.middle').find('span').end().end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 하위 span요소(들)의 검색 전, 필터링 전 요소(들)

(==jQuery('p'))

•filter는 현재 요소(들)에 대해, find는 하위 요소(들)에 대해 작동
•DOM 셀렉션 추가

jQuery('div').find('p').andSelf().css('border', '1px solid #993300'); => div요소(들)과 하위 p요소(들) 모두에 대해 스타일 적용

•DOM 탐색

jQuery('li:eq(1)') => 두번째 li 요소

관련메소드 => next():다음요소, prev():이전요소, parent():상위요소, children():하위요소들, nextAll():다음요소들, prevAll():이전요소들

jQuery('li:eq(1)').parent().children(':last') => 두번째 li요소의 상위요소의 마지막 하위요소

기타 탐색관련 메소드 : http://docs.jquery.com/Traversing

•DOM요소 생성

jQuery('<p><a>jQuery</a></p>'); => p요소 생성

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com'); => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body');

=> p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경 후 생성된 p 요소를 body요소 하위로 포함시킴

•DOM요소 제거

jQuery('a).remove(); => 모든 a요소 제거

jQuery('a').remove('.remove'); => 클래스명이 remove인 모든 a요소 제거

•DOM요소 교체

jQuery('li.remove').replaceWith('<li>removed</li>'); => 클래스명이 remove인 모든 li요소들을 뒤에 나온 li요소로 변경

•DOM요소 복제

jQuery('ul').clone().appendTo('body'); => 모든 ul요소들을 복제하여 body의 하위요소로 포함시킴

jQuery('ul#a li').click(function() { //실행구문 }).parent().clone(true).find('li').appendTo('#b').end().end().remove();

=> 아이디가 a인 ul 하위의 li요소들을 클릭하면 함수를 실행시키고 부모요소인 ul요소를 찾아 복제(true이면 이벤트까지도 복제됨)한 후 복제된 ul의

하위 li요소들을 찾아 아이디가 b인 요소의 하위요소로 포함시킨 후 기존 ul을 제거

•속성 제어

jQuery('a').attr('href', 'http://www.jquery.com').attr('href'); => 모든 a요소의 href속성의 값을 설정하고 가져옴

jQuery('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) => 모든 a요소의 href속성값과 title속성값을 설정

jQuery('a').removeAttr('title') => 모든 a요소의 title속성 제거

•class 조작

addClass() : 클래스 추가  hasClass() : 클래스 값 확인  removeClass() : 클래스 제거  toggleClass() : 클래스 없으면 추가, 있으면 제거

•HTML 컨텐츠 / 텍스트 조작

jQuery('p').html('<strong>Hello World</strong>'); => 모든 p요소에 html컨텐츠 삽입

jQuery('p').html(); => 모든 p요소의 html 가져옴

jQuery('p').text('Hello World'); => 모든 p요소에 text 삽입 (text메소드는 html을 escape한다)

jQuery('p').text(); => 모든 p요소의 text 가져옴

•전역적인 충돌 없이 $ 사용

(function($) {

})(jQuery);

 

 

[JQuery Cookbook - 2장 jQuery로 요소 선택하기]

 

• jQuery함수내에서 CSS셀렉터 사용
jQuery('#content p a'); => id가 content인 요소의 하위 모든 p요소의 하위 모든 a요소들
jQuery('#content p a').addClass('selected'); => 선택된 요소들에 selected 클래스 적용
•직속 자손 결합자 (>) : 계층적 관계
jQuery('#nav li > a'); => id가 nav인 요소의 하위 모든 li요소의 직속 자손인 a요소들

jQuery('> p', '#content'); => id가 content인 요소의 직속 자손인 p요소들 => jQuery('#content > p')와 같다

jQuery('#content').children(); => id가 content인 요소의 모든 직속 자손들 => jQuery('#content').find('> *');과 같다

jQuery('#content').children('p'); => id가 content인 요소의 모든 직속 p요소들

•인접 형제 결합자 (+) : 같은 레벨벨
jQuery('h1 + h2'); => h1요소에 인접한 h2요소들 => jQuery('h1').next('h2');와 같다
jQuery('h1').siblings('h2, h3, p'); => h1요소에 인접한 h2나 h3나 p 요소들
jQuery('li.selected').nextAll('li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
•일반 형제 결합자 (~)

jQuery('li.selected ~ li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들

•필터

◦:first 첫번째 선택요소
◦:last 마지막 선택요소
◦:even 짝수번째 요소들
◦:odd 홀수번째 요소들
◦:eq(n) 인덱스가 n인 요소
◦:lt(n) 인덱스가 n보다 작은 요소들
◦:gt(n) 인덱스가 n보다 큰 요소들

jQuery(':even'); => 문서내의 모든 짝수번째 요소들
jQuery('ul li').filter(':first'); => ul요소다음에 나오는 첫번째 li요소들

•현재 에니메이션 중인 요소 선택
jQuery('div:animated'); => 에니메이션 중인 div요소들

jQuery('div:not(div:animated)').animate({height:100}); => 에니메이션 중이 아닌 div요소들의 높이를 100까지 에니메이션

•텍스트나 요소를 포함하는 요소 선택

jQuery('span:contains("bob")'); => bob라는 문자열을 포함하는 span요소들

jQuery('div:has(p a)'); => p요소 하위에 a요소를 가진 div요소들

jQuery('p').filter(function() { return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); });

  => apple이나 orange나 lemon이라는 텍스트를 가진 p요소들

•일치되지 않는 요소 선택

jQuery('div:not(#content)'); => id가 content가 아닌 모든 div요소들

jQuery('a:not(div.important a, a.nav)'); => important클래스를 가진 div요소의 하위 a요소가 아니고 nav클래스를 가진 a요소가 아닌 a요소들

jQuery('a').click( function() { jQuery('a').not(this).addClass('not-clicked'); } ); => a요소를 클릭하면 모든 다른 a요소들에 not-clicked클래스 추가

$('#nav a').not('a.active'); => id가 nav인 요소의 하위 a요소들 중 active클래스를 가지지 않은 a요소들

•가시성 기반 요소 선택

jQuery('div:hidden'); => 눈에 보이지 않는 div요소들

•속성 기반 요소 선택

jQuery('a[href="http://google.com"]');=>href속성의 값이 http://google.com인 a요소들

jQuery('*[title][href]'); => title과 href 속성을 모두 가지는 요소들

jQuery('div[id^="content-sec-"]'); => id속성의 값이 content-sec-으로 시작하는 div요소들

•속성 셀렉터

◦[attr] 특정 속성을 가지고 있는 요소
◦[attr=val] 속성이 특정값을 가지는 요소
◦[attr!=val] 속성이 특정값을 가지지 않는 요소
◦[attr^=val] 속성이 특정값으로 시작하는 요소
◦[attr$=val] 속성이 특정값으로 끝나는 요소
◦[attr~=val] 공백과 함께 특정값을 포함하는 요소 (car는 car와 일치하지만 cart와는 불일치)
•폼요소 셀렉터

◦:text <input type="text" />
◦:password <input type="password" />
◦:radio <input type="radio" />
◦:checkbox <input type="checkbox" />
◦:submit <input type="submit" />
◦:image <input type="image" />
◦:reset <input type="reset" />
◦:button <input type="button" />
◦:file <input type="file" />
◦:hidden <input type="hidden" />
jQuery(':text'); => type속성의 값이 text인 모든 input요소들

jQuery(':input:not(:hidden)'); => 눈에 보여지는 모든 input요소들

jQuery(':text, :textarea'); => type속성의 값이 text이거나 textarea인 모든 input요소들

•특성을 갖는 요소 선택

jQuery('*').filter(function() { return !!jQuery(this).css('backgroundImage') });

=> 배경이미지를 갖는 모든 요소들

=> !!는 타입을 불린으로 변경하기 위함

=> jQuery함수의 인자인 this는 모든요소들(*) 중 filter에 인자로 전달되는 시점에 함수에 인자로 전달된 요소를 가리키는데

    요소를 jQuery함수의 인자로 넘겨 jQuery메소드를 사용할 수 있도록 함

jQuery('div').filter(function() { var width = jQuery(this).width(); return width>100&&width<200; });

=> 넓이가 100보다 크고 200보다 작은 모든 div요소들

•컨텍스트 매개변수

◦컨텍스트란 jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소
◦jQuery에 의해 사용되는 기본 컨텍스트는 DOM계층에서 최상위 항목인 document임. 즉, jQuery('p')는 jQuery('p', 'document')와 같다
jQuery('p', '#content'); => id가 content인 요소의 하위 p요소들 (이때 #content가 p의 컨텍스트) => jQuery('#content p');와 같다

jQuery('form').bind('submit', function() { var allInputs = jQuery('input', this); });

=> form요소들 중 submit이벤트가 일어나면 allinputs변수에 이벤트가 일어난 form의 모든 input요소들을 저장

[출처 네이버 블로그 - 달빛소년]

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
jQuery 요약  (0) 2011.08.02
자바스크립트 실수 모음  (0) 2011.05.20
자바스크립트 팁  (0) 2011.05.20
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.


1. for문 안의 배열 iterate
 
 Example:
 var myArray = [ “a”, “b”, “c” ];
 var totalElements = myArray.length;
 for (var i = 0; i < totalElements; i++) {
 console.log(myArray[i]);
 }


 Solution: always use regular for loops to iterate arrays.
 var myArray = [ “a”, “b”, “c” ];
 for (var i=0; i<myArray.length; i++) {
  console.log(myArray[i]);
 }
 
 << myArray 에 대한 간섭으로 인해 잘못된 정보를 참조할 수 있다고 하는 내용인데요...
    이글에 대한 많은 분들이 댓글 이슈를 달아주시기도 한 내용입니다.
 그럼 이슈가 무엇이였냐면요... 위 Example 에 대한 예시가 잘못되었다는 것이죠
 Example :
  for (var el in myArray){}
 Solution :
  for(var i = 0, iMax = myArray.length; i < iMax; i++){}
 이런 식으로 했어야 하였다는 이슈가 있더군요.
 
2. 배열 정의
 Example:
 var myArray = new Array(10);
 Solution: Use literal notation to initialize arrays. Do not predefine array length.
 var myArray = [];
 
 << 문제점 2개를 이야기 하는데요
      var a = new Array(10); // 빈 item 에 접근으로 인해 undefined 발생
  var a = {"","","","",....,""}; // 속도가 느린문제
  이런 문제를 앉고 있다고 하네요 >>
 
 
3. Undefined properties
 Example:
 var myObject = {
  someProperty: “value”,
  someOtherProperty: undefined
 }
 Solution: if you want to explicitly declare a uninitialized properties inside an object, mark them as null
 var myObject = {
  someProperty: “value”,
  someOtherProperty: null
 }
 
 << object 에 없는 값과 있으나 undefined 로 정의한 값을 구분할 수 없다는 이슈였습니다.
 typeof myObject['someOtherProperty'] // undefined
 typeof myObject['unknownProperty'] // undefined   >>
 


4. 클로저 오용
 Example:
 function(a, b, c) {
  var d = 10;
  var element = document.getElementById(‘myID’);
  element.onclick = (function(a, b, c, d) {
   return function() {
    alert (a + b + c + d);
   }
  })(a, b, c, d);
 }
 Solution: use closures to simplify your code
 function (a, b, c) {
  var d = 10;
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   //a, b, and c come from the outer function arguments.
   //d come from the outer function variable declarations.
   //and all of them are in my closure
   alert (a + b + c + d);
  };
 }
 
 << 변수에 대한 접근 범위를 몰라 중복해서 불필요한 파라미터를 정의하는 것을 말합니다. >>
 
5. loop 안의 클로져
 Example:
 var elements = document.getElementByTagName(‘div’);
 for (var i = 0; i<elements.length; i++) {
  elements[i].onclick = function() {
   alert(“Div number “ + i);
  }
 }
 Solution: use a second function to pass the correct value.
 var elements = document.getElementsByTagName(‘div’);
 for (var i = 0; i<elements.length; i++) {
  elements[i].onclick = (function(idx) { //Outer function
   return function() { //Inner function
    alert(“Div number “ + idx);
   }
  })(i);
 }


 << 내부 클로져의 경우 최종값 i 값을 참조한다는 문제였습니다. >>
 
6. DOM 으로인한 메모리 누수
 Example:
 function attachEvents() {
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   alert(“Element clicked”);
  }
 };
 attachEvents();
 Solution: avoid those closures or undo the circular reference inside the function
 function attachEvents() {
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   //Remove element, so function can be collected by GC
   delete element;
   alert(“Element clicked”);
  }
 };
 attachEvents();
 
 << 요소에 function이 참조로 걸려 해제가 되지 않는 문제를 다루고 있습니다. >>


7. float 과 integer의 구분
 Example:
 var myNumber = 3.5;
 var myResult = 3.5 + 1.0; //We use .0 to keep the result as float
 Solution: don’t use decimals to “convert” numbers to floats.
 var myNumber = 3.5;
 var myResult = 3.5 + 1; //Result is 4.5, as expected
 
 << 자바스크립트 float 과 integer 구분이 없습니다. 모두 float 입니다. >>
 
8. with() 사용
 Example:
 team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};
 with (team.attackers.myWarrior){
  console.log ( “Your warrior power is ” + (attack * speed));
 }
 Solution: don’t use with() for shortcuts. Only for context injection when you really need it.
 team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};
 var sc = team.attackers.myWarrior;
 console.log(“Your warrior power is ” + (sc.attack * sc.speed));


 << with() 는 특별한 경우가 아니면 사용하지 말라는 내용입니다. 이유는 느리기 때문입니다. >>
 
9. 문자 조합을 이용한 setTimeout/setInterval
 Example:
 function log1() { console.log(document.location); }
 function log2(arg) { console.log(arg); }
 var myValue = “test”;
 setTimeout(“log1()”, 100);
 setTimeout(“log2(” + myValue + “)”, 200);
 Solution: never use strings for setTimeout()or setInterval()
 function log1() { console.log(document.location); }
 function log2(arg) { console.log(arg); }
 var myValue = “test”;
 setTimeout(log1, 100); //Reference to a function
 setTimeout(function(){ //Get arg value using closures
  log2(arg);
 }, 200);
 
 << 스트링 조합을 사용할 경우 웹브라우저 엔진이 새로운 function 을 만들때 매우 느려지기때문에
    이렇게 사용하지 말라고 말합니다. >>
 
10. 무거운 funcation에 대한 setInterval() 사용
 Example:
 function domOperations() {
  //Heavy DOM operations, takes about 300ms
 }
 setInterval(domOperations, 200);
 Solution: avoid setInterval(), use setTimeout()
 function domOperations() {
  //Heavy DOM operations, takes about 300ms
  //After all the job is done, set another timeout for 200 ms
  setTimeout(domOperations, 200);
 }
 setTimeout(domOperations, 200);


 <<  자바 스크립트 엔진은  대기열에 이미 다른 실행이있다면 다음 실행 대기열에 추가합니다.
  이럴경우 function 을 건너뛰거나 동시에 실행될 소지가 발생합니다. >>
 >>
11. this 의 오용
 - 예로 표현하기 어려움.
 * Regular function: myFunction(‘arg1’);
 this points to the global object, wich is window for all browers.
 * Method: someObject.myFunction(‘arg1’);
 this points to object before the dot, someObject in this case.
 * Constructor: var something = new myFunction(‘arg1’);
 this points to an empty Object.
 * Using call()/apply(): myFunction.call(someObject, ‘arg1’);
 this points to the object passed as first argument.
 
 << 여기에 대해서는 궁금하네요...접근에 대한 이슈같아 보입니다. >>
 
12. eval() 을 이용한 dynamic properties 접근
 Example:
 var myObject = { p1: 1, p2: 2, p3: 3};
 var i = 2;
 var myResult = eval(‘myObject.p’+i);
 Solution: use square bracket notation instead of eval()
 var myObject = { p1: 1, p2: 2, p3: 3};
 var i = 2;
 var myResult = myObject[“p”+i];
 
 << eval() 대신에 배열을 이용해서 접근하라는 말입니다. >>
 
13. undefined 를 사용하는 변수
 Example:
 if ( myVar === undefined ) {
  //Do something
 }
 Solution: use typeof when checking for undefined.
 if ( typeof myVar === “undefined” ) {
  //Do something
 }
 
 << undefined 확인하기위해서는 typeof 를 사용하라는 것입니다. >>
 


 

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

quick menu 바  (0) 2013.07.19
javascript 브라우저 종류  (0) 2012.11.23
자주 쓰이는 JQuery Ajax 예제  (0) 2011.08.02
jQuery 요약  (0) 2011.08.02
자바스크립트 실수 모음  (0) 2011.05.20
자바스크립트 팁  (0) 2011.05.20
블로그 이미지

구본숭 하늘을사랑한사람

진실된 사람으로 태어 나기 위한 조건들, 사랑하기 위해 필요한 것을 찾습니다.