JavaScript実例
内容の表示/非表示、書き換え、削除
画像スライダー
モーダル/ポップアップウィンドウの表示
フォームのバリデーションチェック
非同期通信
入力したエリアの天気を取得します。
jQueryの使い方
jQuery + JSファイルの読み込み
headタグ内に以下のコードを記述してjQuery本体とJSファイルを読み込みます。
※ "./(読み込むファイル名).js"の部分はJavaScriptを記述するファイルに変えてください。
jQueryコードの記述
JSファイル内でjQueryコードを書くときは、下記のように$(function() { … })の中にプログラムを記述します。
jQueryの書き方
jQueryは、$("xxx")で【1.ターゲット:どこを変更するか】を指定し、それに続いて【2.アクション:どう変更するか】を指定します。
記述例
例1:
titleクラスのテキストを"タイトル"に書き換え
- ターゲット:
- titleクラス
- アクション:
- テキストを"タイトル"に書き換え
例2:
ID: commentを削除
- ターゲット:
- ID:comment
- アクション:
- 削除
ターゲットの書き方
ターゲットはCSSで学んだ【セレクタ】の表記がそのまま使えます。
アクションの書き方
アクションは、ターゲットの後に【.アクション名(値)】と記述します。
よく使うアクション
文字の変更
$('ターゲット').text('変える文字');
例: 「今日の天気は【晴れ】です。」に変更
画像（属性）の変更
$('ターゲット').attr('属性', '値');
例: 画像のURLをaaaa.jpgからbbbb.jpgに変更
スタイル(CSS)の変更
$('ターゲット').css('プロパティ', '値');
複数の値を一度に変更する場合は下記のような【オブジェクト型】で記述
例: 背景色を赤に変更
クラスの追加/削除
追加
$('ターゲット').addClass('クラス名');
削除
$('ターゲット').removeClass('クラス名');
なければ追加、あれば削除
$('ターゲット').toggleClass('クラス名');
※クラス名の前に「.」は不要なので付けないように注意
例: クラス名「red」を追加
削除
$('ターゲット').remove();
例: ID:targetを削除
きっかけ（トリガー）の指定
きっかけ（トリガー）は【○○をしたときに△△したい】というような、何らかのアクションをきっかけに処理をしたいときに記述します。
<よく使うトリガーアクション>
- click
- クリックしたとき
- mouseover / mouseout
- マウスが乗ったとき、外れたとき
- focus / blur
- フォーカスが当たったとき、外れたとき
例: ID:target01をクリックしたとき、ID:target02に「active」クラスを追加
コメントの書き方
JavaScriptではコメントは2種類の書き方があります。
- 1行コメント
-
行頭に"//"を付けます。
- 複数行コメント
-
コメント箇所を【/*】【*/】で囲います。
JavaScriptの検証方法
開発者モードを見る
ブラウザの開発者ツールを起動すると、タグの変化やエラー内容を確認することができます。
開発者ツールの起動方法はこちら
- [要素]タブ
- HTMLの変化を確認できます。
- [コンソール]タブ
- JavaScriptのエラーを確認できます。
アラート表示
途中にアラートを書くことで、動作確認のヒントを出すことができます。
※ Live Previewではアラートは表示されないため、Live Serverで確認してください。
実行関数の書き方
実行関数（何か処理することをまとめたもの）の書き方は時代の違いにより2種類ありますが、どちらも意味合いは同じものです。
書き方1
書き方2
コード生成ツール
トリガー設定
【どこを】トリガーのターゲット（セレクタ記述）
【どうしたら】トリガーの種類
アクション設定
【どこを】アクションのターゲット（セレクタ記述）
【どうしたいか】アクションの種類