この本は、開発者が最新のクライアント側コードの作成に成功するために必要なすべての最も重要なJavaScript、HTML5、およびCSS3スキルを網羅しています。 この本を学習しながら、4つのWebアプリケーションを作成します。 各アプリケーションは本の別々の部分に当てられ、各章は作成されたアプリケーションに新しい機能を追加します。 これら4つのWebアプリケーションを作成すると、クライアント側の作成に必要なすべてのテクノロジーを学ぶ機会が得られます。
• オッターグラム 。 私たちの最初のプロジェクトはウェブフォトギャラリーに捧げられています。 Ottergramを作成すると、HTMLマークアップ言語、CSSスタイルシート、およびJavaScriptプログラミング言語を使用したブラウザーのプログラミングの基本がわかります。 ユーザーインターフェイスを手動で作成し、ブラウザーがコンテンツを読み込んでレンダリングする方法を学習します。
• CoffeeRun 。 部分的にコーヒーの注文フォーム、部分的に注文のリスト。 CoffeeRunでは、モジュラーコードの記述、クロージャーの活用、Ajaxテクノロジーを使用したリモートサーバーとのやり取りなど、さまざまなJavaScriptプログラミング言語メソッドを紹介します。
さらにカットの下で...
• Chattrbox 。 Chattrboxアプリを説明する部分が最も短く、このアプリは他のアプリと最も異なっています。 JavaScriptプログラミング言語を使用して、Node.jsプラットフォームを使用したチャットサーバーの作成や、チャット用のブラウザクライアントの作成など、インターネット上の通信システムを作成します。
• トラッカー 。 最新のプロジェクトでは、クライアント側を開発するための最も機能的なフレームワークの1つであるEmber.jsを使用しています。 珍しい、エキゾチックな、神話上の生き物の観察の事例をカタログ化するアプリケーションを作成します。 途中で、Ember.jsフレームワークを支える豊かなエコシステムを活用する方法を学びます。
これらのアプリケーションを構築すると、次のような多くのツールに精通します。
-Atomテキストエディターとコードを操作するための便利なプラグイン。
-Mozilla Developer Networkなどのドキュメントのソース。
-OS XターミナルアプリケーションまたはWindowsコマンドラインを使用したコマンドライン。
-ブラウザー同期ユーティリティ。
-Google Chromeブラウザー開発者ツール（Google Chromeの開発者ツール）;
-ファイルnormalize.css;
-ブートストラップフレームワーク。
-ライブラリjQuery、crypto-js、およびモーメント。
-Node.jsプラットフォーム、ノードパッケージ管理システム（npm）、およびnodemonモジュール。
-WebSocketsプロトコルとwscatモジュール。
-BabelコンパイラとモジュールBabelify、Browserify、Watchify。
-Ember.jsフレームワークと、Ember CLIコマンドラインインターフェイス、Chrome用Ember Inspectorプラグイン、Ember CLI Mirageアドオン、Handlebarsテンプレートエンジンなどの追加。
-Bowerパッケージ管理システム。
-自作パッケージ管理システム。
-監視員ユーティリティ。
抜粋 一連のサムネイルを整理する
サムネイルをイベント処理コードにリンクすると、すばやく簡単になります。 Ottergramロジック全体の開始点となる関数を作成します。 JavaScriptとは異なり、他のプログラミング言語には、アプリケーションを起動するための組み込みメカニズムがあります。 しかし、心配しないでください-手動で簡単に実装できます。
main.jsの最後にinitializeEvents関数を追加することから始めます。 このメソッドは、すべてのステップをリンクして、Ottergramをインタラクティブなアプリケーションに変えます。 まず、彼は一連のサムネイルを受け取ります。 次に、配列をループし、それぞれにクリックハンドラーを追加します。 この関数を記述した後、main.jsファイルの最後にinitializeEvents関数の呼び出しを追加して、実行します。
新しい関数の本体で、getThumbnailsArray関数の呼び出しを追加し、結果（サムネイルの配列）をthumbnails変数に割り当てます。
... function getThumbnailsArray() { ... } function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); }
次に、サムネイルの配列を一度に1項目ずつループする必要があります。 それぞれにアクセスするとき、addThumbClickHandlerメソッドを呼び出して、それにサムネイル要素を渡します。 これは数ステップのように思えるかもしれませんが、サムネイルは実際の配列であるため、単一のメソッドを呼び出すことでこれをすべて実行できます。
thumbnails.forEachメソッドの呼び出しをmain.jsファイルに追加し、コールバックとしてaddThumbClickHandler関数に渡します。
... function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); thumbnails.forEach(addThumbClickHandler); }
名前付き関数をコールバックとして渡すことに注意してください。 さらに読むと、これは常に良い解決策ではありません。 ただし、この場合、addEumbClickHandler関数は、forEachメソッドが呼び出すときに送信される情報（サムネール配列の要素）のみを必要とするため、正常に機能します。
最後に、これらすべての動作を確認するには、main.jsファイルの最後にあるinitializeEvents関数への呼び出しを追加します。
... function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); thumbnails.forEach(addThumbClickHandler); } initializeEvents();
JavaScriptの各行を読み取ると、ブラウザーがコードを実行することに注意してください。 main.jsファイルのほとんどについては、変数と関数の宣言を実行するだけです。 ただし、initializeEvents（）;行に到達すると、この関数が実行されます。 保存してブラウザに戻ります。 いくつかの異なるミニチュアをクリックして、あなたの労働の成果を賞賛してください（図6.28）。
カワウソの写真をクリックして、リラックスしてお楽しみください！ あなたは私たちのサイトのインタラクティブなレイヤーの作成中に一生懸命働き、多くを学びました。 次の章では、Ottergramの作成を完了し、視覚効果を追加して美しさを高めます。
シルバー演習：リンクのハッキング
Chrome DevToolsは、訪問したページで多くのエンターテイメントオプションを提供します。 次の演習では、検索結果ページのすべてのリンクを変更して、どこにも移動しないようにします。
お気に入りの検索エンジンに移動して、カワウソのキーワードを検索します。 DevToolsコンソールを開きます。 Ottergram用に作成された関数を例として使用して、イベントリスナーをすべてのリンクに接続し、デフォルトのクリックスルー遷移機能を無効にします。
ゴールデンエクササイズ：ランダムカワウソ
ランダムに選択されたカワウソのサムネイルのdata-image-url属性を変更して、拡大された画像がサムネイルと一致しなくなるようにする関数を記述します。 選択した画像のURLを使用します（ただし、tacocatという単語をインターネットで検索することで適切な画像を見つけることができます）。 追加の演習として、カワウソのサムネイルをdata-image-url属性の元の値に戻し、ランダムに選択されたそのうちの1つを変更する関数を作成します。
最も好奇心が強い人には：厳格モード
ストリクトモードとは何ですか？なぜ存在するのですか？ 「よりクリーンな」JavaScriptモードとして作成されたため、特定のタイプのプログラミングエラー（変数名のタイプミスなど）をインターセプトでき、開発者が言語のエラーが発生しやすい部分を使用したり、明らかに明らかに失敗した言語機能を無効にしたりできます。
厳格な体制には多くの利点があります。
•varキーワードの使用を強制します
•withステートメントの使用を必要としません
•eval関数の使用を制限します
•重複する関数パラメーター名を構文エラーとして扱います
これはすべて、関数の先頭に「use strict」ディレクティブを配置することによってのみ取得できます。 おまけとして、「use strict」ディレクティブは、それをサポートしていない古いブラウザーでは無視されます（これらのブラウザーは、単にこのディレクティブを文字列として扱います）。
MDNの厳格モードの詳細については、をご覧ください。
»本の詳細については、出版社のウェブサイトをご覧ください
» コンテンツ
» 抜粋
Khabrozhiteleyクーポンの20％割引- フロントエンド