タグ

JavaScriptに関するkasumaniのブックマーク (43)

  • [JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET

    こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。 Special Thanks to https://flic.kr/p/92J4Qt 目次 利用者としての付き合い方 最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。 jQueryを使う理由 最近感じるjQueryを使うメリットは、以下のようなことがあります。 何かサクッと作る

    [JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET
    kasumani
    kasumani 2014/12/15
    最近のjQueryとの付き合い方いろいろ こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いて
  • [JavaScript] グローバル変数とグローバルオブジェクトを取得する方法 - Qiita

    JavaScript のグローバル変数とグローバルオブジェクト Webブラウザ上では window はグローバル変数だ。 そのプロパティは全てグローバル変数だ。 この window というグローバル変数は特別なオブジェクトでグローバルオブジェクトと呼ばれる。 var a = []; for (var i in window) { if (window[i] === window) { a.push(i); } } console.log(a.join(', '));

    [JavaScript] グローバル変数とグローバルオブジェクトを取得する方法 - Qiita
    kasumani
    kasumani 2014/10/17
    グローバル変数を取得する方法 Webブラウザ上では window はグローバル変数だ。 そのプロパティは全てグローバル変数だ。 そう言えば普通に関数を呼べば this はグローバル変数だったよね。 Tags: ifttt, kasumaniのストックした
  • [JavaScript] zeroclipboard を使って js だけでクリップボードにコピーする方法 - Qiita

    runstant でボタンによる short url のコピー機能を実現するにあたり, 色々調べたら zeroclipboard とかいうライブラリに行き着きました. わりと使いやすいのに日語で書かれた最新版の使い方がなかったので 備忘録がてらまとめてみました. zeroclipboard とは? ブラウザ上で js を使ってコピーを実現するためのライブラリです. 内部的には flash を使っているみたいです. github サンプル 最小サンプルです. サンプル クリックするとクリップボードにテキストがコピーされているのが 分かるかと思います. コード html html は下記のような感じです. zeroclipboard は cdnjs 経由でサクッと読み込んでいます. ボタンを押した際にコピーしたいテキストをボタンの data-clipboard-text 属性に入れておきます

    [JavaScript] zeroclipboard を使って js だけでクリップボードにコピーする方法 - Qiita
    kasumani
    kasumani 2014/08/07
    zeroclipboard を使って js だけでクリップボードにコピーする方法 runstant でボタンによる short url のコピー機能を実現するにあたり, 色々調べたら zeroclipboard とかいうライブラリに行き着きました. Tags: ifttt, kasumaniのストックし
  • [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita

    [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてJavaScripttips ※家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ null とか undefined とか 0 とか 空文字('') とか false とかの 判定について書いてみました. 各型, 値の評価 各型, 値が条件式でどう評価されるのかを見てみましょう. value type result

    [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita
    kasumani
    kasumani 2014/06/18
    null とか undefined とか 0 とか 空文字('') とか false とかの判定について この条件が true になるのは上の表から分かるように null, undefined, 0, 空文字(''), false になります. 何故なら 0 の場合も true になっちゃうので 0 を渡した時に
  • [JavaScript] isNaN() の謎な挙動とその対策 - Qiita

    console.log(isNaN(NaN)); // true console.log(isNaN(5)); // false console.log(isNaN(true)); // false console.log(isNaN('NaN')); // true console.log(isNaN({a:100})); // true いやいや下の2つw そっちのほうが便利な場合もあるのは分かるんですが... isNaN() 謎挙動の理由 引数が暗黙的に数値に型変換してそれが NaN に変換されちゃって true が 帰ってきてるのだと思われる. isNaN() 謎挙動への対策 感覚的には NaN のときだけ NaN を返して欲しい! って調べてたら ECMAScript6 では Number.isNaN() ってやつが定義されてて これだとちゃんと NaN のときだけ true を

    [JavaScript] isNaN() の謎な挙動とその対策 - Qiita
    kasumani
    kasumani 2014/06/17
    isNaN() の謎な挙動とその対策 グローバルで定義されている isNaN() が 謎の挙動をするので再定義するコード書いた. 引数が暗黙的に数値に型変換してそれが NaN に変換されちゃって true が 帰ってきてるのだと思われる. Tags: fee
  • [JavaScript][IE] みんなが幸せになれるコード - Qiita

    Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

    [JavaScript][IE] みんなが幸せになれるコード - Qiita
    kasumani
    kasumani 2014/06/13
    みんなが幸せになれるコード 26 ストック 1 コメント この投稿をストックする みんなが幸せになれるコードです. var isMSIE = /*@cc_on!@*/false; if (isMSIE) window. Tags: feedly, ifttt, kasumaniのストックした投稿 - qiita, recently read, saved for late
  • [JavaScript]クラス、関数、オブジェクト - Qiita

    var obj = new Object({'name': 'hoge'}); console.log(obj); // =>Object {name: "hoge"} Object.prototype.test = 'test!'; console.log(obj); // =>Object {name: "hoge", test: "test!"} /* ECMAScript 3 */ console.log(obj.constructor.prototype); // =>Object {test: "test!"} /* ECMAScript 5 */ console.log(Object.getPrototypeOf(obj)); // =>Object {test: "test!"}

    [JavaScript]クラス、関数、オブジェクト - Qiita
    kasumani
    kasumani 2014/03/20
    クラス、関数、オブジェクト o2オブジェクトの独自プロパティ、継承したプロパティが全て列挙されていることがわかる。 要点は以下の3つです. Tags: ifttt, kasumaniのストックした投稿 - qiita from Pocket March 20, 2014 at 08:25PM via IFTTT
  • [JavaScript]クロージャについての現在の理解 - Qiita

    クロージャの概要 クロージャとは。 関数を入れ子にする 外側の関数をエンクロージャ、内側の関数をクロージャと言う エンクロージャはクロージャへの参照を返す この参照を保持することで、関数呼び出し時のコンテキストがメモリ上から解放されないようにする これによりエンクロージャ内で定義した変数が永続化される ただしエンクロージャ内に定義した変数にアクセスできるのはクロージャのみである コンテキストはエンクロージャの呼び出し毎に異なる 典型的なクロージャの例 function fn(n) { // エンクロージャ return function() { // クロージャを返す return ++n; // nは同じコンテキストで共有 } } var f1 = fn(0); // fnコンテキストの生成(1) var f2 = fn(10); // fnコンテキストの生成(2) console.lo

    [JavaScript]クロージャについての現在の理解 - Qiita
    kasumani
    kasumani 2014/03/20
    クロージャについての現在の理解 クロージャの概要 クロージャとは。 関数を入れ子にする 外側の関数をエンクロージャ、内側の関数をクロージャと言う エンクロージャはクロージャへの参照を返す この参照を保持するこ
  • JSONデータの連携 - シュンツのつまづき日記

    【前提条件】 [環境] jQuery 1.9.0 DataTables 1.9.4 参考サイト DataTables 公式ページ DataTables | Table plug-in for jQuery 【概要】 前回のエントリではDOMと配列データをもとにテーブルを作成しました。 今回はAjax通信でJSONを受け取り、受け取った結果を表示します。 【HTMLソース】 まずはHTMLソースからです。 HTMLやることはタグの作成です。 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/js/libs/jquery-1.9.0/jquery

    JSONデータの連携 - シュンツのつまづき日記
    kasumani
    kasumani 2014/01/03
    JSONデータの連携 前回のエントリではDOMと配列データをもとにテーブルを作成しました。 sAjaxDataPropには取得したJSONで読み込み対象となるプロパティを指定します。 ネストしている場合はドット区切りで指定します。 Tags: fr
  • 見えてきた「ECMAScript 6」。JavaScriptの生みの親が書く「Harmony of Dreams Come True」

    見えてきた「ECMAScript 6」。JavaScriptの生みの親が書く「Harmony of Dreams Come True」 JavaScriptの標準仕様となっているのがECMAScriptで、最新バージョンは2009年12月に策定されたECMAScript 5th Editon。そして次のバージョンとなるECMAScript 6は、コード名「Harmony」もしくは「ES.next」や「ES6」と呼ばれています。 ECMAScript 6にはどのような機能が加わるのか、JavaScriptの生みの親であるBrendan Eich氏が、自身のブログに「Harmony of Dreams Come True」というエントリをポストし、その内容を紹介しています。PublickeyではEich氏の許可を得て日語訳を掲載します。 (正確な翻訳に務めましたが、言語仕様やガベージコレクシ

    見えてきた「ECMAScript 6」。JavaScriptの生みの親が書く「Harmony of Dreams Come True」
  • TechCrunch | Startup and Technology News

    Archer Aviation is partnering with ride-hailing and parking company Kakao Mobility to bring electric air taxi flights to South Korea starting in 2026, if the company can get its aircraft…

    TechCrunch | Startup and Technology News
  • WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes

    intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で

    WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
  • Web Intents の実験的な機能について

    .app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

    Web Intents の実験的な機能について
  • これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋

    よくリンクにアイコンを付けることってありますよね?アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか? そんなWEB屋なら一度は(?)考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです! 元記事はこちら! Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね! これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h

    これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋
  • ステートフルJavaScript

    ステートフルなJavaScriptアプリケーション開発についての解説書。HTML5とCSS3のおかげで単に自律的なだけではなく外見も美しくデスクトップアプリと同様のエクスペリエンスをブラウザ上で得られるようになりました。書ではステートフルなWebアプリをMVCモデルに沿って開発しながら、その背後にある理論から各種ライブラリを利用した実践に至るまで幅広く解説します。ステートフルなコードとMVCを組み合わせることにより、MVCの3要素をクライアント側で実行することが可能になり、単なるAjaxアプリケーションでは実現できないよりデスクトップアプリに近いエクスペリエンスを提供できます。 目次 まえがき 1章  MVCとクラス 1.1 初期の JavaScript 1.2 アプリケーションの構造化 1.3 MVCとは 1.3.1 モデル 1.3.2 ビュー 1.3.3 コントローラ 1.4 モジュ

    ステートフルJavaScript
  • 第1回 Meteorをはじめよう | gihyo.jp

    Meteorとは? Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境(MacOS Xを含む)でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています(公式サイトには、「⁠1日か2日でプロトタイプを、2~3週間で製品レベルのアプリを構築できるようにする」とあります⁠)⁠。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M

    第1回 Meteorをはじめよう | gihyo.jp
  • JavaScriptのコーディング規約を気軽にチェック

    こんにちは、中川です。 今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guideのいいところですが、 規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。 コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、 いつしか守られないまま開発されてしまうことになりますね。 ※今回の内容はMacにて動作確認を行なっています。

    JavaScriptのコーディング規約を気軽にチェック
  • node.js におけるエラー処理のコーディングパターン (もしくは非同期 JavaScript における例外処理) - kazuhoのメモ置き場

    node.js を代表とする JavaScript を用いた非同期プログラミング環境においては、コーディングパターンのベストプラクティスが共有されておらず、結果として品質の低いコードが多くなるという問題があるように思います。そこで、特にエラー処理をどう書くべきか、既存のライブラリを使う方法を紹介してみることにしました。 いきなりですが、ファイルの文字数を返す関数を作ることを考えてみます。Java だと以下のような感じになるでしょうか。countChars メソッドに注目すると、エラーを例外として扱っていて、モジュラーかつ簡潔になっていることがわかります。 class FileCounter { static long countChars(String filename) throws IOException { FileInputStream is = new FileInputStre

    node.js におけるエラー処理のコーディングパターン (もしくは非同期 JavaScript における例外処理) - kazuhoのメモ置き場
  • JavaScriptでRubyのmethod_missingを実装する - hagino3000's blog

    追記: Firefoxの実装で既に有る__noSuchMethod__に名前は合せた方が良い、というコメントを頂いたので名前を変えました。 何の役に立つか不明だけど書いてみた*1。Proxyでプロパティアクセスをフックして、存在しない場合は用意しておいた関数プロキシを返す。 __noSuchMethod__ for ChromeGist https://gist.github.com/2290705 上記の処理が書いてあるのはこの部分。 function enableMethodMissing(obj) { // 関数プロキシの作成 var functionHandler = createBaseHandler({}); functionHandler.get = function(receiver, name) { // プロパティアクセスの場合は何も返さない return fun

    JavaScriptでRubyのmethod_missingを実装する - hagino3000's blog
  • なぜ CoffeeScript がよいか - 0xff.toBlog()

    なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtechについて。 いや、当はこのタイトルにするほど CoffeeScript 推しているわけではないのですが、まあそういう建前で書きます。 CoffeeScript のメリット 簡潔に書ける 簡潔であるということは、ソースコードにおいて、質ではない部分を書かなくてよいということで、逆に言えば必要なことだけが書かれている状態に近くなります。少し慣れればむしろ読みやすくなる(と思います)。 JavaScript の罠を回避できる var を忘れた変数がグローバル変数になるとか、変数のホイスティングとか、オブジェクトリテラルの最後のカンマとか、 JavaScript の for in は prototype を辿ってしまう問題とか、JavaScript の等価演算子が曖昧すぎて