Press any key to determine the javascript key code of that key. This is a simple script: <script language="JavaScript"> document.onkeydown = checkKeycode function checkKeycode(e) { var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; alert("keycode: " + keycode); } </script> You may also use this sort of function to disable certain keys, by adding a void(0)
Responding to Force Touch Events Safari, Dashboard, and WebKit-based applications include support for responding to Force Touch events from within HTML pages. You can use these events to provide custom behaviors in response to actions such as force clicks and changes in pressure. For example, your webpage might open a link in a new window when the user force clicks the link, or play an embedded vi
<!DOCTYPE html><html><head><title>ForceTouch Event demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> html, body, ul { margin: 0; padding: 0; } canvas { margin: 2px; padding: 0; } .touchable { outline: 1px outset gray; } .pallet { list-style: none; } .pallet li { display: inline } .pallet li button { width: 40px; heigh
Document Object Model (DOM)DocumentConstructorDocument()Instance propertiesactiveElementadoptedStyleSheetsalinkColor Deprecated all Deprecated anchors Deprecated applets Deprecated bgColor Deprecated bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain Deprecated embedsfeaturePolicy Experimental fgColor Dep
「Ruby の Enumerator でジェネレータを作ったり、遅延評価してみる」や「Python でジェネレータを作ったり、遅延評価してみる」の記事を ECMAScript 6 のジェネレータを使って記述するとどのようになるのか, 実際に試してみました. ECMAScript 6 の各ブラウザや処理系での実装状況の詳細はこちらを参照してください. 現時点でこの記事のコードがそのまま実行できる処理系はないと思われます. コードを Babel 等を用いて ECMAScript 5 のコードに変換するか (この場合ジェネレータを利用するために Polyfill が必要になります) arrow functions などの処理系が対応していない部分を書き換えて実行する必要があります. ジェネレータの基本 ECMAScript 6 で提案されているジェネレータについては「function* – Ja
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
form要素やオブジェクトの値をシリアライズします。 この関数は.serialize()のコアにあたるものですが、単体で個別に使っても有用な場面があるでしょう。
WindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 mozInnerScree
Plain JavaScript While alt examples encourage ES6 and alt was built with ES6 in mind it is perfectly valid to use plain old JavaScript instead. This guide will focus on a few examples of how you can use alt without the new ES6 hotness. Creating Actions There are quite a few ways to create actions. If they don’t process any data and just dispatch a single argument through you can generate them base
https://atnd.org/events/66159 で実施したプレゼン資料
supertestモジュールを使うとexpressのrouteのテストがすごく楽にかけます。 実装サンプルを載せてみました。 環境 express4.2 supertest0.1.3 mocha 1.20.0 shoud 4.0.0 テスト用express作成 本編とは関係ないですが、テスト用にアプリを作ります。 $ npm install express-generator $ express hoge $ cd hoge $ npm install テストコード作成 ルートディレクトリにtestという名前でディレクトリを作り、そこにテストコードを置いていきます。 $ mkdir -p test/routes ジェネレータで自動生成されるroutes/users.jsをテストしてみます。 ※アプリの立ち上げは必要ありません。 $ vim test/routes/users.test.js
import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm Overview ReactTestUtils makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing. Learn how to get started with Jest through the Jest website’s React Tutorial. Note: We recommend using React Te
今回はReact.jsとテストについて書きたいと思います。 React.jsとテスト React.jsのテストということはComponentに対してテストをすることになるので、DOMが絡んで来て辛そうだなと思うかと思いますがReact.jsはAddonとしてReact.addons.TestUtilsに便利な関数を提供してくれているのでそれを使うとテストが書きやすくなります。 DOMは必要? React.jsのテストを書くとき、server-sideでも動くのでnodeの環境でテストを実行したくなりますが、実際にonClickイベントに反応して〜などのテストを書こうとするとやはりDOMが必要になってきます。 ちなみに、Prop渡してrenderToStaticMarkupを使ってその結果のHTMLを確認するようなテストであればnodeの環境で実行することは出来ます。 イベントのシュミレート
JestでReact.jsアプリケーションのテスト Jestとは facebookがgithub.comに出している テスティングフレームワーク。 JestでReact.jsアプリケーションのテストを書く ...と書くとざっくりしているが、 Jestのサイトで、tutoria/reactに、React.jsアプリケーションでの Jestを使ったサンプルが載っていた。 コードもgithub.com上に上がっている。 githubリポジトリに、コードをそのまま載せてみた。 Jestを使うためのセットアップ 前提条件 node.jsのバージョンは2014年12月現在stableのv0.10.xxであること という条件がある。 React.addons.TestUtils Jest単体はReact.js向けのテストフレームワークとしては書かれておらず、 VirtualDOMを使ったり、clickイ
JavaScript のテストフレームワーク jasmine がゴキゲンだぜ。書きやすいしテスト結果も見やすいしかわいいよちゅっちゅ。 そんな jasmine ちゃんをまだ触ったことない人のために、出来るだけ取っ付き易くなるように解説してみたいと思います。拙作の jQuery プラグイン jquery.narrows.js のテストでも使っておりますので、これをサンプルとして説明していきます。 使用するバージョンは jasmine 2.0.0 RC5 スタンドアローン版。2系はまだRC版ですが、使っていて特に不具合に出くわしたことはないです。2系になって大きく改善してる部分もあるので、アグレッシブに使っていきましょう。(Rubyフレームワーク用の gem 版(jasmine-gem)というのもありますがここでは触れません) まずは見てみよう とりあえず実際に動くものを見てみましょう。jqu
ネタ元 下記を参考に自分の必要な部分だけ抜粋しました Jasmine使い方メモ - Qiita jasmineでjavascriptユニットテスト 導入と基礎 jasmin概要 Suite は describe 関数を使い、 Spec は it 関数で宣言する。 this はspecごとに初期化される。spec内のテストでは使いまわす。 suite、specの一文字目にx をつけることで実行しないようにできる。 xdescribe('suite', function() { xit('spec', function() { console.log("suite spec"); }); }); テストメソッド 用途 方法 備考 テスト開始前に処理 beforeEach(); テスト終了後に処理 afterEach(); foo === 1 であるか expect(foo).toBe(1);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く