본문 바로가기

프로그래밍/HTML _ CSS _ JavaScript

JQuery 를 이용한 html와 script 와 분리


요새 prototype.js 를 이용해, javascript 를 깔끔하게, 효율적으로

만드는 방안으로 생각 하고 있는 도중, JQuery 를 알게 되었다.

그런데 이게, JQuery 예제를 이용하던 도중 이것을 이용하면,

디자이너가 HTML를 넘기면 id 및 name 를 세팅하여, 넘겨주면,

스크립트 작업 후 개발을 할때, 디자인이 수정되어도, 가공된 페이지에 변경 없이 작업을 할수 가 있다고 생각이

들었다. Greate!!

물론 prototype 를 이용해 할수도 있는데 흠.. JQuery 를 이용하면 좀더 효율 적으로 할 수 있다.




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>

<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript">

 $(document).ready(
  function (){
   $("#textcubeLink").click(
    function(){
     alert("empas image click");
    }
   ).css("cursor", "pointer");
   
   $("#blogLink").click(
    function(){
     location.href = "http://taesuz.net/tt/";
    }
   ).css("cursor", "pointer");
   
   

  }
 
 
 );

</script>

<style type="text/css">
    .links { cursor: pointer; }
 </style>

</head>

<body>

<a id="blogLink">taesuz.net 링크</a>
<br />
<br />
<img src="http://taesuz.net/tt/skin/ReinerSchwarzKoreanisch/images/textcube.jpg" id="textcubeLink" />

</body>
</html>


보시다 시피, 분리가 될수 있다. html 디자인은 그대로 있지만, 링크나, 스크립트 제어 부분이 완전히 분리되어있다.

좀더 공부 하면, 보다 깔금하게 효율적으로 분리가 되어 제어 가능하지 않을까?

이 얼마나 알흠다운가 ㅎㅎ

앞으로 효율적으로 활용해 봐야겠다.