中上級者になるためのJavaScript【知識編】 - Qiita
【News】電子書籍化しました！ Gitbook Read Online Download PDF Download EPUB Download MOBI この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜひこの機会にJavaScriptを復習してみてください。
jQueryで複数のイベントを割り当てる - ZeBeVogue別館
何度も使っているのに、ちょっと使わないと忘れちゃうのでメモ。 「複数のイベントを割り当てる」といっても二つの意味があって、それぞれ 複数のイベントに１つのイベントハンドラ（メソッド等）を割り当てる 複数のイベントそれぞれに個々のイベントハンドラを割り当てる と意味が異なる。 良く忘れるのは上の方だけど、混乱してしまうので一緒にまとめておきます。 複数のイベントに１つのイベントハンドラを割り当てる $("#bind").bind("click dblclick", function(event){ // click イベントと、dblclick イベントに同じイベントハンドラを設定 }); 文字列スペース区切りで渡す。 複数のイベントそれぞれに個々のイベントハンドラを割り当てる $('#bind').bind({ click: function() { // click event }, m
JavaScriptのオブジェクトのキーに変数の値を使うTips - Qiita
はじめに JavaScriptから外部サービスのAPIへリクエストを投げる時、公式SDKを使うことはよくありますよね。 直接SDKを使ってリクエストを投げてもいいのですが、同じようなリクエストを複数の箇所で書いていると、コードが重複して無駄です。 そこで共通で利用できるように、ラッパー用の関数を自前で実装することは多いと思います。 そんな時に、リクエストで渡すパラメータのキーに対して変数の値を使う方法がわからなかったので、まとめました。 ドット演算子とブラケット演算子 JavaScriptのオブジェクトのプロパティにアクセスする方法には、ドット演算子とブラケット演算子の2つがあります。 var user = { 'name':'Jonh', 'age':24, 'gender':'male'}; var userName = user.name; console.log(userName)
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu
WebStorm（IntelliJ）で快適HTMLコーディング
WebStorm(IntelliJ) は JetBrains という会社の製品です。（有料です！） ダウンロードは下記アドレスをご覧ください。 JetBrains だいたい名前でわかると思うのですが言語ごとに別々の製品になっています。 下記のスライドがわかりやすいです。 簡単にご説明すると、HTML / JS だけ開発できればいい人は WebStorm PHP を開発したいひとは PhpStorm（WebStormの機能も含まれる ） もし、2つ以上の言語（PHP と Ruby など）を使用したい場合は PhpStorm + RubyMine じゃなくて IntelliJ を購入した方がお得です。 （IntelliJ は Java 用かと思いきやすべてのWeb系パッケージが含まれています。） IntelliJ は Java 以外の言語をプラグインという形で提供しているので、新しいバージョン
ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
JavaScript:プロトタイプチェーン詳解！prototype と __proto__ について | siro:chro
JavaScript:プロトタイプチェーン詳解！prototype と __proto__ について 2017 6/03 prototype や __proto__ それぞれを詳しく説明しているものは存在しますが、この２つの違いを明確にまとめている情報があまりありませんでした。 そこでプロトタイプベースとはどういうことなのか、コード上に登場する prototype や __proto__ とは一体何なのかを自分なりに整理してみました。 更新履歴 [2017.06.03] コンテンツ修正しました。sititou70様、ご指摘いただき有難うございました。 [2014.07.19] コンテンツ修正しました。通りすがり様、ご指摘いただき有難うございました。 JavaScript は「プロトタイプベース」のオブジェクト指向言語です。 まず最初にこの「プロトタイプベース」のオブジェクト指向とはいったい
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
これからBackbone.jsを始めるならこれ読んどけばOKという記事たち - Qiita
Backbone.jsで書き始めたら「Backboneどう？」と聞かれることがあったので、自分ではあんま語れるほど知らないけど「ここらへんの記事は素晴らしいよ！」というものをまとめておいたヽ(・ω・´)ゝ まずは読んでおくべきもの Backbone.js Advent Calendar 2011 なにはともあれまずはBackbone.js Advent Calendar 2011 ある程度まで書けるようになる情報は総ざらいで書いてあると思う。 中でもBackbone.js入門はありがたい。読んでおけば基本の仕組みを知ることが出来る。 Backbone.jsが依存しているunderscore.jsの情報なんかもあったりしてありがたい。 ちなみに今年(2012)のAdvent Calendarはこちら。今はまだ始まったばかりだから情報少ないけどこれから充実してくるだろうし楽しみ（´ω｀） Ba
翻訳家が教える3ヶ月で英文をスラスラ読める様になるための7の手順
Tweet Pocket 当然ですが翻訳家は、英文や英語の記事をスラスラと読むことが出来ます。翻訳家でなくても、普段から英文を読み慣れている人は問題なく読むことが出来るでしょう。ここで1つの疑問が出てきます。 「スラスラと読める人の頭の中は、一体どうなっているの…？」 もちろん翻訳家も最初からスラスラ読めたわけではありません。翻訳家として専門のトレーニングを積んだり、あるいは英文を読む勉強を重ねて読むスキルを身に付けたのです。 それでは翻訳家が『英文を読むスキル』を得るための方法とは、どのようなものなのか？今回はその特別な方法をご紹介します！！この方法は上達の壁を感じることなく、比較的スムーズに『読むスキル』身につけることが出来るのです。そして3ヶ月程度で読む力に大きな上達を感じることができます！それでは、さっそく確認していきましょう。 1.リアルな英文を読む環境を整える最初にやるべき事は
【git入門3】gitの使い方 コミットの打ち消し(revert) - Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご
前回の続きです〜 今回はコミットの打ち消しについてです〜 gitの使い方 コミットの打ち消し(revert) ①revert(打ち消し)とは コミットの打ち消しをすることにより、以前のコミットに戻ることができます〜 今のところFirst CommitとSecond Commitを作ってきて、現在のコミット位置はSecond Commitにあります〜 打ち消しの利点は、First Commitに戻った時にSecond Commitの情報が消えない点です〜 「First Commit作成」→「Second Commit作成」という履歴が 「First Commit作成」という履歴に変わるのではなく、 「First Commit作成」→「Second Commit作成」→「Second Commit作成の打ち消し」という履歴に変わります〜 Second Commitは履歴の中に残り続けるので、安
jQueryでselectタグ内のoptionタグを削除する方法をいくつか |
そんなに難しい話では無いですが、ごく最近ちょっと手間取った（力不足なだけ・・・）ので、自分用のメモ。 フォームでselectを使っている場合に、ページ内で何かの操作をした時にselectタグの子要素になるoptionの内容、要するに選択項目を書き換えたいという時が結構あると思います。 optionの追加はprepend（選択黒目の先頭に追加）またはappend（選択黒目の末尾に追加）を使います。これについては結構情報も多かったので問題は無いと思いますが、削除についての情報は少ない気がしました。 というわけで、選択項目を削除する時のコードをいくつか。 選択項目を一つだけ削除する場合 まずはこんなコード。『id=area』という指定がされているselectタグがあるとします。 $('select#area option:first-child').remove(); 『first-child』
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
ZIGExN BLOG（じげんブログ） — そうだ、Sass使おう（Railsフロント開発者向け）
こんにちは！株式会社じげんの戦略子会社にじげんに所属している北國です。 じげん、にじげん共に運営サービスはRailsを使って開発しているのですが、 にじげんでは、フロントエンド開発においてsassを利用しています。 cssからsassへの移行・学習コストは非常に低く、 コード量が減り、メンテナンス性も高いため、にじげんではsassを愛用しています。 今回は、sassをRailsに導入し、超便利な@mixinの事例をご紹介します！ (scssではなく、sassです) Railsでsassを導入するsassの導入はすぐできます。 Gemfileに下記のコードを追加して、bundle installするだけです。 gem 'sass-rails', '~> 4.0.3' （ruby 2.1.2, rails 4.1.4） 各ブラウザに対応するためのprefixは絶対sassの方が便利！IE, C
JavaScriptのデバッグ | 第1回 ブレークポイントの使用
JavaScriptのデバッグ 第1回 ブレークポイントの使用 Chromeのデベロッパーツールを例に、ブレークポイントの使い方を解説します。プログラムの任意の行を基準に、処理が進む過程をコントロールしながら、関数の実行や、変数の内容などを検証していくことができます。 デバッグスキルを高める プログラマに必要とされるスキルはいくつかありますが、その中でもエラーの原因をすばやく突き止めることができる、デバッグのスキルは非常に重要なスキルのひとつです。 デバッグのスキルは経験に依存するところも大きいですが、ツールの使い方を知り、使いこなすことができることも重要です。本シリーズでは、Google Chromeのデベロッパーツール（開発ツール）を利用したJavaScriptのデバッグ手法を解説します。 第1回目はブレークポイントという機能を使い、途中でプログラムの実行を止めることで効率的にデバッグ
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
JavaScriptの「this」は「4種類」？？ - Qiita
javascriptの「this」は「4種類」？？ この記事ではベースとなる４種類の「this」を紹介します。 実際は４種類ではないのですが、 このベースの４種類を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン ここで重要なのは「呼び出し元」をみることです。 なぜなら「呼び出し元」に「this」は左右されるからです。 メソッド呼び出しパターン これはもう一番直感的にわかりやすいです。 説明はいらないんじゃないかという感じなのですが、 一応ソースを。。 //メソッド呼び出しパターン var myObject = { value: 10, show: function() { console.log(this.value); } } myObj
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」をつけた場合は何がおこっているのか。 実は暗黙の
IT戦記 - JavaScript の this について
WEB+DB PRESS 編集の R たんから、僕の連載記事に読者様から質問が来ていると教えていただいたので、その内容を教えていただきました。 以下、内容を転載 「JavaScriptわくわく開発道」の記事に関して質問です。 今回の内容で特に興味を持ったのはthisキーワードの振る舞いでした。 thisキーワードの説明には、オブジェクト型の変数を別の変数にコピーしてから初期化すると、コピーした変数からメソッドを実行できなくなるという例が紹介されていました。 そこには「（1）の時点でobj0には{}が入っているため、hogeは未定義となってしまう」という説明があるのですが、誌面の都合上省略があるためか、thisキーワードを用いることで問題を回避できるという理由がなかなか理解できないでいます。 自分なりに考えてみたところ、内部的には以下のようなことが起きているのではないかと思いました。 (1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript/DOM｜PHP & JavaScript Room
