<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>겨미♡웹 &#187; 겸손한 자바스크립트</title>
	<atom:link href="http://miya.pe.kr/tag/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8/feed/" rel="self" type="application/rss+xml" />
	<link>http://miya.pe.kr</link>
	<description>웹 클라이언트 사이드 - UI 그리고 마크업.</description>
	<lastBuildDate>Mon, 05 Mar 2012 08:23:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>겸손한 자바스크립트의 기본</title>
		<link>http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/</link>
		<comments>http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/#comments</comments>
		<pubDate>Sun, 25 Nov 2007 14:23:49 +0000</pubDate>
		<dc:creator>김군우</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Markup]]></category>
		<category><![CDATA[웹 접근성]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[겸손한 자바스크립트]]></category>
		<category><![CDATA[마크업]]></category>
		<category><![CDATA[자바스크립트]]></category>

		<guid isPermaLink="false">http://www.miya.pe.kr/archives/21</guid>
		<description><![CDATA[겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다. 웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 &#60;script&#62; 태그를 쓴다. 앞서 얘기한 설계대로 &#60;script&#62; 태그의 사용 가능하지 않은 경우를 위해 &#60;noscript&#62; 태그를 쓸 수 있다. [...]]]></description>
			<content:encoded><![CDATA[<p>겸손한 자바스크립트의
    <ins datetime="2008-04-25T04:30:00+09:00">사전적인 의미는 문서(<abbr title="Hypertext Markup Language">HTML</abbr>)와 동작(자바스크립트)를
        분리하는 것이지만, 그 이전에</ins>
    기본은 <strong>자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것</strong>이다.</p>

<p>웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면
    우리는 자바스크립트를 표시하는 &lt;script&gt; 태그를 쓴다.
    앞서 얘기한 설계대로 &lt;script&gt; 태그의 사용 가능하지 않은 경우를 위해 &lt;noscript&gt; 태그를 쓸 수 있다.
    어플리케이션 레벨이 아닌 마크업이 잘 되어 정상적인 기능을 하는
<abbr title="Hypertext Markup Language">HTML</abbr> 문서에 부가적인 사용자 편의성의 증대를 목적으로
    사용하는 자바스크립트라면 &lt;script&gt; 태그가 동작하지 않을 경우
    자바스크립트가 없는 <abbr title="Hypertext Markup Language">HTML</abbr> 문서와 같이 작동하게 되므로
    굳이 &lt;noscript&gt; 태그가 필요하지 않을 것이다.</p>

<ins datetime="2008-04-25T04:30:00+09:00">
    <p>다음의 두 코드를 보자. 직업을 입력하지 않았을 때 오류메시지를 표시하는 스크립트를 삽입한 폼이다.</p>
    <pre><code class="html">&lt;form action=&quot;insert&quot; id=&quot;f&quot;&gt;
    &lt;fieldset&gt;
        &lt;label for=&quot;yourjob&quot;&gt;당신의 직업&lt;/label&gt;
        &lt;input type=&quot;text&quot; name=&quot;job&quot; id=&quot;yourjob&quot; /&gt;
        <strong>&lt;a href=&quot;javascript:checkForm();&quot;&gt;전송&lt;/a&gt;</strong>
    &lt;/fieldset&gt;
&lt;/form&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
// &lt;![CDATA[
function checkForm() {
    var form = document.getElementById(&quot;f&quot;);
    if (form.elements[&quot;job&quot;].value == &quot;&quot;) {
        alert(&quot;직업을 입력해주세요.&#038;quot);
    } else {
        form.submit();
    };
};
// ]]&gt;
&lt;/script&gt;</code></pre>
    <pre><code class="html">&lt;form action=&quot;insert&quot; id=&quot;f&quot;&gt;
    &lt;fieldset&gt;
        &lt;label for=&quot;yourjob&quot;&gt;당신의 직업&lt;/label&gt;
        &lt;input type=&quot;text&quot; name=&quot;job&quot; id=&quot;yourjob&quot; /&gt;
        &lt;input type=&quot;submit&quot; value=&quot;전송&quot; /&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
// &lt;![CDATA[
if (document.getElementById &amp;&amp; document.getElementById(&quot;f&quot;)) {
    var form = document.getElementById(&quot;f&quot;);
    form.onsubmit = function() {
        if (this.elements[&quot;job&quot;].value == &quot;&quot;) {
            alert(&quot;직업을 입력해주세요.&#038;quot);
            return false;
        };
    };
};
// ]]&gt;
&lt;/script&gt;</code></pre>
    <p>전자는 자바스크립트를 제거하였을 때 아무런 동작을 하지 않는 예제이고
        후자는 <abbr title="Hypertext Markup Language">HTML</abbr>에 선언된 링크로 이동할 수 있는 예제이다.
    <strong>어떤 코드를 작성하던 비슷한 시간이 소요</strong>되겠지만 &#8211; 학습에 필요한 시간은 제외한다. -
        전자의 경우 <strong>문서의 가치가 훨씬 떨어진다</strong>.</p>
</ins>

<p>모든 사용자가 당신의 자바스크립트 코드를 실행할 수 있을 것이라고 기대하지 말아야 한다.
    또, 어떤 사용자는 당신의 자바스크립트 코드 중 어떤 부분을 제대로 해석하지 못한다는 것을 알아야 한다.</p>

<p>자바스크립트는 플래시, ActiveX와 같은 외부 플러그인과 개념 상 다르지 않다.
    오히려 언급한 것처럼 사용자에 따라 불완전하게 실행될 가능성이 있기 때문에 더 다루기 어려운 기술임을 인식하여야 한다.</p>

<h3>참고 링크</h3>

<ul>
    <li><a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript">Unobtrusive JavaScript &#8211; wikipedia</a></li>
    <li><a href="http://www.alistapart.com/articles/behavioralseparation">Behavior Seperation &#8211; A List Apart</a></li>
    <li><a href="http://sangini.net/56">자바스크립트를 올바르게 사용하기 &#8211; Sangini World</a></li>
    <li><a href="http://hyeonseok.com/docs/accessible-javascript/">접근성을 해치지 않는 자바스크립트의 사용 &#8211; 신현석</a></li>
</ul>

<p class="updatedat">마지막 업데이트: 2008년 4월 25일 04시 30분</p>
]]></content:encoded>
			<wfw:commentRss>http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

