메타태크<META TAGS>

<META HTTP-EQUIV="Expire" CONTENT="-1"> :캐쉬 완료(파기)시간 정의
<META HTTP-EQUIV="Last-Modified" CONTENT="Mon,10 Jul 2000 18:47:14"> :최종수정일
<META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'> :캐쉬가 되지 않게 하는 태그
<META HTTP-EQUIV="Content-type" content="text/html; charset=euc-kr"> :웹문서의 언어를 설정
<META HTTP-EQUIV="Imagetoolbar" content="no"> :그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음
<META HTTP-EQUIV="Refresh" content="15;URL=http://galaxy.channeli.net/jakalky/sitemap.htm"> :페이지이동
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) "> :페이지 로딩시 트랜지션 효과(장면 전환 효과)

<META name="Subject" content="홈페이지주제">
<META name="Title" content="홈페이지이름">
<META name="Description" content="설명문">
<META name="Keywords" content="키워드">
<META name="Author" content="만든사람">
<META name="Publisher" content="만든단체나회사">
<META name="Other Agent" content="웹책임자">
<META name="Classification" content="카테고리위치(분류)">
<META name="Generator" content="생성프로그램(에디터)">
<META name="Reply-To(Email)" content="메일주소">
<META name="Filename" content="파일이름">
<META name="Author-Date(Date)" content="제작일">
<META name="Location" content="위치">
<META name="Distribution" content="배포자">
<META name="Copyright" content="저작권">
<META name="Robots" content="ALL">

<META name="robots" content="index,follow" /> : 이 문서도 긁어가고 링크된 문서도 긁어감.
<META name="robots" content="noindex,follow" /> : 이 문서는 긁어가지 말고 링크된 문서만 긁어감.
<META name="robots" content="index,nofollow" /> : 이 문서는 긁어가되, 링크는 무시함.
<META name="robots" content="noindex,nofollow" /> : 이 문서도 긁지 않고, 링크도 무시함.

자식창과 부모창의 관계, iframe 내부와 메인페이지와의 관계제어

출처 : http://mainia.tistory.com/423

 

javascript 에서 새로 띄운 자식창과 부모창, iframe 내부와 메인페이지간의 제어 방법에 대한

다양한 예제를 학습해본다.

 

1. 자식창에서 부모창의 특정 Form 에 데이터를 집어넣고 싶을 때

자식창에서 부모창을 가리킬 때 opener 객체를 사용한다. document.Form.input 은 부모창에

속해있는 요소이다.

opener.document.Form.input.value = “값”;

 

2. 자식창에서 부모창의 페이지를 이동시키고 싶을 때

부모창을 원하는 페이지로 이동시킨후 자식창(자기자신) 은 닫는다.

window.opener.location.href = “/admin/login.jsp” ;

window.close();

 

3. 자식창에서 부모창을 새로고침하고 싶을 때

if (!opener.closed){

           opener.document.location.reload();

           window.close();

}

 

4. iframe 내부에서 외부에 있는 메인페이지의 특정 Form 에 값을 집어넣고 싶을 때

iframe 에서 메인을 가리킬때는 parent 객체로 접근한다.

parent.Form.input.value = “값”;

 

5. iframe 내부에서 외부에 있는 메인페이지의 스크립트 함수를 실행하고자 할 때

parent.[메인함수명]

parent.DoSend();

 

6. 메인에서 iframe 의 페이지를 이동시키고 싶을 때

[iframe 이름].location.href

frame.location.href=”www.naver.com”;

<iframe name=”frame”>

####

</iframe>

 

7. 위의 2가지 경우를 섞은것이다. 부모창의 iframe 에서 새창을 하나 띄웠다.

자식창에서 부모창의 페이지를 이동하고 싶은것이다.

이것은 부모창의 iframe 에 갔다가 메인으로 다시 이동해야한다.

2가지의 방법이 있는데 첫번째는 window.opener 를 호출하여 iframe으로간뒤

parent 로 메인에 접근한다.

window.opener.parent.location.href = “URL”;

 

두번째는 top 을 이용해서 부모창을 바로 찾는것이다

top.opener.location.href = “URL”;

window.open

출처 : http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/open_0.asp

 

Opens a new window and loads the document specified by a given URL.

Syntax

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

Parameters

sURL	Optional. String that specifies the URL of the document to display. If no URL is specified, a new window with about:blank is displayed.
sName	Optional. String that specifies the name of the window. This name is used as the value for the TARGET attribute on a form or an a element. _blank The sURL is loaded into a new, unnamed window. _media The sURL is loaded into the HTML content area of the Media Bar. Available in Microsoft Internet Explorer 6 or later. _parent The sURL is loaded into the current frame's parent. If the frame has no parent, this value acts as the value _self. _search Available in Internet Explorer 5 and later. The sURL is opened in the browser's search pane. _self The current document is replaced with the specified sURL . _top sURL replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value _self.
sFeatures	Optional. This String parameter is a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes, toolbar=yes"). The following features are supported. channelmode = { yes | no | 1 | 0 } Specifies whether to display the window in theater mode and show the channel band. The default is no. directories = { yes | no | 1 | 0 } Specifies whether to add directory buttons. The default is yes. fullscreen = { yes | no | 1 | 0 } Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window. A window in full-screen mode must also be in theater mode (channelmode). height = number Specifies the height of the window, in pixels. The minimum value is 100. left = number Specifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. location = { yes | no | 1 | 0 } Specifies whether to display the input field for entering URLs directly into the browser. The default is yes. menubar = { yes | no | 1 | 0 } Specifies whether to display the menu bar. The default is yes. resizable = { yes | no | 1 | 0 } Specifies whether to display resize handles at the corners of the window. The default is yes. scrollbars = { yes | no | 1 | 0 } Specifies whether to display horizontal and vertical scroll bars. The default is yes. status = { yes | no | 1 | 0 } Specifies whether to add a status bar at the bottom of the window. The default is yes. titlebar = { yes | no | 1 | 0 } Specifies whether to display a title bar for the window. This parameter is ignored unless the calling application is an HTML Application or a trusted dialog box. The default is yes. toolbar = { yes | no | 1 | 0 } Specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available. The default is yes. top = number Specifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. width = number Sets the width of the window, in pixels. The minimum value is 100.
bReplace	Optional. When the sURL is loaded into the same window, this Boolean parameter specifies whether the sURL creates a new entry or replaces the current entry in the window's history list. true sURL replaces the current document in the history list false sURL creates a new entry in the history list.

Return Value

Returns a reference to the new window object. Use this reference to access properties and methods on the new window.

Remarks

By default, the open method creates a window that has a default width and height and the standard menu, toolbar, and other features of Internet Explorer. You can alter this set of features by using the sFeatures parameter. This parameter is a string consisting of one or more feature settings.

When the sFeatures parameter is specified, the features that are not defined in the parameter are disabled. Therefore, when using the sFeatures parameter, it is necessary to enable all the features that are to be included in the new window. If the sFeatures parameter is not specified, the window features maintain their default values. In addition to enabling a feature by setting it to a specific value, simply listing the feature name also enables that feature for the new window.

Internet Explorer 5 allows further control over windows through the implementation of title in the sFeatures parameter of the open method. Turn off the title bar by opening the window from a trusted application, such as Microsoft Visual Basic or an HTML Application (HTA). These applications are considered trusted, because each uses Internet Explorer interfaces instead of the browser.

When a function fired by an event on any object calls the open method, the window.open method is implied.

<SCRIPT LANGUAGE="JScript">
function foo() {
    open('about:blank');}
</SCRIPT>
<BODY onclick="foo();">
Click this page and window.open() is called.
</BODY>

When an event on any object calls the open method, the document.open method is implied.

<BUTTON onclick="open('Sample.htm');">
Click this button and document.open() is called.
</BUTTON>

Internet Explorer 6 for Microsoft Windows XP Service Pack 2 (SP2) places several restrictions on windows created with this method. For several of the parameter values listed in the Parameters table, these restrictions are indicated by the minimum value. For more information, see About Window Restrictions.

This method must use a user-initiated action, such as clicking on a link or tabbing to a link and pressing enter, to open a pop-up window. The Pop-up Blocker feature in Internet Explorer 6 blocks windows that are opened without being initiated by the user. The Pop-up Blocker also prevents windows from appearing if you call this method from an onunload event.

Example

This example uses the open method to create a new window that contains Sample.htm. The new window is 200 pixels by 400 pixels and has a status bar, but it does not have a toolbar, menu bar, or address field.

window.open("Sample.htm",null,
    "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

null , undefined , typeof , === , ==

요즘 JavaScript The Definitive Guide를 보고 있다
영어도 못하는 녀석이 이 책보느라고 고생이다

여태까지는 깊이 와닫는 부분이 없었는데.. 오늘 정말 모르던것을 알아버렸다!!!

alert(typeof(document.getElementById("obj_id"))); 1. if (document.getElementById("obj_id") == null){ alert("null"); } 2. if (document.getElementById("obj_id") == undefined){ alert("undefined"); } 3. if (document.getElementById("obj_id") === null){ alert("null"); } 4. if (document.getElementById("obj_id") === undefined){ alert("undefined"); }

만일 obj_id라는 ID를 갖는 HTML Element가 없는경우에
document.getElementById("obj_id")의 결과는  null 이다

그런데 alert(typeof(null)) 하면 object 가 찍힌다.. 자바스크립트는 null도 object로 인식한다
뭐 여기까지는 많은 사람들이 알고 있을것이다. 물론 나도 알고 있었고..

그런데 내가 일반적으로 특정 object가 있는지 없는지 확인하던 그 1번 if문이 틀린거였다
실제로 1번 2번 스크립트를 실행하면 둘다 alert가 뜬다. null , undefined 둘다...

null 이랑 undefined를 비교할때는 === 나 !== 를 써야 한단다..
동치 비교라고 하는데 값 뿐만아니라 형식까지 비교하는 연산자다

책에는
When null is used in a Boolean contentx , it convers to false. When used in a numeric context , it convert to 0 . and when used in a string context, it converts to "null".

When undefined value is used in a Boolean context, it convers to false. When used in a numeric context, it converts to NaN. and when used in a string context, it converts to "undefined"

이렇게 되어있는걸로 봐서는 둘다 false 값으로 변해서 값이 동일하기 때문에 값만 비교해서는 정확한 비교가 안이루어지는것 같다...

이제 특정 object가 있는지 없는지 판단할때는 반드시 === 를 사용하는 습관을 들여야 겠다

펌글)

http://nova23.tistory.com/5

레이아웃 다운

http://layouts.ironmyers.com/

 

네이버 디자인

html.nhndesign.com

레이아웃 최소1000px ( 헤더, 메뉴, 컨텐트[최대넓이] )

/* 전체 레이아웃 */
<body>
 <!-- 전체를 싸고 있는 부분(최소넓이는 1000px)-->
 <div id="PAGE_WRAP">
  <!-- 헤더 부분 -->
  <div id="HEADER">
  </div>
  <div id="CONTENT">
   <!-- 컨텐트 왼쪽 부분 -->
   <div id="LEFT_CONTENT">
   </div>
   <!-- 컨텐트 오른쪽 부분 -->
   <div id="RIGHT_CONTENT">
    <div id="RIGHT_CONTENT_WIDTHFIX">
    </div>
   </div>
  </div>
 </div>
</body>

 

- css

#PAGE_WRAP {
 min-width:1000px;
    width:expression(document.body.clientWidth < 1001 ? '1000px' : '100%');
}
#HEADER {float:left;  margin-bottom:10px; height:100px; width:100%; border:#777 2px solid; background:#444; }
#CONTENT {clear:both;}
#LEFT_CONTENT {float:left; width:200px;}
#RIGHT_CONTENT {float:right; margin-right:-210px; width:100%; }
#RIGHT_CONTENT_WIDTHFIX {margin-right:220px;}

javascript 를 이용하여 창 크기 구하기!!

브라우져의 본문의 크기는 다음과 같이 구할 수 있습니다.

window.document.body.offsetWidth
window.document.body.offsetHeight
window.document.body.clientWidth
window.document.body.clientHeight
 

clientWidth,clientHeight는 offsetWidth,offsetHeight와 달리 padding사이즈를 포함하지만 margin,border,scroll bar의 크기는 포함하지 않은 사이즈입니다.

※참고

window.screen.width
window.screen.height
window.screen.availWidth
window.screen.availHeight
 

screen객체로 해상도를 구할 수 있습니다.

availWidth,availHeight는 윈도우 task bar의 크기를 제외하고 구해집니다

마우스로 드래그해서 선택한 텍스트 가져오기

      function selectText() {
                var selectionText = "";
                if (document.getSelection) {
                    selectionText = document.getSelection();
                } else if (document.selection) {
                    selectionText = document.selection.createRange().text;
                }
                return selectionText;
            }
           
            document.onmouseup = function() {
                document.getElementById("console").innerHTML = selectText();
            }

location.href, location.replace() 차이

A --> B --> C    처럼 페이지가 이동을 했다하자. (현재 당신은 C사이트에...)

B --> C로 이동할때 location.href를 썼다면

C페이지트에서 [뒤로]버튼을 누르면 B가뜬다.

하지만..

B --> C로 이동할때 location.replace()를 썼다면

C페이지에서 [뒤로]버튼을 누르면 A가뜬다.

그럼 사용자입장에선 '어 내가 클릭을 두번했나?' 하게 된다...

이런 차이로 인하여 적절히 써야 한다.

[뒤로]버튼을 눌렀을때 두페이지 이전으로 넘어가면 안되는 경우가 있는 반면,(.href를 써야겠지..)

프레임을 쓴 사이트 의 경우는 [뒤로]버튼 한두번 클릭으로 사이트를 빠져나가게 할 수도 있다. (.repalce()를 쓴경우...)

[출처] [javascript] location.href 와 location.replace의 차이 |작성자 jin

javascript 박스클릭 이동

 

////////////////////////////////////////////////////////////////////////

// 2009. 11. 10 Yang.Nam.Seok

////////////////////////////////////////////////////////////////////////

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 div {
  position:absolute; /* 객체의 이동을위해 */
  width:100px; /* 객체의 가로 크기 */
  height:100px; /* 객체의 세로 크기 */
  background:#ffff00; /* 객체의 색(노란색) */
 }
</style>
<script>
 var moveflag=false; /*객체의 이동 상태 저장 */
 
 function moveS(ev)
 {
  moveflag=true;
 }
 function moveE()
 {
  moveflag=false;
 }
 function move(ev)
 {
  if(moveflag)
  {
   unit.style.top=ev.clientY-50;
   unit.style.left=ev.clientX-50;
  }
 }
</script>

</head>
<body onMouseMove="move(event);" onMouseUp="moveE();">
 <center>
  <div id="unit" onMouseDown="moveS(event);"></div>
 </center>
</body>
</html>

마우스 커서모양을 손모양으로

style="cursor:hand"

위의 스타일을 이용해서 마우스 커서모양을 손모양으로 바꾸는데 IE에서는 정상적으로 적용이 되지만 Firefox에서는  안 된다.

찾아보니 "hand"가 아닌 "pointer"을 사용해야 한다고 한다.

pointer가 표준이다 .

 

style="cursor:pointer"

동적 INPUT 박스

미리보기 링크 :   http://june44.com/board/blog/55
 
<SCRIPT language=JavaScript>
function make_input(f, nm) {
 if(f.childNodes.item(0).name != nm) {
  if(document.all) cont = f.innerText;
  else    cont = f.textContent;
  if(cont.charCodeAt() == 32) cont = '';
  f.innerHTML = "<input type=text name='"+nm+"' value='"+cont+"' style='width:250px;' onBlur='del_input(this);' onfocusout='del_input(this);'>";
  f.childNodes.item(0).select();
  f.childNodes.item(0).focus();
 }
}
function del_input(f) {
 var cont = f.value;
 if(cont == '') cont = " ";
 cont = cont.replace(/\s/, " ");
 var innerVal = cont + "<input type=hidden name='"+f.name+"' value='"+cont+"'>";
 f.parentNode.innerHTML = innerVal;
}
</SCRIPT>

<TABLE cellSpacing=1 cellPadding=0 width=300 align=center border=1>
<TBODY>
<TR align=middle height=25>
<TD onclick="make_input(this,'pm_upkeep[]')" align=middle width=300>여기를 클릭 해 보세요~^^ </TD></TR></TBODY></TABLE>

 

http://blueb.co.kr/bbs.php?table=community_tipntech&where=ALL&search_step=1&category=Script&query=view&uid=47&p=1

게시판 글자 줄임 스타일로 하기

게시판 글자 줄임 스타일로 하기
<div style="width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">글짜</div>

글짜가 90px이상되면 자동으로 ...이 생긴다

onKeydown keycode표

C의 아스키 값과 다르다... 참고하자!!

 

1. event.keycode : 키가 눌렸을때 키값을 얻는 것.(예로 엔터키를 누르면 13을 얻음.)

2. fromCharCode : 키값에 해당하는 아스키값을 얻음.(예로 A는 키코드 65이며 65 키코드가 fromCharCode를 거치면 A가 검출.)

 

이벤트(Event) Key code 정리
키코드	사용키(기능키)	키코드	사용키(문자키)
8	<백스페이스>키	65	A 키
9	<Tab>키	66	B 키
12	<Clear>키	67	C 키
13	<Enter>키	68	D 키
16	<Shift>키	69	E 키
17	<Ctrl>키	70	F 키
18	<Menu>키	71	G 키
19	<Pause>키	72	H 키
20	<Caps Lock>키	73	I 키
21	<한/영>키	74	J 키
25	<한자>키	75	K 키
27	<Esc>키	76	L 키
32	<스페이스바>키	77	M 키
33	<Page Up>키	78	N 키
34	<Page Down>키	79	O 키
35	<End>키	80	P 키
36	<Home>키	81	Q 키
37	<왼쪽 화살표>키	82	R 키
38	<위쪽 화살표>키	83	S 키
39	<오른쪽 화살표>키	84	T 키
40	<아래쪽 화살표>키	85	U 키
41	<Select>키	86	V 키
42	<Print Screen>키	87	W 키
43	<Execute>키	88	X 키
44	<Snapshot>키	89	Y 키
45	<Ins>키	90	Z 키
46	<Del>키
47	<Help>키
91	<왼쪽 윈도우>키
92	<오른쪽 윈도우>키
144	<Nun Lock>키
145	<Scroll Lock>키
키코드	사용키(숫자키)	키코드	사용키(숫자 키패드)
48	0 키	96	0 키
49	1 키	97	1 키
50	2 키	98	2 키
51	3 키	99	3 키
52	4 키	100	4 키
53	5 키	101	5 키
54	6 키	102	6 키
55	7 키	103	7 키
56	8 키	104	8 키
57	9 키	105	9 키
		106	곱하기 기호(*) 키
		107	더하기 기호(+) 키
		108	키(숫자키 모음)
		109	빼기 기호(-) 키
		110	소수점(.)키
		111	나누기 기호(/) 키
키코드	사용키(펑션키)	키코드	사용키(특수문자)
112	F1 키	186	;
113	F2 키	187	=
114	F3 키	188	,
115	F4 키	189	-
116	F5 키	190	.
117	F6 키	191	/
118	F7 키	192	`
119	F8 키	219	[
120	F9 키	220	\
121	F10 키	221	]
		222	'

 

출처 : Tong - Do My BEST님의 Asp & Script통