<?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/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>DESIRERY &#187; HTML</title>
	<atom:link href="http://www.t2-designing.com/blog/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.t2-designing.com/blog</link>
	<description></description>
	<lastBuildDate>Sun, 05 Sep 2010 07:12:45 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.t2-designing.com/blog/tag/html/feed/" />
		<item>
		<title>JavaScriptでのリンク処理</title>
		<link>http://www.t2-designing.com/blog/2009/04/09/96/</link>
		<comments>http://www.t2-designing.com/blog/2009/04/09/96/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 17:51:41 +0000</pubDate>
		<dc:creator>Toyoshima</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.t2-designing.com/blog/?p=96</guid>
		<description><![CDATA[ほとんどスクリプトなんかを触らない人には知られてないのかなーって気がしたのでメモ。JSでaタグにonclickとかっていう処理をした場合に、href属性には#を入れるとかそういった場合。何もしなければブラウザによってはページトップに移動で余計な動作。これをJSで消す。 &#38;lt;!-- ページトップに飛ぶかバリデータ対応がめんどいやり方 --&#38;gt; &#38;lt;a href=&#38;quot;#&#38;quot; onclick=&#38;quot;onClickHandler();&#38;quot;&#38;gt;hoge&#38;lt;/a&#38;gt; &#38;lt;a href=&#38;quot;javascript:void(0);&#38;quot; onclick=&#38;quot;onClickHandler();&#38;quot;&#38;gt;hoge&#38;lt;/a&#38;gt; &#38;lt;!-- return falseを返すことで上記のデメリット回避 --&#38;gt; &#38;lt;a href=&#38;quot;#&#38;quot; onclick=&#38;quot;onClickHandler(); return false;&#38;quot;&#38;gt;hoge&#38;lt;/a&#38;gt; こんな感じでreturnでfalseを返すのがいいです。あとはそもそもJSで管理してしまうとか。基本的にDOMで取れないことはないですが下記JSでは$関数でtargetというIDを振った場合。 $&#40;target&#41;.onclick = function&#40;e&#41; &#123; alert&#40;e.target&#41;; return false; &#125; こんな感じでクリックのイベントもJSで追加。addEventListenerはIEが(ry。HTMLにはonclickは書かなくて済みhrefも#を入れておくだけ。処理は全部JSでまとめて処理。関数なので1回書けばいい。それにどれをクリックされたかやどれをクリックしたいかとかも全部JSで処理できるので楽。 それにしてもこのソース表示のプラグインいいんだけど重すぎ。やっぱり軽いほうがいいなー。あとWPにキャッシュ機能ぽいのがあるようなので今度それも試してみよ。 Share this on del.icio.us Add this to Google Bookmarks Share this on Facebook Post this to MySpace Tweet This! Share this on FriendFeed Share this [...]]]></description>
			<content:encoded><![CDATA[<p>ほとんどスクリプトなんかを触らない人には知られてないのかなーって気がしたのでメモ。JSでaタグにonclickとかっていう処理をした場合に、href属性には#を入れるとかそういった場合。何もしなければブラウザによってはページトップに移動で余計な動作。これをJSで消す。</p>
<div class="syntax_hilite">
<div id="html-3">
<div class="html" style="font-family:monospace;">
<ol>
<li style="font-weight: normal; vertical-align:top;color:#3A6A8B;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #ddbb00;">&amp;lt;</span>!-- ページトップに飛ぶかバリデータ対応がめんどいやり方 --<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
<li style="font-weight: bold; vertical-align:top;color:#26536A;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #ddbb00;">&amp;lt;</span>a href=<span style="color: #ddbb00;">&amp;quot;</span>#<span style="color: #ddbb00;">&amp;quot;</span> onclick=<span style="color: #ddbb00;">&amp;quot;</span>onClickHandler();<span style="color: #ddbb00;">&amp;quot;&amp;gt;</span>hoge<span style="color: #ddbb00;">&amp;lt;</span>/a<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
<li style="font-weight: normal; vertical-align:top;color:#3A6A8B;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #ddbb00;">&amp;lt;</span>a href=<span style="color: #ddbb00;">&amp;quot;</span>javascript:void(0);<span style="color: #ddbb00;">&amp;quot;</span> onclick=<span style="color: #ddbb00;">&amp;quot;</span>onClickHandler();<span style="color: #ddbb00;">&amp;quot;&amp;gt;</span>hoge<span style="color: #ddbb00;">&amp;lt;</span>/a<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
<li style="font-weight: bold; vertical-align:top;color:#26536A;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #ddbb00;">&amp;lt;</span>!-- return falseを返すことで上記のデメリット回避 --<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
<li style="font-weight: normal; vertical-align:top;color:#3A6A8B;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #ddbb00;">&amp;lt;</span>a href=<span style="color: #ddbb00;">&amp;quot;</span>#<span style="color: #ddbb00;">&amp;quot;</span> onclick=<span style="color: #ddbb00;">&amp;quot;</span>onClickHandler(); return false;<span style="color: #ddbb00;">&amp;quot;&amp;gt;</span>hoge<span style="color: #ddbb00;">&amp;lt;</span>/a<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>こんな感じでreturnでfalseを返すのがいいです。あとはそもそもJSで管理してしまうとか。基本的にDOMで取れないことはないですが下記JSでは$関数でtargetというIDを振った場合。</p>
<div class="syntax_hilite">
<div id="javascript-4">
<div class="javascript" style="font-family:monospace;">
<ol>
<li style="font-weight: normal; vertical-align:top;color:#3A6A8B;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">$<span style="color: #009900;">&#40;</span>target<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">onclick</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></div>
</li>
<li style="font-weight: bold; vertical-align:top;color:#26536A;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div>
</li>
<li style="font-weight: normal; vertical-align:top;color:#3A6A8B;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span></div>
</li>
<li style="font-weight: bold; vertical-align:top;color:#26536A;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#125;</span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>こんな感じでクリックのイベントもJSで追加。addEventListenerはIEが(ry。HTMLにはonclickは書かなくて済みhrefも#を入れておくだけ。処理は全部JSでまとめて処理。関数なので1回書けばいい。それにどれをクリックされたかやどれをクリックしたいかとかも全部JSで処理できるので楽。</p>
<p>それにしてもこのソース表示のプラグインいいんだけど重すぎ。やっぱり軽いほうがいいなー。あとWPにキャッシュ機能ぽいのがあるようなので今度それも試してみよ。</p>


<!-- Begin SexyBookmarks Menu Code -->
<div class="sexy-bookmarks sexy-bookmarks-center">
<ul class="socials">
		<li class="sexy-delicious">
			<a href="http://del.icio.us/post?url=http://www.t2-designing.com/blog/2009/04/09/96/&amp;title=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="sexy-google">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://www.t2-designing.com/blog/2009/04/09/96/&amp;title=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a>
		</li>
		<li class="sexy-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.t2-designing.com/blog/2009/04/09/96/&amp;t=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="sexy-myspace">
			<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.t2-designing.com/blog/2009/04/09/96/&amp;t=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Post this to MySpace">Post this to MySpace</a>
		</li>
		<li class="sexy-twitter">
			<a href="http://twitter.com/home?status=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86+-+http://b2l.me/b5tkf+(via+@Toyotter)" rel="nofollow" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="sexy-friendfeed">
			<a href="http://www.friendfeed.com/share?title=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86&amp;link=http://www.t2-designing.com/blog/2009/04/09/96/" rel="nofollow" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
		<li class="sexy-tumblr">
			<a href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fwww.t2-designing.com%2Fblog%2F2009%2F04%2F09%2F96%2F&amp;t=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Share this on Tumblr">Share this on Tumblr</a>
		</li>
		<li class="sexy-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.t2-designing.com/blog/2009/04/09/96/&amp;title=JavaScript%E3%81%A7%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%87%A6%E7%90%86" rel="nofollow" title="Digg this!">Digg this!</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- End SexyBookmarks Menu Code -->

]]></content:encoded>
			<wfw:commentRss>http://www.t2-designing.com/blog/2009/04/09/96/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.t2-designing.com/blog/2009/04/09/96/" />
	</item>
		<item>
		<title>Canvas</title>
		<link>http://www.t2-designing.com/blog/2009/03/27/47/</link>
		<comments>http://www.t2-designing.com/blog/2009/03/27/47/#comments</comments>
		<pubDate>Thu, 26 Mar 2009 18:13:40 +0000</pubDate>
		<dc:creator>Toyoshima</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.t2-designing.com/blog/?p=47</guid>
		<description><![CDATA[AIRとかじゃなくHTML 5のほうです。これ結構面白そう。HTML 5がまともに使えるころにはさらにJSの実行速度は速くなっているはず（IE除く）。先日のChromeサイトではグラフィック系ばかりだけど鯖との連携とかも気になるとこ。あと操作系。 Chrome Experiments Canvas チュートリアル 動いているのはJavaScriptなので何もインストールせず、Flashが見れない環境でも動く。しかもHTMLとの愛称はFlashより全然いいのかも。っていうかこれ外はHTMLか。Canvas自体もDOM操作であれこれしてアプリからちょっとしたのまで使えそう。ブログのCMSとかもUIは今までどおりで編集エリアはCanvasでとか。まだ調べてないからテキスト関連どうなってるか知らないけど。 なんかいろいろできそうだけど個人的にCSSももうちょっとがんばって。特に背景指定とか。PNGがまともに使えたら大好きなスケスケサイトを作れるんですが、特定の領域からのリピートとかがものすっごくほしい。それにCSS Variablesはぜひ。Safari Betaにも実装されたことだし。難しくなろうがどうせ定数ぽいようなものだしそれよりはまだまだできないことのほうが多いんでもっといろいろ実装してほしい。 あと今日帰りに電車内でふらふらしてた人に頭突きされました。いきなり顔に手が来るし。さすがに切れかけた。個人的に酔っ払いとガムの音を立てる人が一番不愉快。そういえば埼京線でゲームしてたら注意されてフルボッコってのがあったけど朝の埼京線でゲームって馬鹿？結構電車内ってマナー悪い。おばちゃんの席取りはすごいし。その点副都心線はほんとよかったなー。ってエチカ池袋オープン。帰りにちょっと見てこよーかなとか思ったけど12時すぎに池袋着。 Share this on del.icio.us Add this to Google Bookmarks Share this on Facebook Post this to MySpace Tweet This! Share this on FriendFeed Share this on Tumblr Digg this!]]></description>
			<content:encoded><![CDATA[<p>AIRとかじゃなくHTML 5のほうです。これ結構面白そう。HTML 5がまともに使えるころにはさらにJSの実行速度は速くなっているはず（IE除く）。先日のChromeサイトではグラフィック系ばかりだけど鯖との連携とかも気になるとこ。あと操作系。</p>
<ul>
<li><a href="http://www.chromeexperiments.com/">Chrome Experiments</a></li>
<li><a href="https://developer.mozilla.org/ja/Canvas_tutorial">Canvas チュートリアル</a></li>
</ul>
<p>動いているのはJavaScriptなので何もインストールせず、Flashが見れない環境でも動く。しかもHTMLとの愛称はFlashより全然いいのかも。っていうかこれ外はHTMLか。Canvas自体もDOM操作であれこれしてアプリからちょっとしたのまで使えそう。ブログのCMSとかもUIは今までどおりで編集エリアはCanvasでとか。まだ調べてないからテキスト関連どうなってるか知らないけど。</p>
<p>なんかいろいろできそうだけど個人的にCSSももうちょっとがんばって。特に背景指定とか。PNGがまともに使えたら大好きなスケスケサイトを作れるんですが、特定の領域からのリピートとかがものすっごくほしい。それにCSS Variablesはぜひ。Safari Betaにも実装されたことだし。難しくなろうがどうせ定数ぽいようなものだしそれよりはまだまだできないことのほうが多いんでもっといろいろ実装してほしい。</p>
<p>あと今日帰りに電車内でふらふらしてた人に頭突きされました。いきなり顔に手が来るし。さすがに切れかけた。個人的に酔っ払いとガムの音を立てる人が一番不愉快。そういえば埼京線でゲームしてたら注意されてフルボッコってのがあったけど朝の埼京線でゲームって馬鹿？結構電車内ってマナー悪い。おばちゃんの席取りはすごいし。その点副都心線はほんとよかったなー。ってエチカ池袋オープン。帰りにちょっと見てこよーかなとか思ったけど12時すぎに池袋着。</p>


<!-- Begin SexyBookmarks Menu Code -->
<div class="sexy-bookmarks sexy-bookmarks-center">
<ul class="socials">
		<li class="sexy-delicious">
			<a href="http://del.icio.us/post?url=http://www.t2-designing.com/blog/2009/03/27/47/&amp;title=Canvas" rel="nofollow" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="sexy-google">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://www.t2-designing.com/blog/2009/03/27/47/&amp;title=Canvas" rel="nofollow" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a>
		</li>
		<li class="sexy-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.t2-designing.com/blog/2009/03/27/47/&amp;t=Canvas" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="sexy-myspace">
			<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.t2-designing.com/blog/2009/03/27/47/&amp;t=Canvas" rel="nofollow" title="Post this to MySpace">Post this to MySpace</a>
		</li>
		<li class="sexy-twitter">
			<a href="http://twitter.com/home?status=Canvas+-+http://b2l.me/b54p4+(via+@Toyotter)" rel="nofollow" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="sexy-friendfeed">
			<a href="http://www.friendfeed.com/share?title=Canvas&amp;link=http://www.t2-designing.com/blog/2009/03/27/47/" rel="nofollow" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
		<li class="sexy-tumblr">
			<a href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fwww.t2-designing.com%2Fblog%2F2009%2F03%2F27%2F47%2F&amp;t=Canvas" rel="nofollow" title="Share this on Tumblr">Share this on Tumblr</a>
		</li>
		<li class="sexy-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.t2-designing.com/blog/2009/03/27/47/&amp;title=Canvas" rel="nofollow" title="Digg this!">Digg this!</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- End SexyBookmarks Menu Code -->

]]></content:encoded>
			<wfw:commentRss>http://www.t2-designing.com/blog/2009/03/27/47/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.t2-designing.com/blog/2009/03/27/47/" />
	</item>
	</channel>
</rss>
