a 태그에서 href 없이 onclick 어트리뷰트 제대로 사용하기

http://www.serve.co.kr/tv/default.asp

동영상 플레이를 재생하는 태그가 잘못 사용되어진 부분이 있습니다.

a class="SV_point_color1 SV_pointer" onclick="javascript:playVod('','95845','95845','');"

해당 a 태그안에 href가 없다.
onclick으로 javascript 사용을 하고 있는데... 해당 javascript도 한번 보자..

function playVod(wcode, url, ser, isfree)
{
//동영상 플레이전 힛트수 업데이트처리
var url2 = "/tv/tv_count.asp";
var functionName = "";
var strParam = "ser="+ser ;
var strAsync = true;
var returnType = "";
var strDocName = "";
SERVE.Xml.xmlHttp(url2, functionName, strParam, strAsync, returnType, strDocName);

var isSuc = "Y";
if (wcode == 908) { //RTN
// ret = chk_login();
ret = true;
if (ret) {
window.open('','rtn_vod','width=420,height=420,toolbar=no,location=no,menubar=no,scrollbars=auto,resizable=no,top=100,left=100');
} else {
isSuc = "N";
}
//url = url+"&servenm=&serveid=";
document.frmVod.serveid.value = "";
document.frmVod.servenm.value = "";
document.frmVod.target="rtn_vod";
} else {
url = '/news/vod_viewer.asp?ser='+url
window.open('','media_player','width=810,height=520,scrollbars=no,resizable=no');
document.frmVod.target="media_player";
}

if (isSuc == "Y") {
document.frmVod.action = url;
document.frmVod.submit();
}
}

길긴하지만 봐야 할것은 url 파리미터 이겠다.
해당 javascript를 기준으로 a 태그를 올바르게 고쳐보면

a href="/news/vod_viewer.asp?ser=95845" class="SV_point_color1 SV_pointer" onclick="javascript:return playVod('','95845','95845','');"

이렇게 되어야 하겠고. playVod 함수에서는 return false 처리를 해주면 되겠다.

a 태그에 href 있고 없고는 기술적으로는 문제가 안 될 수 있겠으나 SEO(Search Engine Optimizing)에서 보면 많이 달라질 수 있다. 링크가 있느냐 없느냐에 따라서 구글의 pagerank를 고려한다면 노출 우선순위가 달라질 수 있는 것이고. 검색로봇들이 웹페이지를 수집해갈 수 있는 경로가 없다는 것은 해당 컨텐츠가 검색이 안될 수 있다는 것이니까.
이런 작은 태그 하나 하나도 습관이 되는게 좋겠다.

windows vista sidebar gadget 만들기 - 부동산써브 검색

부동산써브의 통합검색 서비스 사이드바 가젯을 만들어 봤다.

아래 개발 가이드 페이지를 참고했다.

http://msdn.microsoft.com/msdnmag/issues/07/08/SideBar/default.aspx?loc=ko

처음에는 RSS 위치만 바꿔서 분양정보에 대한 gadget을 만들었는데...
생각했던 내용들을 전부 적용하려면 좀 더 생각들을 하고 기능들을 추가해야 하기에 우선 간단하게 적용할 수 있는 검색 가젯을 만들어서 등록해 봤다.
음.. 조금전에 등록했는데, 아직 갤러리에서는 안 보임.
http://gallery.live.com/results.aspx?c=39&bt=1&ti=2

디자인 좀 더 해야 할듯도 하고... ㅎㅎ..

간단하게 구조를 살펴보면... 우선 파일 리스트는 아래와 같다.
- gadget.xml : gadget 요약 XML
- gadget.html : 기본 HTML
- style.css : 기본 CSS
- serve1.gif : 로고 이미지 파일
- btn_search2.gif : 검색 버튼 이미지 파일

gadget.xml 파일에 대해서는 msdn 페이지를 확인하는게 좋겠고...
gadget.html 파일이라고 해봐야 부동산써브 통합검색(http://www.serve.co.kr/search/) 페이지로 검색하기 위한 form 태그 하나만 들어가 있을 뿐이다. 크기와 위치 조절을 위해서 CSS를 약간 수정했고.. 이미지 파일이야 기본적으로 필요한것들이라서 들어가 있는 것이고.

처음에 분양쪽 RSS(http://www.serve.co.kr/rss/news_category.asp?srch_code1=29&srch_code2=152)를 적용하면서 gadget을 파악하면서는 몇시간 정도 시간이 필요했는데... 이해를 하고 나니 검색가젯을 만드는데는 몇분정도.. 뭐.. 디자인 맞추느라고 시간이 좀 더 걸리긴 했고...(분양쪽은 몇가지 수정 좀 한후에 올리려고 함..)
욕심을 부려서 네이버위젯(http://desktop.naver.com/openapi/index.nhn)도 비슷한 구조면 바로 해 보려고 했더니.. 쩝.. 네이버는 구조가 많이 다르네..
야후에는 예전에 경희가 만들었던게 있고.. http://kr.widgets.yahoo.com/gallery/gallery.html?wid=184
DAUM이 아직 개발가이드를 공개 안한거 같은데.. 흠.. 못 찾은 건가...

시간 되는데로 하나씩 만들어봐야 할텐데.. ㅎㅎ....

META TAG에 대해서 알아보자.

- META TAG (메타태그) -

META TAG를 사용한다는 것은 자신의 문서를 남에게 보여주는 일정형식이 있는데 그것에 대한 정보

를 나타낼때 사용을 하는 것입니다. 그러므로 개인이나 가족의 홈페이지로서 어떤 특정인들만의 방문

만을 목적으로 했다면 구태여 사용하지 않아도 지장은 없습니다. 그러나 각종 검색엔진에서 검색로봇

이 당신의 홈페이지를 찾아서 나타나게 해주려면은 META TAG 의 사용은 필연적일수 밖에 없습니다.

즉 홈페이지의 홍보와 자사의PR을 위한다면 META TAG의 역활이 가장 크다고 할것입니다.

또한 여러분이 계정에 올려놓은 홈을 다른 계정으로 옮겼을 시에도 자동으로 이동한 홈으로 가게

해주는 것도 바로 이 META TAG 를 사용한것입니다. META TAG<HEAD>~~~~</HEAD>

사이에 넣어주면 되는것입니다.

<HTML>

<HEAD>
<TITLE>SAVER의 META TAG 강좌</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">
<META NAME="Description" CONTENT="홈페이지의 정의">
<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">
<META NAME="Author" CONTENT="제작자 이름">
</HEAD>

<BODY>
문서의 내용이 들어가는곳.
</BODY>
</HTML>

위의 META TAG 의 각각의 역활에 대해서 설명을 하도록 하겠습니다.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">


이 테그는 한글 전용으로 나타남을 뜻하는 것입니다.IE의 경우는 이것이 정해지면 다른 언어는 깨져

보이는 경우가 있는데 브라우저에서 한글표현이 자유롭도록 만들어주는 태그입니다.여러분의 홈에도

당연히 들어가는 것이 좋습니다. 참고로 CHARSET=ISO-8859-1은 영어권 전용을 의미합니다.

<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">


웹페이지를 방문 하다보면 주로 첫화면에서 많이 나오는 상황인데 일정한 시간이 지나면 마우스

를 클릭하지 않아도 다음 페이지로 넘어가는걸 많이 보셨을 것입니다. 그러한 경우에 사용하는 태그

입니다. 여기서는 10초가 지나면 지정한 URL 로 이동을 하게 되는것입니다. 이외에도 이테그는 여러

분이 무료계정을 사용하시다가 다른 계정으로 옮겨갈경우 또는 도메인이 바뀌어서 기존의 도메인에서

바뀐 도메인으로 이동할때도 사용되는 테그 입니다.

<META NAME="Description" CONTENT="홈페이지의 정의">


이테그는 그렇게 많이 사용되지는 않으나 알아두시는 것도 괜찮을 것으로 봅니다. 홈의 가장 핵심이

되는 단어를 넣어주시면 됩니다. 예를 들어 홈페이지 강좌 사이트라고 했을때 가장 핵심이 되는 단어

는 무엇일까요? HTML SCHOOL 이런 단어를 넣어주면 될까요? 저는 도메인 네임을 적어넣었습니다.

여러분은 여러분홈에 맞는 주제어를 찾아서 넣어주시면 됩니다.

<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">


META TAG 중에서 가장 중요한 태그라고 보시면 됩니다. 검색로봇이 웹페이지에 접근했을 때 홈페

이지가 어떤 내용을 다루고 있나를 알게 해 주는 역할을 합니다. CONTENT="~" 부분에 여러분의

홈페이지를 나타내는 키워드를 되도록 이면 많이 입력해 주시기 바랍니다.많을수록 좋습니다.

다다익선이 여기에 해당되는 단어입니다.CONTENT 안에 핵심어들을 콤마로 나열해 주면 됩니다.

예 : HTML,JAVA,CGI,CSS,홈페이지,프로그래밍,등등.

<META NAME="Author" CONTENT="제작자 이름">


이테그는 홈을 만든 본인의 이름이나 예명등을 넣어주면 됩니다.

웹 출판을 한다면 보다 많은 META TAG가 있습니다만은 META TAG의 필요성은 이정도만 아셔도

되리라 봅니다. 홈페이지를 만드신다면 최소한 위의 META TAG정도는 넣어주시기 바랍니다.

출처 : Tong - 까비천사님의 tag/css통

새창에 form 전송하기

가끔 새창을 열고 열린창에 폼전송을 해야하는 경우가 생긴다 이때 사용할 수 있는 소스이다.

■ 새창을 띄우는 page 소스

<script language="javascript">
function Check() {
form1.target = 'newW'; //타겟지정, 아래에는 url을 적지않는다
window.open ('', 'newW', 'width=300,height=300,resizable=no,scrollbars=no');
}
</script>


<form name="form1" method="post" action="test.asp" onSubmit="Check();return true;">
이름<input type=text name=a> <br>
나이<input type=text name=b>
<input type=submit value="새창에 전송">
</form>


■ 열린창(새창)에서 확인 (test.asp)

<%=request("a")%> | <%=request("b")%>

[자스]encodeURI, encodeURIComponent, escape 함수 차이점

개발을 하다보면, 문자인코딩을 해야 하는경우가 상당히 있다.
자바스크립트의 경우는 문자 인코딩/디코딩 관련함수가 몇가지 있다.

자바스크립트(JavaScript)에서는 다음의 함수들로, 문자를 인코딩/디코딩한다.
1. encodeURI() / decodeURI()
최소한의 문자만 인코딩합니다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
이런 문자는 인코딩하지 않습니다.
http:// ... 등은 그대로 나옵니다.


2. encodeURIComponent() / decodeURIComponent()
알파벳과 숫자 Alphanumeric Characters 외의, 대부분의 문자를 모두 인코딩합니다.
http:// ... 가 http%3A%2F%2F 로 됩니다.



3. escape() / unescape()
예전부터 있던 오래된 함수입니다. encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로 문자를 인코딩합니다.

주로 escape() / unescape()를 많이 쓰는데, 이부분은 asp에서도 동일하게 쓸수 있다.

utf-8 페이지에서 euc-kr로(또는 역으로) post전송시 charset 설정하기 - ie only

문제.
부동산써브의 홈페이지는 다국어 지원을 위해 기본 인코딩이 utf-8로 되어있다..
(물론 개중에는 아직 euc-kr로 되어있는 페이지도 간혹있기는 하다.)
그런데, 결제처리 과정에서 결제페이지로 전달된 한글이 깨져보이는 현상이 일어나고 있었다.
확인해 보니,
이것은 현재의 써브싸이트가 기본 encoding이 utf-8로 진행을 하면서, euc-kr로 되어있는 결제페이지로 데이타를 전송하다보니, 문자셋 차이로 인해 한글이 전송중 깨져서 일어나는 현상이었다.

해결.
해당부분의 에러는 일단, hidden필드를 두고, post전송할때 escape()를 적용해서 문제를 해결했다.
그러다 보니, form필드가 더 추가되어야 하는 부분들이 생기게 되었다.
(전송할필드(escape처리)와 고객에게 보여질필드)

이런문제를 근본적으로 해결해보려고, 여러군데를 찾다보니,
documenet에 charset을 설정하면 된다는 부분이 있었다. 폼전송전에
document.charset="euc-kr"로 설정을 해서 폼을 post로 전송을 해보니, 받는페이지(charset=euc-kr)에서
문자가 깨지는 현상을 막을수 있었다. 문제는 ie에서만 된다는것이다.
암튼, ie에서는 post전송전에 document.charset을 설정해주면 문자깨짐을 방지할수 있다.

ex)
<script>
function pay(frm){
document.charset="euc-kr";
}
</script>
<form name="ini" method="post" action="pay.asp" onSubmit="return pay(this)">
<input type="text" name="buyername1" size="20" value="테스트">
</form>

좀 불편하더라고, 인코딩이 서로다른 페이지에 대해서 작업을 할때는 한글에 대해서는 기본적으로 escape()/unescape()을 이용하는것이 좋겠다.

[CSS 팁]input box에서 한글과 영문 자동전환

입력 form을 이용한 페이지를 개발하다보면, 입력폼에 기본으로 한글 또는 영문 입력을 지원하기를 원하는 경우가 있다.. 이때 input box의 style에 ime-mode라는 부분을 지정해주면된다.
 

영문→한글

<input type=text style="ime-mode:active" />

영문 자판으로 사용중이더라도 한글 컴퓨터에서는 바로 한글을 입력할 수 있어욤..


 한글→영문

<input type=text style="ime-mode:inactive" />

이렇게 하면 반대로 영문을 바로 입력할 수 있게 됩니다.

[자스 팁]입력값에 특수문자, 한자 제한하기

문제.
이용자의 글을 받아서 저장하다 보면...허용하지 말아야 할 글자들이 입력되는 경우가 있다..
이럴땐 참 난감한데....특히 한자를 체크하는거 더욱이 어렵다...

해결.
특수문자에 대한 제한은 정규식을 이용하면, 쉽게 해결할수 있다. 반면에 한자를 찾아내는 것은 한글자씩 비교해서 한자인지 아닌지를 알아야하는데...인터넷을 뒤지다보니
한중일 공통한자부분은 유니코드로 바꿨을때..  u4E00 - u9FFF 범위에 들어간다고 한다..
그것을 이용해 function을 하나 만들었다...

function fnRestrictChar(str){
 var regRestrictChar = /[!?@#$%^&*※☆★○●◎♣▷▶]/;
 patten = eval(regRestrictChar);
 var regRestrictChar_str = '[제한문자]';
 if(!patten.test(str)){
  for (var i=0; i<str.length ; i++){
   var c=escape(str.charAt(i));
   c=c.replace('%','');
//   c = str.charCodeAt(i);
   alert(c);
   if(c >= 'u4E00' && c<= 'u9FFF'){
    alert("한자제한!");
    break;
   }
  }
 }else{
  alert("제한된문자!");
 }
}

출처 : Tong - 까비천사님의 자바스크립트통

utf-8에서 넘어온값 db저장시 "지정되지않은 오류..." 뛰어넘기...

다국어 페이지를 만드실때...

유니코드형태에 맞지 않는 특수문자 입력으로 db입력 오류 발생시에 아래와 같이 변경해서 처리해보자.
command 객체를 사용하여, parameter 생성시에
parameter type(adChar,adVarChar)등의 부분을 유니코드로 지정해 주셔야 합니다.
예) adwChar,adwVarChar

현재, 매물등록페이지에서 해당 에러 발생하여
위 내용을 적용해서 해결했음

vbs 파일 작업시 외부 vbs파일 include 하는 방법

vbs파일을 생성해 스케줄작업을 하는 경우가 꽤 된다.
vbs에서는 기본적으로 외부파일에 대해서 include 방식이 제공되지 않아서 상당히 불편하다.
이때, 공통으로 쓸 변수, 함수 들을 따로 파일로 만들어 놓고 쓸수 있는 방법일 찾다 아래 함수를 찾게 되었다.

'--vbs에서 외부 vbs파일을 inclue 하기 위해서 사용한다.
Sub Include(sInstFile)
On Error Resume Next

Dim oFSO, f, s

Set oFSO = CreateObject("Scripting.FileSystemObject")
If oFSO.FileExists(sInstFile) Then
Set f = oFSO.OpenTextFile(sInstFile)
s = f.ReadAll
f.Close
ExecuteGlobal s
End If

Set oFSO = Nothing
Set f = Nothing
End Sub

위 함수를 기본 vbs파일에 넣어주고 include할 파일을 위 함수를 이용해 호출하여 사용하면된다.


예제.
 A.vbs에서 b.vbs파일 include하기 위해서는
A.vbs에서
Call Include("b.vbs")
해주면 된다..
이때..a.vbs와  b.vbs가 같은 디렉토리에 있을경우에는 파일명만 써도 되지만, 서로 다른 디렉토리에 있다면, include시에 b.vbs의 전체 경로를 써주면된다.

쿠키(cookie) 제대로 알고 쓰자.

* 문제.
쿠키를 이용한 개발을 진행하다보니, 저장한 쿠키가 사라지는 일이 발생하게 되었다.
관련된 내용을 검색하다 보니, 쿠키도 저장할수 있는 한계가 있다한다.
하나의 사이트에서 저장할수 있는 쿠키의 최대 갯수는 20개 정도 이며, 4096byte 까지란다.
이런걸 모르고, 쿠키를 사용하다보니 쿠키가 사라지는 경우가 발생하게 된것이다.

* 해결.
하위키를 이용한 쿠키를 사용하게 되면, 이런 경우를 해결할수 있다고 한다.
하위키를 사용하게 되면, 하나의 사이트에 저장할수 있는 쿠키의 수(20개) 보다 적은 수로도 필요한 쿠키들을 저장을 할수 있고, 단일쿠키로 저장할때 보다 더 작은 용량(단일쿠키로 저장할때는 각각의 쿠키에 오버헤드(만료정보)에 대한 50개정도의 문자와 쿠키에 저장되는 값의 길이가 같이 저장된다.)으로 저장하게 된다고 한다.

하위키를 이용한 쿠키를 지정하는 방식은 아래와 같다.(asp방식)
Response.Cookies("mycookie")("cookie1") = "a"
cookie1 = Request.cookies("mycookie")("cookie1")

* 참고
좀더 자세한 내용은 아래 블로그이 포스트에서 볼수 있다.
http://blog.naver.com/kdllee?Redirect=Log&logNo=70022633719

게시판 글쓰기에 html 입력에 따른 페이지깨짐 방지하기.

- 문제.
게시판에 html을 허용해 놓은 경우에 사용자의 html사용 미숙(실수)로 인해서 게시글을 볼때 페이지가 깨지는 경우가 생긴다...이런 경우 처리하기가 매우 난감한데....
이럴때, 이렇게 하면 해결될수 있다..

- 처리 방법.
html이 글을 페이지에 뿌려줄때... 페이지에 바로 뿌리지 말고,
textarea box에 해당 내용을 먼저 받도록 한다. 이때. textarea 는 화면에 보이지 않도록 처리를 해준다.(style="display:none")
이렇게 textarea에 받은것을 javascript를 이용해서  innerHTML로 화면에 뿌려주도록 한다.
이렇게 하면, wellform이 안된 html형식의 글이라도 화면이 깨지지않고 잘 보인다.

- 예제.
<div id='text_conts'></div>
<textarea style='display:none' id='text_area'>wellform이 안된 글.</textarea>
<script>document.getElementById('text_conts').innerHTML = document.getElementById('text_area').value;</script>