캠핑과 개발


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="JavaScript" type="text/javascript">
 <!--
 var count1 = 0;
 var count2 = 0;
 /**
 * 선택된 option의 이전에 새로운 option 을 추가한다.
 **/
 function insertOptionBefore(num){
  var elSel = document.getElementById('selectX');
  if(elSel.selectedIndex >= 0) {
   var elOptNew = document.createElement('option');
   elOptNew.text = 'Insert' + num;
   elOptNew.value = 'insert' + num;
   var elOptOld = elSel.options[elSel.selectedIndex]; 
   try {
    elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
   }catch(ex){
    elSel.add(elOptNew, elSel.selectedIndex); // IE only
   }
  }
 }
 /**
 * 선택된 옵션을 삭제한다.
 **/
 function removeOptionSelected(){
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
   if (elSel.options[i].selected) {
    elSel.remove(i);
   }
  }
 }
 /**
 * 마지막에 새로운 option을 추가한다.
 **/
 function appendOptionLast(num){
  var elOptNew = document.createElement('option');
  elOptNew.text = 'Append' + num;
  elOptNew.value = 'append' + num;
  var elSel = document.getElementById('selectX');
  try {
   elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }catch(ex) {
   elSel.add(elOptNew); // IE only
  }
 }
 /**
 * 마지막 옵션을 삭제한다.
 **/
 function removeOptionLast(){
  var elSel = document.getElementById('selectX');
  if (elSel.length > 0){
   elSel.remove(elSel.length - 1);
  }
 }
 //-->
 </script>
 </HEAD>
<BODY>
<form>
 <input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
 <input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
 <select id="selectX" size="10">
  <option value="original1" selected="selected">Orig1</option>
  <option value="original2">Orig2</option>
 </select>
 <br />
 <input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
 <input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음

&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

&#162;

&cent;

센트 기호

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

&#165;

&yen;

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

&#171;

&laquo;

왼쪽 꺾인 괄호

&#172;

&not;

부정

­

&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark

기본적으로 대부분의 스크립터는 "페이지가 모두 로드 되었다." 라는 전제는

이미지를 포함한 모든 리소스가 로드완료 (즉 하단 상태표시줄에 완료 라고 찍히는 타이밍)을 페이지가 로드 되었다 라고 인식한다.

하지만 실제로(물론 위의 설명이 가장 적합하지만) 스크립트가 실행되는데는 모든 리소스를 전제로 기능을 추가하지만 그렇지 않아야 하는 경우도 있다. 즉. dom만 있으면 되는 경우이다.

(대표적으로 CSS가 그렇다. 이미지도 하나의 엘리먼트로 인식하라. src에 있는 이미지가 다운로드 되는것과 img 엘리먼트가 dom로드되는것은 틀린이야기이다.) 

prototype에서는 이에 대해서 서로 다른 이벤트로드를 지원하는데. 

Event.observe(window,"load",handler)
Event.observe(document,"dom:loaded",handler)

이다.

 

1. 웹페이지의 모든 리소스까지 로드상태

Event.observe(window,"load",handler) 

웹페이지의 모든 리소스를 로드한 상태를 말한다. 이미지 및 플래쉬까지 로드된 상태이다.간혹가다 플래쉬 경로가 맞지 않아서 로드되지 않고 지연되는 경우에는 위의 이벤트는 그 지연이 끝날때까지 기다리게 된다. 

2. 웹페이지의 dom만 로드된상태.

Event.observe(document,"dom:loaded",handler) 

웹페이지의 모든 dom만 로드된 상태이다. body안에 있는 엘리먼트가 구성되었을때의 동작이다.여기에서는 css나 이미지의 다운로드 같은 상태는 포함되지 않는다.


한달만에 포스팅입니다. 좀 한가해졌다는 뜻이기도 합니다.
또 어떤 바쁜일이 생길지 모르지만 잠깐 동안 한가해진 동안에는 하고싶었던 공부도 하고
중간고사가 얼마 남지 않았기 때문에 너무 바뻐서 책 한번 펴보지 못한 교과서를 한번 펼쳐 봐야겠습니다. F만 나오질 않길 빌면서 말입니다. ^^;;

쓸데 없는 말은 그만하구요 최근 마이크로 소프트사에서 IE8 버전을 출시했는데요.
곧 오픈이 두개가 있는데 새로운 웹브라우저라니 정말 골치아픈 일이네요.
FF3나, 크롬이니 IE8이니 최근 정말 브라우저 전쟁인거 같습니다. 그에 따라서 웹 개발자들도 힘들구요.. 물론 기본에 충실한 개발자는 힘들지 않겠지만 저처럼 어영 부영 기초 빼고 배운 개발자들은 정말이지 너무 힘듭니다. ㅠㅠ

IE8버전이 나오면서 웹표준을 준수율을 극도로 개선을 시켰다는데 기존 IE7버전에서 돌아가던 멀쩡한 브라우저가 IE8에서는 돌아가지 않는 경우도 발생한다고 합니다.  
이게 말이 됩니까. 매번 버전이 바뀔때마다 안되니..기본적으로 하위 버전에도 맞쳐야지 않그렇습니까? 제말이 맞다면 하늘에 대고 "맞습니다." 하고 소리 한번 쳐주세요 ㅡ,.ㅡ^

근데 IE8에서 호환성을 위한 배려를 하지 않은게 아니군요. IE5, IE6, IE7버전의 호환성을 위해 몇가지 방법이 있는데 호환성 문제로 골치거리를 앓고 있는 분들은 한번 적용해보시면 좋은 해결책이 될꺼라 생각합니다.


DTD가 없는 웹 사이트 대응 방법

기본적으로 DTD가 없는 페이지는 아무런 대응을 할 필요가 없습니다.
IE8은 DTD가 없는 페이지는 기본적으로 Quirks Mode로 렌더링 하기 때문에 웹사이트가 깨지지 않습니다. Quicks Mode란 DTD를 표준에 따라 인식하지 못했던 예전 IE5브라우저의 렌더링을 그대로 표현하는 모드입니다. 표준을 따르지 않고 기존 하위 버전에 맞게 맞춰 렌더링을 한다는 말이죠.


DTD가 있는 웹사이트 대응 방법

DTD가 있는 웹사이트인 경우 최적화 된 브라우저의 버전에 따라서 대응 방법이 달라집니다.
첫째 : IE5에 최적화 된 페이지 대응법
둘째 : IE6에 최적화 된 페이지 대응법
셋째 : IE7에 최적화 된 페이지 대응법

MS는 낡은 웹 브라우저에 최적화된 페이지를 깨지지 않게 하기 위해서 <meta> 태그를 이용한 호환 유도 기법을 제공합니다.

DTD가 있고 IE5에 최적화 된 페이지 기법

<head>
<meta http-equiv="X-UA-Compatible" content="IE=5" />
</head>


<head></head> 사이에 다음과 같은 <meta> 태그를 사용하게 되면 IE5 렌더링을 흉내내는 Quirks Mode로 렌더링을 하게 된다.

DTD가 있고 IE6에 최적화 된 페이지 대응 방법

IE6에 최적화된 페이지는 개편을 해야한다. IE7로 최적를 해야 하는데 IE8에는 IE6 렌더링 엔진이 없기 때문인데 IE6에서 IE7버전과의 차이는 크지 않기 때문에 IE7로 렌더링 한 후에 다음 코드로 대응 한다.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>



DTD가 혼재되어 있는 웹  사이트 대응법

DTD가 혼재 되어 있는 웹 사이트는 DTD가 없는 페이지와 DTD가 있는 페이지를 구분하여 각각 다른 방법으로 적용해야 한다. 하지만 이런 호환 유도 코드를 DTD가 있는 페이지만 별도로 적용하는 것이 어렵다면 DTD가 있는 페이지만 IE7로 최적화 한 후 모든 페이지에 다음과 같은 코드를 작성한다.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>


DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE7로 표준 모드로 렌더링 할것이다. 따라서 DTD가 있는지 없는지 없는지 여부에 관계없이 IE7로 렌더링 하는 'IE=7' 보다 DTD가 있고 없음에 따라 자동으로 렌더링 모드를 전환해 주는 'IE=EmulateIE7' 코드를 더욱 권장한다.

위의 방법은 각 페이지에 IE에 적용하는 각 페이지에 <meta>를 삽을을 해줘야만 했다.
하지만 이 방법은 모든 페이지에 적용을 해야 하므로 페이지 본수가 늘어날수록 정말 많은 일이 아닐수가 없다. 이 방법을 해결하기 위해서 서버측 응답 헤더에 호환 유도 코드를 삽입 할 수도 있는데 그 내용을 알아보겠다.

호환 유도 코드를 서버측 응답 헤더에 적용하는 방법

IIS에 적용 할 코드

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=EmulateIE7" />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>


Apache에 적용 할 코드

X-UA-Compatible:IE=EmulateIE7

 

'DEVELOPMENT > Javascript' 카테고리의 다른 글

HTML 특수문자코드표  (0) 2009.07.22
[Event] observe 에서의 onload와 dom:loaded 의 차이  (0) 2009.05.21
[javascript] select box  (0) 2009.02.16
[HTML] 제어 문자  (0) 2009.01.16
[HTML 팁] HTML 소스 정렬 사이트  (0) 2008.12.27


매번 까먹는다.
한번 쓸때는 이제 알겠지 하면서 어제 썼던걸 오늘 또 찾게 된다.


<select id='selectbox'>
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">포도</option>
<option value="4">귤</option>
<option value="5">자두</option>
</select>


text 값 가져오기
<script language="javascript">
     var obj = document.getElementById('selectbox');
     var text = obj.options[obj.selectedIndex].text;
     alert(text); 
</script>


value 값 가져오기
<script language="javascript">
var obj = document.getElementById(''selectbox'');
var value = obj.options[obj.selectedIndex].value;
alert(value);
</script>


\b : 백스페이스
\f : 폼피드
\n : 뉴라인(다음 행으로 이동)
\r : 캐리지 리턴(행의 처음으로 이동)
\t : 수평탭
\" : 큰 따옴표 표시
\' : 작은 따옴표 표시
\0 : null
\\ : 역슬래쉬
\v : 수직탭
\a : 비프음
\N(숫자) : 8진수
\xN(숫자) : 16진수

토요일에 할일 없이 회사에 출근했다가 이러저리 돌아다니다가 좋은 사이트가 있어서 포스팅 한번 합니다.

HTML 소스를 정렬해주는 사이트입니다.
탭 들여쓰기,  자동 들여쓰기, 자동 줄바꿈 등 여러가지가 지원이 됩니다.
드림위버로 코딩이 된 소스를 보면 줄바꿈이라던가 소스 관리가 엉망인데 이 사이트에서 한번 정렬 하신후에 사용하시면 개발하기가 참 편할꺼 같네요.

URL : http://www.mycoolform.com/

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[javascript] select box  (0) 2009.02.16
[HTML] 제어 문자  (0) 2009.01.16
[tip] 영문 alert 메세지  (0) 2008.09.25
javascript 디버거 툴  (0) 2008.08.18
클립보드 복사  (0) 2008.08.18

비밀번호가 틀렸습니다. 다시입력해주세요. => Invalid password. Please try again.
아이디가 틀렸습니다. 다시입력해주세요. => Invalid ID. Please try again.
제목을 입력하세요. Enter your subject(title).
제목을 입력하세요. Enter your contents(message).
이름을 입력해주세요. => Enter your name.
아이디를 입력하세요. Enter your ID.
패스워드를 입력하세요. Enter your password.
아이디가 존재하지 않습니다. 관리자에게 문의해 주세요. ID does not exist. Please contact the administrator.
접근 권한이 없습니다. IT실 담당자에게 문의하세요. Not permitted to log in/connect. Please contact the IT administrator.
접근권한이 없습니다. 관리자에게 문의해 주세요. Not permitted to log in/connect. Please contact the administrator.
파일을 삭제하시겠습니까? Delete? 파일이 정상적으로 삭제 되었습니다. Deleted successfully. (Files deleted successfully.)
등록 되었습니다. Registered/Saved successfully.
수정 되었습니다. Updated successfully.
삭제 되었습니다. Deleted successfully.
삭제할 데이터가 없습니다. Nothing to delete.
등록된 게시물이 없습니다. (게시물 = comment ?) No comment to delete.
검색할 성명을 입력하세요. Enter name to search for.
수신처를 지정해 주새요! Select contact method.
부서 이하를 선택해 주세요. Select department from the list.
검색된 사용자가 없습니다. Username does not exist.
메세지를 받을 사람을 입력해 주십시오. Enter recipient's name.

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[HTML] 제어 문자  (0) 2009.01.16
[HTML 팁] HTML 소스 정렬 사이트  (0) 2008.12.27
javascript 디버거 툴  (0) 2008.08.18
클립보드 복사  (0) 2008.08.18
[javascript] dday 구하는 스크립트  (0) 2008.02.04

자바스크립트 디버거 툴
내일 당장 사용해보자~
사용자 삽입 이미지

익스플로어에서만 가능한 클립보드 복사하기다.

<script language="javascript">
    function setClipBoard(content){
        content +=  content + " [diem 블로그]";
        window.clipboardData.setData('Text', content);
        alert('내용이 복사되었습니다.');
    }
</script>

<a href="javascript:setClipBoard('http://hmjkor.tistory.com/')">복사하기</a>