Derek BanasI make tutorials based on your requests. I will cover any topic you can imagine. Ask me questions anytime on Discord : https://discord.gg/pFkpxYC7rQ
Learning JavaScript Design Patterns by Addy Osmani
Document has moved, if you aren't automatically redirected go here.
Learning JavaScript Design Patterns by Addy Osmani
PatternsStay up to date on the latest design and performance patterns.
JavaScript 多次元配列と連想配列 - Wikibooks
[編集] 配列 [編集] 多次元配列 さて、先程配列を説明したが、これは直線的な1次元のデータである。 しかし、配列の中に配列を入れる事によって次のような計算も出来る var a = [ [1,2,3], [4,5,6], [7,8,9] ]; b = [ [1,4,7], [2,5,8], [3,6,9] ]; c = [ [0,0,0], [0,0,0], [0,0,0] ]; for(var i=0;i>3;i++) for(var j=0;j>3;j++) for(var k=0;k>3;k++) c[i][j] += a[i][k]*b[k][j]; document.write( c ); 上のプログラムは３×３の行列の計算である。 [編集] 連想配列 配列を扱っていると、各配列の箇所に、決まった目的のデータを入れることが良くある。 この様なものは document.write
jQueryで画像をドラッグ＆ドロップするUIを実装する実験｜BLACKFLAG
以前にもjQueryを使ってドラッグでコンテンツ要素をスクロールさせるUIを紹介しましたが、ストレージサービスなどでたまに見かける、画像を特定のエリアにドラッグ＆ドロップさせるUIの実験的サンプルを作ってみたのでここでも紹介してみます。 まずは動作のサンプルから。 下のサンプル画面上の画像はエリア下にある灰色のエリアにドロップすることができます。 ドラッグした画像は元のリストエリアにドラッグし直すことで元の位置に戻ります。 ドラッグエリア下にある「すべて選択」をクリックするとすべてドロップされた状態になり、「選択クリア」をクリックするとドラッグされた画像はすべてもとの位置に戻ります。 この動作の全体構成について、まずはHTMLから。 ◆HTML <div id="dragitemlist"> <ul class="draglist"> <li><span class="dragparts"
jQueryのマウス操作のイベントをまとめてみる – bl6.jp
マウス操作に関するイベントをまとめてみました。まとめたイベントはmouseover/mouseout、mousedown/mouseup、click、mousemoveです。mousedown/mouseupとclickの違いなど自分の中で少しあいまいな部分があったのですが、今回まとめてみて区別できるようになったのでよかったです。 マウスイベントのまとめ まずはマウスイベントに限ったことではないんですが、イベント処理の一般的な記述の仕方です。こんな感じで書きます。 $(セレクター).イベント(function(){ イベント発生時の処理 }); これだけで色々なイベントを操作できるっていうのはとても簡単ですね。 mouseover/mouseout mouseoverとmouseoutを使えば、ある要素にマウスが乗った時とマウスが離れた時によって処理を分けたりすることができます。そのまんま
そろそろきっちりJavaScript (1) "Firebug"の導入～関数リテラルとは? | エンタープライズ | マイナビニュース
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
【コラム】そろそろきっちりJavaScript (4) クラスベースとプロトタイプベースの違い | エンタープライズ | マイナビニュース
プロトタイプベースとは? 前回の記事で「JavaScriptで登場するデータは、(一部の例外を除き)すべてオブジェクトである」「JavaScriptにはクラスが存在しない」と説明したが、これをさらに正確に表現するならば、「JavaScriptでは、(Javaなどの言語に見られる)クラスという抽象化された概念は存在しない。存在するのはインスタンス化されたオブジェクトだけだ」となる。すなわち、JavaScriptでは、すべての"モノ"が実体(インスタンス)であり、クラスとインスタンスという概念が区別されない。 これは、Javaなどの"クラスをベースにする"オブジェクト指向言語に慣れた開発者ほど、理解し難い概念かもしれない。しかしながら、あまり難しく考える必要はない。単に「JavaScriptの世界で新しいモノを作り出すうえでは、クラスという抽象化された概念を考慮する必要はない」というだけのこと
Drag and Drop - Drag and Dropのサンプル - HTML5 JavaScript API入門
Drag and Dropとは Drag and Dropとは対応ブラウザ IE 9：○ （draggable属性、File API関連メソッド未実装） FireFox 9.0：○ Opera 11.60：× Chrome 16.0：○ Safari 5.1：○（Windows版ではデータ受け渡し関連の実装は不完全） ※Windows 7上で動作確認を行っています。 ※ブラウザの設定より、異なる挙動をする場合があります。 ※ブラウザにDrag and Drop API自体が実装されている場合に「○」としています。個々のメソッドや属性などについては未実装である場合があります。 解説 Drag and Drop APIは、要素をマウスでつかんだまま目的の要素まで移動させ（ドラッグ）、そこで手放して目的の要素に手渡す（ドロップ）という動作と、それを通じたデータの受け渡しを実現するAPIです。 ド
jsProgressBarHandler (Dynamic Javascript Progress/Percentage Bar) – Bram.us
UPD: fixed IE compatibility issue (thanks Kevin – Sep 19 2008 / 6pm) UPD: setPercentage now parses the targetPercentage to an Integer to avoid infinite loop (thanks Jack – Sep 07 2008 / 9pm) UPD: Moved from Event.Observe(window, ‘load’, fn) to document.observe(‘dom:loaded’, fn) in order to force people to use an up to date Prototype release. UPD: setPercentage now takes an overrideQueue param. If
プログレスバー.js - JavaScript ライブラリー - HTML5.JP
上記タグは次の点に注意してください。 必ずdiv要素を用意してください。divではない要素ではブログレスバーは表示されません。 id属性は必須です。id属性値をセットしてください。 HTMLのhead要素内に、次のJavaScriptコードを記述してください。 <script type="text/javascript" src="../html5jp/progress.js"></script> <script type="text/javascript"> window.onload = function() { var p = { to: 50 }; var o = new html5jp.progress("sample1", p); o.draw(); }; </script> このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を
tmlibでゲージを実装する - Qiita
tmlibでゲージを実装する イントロ 最近趣味でゲーム制作を始めました。 簡単にゲームを作る（javascriptでゲームを作る）フレームワークはいくつかありますが、現在僕が使わせて頂いてるのは tmlibです。 （enchant.jsはドキュメントが充実していて良いのですが、iPhone4系とかでUIWebView実装だと実行速度が遅くて厳しいです） 今回はtmlibでタイムリミットを示すゲージを表示する必要があったのでその備忘録です。 ＊下図の様な物 ゲージの実装 tmlib 1.6以降には Gauge と言うとても便利なクラスが実装されてるので、ゲージを出すだけなら以下のようにすれば簡単に出来ます。 参考リンク http://jsdo.it/phi/2gUr
オセロゲームサンプル
先ずは以下のサンプルオセロを動かしてみてください。開始ボタンを押せば動きます。デフォルトはデモで 実行時間が１０００ﾐﾘｾｶﾝﾄﾞですので黒、白入力時に1秒間WAITします。 この後、サンプルオセロのJavaScriptソースを公開しています。 実行時間 ： ０を指定すると待ち時間なく実行します。 数字が大きくなるほど待ち時間が長くなります。 デモ ： コンピュータとコンピュータで対戦するデモです。 人間対コンピュータ： あなたとコンピュータで対戦できます。 JavaScriptのオセロゲームのサンプルソースです。 １．概要 基礎的なロジックは入っていますので、白か黒側にロジックを追加して強いコンピュータ対戦ゲームに挑戦 してください。 ２．先ず駒を用意します。 以下の４図形をサンプルソースを格納する場所と同一のフォルダーにカットアンドペーストして取り込ん
川o・-・）＜2nd life - JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin
最近いろいろなサイトで <script src="/javascripts/foo.js?1142509269" type="text/javascript"></script>や <script src="/javascripts/bar.js?v=2.3" type="text/javascript"></script>の記述を見るようになってきました。また CSS でも <link href="/stylesheets/foo.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />といった記述もちらほら見かけます。 これは JavaScript や CSS を更新しても、ブラウザキャッシュが読み込まれているため、更新された JS ファイルなどがロードされない場合への対策です。上記のような最終更新時刻やバージ
gauge.js (javascript programmable gauge)
gauge.js 1.4 allows you to add gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. Shows some of the things gauge.js does. 8 inbuilt colors available (if are more colors required - t
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
phiary
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Carl Danley
JS Bin
Progressbar - jQuery UI API 1.8.4 日本語リファレンス - StackTrace