javascript - //<![CDATA[ , //]]> 사용법.

자바스크립트에서의 //<![CDATA[ , //]]> 작성에 관해 끄적여봅니다.

 

정말 오만팔만년만의 포스팅입니다. 글을 작성할 기회는 많았으나 귀차니즘때메 차일피일 미루다가 오랜만에 작성하게 됬습니다.

자꾸 글을 안쓰게되다보니 계속 안쓰고 내블로그 블로그주인장이 눈팅만하게되더군요... 그래도 가끔 기억이 가물가물할때마다

포스팅한것을 찾아서 해결할때도 있고 나름 컨텐츠는 마니 모은듯 합니다.

 

js 파일안에 따로 자바스크립트 코드를 작성하는 경우는 //<![CDATA[ , //]]> 가 필요없지만,

html 코드가 들어있는 파일에 인라인으로 작성하는 경우가 있습니다. 이때 //<![CDATA[ , //]]> 를 언제 넣줘야하는지 알아보겠습니다.

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2.     var btnn = $('.tit');  
3.     btnn.click(function(){  
4.         $('.msg1').before('<h2>애국가<\/h2>');    // .before : p태그 앞에 추가로 붙음.  
5.         $(this).attr('disabled','disabled');    //한번클릭시 비활성.  
6.     });  
7.     var btnn = $('.ct1');  
8.     btnn.click(function(){  
9.         $('.msg1').prepend('<span>반주~~~ <\/span>');    //.prepend : p태그안의 문장 앞에 붙음.  
10.         $(this).attr('disabled','disabled');  
11.     });  
12.     var btnn = $('.ct2');  
13.     btnn.click(function(){  
14.         $('.msg1').append('<span>끝~~~ <\/span>');    //.append : p태그안의 문장 뒤에 붙음.  
15.         $(this).attr('disabled','disabled');  
16.     });  
17.     var btnn = $('.end');  
18.     btnn.click(function(){  
19.         $('.msg1').after('<strong>작곡가 : 안익태<\/strong>');    //.after : p태그 뒤에 추가로 붙음.  
20.         $(this).attr('disabled','disabled');  
21.     });  
22. </script>  

위와 같이 작성하고 파이어폭스에서 실행해보면 아래 이미지처럼 html 검증기 플러그인에서 오류를 표시합니다.

그래서 스크립트선언문 안의 위 아래로 //<![CDATA[ 와 //]]> 를 넣어보겠습니다.

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. //<![CDATA[  
3.     var btnn = $('.tit');  
4.     btnn.click(function(){  
5.         $('.msg1').before('<h2>애국가<\/h2>');    // .before : p태그 앞에 추가로 붙음.  
6.         $(this).attr('disabled','disabled');    //한번클릭시 비활성.  
7.     });  
8.     var btnn = $('.ct1');  
9.     btnn.click(function(){  
10.         $('.msg1').prepend('<span>반주~~~ <\/span>');    //.prepend : p태그안의 문장 앞에 붙음.  
11.         $(this).attr('disabled','disabled');  
12.     });  
13.     var btnn = $('.ct2');  
14.     btnn.click(function(){  
15.         $('.msg1').append('<span>끝~~~ <\/span>');    //.append : p태그안의 문장 뒤에 붙음.  
16.         $(this).attr('disabled','disabled');  
17.     });  
18.     var btnn = $('.end');  
19.     btnn.click(function(){  
20.         $('.msg1').after('<strong>작곡가 : 안익태<\/strong>');    //.after : p태그 뒤에 추가로 붙음.  
21.         $(this).attr('disabled','disabled');  
22.     });  
23. //]]>  
24. </script>  

아래는 그 결과이며 오류가 없다고 표시됩니다.

//<![CDATA[ 와 //]]> 를 추가했더니 오류가 나지 않습니다.

위의 코드를 자세히 보면 스크립트작성시 스크립트코드내에 html 태그가 포함되어있습니다.

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. //<![CDATA[  
3.         $('.msg1').before('<h2>애국가<\/h2>');  
4. //]]>  
5. </script>  

위 축약된 코드를 보시면 h2 태그가 보이실 겁니다. 이렇게 자바스크립트내에서 html 태그가 들어있는 경우에는

//<![CDATA[ , //]]> 를 넣음으로써, 문법 오류를 피할 수 있습니다, 물론 안넣어도 기능은 동작합니다.

저처럼 문법오류가 거슬리는 경우, 넣어주면 항상 편안한 녹색불을 볼 수 가 있는 거죠...

 

그럼 간만의 포스팅을 마치겠습니다.