이전 미션을 통해 방명록을 만드는 방법에 대해서 알아봤습니다.

 

디자인을 수정하려고 하신 분들 중에 자바스크립트에 대해 모르시는 분들은 조금 당황했을 것입니다.

 

본 솔루션은 빠른 처리속도와 유연성 높은 수정범위를 제공하기 위해 HTML 과 javascript를 함께 사용하고 있습니다.

 

 

 

 

 이번 미션을 통해 javascript 수정방법에 대해서 익혀보도록 하겠습니다.

 

  [방명록 기본 소스] 

 

 

소스를 유심히보시면 33번 ~ 40번 라인이 실제 출력되는 html 소스 입니다.

 

홈페이지상에서 방명록을 확인 해보시면 작성일이 "년-월-일 시간:분:초" 모두 출력되고 있어서 보기에 좋지 않습니다.

이것을 "년-월-일" 만 출력 하고 [수정],[삭제]버튼을 이미지버튼으로 변경해보도록 하겠습니다.

 

우선 수정,삭제 버튼을 만든 후 FTP에 업로드해주세요.

 

 

 

 

 

그리고 방명록 디자인 소스를 아래와 같이 수정 합니다.

 

 

 

위 노란색으로 표시된 부분을 수정했습니다.

수정 하실때 주의하실 점은 쌍따움표(")를 사용하시면 안됩니다.

쌍따옴표는 str =+ " (html소스) "; 에서 사용하고 있기때문에 문법오류로 출력되지 않을 수 있습니다.

 

필자는 지면상 간단하게 수정했지만 여러분은 각자 취향에 맞게 코딩해보세요.^-^

 

 

 

 

 

 javascript 수정하다보면 예기치 못한 오류로 인해 정상 작동되지 않거나 아무것도 출력되지 않을 수 있습니다. 이럴때 수정하는 방법에 대해서 알아두시기 바랍니다.

위 소스에서 아래와 같이 임의로 수정해서 에러가 발생되도록 합니다.

 

  [수정전] 

 

 

  [수정후] 

   

위 소스에서 <img src='/img_up/shop_pds/uhkr17/design/bt_edit.gif' border=0> 이부분을

<img src="/img_up/shop_pds/uhkr17/design/bt_edit.gif" border=0> 이렇게

쌍따움표로 변경하였습니다. 저장 하신 후 홈페이지에서 어떻게 출력되는지 확인 해보시기 바랍니다.

 

 

   

어떤가요? 단지 쌍따옴표로 수정했을 뿐인데 위와 같이 정상적이지 않은 결과를 볼수 있습니다. 이건 javascript 문법상 쌍따옴표안에 쌍따옴표를 사용할수 없기 때문입니다.

 

그러면 앞으로 이런 에러건을 만나게 되면 당황하지 마시고 아래와 같이 에러를 찾아보시기 바랍니다.

 

 

 

 

 

 

 

 

자바스크립트 에러 발생시 웹브라우저의 왼쪽아래를 보시면 아래와 같이 느낌표모양이 표시됩니다.

 

 

 

느낌표 아이콘을 더블클릭하시면 아래와 같은 창이 나타납니다.

 

 

 

 

여기서 내용을 잘보시면 에러나는 위치를 알려주고 있습니다.

"줄:500 , 문자: 89 " 이 숫자가 에러 나는 위치 인데 정확한 확인방법은 홈페이지 바탕에 마우스 우측을 클릭하시면 아래와 같은 화면이 나오는데 여기서 "소스보기"를 클릭 해주세요.  (익스 9이상은 "원본"이라고 되어 있습니다.)

 

(필자는 500번째 줄로 나오지만 여러분은 다른 숫자가  나올것입니다.)

 

 

 

 

그럼 아래와 같이 메모장에 페이지 소스가 출력됩니다.

여기서 위 에러내용의 500번째 줄에서 89번째 문자를 찾아 봅시다.

찾는 방법은 메모장 우측 밑에 표시 됩니다.

 

 

 

 

만약 위화면 처럼 상태표시줄에 줄번호가 없다면 [보기]에서 "상태 표시줄"을 체크하시면 됩니다.

 

어떤가요? 에러난 위치를 쉽게 찾을수 있나요? 이렇게 에러를 찾으면 해당 페이지로 가셔서 다시 수정 하시면 됩니다.

 

앞으로 많이 사용하게 되므로 꼭 사용방법을 충분히 익히시기 바랍니다.

 

 

 

 

정말 중요한 미션이었습니다.

 

수고하셨습니다.^^

 

 

수정전 : http://uhkr16.aramschool.co.kr/shop_contents/visit_list.htm?visit_code=visite

수정후 : http://uhkr17.aramschool.co.kr/shop_contents/visit_list.htm?visit_code=visite

 

 

 

완성 하신 분은 다음 미션으로 고고고~~~