あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
JavaScriptでの2次元配列を使った90度の回転処理 : 構想雑文
（何を書いているのは文章の意味がわかりにくいけど）、JavaScriptで1次元配列（普通の配列）にまとめた4×4に配置する配列の中身を、90度回転させる処理については、こちらに記事をまとめています。 JavaScriptでの配列を使った90度の回転処理 http://blog.livedoor.jp/unahide/archives/53129405.html 4×4に配置された、例えば以下のような表示になるように配列を用意して ■■■■ □□□□ □□□□ □□□□ これを 90度 回転させて 例えば、以下のような表示に変化させるって話です。 ■□□□ ■□□□ ■□□□ ■□□□ 前の記事では、普通の配列（一次元配列）だったけど、これをこの記事では二次元配列でやるよ！ って話です。 ということで、まず、最初の状態の配列を用意すると以下のような感じです。 blocks = [ [1,1
回転行列の表現方法
行列計算 This page has been moved to tech0007.html 3次元図形変換の行列表現について解説する。 平行移動 拡大・縮小、反転 x軸まわりに角度αだけ回転した場合 y軸まわりに角度βだけ回転した場合 z軸まわりに角度γだけ回転した場合 Euler角αβγで回転する場合 ロール(φ)ピッチ(θ)ヨー(ψ)で回転する場合 ベクトルの方向=回転軸,ベクトルの長さ=回転量で回転する場合（ロドリゲスの公式） 正規化されていないベクトルをv=(vx,vy,vz)、回転量をθ=|v|とする。 θが0に近い場合． 任意の単位ベクトル(vx,vy,vz)まわりにθ回転する場合（ロドリゲスの公式） 単位ベクトルv=(vx,vy,vz)を回転軸、回転量をθとする。 任意の単位ベクトル(nx,ny,nz)まわりにθ回転する場合 4元数(Quaternion)で回転する場合 4
Canvasに入門してみた。 - 車輪を再発明 / koba04の日記
最近Canvasと触れ合う機会があり、色々勘違いしていたり、こんなことも出来るんだみたいなことがあったのでメモ。 描画をプログラミングでするのがはじめてだったので、やっている人には常識なことばかりかもしれませんが。 参考 まず最初に見るサイトとしては日本語だとこの辺りがわかりやすいんじゃないかと思います。 http://www.html5.jp/canvas/index.html https://developer.mozilla.org/ja/Canvas_tutorial Canvasの基準点 Canvasには基準点というのがあって、全てはその位置から「x」にいくら「y」にいくらというように図形を配置する場所を指定します。例えばx軸に「100」、y軸に「50」ずらした「40」の正方形を描画するには下記のように指定します。(他にも指定する方法はあります) // ctxはcanvasのco
enchant.js使い方辞典
説明 スプライト同士の当たり判定を行うにはスプライトのintersect()メソッドを使います。パラメーターに当たり判定を調べたいスプライトを指定します。当たっている場合にはtrue、そうでない場合はfalseが返されます。 サンプルではカーソルキーで自機を動かすブロックと接触しているかどうかが表示されます。 サンプル サンプルを実行｜データをダウンロード ■HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample game</title> <style> body { margin: 0; } </style> <script src="js/enchant.min.js"></script> <script src="js/main.js"></script> </head> <body></body
transform() メソッド - Canvasリファレンス - HTML5.JP
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-transform サンプル transform() メソッドは、一度セットされると、それ以降に描かれる図形はすべてその変換マトリックスが適用されます。transform() メソッドで変換マトリックスを定義したあとに、別の変換マトリックスを transform() メソッドで定義すると、2つの変換マトリックスを掛け合わせた変換マトリックスが適用された状態となります。 もし、新たな変換マトリックスを適用したい場合は、setTransform() メソッドで変換マトリックスを定義しなければいけないことに注意してください。 では、まず setTransform() メソッドの使い方をみていきましょう。 setTransform() メソッドの例 このサンプルは、
transform(a, b, c, d, e, f)－Canvasリファレンス
transform(a, b, c, d, e, f)メソッドのそれぞれの引数は、 transform(伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y)となります。 何も変形しない場合の引数の値は、transform(1, 0, 0, 1, 0, 0)となります。 transform()メソッドでは、 scale()・ rotate()・ translate() をまとめて指定することができます。 rotate()は回転ですが、transform()の引数に三角関数を利用して伸縮と傾斜を組み合わせることで回転結果を得られます。 それぞれの個別メソッドとtransform()メソッドとの関係は以下の通りです。 scale(x, y)は、transform(x, 0, 0, y, 0, 0)と同じ rotate(angle)は、transform(Math.cos(angle), M
JavaScript sample - 画像縦移動
<HTML> <HEAD> <TITLE>JavaScript サンプル</TITLE> <SCRIPT type="text/JavaScript"> <!-- imgTopStart = 280; imgTopEnd = 320; imgTop = imgTopStart; imgLeft = 100; moveStep = 5; moveSpeed = 100; function moveImgY(){ document.getElementById("img1").style.top = imgTop; document.getElementById("img1").style.left = imgLeft; if(imgTopEnd-imgTopStart > 0){ imgTop += moveStep; if(imgTop > imgTopEn
入力されたキーを受け取る（FireFox編）－JavaScript入門
HOME JavaScript入門 入力されたキーを受け取る（FireFox編） 前のページでは、Internet Explorerでキー入力を受け付ける方法について見ました。 他にもOperaやGoogle Chrome，Safariなどの最新版でも動作します。 しかしブラウザシェア率第2位のFireFoxでは残念ながら動きません（Ver.24の時点では）。 それでこのページでは、FireFoxでも動作するスクリプトを組んでみたいと思います。 今回も前のページと同じく、「Ｂ」キーを押すと前のページに戻り、 「Ｆ」キーを押すと次のページに進むスクリプトを組んでみることにします。 FireFoxでキー入力を受け付ける場合 FireFoxでキー入力を受け付ける場合、event.keyCodeが使えません。 それで、この部分を次のように変更します。 具体的には、以下のようなコードになります。 d
CANVASでのイベント（クリック、キー操作等）処理
トップページ→プログラミング技術等→CANVAS要素（HTML5）（導入）→ CANVASでのイベント（クリック、キー操作等）処理を行うJavaScriptの例を挙げる。 「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください（IE8以前では表示されない）。 クリックされた位置に画像を貼る この場合、画面コンテクストではなく、canvasに対するaddEventListenerプロパティで設定する。 このプロパティの引数の'click'は、クリック処理を示し、その次の引数にクリックで呼び出される関数名を記述する。次の引数にはtrueと書いておく。 クリックされた時のカーソルの位置は、呼び出される関数に渡されるeventのプロパティclientX、clientYで其々x座標、y座標が得られる。 但し、これはbody全体の左上端からの座標となる。htm
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
)
クイック スタート: キャンバスへの描画 (HTML) - Windows app development
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 [ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください] キャンバス要素は、ページ上に四角形のビットマップ キャンバスを作成します。このキャンバスには、JavaScript を使って簡単にグラフィック イメージを描画できます。キャンバスは、ゲームを作成するときや、グラフィックスをリアルタイムで生成したり一定の間隔で変更したりするような状況で役立ちます。 このクイック スタートは次のセクションで構成されます。 必要条件 キャ
JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料
HTML とは HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。 例えば、以下のようなものが HTML です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文<a href="hoge.html">ハイパーリンク</a>本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </p> </body> </html> サンプル イメージ湧きましたか？ では、何故 HTML という
プログラミングやったこと無い奴はJavaScriptから始めろ : IT速報
1: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:04.45 ID:ZsWrBm0M0 まずはNode.jsをインストールしろ話はそれからだ Download：http://nodejs.org/ 2: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:26.57 ID:hzAFYxvI0 一方俺はコボルから始めた 3: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:57:50.90 ID:ZsWrBm0M0 インストールしたかてめぇら 4: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:59:13.96 ID:2B5lF2zi0 javaでいい？ 5: 以下、名無しにかわりましてVIPがお送りします 投稿
プログラミングのキホン、if文を使ってみよう！
プログラミングのキホン、if文を使ってみよう！：初心者のためのJavaScript入門（4）（2/2 ページ） 色々な条件をつけてみよう 「==」と「!=」のほかにも条件がつけられます。 例えば、踏切が鳴り始めて遮断機が降りてきても、ダッシュで渡ってしまう人がいますね。降り始めはダッシュで行けるとしても、半分ぐらいまで遮断機が降りていたら止まるとします（仮の話です。踏切が鳴り始めたら止まりましょう） これをif文で表してみましょう。今までは変数「shadanki」の値が「0」だったら「遮断機は降りていない」状態、「1」だったら「遮断機は降りている」状態としていましたが、今度は、遮断機の降り具合を0〜9の10段階で表現してみましょう。 「0」を「遮断機はまったく降りていない」状態として、「9」は「遮断機が完全に降りている」状態とします。そうすると、「5」は「遮断機が半分ぐらい降りている」状態
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ja.wikibooks.org/wiki/JavaScript_%E3%83%AB%E3%83%BC%E3%83%97%E6%96%87%E5%BE%A9%E7%BF%92