본문 바로가기
  • think normal
새로워지기/서른의 생활코딩

샘플소스1) javascript 기본 문서구조 ( //<![CDATA[ //]]> )

by 청춘만화 2011. 4. 4.


자바 스크립트 스크립트에 대한 스터디 페이지를 만들어 볼까 생각 중이다.




서문 )
 

패션과 서양화를 전공하고 영업과 기획에서 사회생활을 하고 
카페 겸 멀티샵을 경영하다가 3D 툴을 배워서 
작년 11월쯤부터
연구원에서 일하면서 틈틈히 인터넷을 통해 마크업과 css를 눈 넘어로 배우다가

2011년 3월.. 30대와 함께 마주한 js와  변군..

개발자 출신이 아닌 시각에서 접근해보는 것이 오히려 초보한테는 좋을지도 모른다는 생각이...

뭐... 특별한 내용이나, 친절한 설명과 가이드라인 같은 건 아직 없지만
우선 무조건 예제를 따라 써보고 브라우저가 과연 어떻게 응답을 하는지를 지켜보는게
그리고 반복해 보는 것이  내가 접근해가는 방식이다.

비단, 그것이 js가 이니더라도  ...


막상 하다보니까 처음부터 여간 번거러운게 아니다..
얼마나 갈지는 모르겠지만
늘 그렇듯.. 

우선- 시작. 한다.




서문 )
 

개발에 앞서, 환경을 만들어야 한다.
갠적으로 변군은 맥북프로와 회사에서는 데스크탑을 사용한다.
사용하는 응용 프로그램은 
이클립스(pc-갈릴레오 mac-헬리우스)와 압타나(2.x)를 사용한다.
하지만 js만 테스트하기엔 그냥 에디트플러스나 일반 매모장으로도 충분하다.

환경 구축하다 의욕이 꺽이는 심정을 잘안다..
그러니 우선 에디트플러스나 일반 매모장으로 부터 시작하자 ^^

js를 떠나 삶의 선택에 있어.. 대부분이 시작이 반이다.
작심삼일이라도 좋다.
계획을 삼일마다 바꾸면 되는 것이다.

어설프게 설치방법 설명하느라 귀한 시간과 웹스토리지를 낭비하기가 좀 그렇다.
갠적으로 구글 검색을 하시면 완전 고수님들께서 완전 친절히 설명해주신 글들이 많다.
(변군은 갠적으로 다음과 네이버보단 구글링을 선호)





안내 )

주로 작성되는 내용은 샘플 소스 공개로 이뤄질 것이다.
간단한 실습으로 되어있어
거두절미 하고 바로 실행해 보면 알 수 있다.

다만,
초보들...그러니까 변군이
샘플 코드들을 테스트할 때
맨 처름 작성한 틀린 code를 주석으로 함께 첨부 한다.   ->>
 /*녹색으로 표시하겠습니다.*/

초보라서, 몰라서 할 수 있는 생각이
같은 초보들에게 좋은 인싸이트가 되었으면 한다.
마치 오답노트를 보며 내가 왜 그런 생각으로 문제를 접근했는지 돌이켜보면
정답 이외에 더 많은 것을 이해할 수 있는 것처럼... 
 






권장 )

비슷한 초보님들이 우연히 라도 이곳을 방문하셨다면
그리고
어쩌다보니 테스트에 같이 동참 하시게 되었다면
본인이 작성한 코드나 다른 예제 같은 걸 링크걸어서 함께 공유했으면 합니다.
또는 비슷한 조건의 코딩을 과제로 제안해서
같이 풀어보고 고민해 보는 것도 서로에게 많은 도움이 되지않을까 생각합니다. 

 






시작.. )

아무래도 자바스크립트를 시작할 때,
가장 먼저 해야할 일은 내용을 넣을 껍데기를 만들어야하는 것이라 생각한다.

마치, html 하기전에 앞뒤로 길게 쓰는 것처럼... 

다행이 자바스크립트는 
css와 같이 html 마크업 사이에 슬쩍 끼워넣거나 옆에 별도의 파일을 가져다 놓으면 된다.


1.
우선,
앞서 말한 것 처럼
실질적인 내용이 들어가는 껍데기가  

<script type="text/javascript">
</script>

이다.


그리고 간과해서는 안될 것이
//<![CDATA[
//]]>
 

를 넣는 것이다.
->         초보가 웹 페이지가 구현되는 데 심각한 문제를 발생가지는 않지만..
몇몇 브라우저에서는 스크립트 안에 들어오는 일부 테그를 오류로 인식하는 경우가 있어 이를 사전에 방지하기 위함이다.
(정확한 설명은 아니다. 책을 뒤져봐야 하는데...퇴근시간 넘어서 우선 여기까지..ㅋ)


2.
더불어
요즘은 스크립트가 적용되지 않을 경우가 거의 없지만
그래도 혹시 그럴 일이 생기면
<noscript></noscript>를 사용할 수 있다는 것도 알아 두어야 할 것 같다.





예제 1 >
 
 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"lang="ko">  




<head>


<meta http-equiv="Content-Type"content="application/xhtml+xml; charset=UTF-8" />


<title> js 기본 문서구조 </title>


<meta name="Keywords" content="" />


<meta name="Description" content="" />




<script type="text/javascript">


//<![CDATA[


document.write("<h1>\"스크립트\"가 잘 동작되고 있어요.</h1>");


//]]]]>


</script>


</head>  




<body>




<noscript>


자바스크립트가 지원이 않아 컨텐츠의 내용이 제대로 실행되지 않을 수 있습니다.


</noscript>




</body>




</html>


댓글