JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
JavaScriptで、メソッドをコールバックとして渡す方法(コールバック関数でthisをbindさせる方法) · DQNEO日記
Home Subscribe var obj = { name : 'pikachu', say : function(){ alert('I am ' + this.name); } } setTimeout(obj.say, 1000); // => 'I am'とだけ表示される。 これは期待通りに動いてくれません。 コールバックとしてメソッドを渡した場合、それはオブジェクトと切り離された単なる関数(メソッドではない)となってしまうのです。 つまり下記と等価なのです。 setTimeout( function(){alert('I am ' + this.name);} , 1000); 関数がオブジェクトと切り離されているため、このthisはグローバルオブジェクト(windowオブジェクト)を指してしまっており、'I am'とだけ表示されます。 ではどうすればよいでしょうか？ bin
Learning Advanced JavaScript
Double-click the code to edit the tutorial and try your own code. This tutorial contains code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig. Our Goal Goal: To be able to understand this function: // The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return
jQueryコードリーディング:初期化まわりを詳しく、およびextend - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
前回は配列およびeachについて読んでいきました。 今回は、前回軽く触れたjQueryの初期化について詳しく見ていきたいと思います(クエリセレクタ/エレメント操作まわりの話はまた今度)。 対象 jQuery 1.5.0 よんでみよう jQueryのソースは、外側をfunctionで囲まれています。 (function( window, undefined ) { // さまざまな初期化 // ... })(window); このfunctionはwindowとundefinedという二つの引数を取っています。 javascriptのundefinedというのは未定義の値を表現するのに使われていますが、有名な話として、これは定数や予約語ではありません。 var undefined="hello"; alert(undefined); // "hello" このように、ユーザが同名の変数を定義
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
【入門】webアプリ開発を習得するための手順、言語、本、フレームワークまとめ | らふらく^^ ~ブログで飯を食う~
【重要な追記】プログラミング独学はキツいと、本題になる前に重要なことを書いておきます。 僕も最初そうでしたが、JavaScriptなどプログラミングは独学だと難しくて投げ出したくなります。 僕もできずに心が折れかけていました。 そんな時に東京でプログラミング教室をやっていることを知り、参加してみたのでした。 ＞＞プログラミングでできること、日常生活での活用例、主要言語などまとめ プログラミング教室で理解速度は格段に上がる結果、プログラミングへの理解度がかなり高まり、その後の勉強がスムーズにいきました。 なので、僕はお金を払ってでも、プログラミング講座、スクールには行った方がいいと思っています。 当時、学生ながら3万円くらい払いましたが、そこに投資して本当に良かったです。 今月から有料プログラミングスクールに通うことに 独学だと概念理解できなくてつまずいてしんどかったので 結果として行ってよ
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
jQueryプラグインの作り方の初歩
自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大枠の構成だけですが、基本的な作り方を調べてみました。（あとは引数で設定を変えるのがかっこいいと思ったので作ってみたかったのもあります。） 無名関数 他の領域に干渉しないされないように以下の記述で囲みます。jQueryを引数として指定しているので、この中でも$表記が使えます。 (function($) { //中身 })(jQuery); メソッドを追加する ここが実際に処理するコードを書いていく場所です。「$.fn.hogehoge」のhogehogeの部分がメソッド名になります。 (function($) { $.fn.hogehoge = function(options){ //プラグインの中身 } })(jQuery); 使用する 実行のコードです。プラグインを使うときによ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
初心者のためのjQueryプログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
KAYAC Engineers' Blog
SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、本記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ
enchant.jsでつくる“シロートが3時間でゲームをつくる”作り方 - 週刊アスキー
JavaScriptで書かれたソースコードはたったの75行 window.onload = function() { game = new Game(320, 320); game.fps = 24; game.life = 3; game.time = 60; game.score = 000; var label; game.preload(['http://jsrun.it/assets/k/r/t/X/krtXz.gif','http://jsrun.it/assets/v/1/a/l/v1alF.gif','http://jsrun.it/assets/e/B/C/G/eBCGr.gif']); game.onload = function() { bear = new Sprite(32, 32)
node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ
かれこれ2ヶ月くらい、ちまちまと作り続けていたのがようやく動くようになったかなーという状態になったので公開してみる。 http://www1216u.sakura.ne.jp/livecoder/ 公開停止しました 手元のMacでChrome, Safari, Firefoxでは動いていた。IEは知らない。 ソースはGithubに。 https://github.com/sugyan/live-coder 使い方 Twitterでsignin。 /edit のエディタ上でテキストを編集すると、 /view/ でリアルタイムに編集が反映される(こちらはread only)。 同じユーザのページを見ているユーザ同士でのテキストチャットが可能。 構成 Server node.js v0.4.1 ライブラリはnpmにて socket.io, express, ejs, oauth, configを
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
jQueryを読むために知っておきたい6つの知識 : tech.kayac.com - KAYAC engineers' blog
夏休みはタイ古式マッサージセミナーに参加してきました。agoです。 先週日曜日若手IT勉強会に参加させていただき、jQueryのコードリーディングを行ってきました。 そこでjQueryのコードを読むときの基礎知識に関して簡単にまとめてみたいと思います。 1 変数の複数同時宣言と代入 まず、JSでは変数の宣言は以下のような形式で行います。 var hoge; この場合は単一の変数の宣言ですが、以下のような記述を行うと複数の変数を同時に宣言することが可能です。 var hoge, huga; また、変数宣言と同時に値の代入を行うことも可能で、その場合以下のような記述になります。 var hoge = 'test'; さらに複数の変数宣言と、値の代入は同時に行うことが可能で、その場合以下のような記述になります。 var hoge = 'test1', huga = 'test2'; jQuery
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
GitHub人気レポジトリランキング Best50 全解説 - 方向
GitHubで人気レポジトリのランキングが公開されているようなので全解説してみました． どれも素晴らしいものばかり! あなたのプログラミングライフを快適にしてくれるライブラリがきっと見つかるはず!! rails rails 9835 watching Ruby on Rails. 説明不要だよね! フルスタックWebフレームワーク jquery jquery 8710 watching JavaScriptライブラリ．これも説明いらないよね! node joyent 8572 watching 旧名node.js．昔の名前の方が通りがいいです．JavaScriptエンジンのV8用のノンブロッキングIOな何か．主にWebサーバ/アプリケーションに使われる． html5-boilerplate paulirish 6998 watching HTML5とかのテンプレート集．ただし公式ページのデ
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Ajax 実践サンプル集