JavaScriptの最近のブログ記事

なんか暇をみつけちゃjQueryをあたってみてるけど、やっぱヤバいね。

気持ち悪いくらい便利すぎる。もうこれなしじゃ生きられない。かもしれない。

ただ一回jQueryの文脈にのると、そっから条件によっては離脱して、また戻る、みたいな処理の仕方がわからんぺ。

でも、とりあえず適当に書いても動いてくれるとこが素敵。ブラウザ依存も吸収してくれるだろうし、今夜はjQueryを抱きしめながら寝る。

jQueryとか(とりあえず適当に書いてみたScript)

jQueryの基本的なmethodをちょっとあたってみた。

ベンリね。やっぱり。

なんかでもJavaScriptじゃなくてjQueryって感じで、そのうち、ライブラリから始めて、JavaScriptはわかんないけどライブラリならできます。みたいなひとがでてくるんだろうなーとか思った。

いや、別にいいんですけど。でもそうするとなんかHTMLを理解してないWebエンジニアもそうだけど、後々危険な気がしないこともない。

どちらにせよ自分じゃたいしたScriptは書けないので、やっぱもっといろいろ試してみます。

ただ基本は地味でも自分で書いて、「あぁ、これメンドクセェ」とか「ムリ」とかいうのだけにしたいかなとか思う。

基本それほどこった処理をする訳でもないし、簡単なAjax&DOMくらいなら自分で書いたほうが管理が楽だし、ってのがあって、ライブラリを使う場合も、なるべく軽いbytefxとかを使うようにしたりしてきたけれど、やっぱせっかくならもっとおもしろインターフェースをわさわさ入れてみて、もっとアプリケーションっぽくしないと、ユーザビリティって上がんないのかな、とか思いだした。

まあ、スゲー今更感満載ですけど、JavaScriptのことをロクにしらずに、なんかこんなん書いたらこう動くよ、みたいなScriptを書くのがイヤだったのもあって、でもまあなんとなくわかってきた感がなきにしもあらずなので、そろそろいいか、というか、もっとひとのコードを読んで勉強しないと、自分なりのやりかたじゃどうにも処理がニブいような気がしてならない。

しかし、何をつかうべきなんだろうね。やっぱ流行はjQueryなのかしらん。

例のやつです。前から置いてはいたのですが、classが不要なように書き換えました。

CSSの疑似要素:focusに対応したブラウザにはinput[type=text]:focus,textarea:focusで背景色をかえています。

IEは未対応なので、JavaScriptを使い、getElementsByTagNameでinputとtextareaを取得し、それらのlengthでループさせ、type == 'text' ならば event.srcElement.classNameでclassをセットしスタイルを変更しています。

入力欄のハイライト

セルがいっぱいあるときとか、の視認性が向上する例のやつです。

イベントはtrにセットしてあるけど、IEのattachEventでthisを渡すと何もかえってこなかった。なのでevent.srcElementをthisの代わりに使ってみたんだけど、そうしたらevent.srcElementに入ってきたのはtrのchild node(thとtdと空白ノード)。仕方なくparentNodeで一回親ノードに戻ってから処理を継続。

Firefoxでは苦もなく動いたけどIE対応がメンドかった。

ちなみに引数は、tableHover("イベントをセットするテーブルのid","マウスオーバーで変更する色")です。

それにしても最近暇。

マウスオーバーでテーブル行の色を変更するJavaScript

いっこいっこにidふってlabelふってていう時間が無駄なので、Ajaxでできるようにしてみた。

心が死ぬルーチンをすこしでも減らしたい。

チェックボックス・ラジオボタンジェネレーター

JavaScriptとSEOのはなしです。

window.openなんかでリンクをはる時、hrefにjavascript:void(0)や#なんかを入れていると、せっかくのリンクジュースが死にます。なのでhrefには正しいURlを入れて、return falseを返してhrefリンクをブロックするか、JavaScriptの方でhrefを入れ替えましょう。

なんかタイトルが思いついたんで書いてみました。元ネタ「ぼくの地球を守って」です。

たまに自分で書いてみたJavaScriptを再利用する目的でなんも考えずにうpとかしていたら、ディレクトリ構造がスゲー汚くなって吐き気がしてきたのでまとめてみた。

もう前のは消そうかとも思たけど、そうするとリンク切れになるので、どうしようか迷い中。アクセス解析であんまトラフィックなかたら消そうかと思う。

JavaScript { Depository; }

結構前にこんなのをつくってちょ。と言われました。

前につくったのは不完全な上に結局使わなかったのですが、結構大丈夫っぽいのができました。

番目のテキストエリアのバリューを

なんか暇なので作ってみました。

とりあえず進むのは簡単にいったけど、戻るのが大変でした。戻るのと進むのを現在のpositionを比較して分岐させようとしたところ、なぜかうまくいかない。原因は判定の仕方で、positionの値の比較は文字列でされるというところでひっかっかった。なんで比較する時に new Number で数値に変えて比較。するとうまくいったっぽい。Firefoxでしか検証してないけど。

なんとなくアクセシブルっぽいScriptにしてはあるけど、hrefがjavascript:void(0) なので死んでください。その辺はまあ、めんどいので適当です。あと、現在3つある中身の数が加減すると、Script自体を編集しないといけないところはまだ改善の余地ありかと。とりあえずできたのが嬉しいので公開とかしてみます。別に役には立ちませんでけそ。

ボタンで横スクロールするJavaScript

IEよりもSafariが憎い今日この頃、みなさんはいかがお過ごしですか?

ぼくは元気なふりをしています。

そんなわけでSafariでJavaScriptのデバッグをします。以下Appleのサイトより引用

14. SafariでJavaScriptをデバッグするにはどうすればよいのでしょうか?

Safariの「Debug」メニューを使用して、JavaScriptエラーのログを記録できます。「Debug」メニューを表示するには、「ターミナル」ウインドウを開き、次のように入力します。

defaults write com.apple.Safari IncludeDebugMenu 1

Safariを起動し直し、「Debug」メニューの「Log Javascript Exceptions」メニュー項目をチェックします。Safari 1.3以降では、 「Show JavaScript Console」メニュー項目を選択すると、「JavaScript Consol」ウインドウが開いてJavaScript例外が表示されます。バージョン1.3以前のSafariの場合は、JavaScript例外は「コンソール」アプリケーション(/アプリケーション/ユーティリティ/コンソール)に表示されます。

だそうです。

SafariのDOM対応が...。

FirefoxでもIEでも動くのに、サファーリ様だけうごかねー!

ほいだら調べてなんとか動くようにはなった。どうやらSafariはgetElementdByTagNameしたオブジェクトに対してgetElementsByTagNameをするとノードがとれないらしい。なので一度取得したタグのなかでタグをとるためにはChildNodesで取得せにゃいかんらしい。もちろん改行は空白のノードとして処理するために改行も考えて配列の番号を指定。めんどうくさいブラウザの振り分けを強要される。CSSはもさもさやってハックほぼなしでブラウザ依存を吸収する方法を考えたけど、JavaScriptはそうもいかない。

嗚呼めんどうくさい。でも無視はできないSafariのシェア。しかしgetAttributeがうまいかんとですよ。

ああ、なんでまたApple様はSafariなんぞをつくってくれたのか、デフォルトのブラウザ、Firefoxでよくね。と思た夜に。