Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
1年後に読み直しても発狂しないJavaScriptを書く15の方法
「そのコメントわかりづらいんだよ！」なんて上司や同僚に叱られちゃった人へ。コメントがなくてもわかりやすいJavaScriptを書くテクニックです。コメントを書かなくていい、ということではないので、あしからず。 本記事はTim Severien、Mark Brownが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 完全に場違いで無意味なコードのコメントを書くのはつまらないと思いませんか？ 一番ありがちな間違いの例は、いくつかのコードを変更したあと、コメントの削除や更新を忘れてしまうことです。悪いコメントがあるからと言ってコードそのものは壊れませんが、デバッグ時にどうなるかを想像してください。そのコメントが読まれるとします。そこには何かが書いてあるわけですが、コードはまったく別のことを実行します。おそらく、コメントとコ
Babelの手ほどき | 前編 Babelとは
Babelの手ほどき 前編 Babelとは BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラです。Babelがどのような働きをするか解説します。 Babelとは 今回紹介するBabel（バベル）*は、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換（トランスパイル）します。 「次世代のJavaScriptの標準機能」というのはECMAScript（以降、ESと呼びます）のバージョン6や7で追加された（る）機能、そしてさらにその先の標準機能です。 *注：元々は6to5という名前 Babelはもともと6to5という名
テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal
テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal 高津戸壮（株式会社ピクセルグリッド） これまでのJavaScriptでは、複雑な文字列処理はテンプレートエンジンを使うことが一般的でした。しかしECMAScript 2015（ECMAScript 6）では、パワフルなTemplate literalが標準で利用できるようになりました。この新たに追加されたTemplate literalについて、概要とサンプルコードを紹介します。 これまでの文字列組み立て ES6で追加されたTemplate literalを使うと、文字列をより柔軟に、シンプルに組み立てることができます。例えば、これまでのJavaScriptでは、文字列を組み立てるために、例えば以下のような方法を取る必要がありました。 var name = 'john'; var cou
エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」 – bl6.jp
iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィンドウを実装できるjQueryプラグインです。洗練されたデザインで、アニメーションもとても優雅。さらに容量も軽量ということで、これからモーダルウィンドウを実装したいという人には、有力な候補になるのではないでしょうか？ iziModalの実際のデモは以下のページから確認できます。 デモ ページ内には、Default、Iframe、Custom、Alert like、Alert like II、Large Contentというサンプルが用意されています。 一般的なテキストの表示から、動画、フォーム、アラート、長文などさまざまなコンテンツを美しいモーダルウィンドウで魅せることができます。 モーダルウィンドウの立ち上がりや終了時のアニメーションが、とても滑らかでオシャレですね。シンプルでエレガント、それでいてレスポンシブ対応なの
jQuery UIについて１ - LotosLabo
jQueryUIとは jQueryを拡張したもので、主にUI(ユーザーインターフェース）に特化したものです。 開発環境 jQueryUIをやっていくに当たって以下の二つが必要になります。 ・jQueryプラグイン ・jQueryUIプラグイン ・jQueryUIテーマ まずjQueryには前記事のURLを使います。 http://code.jquery.com/jquery-1.11.0.min.js jQueryUIには http://code.jquery.com/ui/ のページにある、javascirptプラグインとcssを使っていきます。 プラグインはjQuery UI 1.10.4のminifiedを使っていきます。 http://code.jquery.com/ui/1.10.4/jquery-ui.min.js CSS（テーマ）は、Themesというところから選んでください
D3.jsにあてはまらないこと | POSTD
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
【JavaScript】共通部分を外部化してメンテナンス性を高めよう | blog.ks-product.com
近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上…近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード（読み込み）することが多いと思います。 しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。 サーバーサイド言語が使えなくてもJavaScriptがあるじゃない 共通部分の外部化・インクルードはサーバーサイド言語でなくてもJavaScriptで行えます。iPhoneの登場以降JavaScriptの地位はかなり向上してデファクトスタンダード的な存在になりま
on{x}が面白いので色々やってみた - 凹みTips
はじめに https://www.onx.ms/#!landingPage on{x} とは Microsoft が開発している Android 上で動く「日常のタスクを自動化してくれる」ツールです。Android の機能で何かイベントをキャッチ（ある場所についた、ある WiFi spot に接続した等）したらほげほげする、みたいなことができます。スマホは要はセンサの詰まった宝箱のようなものなので、わざわざこういったセンサを自作しなくともスマホを利用してあげれば、たいていのやりたいことは実現できます。似たようなコンセプトのものには Tasker が挙げられます。 を公開。ウェブでルール作成}マイクロソフト、日常タスクを自動化するAndroidアプリ on{X} を公開。ウェブでルール作成 - Engadget Japanese Androidのあらゆる操作を自動化できるアプリ『Tasker
アロー演算子の書式比較 - Qiita
Introduction Rubyのラムダ式でアロー演算子を覚えて使うようになりました．そんなある日，Groovyに手を出したのですが，アロー演算子によるメソッド定義の書式がRubyと異なるので「？」となって，色々な言語のアロー演算子の書式について調べてみました． 調べてみると，「ラムダ式」「アロー演算子」「アロー関数」「クロージャ」など呼び方も仕組みもさまざまであり，同じものとして扱って良いのか悩みましたが，せっかく調べたので公開します．この投稿内容では，『「=>」か「->」を使ってメソッド（のようなもの）を定義して変数に代入し，（メソッドのように）実行できる』ものを対象としています． 他にもアロー演算子によりメソッド（のようなもの）を記述できる言語はありますが，短時間で調べたので抜けがあります．ご指摘いただければ徐々に改訂していきたいと思っています．できればサンプルプログラムとともにご
JSLintとJSHintとhoisting - くろまほうさいきょうでんせつ
↓こんな記事を発見。(私がJSLintをフォークしてJSHintを作った理由) http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to-jshint/ ここで話題になってるJSLintを作った人が、今読んでるJavaScript:Good Partsの著者らしいのでちょっと興味が沸いて読んでみた。 JSLint でのチェックができない！ よくあるコードだと思うんですが↓のようなコードをJSLintすると var myfunc = function() { for ( var i = 0; i < 3; i++ ) { /* something */ } }; ↓こんなふうに言われてそれ以降のチェックが行われない。 Error: Problem at line 2 character 11: Move 'var' declara
Ajaxによる非同期通信(1/5):初心者のためのjQueryプログラミング入門 - libro
現在、JavaScriptでもっとも重要な機能は何か？といえば、「Ajax」と多くの人が答えるでしょう。Ajax（JavaScript + XMLによる非同期通信）は、ページを移動することなくサーバーへ必要に応じて接続しデータを取得する手法として広く使われています。が、このAjaxという機能、非常に便利ではあるけれど問題もあります。 １．互換性の問題。Ajaxの機能を提供するオブジェクトが、Webブラウザによって微妙に違いがあります。はっきりいえば、IEのやろう……いえ、IEの旧バージョンがActiveXを使った特殊なアプローチを取っていたためです。「IEの最新版しか対応しない！」と割りきってしまえばいいのですが、まだIE6がかなり使われている現状では、ある程度、古いバージョンの対応も考えなければいけないでしょう。 ２．コーディングの面倒さ。「非同期通信」というのは、通信を開始したらしっぱ
JavaScriptのクラス？コンストラクタ？？ - Qiita
最初に、JavaScriptにはクラスはありません。 コンストラクタからインスタンスを生成します。 なんだかなぁ・・と言う人は、 とりあえず単語は置いておいてコードから理解してください。 コンストラクタの基本 function Dog(name, cry) { this.name = name; this.bark = function() { console.log(cry); }; } var dog = new Dog('きなこ', 'わんわん'); console.log(dog.name); // きなこ dog.bark(); // わんわん もし「new」を忘れたら、関数呼び出しになってしまって一大事です。 これがわからない方はこちらの記事へ。 「JavaScript」の「this」は「４種類」？？ newの挙動 もし「new」をつけた場合は何がおこっているのか。 実は暗黙の
重なった要素のonclickイベントについて - Divを複数重ね、それぞれにonclickを指定すると重なったDiv全てのonc... - Yahoo!知恵袋
何をしようとしているのかよくわかりませんが、 -------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>sample</title> <div class="a"> <div class="b">b</div> <div class="b"> <div class="c">c</div> <div class="c">c</div> </div> <div class="b"> <div class="c"> <div class="d">d</div> </div> </div> </div> <script type="text/javascript"> document.getElementsByTagName("DIV")[0].addEventListener("click", f
Lessmilk Tutorial: Make web games with Phaser 3
Phaser is a popular JavaScript framework to build HTML5 games that run in the browser. It is free, powerful, simple to use, and actively maintained. I believe it's the perfect framework to start making games. In this tutorial we will build a game where the player is getting points every time he touches a yellow coin. That's super basic, but it's also a great example to learn how Phaser works. Here
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
http://blog.yuku-t.com/entry/20111109/1320848444
http://www.hp-stylelink.com/news/2014/05/20140516.php
