JavaScript DataBase 예제 1

제 페이지의 page 정보를 검색하는데 사용한 코드를 설명하겠습니다.

먼저 encode, unescape를 피하기 위해서 프레임 페이지를 만들고 frameset을 지정한 페이지에 data를 모두 저장합니다. 이 data는 폼으로 입력한 페이지에서 검색을 하고 검색결과를 출력 페이지에 출력합니다. 폼으로 입력하는 페이지나 결과를 출력하는 페이지를 두 페이지로 하지않고 한 페이지로 만들수도 있지만, 검색을 쉽게하기 위해서 두 페이지가 검색이 편합니다.

<html>
<head>
<script language="javascript">

function setDbArray() { 
  var dbArg = setDbArray.arguments

  this.subject = dbArg[0]
  this.explain = dbArg[1]
  this.keyword = dbArg[2]
  this.date = dbArg[3]
}
function setDataBase() { 
  var setDbArg = setDataBase.arguments; 
  DB[totalDbLength] = new setDbArray(setDbArg[0], setDbArg[1], setDbArg[2], setDbArg[3]);
  totalDbLength++; 
}
var totalDbLength=0; //전체 저장 항목의 갯수를 판단함. 
var quryString=""; //입력 페이지에서 입력한 문자. 결과 페이지에서 사용함. 
DB = new Array(); 

setDataBase("<a href='http://a.b.com/first.htm'>첫번재 DB 페이지</a>", 
	"첫번째 DB페이지 입니다.", 
	"첫번째, DB", 
	"1998년 09월04일"
);
setDataBase("<a href='http://a.b.com/second.htm'>두번째 DB 페이지</a>", 
	"두번째 DB페이지 입니다.", 
	"두번째, DB", 
	"1998년 09월04일"
);

</script>
</head>
<frameset rows="90%,*" border=0>
	<frame src="resultWin.htm" name="resultWin">
	<frame src="inputWin.htm" name="inputWin">
</frameset>
</html>

여기서 각 페이지의 정보는 "제목", "페이지설명", "검색어", "만든 날짜" 로 4가지의 하위 정보를 가지는 배열로 만들었습니다. 그러므로 각 정보를 setDataBase()에 넣어줄 때, 4가지를 다 넣어 주어야 합니다. 빨간색의 코드가 각 배열에서 4가지의 정보를 저장합니다.

위의 파란색의 코드로 각 정보를 저장합니다. 파란색 코드를 가지고 있는 setDataBase 함수는 굳이 이렇게 사용하지 않아도 됩니다. 단순히 아래로 사용해도 됩니다.
DB[0] = new setDbArray(setDbArg[0], setDbArg[1], setDbArg[2], setDbArg[3]);
위의 파란색으로 사용한 이유는 관리하기 편하게 하기위함 입니다. 나중에 페이지를 맨 위의 배열이나 중간배열에 추가할 때 DB[숫자] 에서 숫자를 다 고쳐야 하는데 이렇게 하면 아무데나 끼워 넣어주면 간단히 됩니다. 검색결과가 최근 갱신된 페이지 순서로 할때도 편합니다.

관리라는 문제를 가볍게 생각하지 마세요.. 나중에 Data 양이 늘거나 기간이 많이 지나면 무척 헤깔릴 수 있습니다. 페이지를 추가했을 때는 더 어렵습니다.

각 페이지의 정보에서 페이지의 URL에 절대 경로를 지정했습니다. 이곳도 관리를 염두에 두었습니다. 상대 경로를 지정하면 나중에 Data 정보를 저장한 페이지를 옮길려면 일일이 모든 data 에 경로를 바꾸어 주어야 합니다. 아마 다시 만드는게 나을겁니다. 각 페이지의 URL을 절대경로로 지정하면 위의 소스를 가진 페이지를 아무데나 옮길수 있습니다. 아주 편하죠..

사용자가 검색어를 입력하는 inputWin.htm 페이지입니다.

<html><head><title>페이지 검색 입력기</title></head>
<script language="JavaScript">
<!--
function korOrEng(qury) { 
  var korOrEng="kor"
  var alpabet = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 
	'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 
	'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
	// 위의 줄은 한 줄입니다. 

  for(var i=0; i < alpabet.length; i++) { 
    if( qury.indexOf(alpabet[i]) != -1 ) { 
      korOrEng = "eng" 
      break;
    }
  }
  if ( (navigator.appName.indexOf("Netscape") != -1) &&  korOrEng == "kor") 
    korOrEng = 3; 
  else korOrEng = 2

  return korOrEng
}
function goSearch(qury) { 

  if( (qury.length < korOrEng(qury)) 
	|| (qury.indexOf(",") != -1) 
	|| (qury.indexOf(".") != -1) 
	|| (qury.indexOf(" ") != -1) 
  ) { 
	document.qury.text.value="검색어가 부적합 합니다."
	document.qury.text.focus();
	document.qury.text.select();
	return 
  }

  parent.quryString = qury
  parent.resultWin.location.href = "resultWin.htm?dummy"; 
}
//-->
</script>
<body>
<form name="qury" onSubmit="goSearch(this.text.value); return false">
  <input type=text name="text""> 
  <input type=button onClick="goSearch(this.form.text.value)" value="검색">
  <input type=button onClick="parent.resultWin.location.href='resultWin.htm'" value="검색결과 페이지">
</form>
</body>
</html>

폼에 검색어를 입력하고 "검색" 단추를 누르거나 바로 엔터하면 goSearch(검색어)로 갑니다. 검색어로 한글이나 영문이 1개의 글자이면 검색을 하지않고 쉼표(,), 마침표(.), 공백(" ") 일 경우에도 검색을 하지않습니다. 각 정보의 하위 정보인 subject, explain, keyword, date에는 쉼표(,), 마침표(.), 공백(" ") 문자가 다 들어있습니다. 그래서 검색결과가 너무 많이 나올수 있습니다.

많은 data를 가지고 있는 페이지에서 이들 아주 흔한 글자는 결과 출력 시간이 많이 걸립니다. 이 처리를 사용자가 중단할 수도 없습니다. JavaScript의 처리는 사용자가 중단할 수 없기 때문에 이런 많은 결과가 나오는 문자들은 검색어로 입력하는 것을 막아야 합니다.

한글, 영문 1글자도 마찬가지입니다.

ie의 경우 한글도 영어와 같이 문자의 길이가 1로 나옵니다. 반면에 nn은 한글은 2입니다.

alert("안녕".length)

는 ie로 읽으면 2이고 nn으로 읽으면 4입니다. 그래서, 검색어로 입력한 글자가 한글인지 영어인지 ie인지 nn인지 korOrEng(qury)로 구분을 하여 지정해 줍니다. nn에서 영어가 없는 검색문자는 모두 한글로 보고 제한 길이를 3으로 지정합니다. ie는 길이가 같기 때문에 확인할 필요가 없습니다. nn에서 영어가 없는 검색어는 모두 한글로 보고 제한길이를 3 이하로 지정합니다. 한글 2글자 이상인 4 이상의 길이를 가지는 검색어만 검색됩니다. 한글과 영어를 동시에 입력해도 같습니다.

검색어가 1글자나 쉼표(,), 마침표(.), 공백(" ") 일 경우에 검색을 하지않고 사용자에게 잘못된 검색어라고 알립니다. 한글이나 영어나 2글자 단어가 많습니다. 그래서 2글자 이상 사용하게 했습니다. 1글자 단어는 드무니까요.. 한글 "창", "문" 같은게 있지만 안전한 검색을 위해서 어쩔수가 없습니다.

이제 검색어로 사용할 문자열을 parent.quryString 에 저장합니다. 그리고 이 검색어로 검색할 resultWin.htm을 출력합니다. 검색결과를 출력할 페이지에서 이것으로 frameset에 저장한 정보를 읽습니다.

resultWin.htm 페이지입니다.

<html><head><title>페이지 검색 결과 페이지</title>

<script language="JavaScript">
<!--
function pipeChar(total, output, input) {

  var totalLen = total.length;  
  var inputLen = input.length;
  var outputLen = output.length;  
  var i = 0, flag, end = "";

  while( i < totalLen ) {    
    flag  =  total.indexOf(output, i);
    if(flag != -1) {      
      end += total.substring(i, flag);      
      end += input;
      i = outputLen+flag;    
    }    
    else break;  
  }	
  end += total.substring(i, totalLen);  
  return end
}
function dbProp(page, qury) {

  if( (page.explain.indexOf(qury) != -1) || (page.keyword.indexOf(qury) != -1) ) 
    return true; 

  return false;
}

function search(qury) { 
  if( !qury ) { 
    document.write( "<table border=0 width='70%' cellpadding=5><tr><td>");
    document.write( "DHTML에 관계된 페이지를 검색합니다. ..."); 
    document.write( "</td></tr></table>"); 
    return
  }

  var findCount=0;         // (1)
  var db = parent.DB     // (2)

  for(var i=0; i < db.length; i++) {
    if( dbProp(db[i], qury) ) { 
      document.write( "<table border=0 width='70%'>");
      document.write( "<tr><td colspan=2>" + db[i].subject + "</td></tr>" );
      document.write( "<tr><td width='20%'>페이지안내</td>");
      document.write( "<td>" + pipeChar(db[i].explain, qury, ("<font color='red'>" + qury + "</font>")) + "<td></tr>");
      document.write( "<tr><td width='20%'>검색어</td>"); 
      document.write( "<td>" + pipeChar(db[i].keyword, qury, ("<font color='red'>" + qury + "</font>")) + "</td></tr>");
      document.write( "<tr><td width='20%'>작성일</td><td>" + db[i].date +"</td></tr>");
      document.write( "</table><br>"); 
      findCount++
    }
  }
  if( findCount ) { 
    document.write( "발견한 문서 갯수는 "+ findCount + "개 입니다.")
  }
  else { 
    document.write("<table width='50%'><tr><td>찾은 문서가 없습니다. 다른 검색어를 사용해 보세요</td></tr></table>"); 
  }
}
//-->
</script>
</head>
<body>

<center>
<table border=5><tr><td bgcolor="#cecebd">검색 결과 페이지</td></tr></table>
</center>

<center><script>search(parent.quryString)</script></center>
</body>
</html>

실행하기

TOP