'Develop/CLIENT SIDE'에 해당되는 글 6건
- 2011.10.19 Aptana ExtJs + JQuery Code assist 방법
- 2010.12.16 CSS3 Transform & Matrix Filter (개체 회전)
- 2010.12.16 자바스크립트의 나쁜 점들 (더글라스 클락포드)
- 2010.12.16 정규 표현식 (Regular Expression)
- 2010.12.16 가상 클래스와 가상 요소
- 2010.12.16 선택자 (Selector)
2. Aptana Studio JavaScript Library Support
http://wiki.appcelerator.org/display/tis/JavaScript+Library+Support#JavaScriptLibrarySupport-ExtJS%2FSencha%28
(지원되는 JavaScript Library의 정보 및 사용법을 제공하고 있으며, 그중 ExtJS, JQuery 사용법 정리)
3. ExtJS Code Assist 방법
1) ExtJS 3.3.0 sdocml 파일 다운로드 : https://raw.github.com/aptana/sencha.ruble/master/support/ext-js-3.3.0.sdocml
2) ExtJS를 사용할 프로젝트의 루트 경로에 위치 시킴
(ExtJS 4는 아직 공식 지원 안하는 것 같음... 방법 있으면 알려주세요 ^^;;)
4. JQuery Code Assist 방법
1) Eclipse의 Commands --> Bundle Development --> Update User Bundles --> JQuery를 선택한 후 OK 버튼을 클릭하여 설치
2) JQuery를 사용할 프로젝트 우클릭 Properties --> Project Build Path 에서 사용할 JQeury version 선택
4) Aptana Studio 3.0.5 version 이하일 경우
'Develop > CLIENT SIDE' 카테고리의 다른 글
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
---|---|
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
text-size : 16px;
width: 220px;
height: 70px;
-moz-transform: rotate(15deg) translateX(230px) scale(1.5);
-o-transform: rotate(15deg) translateX(230px) scale(1.5);
-webkit-transform: rotate(15deg) translateX(230) scale(1.5);
transform: rotate(15deg) translateX(230px) scale(1.5);
/* IE Only */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand');
margin-left: 156px;
margin-top: -2px;
rotate로의 회전은 회전축이 중심에 있다. IE Matrix Filter의 사용 시에 회전축을
var degToRad = function(x) { return ( x/(360/(2*pi)) ); }
var radToDeg = function(x) { return ( x*(360/(2*pi)) ); }
var setPosXY = function() {
var rotate = function(name) {
el.filters.item('DXImageTransform.Microsoft.Matrix').FilterType = 'bilinear';
el.filters.item('DXImageTransform.Microsoft.Matrix').M11 = costheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M12 = -sintheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M21 = sintheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M22 = costheta;
//원래대로 ..
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
1. ==/!=
'' == '0' //false
0 == '' //true
0 == '0' //true
false == 'false' //false
false == undefined //false
false == null //false
null == undefined //true
데이터의 타입이 같고 같은 값인지를 비교하기 위해 ===/!== 를 사용해야 합니다.
다음과 같은 with 문은,
with (obj) { a = b; }
다음과 같은 의미입니다.
if (obj.a === undefined) { a = obj.b === undefined ? b : obj.b; } else { obj.a = obj.b === undefined ? b : obj.b; }
그래서 결국 이 with 문은 다음의 문장들 중에 하나와 같게 됩니다.
a = b;
a = obj.b;
obj.a = b;
obj.a = obj.b
이 문장들 중에 어떤 문장으로 실행될지는 프로그램을 봐서는 알 수 없습니다.
eval 함수는 문자열을 자바스크립트 컴파일러에 넘긴 후 그 결과를 실행시킵니다.
이는 심각한 성능저하의 요인이 됩니다. 또한 eval 함수는 보안상의 치명적인 문제점을 가지고 있습니다. 하지만, 서버로부터 전달된 JSON 텍스트를 파싱하기 위해 eval 함수를 사용할 수 있습니다. 서버로부터 문제없이 전달된 텍스트를 eval 함수로 파싱하는 것은 HTML이 로드되는 것처럼 안전합니다.
※ 지금은 그렇지 않겠지만, 자바스크립트를 처음 접했을때 객체를 얻기 위한 방법으로 eval 함수를 남용한 코드를 많이 보아왔습니다.
continue 문은 루프의 처음으로 제어를 이동 시키고 이러한 방식은 성능저하의 원인이 됩니다.
각각의 case절은 명시적으로 벗어나게 하지 않으면 다음 case절 까지 계속해서 실행됩니다.
다음의 의미가 아니라,
증감 연산자를 사용하면 코드를 매우 간결하게 작성 할 수 있습니다. 하지만 심각한 보안 취약점을 만드는 대부분의 버퍼 오버런 버그는 이와 같은 스타일의 코드 때문에 발생합니다.
&, |, ^, ~, >>, >>>, << 등의 비트 연산자는 정수에 대해서만 동작합니다. 하지만 자바스크립트에는 정수형이 없고 부동 소수점 숫자형만이 존재하여 대상이 되는 숫자를 일단 정수형으로 변환한 다음에 비트 연산을 수행하고 다시 원래 타입으로 되돌립니다. 이와 같은 이유로 성능이 크게 나빠집니다.
function foo() {};
new Boolean, new Number, new String 등은 완전히 필요가 없습니다.
자바스크립트의 new 연산자는 피연산자의 프로토타입 멤버들을 상속하는 객체를 생성하고 이 객체를 this에 바인딩하면서 피연산자를 호출합니다.
자바스크립트에서 void는 피연산자를 취한 후 undefined를 반환하는 연산자입니다. 이는 유용하지도 않고 혼동됩니다.
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
정규 표현식(Regular Expression)
자바스크립트의 정규 표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용.
사용하는 메소드
regexp.exec, regexp.test, string.match, string.replace, string.search, string.split 등
정규표현식 객체 생성
정규 표현식 리터럴 사용
var my_regexp = /"(?:\\.|[^\\\"])*"/g;
정규 표현식 플래그
g : Global(여러번 일치함, 정확한 의미는 메소드에 따라 다름)
i : Insensitive (대소문자를 구분하지 않음)
m : Multiline(^과 $이 라인 끝 문자에 일치할 수 있음)
RegExp 생성자 사용
var my_regexp = new RegExp("\"(?:\\.|[^\\\\\\\"])*\"", 'g');
RegExp 객체의 속성
global : g 플래그가 사용된 경우 true
ignoreCase : i 플래그가 사용된 경우 true
lastIndex : 다음 exec 실행을 위한 시작점을 나타냄. 초기값을 0
multiline : m 플래그가 사용된 경우 true
source : 정규 표현식의 소스 텍스트
구성 요소
^ : 문자열의 시작
$ : 문자열의 끝
수량자
{m, n} : m에서 n번 반복
? : 0 또는 한번 반복 {0,1}
* : 0번 이상 반복 {0,}
+ : 한번 이상 반복 {1,}
클래스
[-] : 범위 ex) [a-z]
[^] : 부정(제외) ex) [^?#] : '?', '#'를 제외한 모든 문자
이스케이프 (\)
\d : 숫자문자 [0-9]와 동일
\D : 숫자문자 아님 [^0-9]와 동일
\s : 공백문자
\S : 공백문자 아님
...
선택
| : ex) "into".match(/in|int)
그룹
\1,\2,... 의 표현으로 그룹에 대한 참조가능
캡처 : '()'로 묶인 정규 표현식 선택
비캡처 : '(?:)'
긍정형 룩어헤드 : '(?=)' [좋은점 아님]
부정형 룩어헤드 : '(?!)' [좋은점 아님]
사용 예제
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
var strTest = ' abcd efgh ';
document.writeln(strTest.trim()); //abcd efgh
var isEmail = function (str) {
var emailEx1 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z]+/;
var emailEx2 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;
var emailEx3 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;
if (emailEx1.test(str)) { return true; }
if (emailEx2.test(str)) { return true; }
if (emailEx3.test(str)) { return true; }
return false;
}
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
:active
적용대상 : 활성화된 요소
예제 :
*:active {background: blue;}
생성결과 : 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
p:after {content: " | ";}
생성결과 : 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
p:before {content: attr(class);}
적용대상 : 특정 요소의 첫 번째 자식인 요소
예제 :
p:first-child {font-size: 125%;}
적용대상 : 요소의 첫 번째 글자를 가지고 있는 가상 요소
예제 :
a:first-letter {text-decoration: line-through;}
적용대상 : 요소의 첫 줄을 가지고 있는 가상 요소
예제 :
적용대상 : 포커스를 가진 요소
예제 :
input:focus {background: yellow;}
적용대상 : 머무르는 상태인 요소
예제 :
p:hover {background: yellow;}
적용대상 : 언어 인코딩 정보와 연관된 요소
예제 :
*:lang(fr) {quotes: '<< ' ' >>';}
적용대상 : 아직 방문하지 않은 링크
예제 :
*:link {text-decoration: underline;}
적용대상 : 이미 방문한 링크
예제 :
*:visited {color: gray;}
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
전체 선택자
예제 :
div * p {color: blue;}
예제 :
p {font-size: 1em;}
예제 :
table tr td div ul li {color: purple;}
예제 :
ul > li {font-weight: bold;}
예제 :
h1 + * {margin-top: 0;}
예제 :
a.external {font-style: italic;}
.example {background: olive;}
id 선택자
예제 :
body#home {background: silver;}
#example {background: lime;}
단순 속성 선택자
예제 :
p[class] {border: 1px dotted silver;}
정확한 속성값 선택자
예제 :
p[class="urgent"] {color: red;}
부분 속성값 선택자
예제 :
p[class~="warning"] {background: yellow;}
시작하는 속성값 선택자
예제 :
p[class^="test-"] {background: yellow;}
끝나는 속성값 선택자
예제 :
예제 :
div[class*="port"] {border: 1px solid red;}
예제 :
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
Recent Comment