아즈키의 개발블로그

apply Style Sheet rules

2008-12-01T13:50:36+09:00

스타일 적용시에는 styleSheet 오브젝트의 (document.styleSheets : Array) 메소드를 사용하는데,

IE 에서는 addRule 을 사용

인자값을 3개(필수3개)로,

0번 argument에는 선택자('div', 'p' 등..)를 넣고,
1번 argument에는 스타일 명령("color:blue", "overflow:hidden" 등..)을 넣는다.
2번 argument에는 0부터 시작하는 pages 컬렉션(document.styleSheets[?].pages : Array)에서의 위치할 인수를 넣는다. (-1을 넣으면 제일 뒤에 위치하게 된다.)
반환값은 항상 -1이다. (주의: 오류가 없어도 -1을 반환)

FF 에서는 insertRule 를 사용

인자값은 2개(필수2개)로,

0번 argument에는 스타일 명령을 선택자를 포함하여 넣는다. (예: "#myTable {-moz-user-select:none}")
1번 argument에는 0부터 시작하는 cssRules 컬렉션(document.styleSheets[?].cssRules : Array)에서의 위치할 인수를 넣는다. (주의: addRule과는 다르다, -1 인자값을 넣으면 에러가 난다.)
반환값은 cssRules 컬렉션에서의 위치한 위치값이다.

ps. 아즈키네 2번째 블로그 옛글중에 가져옴 (http://2.azki.org/182)

javascript 막코딩으로 flip 효과 시도 (뒤집는 효과)

2008-11-21T10:30:17+09:00

자바스크립트 막코딩으로 (특별한 animation/effect 라이브러리 사용 없이) 뒤집는 효과를 구현해 보았습니다

구현을 위주로 엉망으로 짠 코드라 부끄럽지만, 올리고 봅니다.

http://fliptest.azki.org/proto.html
(상수값으로 효과를 만들어본 첫번째 버전)
http://fliptest.azki.org/
(몇가지 변수를 적용할 수 있는 두번째 버전)

소개

4각형과 3각형의 조합으로 접히는 효과를 내보았습니다.
실제 flip 과정중 캡쳐화면입니다.

그리고 element 의 구성은 3가지로 이루어져 있습니다.

왼쪽 삼각형과 오른쪽 삼각형이 입체적으로 착각하도록 할 수 있습니다.

삼각형을 만드는 방법은 참고사이트중 Triangles in Javascript 에 자세하게 나와있습니다.

참고 사이트

http://lab.smashup.it/flip/
(Flip!0.4 - A jQuery plugin)
http://www.uselesspickles.com/triangles/demo.html
(Triangles in Javascript)
http://www.xentrik.net/css/filters.php
(CSS Filters)

ps.
참고사이트중 Flip!0.4 - A jQuery plugin 에서 처음 flip 효과를 보았는데,
그 flip 은 Opera browser 를 지원하지 못합니다. 제가 만든 것은 됩니다 :]
테스트 한 브라우저 목록입니다.

FF2, FF3
IE6, IE7, IE8
Opera 9
safari 3 (windows)
Chrome 0.3

자바스크립트로 마우스 휠 (mousewheel) 움직임 체크.

2008-10-30T11:15:12+09:00

등록 부분

initialize: function(id, container){
(...)

var thisP = this;
AzLib.Event.observe(
this._element,
AzLib.Browser.Gecko ?
"DOMMouseScroll" :
"mousewheel",
function(e){
thisP.__event_mouseWheel(e);
}
);

(...)
}

콜백 부분

__event_mouseWheel: function(e){
AzLib.Event.stop(e);
var delta = 0;
if (e.wheelDelta) { /* IE, Opera, Safari, Chrome */
delta = -e.wheelDelta / (AzLib.Browser.Chrome? 360: 120);
} else if (e.detail) { /* Gecko */
delta = e.detail / 3;
}
this._verticalScrollbar.stepPosition(delta * this.wheelRowCount);
}

mouse wheel 관련 자료를 찾아보니 살짝? 오동작도 하고 크롬 브라우저에 대한 처리가 안되어있어 수정하여 적용중인 코드.

IE6, IE7, IE8beta, FF2, Opera9, Safari3, Chrome0.2 에서 테스트 됨.

JSON 2 Table v 1.01 제이슨 데이타를 테이블로 출력합니다

2008-07-02T15:22:45+09:00

다른 팀의 업무를 도와주며 한두시간의 시간을 투자해서 만든 프로그램입니다.. (그런데 사용할 일이 사라져서 빛을 보지도 못한 프로그램입니다;)

http://json2table.azki.org/ 입니다

소개

JSON 문자열을 textarea 에 넣고 2 table ! 버튼을 누르면 JSON 데이타를 테이블로 출력하고, 출력하는데 걸린 시간을 출력합니다. 표시하는 룰은 object 타입은 테이블로 나타내고, array 타입은 row로 나타냅니다.
(참고: array 타입일 경우 테이블의 첫번째 로우에 각 item 의 이름(key)이 표시되는데, 그 아이템의 순서가 뒤바뀌거나 item 의 이름 종류나 개수가 일치하지 않는 경우 예외처리를 해놓지 않아서 정확하게 동작하지 않습니다)

예제

{
code: 'success',
data: {
member: {
name: '김성준',
id: 'azki',
sno: '0701082'
}
}
}

위의 JSON 코드를 넣으니 아래 테이블로 표시되네요..

code

data

success

member

name	id	sno
김성준	azki	0701082

15ms

아래부터는 다른 예제입니다

{
"dataset": [{
"columnInfo": [{
"type": "string",
"size": 10,
"name": "departure_city"
}, {
"type": "string",
"size": 10,
"name": "departure_date"
}, {
"type": "string",
"size": 10,
"name": "arrival_city"
}, {
"type": "string",
"size": 10,
"name": "arrival_date"
}],
"rows": [{
"arrival_city": "TOKYO",
"departure_date": "03Jul08",
"arrival_date": "05Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "03Jul08",
"arrival_date": "06Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "10Jul08",
"arrival_date": "12Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "10Jul08",
"arrival_date": "13Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "17Jul08",
"arrival_date": "19Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "17Jul08",
"arrival_date": "20Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "24Jul08",
"arrival_date": "26Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "24Jul08",
"arrival_date": "27Jul08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "31Jul08",
"arrival_date": "02Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "31Jul08",
"arrival_date": "03Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "07Aug08",
"arrival_date": "09Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "07Aug08",
"arrival_date": "10Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "14Aug08",
"arrival_date": "16Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "14Aug08",
"arrival_date": "17Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "21Aug08",
"arrival_date": "23Aug08",
"departure_city": "BUSAN"
}, {
"arrival_city": "TOKYO",
"departure_date": "21Aug08",
"arrival_date": "24Aug08",
"departure_city": "BUSAN"
}],
"name": "Schedule"
}]
}

위의 JSON 코드를 넣으니 아래 테이블로 표시되네요..

dataset

columnInfo

rows

name

type	size	name
string	10	departure_city
string	10	departure_date
string	10	arrival_city
string	10	arrival_date

arrival_city	departure_date	arrival_date	departure_city
TOKYO	03Jul08	05Jul08	BUSAN
TOKYO	03Jul08	06Jul08	BUSAN
TOKYO	10Jul08	12Jul08	BUSAN
TOKYO	10Jul08	13Jul08	BUSAN
TOKYO	17Jul08	19Jul08	BUSAN
TOKYO	17Jul08	20Jul08	BUSAN
TOKYO	24Jul08	26Jul08	BUSAN
TOKYO	24Jul08	27Jul08	BUSAN
TOKYO	31Jul08	02Aug08	BUSAN
TOKYO	31Jul08	03Aug08	BUSAN
TOKYO	07Aug08	09Aug08	BUSAN
TOKYO	07Aug08	10Aug08	BUSAN
TOKYO	14Aug08	16Aug08	BUSAN
TOKYO	14Aug08	17Aug08	BUSAN
TOKYO	21Aug08	23Aug08	BUSAN
TOKYO	21Aug08	24Aug08	BUSAN

Schedule

109ms

추후 업데이트될 수도 있는(?) 기능들..

JSON 데이타를 포맷팅해주는 기능 (보기 편하게)
색상등으로 좀 더 보기 편하게 해주는 기능
두가지 이상의 JSON 데이타를 서로 비교-분석 해주는 기능
많은 케이스에 대해서 테스트가 이뤄지지 않은 상태라 버그가 있을 가능성이 높음. -> 디버깅..

input type 변경의 크로스 브라우저 문제 (password)

2008-06-13T15:15:59+09:00

소스1.

var input = document.createElement("input");
input.setAttribute("type", "text");
document.body.appendChild(input);

소스1. 적용 이후 다음 소스가 적용되지 않는다.. IE 에서만 ^^;

소스2.

input.setAttribute("type", "password");

IE 에서 나타나는 에러 메시지는 "이 명령은 지원하지 않습니다."

물론, setAttribute 메소드를 사용하지 않고 input.type = "..."; 로 적용시켜도 에러가 남.

FF2, Opera9, Safari3 에서는 정확히 잘 동작한다. IE6, IE7, IE8 beta1 에선 에러가 난다..

프로젝트에서는 아래와 같은 코드로 대체했다

if (Prototype.Browser.IE) {
var outerHTML = this._input.outerHTML;
outerHTML = outerHTML.replace(/type=[a-z]*/, "");
outerHTML = outerHTML.replace(/value=""/, "value=\""+this._getText()+"\"");
// IE 에서는 한번 지정된 type을 변경할 수 없어서 새로운 Element 를 만들어야 함.
// IE 에서 password 타입의 텍스트 박스는 outerHTML 에서 value 값이 나타나지 않아서 다시 넣어줘야함.
var newInput = document.createElement(outerHTML);
if (this._getPassword()) {
newInput.setAttribute("type", "password");
}
this._input.parentNode.replaceChild(newInput, this._input);

//이벤트등록해제 등등 reference value 에 관련된 모든 것들 해제
//...
this._input = newInput;
//...
//이벤트등록 등등 reference value 에 관련된 모든 것들 재등록
}
else {
this._input.setAttribute("type", this._getPassword()? "password": "text");
}

ps. 이벤트 등 element 값 자체를 등록시켜놓은 부분에 대해 수정이 반드시 필요하다.

참고로 이 문제의 다른 해결 방법이 없는지.. 구글을 찾아보니 역시나 비슷한게 있었다
http://codingforums.com/showthread.php?t=107073
Change input type="text" to input type="password"

Code:

<script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>

<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>

나도 처음에 cloneNode 메소드를 생각했었는데, 사용하지 않았다..
이유는 type="text" 인 input 을 type="password" 로 변경은 가능하지만..
반대로는 불가능했기 때문이다. -ㅁ-
어째뜬..
IE does not like to change dynamically the type, thus one solution might be to replace entirely the object.

2008-05-26T19:22:03+09:00

소스1.

출력물1. (FF2)

출력물2. (IE6, IE7 도 동일하게 나온다)

출력물3. (왼쪽부터 Opera3, Safari9... 비슷함)

직관적으론 출력물3 처럼 나와야 하겠지만 불행히도 FF와 IE에서는 이상하게 나온다..
내부 div 에 top 과 left 속성을 제거해보자.. 더욱 더 가관이다.

소스2.

출력물1. (FF2)

출력물2. (IE6, IE7 도 동일하게 나온다)

출력물3. (Opera9)

출력물4. (Safari3)

내가 원하는 것은 소스1의 출력물3과 같은 형태인데,
참 어려운것 같다 ㅡㅡ
더욱 재미난 것은... FF 의 디버깅 도구 firebug 에서 보여지는 부분이다. (소스1)

날 약올리듯이? 내가 원하는 부분을 정확하게 가르키고 있다.

일단 하나 하나를 분석해보니..

border 가 좌우 좌표를 이상하게 만드는 것 같았다. (IE와 FF에서)

그리고 FF 에서는 padding 이 또 문제를 안쪽 div의 위치를 움직이고 있었다.

소스1에서 border 와 padding 을 모두 0px 로 준 결과를 살펴보면 다음과 같다

소스3.

출력물1. (FF2)

출력물2. (IE6, IE7, Opera9, Safari3)

결국 적절한 해답은 못 찾았고..

소스3의 상태에서 FF만 따로 위치를 잡아주는 식으로 처리를 했다
left 속성: -3 , top 속성: -(높이/2+1)

부록::
프로젝트에서는 javascript 로 이런식으로 구성되어 있다 ㅡㅡㅋ

initialize: function() {//컴포넌트 객체를 생성할 때 호출됨..
//...
if (Prototype.Browser.Gecko) {
this._label.setX(-3);
}
else {
this._label.setX(0);
this._label.setY(0);
}
}
,
//...
,
onresize: function() {//사이즈 변경시에 호출됨..
//...
if (Prototype.Browser.Gecko) {
this._label.setY(-1-Math.floor(height/2));
}
}

JavaScript 에서 style 속성 구하기

2008-06-13T17:28:59+09:00

Javascript 로 지정한 style 의 경우 구하는 예

element.style["fontSize"]

IE 의 경우 구하는 예

element.currentStyle["fontSize"]

FF 의 경우 구하는 예

document.defaultView.getComputedStyle(element, "").getPropertyValue("font-size")

참고: IE 의 경우 filter 값을 구하는 방법의 예.

element.filters.item("alpha").opacity

JavaScript Eval 함수의 IE에서 사용 주의점

2008-11-06T00:37:02+09:00

예전부터 알고 있었던거라 그때 정리해 쓸려했는데..
조금 더 보편화된 패턴이 발견되면 정리할려다 시간이 많이 흘러 이렇게 그냥 정리.. (결국 보편화된 패턴이나 다른 이상 증상은 아직 발견하지 못했습니다. 발견하신분이나 이 문제에 대해 이견이 있으신분은 꼭 리플을 달아주시면 감사드리겠습니다.)

이제라도 증상에 대해 기록해 두어야 될거 같아 정리해 올림-.-

증상 & 분석

IE 에서는 eval 구문에 다음 스트링을 사용하였을 때 반환이 되지 않음.
"(function() {})"

다른 4대 브라우저(FF,Opera,Safari) 에서는 반환이 된다.

typeof eval("(function() {})");

가 IE 에서만 "undefined" 가 나온다
나머지 브라우저에서는 잘 된다 ("function" 반환)

IE가 eval 안에서 function 구문이 동작하지 않는 건 아닌거 같다

typeof eval("(function() {return function() {};})();")

은 또 "function" 으로 나오기 때문이다

대안

그냥 function 을 eval 로 정리해서 쓰고 싶을 땐.. (function 내용을 스트링 값으로 선언하고 싶을 때?)

function 구문을 eval 밖으로 빼고 소스 부분만 eval 로 넣는다.
var a = eval("function() { var a=1; alert(++a); return a; }");
대신
var a = function() { eval("var a=1; alert(++a); return a; ") };
를 사용한다.
그냥 eval 대신 Function 을 사용한다.
var a = eval("function() { var a=1; alert(++a); return a; }");
대신
var a = new Function("var a=1; alert(++a); return a;");
를 사용한다.

ps. 필자는 2번 방식을 좋아한다. 속도가 더 빠르기 때문이다. (똑같은 구문이라면 eval을 사용하는 것이 거의 속도가 큰 차이로 떨어진다. 그렇기 때문에 난 왠만하면 eval 은 쓰지 않는다.)

JavaScript 배열 변수 메소드 정리

2008-06-13T17:29:00+09:00

업무 or 개인 프로젝트 시 자주 쓰게 되는 배열 변수 메소드를 정리하였습니다.

.sort

sort ([sortFunction: function]) : array
해당 배열 자신을 정렬한다. (기존 배열 변경)
sortFunction 을 생략하면 charCode 값을 기준으로 오름차순으로 정렬한다.
반환값은 자기 자신의 레퍼런스다. (non copy)
sortFunction 은 function 타입이며, 두개의 인자를 받는다. sortFunction 이 음수를 반환하면 그 두 아이템을 스왑한다. (양수나 0을 반환시에는 스왑하지 않는다.)
각 배열 아이템의 짝을 모두 수행하는 것은 똑같지만 수행하는 순서는 브라우저 별로 조금 다르다.
배열 ["a", "b", "c"] 를 .sort 메소드로 sortFunction 에 던질 경우 FF 는
sortFunction ("a", "b") -> sortFunction ("c", "a") -> sortFunction ("b", "a")
순으로 던지고, IE 에서는
sortFunction ("b", "b") -> sortFunction ("c", "a") -> sortFunction ("b", "a")
순으로 던진다.
sortFunction 이 무조건 음수를 반환하는 경우 결과값 또한 다르게 나온다. (물론 정상적인 비교를 수행하는 함수라면 같은 결과가 나오겠지만, 같은 코드가 다른 결과값을 낸 다는 사실에 흥미를 갖고 수행시켜보았다)
FF: ["c", "a", "b"]
IE: ["b", "c", "a"]

.reverse

reverse () : void
해당 배열 자신을 뒤집는다.

.push

push ([item1 : mixed [, item2 : mixed [, item3 : mixed, ...]]]) : item
푸시하고 마지막으로 추가된 아이템을 반환한다. (3개의 item을 추가했을 경우 item3을 반환)

.pop

pop () : item
팝한다. 비어있는 경우엔 undefined 를 반환한다.

.shift

shift () : item
시프트한다. 팝을 기능을 반대방향으로 수행한다.

.unshift

unshift ([item1 : mixed [, item2 : mixed [, item3 : mixed, ...]]]) : void
언시프트한다. 푸쉬의 기능을 반대방향으로 수행한다. 반환값은 브라우저별로 다르므로 사용하지 않는 것이 좋다. (예로 IE6 에서는 undefined 을 반환하지만, FF2 에서는 push와 마찬가지로 마지막 인자값을 반환한다)

.slice

slice (start : int [, end : int]) : array
지정된 부분을 복사해 새로운 배열을 반환한다. start는 포함하지만, end는 포함하지 않는다.
start 가 음수면 legnth + start 로 처리한다.
end 가 음수면 length + end 로 처리한다.
end 가 생략되면 배열의 끝까지 추출한다.
원래 배열변수에 영향을 주진 않는다. (복사해서 새로운 배열을 만듬)

.splice

splice (start : int, deleteCount : int, [item1 : mixed [, item2 : mixed [, item3 : mixed, ...]]]) : array
지정된 부분을 삭제하고, 그 부분에 새로운 아이템을 추가한다. 그리고 반환은 삭제된 아이템들을 가진 새로운 배열이다. (deleteCount 가 0 일 경우 빈 배열이, 1 일 경우 아이템이 1개인 배열이 반환)
deleteCount 가 0 이면 삭제되는 것이 없다.
item 을 생략하면 삭제만 수행한다.
배열 가운대 인자를 추가할 경우(deleteCount = 0)나 배열 중간에 있는 인자를 삭제할 경우(item 생략) 활용가능하다.

.concat

concat ([item1 : mixed [, item2 : mixed [, item3 : mixed, ...]]]) : array
배열에 아이템들을 추가한 새로운 배열을 반환한다. 푸쉬와 비슷하게 추가되지만, 기존 배열에 영향을 미치지 않고 새로운 배열을 반환한다는 점에서 다르다.
추가되는 순서는 당연히 왼쪽에서 오른쪽으로 순서대로이다.

.join

join ([separator : string]) : string
배열 요소들 사이에 separator 을 넣어서 하나의 string을 만들어 반환한다. separator 를 생략할 경우 ","(ascii 44)로 처리한다.

ps. 배열 변수는 레퍼런스 값이다.즉,

var a = b = [1];
var c = [1];

에서
a == b 는 true 지만 a == c 는 false 다.

User preferences color table v 1.0

2008-06-13T17:29:01+09:00

업무용(?)으로 종종 쓰고 있는, User preferences for colors 입니다.

개인적으로 보기 위해 테이블로 작성하였습니다.

http://upct.azki.org/

소개

윈도우에서 설정한(디스플레이 설정에서 화면배색 부분) 색상들을 HTML 에서 가져다 쓰는 것 입니다.
CSS2 에서 추가되었다고 합니다. 참고로 꼭 윈도우즈에서만 적용되는 건 아닙니다. 우분투에서 파이어폭스로 테스트 해본 결과 됩니다.
4 대 브라우저(FF,IE,Opera,Safari)에서 다 적용됩니다. 다만 윈도우 버전 Safari에서는 설정값을 윈도우즈의 것으로 가져오지 않는군요. (내부적으로 설정된 컬러를 쓰더군요, Mac 에서는 어떤지 모르겠습니다. 아마 잘 되겠죠?)

기반 자료 출처

이용석의 JavaScript & DHTML (http://user.chollian.net/~spacekan/css/preferences-colors.htm)
아주 오래전부터 알고 다니는 사이트인데 지금 봐도 참 좋은 사이트입니다. ^^