JavaScript と jQueryで作るフォームバリデーション

JavaScriptとjQueryの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLファイルから、外部ファイルのJavaScriptのファイルと、jQueryの読み込み方法について解説致します。
講師:
05:47

字幕

このレッスンではフォームバリデーションを 実装していくにあたって利用する― JavaScript ファイルと jQuery を HTML ファイルから読み込む方法について解説します まずダウンロードしてきたこちらの load_js フォルダの中にある― 3つのファイルをエディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めて行きます 早速レッスンを始めていきます JavaScript ファイルと jQuery を 読み込む為には HTML ソース上に script タグを書いて 読み込んであげる必要があります 今回その script タグを記述する場所は HTML 上の の直前に 設置してみたいと思います こちらの index.html の ずっと下に見ていくと この部分に がありますね そしてここにそれら jQuery と JavaScript のファイルを読み込んでいる― コードがあります 要するにこの index.html は既に jQuery と JavaScript のファイルの― 読み込みが完了している状態となっています ではそれぞれどのように読み込んでいるかを 見ていきたいと思います まず jQuery の方ですが jQuery 自体はインターネット上の jQuery の サイトから入手することが可能です こちらが jQuery のサイトです この jQuery のサイトのこの部分 「 Download 」と書かれているボタンを クリックすると このようなページが表示されてきます このページには jQuery を入手するための いくつかの方法が書いていますが 今回は最も手軽にできる CDN という方式を利用して jQuery を読み込んでみたいと思います CDN に関してはこちらのページの 中頃に記載があります 丁度こちらの部分になりますね この部分のこちらのソースコードの 1行目をコピーしてきます これをコピーして 先程の HTML ソース上の― の直前に貼り付ける訳です ではエディターに戻ります これがそれを貼り付けた状態となっています 但し そのまま貼り付けただけでは jQuery を正常に読み込めません というのは今回の index.html は サーバー上に設置するものではなくて ローカル上 要するに PC 上においてある ファイルとなりますので そのままコードをペーストしただけだと 正常に読み込む事ができなくなっています 正常に読み込む為にはこちらの― jQuery のファイルの URL を 記述している場所の頭に― このように http: を追加してあげる必要があります これで jQuery のファイルをローカル上から 正常に読み込めるようになります 次は 手元にある javascript.js の方です こちらも同様に script タグを使って 読み込みます この部分がそれにあたります この src 属性の中に javascript.js のパス 今回はファイル名で大丈夫です それを記載してあげればOKです では この状態できちんと jQuery と JavaScript が読み込めているかどうか 確認してみたいと思います では javascript.js をエディターで開きます ここにこのように書いていきます まずは $ マーク そして ( ) そしてこの ( ) の中に function と書きます そして更に ( ) 次に { } そして最後の ) の後に ; (セミコロン)を打ちます そして この { } の間に何行か改行を入れた上で このように書きます alert ( ) の ; そしてこの alert の引数の中に このように書きます ' 動作サンプルです。 ' ここまで書きましたら この javascript.js のファイルを保存します ファイルを保存するための キーボードショートカットは Mac では command と S Windows では Ctrl と S の同時押しでしたね ではファイルを保存します そしてこの index.html をブラウザで 開いて確認してみましょう こちらのファイルをブラウザで開きます するとこのようにページが表示されてきた 瞬間に「 JavaScript のアラート」で 「動作サンプルです。」と今 alert の 引数の中に書いた内容が表示されてきましたね このように表示されてくれば正常に jQuery と JavaScript ファイルの読み込みが 完了しているということになります では 「OK」ボタンを押して エディターに戻ります 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたり HTML ファイルから JavaScript ファイルと jQuery を読み込む― 方法について解説しました 以降のレッスンでは実際に JavaScript と jQuery を利用して バリデーション機能を実装していく 方法について解説していきますので そちらも合わせてご覧下さい

JavaScript と jQueryで作るフォームバリデーション

このコースではJavaScriptとjQueryを使ってユーザー登録フォームなどでユーザーが入力忘れや誤記入した場合にユーザーに通知するフォームバリデーション機能を実装する方法を学習します。JavaScriptとjQueryの説明からHTMLやCSSコーディングの仕方、入力必須項目のチェック方法についても紹介します。

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

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

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

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