<?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>memo.393 &#187; javascript</title>
	<atom:link href="http://memo.393.bz/archives/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://memo.393.bz</link>
	<description>個人的メモです。間違いなどありましたらご指摘ください。。。</description>
	<lastBuildDate>Sun, 27 Nov 2011 15:27:41 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[CSS3]PIE.htcとjQueryの共存でPIE.htcが利かない場合。</title>
		<link>http://memo.393.bz/archives/1459</link>
		<comments>http://memo.393.bz/archives/1459#comments</comments>
		<pubDate>Mon, 24 Jan 2011 14:39:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaSpript]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://memo.393.bz/?p=1459</guid>
		<description><![CDATA[残念なIE様にCSS3っぽく対応してくれるライブラリPIE.htc。 PIE.htcとjQueryを共存した場合に、PIE.htcが利かないときがあった。 原因は読み込みの順番に関係がありそうだった。 これだとだめで、  [...]]]></description>
			<content:encoded><![CDATA[<p>残念なIE様にCSS3っぽく対応してくれるライブラリPIE.htc。<br />
PIE.htcとjQueryを共存した場合に、PIE.htcが利かないときがあった。<br />
原因は読み込みの順番に関係がありそうだった。</p>
<p>これだとだめで、</p>
<pre name="code" class="html">

&lt;script type=&#039;text/javascript&#039; src=&#039;commons/scripts/jquery.js&#039;&gt;&lt;/script&gt;
&lt;!--PIE.htcを使ってるCSS--&gt;
&lt;link href=&quot;commons/styles/main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
</pre>
<p>（jQueryのプラグインは機能すれどCSS3っぽい効果はきえる）</p>
<p>これならよかった、が・・・・</p>
<pre name="code" class="html">

&lt;!--PIE.htcを使ってるCSS--&gt;
&lt;link href=&quot;commons/styles/main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
&lt;script type=&#039;text/javascript&#039; src=&#039;commons/scripts/jquery.js&#039;&gt;&lt;/script&gt;
</pre>
<p>CSS3は機能したけど、こんどはjQueryのプラグイン（jquery.maximage）が機能せず。。<br />
むむむ</p>
]]></content:encoded>
			<wfw:commentRss>http://memo.393.bz/archives/1459/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[JS]言語として基礎から復習できるリンクメモ</title>
		<link>http://memo.393.bz/archives/1447</link>
		<comments>http://memo.393.bz/archives/1447#comments</comments>
		<pubDate>Mon, 24 Jan 2011 06:59:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaSpript]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://memo.393.bz/?p=1447</guid>
		<description><![CDATA[言語体系的にJavascriptを勉強するためのメモ。 ITpro：DOMから始めるJavaScriptモダン・スクリプティング ・DOMの構造を基礎からおさらい。 →第6回のaddEventListener()使ったイ [...]]]></description>
			<content:encoded><![CDATA[<p>言語体系的にJavascriptを勉強するためのメモ。</p>
<p><a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20070626/275913/?ST=develop">ITpro：DOMから始めるJavaScriptモダン・スクリプティング</a><br />
・DOMの構造を基礎からおさらい。<br />
→第6回のaddEventListener()使ったイベント定義で、AS3的に書けそう。<br />
→Objectを利用したクラスの考え方</p>
<p><a href="http://d.hatena.ne.jp/amachang/20060316/1142508449">IT戦記：Prototype.js を使った JavaScript OOP 講座 #01</a><br />
・クラスの考え方をもう少し掘り下げた説明<br />
→prototype.jsを使わない段階での例が参考になる。</p>
<p><a href="http://hisasann.com/housetect/2008/06/jquery_1.html">HouseTect, JavaScript Blog：jQueryのクラス定義はトリッキーでかっこいいよ</a><br />
・jQueryでのクラス定義方法の解説<br />
→ひとつ前でprototype.jsの仕組みを把握した上で読むと比較しやすい</p>
<p><a href="http://www.scollabo.com/banban/jsindex/index.html">JavaScript Index メソッド、プロパティ、関数・リファレンス</a><br />
・JavascriptのAPI一覧</p>
]]></content:encoded>
			<wfw:commentRss>http://memo.393.bz/archives/1447/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[CSS][JS]画像をブラウザサイズへのリサイズ処理するの際の注意</title>
		<link>http://memo.393.bz/archives/1441</link>
		<comments>http://memo.393.bz/archives/1441#comments</comments>
		<pubDate>Sun, 23 Jan 2011 21:57:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaSpript]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://memo.393.bz/?p=1441</guid>
		<description><![CDATA[JSで画像をブラウザサイズにフィットさせるときの注意。 imgタグのコンテナとなるブロック要素を、position:fixedとしておかないとSafariで横幅がフィットしないみたい。(iPhoneも） もしくはhtml [...]]]></description>
			<content:encoded><![CDATA[<p>JSで画像をブラウザサイズにフィットさせるときの注意。<br />
imgタグのコンテナとなるブロック要素を、position:fixedとしておかないとSafariで横幅がフィットしないみたい。(iPhoneも）<br />
もしくはhtml要素にoverflow:hiddenでもよいみたい。</p>
<p>※position:fixedとするとiPhone、iPadでいろいろ不都合でるみたい。<br />
overflow:hiddenの方が安全かな。</p>
]]></content:encoded>
			<wfw:commentRss>http://memo.393.bz/archives/1441/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS][JS]Flashでブラウザ判定</title>
		<link>http://memo.393.bz/archives/576</link>
		<comments>http://memo.393.bz/archives/576#comments</comments>
		<pubDate>Mon, 11 May 2009 14:08:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://memo.393.bz/?p=576</guid>
		<description><![CDATA[もともとFlashで用意されたクラスでは、OSとかFlashのバージョンしか判定できない。 そこでえらい人が作られたライブラリ。 JSProxy.as JSとの連携のライブラリで色々できるみたい。 とりあえずバージョン判 [...]]]></description>
			<content:encoded><![CDATA[<p>もともとFlashで用意されたクラスでは、OSとかFlashのバージョンしか判定できない。</p>
<p>そこでえらい人が作られたライブラリ。<br />
<a href="http://github.com/hotchpotch/as3rails2u/blob/master/src/com/rails2u/bridge/JSProxy.as">JSProxy.as</a></p>
<p>JSとの連携のライブラリで色々できるみたい。<br />
とりあえずバージョン判定の使い方は以下の通り</p>
<pre name="code" class="as">

import com.rails2u.bridge.JSProxy;
import com.rails2u.bridge.JSProxy;
var browser:String = JSProxy.proxy.navigator.$userAgent;
var tf:TextField = new TextField();
tf.text =  browser;
tf.wordWrap=  true;
tf.width = 200;
addChild(tf);
</pre>
<p>一点注意は、ブラウザ判定だからムービープレビューじゃ機能しない。<br />
パブリッシュして初めて判定。（当たり前か）</p>
<p>参考サイト：<a href="http://www.trick7.com/quiz/?p=6">trick7 quiz</a></p>
]]></content:encoded>
			<wfw:commentRss>http://memo.393.bz/archives/576/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS][JS]FLASHで「このページのトップに戻る」ボタンの設定</title>
		<link>http://memo.393.bz/archives/567</link>
		<comments>http://memo.393.bz/archives/567#comments</comments>
		<pubDate>Thu, 07 May 2009 14:23:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[JavaSpript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://memo.393.bz/?p=567</guid>
		<description><![CDATA[FLASHでブラウザのスクロールバーを最上部に戻す方法で、最初出来たと思いきや不完全だったのでメモ。 基本設定は以下の通り。 ステージサイズを500×1000くらいにしておく インスタンス名：_mcのムービークリップをス [...]]]></description>
			<content:encoded><![CDATA[<p>FLASHでブラウザのスクロールバーを最上部に戻す方法で、最初出来たと思いきや不完全だったのでメモ。</p>
<p>基本設定は以下の通り。<br />
ステージサイズを500×1000くらいにしておく<br />
インスタンス名：_mcのムービークリップをステージの下の方に配置。</p>
<p>まず最初のイマイチアプローチから<br />
以下フレームアクション</p>
<pre name="code" class="as">

//AS：フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = &quot;リロードしてないよ&quot;;　　　　
	navigateToURL(new  URLRequest(&quot;#&quot;,&quot;_self&quot;));
}
</pre>
<p>これだけで出来ました。<br />
ジャンプ先を#にするとブラウザリロードせずにページの先頭にジャンプできました。<br />
先頭にはリロードしてないよの文字が表示されます。</p>
<p>で、これでいいや、と思いきや・・・<br />
winのSafari3ではブラウザリロードしてしまいテキストが表示されません。<br />
WINのIE6,7、FF3はリロードされなかったんですがね。。。<br />
(HTMLの解釈的にはSafariの方が正しいっぽいような気がしますが)</p>
<p>というわけで別のアプローチ。<br />
jsでスクロールバーを制御する方法。</p>
<p>js自体のソースはこちらの<a href="http://web-graphics.com/mtarchive/001659.php">ブログ</a>を参考にしました。<br />
※イージングでゆっくりページのトップに戻るような処理のjsです。</p>
<pre name="code" class="js">

//JS：HTMLに埋め込むか、jsファイルとしてhtmlで読み込むか
function backToTop() {
    var x1 = x2 = x3 = 0;
    var y1 = y2 = y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }

    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }

    x3 = window.scrollX || 0;
    y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));

    if (x &gt; 0 || y &gt; 0) {
        window.setTimeout(&quot;backToTop()&quot;, 25);
    }
}
</pre>
<p>上記関数をhtmlに仕込んでおいて、Flash側には以下のように設定</p>
<pre name="code" class="as">

//AS：フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数名
var callJasFunction:String = &quot;backToTop&quot;;

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = &quot;リロードしてないよ&quot;;
	ExternalInterface.call(callJasFunction)
}
</pre>
<p>これでOKなのですが、Htmlにjs仕込むのが面倒くさい。<br />
できることならFLASHだけで完結できないか、と。<br />
と思ったら、こんな書き方でもFLASH上でJSを実行できるらしい。</p>
<pre name="code" class="as">

//AS：フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数
var callJasFunction:String = &quot;function backToTop() {var x1 = x2 = x3 = 0;var y1 = y2 = y3 = 0;if (document.documentElement) {x1 = document.documentElement.scrollLeft || 0;y1 = document.documentElement.scrollTop || 0;}if (document.body) {x2 = document.body.scrollLeft || 0;y2 = document.body.scrollTop || 0;}x3 = window.scrollX || 0;y3 = window.scrollY || 0;var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));if (x &gt; 0 || y &gt; 0) {window.setTimeout(&#039;backToTop()&#039;, 25);}}&quot;;

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = &quot;リロードしてないよ&quot;;
	ExternalInterface.call(callJasFunction)
}
</pre>
<p>ようは、関数名のところに関数全部書いちゃってもOKみたい。<br />
これなら、Html変更しなくていいから楽チンだ！<br />
と思いきや、これだと不具合ありました・・・</p>
<p>jsの再帰処理的な部分が実行されず、最初の一回しか実行されてないっぽい。<br />
↓ここの部分</p>
<pre name="code" class="js">

//上述したJSの一部を抜粋
if (x &gt; 0 || y &gt; 0) {
    window.setTimeout(&quot;backToTop()&quot;, 25);
}
</pre>
<p>でも最初の一回は実行されるので、一回でトップに戻るようなjsなら問題なくページの頭だしは可能。<br />
jsをこれだけにすれば、とりあえずイージングなしの頭だしは可能でした。</p>
<pre name="code" class="as">

//AS：フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数
var callJasFunction:String = &quot;function backToTop() {window.scrollTo(0, 0);}&quot;;

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = &quot;リロードしてないよ&quot;;
	ExternalInterface.call(callJasFunction)
}
</pre>
<p>※2009/5/12追記</p>
<p>以下の書き方で再帰処理も可能でした。<br />
document.insertScriptなんてものを使えばよいのだね。<br />
JSよくわかんね。</p>
<pre name="code" class="as">

_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数名
var callJasFunction:String = &quot;document.insertScript = function(){ backToTop = function() {var x1 = x2 = x3 = 0;var y1 = y2 = y3 = 0;if (document.documentElement) {x1 = document.documentElement.scrollLeft || 0;y1 = document.documentElement.scrollTop || 0;}if (document.body) {x2 = document.body.scrollLeft || 0;y2 = document.body.scrollTop || 0;}x3 = window.scrollX || 0;y3 = window.scrollY || 0;var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));if (x &gt; 0 || y &gt; 0) {window.setTimeout(&#039;backToTop()&#039;, 25);}}}&quot;;
var method = &quot; backToTop&quot;;
//上記関数を読み込み（この段階では、関数backToTopは実行されないみたい）
ExternalInterface.call(callJasFunction)
// JavaScriptの実行
function xClick (e):void {
//ここで初めて実行されるみたい。
ExternalInterface.call(&quot;backToTop&quot;)
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://memo.393.bz/archives/567/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

