めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

JavaScript

アニメーション(transition)が終わったら次のアニメーションを行う

CSS3のアニメーション(transition)が終わったら、次のアニメーションをさせたい、と思いました。そこで、jsDeferredを使ってみました。jsDeferredは、id:cho45さん作のライブラリです。作ってみたんですが、何かもっと良い書き方がありそう。いくつかのア…

JavaScriptのObserver

デザインパターンで「Observer」があるんですけれど...JavaScriptで実装するとどうなるのだろう、と思いまして書いてみました。対象となるブラウザーは、 Firefox 6.0(MaxOS X 10.6) Safari 5.0(MaxOS X 10.6) 一応実装として monsterオブジェクトが、li…

YUI2( Yahoo! User Interface Library)のCalendar(カレンダー)(2)

もしかして...と思って、ざっくり期間設定のフォームとかできるんじゃない?と思って調べてみたら、ざっくり作れました。 forcusの制御が出来れば、期間設定のフォーム(GoogleAnalytics風)が出来そうな感じです。YUIのカレンダーってすごいなあ。 ソース(…

YUI2( Yahoo! User Interface Library)のCalendar(カレンダー)(1)

JavaScriptのライブラリーを今年になって、色々と試している気がします。 2年ぐらい前に、やっておけよ、自分と思ったり、思わなかったり。 それはそれとして、YUI2( Yahoo! User Interface Library)を試してみました(最新はYUI3です)。YUI2のCalendar(…

jQueryとPrototype.jsを併用/共存してみる

普段、お仕事ではPrototype.jsばかりを利用しています。だいたい事足りるからです。JavaScriptを強化/改造(?)して、使うあたりはプログラマー好みかもしれません。Prototype.jsは、ガンダムで例えるならGアーマーです。さらにいうなら、GP03がデンドロビ…

Singletonがないと困る時がある

以前に、カレンダーのJavaScriptを作って実際に使ってみて思ったこと。 Singltonがないと困る時がある、ということ。 最速インターフェース研究会 :: JavaScriptのデザインパターン - Singleton ここら辺を見ておこうと思います

promptを知らなかった

JavaScriptにprompt()というのがあったんですね。 alert()の用な感じで、入力を促すことができるのかあ。知らなかった。これで、ブックマークレットで選択できるテキストを表示できます。

JavaScriptで要素の高さを揃える(4)

改めて考えれば、left,center,rightというclassだけだったら、どうしたらいいだろう? と考えてみたのが、こちら。あまり良くない方法だけれど(3つのカラムという限定だから)、どうだろう。 ソース <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </meta></head></html>

JavaScriptで要素の高さを揃える(3)

指摘されてみて、なるほど。複数のclassを指定した場合について調べてみました。 IE7、FF3については動きました。手元に、IE6がないのでわかりませんが、どうでしょう? ソース <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </meta></head></html>

JavaScriptで要素の高さを揃える(2)

JavaScriptで要素の高さを揃えるというエントリーを書きました。 JavaScriptで要素の高さを揃える - めも帖 使い方を全然書いていませんでした。 概要 JavaScriptは最後に書いています JavaScriptで、idがtargetIdという要素の中にあるcolumというclassが指…

JavaScriptで要素の高さを揃える

要素の高さを揃える HTML <div id="targetId"> <div class="colum"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</p></div></div>…

JavaScriptのsort()は文字列で比較する?

JavaScriptのsort()は文字列で比較する? a = [ 0, 1, 2, 10, 12, 14, 4, 6, 2 ]; alert(a); a = a.sort(); alert(a); // 実行結果 0, 1, 10, 12, 14, 2, 2, 4, 6 あれ?思った動きじゃなかった。文字列で比較してくれるのね...。 調べると、sort()にfunctio…

JavaScriptでカレンダー(7)

JavaScriptでカレンダーを作ってみて自分で使う分には問題なかったのですが、いろいろと気になったことが出てきました 2つ以上のカレンダーの制御 期間指定 祝日の対応 とくに2つ以上のカレンダーを同時に表示した場合の制御について、考えたいところです。 …

指定したelementのchildNodesを削除する

今まであれこれやってきたのだけれど、これが一番シンプルのような気がします。 Prototype.js必須だけれど、シンプルになるので便利です。 for(var i=0; i<$('calendar').childNodes.length; i++){ Element.remove($('calendar').childNodes[i]); }

JavaScriptのカレンダー(5)

曜日を表示していなかった。これで、一通りは実装したかな。 IE6で試してみたら、動きました(安心)。 Date.prototype.last_day_of_month = function() { var lastday = new Array(31,28,31,30,31,30,31,31,30,31,30,31); var d = new Date( this.getYear()…

JavaScriptのカレンダー(4)

IE6〜 IEの癖に!って思ったこと そんなわけで、tbodyの要素を入れて対応。 ソース Date.prototype.last_day_of_month = function() { var lastday = new Array(31,28,31,30,31,30,31,31,30,31,30,31); var d = new Date( this.getYear(), this.getMonth(), …

JavaScriptのカレンダー(3)

setMonth()の不思議な動き なぜか、setDate()とかしておかないと、setMonthが正常に動かない...。 Javascript setMonthの変な仕様: 使えないプログラマー JavaScriptで月の最終日 2月以外は固定なので2月だけ処理を入れて、Dateオブジェクトを拡張。 課題 HT…

JavaScriptのDateオブジェクト

JavaScriptのDateオブジェクトについてきちんと覚えよう!と思った今日この頃。 functionが結構多いのです。 挙動も、ブラウザーごとで違うのかなあ。

JavaScriptのカレンダー(2)

prototype.jsを使ってclass化を始めました。気づいたのだけれど、1月の最終日の取得がおかしい気がする。調べてみようと思います。 あとは、カレンダーを管理するクラスと、日付をクリックされたときのイベントについてどうするか?(カレンダーだけじゃない…

JavaScriptのカレンダー(1)

カレンダー。とりあえず、書いてみた。last_day_of_monthは、id:clonedさんのを。 JavaScriptで月の最終日を取得する - cloned.log Date.prototype.last_day_of_month = function() { var d = new Date( this.getYear(), this.getMonth(), this.getDate()); …

JavaScriptのargumentsを使ったことがまだない

う〜ん、ああ〜、と調べて「arguments」を思い出した。 JavaScriptのargumentsを使ったことがまだないので、とりあえずメモ。 JavaScript講座 : 関数のパラメータ

JavaScriptに標準ではないのだった(たぶん)

JavaScriptのsortByって...と思っていて気付きました。 sortByは、prototype.jsが提供するメソッド。 JavaScriptに標準ではないのだった(たぶん)。

JavaScriptで画面上部に自動的にスクロール

JavaScriptで画面上部に自動的にスクロールさせる必要が出てきたので、調べてみて実装。 document.body.scrollTop = - 100; document.documentElement.scrollTop = - 100; scrollTopなんていう属性があるんですね。知らないことが多いなあ、ほんとに。 使う…

JavaScriptの時間表示について

普通に知らなかった JavaScript/時間/現在日時を表示する(1) - TAG index Webサイト こっちばっかりでした JavaScript/時間/現在日時を表示する(2) - TAG index Webサイト 時間表示って、意外と使うけれど覚えられないことの1つです。 なんでかなあ?一…

JavaScriptとActionScriptの連携について

JavaScriptとActionScriptの連携については、 JS AS / Shibuya.js in Kyoto - 2nd life が詳しいです。 これを読んでいくと、Ajax!Ajax!って騒ぐ時代じゃない気がする(なんとなくは思っていたけれど)

JavaScriptとFlashの連携(2)

Flash側の外部通信用APIは「ExternalInterface」というクラスが担当する throw Life - JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル IE throw Life - JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari テ…

JavaScriptとFlashの連携

ページが見つかりませんでした | thebadtiming | ページ 958 とらいでんと日記 Kazuho@Cybozu Labs: JavaScript から Flash の便利な機能を使う方法 oct inaodu

イベントを監視する

Observer(オブザーバー)パターンと呼ばれているらしい Observer パターン - Wikipedia 17.Observer パターン | TECHSCORE(テックスコア) それにしても、きっちりここら辺をやっぱり勉強しておかないと、基礎力が少なくてダメだ。

Prototype.BrowserFeatures.XPath

google先生に聞くと、答えがありました 第1回 Prototypeライブラリ(1~197行目):prototype.jsを読み解く|gihyo.jp … 技術評論社 Prototype.BrowserFeatures.XPathでは,document.evaluate関数が存在するかどうかを確認しています。これはDOM 3 XPathで定…

this.transport.status

this.transport.statusは、Prototype.JS独自のものらしい。 XMLHttpRequestオブジェクト「readyState」 というプロパティを見ているらしい 参考 第4回 Prototypeライブラリ(932~1289行目):prototype.jsを読み解く|gihyo.jp … 技術評論社 楽天が運営する…