タグ

javascriptとJavaScriptに関するMotionBrosのブックマーク (106)

  • prototype.jsの開発メモとGecko DOM ReferenceのHTMLヘルプ

    未だにちょくちょくみてしまうprototype.jsの簡単なリファレンスであるDeveloper Notes for prototype.jsの日語版とThe Document Object Model in Mozillaで配布されているGecko DOM ReferenceのZIP version (古い奴)をHTMLヘルプにしてみた。HTMLヘルプはちょっと作ってみちゃったりすると、HDD上にあるありとあらゆるHTMLのドキュメントをHTMLヘルプにしたい欲求に駆られてしまう・・・のは僕だけですか、そうですか。 prototype.jsの開発メモ Gecko DOM Reference prototype.jsの開発メモの方はHTMLに手を入れて、メソッドやプロパティにidを振り、キーワードでジャンプできるようにした。HTMLヘルプ向けにCSSもちょっと調整。チェックしきれてない説

    prototype.jsの開発メモとGecko DOM ReferenceのHTMLヘルプ
    MotionBros
    MotionBros 2006/09/14
    HTML ヘルプ版
  • prototype.js v1.5.0 の使い方

    それは何? prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス

  • Enjoy×Study - JavaScriptを書き始めるとき

    JavaScriptを書き始めるとき、いきなり*.jsやHTMLに書いたりするのではなく、大抵下記に試しに書いて実行してみます。 JavaScript Development Environment JavaScript Shell Web Development Bookmarklets 上記2つのブックマークレット版 JavaScript Shell は、補完機能なんかもあって高機能ですが、IE、Operaだとどうもうまく動きません。 JavaScript Development Environment は、ブックマークレット版じゃないほうはIE、Operaでも動くので、どちらかというとこっち使うときの方が多いです。(Operaでのエラー表示が出来てないみたいだけども…) ブラウザ上で簡単に試せるってのはすばらしいですね。 で、その後に*.jsやHTMLに書いて、後はFireBug使い

    Enjoy×Study - JavaScriptを書き始めるとき
    MotionBros
    MotionBros 2006/09/03
    開発環境
  • CSSファイルを保存すると同時にブラウザをリロード

    自動リロードで開発をアジャイルにするたったひとつの方法!や萌ディタで保存と同時にSafariをリロードするデモと似たようなものをWSH with JScriptと秀丸マクロで泥臭く実現してみようとかいう話。やろうと思えばいろんな環境で実現できそうてなもんだ。 ブラウザのリロードは魔法のメソッドSendKeyでF5を送ってやれば良し。ただ、SendKeyはアクティブなウィンドウにしか効果が無いので、 CSSファイルを保存 ブラウザをアクティブに F5をSendKey エディタをアクティブに としてやる必要がある。エディタをアクティブにするのはPIDさえ知ってればJScriptでいけるけど、調べるのはちょっと面倒。しかしながらほとんどのエディタは「既に開いているファイルを開こうとすると、既にそのファイルを開いているウィンドウ(とかタブ)を最前面にする」という動作をするので、保存したCSSファイ

    CSSファイルを保存すると同時にブラウザをリロード
    MotionBros
    MotionBros 2006/09/02
    秀丸でファイル保存時になにかさせるなら…
  • JavaScript ミニライブラリ

    JavaScript ミニライブラリ ちょっと前から「なくても不便じゃないけど、あったらちょっと便利かもね」っていう JavaScript を書いたりして発表していましたが、一覧とか作ってないからどんなのがあるのかわかりにくかったのでまとめてみました。 onsubmit で disable 以外のスクリプトは全てパブリックドメインとするので、自由に使って下さい。onsubmit のやつはもともと自分が作ったものじゃないので良くわかんない(← 無責任)。 結構作ってるつもりだったけど、並べてみると意外と少ない。 onsubmit で disable にするやつ テキストフィールドのフォーカス時に背景色を変更する JavaScript フォームに入力を促すメッセージを出力する JavaScript パスワードの安全性を教えてくれる JavaScript カーソル位置のセルの上端と横端をハイ

    MotionBros
    MotionBros 2006/08/30
    ミニライブラリ
  • naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする

    先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。 http://bloghackers.net/~naoya/ys/app.cgi ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。 仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。 function disableSubmit(form) { var elements = form.elements; for (var i = 0; i < elements.length;

    naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする
    MotionBros
    MotionBros 2006/08/30
    onsubmit で Disable
  • Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE

    JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTMLCSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 WindowsMacintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:

    Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
    MotionBros
    MotionBros 2006/08/02
    JavaScript IDE
  • GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」

    ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff

    GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
  • Welcome to YouOS.

    Ready to go Toolbox für Ihren digitalen Kundenzugang Skalierbare Module für Echtzeit-Lösungen für Apps, Web und Plattformen Drastische Einsparung Erleben Sie mit YOU OS-Modulen Kosteneinsparung bis zu 50% durch Konfiguration statt “build-from-scratch” Vorgehen. Direktes Prototyping Sie erwartet eine massive Zeitersparnis durch anpassbare Module und schnelle Entwicklung von Prototypen statt langwie

    MotionBros
    MotionBros 2006/06/30
    ブラウザ内のOS
  • あれこれポップアップ

    ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所(要素)の情報(属性値)あれこれをポップアップに出す、 JavaScriptCSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事(笑) 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2

    MotionBros
    MotionBros 2006/05/07
    簡単ポップアップコメント
  • S5: A Simple Standards-Based Slide Show System

    S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. A

    S5: A Simple Standards-Based Slide Show System
    MotionBros
    MotionBros 2006/04/16
    JavaScript でプレゼン
  • Lightbox 2

    Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe

    MotionBros
    MotionBros 2006/03/30
    スライドショーライブラリ
  • IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02

    社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> : : </body> </html>↓↓↓ var document = { doc

    IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02
    MotionBros
    MotionBros 2006/03/25
    prototype.js の使い方
  • Prototype.js を使った JavaScript OOP 講座 #01

    社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()

    Prototype.js を使った JavaScript OOP 講座 #01
    MotionBros
    MotionBros 2006/03/18
    prototype.js の使い方
  • - LaszloJapan - リッチ・インターネット・クライアント(RIA) オープンソース プラットフォーム OpenLaszloコミュニティ

    この先、使用予定のないブランド品を売ってお金にしたいけれども、近所や知っている範囲にお店がない、考えてみると、遠くのお店まで行って帰るような時間を取るのは難しいかもしれません。そういう人は多いでしょう。 そういった場合は、宅配買い取りサービスを提供しているところを利用するのが便利ですし、楽です。 お店の用意してくれる宅配キットで、売りたい商品を送付し、うけ取ったお店で、査定がおこなわれます。結果の査定額が知らされ、それに納得することができたら、お店から料金の振り込みがあります。 すべてを在宅で行なえる便利なサービスと言えるでしょう。中古ブランド物の買い取り相場ですが、数が膨大且つ多種多様ですから、何かの品物についてピンポイントでその値段を知るというのは難しいようです。しかし、他のものはともかく世界的に有名なブランドのバッグなら、その買い取り価格がどのくらいになるのか、ネットで調べてみると相

    MotionBros
    MotionBros 2006/03/13
    リッチインターフェイスなウェブアプリを作れるらしい
  • labs.openlaszlo.org

    Welcome to labs.openlaszlo.org. Please link over to www.openlaszlo.org/labs for complete information

    MotionBros
    MotionBros 2006/03/13
    クリックした後の動きいいです
  • Prototype Dissected - snook.ca

    In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version. 1280x960 1440x900 1280x960 on White 1440x900 on White And with WHITE backgroun

    MotionBros
    MotionBros 2006/02/28
    prototype.js の壁紙。ウェブデザインも秀逸
  • Collection & Copy - AJAX/JavaScriptライブラリまとめ

    AJAX/JavaScriptライブラリまとめ (2005/9/6 Revision .1.3) 翻訳 原文:Survey of AJAX/JavaScript Libraries Copyright 2005 by Sergio Pereira, Joe Walker, Matthew Eernisse ※翻訳は、2005/9/6の1.3版を基に作成されています。原文であるWikiページは、1.18以上に更新が進み記載されているライブラリの数が増え、複数の誤りが修正されているようです。最新の情報は原文を参照してください。 Prototype (http://prototype.conio.net/) ライセンス:MIT 概要: Prototypeは、動的なウェブアプリケーションの開発を容易にするためのJavaScriptフレームワークです。Ruby on Railsフレームワーク駆動で

    MotionBros
    MotionBros 2006/02/26
    JavaScript ライブラリのまとめページ
  • Prototype JavaScript Framework: Class-style OO, Ajax, and more

    MotionBros
    MotionBros 2006/02/26
    JavaScript のライブラリ
  • script.aculo.us - web 2.0 javascript

    This is a bugfix release that bumps script.aculo.us to version 1.9.0. Most importantly, the included Prototype 1.7 provides performance and compatibility improvements with the latest browsers. One other fix is includes, that makes the script.aculo.us loader work better if you use script tags in the BODY of your page. Download at http://script.aculo.us/, or grab/fork the source at http://github.com

    MotionBros
    MotionBros 2006/02/26
    JavaScript ライブラリ