タグ

javascriptとJavaScriptに関するNeanのブックマーク (638)

  • Bookmarklet - 文字列をカウントするだけの簡単なお仕事です : 404 Blog Not Found

    2007年12月11日22:30 カテゴリLightweight Languages Bookmarklet - 文字列をカウントするだけの簡単なお仕事です こちらに触発されて。 文字カウント フォーカスが当たったテキストフィールドの文字数を数えて、ステータスバーに表示します。当然ですが、この機能を明示的に切ったりしてある場合(たとえばFirefoxなら可能)何も表示されませんが、表示用のDOMをappendしたりするよりはシンプルなので。blogのコメント欄のところでちょっと試してみて下さい。 blogのコメント欄にも文字数制限がありますが、これで確認が少し楽になるかな.... Count Charcters in the Status Bar - Bookmarklet 昨日と同じく、Bookmarklet単体ではなく、さらにJSを読み込むメタブックマークレットタイプです。 Fir

    Bookmarklet - 文字列をカウントするだけの簡単なお仕事です : 404 Blog Not Found
  • テキストを自由な位置で折り返せる「CSS Text Wrapper」:phpspot開発日誌

    CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle.テキストを自由な位置で折り返せる「CSS Text Wrapper」。 テキストを円形等、好きな形の範囲内に収める仕組みが考案されたようです。 次のように、円形の中にテキストを並べる等、まさに自由自在です。 昔はこういった形でのテキストは空白を挟んだりして実現は難しいと思っていましたが、実現できるんですね。 デザイン系のサイトなんかで活用できそうな仕組みです。 こんな仕組みがあるとは知らない人に見せたらアッと驚くこと間違いないでしょう。 ちょっとしたサプライズを与えたい場合に使えますね。

  • よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife

    2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 (単純にボクがこのスタイルが一番見やすくて好きってだけだったり) サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル (サンプ

    よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife
  • JavaScript でこんなパッケージ管理はどうか? - IT戦記

    まず、以下のような package 関数を作る。 function package(name) { package.__hash__ = package.__hash__ || {}; if (!package.__hash__.hasOwnProperty(name)) { package.__hash__[name] = { def: function(name, value) { return this[name] = value; } } } return package.__hash__[name] } で、こんな感じで使う // ここは hoge の名前空間 with (package('hoge')) { def('var0', 1); // 変数は def 関数で定義 def('var2', 2); alert(var0); // 1 alert(var2); // 2 }

    JavaScript でこんなパッケージ管理はどうか? - IT戦記
  • [JS]タブの背景を変更可能なタブ型コンテンツ -Coda-Slider 1.1.1 | コリス

    タブ型のコンテンツをスムーズに移動させて切り替えるCoda-Sliderが、マイナーバージョンアップを行いました。 A quick update to Coda-Slider: unique classes for navigation tabs デモ&ダウンロード 今回のバージョンアップでは、タブにユニークなclassを振って、背景をそれぞれ別に指定できたりすることです。 Coda-Sliderの主な特徴は、下記の通りです。 複数のコンテンツをタブによって、スムーズに移動させて表示 タブ以外にも、リンクを設置可能(番号・前後、コンテンツの任意箇所・ページの任意箇所・矢印など) スクリプトオフ時にも情報入手可能 jQuery 1.2のプラグイン preloaderの採用

  • プログラム可能なCSS、Dynamic CSS (CSS.js)登場 | ネット | マイコミジャーナル

    Marat A Denenberg氏は11月29日(米国時間)、Dynamic CSS (CSS.js)の最新版であるDynamic CSS 1.0を公開した。Dynamic CSSJavaScriptで開発されたプログラム可能なCSSユーティリティ。mootools 1.2を使って開発されたユーティリティで、実行するにはElementとClassを含めたmootools 1.2が必要。JavaScript中にプログラマブルなCSSを表記できるというものだ。長さなどのサイズ指定に固定値ではなく計算値や変数、関数を使った計算式を記述できる。 Webブラウザ互換性確保やWebブラウザに特化したプロパティの指定などをおこなう場合、PHPやServletなどのサーバサイド技術を使って対象のWebブラウザに適したCSSファイルを生成するといった処理をすることが多い。Dynamic CSSはその処理

  • GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
  • ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その1

    僕にも教える人ができた(? というか人にモノを教える立場)になったので、とりあえず、最近はもっぱらjavascriptを教えています。 もともとCやJavaなどについてはある程度の知識がある人なので、それを少しjs的な意味で、関数言語的な教えをやっている最中のメモ 変数って何ですか?変数って値もしくは式そのものに利便的な名前をつけているものです 次のhogeとfooは値をいれる箱ではなく、値そのものに別名(もしくは分かりやすい名称)を割り当てているだけに過ぎませんよ。 var hoge = 1; var foo = [1, 2, 3]; alert(hoge + 1); // 2 alert(foo[0]); // 1 alert(1 + 1); // 2 alert([1, 2, 3][0]); // 1 つまり、関数自体を変数に代入する事ができます。(functionとは特別な呼び名

  • Firefox の拡張機能をふとした時に手元でチョコチョコいじれるようにしとくと楽しい - IT戦記

    この記事で Firebug ハッキング Tips を纏めたい Firebug に一行追記して右クリックで XPath をコピペ出来るようにする。 - IT戦記 とか言ってたけどその前に、 僕は Firebug だけじゃなくて、 だいたいの拡張機能で、簡単に「チョコチョコいじれる化」というのをしてるのでそれを書いてみます。 チョコチョコいじれる化とは jar ファイルを解凍しておいてすぐ書き換えられるようにしとくこと。 「チョコチョコいじれる化」しとくと気付いたときにちょっと JS や XML や CSS を追加するだけで、いろいろ改造できて楽しい。 「でも、 Firefox が壊れる可能性があるじゃん><」って? チッチッチ、ナンセンスだよメーン そんなの拡張機能のディレクトリを削除しちゃえば元通りさ Don't be scared! iKnow!で英語。ちょっとの努力で、大きな成果を。

    Firefox の拡張機能をふとした時に手元でチョコチョコいじれるようにしとくと楽しい - IT戦記
  • 第10回 Prototypeライブラリ(2846~3276行目) | gihyo.jp

    最終回 この連載も今回が最終回です。 単に季節物のPrototypeライブラリを解説する、という視点ではなく、今後ライブラリのバージョンがさらにあがっても応用できるような基礎知識や、深追いするためのヒントなどを織り交ぜてきたつもりです。 「あとで読む」つもりの方も多いかと思いますが、読むのを忘れないでもらえれば幸いです。:-)) では、最後まで一気に行きましょう。 Abstract.TimedObserver オブジェクト 2846: Abstract.TimedObserver = function() {} 2847: Abstract.TimedObserver.prototype = { 2848: initialize: function(element, frequency, callback) { 2849: this.frequency = frequency; 2850:

    第10回 Prototypeライブラリ(2846~3276行目) | gihyo.jp
  • javascript - パスワードを確認するbookmarklet : 404 Blog Not Found

    2007年11月24日15:30 カテゴリLightweight LanguagesTips javascript - パスワードを確認するbookmarklet これの改良版です。 アスタリスクで隠されたパスワードを確認する方法 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 ブックマークレット: Check Password ソース: javascript:(function(){ var F=document.getElementsByTagName('input'), a=[]; for (var i=0,l=F.length;i<l;i++){ if(F[i].type.toLowerCas

    javascript - パスワードを確認するbookmarklet : 404 Blog Not Found
  • Spookies Labs Blog | シンプルな日付選択用ライブラリ「protocalendar.js」を公開しました

    prototype.js ベースの日付選択用 javascript ライブラリ「protocalendar.js」を公開しました。 rails や cakephp でアプリケーションを作っていて、セレクトタグでは日付を選択し辛いと感じていました。 また、オープンソースの Date Picker ライブラリでは機能不足、もしくはオーバースペック過ぎて手頃なものがないと感じていました。 そこで、社内で prototype.js ベースの日付選択用ライブラリを作ってみようということになり作ってみました。 今後もバージョンアップしていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。 【特徴】 *prototype.js ベース(1.5 以降)。 *シンプルで軽量。 *MIT LICNESE *16のローカライゼーションに対応。 *フォーカスでカレンダー表示。(

  • ブラウザから手軽に使えるJavaScriptの統合開発環境『TIDE』 | 100SHIKI.COM

    これはすごい・・・。 TIDEは「Tiny IDE(統合開発環境)」の略らしい。 そのシンプルな名前にたがわず、実に手軽にJavaScriptを書いて、テストすることができる。日語もきちんと通るようだ。 しかもIDEだけあって、変数の中身をウォッチしたり、ステップごとに実行していくことが可能だ。 JavaScriptは慣れていないとどうにもとっつきにくかったりするが、こうした環境があればその動作を確認しながら学習していくことができるだろう。 まだベータ版ということで多少のバグがあるようだが、これからJavaScriptをやってみよう!と思われている方にはお勧めだ。

    ブラウザから手軽に使えるJavaScriptの統合開発環境『TIDE』 | 100SHIKI.COM
  • ブラウザで S 式をつかいたい>< - 女子高生ぷろぐらまーなお☆のブログ

    JS オレオレ言語ブーム - IT戦記 で OreScript時代の幕開け - yukobaのブログ を知ったので、Scheme みたいなのをつくってみました>< でもぜんぜんできてないです(笑) naoscheme/index.html <script type="application/x-naoscheme"> (define myalert (msg) (alert msg)) (set! test "*_*") ((lambda (foo) (myalert foo)) test) </script> <script type="application/x-naoscheme"> (add-event-listener window "load" (lambda (e) (alert e) (call document.body "appendChild" (call docum

    ブラウザで S 式をつかいたい>< - 女子高生ぷろぐらまーなお☆のブログ
  • JavaScriptでジュリア集合を描画:Geekなぺーじ

    幅 : , 高さ : ジュリア集合解説 このスクリプトは、以下の数式を実行して色をつけていったものです。 この数式のzとAは実数部と虚数部を持つ複素数です。 Aは定数です。 平面上の各z_0に対して、この計算を繰り返し行っていきます。 この計算を行った結果が特定の値を超えた場合、その計算が発散したとします。 そして、発散するまでにかかった回数で平面上に色をつけていきます。 規定の回数まで行っても発散しない場合は、発散しなかったとして色を塗りません。 (ただし、今回のプログラムでは黒を塗っています。) 実数部の開始位置と終了位置を調整すると、画像全体のズーム率を調整できます。 定数Aの値を変更していくと、模様が変わります。 色々試して見てください。 何を入れていいのか解らない場合などには、以下の値などがお勧めです。 実数 -0.5 ~ 0.5、虚数 -0.5 ~ 0.5、A実数 -0.2、A

  • HTML崩壊 meltdown.js - KAZUMiX memo

    #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ

    HTML崩壊 meltdown.js - KAZUMiX memo
    Nean
    Nean 2007/11/09
    これだったのかぁ。
  • JavaScript Library Archive

    JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』

  • わずか565バイトテトリスのプログラミング解説

    「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 以下のソースコードをメモ帳に貼り付けて、htmlで保存すればテトリスが動きます。 <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){fo

    わずか565バイトテトリスのプログラミング解説
  • 404 Blog Not Found:アマグラマーのすすめ - 目次

    2007年11月24日20:00 カテゴリアマグラマーのすすめ アマグラマーのすすめ - 目次 完成まで毎日更新予定 - なかなか毎日更新とは行かないのはスルーしていただく方向で。 はじめのはじめ はじめに プログラムって何さ? 世界は言葉で出来ている 下ごしらえ プログラムの言の葉 美徳その1:怠慢 美徳その2:短気 美徳その3:傲慢 「アマグラマーのすすめ」カテゴリの最新記事

    404 Blog Not Found:アマグラマーのすすめ - 目次
  • CSS レイアウト切り替えスイッチ | WWW WATCH

    Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

    CSS レイアウト切り替えスイッチ | WWW WATCH