miname^^

저도 여기저기서 모아 놓은 것들을 정리해보면, 아래는 웹 개발 시에 책갈피 형태로 저장해 놓고 필요할 때마다 꺼내어서 유용하게 사용할 수 있을 만한 JavaScript 모음입니다.

JavaScript 관련

Scripts 보기 -- 현재의 페이지에 있거나, 혹은 연결되어 있는 모든 JavaScript들을 포함하고 있는 창을 새로 표시함(Framesets은 지원하지 않음). document.all, document.layers 등과 같은 지원되지 않는 DOM 요청들을 확인할 경우 사용하십시오.:
javascript:var%20jsArray%20=%20document.getElement sByTagName(%22script%22);%20var%20theWinref;%20var %20theHTML;%20var%20scriptObj;%20var%20frameURL;%2 0var%20frameObj;if(jsArray.length%20%3E%200)%20%7B %20theWinref%20=%20window.open('','_blank','width= 320,height=255,toolbar=no,location=no,directories= no,status=yes,menubar=no,resizeable=yes');%20theWi nref.document.write('%3Chtml%3E%3Chead%3E%3Ctitle% 3E'%20+%20window.location.href%20+%20'%3C/title%3E%3C/head%3E%3Cbody%3E'+%20jsArray.length+'%20Script(s) %20Found:');%20theWinref.resizeTo(600,200);theWinr ef.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20 i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj %20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute (%22src%22))%7B%20frameURL%20=%20scriptObj.getAttr ibute(%22src%22);%20theWinref.document.write(%22%3 Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22%20v ia%20%22%20+%20frameURL%20+%20%22%3Cbr%3E%3Ciframe %20height='100%25'%20width='100%25'%20id='url%22+% 20i%20+%20%22'%20src='%22%20+%20frameURL%20+%20%22 '%3E%3C/iframe%3E%3C/p%3E%22);%20frameObj%20=%20theWinref.document.getE lementById(%22url%22%20+%20i);%20%7D%20else%20%7B% 20theHTML%20=%20scriptObj.innerHTML;%20theWinref.d ocument.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22:%3C br%3E%3Cpre%3E%22%20+%20theHTML%20+%20%22%3C/pre%3E%3C/p%3E%22);%20%7D%20%7D%20if(jsArray.length%20%3E%20 0)%20%7B%20theWinref.document.write('%3C/body%3E%3C/html%3E');%20%7D

특정 Scripts 실행 -- 현재의 페이지 안에서 특정 JavaScript를 실행시킬 수 있게 하는 입력 대화상자를 표시함.:
javascript:var%20c='document.location.href',r='';w hile(c=prompt(r+'Enter%20the%20code%20to%20be%20ex ecuted:',c)){try{r='Returned:%20'+eval(c)+'n';}cat ch(err){r='Error:%20'+err.message+'n';}}

배치 관련

테이블 보기 -- 모든 테이블들의 열과 행의 테두리를 표시해 줌. 이것은 테이블들이 적당한 형태로 잘 자리잡고 있는지를 확인할 때 유용합니다.:
javascript:var%20f=function(tt,col){var%20a=docume nt.getElementsByTagName(tt);for(var%20b=0;b%3Ca.le ngth;b++){a[b].style.border='1px%20solid%20%23'+col;}};f('table' ,'00F');f('td','0F0');f('th','0FF');

Outline 테두리 보기 - 현재의 페이지에 있는 HTML 요소들의 Outline을 표시해 줌. 여기서 보여지는 테두리(CSS Outline)는 일반 테두리(Border)와 달리 공간을 차지하지 않고 객체들의 테두리 위에 그려지게 됩니다.:
javascript:(function()%7B%20function%20mark(elem)% 20%7B%20if(elem.style)%20%7B%20elem.style.outline= %221px%20solid%20green%22;%20%7D%20%7D%20;%20funct ion%20recurse(elem,p)%20%7B%20var%20i,%20k,%20cn;% 20if(!elem)%20%7B%20alert(%22null%22);%20return;%2 0%7D%20mark(elem);%20cn%20=%20elem.childNodes;%20i f(cn)%7B%20k%20=%20cn.length;%20for%20(i%20=%200;% 20i%20%3C%20k;%20i++)%20%7B%20recurse(cn%5Bi%5D,%2 0p%20+%20%22.%22%20+%20i);%20%7D%20%7D%7D%20recurs e(document,%22d%22);%20%7D)();

DIV 테두리 보기 -- 현재의 페이지에 있는 DIV 요소들 주위에 테두리를 표시해 줌.:
javascript:var%20a=document.getElementsByTagName(' div');for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23F00';}

DIV 테두리와 해당 ID 보기 -- 현재의 페이지에 있는 DIV 요소들 주위에, 테두리와 함께 해당 ID를 표시해 줌.:
javascript:var%20a=document.getElementsByTagName(' div');var%20aspan;var%20txtNode;for(var%20b=0;%20b %20<%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createEl ement('span');%09%09aspan.setAttribute('id',%20't_ ttp'%20+%20a[b].id);%09%09aspan.setAttribute('style',%20'position :relative;top:1px;left:1px;%20margin:10px%200px%20 0px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;borde r:%201px%20solid%20#C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20#000;text-align:left;display:%20block;');%09%09txtNode%20=%2 0document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}

현재의 페이지안에 포함된 그림들을 새 창에서 보기 -- 현재의 페이지안에 있는 모든 그림들을 새 창을 열어서 따로 보여 줌.:
javascript:if%20(false)void('View%20images%20scrip t%20by%20Tantek%20Celik%20-%20modified%202003.02.11');var%20n%20=%20(window.l ocation.toString().replace(/[^a-z0-9]/gi,'_'))+'_im';var%20sn%20=%200,ud,i=0,r='/r';var%20ss%20=%20r;l=document.images.length;if%20 (l==0)%20alert('No%20images%20to%20see%20here.%20M ove%20along.');else%20for%20(i=0;i%3Cl;i++){var%20 s%20=%20document.images[i];var%20u%20=%20s.src;if%20(u!=''%20&&%20u!=ud%20&&%20ss.indexOf(r+u+r)==-1){%20ss+=u+r;sn++;var%20w=window.open(s.src,n+sn, 'height='+Math.max(s.height,32)+',width='+Math.max (s.width,32)+',status=no,location,menubar,resizabl e,scrollbars');w.focus();}}void(20030211);

Web 표준 확인

현재의 페이지 HTML 표준 확인 -- HTML 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.:
javascript:void(document.location='http://validator.w3.org/check?uri='+document.location);

현재의 페이지 CSS 표준 확인 -- CSS 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.:
javascript:void(document.location='http://jigsaw.w3.org/css-validator/validator?uri='+document.location);

현재 페이지의 Links (HREFs) 표준 확인 -- Link 표준 확인을 위해 현재의 URL을 W3로 보냄. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.:
javascript:void(document.location='http://validator.w3.org/checklink?url='+document.location);

Feed(ATOM, RSS) 표준 확인 -- Feed를 Feed Validator에서 표준 확인. 여기서 Feed URL은 방화벽 밖에서도 잘 보여야 합니다.:
javascript:window.open('http://feedvalidator.org/');

창 크기 조절

PocketPC iPaq 240x320 -- 창 크기를 230x320 pixels 크기로 조절.: javascript:void(window.resizeTo(240,320));

TV safe 544x372 -- 창 크기를 544x372 pixels 크기로 조절.: javascript:void(window.resizeTo(544,372));

VGA 640x480 -- 창 크기를 640x480 pixels 크기로 조절.: javascript:void(window.resizeTo(640,480));

SVGA 800x600 -- 창 크기를 800x600 pixels 크기로 조절.: javascript:void(window.resizeTo(800,600));

XGA 1024x768 -- 창 크기를 1024x768 pixels 크기로 조절.: javascript:void(window.resizeTo(1024,768));

SXGA 1280x1024 창 크기를 1280x1024 pixels 크기로 조절.: javascript:void(window.resizeTo(1280,1024));

UXGA 1600x1200 -- 창 크기를 1600x1200 pixels 크기로 조절.: javascript:void(window.resizeTo(1600,1200));

위와 비슷한 기능들을 Safari의 메뉴에 따로 추가해서 사용할 수 있게 하는 도구로 Safari WebDevAdditions가 있고, Safari에 표시되어 있는 현 웹 페이지를 해부해서 CSS 분석 및 편집을 용이하게 해 주는 Xyle scope를 더하면 Safari에서 훌륭한 웹 개발 환경을 갖출 수 있을 것 같습니다.

__________________
돼지의 깨달음? 꿀꿀꿀...

 + &hearts; = &infin;&sup2;