margalog

meta tag가 갑자기 생각나서 정리해 둠

<meta http-equiv="content-type" content="text/html; charset=euc-kr" /> :웹문서의 언어를 설정 (euc-kr)
<meta http-equiv="content-type" content="text/html; charset=utf-8" />    :웹문서의 언어를 설정 (utf-8)
<meta http-equiv="imagetoolbar" content="no" /> :그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음
<meta http-equiv="refresh" content="0; url=http://이동주소" /> :0초후 해당 페이지이동
<meta http-equiv="refresh" content="60" /> :60초마다 새로고침
<meta http-equiv="pragma" content="no-cache" />  : 캐쉬에서 해당페이지 읽어들이는 걸 방지

<meta name="subject" content="홈페이지주제" />
<meta name="title" content="홈페이지이름" />
<meta name="description" content="홈페이지 설명" />
<meta name="keywords" content="홈페이지 키워드" />
<meta name="author" content="홈페이지 주인 or 작성자" />
<meta name="publisher" content="만든단체나회사" />
<meta name="other Agent" content="웹책임자" />
<meta name="classification" content="카테고리위치(분류)" />
<meta name="generator" content="홈페이지 제작도구" />
<meta name="reply-to" content="메일주소" />
<meta name="filename" content="파일이름" />
<meta name="author-date" content="제작일" /> 
<meta name="location" content="홈페이지 위치(소속국가)" />
<meta name="distribution" content="배포자" />
<meta name="copyright" content="저작권" />
<meta NAME="content-language" content="kr" /> : 기술된 언어

메타태그의 검색로봇 관련
<meta name="robots" content="all" />                        : 로봇 검색을 허가함
<meta name="robots" content="none" />                    : 로봇 검색을 허가하지 않음
<meta name="robots" content="index,follow" />          : 이 문서도 긁어가고 링크된 문서도 긁어감.
<meta name="robots" content="noindex,follow" />       : 이 문서는 긁어가지 말고 링크된 문서만 긁어감.
<meta name="robots" content="index,nofollow" />       : 이 문서는 긁어가되, 링크는 무시함.
<meta name="robots" content="noindex,nofollow" />   : 이 문서도 긁지 않고, 링크도 무시함.

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

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

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

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
	}))
)

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.

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;
}

로봇배제 표준이란?

로봇배제 표준이란 구글 등 검색로봇이 정보 수집을 위해 사이트를 방문할 경우를 대비하여, 검색로봇에 의한 웹 사이트의 디렉터리 및 파일들에 대한 검색 조건을 명시해 놓은 국제 규약이다.
정상적인 검색로봇은 사이트 방문 시 가장 먼저 웹사이트의 로봇배제 표준파일(robots.txt)을 확인하고 파일에 명시된 사항을 준수하면서 웹사이트의 컨텐츠를 수집한다.
※ 로봇배제 표준은 방지기술이 아닌 사이트 및 검색로봇 운영자간의 단순한 약속(규약)이므로 악의적인 로봇의 경우 로봇 배제 표준을 무시하고 사이트의 컨텐츠를 수집할 수도 있다.

1. 홈페이지 전체 내용을 모든 검색엔진에 노출 허용

User-Agent : *
Disallow :

2. 홈페이지 전체 내용을 모든 검색엔진에 노출 방지

User-Agent : *
Disallow : /

3. 홈페이지의 디렉터리가 information인 것에 대한 노출을 방지

User-Agent : *
Disallow : /information/

4. 특정 검색엔진(googlebot)의 접근만을 거부

User-Agent : googlebot
Disallow: /
User-Agent: *
Disallow:

5. 특정 검색엔진(googlebot)의 접근만을 허가

User-Agent : googlebot
Disallow :
User-Agent : *
Disallow: /

6. 모든 검색엔진에 대해 /directory/index.html의 접근을 거부

User-Agent : *
Disallow : /directory/index.html

7. 홈페이지의 디렉터리가 information인 것에 대한 노출을 허가

User-Agent : *
Allow : /information/

8. 홈페이지의 디렉터리 또는 파일명이 information인 것에 대한 접근을 허가

User-Agent : *
Allow : /information

- User-Agent : '*' :모든 User-Agent, 특정 User-Agent 를 지정할 경우 해당 로봇 이름을 입력
- Allow or Disallow
Disallow에서 '/'는 모든 하위 문서에 대한 배제를 의미, 아무것도 쓰지 않으면 허가를 의미
'/...../'는 디렉터리만, '/....' 는 디렉터리+파일이 적용대상

- Meta Tag를 통한 노출방지

<html>
<head>
<title>...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>

<!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로 차단해줘야 겠죠 그외에도 몇가지 더 추가 해야 할 거 같습니다.

OS : Windows 2003 Server
IIS Version : 6.0

include file 을 사용했을시
<!--#include file="../abc.asp"-->

(영문일 경우)

Active Server Pages, ASP 0131
Disallowed Parent Path
The Include file '../<filename .ext>' cannot contain '..' to indicate the parent directory.
/<path>/<filename .ext>, line <number>
</number></filename></path></filename>

(한글일 경우)

Active Server Pages 오류 'ASP 0131'
허용되지 않는 부모 경로
/asp/test.asp, 줄 1
'./../abc.asp' Include 파일은 부모 디렉터리를 표시하기 위해 '..'를 사용할 수 없습니다.

위와 같은 에러 메세지를 보게 됐을때는..

include 구문을 변경하거나

<!--#include file="../abc.asp"--> 를 <!--#include virtual="./lib/abc.asp"--> 로 변경

IIS 설정을 변경 해 준다.

(영문일 경우)

IIS -> Home Directory -> App Option -> Enable Parent Paths checkbox  체크

(한글일 경우)

IIS-> 웹사이트 속성 -> 홈디렉터리 -> 구성 -> 옵션 -> 부모경로사용 체크

/**
 * 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();
}

File관련 메소드

CopyFile(src,dest,over) : src 파일을 dest로 복사한다. 겹쳐쓰기 기능은 true가 기본값.

CreateTextFile(fname,over,unicode) : fname을 가진 텍스트 파일을 생성한다. over가 true면 겹쳐쓰기가 가능

DeleteFile(fname,force) : 현재의 파일을 삭제한다.force가 true면 해당 파일이 읽기 전용이라도 강제로 삭제

fileExists(fname) : 해당 파일의 존재 여부를 반환한다.

GetBaseName(fname) : 지정한 파일 경로와 확장자가 제거된 파일명을 반환한다.

GetExtensionName(fname) : 지정한 파일 확장자를 반환한다.

GetFile(fname) : 지정된 파일 경로에 해당하는 File 개체를 생성한다.

GetFileName(path) : 해당 경로에 지정된 파일명을 반환한다.

GetTempName() : 무작위로 생성된 파일명을 반환한다.

MoveFile(sec,dest) : src 경로의 파일을 dest로 옮긴다.

OpenTextFile(fname,io,create,format) : fname으로 된 텍스트 파일을 생성한다. io 값으로 모드를 선택한다.

1: 읽기 2 :쓰기 8 : 덧붙이기

FileSystemObject

*드라이브 정보 얻어 오기

Set fs = Sever.CreateObject("Scripting.FileSystemObject")

Set Cdrive = fs.GetDrive("c:")

Cdrive.freespace                                                                      =>드라이브의 잔여용량을 가져온다.

Cdrive.TotalSize                                                                       =>드라이브의 전체 용량

Cdrive.VolumeName                                                                  =>드라이브의 볼륨명

Cdrive.ShareName                                                                    =>드라이브의 네트워크 공유이름

Cdrive.SerialNumber                                                                  =>디스크 볼륨의 10진 시리얼 번호

Cdrive.RootFolder                                                                      =>드라이브의 루트폴더

Cdrive.Path                                                                               =>드라이브의 경로명               

Cdrive.FileSystem                                                                       =>드라이브의 파일 시스템

Cdrive.IsReady                                                                           =>드라이브의 준비여부(true/false)

*파일정보 얻어 오기

Set fs = Server.CreateObject("Scripting.FileSysteObject")

Set myfile = fs.GetFile("c:/config.sys")

myfile.Size                                                                                => 파일 크기

myfile.Type                                                                               => 파일 타입

myfile.Path                                                                                => 파일 경로

myfile.ShortName                                                                       => 파일 이름

myfile.ShortPath                                                                        => 파일 경로

myfile.ParentFolder                                                                    => 파일의 상위폴더

myfile.Name                                                                              => 파일 이름

myfile.Drive                                                                               => 파일 위치 드라이브명

myfile.DateCreated                                                                     => 파일만들어진 날짜 시간

myfile.DateLastAccessed                                                            => 마지막 액세스된 날짜 시간

myfile.DateLastModified                                                              => 마지막 수정일

*파일생성하기

Set fs = Server.CreateObject("Scripting.FileSystemObject")

Set objFile = fs.CreateTestFile("c:\a\b.txt",true,false)                =>전체경로,덮어쓰기여부,유니코드orASCII코드인지

objFile.FileExists("c:\a\b.txt")                                                 =>파일의 존재 여부 체크 존재하면true 그렇지 안으면 false

objFile.DeleteFile("c:\a\b.txt")                                                 =>파일 지우기

*파일에 글쓰기

Set fs = Server.CreateObject("Scripting.FileSystemObject")

Set objFile = fs.OpenTextFile("c:\a\b.txt",8,true,-1)

=>전체 경로, 1이면 읽기전용 8이면 쓰기가능, true이면 없을경우 새로 생성 false이면 무조건 말일 존재,파일포맷

   첫번째인자만 필수이고 나머지 생략가능  -- Set objFile = fs.OpenTextFile("c:\a\b.txt",8)이런식으로 많이 사용,

*파일에서 글 읽어 오기

Set fs = Server.CreateObject("Scripting.FileSystemObject")

Set objFile = fs.OpenTextFile("c:\a\b.txt",1)       =>글을 읽어 올때는 읽기전용(1) 값으로 반드시 셋팅한다.

Do While objFile.AtEndOfStream<>true                 =>AtEndOfStream은 글의 끝부분에 도달하면 ture를 return한다

       Response.write objFile.readLine & "<br>"     =>글은 한줄씩 읽어 온다.

loop

content = objFile.readall                                  =>글 전체를 읽어 온다.

str = replace(content,chr(13)&chr(10),"<br>")    =>replace(전체문자열,바꾸고자하는것,바꿀문자) chr(13)&chr(10)는 Enter이다

Response.write str

write                          =>파일에 문자열을 입력

writeLine                    => 파일에 문자열과 엔터값(라인)을 입력

WriteBlankLine(i)         =>파일에 i개의 엔터값을 입력

Read(i)                      =>파일에서 i개의 문자만을 읽어온다

ReadLine                   =>파일에서 한라인을 읽어온다

ReadAll                      =>파일에서 모든 텍스트를 읽어온다

Skip(i)                       =>파일에서 i개 만큼 문자를 건너뛴다

SkipLine                    =>파일에서 읽어올때 라인하나를 건너뛴다.

no,성별,이름,나이,주소,전화번호
1,남,홍길동,30,광주광역시 동구,062-444-1111
2,여,유관순,32,전라남도 여수시,061-777-7777
3,남,이순신,45,서울특별시 강남구,02-111-0000
4,여,심청이,23,서울특별시 동작구,011-600-0000
5,남,심봉사,55,경상남도 마산시,016-555-0000
6,남,대통령,77,강원도 춘천시,011-000-0000

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" width="1" height="1" id="clist" border="0">
<param name="DataURL" value="/SRC/javascript/table_list.txt">
<param name="UseHeader" value="True">
</object>

<center>
<table border=0 cellpadding=3 width=450 cellspacing=1 bgcolor=999999 datasrc="#clist">
<THEAD>
   <tr align=center bgcolor=efefef>
     <td><b>NO.</b></td>
     <td><b>성별</b></td>
     <td><b>이름</b></td>
     <td><b>나이</b></td>
     <td><b>주소</b></td>
     <td><b>전화번호</b></td>
   </tr>
</THEAD>
<TBODY>
   <tr bgcolor=white align=center>
     <td><DIV DATAFLD="no"></DIV></td>
     <td><DIV DATAFLD="성별"></DIV></td>
     <td><DIV DATAFLD="이름"></DIV></td>
     <td><DIV DATAFLD="나이"></DIV></td>
     <td><DIV DATAFLD="주소"></DIV></td>
     <td><DIV DATAFLD="전화번호"></DIV></td>
   </tr>
</TBODY>
</table>

<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>

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

<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>