'Developer/JavaScript' 카테고리의 글 목록

Developer/JavaScript

팝업창 스크롤바 자동 생성 2019.01.03
다른 도메인간 부모창과 자식창 제어 2019.01.03 2
JavaSctript 객체 속성(object property) 알아내기 2017.12.28
JavaScript의 KeyEvent에 따른 keycode 2009.06.22 8
50가지의 Ajax 예제 2008.11.10
ASCII Character Codes Table & Cheat Sheet 2008.10.20
How well do you know prototype 2008.05.06
.NET에서 AJAX구현시 javascript에서 한글 깨짐 방지 2008.05.02
60 More AJAX- and Javascript Solutions For Professional Coding 2008.04.23
태그,스크립트,스타일,주석,한글 제거 정규식 표현 2008.03.25
IE 인쇄시 설정버튼 제어 2008.02.21
자바스크립트 Trim 최적화 2008.02.11
Override window.alert() 2008.02.04
태그명 알아내기 2008.01.22
JavaScript Submit Function 2007.08.02
자바스크립트 라이브러리의 종류와 특징 2007.06.22
웹표준에 맞는 form 코딩법 2007.05.25
5가지 시계 표기 법 2007.05.25
한줄로 끝내는 롤오버마우스 스크립트 2007.05.25
랜덤 이미지 출력 2007.05.25
체크 박스 클릭하면 하루동안 팝업창 안 열리게 하기 2007.05.25
자바스크립트로 마우스 휠 제어하기 2007.05.25
텍스트영역 리사이즈 컴포넌트 2007.05.25
30 Scripts For Galleries, Slideshows and Lightboxes 2007.05.21
파이어버그의 콘솔을 이용한 자바스크립트 트레이스 2007.05.03
JS, CSS파일 압축전송으로 페이지 로딩속도 향상 2007.05.03
JavaScript Object Table 2007.05.03
문서 내 모든 링크의 아래 점선 없애기 2007.05.03
윈도우 크기에 따라 글자크기 변경 2007.05.03
페이지 직접생성 팝업 2007.05.03

팝업창 스크롤바 자동 생성

2019. 1. 3. 21:42

팝업창 스크롤바 자동 생성

<html>
<head>
  <title></title>
  <script type='text/javascript'>
    window.onload = function(){
     if((parseInt(document.getElementById('body').offsetHeight)
        - parseInt(window.document.body.clientHeight)) > 20) {
        window.document.body.scroll = "auto";
        window.resizeBy(18,0);
      }
    }
  </script>
</head>
<body>
  <div id='body'>
    팝업 내용
  </div>
</body>
</html>

부모창에서 팝업창을 띄울시 스크롤바 옵션 scrollbars=no 일때 팝업창의 내용이 길어질 경우 스크롤바롤 생성해주는 스크립트이다.

참고로, 이 스크립트는 세로길이에 대한 스크롤바만 생성하도록 한 것이다.

페이지가 로드되면 div 의 세로 길이와 창의 크기를 측정하여 20px 이상일 경우 스크롤바를 생성 이때 가로 길이 18px(스크롤바 사이즈)을 넓여 준다.

'Developer > JavaScript' 카테고리의 다른 글

다른 도메인간 부모창과 자식창 제어 (2)	2019.01.03
JavaSctript 객체 속성(object property) 알아내기 (0)	2017.12.28
JavaScript의 KeyEvent에 따른 keycode (8)	2009.06.22

다른 도메인간 부모창과 자식창 제어

2019. 1. 3. 15:57

익스플로러 5.5 이후 부터는 스크립트로 server1.abc.com 과 live.abc.com 간의 상호 도메인이 다른 프레임이나 윈도우의 document에 관련된 작업을 시도하면 보안에러가 발생한다.

Cross-site Scripting 에 대한 MS의 말.. How Cross-site Scripting Attacks Work

파이어폭스 같은 경우에는 스크립트(Signed scripts)에서 브라우져자체에 포함(?)된 클래스(netscape.security.PrivilegeManager)를 호출하여 이를 해결할 수 있다고 한다.

Signed Scripts 에 대한 Mozilla의 말.. Signed Scripts in Mozilla

그럼에도 불구하고 다른 도메인에 대한 opener 나 parent 접근이 필요할 경우에는 JavaScript 를 통해 document.domain 을 설정해 주면된다.

<script language="javascript">
    document.domain = "공통도메인명";
</script>

상호 연결 시켜야 하는 웹 페이지에 자신들의 공통된 도메인을 지정해 주면 컨트롤이 가능해진다.

만약, server1.abc.com의 open.htm이 window.open 으로 live.abc.com을 호출하고 live.abc.com 의 child.htm이 opener 로 server1.abc.com 을 접근해야 한다면, 다음 스크립트를 두 페이지에 정의해 주면 되고, 스크립트는 페이지 어디에 위치해 있든지 특별히 상관은 없다.

<script language="javascript">
    document.domain = "abc.com";
</script>

※ 주의, 도메인 명을 잘못 입력한 경우에는 "잘못된 인수입니다." 라는 JavaScript 오류가 발생한다.

cross frame scripting 을 해결하는 다른 방법으로는 HTA가 있다.

html페이지가 아닌 hta(html application)페이지를 만들어야 한다.

※ 다음은 HTA에서 javascript로 iframe의 document를 참조한 예

(확장자를 hta로 저장하시고 브라우저로 실행)

<html>
    <head>
        <title>hta cross scripting</title>
        <script>
            function window.onload(){
                alert(myframe.document);
            }
        </script>
    </head>
    <body scroll="no">
        <iframe id="myframe" src="http://kin.naver.com/"></iframe>
    </body>
</html>

다음에, 예를 하나 들면..

kin.naver.com을 iframe에 넣고 검색어에 "스크립트"라는 단어를 넣은 후 검색버튼을 누르게 한 HTA소스이다.

<html>
    <head>
        <title>hta cross scripting</title>
        <script>
            function window.onload(){
                myframe.document.search.query.value="스크립트";
                myframe.check_query();
            }
        </script>
    </head>
    <body scroll="no">
        <iframe id="myframe" src="http://kin.naver.com/" width="100%" height="100%"></iframe>
    </body>
</html>

'Developer > JavaScript' 카테고리의 다른 글

팝업창 스크롤바 자동 생성 (0)	2019.01.03
JavaSctript 객체 속성(object property) 알아내기 (0)	2017.12.28
JavaScript의 KeyEvent에 따른 keycode (8)	2009.06.22

JavaSctript 객체 속성(object property) 알아내기

2017. 12. 28. 11:43

자바스크립트(JavaScript) 객체는 그 안에 여러가지 속성과 값을 담고 있는 경우가 있는데, 그러한 객체의 속성을 조회할 때 유용한 소스이다.

function getProperty(obj) {
   for (var p in obj) {
	   // 출력형태 - 이름(타입) : 값
	   var msg = p + "(" + typeof obj[p] + ") : " + obj[p];
	   console.log(msg);
   }
}

window.location의 속성값을 알고 싶으면 getProperty(window.location);

특정 이벤트 시 내부 속성값을 알고 싶으면 getProperty(해당 이벤트 객체);

이렇게 사용하면 된다.

결과 값은 브라우저에서 F12를 눌러 콘솔(Console) 탭을 누르면 볼 수 있다.

저작자표시 비영리 변경금지

'Developer > JavaScript' 카테고리의 다른 글

다른 도메인간 부모창과 자식창 제어 (2)	2019.01.03
JavaScript의 KeyEvent에 따른 keycode (8)	2009.06.22
50가지의 Ajax 예제 (0)	2008.11.10

JavaScript의 KeyEvent에 따른 keycode

2009. 6. 22. 10:04

event.keyCode의 값은 key event에 따라 그 값이 변한다.

'흔히 알고 있는 keyCode 값'은 onKeyDown 이나 onKeyUp Event 를 통해 추출할 수 있는 값들이고,
이 외에 onKeyPress 를 이용했을 경우에는 keyCode값이 달라진다.

사용예 : onKeyPress="if(event.keyCode==45) event.returnValue=false;"

	key press	key down	key up
Esc	27(IE만)	27	27
F1	-	112	-
F2	-	113	113
F3	-	114	114
F4	-	115	115
F5	-	116	116
F6	-	117	-
F7	-	118	118
F8	-	119	119
F9	-	120	120
F10	-	121	121
F11	-	122	122
F12	-	123	123

	key press	key down	key up
0	48	48	48
1	49	49	49
2	50	50	50
3	51	51	51
4	52	52	52
5	53	53	53
6	54	54	54
7	55	55	55
8	56	56	56
9	57	57	57

	key press	key down	key up
~	126	192	192
!	33	49	49
@	64	50	50
#	35	51	51
$	36	52	52
%	37	53	53
^	94	54	54
&	38	55	55
*	42	56	56
(	40	57	57
)	41	48	48
_	95	189	189
+	43	187	187
\|	124	220	220
`	96	192	192
-	45	189	189
=	61	187	187
\	92	220	220
{	123	219	219
[	91	219	219
}	125	221	221
]	93	221	221
:	58	186	186
;	59	186	186
"	34	222	222
'	39	222	222
<	60	188	188
>	62	190	190
?	63	191	191
,	44	188	188
.	46	190	190
/	47	191	191

	key press	key down	key up
PrintScreen	-	-	44 (IE외)
ScrollLock	-	145	145
Pause	-	19	19
BackSpace	-	8	8
Tab	-	9	-
CapsLock	-	20	20
Enter	13	13	13
Shift	-	16	16
Left Ctrl	-	17	17
Left WindowMenu	-	91	91
Left Alt	-	18	18
한자	-	25	-
SpaceBar	32	32	32
한/영	-	229	-
Right Alt	-	229	21
Right WindowMenu	-	92	92
Context Menu	-	93	93
Right Ctrl	-	25	25
Insert	-	45	45
Home	-	36	36
PageUp	-	33	33
Delete	-	46	46
End	-	35	35
PageDown	-	34	34
NumLock	-	144	144

	key press	key down	key up
Up(↑)	-	38	38
Left(←)	-	37	37
Down(↓)	-	40	40
Right(→)	-	39	39

NumPad	key press	key down	key up
/	47	111	111
*	42	106	106
-	45	109	109
7	55	103	103
8	56	104	104
9	57	105	105
+	43	107	107
4	52	100	100
5	53	101	101
6	54	102	102
1	49	97	97
2	50	98	98
3	51	99	99
0	48	96	96
.	46	110	110
Enter	13	13	13
Home	-	36	36
Up(↑)	-	38	38
PageUp	-	33	33
Left(←)	-	37	37
Clear	-	12	12
Right(→)	-	39	39
End	-	35	35
Down(↓)	-	40	40
PageDown	-	34	34
Insert	-	45	45
Delete	-	46	46

	key press	key down	key up
a	97	65	65
A	65	65	65
b	98	66	66
B	66	66	66
c	99	67	67
C	67	67	67
d	100	68	68
D	68	68	68
e	101	69	69
E	69	69	69
f	102	70	70
F	70	70	70
g	103	71	71
G	71	71	71
h	104	72	72
H	72	72	72
i	105	73	73
I	73	73	73
j	106	74	74
J	74	74	74
k	107	75	75
K	75	75	75
l	108	76	76
L	76	76	76
m	109	77	77
M	77	77	77
n	110	78	78
N	78	78	78
o	111	79	79
O	79	79	79
p	112	80	80
P	80	80	80
q	113	81	81
Q	81	81	81
r	114	82	82
R	82	82	82
s	115	83	83
S	83	83	83
t	116	84	84
T	84	84	84
u	117	85	85
U	85	85	85
v	118	86	86
V	86	86	86
w	119	87	87
W	87	87	87
x	120	88	88
X	88	88	88
y	121	89	89
Y	89	89	89
z	122	90	90
Z	90	90	90

'Developer > JavaScript' 카테고리의 다른 글

JavaSctript 객체 속성(object property) 알아내기 (0)	2017.12.28
50가지의 Ajax 예제 (0)	2008.11.10
ASCII Character Codes Table & Cheat Sheet (0)	2008.10.20

50가지의 Ajax 예제

2008. 11. 10. 09:23

Ajax Forms

Form Plugin

ShoutBox

Shoutbox Ajax

Ajax 메신저

Ajax 탭 컨텐트

Ajax Tabs Content

Ajax 별점 매기기

Ajax 인라인 에디트

Ajax 프로그레스 바

Ajax 페이징

Ajax 파일 업로드

Ajax 자동완성

Autocomplete Control Version Released

웹에디터

투표

Ajax Poller

테이블 데이터 관리

기타

출처 : http://ajaxian.com/archives/groups-of-50-ajax-examples

'Developer > JavaScript' 카테고리의 다른 글

JavaScript의 KeyEvent에 따른 keycode (8)	2009.06.22
ASCII Character Codes Table & Cheat Sheet (0)	2008.10.20
How well do you know prototype (0)	2008.05.06

ASCII Character Codes Table & Cheat Sheet

2008. 10. 20. 09:59

Special Chars
9	\t (Tab)
10	\n (NL)
13	\r (CR)
32	Space
33	!
34	"
35	#
36	$
37	%
38	&
39	'
40	(
41	)
42	*
43	+
44	,
45	-
46	.
47	/
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9
58	:
59	;
60	<
61	=
62	>
63	?
64	@
91	[
92	\
93	]
94	^
95	_
96	`
123	{
124	\|
125	}
126	~

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

Lower Case
97	a
98	b
99	c
100	d
101	e
102	f
103	g
104	h
105	i
106	j
107	k
108	l
109	m
110	n
111	o
112	p
113	q
114	r
115	s
116	t
117	u
118	v
119	w
120	x
121	y
122	z

Extended ASCII
128	€
129	?
130	,
131	f
132	"
133	…
134	†
135	‡
136	^
137	‰
138	S(
139	<
140	Œ
141	?
142	Z(
143	?
144	?
145	‘
146	’
147	“
148	”
149	.
150	--
151	---
152	~
153	™
154	s(
155	>
156	œ
157	?
158	z(
159	Y"
160
161	¡	¡
162	?	¢
163	?	£
164	¤	¤
165	?	¥
166	?	¦
167	§	§
168	¨	¨
169	(c)	©
170	ª	ª
171	?	«
172	?	¬
173
174	®	®
175	?	¯
176	°	°
177	±	±
178	²	²
179	³	³
180	´	´
181	?	µ
182	¶	¶
183	·	·
184	¸	¸
185	¹	¹
186	º	º
187	?	»
188	¼	¼
189	½	½
190	¾	¾
191	¿	¿
192	A`	À
193	A'	Á
194	A^	Â
195	A~	Ã
196	A"	Ä
197	A*	Å
198	Æ	Æ
199	C,	Ç
200	E`	È
201	E'	É
202	E^	Ê
203	E"	Ë
204	I`	Ì
205	I'	Í
206	I^	Î
207	I"	Ï
208	Ð	Ð
209	N~	Ñ
210	O`	Ò
211	O'	Ó
212	O^	Ô
213	O~	Õ
214	O"	Ö
215	×	×
216	Ø	Ø
217	U`	Ù
218	U'	Ú
219	U^	Û
220	U"	Ü
221	Y'	Ý
222	Þ	Þ
223	ß	ß
224	a`	à
225	a'	á
226	a^	â
227	a~	ã
228	a"	ä
229	a*	å
230	æ	æ
231	c,	ç
232	e`	è
233	e'	é
234	e^	ê
235	e"	ë
236	i`	ì
237	i'	í
238	i^	î
239	i"	ï
240	ð	ð
241	n~	ñ
242	o`	ò
243	o'	ó
244	o^	ô
245	o~	õ
246	o"	ö
247	÷	÷
248	ø	ø
249	u`	ù
250	u'	ú
251	u^	û
252	u"	ü
253	y'	ý

'Developer > JavaScript' 카테고리의 다른 글

50가지의 Ajax 예제 (0)	2008.11.10
How well do you know prototype (0)	2008.05.06
.NET에서 AJAX구현시 javascript에서 한글 깨짐 방지 (0)	2008.05.02

How well do you know prototype

2008. 5. 6. 09:34

Prototype 은 우리에게 보다 빠르고 현명하게(?) JavaScript를 사용할 수 있도록 도와준다.
하지만, 익숙치 않을때는 훌륭한 Framework의 기능을 충분히 끌어내지 못하는 경우가 많다.

이를 상기 시키기 위한 지침 'How well do you know prototype' 가 있다.
Prototype 초보 사용자 들에겐 유익한 포스트라 할 수 있겠다.

//바르지 못한 방법:
document.getElementById("foo ")
//적당한 방법: 놀랍게도 어떤 사람들은 이것에 대해 잘 모른다.
$("foo ")

//바르지 못한 방법:
var woot = document.getElementById("bar").value
var woot = $("bar").value
//적당한 방법: 폼 값의 편리하고 빠른 호출
var woot = $F("bar")

//바르지 못한 방법:
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';	
//적당한 방법: 모든 브라우저가 W3C의 권고를 따르고 있지 않다.
$('footer').setStyle({
	height: '100px',
	background: '#ffc'
})

//바르지 못한 방법:
$('coolestWidgetEver').innerHTML = 'some nifty content'
//적당한 방법:
$('coolestWidgetEver').update('some nifty content')
// 아래와 같은 문법 구사가 가능해 지므로
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

//바르지 못한 방법:
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
//적당한 방법: 보기 좋으며 보다 나은 파라메터 구조 사용 
new Ajax.Request('ninja.php', {
	parameters: {
		weapon1: 'foo',
		weapon2: 'bar'
	}
})

//바르지 못한 방법:
new Ajax.Request('blah.php', {
	method: 'POST',
	asynchronous: true,
	contentType: 'application/x-www-form-urlencoded',
	encoding: 'UTF-8',
})
//적당한 방법: 기본옵션은 생략하라!
new Ajax.Request('blah.php')

//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic)
//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic)

//바르지 못한 방법:
$$('div.hidden').each(function(el){
	el.show();
})
//적당한 방법: 슬프게도 이 사용법을 아는 사람들이 많지 않다는 사실.
$$('div.hidden').invoke('show')

//바르지 못한 방법:
$$('div.collapsed').each(function(el){
	el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)

//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

//바르지 못한 방법:
$('productTable').innerHTML = 
	$('productTable').innerHTML + 
	'<tr><td>' + productId + ' '
	+ productName + '</td></tr><tr><td>' 
	+ productId + ' ' + productPrice + 
	'</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
	rowTemplate.evaluate({
		id: productId,
		name: productName,
		price: productPrice
	}))
)

'Developer > JavaScript' 카테고리의 다른 글

ASCII Character Codes Table & Cheat Sheet (0)	2008.10.20
.NET에서 AJAX구현시 javascript에서 한글 깨짐 방지 (0)	2008.05.02
60 More AJAX- and Javascript Solutions For Professional Coding (0)	2008.04.23

.NET에서 AJAX구현시 javascript에서 한글 깨짐 방지

2008. 5. 2. 18:05

AJAX의 javascript에서 한글이 깨지는 현상을 고민하다가, 예전에 IIS 5.0에서 XMLHttpRequest 객체를
이용하여 비동기식 XML 통신을 구현했을 때 역시 한글처리 때문에 고민을 했었던 기억이 될살아 났다.

그 때 XMLHttpRequest 객체를 이용하여 통신할 때 한글 처리를 위해서는
"<?xml version='1.0' encoding='euc-kr' ?>" 태그는 필수 항목이었으며,
또한, ASP 페이지 내에서도 "Response.charSet = "euc-kr" 같이 charSet을
설정해 줘야 했었다.


AJAX (Asynchronous Javascript And Xml)의 단어에서도 알 수 있듯이 클라이언트와 서버간 통신을 위해서
javascript와 XMLHttpRequest를 사용할 수 밖에 없다.
그러므로, AJAX 를 사용할 때도 charSet을 설정해 줘야 한글 문제를 처리할 수 있다.

[해결방법]
1. Web.config의 <system.web> 태그 안에 charSet을 정의한다.
   <system.web>
   .......
   <globalization requestEncoding="euc-kr" responseEncoding="euc-kr"/>
   .......
</system.web>

2. aspx 페이지에 charset 정의
   <meta http-equiv="Content-Type" content="text/html; charset=euc-kr;" />

3. ScriptManager에 Web.config에서 설정한 charset 사용을 허용한다.
<asp:ScriptManager id="ScriptManager1" runat="server"
EnableScriptGlobalization="True"
EnableScriptLocalization="True">
   <Scripts>
<asp:ScriptReference Path="../js/common.js" />
</Scripts>
</asp:ScriptManager>

이렇게 하면 ScriptManager내에 있는 javascript의 한글 처리에 문제가 해결된다.

출처 : http://poco.egloos.com/392702

'Developer > JavaScript' 카테고리의 다른 글

How well do you know prototype (0)	2008.05.06
60 More AJAX- and Javascript Solutions For Professional Coding (0)	2008.04.23
태그,스크립트,스타일,주석,한글 제거 정규식 표현 (0)	2008.03.25

60 More AJAX- and Javascript Solutions For Professional Coding

2008. 4. 23. 14:50

http://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/

When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. With an extensive use of Ajax, you can easily confuse your visitors offering too much control and too many features.

Nevertheless, it’s important to know what’s possible, particularly since you can develop new ideas further, improving the quality of your web applications. Since our last article 80+ AJAX-Solutions For Professional Coding many things have changed — new scripts were introduced, new creative solutions were developed, new robust development kits have been released. They all are supposed to serve a better user experience and provide more comfort for web-developers.

This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. License agreements can change from time to time — please read them carefully before using the script in a commercial web-application.

You might want to consider checking out the following related posts:

30 Scripts For Galleries, Slideshows and Lightboxes presents scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images,
40+ Tooltips Scripts With AJAX, JavaScript & CSS with handy tooltips scripts for intuitive and well-designed visual clues,
Data Grids with AJAX, DHTML and JavaScript with free solutions for data grids, developed with AJAX, DHTML and/or JavaScript,
Powerful CSS-techniques For Effective Coding which features 50 new CSS-techniques, ideas and ready-to-use solutions for effective CSS-coding.

Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. It’s a collection of really useful ones, the ones you can use in almost every project you’ll be working on.

'Developer > JavaScript' 카테고리의 다른 글

.NET에서 AJAX구현시 javascript에서 한글 깨짐 방지 (0)	2008.05.02
태그,스크립트,스타일,주석,한글 제거 정규식 표현 (0)	2008.03.25
IE 인쇄시 설정버튼 제어 (0)	2008.02.21

태그,스크립트,스타일,주석,한글 제거 정규식 표현

2008. 3. 25. 09:21

var str = "한글  <script type="text/javascript">window.alert('hellow')<\/script>";
str += "<style type='text/css> td {font-size:9pt;}<\/style>";
str += "<br /> <h3>Hellow Blog</h3>";

//태그제거
var RegExpTag = "<[^<|>]*>";
str = str.replace(RegExpTag,"");
//result : 한글 window.a lert('hellow'); td {font-size:9pt;} Hellow Blog

//스크립트 제거
var RegExpJS = "<script[^>]*>(.*?)</script>";
str = str.replace(RegExpJS,"");
//result : 한글  <br> <h3>Hellow Blog</h3>

//스타일 제거
var RegExpCSS = "<style[^>]*>(.*?)";
str = str.replace(RegExpCSS,"");
//result : 한글  <script type="text/javascript">window.a lert('hellow');</script><br></style[^><h3>Hellow Blog</h3>

//한글 제거
var RegExpHG = "[ㄱ-ㅎ가-힣]";
str = str.replace(RegExpHG,"");
//result :  <script type="text/javascript">window.a lert('hellow');</script><br><h3>Hellow Blog</h3>

//주석 제거
var RegExpDS = //g;
str6 = str.replace(RegExpDS,"");
//result : 한글 <script type="text/javascript">window.a lert('hellow');</script><br><h3>Hellow Blog</h3>

출처 : http://blueb.net/blog/1174

'Developer > JavaScript' 카테고리의 다른 글

60 More AJAX- and Javascript Solutions For Professional Coding (0)	2008.04.23
IE 인쇄시 설정버튼 제어 (0)	2008.02.21
자바스크립트 Trim 최적화 (0)	2008.02.11

IE 인쇄시 설정버튼 제어

2008. 2. 21. 17:43

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=euc-kr">
   <script language="javascript">
   function ieExecWB( intOLEcmd, intOLEparam ) {
   //참고로 IE 5.5 이상에서만 동작함

   // 웹 브라우저 컨트롤 생성
   var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';

   // 웹 페이지에 객체 삽입
   document.body.insertAdjacentHTML('beforeEnd', WebBrowser);

   // if intOLEparam이 정의되어 있지 않으면 디폴트 값 설정
   if ( ( ! intOLEparam ) || ( intOLEparam < -1 ) || (intOLEparam > 1 ) )
   intOLEparam = 1;

   // ExexWB 메쏘드 실행
   WebBrowser1.ExecWB( intOLEcmd, intOLEparam );

   // 객체 해제
   WebBrowser1.outerHTML = "";
   }
   </script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
   <input type=button value="인쇄 미리 보기" onclick="window.ieExecWB(7)">
   <input type=button value="페이지 설정" onclick="window.ieExecWB(8)">
   <input type=button value="인쇄하기(대화상자 표시)" onclick="window.ieExecWB(6)">
   <input type=button value="인쇄 바로 하기" onclick="window.ieExecWB(6, -1)">
</body>
</html>

'Developer > JavaScript' 카테고리의 다른 글

태그,스크립트,스타일,주석,한글 제거 정규식 표현 (0)	2008.03.25
자바스크립트 Trim 최적화 (0)	2008.02.11
Override window.alert() (0)	2008.02.04

자바스크립트 Trim 최적화

2008. 2. 11. 10:26

function trim11 (str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i > 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

출처 : http://firejune.com/1280

'Developer > JavaScript' 카테고리의 다른 글

IE 인쇄시 설정버튼 제어 (0)	2008.02.21
Override window.alert() (0)	2008.02.04
태그명 알아내기 (0)	2008.01.22

Override window.alert()

2008. 2. 4. 09:04

자바스크립트 함수 중 alert 이라는 함수를 override 하여 system modal window 가 아닌 layer 디자인을 통해 alert window를 만들어 사용할 수 있습니다. (window.confirm 도 바꿀 수 있겠죠.. ㅎㅎ )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Override Alert </title>
</head>
<body>
<script type='text/javascript'>
/***
* Description : override alert
* Author : blueb(xblueb@gmail.com)
* Date : 2008-02-04
*/
window['alert'] = function(msg){
if( document.getElementById("alert") == null ){
var cw = parseInt(document.documentElement.clientWidth);
var ch = parseInt(document.documentElement.clientHeight);

var _top = ch/2 - 50;
var _left = cw/2 - 150;

var div = document.createElement('div');
div.id = "alert";
div.style.width = "300px";
div.style.height = "100px";
div.style.border = "5px solid #000";
div.style.fontSize = "9pt";
div.style.zIndex = "100";
div.style.position = "absolute";
div.style.top = _top +"px";
div.style.left = _left +"px";
var layout = "<div style="text-align: center; margin-top: 20px; position: relative;" id="alert-msg">" + msg + "</div>";
layout += "<div style="text-align: center; margin-top: 10px; bottom: 10px; position: absolute; width: 100%;"><a href="%5C%22javascript:void%28document.getElementById%28%27alert%27%29.style.display=%27none%27%29%5C%22">[close]</a></div>";
div.innerHTML = layout;
document.body.appendChild(div);

}else{
var cw = parseInt(document.documentElement.clientWidth);
var ch = parseInt(document.documentElement.clientHeight);

var _top = ch/2 - 50;
var _left = cw/2 - 150;

var div = document.getElementById("alert");
div.style.top = _top +"px";
div.style.left = _left +"px";

document.getElementById("alert-msg").innerHTML = msg;
document.getElementById("alert").style.display = "";
}
};
</script>
<a href="javascript:window.alert('Hello world')">click</a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Override Alert </title>
</head>
<body>
<script type='text/javascript'>
/***
 * Description : override alert
 * Author : blueb(xblueb@gmail.com)
 * Date : 2008-02-04
 */
	window['alert'] = function(msg){

		if( document.getElementById("alert") == null ){
		
			var cw = parseInt(document.documentElement.clientWidth);
			var ch = parseInt(document.documentElement.clientHeight);

			var _top = ch/2 - 50;
			var _left = cw/2 - 150;

			 var div = document.createElement('div');
			 div.id = "alert";
			 div.style.width = "300px";
			 div.style.height = "100px";
			 div.style.border = "5px solid #000";
			 div.style.fontSize = "9pt";
			 div.style.zIndex = "100";
			 div.style.position = "absolute";
			 div.style.top = _top +"px";
			 div.style.left = _left +"px";
			 var layout = "" + msg + "";
			 layout += "[close]";
			 div.innerHTML = layout;
			 document.body.appendChild(div);

		}else{

			var cw = parseInt(document.documentElement.clientWidth);
			var ch = parseInt(document.documentElement.clientHeight);

			var _top = ch/2 - 50;
			var _left = cw/2 - 150;

			 var div = document.getElementById("alert");
			 div.style.top = _top +"px";
			 div.style.left = _left +"px";

			document.getElementById("alert-msg").innerHTML = msg;
			document.getElementById("alert").style.display = "";
		}
		 
	};


</script>
<a href="javascript:window.alert('Hello world')">click</a>
<p> </p>
</body>
</html>

system alert 과 같은 형태의 효과를 내기 위해서는 몇가지 더 추가 되어야 할 사항들이 있습니다. alert window가 발생된 시점에 content의 모든 영역에 click을 방지 하기 위해 투명 layer로 차단해줘야 겠죠 그외에도 몇가지 더 추가 해야 할 거 같습니다.

'Developer > JavaScript' 카테고리의 다른 글

자바스크립트 Trim 최적화 (0)	2008.02.11
태그명 알아내기 (0)	2008.01.22
JavaScript Submit Function (0)	2007.08.02

태그명 알아내기

2008. 1. 22. 11:05

document.getElementsByTagName

.....내 머리는 붕어

-Tag Count
document.getElementsByTagName("태그명").length

-Tag Item Value
document.getElementsByTagName("태그명").item(0).value

-Tag Item Focus
document.getElementsByTagName("태그명").item(0).focus();

.....내 머리속의 붕어
.....망할....OTL;;

'Developer > JavaScript' 카테고리의 다른 글

Override window.alert() (0)	2008.02.04
JavaScript Submit Function (0)	2007.08.02
자바스크립트 라이브러리의 종류와 특징 (0)	2007.06.22

JavaScript Submit Function

2007. 8. 2. 09:12

/**
* common function for search and submit.
*
* frm: ex) document.getElementById("[form id]");
* url: target url. ex) my_list.jsp
* method: "get" or "post". default is "get".
*
* goto(document.getElementById('frm'), 'my_list.jsp', 'get', 'ifr_content');
*/
function goto(frm, url, method, target) {
   if (method != "get" && method != "post") {
   method = "get";
   }
   if (target == null || target == "undifined" || target.length == 0) {
   target = "_self";
   }

   frm.action = url;
   frm.method = method;
   frm.target = target
   frm.submit();
}

'Developer > JavaScript' 카테고리의 다른 글

태그명 알아내기 (0)	2008.01.22
자바스크립트 라이브러리의 종류와 특징 (0)	2007.06.22
웹표준에 맞는 form 코딩법 (0)	2007.05.25

자바스크립트 라이브러리의 종류와 특징

2007. 6. 22. 08:53

Fire June 님이 웹어플리케이션 컨퍼런스 2007에서 발표한 JavaScript Library 의 종류와 특징이라는 주제의 발표 자료다.
Ajax를 사용하기 위해서는 JavaScript Library 거의 필수가 되버린 상황에 여러 Library 중 무엇을 써야 하는가를 선택하는 것은 성능과 직결되는 문제.
프리젠테이션 발표자료 인지라 대표적 Library 들을 간략하게 설명하고 있지만, 주옥같은 자료라고 할 수있다.. ㅜ_ㅜ)b

invalid-file

위 파워포인트 자료에는 각 라이브러리 배포사이트의 스크린샷에 링크가 있으며, 슬라이드 노트에 발표내용을 포함하고 있다.

원문 : http://firejune.com/1109

'Developer > JavaScript' 카테고리의 다른 글

JavaScript Submit Function (0)	2007.08.02
웹표준에 맞는 form 코딩법 (0)	2007.05.25
5가지 시계 표기 법 (0)	2007.05.25

웹표준에 맞는 form 코딩법

2007. 5. 25. 23:34

orm 코딩시 발생되는 margin 을 없애기 위해 대부분 아래의 `틀린 코딩법`으로 코딩을 한다.
이는 표준에 위반되는 행위이며 스크립트로 form 을 제어 할 수 없는 위험한 상태까지 가게 된다.
따라서 표준 브라우져에서 가능하려면 아래의 `올바른 코딩법`으로 코딩하기 바란다.

form 에 대한 margin 값을 없애기 위해

<style type='text/css'>
form {
margin:0;
}
</style>

을 꼭 추가 하기 바란다.

틀린 코딩법

<table>
<form><tr><td><inpu type='text'></td></tr></form>
</table>

올바른 코딩법

<form>
<table><tr><td><input type='text'></td></tr></table>
</form>

자바스크립에서 표준에 맞도록 image, form, input element에 접근하기 위해서는 아래와 같이 사용하기 바란다.

document.images['bar'] // name 이 있는 경우
document.images[0]
document.images[1]
document.forms['execform'] //name 이 있는 경우
document.forms[0].elements['addr']
document.forms[0].elements[0]

'Developer > JavaScript' 카테고리의 다른 글

자바스크립트 라이브러리의 종류와 특징 (0)	2007.06.22
5가지 시계 표기 법 (0)	2007.05.25
한줄로 끝내는 롤오버마우스 스크립트 (0)	2007.05.25

5가지 시계 표기 법

2007. 5. 25. 23:26

<HTML> 
<HEAD> 
<TITLE> JASKO Sample<span class="key1" onclick="keyword_open('/kview.php?kd=+Script')"> Script</span> </TITLE> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 

window.status="로딩중..." 

function timeNow() 
{ 
now = new Date() 
var hours = now.getHours() 
var minutes = now.getMinutes() 
var seconds = now.getSeconds() 
var ap = "오전" 
  if (hours > 12) 
      {var ap = "오후" , hours = hours-12 ;} 
  if (minutes < 10) 
      {minutes = "0"+minutes} 
  if (seconds < 10) 
      {seconds = "0"+seconds} 

/********************** 상태바 시계 *******************/ 
window.status = hours+":"+minutes+":"+seconds+" "+ap 
/********************** 상태바 시계 *******************/ 

/********************* 텍스트 상자 시계 ************************/ 
document.time.clock.value = hours+":"+minutes+":"+seconds+" "+ap 
document.time.clock.size = document.time.clock.value.length 
/********************* <span class="key1" onclick="keyword_open('/kview.php?kd=%ED%85%8D%EC%8A%A4%ED%8A%B8+')">텍스트 </span>상자 시계 ************************/ 

/************************* 버튼 시계 *****************************/ 
document.time.butclock.value = hours+":"+minutes+":"+seconds+" "+ap 
/************************* 버튼 시계 *****************************/ 

/********************* 타이틀 바 시계 ***************/ 
document.title = hours+":"+minutes+":"+seconds+" "+ap 
/********************* 타이틀 바 시계 ***************/ 

setTimeout("timeNow()",1000) 

} 

function timeAlert() 
{ 
now = new Date() 
var hours = now.getHours() 
var minutes = now.getMinutes() 
var seconds = now.getSeconds() 
var ap = "오전" 

  if (hours > 12) 
      {var ap = "오후" , hours = hours-12 ;} 
  if (minutes < 10) 
      {minutes = "0"+minutes} 
  if (seconds < 10) 
      {seconds = "0"+seconds} 
alert(hours+":"+minutes+":"+seconds+" "+ap) 
} 

// --> 
</SCRIPT> 

</head> 

<body onLoad="timeNow()"> 
<CENTER><H3>다섯가지 시계표기법</H3></CENTER> 

<p align=center> 
<form name=time> 
<input name=clock size=10 value="로딩 중입니다..."> 
<input type=button name=butclock value="로딩 중입니다..."> 
<input type=button name=showTime value=" 시계 보기 " onClick="timeAlert()"> 

</form> 

<TABLE width=50% align=center bgcolor=teal> 
<TR> 
<TD bgcolor=ivory> 
<LI>1번째 : 제목표시줄 
<LI>2번째 : 상태표시줄 
<LI>3번째 : 텍스트상자 
<LI>4번째 : 버튼 
<LI>5번째 : 버튼클릭후 팝업 

</TD> 
</TR> 
</TABLE> 
</body> 
</html>

'Developer > JavaScript' 카테고리의 다른 글

웹표준에 맞는 form 코딩법 (0)	2007.05.25
한줄로 끝내는 롤오버마우스 스크립트 (0)	2007.05.25
랜덤 이미지 출력 (0)	2007.05.25

한줄로 끝내는 롤오버마우스 스크립트

2007. 5. 25. 23:24

<a href='#' onmouseover='Image01.src="바뀔이미지명"' onmouseout='Image01.src="원래이미지명"'>
	<img src='원래이미지명' name='Image01'>
</a>

<script>~</script>

같은건 필요없습니다.

아래같은 형태로도 가능합니다.

<table> 
<tr> 
    <td background="원래이미지" onmouseenter="Image01.style.visibility='visible';"
		onmouseleave="Image01.style.visibility='hidden';"> 
    <img id="Image01" src="바뀔이미지" style="visibility:hidden;"> 
   </td> 
</tr> 
</table>

출처 : http://firejune.com/94&ct1=8&ct2=42

'Developer > JavaScript' 카테고리의 다른 글

5가지 시계 표기 법 (0)	2007.05.25
랜덤 이미지 출력 (0)	2007.05.25
체크 박스 클릭하면 하루동안 팝업창 안 열리게 하기 (0)	2007.05.25

랜덤 이미지 출력

2007. 5. 25. 23:20

<script> 
// 2개의 이미지 경로
var images = new Array("./images/my1.gif","./images/sea.gif",); 

// 추가한 수만큼 고침
var index = Math.round(Math.random * 2); 

document.write("<img width=130 name='image" + i + "' src='" + images [i] + "'></img>"); 
</script>

'Developer > JavaScript' 카테고리의 다른 글

한줄로 끝내는 롤오버마우스 스크립트 (0)	2007.05.25
체크 박스 클릭하면 하루동안 팝업창 안 열리게 하기 (0)	2007.05.25
자바스크립트로 마우스 휠 제어하기 (0)	2007.05.25

체크 박스 클릭하면 하루동안 팝업창 안 열리게 하기

2007. 5. 25. 23:14

출처 : http://firejune.com/98&ct1=8&ct2=42

아래의 소스를 새창을 띄울 부모문서의 <head></head>사이에 넣어 주세요 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function getCookie( name ){ 
var nameOfCookie = name + "="; 
var x = 0; 
while ( x <= document.cookie.length ) 
{ 
var y = (x+nameOfCookie.length); 
if ( document.cookie.substring( x, y ) == nameOfCookie ) { 
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) 
endOfCookie = document.cookie.length; 
return unescape( document.cookie.substring( y, endOfCookie ) ); 
} 
x = document.cookie.indexOf( " ", x ) + 1; 
if ( x == 0 ) 
break; 
} 
return ""; 
} 

//폼의 체크 박스를 체그 하면 새창이 나타나지 않으며, 체크 하지 않았을 경우, 계속 나타납니다. 

if ( getCookie( "Notice" ) != "done" ) { 
//새창으로 열릴 페이지의 경로 및 크기와 위치를 지정해 주세요. 
noticeWindow  =  window.open('http://www.wowman.org','notice','left=0, top=0, width="30"0,height=200'); 
noticeWindow.opener = self; } 

// --> 
</SCRIPT> 




아래의 소스를 새창으로 열릴 문서의 <head>와</head> <span class="key1" onclick="keyword_open('/kview.php?kd=%ED%83%9C%EA%B7%B8+')">태그 </span>사이에 넣어주세요 

<SCRIPT language="JavaScript"> 
<!-- 
function setCookie( name, value, expiredays ) 
{ 
var todayDate = new Date(); 
todayDate.setDate( todayDate.getDate() + expiredays ); 
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 
} 

function closeWin() 
{ 
if ( document.pop.Notice.checked ) 
setCookie( "Notice", "done" , 1);//1은 하루동안 새창을 열지 않게 합니다. 
window.close(); 
} 
// --> 
</SCRIPT> 


아래의 소스를 새창으로 새창으로 열릴 문서의  <body>와</body><span class="key1" onclick="keyword_open('/kview.php?kd=%ED%83%9C%EA%B7%B8+')">태그 </span>사이에 넣어주세요 



<form name=pop> 
<p align="center"> 
<input type=checkbox name="Notice" value="">다음부터 공지창 띄우지 않음<a href="javascript:history.onclick=closeWin()">[닫기]</a>   
</form>

'Developer > JavaScript' 카테고리의 다른 글

랜덤 이미지 출력 (0)	2007.05.25
자바스크립트로 마우스 휠 제어하기 (0)	2007.05.25
텍스트영역 리사이즈 컴포넌트 (0)	2007.05.25

자바스크립트로 마우스 휠 제어하기

2007. 5. 25. 22:10

최근 Ajax의 활용범위가 확대되면서 슬라이더, 드래그앤 드롭, 소테이블, 백그라운드 업로더, 드래그 선택영역, 오토 컴플리케이션 등 부수적인 웹 인터페이스가 자바스크립트로 속속들이 구현되고 있다. 마우스 버튼은 물론 키보드까지 DHTML로 제어하는 이 시점에서 마우스 인풋없는 웹서핑은 상상조차 할 수 없게 되었다. 이러한 가운데 Adomas Paltanavicius는 자바스크립트를 이용하여 휠을 제어하는 자바스크립트 코드까지 공개하였다. IE와 파이어폭스 등의 브라우저에서 작동하며 테스트 페이지에서 작동하는 모습을 확인할 수 있다.(뭔가 재미있는 생각이 떠오르지 않는가?)

/* This is high-level function.  */

function handle(delta) {

    var s = delta + ": ";

    if (delta < 0)  s += "down";

    else s += "up";

    document.getElementById('delta').innerHTML = s;

}



/* Event handler for mouse wheel event. */

function wheel(event){

    var delta = 0;

    if (!event) event = window.event;

    if (event.wheelDelta) {

        delta = event.wheelDelta/120;

        if (window.opera) delta = -delta;

    } else if (event.detail) delta = -event.detail/3;

    if (delta) handle(delta);

}



/* Initialization code. */

if (window.addEventListener)

    window.addEventListener('DOMMouseScroll', wheel, false);

window.onmousewheel = document.onmousewheel = wheel;

출처 : http://firejune.com/922&ct1=8&ct2=42

'Developer > JavaScript' 카테고리의 다른 글

체크 박스 클릭하면 하루동안 팝업창 안 열리게 하기 (0)	2007.05.25
텍스트영역 리사이즈 컴포넌트 (0)	2007.05.25
30 Scripts For Galleries, Slideshows and Lightboxes (0)	2007.05.21

텍스트영역 리사이즈 컴포넌트

2007. 5. 25. 22:03

Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

/**
* ResizingTextArea Component
* Richard McMahon(http://jroller.com)
*/
var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
defaultRows: 1,
initialize: function(field) {
this.defaultRows = Math.max(field.rows, 1);
this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
Event.observe(field, "click", this.resizeNeeded);
Event.observe(field, "keyup", this.resizeNeeded);
},
resizeNeeded: function(event) {
var t = Event.element(event);
var lines = t.value.split('\n');
var newRows = lines.length + 1;
var oldRows = t.rows;
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
}
if (newRows > t.rows) t.rows = newRows;
if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
}
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

출처 : http://firejune.com/1026&ct1=8&ct2=42

'Developer > JavaScript' 카테고리의 다른 글

자바스크립트로 마우스 휠 제어하기 (0)	2007.05.25
30 Scripts For Galleries, Slideshows and Lightboxes (0)	2007.05.21
파이어버그의 콘솔을 이용한 자바스크립트 트레이스 (0)	2007.05.03

30 Scripts For Galleries, Slideshows and Lightboxes

2007. 5. 21. 09:26

출처 : http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Ajax Image Galleries & Lightboxes

CSS-Based Image Galleries

JavaScript + CSS-based Galleries & DHTML-Galleries

'Developer > JavaScript' 카테고리의 다른 글

텍스트영역 리사이즈 컴포넌트 (0)	2007.05.25
파이어버그의 콘솔을 이용한 자바스크립트 트레이스 (0)	2007.05.03
JS, CSS파일 압축전송으로 페이지 로딩속도 향상 (0)	2007.05.03

파이어버그의 콘솔을 이용한 자바스크립트 트레이스

2007. 5. 3. 09:22

파이어폭스(Firefox)의 자바스크립트 디버그(debug) 도구인 파이어버그(Firebug)를 이용한 트레이스(trace) 방법을 소개한다. 파이어버그는 훌륭한 디버깅(debugging) 콘솔(console)을 가지고 있다. 간략하게 콘솔에 대해 설명하자면 메시지를 출력하거나 문자열(string)을 출력하는 일 외에도 DOM(Document Object Modal) 객체(object)를 표시할 때에는 어떠한 형태인지 분석하고 분석가능한 경우 DOM에 할당(registered)된 클리커블(clickable)한 객체 목 록을 표시하한다. 만약 엘리먼트(element)라면 'div#IDName.ClassName'과 같이 엘리먼트가 가진 id값, class값 혹은 action, src등 여러정보를 표시하고 클릭시 파이어버그 HTML트리의 해당 노드로 이동시키는 역할까지 하게된다.

파이어버그의 디버깅 콘솔

위 화면은 파이어 버그의 콘솔을 이용해서 트레이스한 예이다. 자바스크립트 코드를 만들면서 지역변수의 값을 실시간으로 확인하거나 산출물에 대한 결과를 리포트할때 사용하면 효과적이다. 지금부터 파이어버그의 콘솔을 활용하는 방법에 대하여 알아보자.

var debug = function(){
  // check browser has console
  if(typeof console != 'undefined' && typeof console.log != 'undefined'){
    console['info'](arguments); // call Firebug's console
  }

출처 : http://firejune.com/1079
}

간 단하게 디버그 함수를 하나 생성했다. console['info'] 함수에 아규먼트(argument)로 넘긴 값이 파이어버그의 콘솔에 표시된다. 콜솔에 표시되는 메시지의 종류로는 'debug', 'info', 'warn', 'error'가 있다. 이것은 좌측 그림과 같이 메시지의 종류를 시각적으로 표시해준다. debug는 값만을 출력하며, info는 메시지 앞 에 파랑색 'i' 아이콘을 붙게되며, warn은 노랑색 'i'아이콘에 라인이 하늘색으로 강조된다. 그리고 error는 빨간색 'x' 아이콘이 붙고 라인이 연노랑색으로 강조된다. 여기서는 트레이스 구분을 위해 일괄적으로 'info'를 사용했다.

자, 이제 위에서 생성한 debug 함수를 활용해보자.

debug('hello world!');
// -> ["hello world!"]
debug(debug, typeof debug);
// -> [function(), "function"]
debug(document.getElementsByTagName('form'));
// -> [[form custom, form#weblog index.php]]
debug('value1', 'value2', 'value3', 'value4', 'value5');
// -> ["value1", "value2", "value3", "value4", "value5"]

파이어버그의 강력한 콘솔기능을 트레이스로 활용함으로써 조금더 편리한 디버깅환경을 구축할수 있다. 이것은 소스를 분석하거나 조작하는데에도 매우 효과적이다. enjoy it.

'Developer > JavaScript' 카테고리의 다른 글

30 Scripts For Galleries, Slideshows and Lightboxes (0)	2007.05.21
JS, CSS파일 압축전송으로 페이지 로딩속도 향상 (0)	2007.05.03
JavaScript Object Table (0)	2007.05.03

JS, CSS파일 압축전송으로 페이지 로딩속도 향상

2007. 5. 3. 09:18

1/2

Niels Leenheer씨는 HTML 페이지의 로드를 가속화하기 위해 포함하는 자바스크립트 및 스타일시트 파일에 gzip을 사용하여 압축하고 모드리라이트(mod_rewrite) 모듈을 이용하여 자동-전송하는 방법을 자신의 개인 블로그에 소개했다. 좌축의 이미지는 파이어버그(firebug)의 Net 콘솔 화면으로 압축전과 압축후의 로딩속도와 파일용량을 비교한 것이다. 압축률은 1: 0.23~0.25 이며, 자료의 크기는 줄지만 완전히 투과하도록 작동하기 때문에 종전의 소스코드에는 변화를 줄 필요가 없다.

파일의 압축전송은 브라우저가 한정된 수만을 동시에 다운로드하므로 몇몇 파일이 완료될때 까지 기다리는 문제가 발생한다. 이 문제의 해결책은 1개의 큰 파일로 결합하여 전송 대역폭을 줄이는 방법을 제공한다. 예를 들자면 아래와 같다.

분리된 자바스크립트 라이브러리 URL :
http://www.firejune.com/javascripts/prototype.js
http://www.firejune.com/javascripts/builder.js
http://www.firejune.com/javascripts/effects.js
http://www.firejune.com/javascripts/dragdrop.js
http://www.firejune.com/javascripts/slider.js

하나로 결합하기 :
http://www.firejune.com/javascripts/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

그리고 웹서버의 리소스 확보를 위해서 파일들의 요청이 있을때마다 압축하는 작업을 거치지않고 캐시를 사용하도록 설정되어 있다.(끌 수 있음) 설치를 시작하기 전에 우선 아래의 주소에서 소스를 다운로드하고 파일명을 'combine.php'로 저장다.

combine.php 다운로드 : http://rakaz.nl/projects/combine/combine.phps

설정을 위해 다운로드한 파일을 열어 자바스크립트, 스타일시트, 캐시 폴더의 경로를 설정한다. 만약 웹서버에 캐시폴더가 없다면 쓸수있는 권한이 있는 폴더를 생성해야한다. 그리고 웹서버의 루트(root)에 업로드 하자. 두번째로 모드리라이트를 손볼 차례이다. 루트의 .htaccess파일을 열어 아래와같은 내용을 삽입하자. 1번과 2번라인은 이미 설정되어 있다면 무시해도 무방하다. 이 또한 마찬가지로 php에서 설정한 자바스크립트가 있는 폴더와 스타일시트가 있는 폴더이름만 변경하면 된다.

RewriteEngine On
RewriteBase /
RewriteRule ^stylesheets/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascripts/(.*\.js) /combine.php?type=javascript&files=$1

다소 간편한 몇가지의 조작만으로 속도향상을 꾀할수 있었다. 자바스크립트와 스타일스트의 양이 많은 곳이라면 꼭한번 써봄직한 솔루션이다.

출처 : http://firejune.com/1080

'Developer > JavaScript' 카테고리의 다른 글

파이어버그의 콘솔을 이용한 자바스크립트 트레이스 (0)	2007.05.03
JavaScript Object Table (0)	2007.05.03
문서 내 모든 링크의 아래 점선 없애기 (0)	2007.05.03

JavaScript Object Table

2007. 5. 3. 08:47

Anchor \| anchors array \| Applet \| applets array \| Area \| Array \| Button \| Checkbox \| Date \| document \| FileUpload \| Form \| forms array \| frames array \| Hidden \| History \| history array \| Image \| images array \| Layers \| layers array \| Link \| links array \| location \| Math \| MimeType \| mimeTypes array \| navigator \| Number \| Option \| options array \| Password \| Plugin \| plugins array \| Radio \| radio array \| Reset \| screen \| Select \| String \| Submit \| Text \| Textarea \| window
※ 녹색은 네스케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다
객체(Object)	속성(Property)	메소드(Method)	이벤트핸들러(Event Handler)
Anchor	name text x y
anchors array	length
Applet		applet's methods
applets array	length
Area	hash host gostname href pathname port protocol search target		onClick onmouseOut onmouseOver
Array	length	concat join pop push reverse shift slice sort unshjft
Button	form name type value	blur click focus	onClick onmouseDown onmouseUp
Checkbox	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
Date		getDate getDay getFullYear getHours getMilliseconds getMinutes getMonth getSeconds getTime getTimezoneOffset getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMilliseconds getUTCMinutes getUTCMonth getUTCSeconds getYear parse setDate setFullYear setHours setMilliseconds setMinutes setMonth setSeconds setTime setUTCDate setUTCHours setUTCMilliseconds setUTCMinutes setUTCMonth setUTCSeconds setYear goGMTString toLocaleString toString toUTCString UTC valueOf
document	activeElement alinkColor all Anchor anchors Applet applets Area bgColor body charset children cookie defaultCharset domain embed embeds expando fgColor Form forms Image images lastModified Layer layers linkColor Link links location parentWindow plugins readyState referrer scripts selection styleSheets title URL vlinkColor	clear close createElement createStylesheet elementFromPoint getSelection open write writeIn
FileUpload	form name type value	blur focus select	onBlur onFocus onSelect
Form	action Button Checkbox elements encoding FileUpload Hidden length method name Password Radio Reset Select Submit target Text Textarea	reset submit	onReset onSubmit
forms array	length
frames array	length
Hidden	form name type value
History	current length next previous	back foward go
history array	length
Image	border complete height hspace lowsrc name src vspace width x y		onAbort onError onLoad
images array	length
Layers	above background below bgColor clip document hidden left name pageX pageY parentLayer siblingAbove siblingBelow src top visibility window x y zindex	load moveAbove moveBelow moveBy moveTo moveToAbsolute resizeBy resizeTo	onBlur onFocus onmouseOut onmouseOver onmouseUp
layers array	length
Link	hash host hostname href pathname port protocol search target text x y		onClick onmouseOut onmouseOver
links array	length
location	hash host hostname href pathname port protocol search	reload replace
Math	E LN₂ LN₁₀ LOG₂E LOG₁₀E PI SQRT_{1_2} SQRT₂	abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan
MimeType	description enabledPlugin suffixes type
mimeTypes array	length
navigator	appCodeName appMinorVersion appName appVersion browserLanguage cookieEnabled cpuClass languages mimeTypes platform plugins systemLanguage userAgent userLanguage userProfile	javaEnabled preference savePreferences taintEnabled
Number	MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY POSITIVE_INFINITY	toString valueOf
Option	defaultSelected index selected selectedIndex text value
options array	length
Password	defaultValue form name type value	blur focus select	onBlur onChange onFocus onKeydown onKeypress onKeyup onSelect
Plugin	description filename name	refresh
plugins array	length
Radio	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
radio array	length
Reset	form name type value	blur click focus	onClick onmouseDown onmouseUp
screen	availHeight availLeft availTop availWidth BufferDepth colorDepth height pixelDepth updayeInterval width
Select	form length name options selectedIndex type	blur focus	onChange
String	length	anchor big blink bold charAt charCodeAt concat fixed fontcolor fontsize formCharCode indexOf italics lastIndexOf link match replace search slice small split strike sub substr substring sup toLowerCase toUpperCase
Submit	form name type value	blur click focus	onClick onMouseDown onMouseUp
Text	defaultValue form name type value	blur click focus select	onBlur onChange onFocus onKeydown onKeyup onSelect
Textarea	defaultValue form name type value	blur click focus select	onBlur onChange onFocus onKeydown onKeyup onSelect
window	clientInformation closed defaultStatus dialogArguments dialogHeight dialogLeft dialogLeft dialogTop dialogWidth document event frames history innerHeight innerWidth length location locationbar menubar name navigator offscreenBuffering opener outerHeight outerWidth pageXOffset pageYOffset parent personalbar screen screenX screenY scrollbars self status statusbar toolbar top	alert back blur close confirm find focus forward home moveBy moveTo navigate open print prompt resizeBy resizeTo scroll scrollBy scrollTo stop	onBlur onError onFocus onLoad onResize onUnload

'Developer > JavaScript' 카테고리의 다른 글

JS, CSS파일 압축전송으로 페이지 로딩속도 향상 (0)	2007.05.03
문서 내 모든 링크의 아래 점선 없애기 (0)	2007.05.03
윈도우 크기에 따라 글자크기 변경 (0)	2007.05.03

문서 내 모든 링크의 아래 점선 없애기

2007. 5. 3. 08:43

문서 내 모든 링크의 아래 점선 없애기

'Developer > JavaScript' 카테고리의 다른 글

JavaScript Object Table (0)	2007.05.03
윈도우 크기에 따라 글자크기 변경 (0)	2007.05.03
페이지 직접생성 팝업 (0)	2007.05.03

윈도우 크기에 따라 글자크기 변경

2007. 5. 3. 08:42

'Developer > JavaScript' 카테고리의 다른 글

문서 내 모든 링크의 아래 점선 없애기 (0)	2007.05.03
페이지 직접생성 팝업 (0)	2007.05.03
자바스트립트 객체 (0)	2007.05.02

페이지 직접생성 팝업

2007. 5. 3. 08:19

'Developer > JavaScript' 카테고리의 다른 글

윈도우 크기에 따라 글자크기 변경 (0)	2007.05.03
자바스트립트 객체 (0)	2007.05.02
문자열(value)이 한글인지 아닌지를 체크 (0)	2007.05.02

PREV 1 2 NEXT

	key press	key down	key up
0	48	48	48
1	49	49	49
2	50	50	50
3	51	51	51
4	52	52	52
5	53	53	53
6	54	54	54
7	55	55	55
8	56	56	56
9	57	57	57

	key press	key down	key up
~	126	192	192
!	33	49	49
@	64	50	50
#	35	51	51
$	36	52	52
%	37	53	53
^	94	54	54
&	38	55	55
*	42	56	56
(	40	57	57
)	41	48	48
_	95	189	189
+	43	187	187
\|	124	220	220
`	96	192	192
-	45	189	189
=	61	187	187
\	92	220	220
{	123	219	219
[	91	219	219
}	125	221	221
]	93	221	221
:	58	186	186
;	59	186	186
"	34	222	222
'	39	222	222
<	60	188	188
>	62	190	190
?	63	191	191
,	44	188	188
.	46	190	190
/	47	191	191

	key press	key down	key up
a	97	65	65
A	65	65	65
b	98	66	66
B	66	66	66
c	99	67	67
C	67	67	67
d	100	68	68
D	68	68	68
e	101	69	69
E	69	69	69
f	102	70	70
F	70	70	70
g	103	71	71
G	71	71	71
h	104	72	72
H	72	72	72
i	105	73	73
I	73	73	73
j	106	74	74
J	74	74	74
k	107	75	75
K	75	75	75
l	108	76	76
L	76	76	76
m	109	77	77
M	77	77	77
n	110	78	78
N	78	78	78
o	111	79	79
O	79	79	79
p	112	80	80
P	80	80	80
q	113	81	81
Q	81	81	81
r	114	82	82
R	82	82	82
s	115	83	83
S	83	83	83
t	116	84	84
T	84	84	84
u	117	85	85
U	85	85	85
v	118	86	86
V	86	86	86
w	119	87	87
W	87	87	87
x	120	88	88
X	88	88	88
y	121	89	89
Y	89	89	89
z	122	90	90
Z	90	90	90

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

Lower Case
97	a
98	b
99	c
100	d
101	e
102	f
103	g
104	h
105	i
106	j
107	k
108	l
109	m
110	n
111	o
112	p
113	q
114	r
115	s
116	t
117	u
118	v
119	w
120	x
121	y
122	z

	key press	key down	key up
0	48	48	48
1	49	49	49
2	50	50	50
3	51	51	51
4	52	52	52
5	53	53	53
6	54	54	54
7	55	55	55
8	56	56	56
9	57	57	57

	key press	key down	key up
~	126	192	192
!	33	49	49
@	64	50	50
#	35	51	51
$	36	52	52
%	37	53	53
^	94	54	54
&	38	55	55
*	42	56	56
(	40	57	57
)	41	48	48
_	95	189	189
+	43	187	187
\|	124	220	220
`	96	192	192
-	45	189	189
=	61	187	187
\	92	220	220
{	123	219	219
[	91	219	219
}	125	221	221
]	93	221	221
:	58	186	186
;	59	186	186
"	34	222	222
'	39	222	222
<	60	188	188
>	62	190	190
?	63	191	191
,	44	188	188
.	46	190	190
/	47	191	191

	key press	key down	key up
a	97	65	65
A	65	65	65
b	98	66	66
B	66	66	66
c	99	67	67
C	67	67	67
d	100	68	68
D	68	68	68
e	101	69	69
E	69	69	69
f	102	70	70
F	70	70	70
g	103	71	71
G	71	71	71
h	104	72	72
H	72	72	72
i	105	73	73
I	73	73	73
j	106	74	74
J	74	74	74
k	107	75	75
K	75	75	75
l	108	76	76
L	76	76	76
m	109	77	77
M	77	77	77
n	110	78	78
N	78	78	78
o	111	79	79
O	79	79	79
p	112	80	80
P	80	80	80
q	113	81	81
Q	81	81	81
r	114	82	82
R	82	82	82
s	115	83	83
S	83	83	83
t	116	84	84
T	84	84	84
u	117	85	85
U	85	85	85
v	118	86	86
V	86	86	86
w	119	87	87
W	87	87	87
x	120	88	88
X	88	88	88
y	121	89	89
Y	89	89	89
z	122	90	90
Z	90	90	90

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

Lower Case
97	a
98	b
99	c
100	d
101	e
102	f
103	g
104	h
105	i
106	j
107	k
108	l
109	m
110	n
111	o
112	p
113	q
114	r
115	s
116	t
117	u
118	v
119	w
120	x
121	y
122	z