Angular.jsで作るノートパッドWebアプリケーション

タイトル未入力防止用の関数定義

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノートのタイトルが未入力の状態にならないように防止する為の関数の作り方について解説致します。
講師:
03:32

字幕

このレッスンでは ノートのタイトルが 未入力の状態にならないように 防止するための関数の作り方について 解説いたします まずはダウンロードしてきた こちらの 「title_control」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう こちらの「index.html」ファイル これをブラウザで開いて 今回 実装していく内容を 確認してみたいと思います こちらの「index.html」を ブラウザで開きます すると このように表示されてきましたね 今回は こちらの タイトル入力部分 input ボックスですね こちらの入力内容を監視して タイトル部分が未入力 といったデータが作られないようにする 方法について見ていきます それではエディタに戻ります そして「note.js」ファイル こちらをエディタで開きます 今回注目していただきたい部分は こちらのファイルの この部分となります この部分では「ノートのタイトルの内容を チェック」して 空っぽだったときに こちらの「新しいノート」というテキストを こちらの「$scope.note.tile」に 代入する処理が書いてあります では 具体的にどのように書いているか 見ていきたいと思います まずは こちらの関数の定義ですね 「$scope.」そして関数の名前 「checkTitle」とします そして「= function()」の「{」 そして「}」の「;」で処理を閉じます そして この「{}」の間に 具体的な処理を書いていきます まずは「if文」を使って 条件分岐を作ります そして その条件式はというと 「$scope.note.title」 「===」そして「空白のデータ」 という形になっています これは この「$scope.note」 要するに ブラウザに確認したときに ノートの右側で表示される ノートの詳細データですね こちらのタイトルの値が 空っぽの状態のとき この「if文」の中の処理が実行されます そして どういった処理かというと この 「新しいノート」という文字列を このタイトルに入力してあげる といった処理ですね こうすることによって ユーザーがタイトルを 未入力にしようとしても こちらの「新しいノート」というのが こちらの「title」に代入されて 表示されてくるといった形になります このようにすることで タイトルが 未入力になるということを防ぐわけですね 以上で レッスンは終了です 今回はノートのタイトルが 未入力の状態に ならないように防止するための 関数の作り方について解説いたしました 以降のレッスンでは ノートのタイトルの入力フォームに blurイベントを登録して 入力フォームからフォーカスが外れた際に 今回のレッスンで作成した 未入力防止用の関数を発動させる 方法について解説いたしますので そちらも併せてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

1時間35分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年11月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。