카테고리 보관물: Front-End Development

jQuery 1.7

jQuery 1.7 버전이 출시되었습니다.  (안녕 타코’s 님의 블로그 구경중 우연히 발견)
이벤트 처리를 위한 on(), off() 함수의 추가가 눈에 띄는 부분이고,
delageted 이벤트 전달 시간이 개선되었습니다.

http://code.jquery.com/jquery-1.7.js
http://code.jquery.com/jquery-1.7.min.js

jQuery 1.7에서는 다음과 같은 사항들이 추가 또는 개선되었습니다.

  • .on() .off() API 추가
  • Delegated 이벤트의 성능 향상
  • IE6/IE7/IE8에서 HTML5의 더 나은 지원
  • 토글링 애니메이션의 직관적인 동작
  • AMD(Asynchronous Module Definition) API 지원
  • jQuery.Deferred 객체 확장
  • jQuery.isNumeric() 추가 – 매개변수의 정수 여부 체크 함수

삭제된 내용은 다음과 같습니다.

  • event.layerX와 event.layerY 속성 제거
  • jQuery.isNaN() 함수 제거
  • jQuery.event.proxy() 함수 제거

[참고] http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Copy to Clipboard in Javascript

Javascript에서 Clipboard로 글자 및 링크주소를 복사할때 사용합니다.

IE와 다르게 비IE에는 clipboardData를 내장하고 있지 않기 때문에 별도 처리가 필요합니다.
플레시 라이브러리를 이용하는 방법도 있지만, 그건 너무 거창? 하고 추가로 파일을 로드해야 하므로,
아래와 같이 prompt로 구현 하는방법을 추천합니다.

function copyToClipboard() {
  var text = $('#download-link').html();
  if(window.clipboardData){  // IE처리 
    window.clipboardData.setData('text', text);
  }
  else {                     // 비IE 처리
    window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
  }
}

정규식 (Regular Expression)

(1) ^ (caret)
라인의 처음이나 문자열의 처음을 표시
예 : ^aa (문자열의 처음에 aa를 포함하면 참, 그렇지 않으면 거짓)

(2) $ (dollar)
라인의 끝이나 문자열의 끝을 표시
예 : aaa$ (문자열의 끝에 aaa를 포함하면 참, 그렇지 않으면 거짓)

(3) . (period)
임의의 한 문자를 표시
예 : ^a.c (문자열의 처음에 abc, adc, aZc 등은 참, aa 는 거짓)
예 : a..b$ (문자열의 끝에 aaab, abbb, azzb 등을 포함하면 참)

(4) [] (bracket)
문자의 집합이나 범위를 나타냄, 두 문자 사이의 범위는 “-” 사용.
[]내에서 “^”이 선행되면 not을 나타냄
예 : [abc] (a, b, c 중 어떤 문자, “[a-c].”과 동일)
예 : [Yy] (Y 또는 y)
예 : [A-Za-z0-9] (모든 알파벳과 숫자)
예 : [-A-Z]. (“-“(hyphen)과 모든 대문자)
예 : [^a-z] (소문자 이외의 문자)
예 : [^0-9] (숫자 이외의 문자)

(5) {} (brace)
{} 내의 숫자는 직전의 선행문자가 나타나는 횟수,범위를 나타냄
예 : a{3} (‘a’의 3번 반복인 aaa만 해당됨)
예 : a{3,} (‘a’가 3번 이상 반복인 aaa, aaaa,  … 등을 나타냄)
예 : a{3,5} (aaa, aaaa, aaaaa 만 해당됨)
예 : ab{2,3} (abb와 abbb 만 해당됨)
예 : [0-9]{2} (두 자리 숫자)
예 : doc[7-9]{2} (doc77, doc87, doc97 등이 해당)
예 : [^Zz]{3} (Z와 z를 포함하지 않는 5개의 문자열, abc, ttt 등)
예 : .{3,4}er (‘er’앞에 세 개 또는 네 개의 문자를 포함하는 문자열이므로 Peter, mother 등이 해당)

(6) * (asterisk)
“*” 직전의 선행문자가 0번 또는 여러번 나타나는 문자열
예 : ab*c (‘b’를 0번 또는 여러번 포함하므로 ac, abc, abbbc 등)
예 : * (선행문자가 없는 경우이므로 임의의 문자열 및 공백 문자열)
예 : .* (선행문자가 “.”이므로 하나이상의 문자를 포함하는 문자열)
예 : ab* (‘b’를 0번 또는 여러번 포함하므로 a, accc, abb 등)
예 : a* (‘a’를 0번 또는 여러번 포함하므로 k, kd, a, aa, abb 등)
예 : doc[7-9]* (doc7, doc777, doc778989, doc 등이 해당)
예 : [A-Z].* (대문자로만 이루어진 문자열)
예 : like.* (직전의 선행문자가 ‘.’이므로 like에 0 또는 하나 이상의 문자가 추가된 문자열이 됨, like, likely, liker, likelihood 등)

(7) + (Plus Sign)
“+” 직전의 선행문자가 1번 이상 나타나는 문자열
예 : ab+c (‘b’를 1번 또는 여러번 포함하므로 abc, abcd, abbc 등)
예 : ab+ (‘b’를 1번 또는 여러번 포함하므로 ab, abcc, abb 등)
예 : [A-Z]+ (대문자로만 이루어진 문자열)
예 : like.+ (직전의 선행문자가 ‘.’이므로 like에 하나 이상의 문자가 추가된 문자열이 됨, likely, liker, likelihood 등, 그러나 like는 해당안됨)

(8) ? (question mark)
“?” 직전의 선행문자가 0번 또는 1번 나타나는 문자열
예 : ab?c (‘b’를 0번 또는 1번 포함하므로 abc, abcd 만 해당됨)

(9) () (parenthesis)
()는 정규식내에서 패턴을 그룹화 할 때 사용

(10) | (bar)
or를 나타냄
예 : a|b|c (a, b, c 중 하나, 즉 [a-c]와 동일함)
예 : yes|Yes (yes나 Yes 중 하나, [yY]es와 동일함)
예 : korea|japan|chinese (korea, japan, chinese 중 하나)

(11) \ (backslash)
위에서 사용된 특수 문자들을 정규식내에서 문자로 취급하고 싶을 때 ‘\’를 선행시켜서 사용하면됨
예 : filename\.ext (“filename.ext”를 나타냄)
예 : [\?\[\\\]] (‘?’, ‘[‘, ‘\’, ‘]’ 중 하나)

Adobe Flash Media가 미설치된 PC처리

IE에서 Adobe Flash Player가 미설치된 상태

 

파이어폭스에서 Adobe Flash Player가 미설치된 상태


  
  
  
  

  1. IE에서는 classid, codebase속성이 있어야 미설치된 브라우저에서 “설치하세요” 라는 메시지가 노출됩니다.
    (비 IE 브라우저에서는 embed테그가 있으면 자동적으로 관련 플레이어 플러그인을 검색합니다.)
  2. 미디어경로를 2번 써주는 이유는 param은 IE, embed는 비 IE에서 인식합니다.
참고
  • classid = ActiveX 고유 식별자
  • codebase = <object>태그의 일종으로서 웹 브라우저에게 컴포넌트가 있는 곳을 알려주는 역할을 한다.