JS 呼び出し元の this を担保するメモ。 - かもメモ
例 オブジェクト内の関数でsetTimeoutを使ってその中で、オブジェクト自身をthisとして使いたいような場合 var obj = { name: 'obj', func: function() { console.log(this); // => Object setTimeout(function() { console.log(this, this.name); // => Window, "result" }, 100); } }; obj.func(); そのまま書くと、setTimeoutで呼び出された関数のthisはWindowになる Functionが参照型だから、thisがwindowになってる？ undifinedではなくwindowになる理由の理解がまだ不明瞭。 伝統的な方法 var obj = { name: 'obj', func: function() {
JavaScriptにおけるオブジェクトの基本的性質
はじめに JavaScriptはオブジェクト指向言語です。従って、そのプログラミングは、オブジェクトの生成やプロパティの参照、メソッドの実行などを組み合わせる作業と言えます。つまり、オブジェクトを上手く扱うことができなければ、JavaScriptの良いコードは書けません。また、JavaScriptにおけるオブジェクトの考え方は、JavaやC++とは根本的に違っています。 そこで、この記事では、JavaScriptにおけるオブジェクトの基本的な性質について見ていくと共に、JavaやC++といった他のオブジェクト指向言語との違い、JavaScriptにおけるオブジェクトの扱い方などを解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JSc
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
オブジェクト内で定義したコールバック関数でオブジェクトのプロパティを変更する方法
MonacaクラウドでOnsenUI/AngularJSを使いアプリ制作の勉強中です。 ファイルを扱うAngularJSサービスオブジェクトを作っています。 フォルダのファイル一覧を取得するメソッドの中でFileSystemAPIを使うため コールバック関数を使わなくてはならないのですが、その中でファイル一覧を格納するプロパティ(this.x)を書き換えようとすると以下のようなエラーが出ます(use strict)。 Error in Success callbackId: FileXXXXXXXXXX : TypeError: Attempted to assign to readonly property. JavaScriptの仕様のようですが、コールバック関数内でプロパティを変更する スマートな回避方法があればお教え頂けると幸いです。 再現する簡略化したコードを追記いたします。 実
純粋な JavaScript を使ったブロック崩しゲーム - ゲーム開発 | MDN
次のページ このステップバイステップのチュートリアルでは、すべて JavaScript だけで書かれた、 HTML5 の <canvas> で表示できる簡単な MDN ブロック崩しゲームを作ります。 各ステップには編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながらプレイすることができます。画像のレンダリングと移動、衝突検出、制御機構、勝敗状態などの基本的なゲーム メカニックを使用するための <canvas> 要素の基本的な使用方法を学びます。 このシリーズのほとんどの記事は理解するために初歩または中級レベルの JavaScript の知識を必要とします。このチュートリアルを一通りこなすことで簡単なウェブゲームを作れるようになるでしょう。 全てのレッスンは以下の通りです。そしてこれから一緒に作る MDN ブロック崩しゲームの各バージョンは GitHub 上で入
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
本記事は、以下の記事の翻訳です: WebAssembly: How and why by Milica Mihajlija on LogRocket * 執筆者に許諾を頂いた上で掲載しています。 どのようにしてブラウザでネイティヴ・コードを実行するのか そこにはどのような背景があるのか それは JavaScript にとって、さらには Web 開発にとって、いったい何を意味するのか すべてのブラウザにおいて、すなわち Chrome / Firefox / Edge / Safari いずれにおいても、コードは JavaScript エンジンによって解釈されて実行されます――ただ JavaScript が実行されるだけです。 残念なことに、JavaScript は、実行したいあらゆる処理にとって理想的なものというわけではありません。 ここに WebAssembly の入り込む余地があります。
![WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a60c03486bcbaa4195e7ec67f0de721a8d95643b/height=288;version=1;width=512/https%3A%2F%2Fmedia2.dev.to%2Fdynamic%2Fimage%2Fwidth%3D1000%2Cheight%3D500%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto%2Fhttps%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Farticles%252Fanhijvzibeb4rb4dy42o.png)
Underscore.jsの使い方 ｜ Tips Note by TAM
今回は、javascriptのライブラリ「Underscore.js」の使い方をご紹介します。 ■ 公式 Underscore.js(http://underscorejs.org/) ■ 日本語訳 enja-oss/Underscore ・ GitHub Underscore.jsとは Underscore.jsは、主にjavascriptの関数や配列、オブジェクトを扱う際に頻繁に発生する処理が、 100種類程度のメソッドとしてまとめられている軽量なライブラリです。 （投稿時の最新バージョンは1.5.2。圧縮版のサイズは4.9kb） リリースからは既に数年が経過しており、 JavaScriptのフレームワークであるBackborn.jsで依存ファイルとして使用されていたり、 Backborn.jsとともにVersion 3.5以上のWordPressに同梱されていたりするようですので、
Sprockets再考 モダンなJSのエコシステムとRailsのより良い関係を探す - Qiita
すいません。締切守れませんでした…。 やっぱ、java-jaの忘年会の翌日は辛い…。 はじめに Webシステムを開発していると切っても切れないのがJavaScriptです。 Railsはかなり早い時期からalt-JSや結合、minify等を組み込めるようにフレームワークにそれを取り入れてきました。 それを支えているのがRails3.1から導入されたsprocketsです。 それに伴なってJSのライブラリをどうやって管理するかという点について、独自の路線を取ることになりました。 JSのライブラリを同梱したgemパッケージにラップしてrubygemsとして管理する方法です。 ある程度は上手くいっていたし、今もその流れは続いているんですが、時々問題になることもあります。 例えばメンテナの対応時期がズレてて古いバージョンのままだったり、似たようなgemが乱立してややこしくなったり。(backbon
Flow練習した - hitode909の日記
Flowはfacebookが作ってるJSに型を書けるやつ． 今日ちょっと練習してみたところ良かった．練習に手頃なところから型でも書いてみるかとやっていたところ，FormDataにFileをappendするところで，それはFileじゃなくて?Fileで，nullになる場合もあるのでおかしいよって教えてもらったりした．型をつけるだけで不具合が見つかって，こういう世界もあるのか，という感じだった．fileがなかったらreturnする処理を足しておいた． ちょっとずつ書いていけるのがよくて，このファイルは難しいことをしていて型が付くと恩恵を受けられそう，とか，このあたりはこれからがっつり開発するので先に型を付けておこう，といった進めかたができる． 最初はちょっと慣れない部分もあったけど，ちょっと練習したら普通に書けるようになった．シンタックスがちょっと増えるので，どこまでJSのシンタックスで，どこ
input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。 - かもメモ
HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使っちゃうのが一番楽な気がしています。 ただ、レスポンシブとかにするならスマートフォンのキーボードの関係もあってinput[type="date"]を使いたいってケースも多いです。 そこで今回は、input[type="date"]でフォームを作成して、input[type="date"]をサポートしていないブラウザの時だけjQueryUIのdatepickerを使うようにするメモです。 modernizr.jsを使う modernizr.jsはJavaScriptのライブラリです。 閲覧者の
![input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。 - かもメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c9c3d8269c7f1cea26f415408037cbfda12323f/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fa9dee7a0f25826f7229489fef211d5679dab08e3%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkikiki-kiki%252F20150928%252F20150928175206.png)
Home · takahashiakira/tech_for_web Wiki · GitHub
Technology for Web Developers Webエンジニアリングに関するトピックで、フロントエンドをメインにバックエンドやインフラ周りまで、個人的にまとめたドキュメントを公開してます。 なんの気なしに公開していたドキュメントでしたが、最近急激に読者が増えてきて、そろそろ内容も古くなってきたこともあり今後真面目にメンテナンスや運用方法を検討中です。 ※本Wikiは内容が古かったり誤りがある可能性がありますのでご了承ください。 ※内容に致命的な問題を発見した場合はお気軽にご指摘ください。 Front-end FEのためのJS基礎 これだけ覚えるべきJSの基礎 現場で使うjQuery FEの実践的なJS頻出表現 フロントエンド環境構築とnpm CommonJSモジュール運用 JS小規模なView設計 JSモジュール設計 ReactとRedux Reactの基礎 Reactの実践
フロントエンドのモダン化とJavaScriptモジュールの
依存解決
Modern Web App LT!（freee x WACUL）で発表した資料です http://connpass.com/event/31305/
BACKBONE.JSによるWebアプリケーション開発について
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。
仕様の決まる速度で実装する - mizchi's blog
最近プロトタイピングの仕事が多くて、とにかく雑に実装して、これでいいかデザイナかディレクターに確認とって、そこでリファクタみたいな過程をとることが多い。技術的にどこまで可能か未検証で、かつ仕様もはっきり決まっていないので、手戻りを最小にするためにとにかく早い段階でデモをみせる。 技術的にどこまで可能なので、どうすると開発が楽で、どこから先が大変で、どこから先が不可能かを説明しながら、その場で仕様の隙間を埋めたり、時には仕様を変更することがある。プロトタイピングの段階で勝手に一部の仕様を決めちゃって、事後追認してもらってるときもある。そこで、説明しながらその場でコードを書いてる。 エンジニア同士のペアプロは、コードを書く過程そのもの意味があるから、すべての過程をみせることに意味があるんだけど、非エンジニアに自分の席の隣に来てもらって、説明しながらの作業だとエディタを長い時間みせるわけにはいか
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート WebアプリケーションのサーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」が海外では少しずつ話題になってきています。MEANスタックとは、次のソフトウェアの頭文字をとったものです。 MongoDB：NoSQLデータベース Express：Node.js対応のフレームワーク AngularJS：Webアプリケーションのクライアント用JavaScriptフレームワーク Node.js：サーバサイドJavaScriptエンジン オープンソースであるLinux、MySQL、Apache、PHP/Perlの組み合わせが「LAMPスタック」と一般に呼ばれるように、JavaScriptを軸にした上記の4つの
Веб студія CodeWeb ᐉ Web агентство розробки та створення сайтів
Веб студіяБудь-який вид бізнесу, а тим паче його розвиток неможливо уявити без взаємодії з людьми, які є потенційними партнерами або клієнтами. У сучасному світі всі питання, що стосуються бізнес-завдань і залучення замовників вирішуються через Інтернет. Замовити сайт веб студії Codeweb, можна з повним циклом розробки. Наше агентство займається проектуванням і розробкою багатозадачних ресурсів, са
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
audio.js
audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css. Installation Put audio.js, player-graphics.gif & audiojs.swf in the same folder. Include the audio.js f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Universal JavaScript
Free Bootstrap Slideshow