7cc@はてなブログ

JavaScriptとかとか

JavaScript

多次元配列の再帰の記述

記述の方法が、foriで書くと1通りだが、イテレートメソッドだと2通りある。 どちらでもよいのだけれど、混ざるので整理。 foriとイテレートはすることが少し違うが、それは置いておく foriでの再帰。(コード1) function fori(arr, fn) { for (var i=0, l=a…

img.width, img.height と img.setAttribute("width"/ "height"

JSからサイズを設定する場合 OK img.width = "100" img.setAttribute("width", "100") img.setAttribute("width", "100px") NG img.width = "100px" IEとFirefoxで試して両方こうだった。罠くさい・・・ といっても、本来<image>のwidth, heightに入れられるのは数</image>…

ネイティブメソッドを判別する互換性

setTimeout, setIntervalを乗っ取って爆速にする - 素人がプログラミングを勉強…を踏まえて "prototype" in Arrayはすべてtrue "prototype" in Array.prototype.pushはすべてfalse "prototype" in function(){}はすべてtrue "prototype" in {native dom func…

(JavaScriptで使われる)数学の英語 数字編

JSで使われる数学に関した英語の和訳。 digit(s) 0-9の数字(0は除かれることも), notation 表記, integer 整数, decimal 小数 / 10進数, fixed-point number 固定小数点数, floating-point number 浮動小数点数, precision 精度

IEで「オブジェクトを指定してください」のエラー

言い換えると分かった。 「オブジェクトを指定してください」 「オブジェクトが指定されていないよ」 「オブジェクトが無いよ」 「オブジェクトがundefinedだよ」 原因 3通りあるようだ 原因1 古いIEと文字コード IEの謎エラー対策(1) 「オブジェクトを指定…

objectの中のobjectを書き換え不可にする

JavaScriptのオブジェクトを完全に書き換えできないようにするには、`Object.deepFreeze`と`Object.defineProperty`を併用する。

element.ownerDocument.defaultView.frameElement

複数のwindowを扱う場合。iframeとwindow,documentのトラバーサルについて。関連ワードownerDocument.defaultView, contentDocument.defaultView, window.frameElement

JavaScriptでグローバル変数になるものの、優先順位

要素のIDや、iframeのname属性もグローバル変数になる。

You might not need jQuery は間違いだらけ

すこし話題になっている(いた?)ようだが、jQueryを使ったことの無い私が気付いただけで間違いが10個あった。 サイトはここ GitHubにソースがある 見つけた間違い 60個あるうち10個 つまり全体の1/6, 16.6% 内容についてはレポジトリ参照(そこまでする利点…

デバッグ時だけconsole出力したい

var debug = true if ( !window.console || !Function.bind ) { debug = false } var cl = debug? Function.prototype.bind.call(console.log, console) : function(){} usage cl(1, 2) console.log.applyだと出力箇所が関数定義場所になってしまうのでbind…

document.activeElement

focusのある要素を返す。 リンク、tabindex、IEでのdivなど互換性についても説明。

ownerDocument, document

JavaScriptのownerDocumentとは。 いつ使うのか。

element.onresize

まだ使えない。 element.addEventListner("resize", ... について

Google ChromeのCSSOMは相変わらず間違っている

追記 ver. 33.0.1750.117 m でCSSOMの実装が以前のバージョンに戻った。今は下記のエラーは表示されない しかしこの実装は間違っているので、将来的には変更があると思われる。 以下は追記以前の情報

IE開発者ツールの不具合 / デバッグ時の注意点

環境は全てIE9。10+では不明 IE9 console 開発者ツールを開いていないと、そこで止まる location.hash ローカルファイルだと、戻る/進むでロケーションバーに表示されなくなる。実際にはある。 非ascii文字のID + エンコードされたページ内リンク の :target…

addEventListenerのhandleEventについて

オブジェクト(指向)で使うようです。 syntax プロパティにhandleEventがあるオブジェクトを第二引数に渡す。 handleEventの値はfunction // 変数に入れて var foo = { v: 1, handleEvent: function(){ alert(this.v) } } document.addEventListener("click",…

xhr GETのキャッシュ

XMLHttpRequest GET のキャッシュについて ・・・なのだけれど、xhrだけではなく、キャッシュ全般にいえる話だった。 キャッシュの仕組みについては以下のリンク参照。 事例に学ぶWebシステム開発のワンポイント(12):ブラウザキャッシュでパフォーマンス…

event handler(2) onClick属性とonclickプロパティ

イベントハンドラについて。HTML属性とscriptでonclickを設定する時の違いについて。

event handler(1) 簡単なイベントハンドラのメモ

仕様書 Events - whatwg を読んだメモ GlobalEventHandlersとかWindowEventHandlersについて 普通の説明はいくつものサイトでされているので省略 DOM event handlers - MDN

a.download + data:text/plain or Blob でテキストを保存したら改行がLFになった

一行ならCRLF, 改行があるとLFで保存されて困った。 CRLFなので当然環境はWindows

FirefoxでGistやgoogle-code-prettifyをコピーしたときのインデントを正常化する

Gistやgoogle-code-prettifyをコピーした時のインデントを見た通りに直す

選択中文字列の取得 ブラウザによる違い

getSelection.toString() と getSelection.getRangeAt(0).toString() の違い。JSで選択状態にある文字を調べる方法の互換性について。

Quirks Mode (互換モード) - document.compatMode

document.compatModeで得られるレンダリングモード(描画モード)とJavaScriptについて。主にQuirksモードでの違いについて。

関数式と関数宣言の優先順位 JavaScript

基礎事項 2つの違いについての説明は最低限のみします 構文 関数宣言(declaration) function x() {} 関数式(expression) var x = function(){} 本当は違うけれど・・・詳細はFunction コンストラクタか関数宣言か関数式か "関数宣言は同時にその関数名と同じ…

attachEventとonclickのthis

今更IE8情報。

$(_window).animate

$(html, body).animateの代わり $(window).animate じゃなく $(_window).animateなんです...

リンクの点線を消す, ボタンの点線を消すCSS

概要 a, a>img をクリックした際の点線を消す。 button, input[type=button], input[type=submit]の点線の消し方もついでに。 つまり、フォーカスのある要素の点線の消し方について キーワード hidefocus, outline, ::-moz-focus-inner demo no dot for link…

JavaScriptでヒアドキュメントもどき 改行を扱う

追記 ES6から使えるようになった、Template stringsを使おう。 Template stringsdeveloper.mozilla.org var str = ` line1 2 3 ` 以下は古い情報。

【IE8でも】無名関数をremoveEventLitener

IE9以降(=addEventListenerが使える)ならhandleEventで出来るので不要。 IE8も含めた場合。 名前をつければいいだけなので無名関数をremoveEventLitenerしたい時なんてあるのか疑問ですが。

element.addEvent の順で書く その2

addEventListenerとattachEventを両立するよくある話。 前回書いたのがいまいちに思えるので 理想 なるべくaddEventListenerと同じ順で書きたい(けどaddEventListenerってそもそも長い!) 複数の要素相手にforループもいちいち面倒なので省略したい 複数のイ…

ソースコードをワンクリックで選択

preタグの中を全選択したい時がある人向け。 *IE9以上 追記: GoogleChrome(webkit)ではボタンのテキストも選択されてしまうので修正 @ 2013/07/24 これの利点 はてなに限ればGistなどの貼り付けで良いが、userscriptとして使えばMDNなど他のサイトでも使え…

GoogleChromeでdispatchEventが思い通りに動かない JavaScript

document.createEventで作ったイベントがGoogleChromeだけ異なる動きをする。 対処 createEventは実行する関数の中で作るようにする。 関数の外で作ると GChrome - 動かない(一回だけ動く?) IE, Firefox - 動く 確認コード documentをどこでもいいのでク…

this === window // false JS

thisがwindowにならない時 Firefoxで開発者ツール使用時 スクラッチパッド、コンソールなどを使用しているとfalseになる。 IE, GChromeではtrueになる strict mode時 undefinedになる

pushStateは同じ履歴を追加する

pjax サンプル で検索するといくつかpushStateを利用したページが出てきますが、どれもその対策をしていない。。。 大抵リンククリックでpushStateしていますが、同じリンクを続けてクリックするとその分だけ同じ履歴が追加されます。意図していないなら直す…

論理演算子でどちらもfalse扱いになる場合は、最後のものが返る JavaScript

var a = 0 || false var b = false || 0 alert(a) // false alert(b) // 0 これ自体はそれほど重要ではないと思われるが、例えば 0.a = "a" はエラーになるが、 false.a = "a" はエラーにならない

スムーズスクロールの「戻る」を正常化する JavaScript

1.history.pushStateが使える場合 それで解決。IE10以上のすべてで使える。 *移動後に location.replace("#" + target.id) でハッシュを活性化?しないとtarget疑似クラスが有効にならないのでそれだけ注意。 location.hash = target.idだとGChromeで:target…

scrollTopMaxを取得する JavaScript

element.scrollTopMaxは現在Firefoxだけにあるプロパティで、要素の最大スクロール可能量を返す。読み取り専用。window.scrollMaxYのelement版。 これは他のブラウザなら element.scrollHeight - element.clientHeight で求められると思っていたが違った。 …

clearInterval(timer) のtimerは数字

var timer = setInterval(fn, 100)のtimerは何なのかと思ったら数字だった。この数字はsetInterval/setTimeoutが実行されるとインクリメントされ、スコープに関わらずwindowで共通。 以下のコードで確認できる。 (function(){ var timer = setTimeout(functi…

Firefox 開発者ツールバーのJavaScript整形機能

Firefoxには標準でjs-beautifyと同じ整形機能がついている。 F2で開発者ツールバーを開き、「jsb」と入力すればあとは案内に従うだけ。 特徴として、オンライン上のファイルでも、ローカルファイルでもURL/パスを指定すればで整形できることがある。 使い方 …

配列のすべてにアクセスする記述いろいろ JavaScript

document.getElementsByTagNameとか配列(風)のもの全てになにかしたい時にi

setTimeout(fn, 1000 / 60) の 1000/60 は16として処理される

requestAnimationFrameの代わりに書かれていることがありますが、単純に16と書いたら良いと思います。 JavaScriptでぴったりの時間で処理はできないのでこだわるポイントではありませんが(';') ちなみにscrollTo(0, 1.9)だと小数点切り下げでpageYOffsetは1…

スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意

html, bodyはページサイズ・ウィンドウサイズを決定する要素です。 これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません。 スタイル…

getElement, querySelectorがないときの戻り値

HTMLCollection, NodeListは該当する要素がなくても常に戻り値があるので注意がいる null (ID) document.getElementById("hoge") document.querySelector("#hoge") HTMLCollection (querySelectorAll以外の複数) document.links, forms, etc document.getEle…

ページの表示に関するイベント : JavaScript

ページを開いたとき document readystatechange (interractive) document DOMContentLoaded ここで構築完了 document readystatechange (complete) window load window pageshow ページを閉じたとき window beforeunload これ以降は閉じた後 window pagehide…

ブラウザの戻ると進むを無理やり判別する

かなり無理やり pushStateが使えない環境での話 スムーズスクロールの戻る/進むを正常化するだけなら スムーズスクロールについて無駄に考えてみたメモ のTest4, Test5を参照してください。ここに書いてある方法は無理やりです。

hashの追加について location.hash history.pushState

popstateも起きるので追加しないと・・・ location.hashでハッシュを付与したとき onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの4パターン 現在のハッシュと代入するハッシュが 異なる … ハッシュが変わり(onhashchange)、履歴が追加…

JavaScript イージング easing

スムーズスクロールにイージング処理をつけたかったので調べた。 ease outとかease inとか。 読み込むファイルが増えるのは面倒なのでライブラリは使用しない。位置の移動や戻す処理を入れるならライブラリを使ったほうがよさそうだけど。 コード // 1 イー…

addEventの面白い書き方 element.addEventの順で書く

なんだかいまいちに思えるので書き直した http://7cc.hatenadiary.jp/entry/addEvent2

IE8ではwindowにkeypressやonclickが設定できない JS

keydownやclickはdocument以下のノード・要素に設定する。 追記: イベントのバブリングがわかる人向けの説明。 IE8まではイベントのバブリングがdocumentまでなので、windowに設定してもイベントがキャッチされません。 input.parentNode.parentNode...とpa…