디자인을 수정하려고 하는 분들 중에는 자바스크립트에 대해 잘모르시는 분들은 어려움을 느낄수 있을 것입니다.
본 솔루션은 빠른 처리속도와 유연성 높은 수정범위를 제공하기 위해 HTML과 javascript를 함께 사용하고 있습니다.
여기서는 javascript(자바스크립트)의 수정방법에 대해서 살펴보도록 하겠습니다.
샘플로 사용할 방명록을 설치하기 위해서 [프로그램샵 > 프로그램 추가 설치 > 프로그램 견적문의]로 이동해서 방명록을 설치합니다.
※ 방명록이 이미 설치되어 있다면 현재 단계는 생략하시기 바랍니다.
① 웹프로그램의 방명록에서 상세보기를 클릭합니다.
② 방명록게시판의 상세보기를 클릭합니다.
③ 선택한 상품정보에서 설치하기 버튼을 클릭합니다.
④ 설치및 결제하기 버튼을 눌러 방명록을 설치합니다.
[프로그램샵 > 프로그램 환경설정]에서 확인해보면 "한줄 메모장"이라는 방명록이 설치되어 있는것을 확인할 수 있습니다.
아래와 같이 방명록에 샘플데이터를 5개정도 입력하시기 바랍니다.
방명록을 확인하면 작성일이 "2013-05-04 03:14"와 같이 "년-월-일 시:분"의 형태로 출력되고 있습니다.
이것을 "년-월-일" 만 출력되도록 수정하고, 수정버튼과 삭제버튼도 변경해보도록 하겠습니다.
첨부된 수정,삭제 버튼을 적당한 위치로 FTP에 업로드해주세요.
필자는 design폴더에 버튼파일을 업로드했습니다
생성된 방명록에서 "PC환경설정"버튼을 눌러서 리스트화면을 확인해보면 아래와 같습니다.
|
<!-----------------------------댓글형식 입력창---------------------------->
<table width=100% cellpadding=20 cellspacing=1 border=0 bgcolor='#dedede'>
<tr><td height='100px' bgcolor='#f2f2f2' >
<form name="visit_add_form" onSubmit="return false" style='margin:0'>
<input type="hidden" name="idx" >
<input type="hidden" name="visit_code" >
<input type="hidden" name="mode" >
<table width=100% border='0' cellpadding='0' cellspacing='0'>
<tr>
<td colspan=2>
<table width=100% border='0' cellpadding='0' cellspacing='5'>
<tr>
<td width=50%>작성자명 : <input type='text' name='write_name' class='input_a' size=15></td>
<td >
<div id='div_pwd' style="display:none">
패스워드 : <input type='password' class='input_a' name='pwd' size=15>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style='padding:0 10px 0 0'>
<textarea name="content" style="width:100%;height:50px" class="textarea_a"></textarea>
</td>
<td width="70px" align='right' valign='top'><a href="javascript:visit_add_form_chk()"><img src='/img_up/shop_pds/uhkr25c/design/copy/visit_code_w231345/add_btn_ok2.gif' border=0></td>
</tr>
</table>
</form>
</td></tr>
</table>
<!-----------------------------댓글형식 입력창---------------------------->
<br>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr><td height=2 bgcolor='#303030' colspan=10></td></tr>
</table>
<TABLE cellSpacing=0 cellPadding=0 width='100%' align=center border=0>
<SCRIPT>
var str = '';
var mem_info_box = '';
for(var i =0;i<vit_numbering_arr.length;i++){
vit_numbering = vit_numbering_arr[i] // 순번
vit_idx = vit_idx_arr[i] // 고유번호
vit_memlv_icon_tag = vit_memlv_icon_tag_arr[i] // 등급아이콘 태그 <img src=''>
vit_photo_url = vit_photo_url_arr[i] // 회원 사진 이미지 URL
vit_write_name = vit_write_name_arr[i] // 닉네임
vit_content = vit_content_arr[i] // 내용
vit_reg_date = vit_reg_date_arr[i] // 작성일 (yyyy-mm-dd hh:ii)
vit_edit_url = vit_edit_url_arr[i] // 수정 url
vit_del_url = vit_del_url_arr[i] // 삭제 url
vit_my_yn = vit_my_yn_arr[i] // 수정및삭제 권한이 있는경우 1, 없으면 0
mem_info_box ='';
if(vit_photo_url){
mem_info_box = ""+vit_memlv_icon_tag+""+vit_write_name;
}else{
mem_info_box = vit_memlv_icon_tag+""+vit_write_name;
}
str += "<tr height='40px'>";
str += "<td width='10%' style='padding:0 10px'><b><font color='#111111'>"+mem_info_box+"</font></b></td>";
str += "<td>";
str += "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
str += " <tr>";
str += " <td>"+vit_content+" <font color='#afafaf'>"+vit_reg_date+"</font> </td>";
str += " <td align='right'>";
if(vit_my_yn == 1){
str += " <a href="+vit_edit_url+"><img src='/img_up/shop_pds/uhkr25c/design/copy/visit_code_w231345/add_sbtn_edit.gif' border=0></a> <a href="+vit_del_url+"><img src='/img_up/shop_pds/uhkr25c/design/copy/visit_code_w231345/add_sbtn_del.gif' border=0></a>";
}
str += " </td>";
str += " </tr>";
str += "</table>";
str += "</td>";
str += "</tr>";
str += "<tr><td colspan=2 style='border-bottom: #d6d6d6 1px solid;' height='1px'></td></tr>";
}
document.write(str);
</SCRIPT>
</TABLE>
<BR>
<TABLE cellSpacing=0 cellPadding=0 width='90%' border=0>
<TR>
<TD align=middle>{PAGE_BLOCK}</TD>
</TR>
</TABLE>
|
위의 소스에서 빨간색으로 표시된 부분이 실제 출력되는 자바스크립트(javascript)소스이며 아래와 같이 수정합니다.
|
var tmp_arr = vit_reg_date.split(" "); //띄워쓰기로 나눈다.
var ymd_str = tmp_arr[0]; //yyyy-dd-mm 저장한다.
str += "<tr height='40px'>";
str += "<td width='10%' style='padding:0 10px'><b><font color='#111111'>"+mem_info_box+"</font></b></td>";
str += "<td>";
str += "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
str += " <tr>";
str += " <td>"+vit_content+" <font color='#afafaf'>"+ymd_str +"</font> </td>";
str += " <td align='right'>";
if(vit_my_yn == 1){
str += " <a href="+vit_edit_url+"><img src='/img_up/shop_pds/uhkr25c/design/edit.gif' border=0></a> <a href="+vit_del_url+"><img src='/img_up/shop_pds/uhkr25c/design/delete.gif' border=0></a>";
|
수정이 완료된후 방명록을 확인해보면 다음과 같이 날짜표시와 버튼이 변경된것을 확인할 수 있습니다.
수정 하실때 주의하실 점은 쌍따옴표(")를 사용하시면 안됩니다.
쌍따옴표는 str =+ " (html소스) "; 에서 사용하고 있기때문에 문법오류로 정상적으로 출력이 안됩니다.
javascript 수정하다보면 예기치 못한 오류로 인해 정상 작동되지 않거나 아무것도 출력되지 않을 수 있습니다.
이럴 경우에 수정하는 방법에 대해서 알아두시기 바랍니다.
위의 소스에서 아래와 같이 임의로 수정하여 오류가 발생되도록 만들어보겠습니다.
[수정전]
|
str += "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
str += " <tr>";
str += " <td>"+vit_content+" <font color='#afafaf'>"+ymd_str +"</font> </td>";
str += " <td align='right'>";
if(vit_my_yn == 1){
str += " <a href="+vit_edit_url+"><img src='/img_up/shop_pds/uhkr25c/design/edit.gif' border=0></a> <a href="+vit_del_url+"><img src='/img_up/shop_pds/uhkr25c/design/delete.gif' border=0></a>";
}
str += " </td>";
str += " </tr>";
str += "</table>";
|
[수정후]
|
str += "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
str += " <tr>";
str += " <td>"+vit_content+" <font color='#afafaf'>"+ymd_str +"</font> </td>";
str += " <td align='right'>";
if(vit_my_yn == 1){
str += " <a href="+vit_edit_url+"><img src='/img_up/shop_pds/uhkr25c/design/edit.gif' border=0></a> <a href="+vit_del_url+"><img src="/img_up/shop_pds/uhkr25c/design/delete.gif" border=0></a>";
}
str += " </td>";
str += " </tr>";
str += "</table>";
|
위 소스에서 <img src='/img_up/shop_pds/uhkr25c/design/delete.gif' border=0> 의 이미지경로에 쌍따옴표를 붙여서
<img src="/img_up/shop_pds/uhkr25c/design/delete.gif" border=0> 로 변경하였습니다.
소스를 저장한 후 홈페이지에서 어떻게 출력되는지 확인해 보겠습니다.
단지 쌍따옴표로 수정했을 뿐인데 위와 같이 결과가 정상적으로 나타나지 않습니다.
이것은 javascript 문법상 쌍따옴표안에서는 쌍따옴표를 사용할수 없기 때문입니다.
그러면 앞으로 이런 에러건을 만나게 되면 당황하지 마시고, 아래와 같이 방법으로 에러를 찾아서 수정하시기 바랍니다.
자바스크립트 에러 발생시 웹브라우저의 왼쪽아래를 보시면 아래와 같이 느낌표모양이 표시됩니다.
※ 브라우저에 따라서 표시가 안될 수도 있습니다.
느낌표 아이콘 또는 브라우저의 좌측하단모서리를 더블클릭하시면 아래와 같은 창이 나타납니다.
여기서 내용을 잘보시면 에러나는 위치를 알려주고 있습니다.
"줄:469 , 문자: 87 " 이 숫자가 에러 나는 위치인데 정확한 확인방법은 홈페이지 바탕에 마우스 우측을 클릭하시면 아래와 같은 화면이 나오는데 여기서 "소스보기"를 클릭 해주세요. ( 익스 9이상은 "원본"이라고 됩니다 )
(필자는469번째 줄로 나오지만 여러분은 다른 숫자로 나올것입니다.)
그럼 아래와 같이 메모장에 페이지 소스가 출력됩니다.
여기서 위 에러내용의 469번째 줄에서 87번째 문자를 찾아 봅시다.
찾는 방법은 해당소스를 클릭한후 이동단축키(Ctrl+G)를 누르고 해당 줄번호 "469"를 입력하면 해당하는 줄번호로 이동합니다.
해당 줄에서 마우스를 클릭해가면서 상태표시줄이 "Ln 469, Col 87" 이 되는 지점까지 이동해서 확인해보세요.
만약 위화면 처럼 상태표시줄에 줄번호가 없다면 [보기]에서 "상태 표시줄"을 체크하시면 됩니다.
※ 서식메뉴의 자동줄바꿈이 해제된 상태에서만 상태표시줄을 설정할 수 있습니다.
어떤가요? 에러난 위치를 쉽게 찾을수 있나요? 이렇게 에러를 찾으면 해당 페이지로 가셔서 다시 수정 하시면 됩니다.
완성화면 : http://uhkr25c.aramschool.co.kr/shop_contents/visit_list.htm?visit_code=w231345
)
)
)
)
)
)
)
)
)
)
)
)
[응용] 견적문의 게시판 만들기
[응용] 각 페이지마다 게시판 자동생성하기 
