タグ

JavaScriptとjavascriptに関するtaky1973のブックマーク (173)

  • accessclub.jp - このウェブサイトは販売用です! - アクセスクラブ リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    taky1973
    taky1973 2012/08/24
    キーコード、キーボードのキーのコード一覧
  • JavascriptのsetInterval, setTimeoutのコツ

    Javascriptにおいて、一定時間後または一定時間ごとに関数を実行するには、 window.setInterval("呼び出す関数","待機時間"); window.setTimeout("呼び出す関数","時間間隔"); とする。 しかし、このsetIntervalとsetTimeout、呼び出す関数に引数を渡すときにちょっとめんどくさい。 というのも、 var timer; function func1(){ timer=window.setTimeout("func2('"+"こんにちは"+"')",1000); } function func2(str){ window.alert(str); } などとしなければならない。 var timer; function func1(){ var message = "こんにちは"; timer = window.setTimeout

    JavascriptのsetInterval, setTimeoutのコツ
    taky1973
    taky1973 2012/08/22
    クロージャーを使う
  • CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log

    CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです

    CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
  • No more Flash!HTML5を使ったWebカム&顔認識·HTML5 Face Detection MOONGIFT

    HTML5 Face DetectionはHTML5のgetUserMediaを使ってWebカムへアクセスし、リアルタイムに画像解析を加えるソフトウェアです。 HTML5の新しい機能の一つとして注目されているのがWebカムへのアクセスです。これまではFlashを介してのみ行われていましたが、これでさらに一歩FlashからHTML5への流れが促進します。そしてそのWebカム認識を使ったソフトウェアがHTML5 Face Detection、顔認識ソフトウェアです。 Flashは使っていません。HTML5がWebカムへのアクセスを求めています。 接続するとフローティングが表示されます。 顔の上にメガネとつけ鼻が表示されます。もちろん顔を動かすとリアルタイムに追従してきます。 HTML5 Face DetectionはまだgetUserMediaが実装されているWebブラウザのみ動作が可能です。

  • Backbone.js -JavaScriptのMVCフレームワーク- | DevelopersIO

    Backbone.jsとは? Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事

  • Underscore.js はもっと評価されていい - present

    Backbone.js が注目されがちですけど、Backbone.js を支えている Underscore.js も、実はかなり便利なライブラリです。公式サイトを見ると、よさげなメソッドが盛りだくさん。 Underscore.js 私自身はまだ Backbone.js のついでに使っている段階ですけどね。 Underscore.js が提供するメソッドは数が多いので、今回はよく使ったものに絞って取り上げてみます。それ以外は公式ドキュメントを見てください。 each test("each", function() { var data = []; _.each(["foo","bar","hoge","fuga"], function(n){ data.push(n); }); equals(data.length, 4); equals(data[0], "foo"); equals(da

    Underscore.js はもっと評価されていい - present
  • 便利機能満載のライブラリUnderscore.js - にのせき日記

    JavascriptライブラリUnderscore.jsがすごい便利。 すごい便利なのにもかかわらず、あんまり日語の情報がなかったので、公式のドキュメントをスピリチュアル抄訳してみた。 http://documentcloud.github.com/underscore/ Collection Functions each _.each(list, iterator, [context]) listの要素をイテレートする。すべての要素はiterator関数にyieldされる。iteratorには(element, index, list)の3つの引数が渡される。もしlistがJavascript Objectだった場合は(value, key, list)になる。 _.each([1, 2, 3], function(num){ alert(num); }); => alerts eac

    便利機能満載のライブラリUnderscore.js - にのせき日記
  • ブラウザごとのlocation.hashの挙動のまとめ - ?D of K

    今更ですが、location.hashで現在のステータスを管理するのがマイブームです。しかし、ASCII以外をぶち込むとブラウザごとに挙動が違うっぽいです。というのを調べておいて、書いておくのを忘れたので、まとめておきます。 方法 以下のアクションを起こした場合、location.hashで取得できる値がどうなるか、調べました。なお、ファイルはUTF-8で試しました。 ファイルに書いてあるリンクをクリックした場合 A1:#test B1:#てすと C1:#%E3%81%A6%E3%81%99%E3%81%A8 A2:#test#test B2:#てすと#てすと C2:#%E3%81%A6%E3%81%99%E3%81%A8#%E3%81%A6%E3%81%99%E3%81%A8 A3:#test%23test B3:#てすと%23てすと C3:#%E3%81%A6%E3%81%99%E3%

    ブラウザごとのlocation.hashの挙動のまとめ - ?D of K
    taky1973
    taky1973 2012/08/11
    クロスブラウザ対応は、encodeURIComponentでencode/decode
  • ふじこのプログラミング奮闘記

    taky1973
    taky1973 2012/08/09
    return false と preventDefault() の違いのすごくわかりやすい説明。IEはバブリング、他は逆方向のイベントキャプチャリング方式。IEはpreventDefault()はサポートしないのでevent.returnValue = false;を使う(http://jmblog.jp/archives/169
  • jmblog.jp - preventDefault() と stopPropagation()

    先日公開した「投稿スラッグ(Post slug)が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。(間違いがあれば是非ご指摘ください!) やりたかったこと WordPressの投稿画面で「公開(Publish)」ボタンをクリックしたときに、「投稿スラッグ(Post slug)」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。

  • スマートフォン対応でよく使うhtml、css、javascriptのまとめ

    スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtmlcssjavascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon

  • amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた - latest log

    2009-11-12 ナビ子記法について追記しました 文 今日は、amachangさんの記事 http://d.hatena.ne.jp/amachang/20071010/1192012056 を 1mm だけ掘り下げ、IE 以外のブラウザでも document へのアクセスを速くする方法がないか、色々試してみます。 # 記事自体はずいぶん前に書き上げてたけど、公開するの忘れてたんだな。 C系を追加しました。C系は「ネストしたスコープからグローバル変数にアクセスするとどうなるか?」がテーマです。 試したこと 以下は様々な方法で document へのアクセス速度を計測します。 A系では、非日常的な方法で測定し、B系では実際の用法に近い形で測定します。C系では何重にもネストしたスコープから、グローバル変数にアクセスするとどうなるかを測定します。 A系 A0 は、素の document に

    amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた - latest log
    taky1973
    taky1973 2012/08/08
    documentオブジェクトをキャッシュすると全てのブラウザで高速化できる
  • uncurryThis 関数 - hogehoge @teramako

    http://wiki.ecmascript.org/doku.php?id=conventions:safe_meta_programming にて大変有用な書き方を身に着けた。 Function.prototype.bindとFunction.prototype.callの黒魔術的なもの。 obj.hasOwnProperty("prop"); と書くところをcallで書くと var func = Object.prototype.hasOwnProperty; func.call(obj, "prop"); と書ける。さらにcallをbindしてみると var func2 = func.call.bind(func); func2(obj, "prop"); となる。さらに、bindをbindすると var func3 = func.bind.bind(func.call)(func

    uncurryThis 関数 - hogehoge @teramako
  • enchant.js使い方辞典 (v0.4.3)

    このページはenchant.jsの用例/サンプルを扱っています。ここではenchant.js ver 0.4.3を使用しています。 *勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。 ちなみにHTML5 (Canvas)を使ったゲームのプログラムについて解説付きで読んでみたい人は拙著「10日でおぼえるHTML5入門教室」の10章およびダウンロードファイル内の補習講義にて以下のゲームプログラムの解説と実際のコードが入っていますので参考にしてみてください。 ※収録されているもの スカッシュ、ブロック崩し、侵略イカゲーム(インベーダーゲームのようなもの)、集金ゲーム(パックマンのようなドットイートタイプ)、レーダー表示タイプのゲーム(ラリーXやボスコニアンのよ

  • enchant.js - A simple JavaScript framework for creating games and apps.

    enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動

    taky1973
    taky1973 2012/07/02
    HTML5+JavaScriptベースのゲームエンジン
  • JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ

    グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し

    JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
  • [JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js

    ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ:IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=

  • Will It Shuffle?

    Or, why random comparators are bad (in addition to being slow). Choose an algorithm: Or write your own: refresh auto-refresh Comments? Discuss on HN!

    taky1973
    taky1973 2012/06/07
    JavaScriptでシャッフルするアルゴリズムをテストできる。サンプルもあり。縞が出ない方がちゃんと切れてる。
  • ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌

    gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

  • ASCII.jp:JSでWeb制作を自動化するAdobe Bridge活用入門|古籏一浩のJavaScriptラボ

    画像管理だけじゃない、「Adobe Bridge」の隠れた魅力 「Adobe Bridge」(以降、Bridge)は、Adobe Creative Suiteに同梱されている画像管理ソフトです。もともとPhotoshop CSに搭載されていた画像管理機能が、Photoshop CS2から分離独立してBridgeとなりました。Adobe Creative Suite 3では「Bridge CS3」、Adobe Creative Suite 4では「Bridge CS4」が同梱されています。 「Bridgeって単なるビューアーソフトでしょ?」と思っている人は多いでしょう。というよりもビューアーやファイラーとしての機能しか知らない人がほとんだと思います。Bridgeは表面的には画像管理ソフトですが、実は強力なJavaScriptを搭載しており、Webや他のソフトと連携してさまざまな処理を自動化す

    ASCII.jp:JSでWeb制作を自動化するAdobe Bridge活用入門|古籏一浩のJavaScriptラボ