タグ

Javascriptに関するarerreeeのブックマーク (92)

  • Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか - 出町ミスド攻防記

    jQueryヘビーなアプリケーションの問題点と、MVCによる構造化の必要性 jQueryは、ブラウザ上で動くJSアプリケーションの開発生産性を劇的に向上させました。DOM操作による動的なページ書き換え処理などは、セレクタを使ってちょろっとコードを書くだけで、ほんの数行で記述できてしまいます。 しかし、この方法の延長で、大規模なJSアプリケーションを構築することは果たして現実的でしょうか。例えば「GMail」や「New Twitter」程度の規模のJSアプリケーションを書かなければならないとしたら、どうでしょう? 大規模なJSアプリケーションを開発するには、こういった手法を延長するのではなく、より洗練されたデザインパターンを導入する必要があります。この目的にぴったりのデザインパターンが、「MVC」デザインパターンです。 MVCパターンは、Webの世界ではサーバサイドプログラミングで広く知られ

    Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか - 出町ミスド攻防記
  • 最強オブジェクト指向言語 JavaScript 再入門!

    この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less

    最強オブジェクト指向言語 JavaScript 再入門!
  • Not Found |ミレスポ! - Millennials Sports Marketing

    横浜F・マリノスユース同期6人による新たな挑戦「ROOTS.」。新時代に適応するアスリートに必要な素質とは。

  • 知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){...})()の全て

    (function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ! 毛根にはこれからもがんばってほしい!いつだって頭を温かいまなざしで見守

  • JSHintでJavascriptの構文チェック&Sublime Text2でのチェック | DevelopersIO

    JSHint JSHintとは、Javascript用構文チェッカーです。 構文チェッカーとしては、かなり厳しめのチェックをしてくれるJSLintがありますが、 これをforkして融通効くようにしたものがJSHintです。 詳しい経緯はここに。 とりあえずどんなチェックをしてくれるか知りたい場合、 このサイトでJavascriptのコード入力すれば、 どのようなチェックをしてくれるかわかります。 今回はコマンドラインからJSHintを使ってみたり、Sublime Text2から使ってみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npmを使用してJSHintをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょ

    JSHintでJavascriptの構文チェック&Sublime Text2でのチェック | DevelopersIO
  • Google JavaScript Style Guide

    Revision 2.2 Aaron Whyte Bob Jervis Dan Pupius Eric Arvidsson Fritz Schneider Robby Walker This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see "Hooray" appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there's a "toggle all" at

  • 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の覚え方 - Qiita
  • JavaScriptを学ぶ上で避けては通れないレキシカルスコープ - 小さい頃はエラ呼吸

    photo credit: bk1bennett via photopin cc はじめに JavaScriptを学習する上で最も難解ではないかと思うのが、レキシカルスコープ(静的スコープ)とそれを利用したクロージャという仕組みです。両者のうち、レキシカルスコープだけは、なんとなく理解できてきたので、自分なりにまとめてみました。 JavaScript 第6版posted with amazlet at 14.02.04David Flanagan オライリージャパン 売り上げランキング: 7,909 Amazon.co.jpで詳細を見る レキシカルスコープとは JavaScriptはレキシカルスコープを採用しているプログラミング言語です。では、レキシカルスコープとはなんなのか? いろんな人がブログやWebサイトでレキシカルスコープの説明をしてくれていますが、僕が最も分かりやすいと感じたのは

    JavaScriptを学ぶ上で避けては通れないレキシカルスコープ - 小さい頃はエラ呼吸
  • 詳細 ECMA-262-3 第6章 クロージャ - mixi engineer blog

    おつかれさまでございます。東洋大学柏原選手の好きな声優は花澤香菜さんですが、株式会社ミクシィ大形選手の好きな声優は五十嵐裕美さんです。お世話になります。 さて、 Dmitry 先生の ECMA-262-3 シリーズもついに山場、クロージャの章へとやって参りました。「 JavaScript はクロージャが使えて強力」「 JavaScript 理解のキモはクロージャ」などといった売り文句や脅し文句を耳にされたことは無いでしょうか。クロージャがなぜ強力なのか、そしてそれはどのような仕組みに基づくものなのか、これは ECMAScript だけに留まらず、一般的な意味でクロージャを理解できる名章です。どうぞお時間のある時に、気持ちを落ち着けて、ごゆっくりご覧ください。 詳細 ECMA-262-3 シリーズ 第1章 実行コンテキスト 第2章 変数オブジェクト 第3章 this 第4章 スコープチェーン

    詳細 ECMA-262-3 第6章 クロージャ - mixi engineer blog
  • JavaScriptの巧い書き方 - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎! 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m

  • 知っておくべきjQueryオブジェクトの扱い :: 5509

    jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基といえば基ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。 jQueryオブジェクトからDOMにアクセスする $(‘#id’)にすれば#idを取得できますが、この状態だとDOM要素を選らんでいる状態ではないので、DOM要素のプロパティにはアクセスできません。 $('#link').href // これは無理 1-1. $()[0] 要素を引数にしたjQueryオブジェクトはDOM要素が配列で格納されている状態なので $('#link')[0] // DOM要素の参照になる console.debug($('#link')[0]); // 評価結果 - DOM要素 // とすることで配列の中からDOM要素を指定することができるので、プロパティにアクセス

  • d.aql - scriptタグの中にJavaScriptを書く正しい方法

    XHTMLでCDATA区間を使う。以上。 経緯 HTML4のscriptタグでJavaScriptをちょろっと書く時、中にHTMLタグがあるとダメという話が発端である。例えば、以下のようなのがダメだ。 <script type="text/javascript"> document.write('<p><a href="http://www.hikoboshi.org">hikoboshi.org</a></p>'); </script>ちなみに、ブラウザで動かせば多分動く。(試してないけど。)じゃあ何がダメかというと、HTMLの仕様的に。ちなみにこういう書き方をすると、多分HTML4でもXHTML1でもダメだと思われ。 そんな話をきっかけに、いろいろ調べた。 何故ダメか まずはHTML4のDTDを調べる。(別にstrictを選ばなくても良いんだけどとりあえず。) http://www.w

    d.aql - scriptタグの中にJavaScriptを書く正しい方法
  • MANA-DOT

    ABOUTドット絵とWebプログラミングが好きな@manatenの個人サイトです。 CONTACTmanaten at manaten.netTwitter@manatenまで

    MANA-DOT
  • 檜山正幸のキマイラ飼育記 - JavaScriptで学ぶ・プログラマのためのラムダ計算

    JavaScriptによるテンプレート・モナド、すっげー簡単!」にて: 紙と鉛筆でラムダ計算を実行できることは必要だな、やっぱり。 なんて強調したので、ラムダ計算の入門、いってみよう。 [追記]練習問題集を追加しました。説明を読みながら、あるいは読んだ後で是非やってみてください。→「JavaScriptで学ぶ・プログラマのためのラムダ計算 問題集」[/追記] ※印刷のときはサイドバーが消えます。 内容: JavaScriptの関数リテラル ラムダ式ってなんだ ラムダ計算の体系と適用操作 ラムダ式の例をいくつか β変換 -- ラムダ計算のキモ! β変換を何度か実行してみる 中間まとめ、まだ続きがあるよ JavaScriptの関数リテラル 最初に、JavaScriptに関する知識を確認しておきましょう。なお、JavaScriptの対話的実行環境については「もっともお手軽な対話的JavaScr

    檜山正幸のキマイラ飼育記 - JavaScriptで学ぶ・プログラマのためのラムダ計算
  • TypeScript0.9alphaをNode+Gruntで使うよ

    Swift is the best programming language you should learn and make your dream app easily. Swift programming is a powerful yet easy-to-learn coding language created by Apple. It's frequently used for developing iOS and macOS applications, as well as tvOS and watchOS apps. While you can use other languages to create Apple apps, Swift is the preferred language, and it's recommended because its code is

  • Scripts in HTML documents

    18.1 Introduction to scripts A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language. Scripts offer authors a means to extend HTML documents in highly active and

  • JavaScriptのみ!Meteorで作る簡単リアルタイムWebアプリ

    こんにちは。 この春に無事大学を卒業したので、KRAYアルバイトから社員に転職しました、浅海です。 最近、JavascriptのリアルタイムWebアプリケーションフレームワークのMeteorで遊びました。 リアルタイムWebアプリケーションを簡単に作ることができますので「最近流行りのリアルタイムWeb、一度やってみたいなー、でも難しそうだなー」と思っている方におすすめです! この記事ではグーグルマップ上で会話できるリアルタイムチャットの作り方を解説します。 完成品はこちら 目次 注意事項 Meteorを始める リアルタイムチャットの作成 Googleマップとの連携 作ったアプリケーションを公開する 宣伝 注意事項 ・この記事を執筆時点のMeteorのバージョンは0.42です。 ・「コマンド一発でインストール!!」とか書きましたが、これは自分が使っているMacでの話です。 windowsのc

    JavaScriptのみ!Meteorで作る簡単リアルタイムWebアプリ
  • [JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記

    クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか? あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか? ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境(静的スコープ)において解決する関数のことである。 理解できないですよね? 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが

  • Web系新卒っていうかゲーム開発者一年目が去年読んだ技術書 & ライブラリ - mizchi log

    カタ氏(@hotchemi)が意識高い記事書いてたので、自分もまとめてみる。 文系学部生がSIerに入社してから読んだメモ - ギークに憧れて http://hotchemi.hateblo.jp/entry/2013/04/01/000844 自分Web系っていうかHTML5+Unity+AS3 のゲームガッツリ系+Webもやるって感じなので、最近の自己認識としてWebっていうよりはゲームプログラマな気がしている。 JSが多いのはHTML5ゲーム技術調査とかしてたからです。 書籍 7つの言語 7つの世界 作者: Bruce A. Tate,まつもとゆきひろ,田和勝出版社/メーカー: オーム社発売日: 2011/07/23メディア: 単行(ソフトカバー)購入: 9人 クリック: 230回この商品を含むブログ (65件) を見る一部情報が古いが、ClojureやIoについて書かれた貴重

    Web系新卒っていうかゲーム開発者一年目が去年読んだ技術書 & ライブラリ - mizchi log
  • JavaScriptで全角英数と半角英数の相互変換 - Rewish@hatena

    全角英数の文字コードから65248個前が半角英数の文字コード。 半角英数の文字コードから65248個後が全角英数の文字コード。 // 半角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); // 全角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248); }); 65248の部分は16進数で表される事が多い。 // 半角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0)

    JavaScriptで全角英数と半角英数の相互変換 - Rewish@hatena