おっと、これは便利かも。 REGEXPERを使えば、JavaScriptの正規表現をわかりやすく表現してくれる。 一見、難解な正規表現だが、これを通しても見ると「なるほど、この文字とこの文字にはされまれていて、この間は何の文字でも良いのだな」といったことがわかるようになる。 他の人のコードを読んでいて「？」となったときに試してみてもいいかもですな。
正規表現をわかりやすく視覚化してくれる『REGEXPER』 | 100SHIKI
おっと、これは便利かも。 REGEXPERを使えば、JavaScriptの正規表現をわかりやすく表現してくれる。 一見、難解な正規表現だが、これを通しても見ると「なるほど、この文字とこの文字にはされまれていて、この間は何の文字でも良いのだな」といったことがわかるようになる。 他の人のコードを読んでいて「？」となったときに試してみてもいいかもですな。
Effective JavaScriptをPDFにしました - renoivのブログ
[twitter:@bleis]さんのつぶやきを見て，ここにあったのか！という驚きでした。 2003年頃の記事ですがJavaScript 1.5 (Mozilla 1) ベースなので，まだ参考になると思います。 Googleドキュメントに置きましたので必要な方はどうぞ！ Effective JavaScript - Dynamic Scripting.pdf Powered by Google ドキュメント HTMLアーカイブもGithubに置きましたので，こちらも必要な方はどうぞ。 https://github.com/renoiv/EffectiveJavaScript 参考 Effective JavaScript - Dynamic Scripting Wikipedia JavaScript バージョンとブラウザの対応表
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
Reactive Extensions で非同期処理を簡潔に記述する | Webシステム開発／教育ソリューションのタイムインターメディア
問題 今時の若者ならばHeroku等を利用して手早く Web アプリを作成・公開することが日常茶飯事です。 バックエンドもフロントエンドも今はフレームワークが充実していますから、 高度な処理を簡潔な記述で行うことができます。 しかし非同期処理となると話は別です。 例えばフロントエンドを作るとなると、まずjQueryを使うことになるでしょう。 jQuery は洗練された API で DOM 操作を簡単に行うことができますし、 非同期通信についても $.ajax を使えば煩雑なことほぼ知らずに済みます。 例えばWikipediaの検索フォームは入力補完が行われるようになっており、 検索フォーム文字が入力されると関連するページのタイトルが候補として表示されます。 このような処理を書くとなると以下のようなコードになるでしょう: var showCompletionMenu = function (
JavaScriptでヒアドキュメントを使うライブラリを作った。 - こせきの技術日記
JavaScriptでヒアドキュメントを使うライブラリを作りました。 heredoc.js http://www.teria.com/~koseki/memo/jsheredoc/heredoc.js テスト http://www.teria.com/~koseki/memo/jsheredoc/test.html 外部ファイルサンプル http://www.teria.com/~koseki/memo/jsheredoc/tests.txt 使い方 scriptタグ内に直接書き込む使い方(インラインモード)と、外部ファイルを読み込んでコールバックを実行する使い方があります。 インラインモード <script src="heredoc.js"> # ここはscriptとして解釈されません。 str1 =<<EOT 複数行の文字列です。 下の行でおわりです。str1はグローバルになります。
本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
データ ＆ アナリティクス | アクセンチュア
データ分析から導き出されたインサイト無しにAI（人工知能）の活用は始まりません。私たちは、各業界知識とデータ・アナリティクス技術を駆使しデータドリブン経営を強力に支援します。 データ、アナリティクス、AIは企業にとって競合他社との差別化を図るかつてないほど大きな要因になっています。今日の経営幹部が効率を向上しながら新たな収益源を開拓し、新しいビジネスモデルをタイムリーに構築する方法を模索する中、価値を生み出し成長を続ける企業には「データ活用」という共通項があります。私たちは、無数のデータから企業にとって本当に必要なデータを活用するための方法を知っています。 将来を見据えたオペレーション体制を備えている企業の半数以上（52％）は、すでにデータとアナリティクスを大規模に活用しています。データとAIに関する取り組みをビジネス戦略に沿って実施することで投資利益率を迅速に最大化し、最終的にはAIをビ
JavaScriptのテンプレートエンジン「T.js」を公開しました
結構前に公開していたんですが、きちんとした紹介を書いてなかったので改めて。Githubにて、T.jsという名前のJavaScript用テンプレートエンジンを公開しています。 T.js - DOMBuilder-like template engine for JavaScript T.jsとは JavaScriptでHTMLを書くためのライブラリ（一種のテンプレートエンジン）です。 T.table("#addressbook")({style:{borderCollapse:"collapse"},border:"5"}, T.thead( T.tr( T.th("name"), T.th("address"))), T.tbody( T.tr(".odd")( T.td("alice"), T.td("a street")), T.tr( T.td("bob"), T.td("b str
Big Sky :: スコープと参照と...
部下にも何度も説明してて、この辺がC言語のポインタみたいな鬼門なのかなーとか思いながら。 javascriptでhtml内のonclickの内容を書き換えようとしています.. - 人力検索はてな javascriptでhtml内のonclickの内容を書き換えようとしていますが 変更後の関数に変数を渡すと、変更後の関数(load)自体が実行されてしまい、うまくいきません 現在は以下のように、onclickの内容を変更しようとしていますが、 関数を実行させずに、html内のonclickの内容だけ書き換える場合はどのようにしたらいいですか？ document.getElementById('box').onclick = (function(id){ load(id) })(userid); http://q.hatena.ne.jp/1305849029 こういうコードになった経緯を考える
JSONをツリー表示で編集出来るWebアプリ「JSON Editor」 - 強火で進め
JSON Editor by katamari http://jsoneditor.net/ 昨日、紹介した「JSONLint」の事をtwitterで話したら、自分はこれを2年前から使ってると「JSON Editor」というのを紹介して貰いました。 早速、どんなものかと見てみたら凄いですねコレ、表示はツリー表示に成ってデータの有る所をクリックするとその場で編集出来ちゃいます。ショートカットキーも充実しています。 JSONはもちろん、XMLでも出力出来ちゃいます。 調べてみたところ2年前から有るツールで作者は日本人の方みたいです。 JSON Editor 公開しました - pm11op のブログ http://pm.11op.net/2008/05/json-editor.php これは超便利ですね。これから積極的に使って行こうと思います。 ちなみにAIR版も有るみたいです。 RESTful
Learn to Code - for Free | Codecademy
Get personalized job listings and practice interview questions
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
JavaScriptの動かないコード (JavaScriptエラー集) - 主に言語とシステム開発に関して
「このJavaScriptコードが動かないのは，なぜですか？」というミニクイズ集。 すべて制限時間は１分。 別名，JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年５月現在，全５３記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう （バブリングの対処） オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを
9日間限定、JavaScriptでスマホゲームを開発するコンテスト － ＠IT
2011/06/30 「JavaScriptを用いて、9日間でゲームを開発せよ」――ユビキタスエンターテインメントが7月1日から9日までの9日間、スマートフォン用ゲームのプログラミングコンテスト「9leap 9days Challenge #3」を開催する。 テーマは「サウンド機能を実装したゲーム」。BGMや効果音など、さまざまなサウンド機能を実装したゲームを、9日間限定で募集する。 スマートフォンで動くゲームをJavaScriptで開発 応募要件は3つある。（1）JavaScriptで書いてあること、（2）スマートフォンで動作すること、（3）サウンド機能を実装したオリジナルゲームであること。年齢制限は設けていない。日本在住でTwitterアカウントを持っていれば、プロ・アマ問わず誰でも応募が可能だ。 応募方法は、投稿型ゲームサイト「9leap」へゲームファイルを投稿するだけ。7月9日23
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
クロージャ難しすぎワロタ - とある技術の備忘録
JavaScript やりたいこと GoogleMap上のmarkerをクリックすると吹き出し(infoWindow)を表示(openInfoWindow)する 表示する吹き出しはそれぞれmarkerと対応しているものである for(var i=0; i{ var point = new GLatLng(points[i].lat, points[i].lng); var marker = new GMarker(point); map.addOverlay(marker); (function(i, marker){ GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(points[i].html); }); })(i, marker); /* ダメな例 GEvent.addListener
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
JavaScriptでグラフ表示 - 現場のためのソフトウェア開発プロセス - たかのり日記
YUI（Yahoo! UI Library）から、Chartライブラリがリリースされました。 棒グラフ（縦／横） 折れ線グラフ 円グラフ 積み上げ棒グラフ（縦／横） など、基本的なグラフは一通り揃っているようです（動作には、Flash Player が必要となります）。 デモを見る限りでは、比較的簡単なコードでグラフを描画できていますね。 Javaにおけるグラフ表示と言えば、JFreeChartが有名ですが、サーバ側でゴリゴリな実装が必要です。そのため、私自身はあまり好きではなかったのですが、JavaScriptのグラフ表示ライブラリの場合、十数行程度でもグラフが描画できるものが多く、さらに、Ajaxなどでデータ転送量も少なくできるため、今後はこちらの方が利用シーンが多くなっていくような気がします。 また、以前に、グラフ表示のライブラリを調査したことがあるのですが、そのときの情報を以下にメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること
Ajax を使った手書き文字認識