デイトラWeb制作コース中級編DAY30〜32 中級総復習編⑦jQueryのコーディング

00:59 コード内のjQueryという文字列は$(ドルマーク)に置き換え可能

⇨タイトルの通りです。

01:10 スムーススクロールでheader分の高さを引く書き方(DAY26とは別の書き方)

⇨headerにIDをつける。以下のようにscript.jsに追加する。

$("html, body").animate(
  {
    scrollTop: position - $( '#js-header' ).outerHeight
  },
  speed
);

02:19 wow.jsの発火とクラス付け

⇨クラス付けの方法について補足です。wow.jsのパッケージに同梱されているanimate.cssを入れた場合こちらの方法でOKなのですが、animate.cssのGitHubからDLした新しいバージョンのanimate.cssを入れた場合クラスの付け方が違います。例えば以下のように長いコードになります。

<h2 class="wow animate__animated animate__zoomIn" data-wow-duration="3s">３秒かけてアニメーションを実行</h2>

最後のdata-wow-xxxの部分も含めないと動かない模様。

04:29 Googleフォームと自作フォームの連携方法

⇨こちらですが、nameの値がちょっと見つけにくいです。以下のページのように、あらかじめフォームに値を入力した状態で検証ツールを開くとどの項目がどのnameなのか分かりやすくなります。

https://kyotablog.net/google-form-customization/

ここは詰まる人が多いポイントというのもうなずけます。私はjQueryのメソッドslideUpがslide「UP」(大文字)になっていただけで動かなかったりしました。それと、入力確認機能の実装前に送信ボタンを何度も押し、いつの間にか何通も回答が届いていたということがありました。画面が変化しないので気づきませんでした。動かない場合は上記サイトのチェックポイントを何度も確認しましょう。

08:04 フォームの挙動を記述する

⇨Googleフォームとオリジナルのフォームを結びつけます。新しいメソッドが出てきますが、早く進みたいので。笑 今回は省略します。

10:30 サンクスメッセージの作成

⇨送信ボタンが押されたとき、以下のようなメッセージが出るようにします。

• 送信完了しました。ありがとうございました。
• 送信に失敗しました。ページを更新して再度送信してください。

12:29 送信に成功した時/失敗した時の挙動を書く

⇨上記メッセージの表示を実行するコードを書きます。

statusCode: {
		0: function() {
			//送信に成功したときの処理
			$form.slideUp()
			$( '#js-success' ).slideDown()
		},
		200: function() {
		//送信に失敗したときの処理
		$form.slideUp()
		$( '#js-error' ).slideDown()
		}
	}

13:25 フォームの入力確認チェック機能をつける

ここも新しい知識が出てきますが、今回は省略します。

これで中級総復習編は終わりです。お疲れ様でした！次はいよいよ中級の最終課題です。制限時間は5日間です。それまでに仕上がるように頑張ります。