JavaScriptの知識ポイントの詳しい説明

5.1 ナビゲーションフォロー/エレベーターナビゲーション
5.2 トップに戻る
5.3 ローリングフォロー
5.4 呼吸する光/フォーカス画像（バナー画像）
アニメーション効果を実現するには5.5 js
5.6 モーダルウィンドウ
5.7 時間制御スイッチング
5.8 単一選択、複数選択、ドロップダウンメニューをカスタマイズする

要約する

1. JavaScriptの基礎

js は 1995 年に誕生し、Javascript の略称です。Java 言語とはまったく関係ありません。当時の主な目的は、フォーム内のデータが正当かどうかを確認することでした。

Popular Science: Javascript は当初 livescript と呼ばれる予定でしたが、リリース前夜に、メディアでの Java の人気を利用するために、名前が一時的に javascript に変更されました。 (つまり、js は java とは何の関係もなく、単に java の名声を利用したかっただけなのです)

機能: Web フロントエンド標準の最初の 2 つを制御します。構造とスタイル;

例えば、矢印は画像ページを切り替え、左下隅のドットも

js なし: js のないページで情報を正確に送信するのは非常に面倒です。

回答: js はフォームデータの正当性を検証するために作成されました。js は検証を追加します。入力が正しければ合格します。正しくない場合はエラーが表示されます。js はこの問題を解決します。

今では、jsは検証だけでなく、ウェブサイトの特殊効果も行うことができます

2. 基本的なJavaScript構文

1. スクリプトタグを記述し、HTML ページの最後に配置します。 js コードは HTML のスクリプトタグ内に記述されます。

2. スクリプトタグの中央から、alert("ポップアップコンテンツ、ここに記述したものはすべてポップアップします");

<スクリプト>
    alert("ポップアップウィンドウにコンテンツを表示する");
</スクリプト>

警告ボックスがポップアップ表示され、ダイアログボックスがポップアップ表示されます。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
	</本文>
</html>
<スクリプトタイプ = "text/javascript">
	アラート();
</スクリプト>

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
	</本文>
</html>
<スクリプトタイプ = "text/javascript">
	alert('注意: ポップアップウィンドウ');
</スクリプト>

注意: ブラウザに付属する警告ダイアログボックスは統合できません。これらはすべてブラウザに組み込まれており、変更できません。

3. JavaScript イベント

定義: どのような状況で、どのようなコマンドが実行される

機能: ユーザーの動作をキャプチャします (シングルクリック、ダブルクリック、マウスの動きなど)

例 1: クリックするとインターフェースが切り替わり、特定の状況下でコマンドが実行されます。

イベントの 3 つの要素:

イベントの3つの要素: イベントソース。イベントタイプ = 実行されたコマンド

1. イベントソース: 「説明は、このイベントの原因が誰であるかです」

2. イベントの種類: (イベントが発生した時期を示します)

3. 実行された命令: 固定書き込み関数(H コマンドはここに記述されます} イベントソース "" ポイントイベント名 = 匿名関数 (匿名メソッド)

例 2: div タグがクリックされたら、クリック後にダイアログボックスをポップアップするなど、1 つの操作を実行します。 ——idクラスを使用する

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<div id = "div1">ハハハハ</div>
	</本文>
</html>
<スクリプトタイプ = "text/javascript">
	// ページ内の div をクリックすると、ダイアログ ボックスがポップアップ表示されます // ステップ 1: タグを制御する場合は、まずそのタグを見つける必要があります。セレクタを使用して CSS 内でタグを見つけ、js を使用して現在のページのドキュメント内でタグを見つけます // ステップ 2: ページの div をクリックします
	// ステップ 3: ダイアログ ボックスをポップアップする document.getElementById('div1').onclick=function()
	{
		alert('クリックした時のみポップアップします');
	}
	//イベントの 3 つの要素: イベント ソース。イベント タイプ = 実行されたコマンド</script>

例3: タグpを追加し、クラスを使用して

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<div id = "div1">ハハハハ</div>
		<p class = "p1"> 私はp1タグです</p>
		<p class = "p1"> 私はp2タグです</p>
	</本文>
</html>
<スクリプトタイプ = "text/javascript">
	// ページ内の div をクリックすると、ダイアログ ボックスがポップアップ表示されます // ステップ 1: タグを制御する場合は、まずそのタグを見つける必要があります。セレクタを使用して CSS 内でタグを見つけ、js を使用して現在のページのドキュメント内でタグを見つけます // ステップ 2: ページの div をクリックします
	// ステップ 3: ダイアログ ボックスをポップアップする document.getElementById('div1').onclick=function()
	{
		alert('div をクリックしたときのみポップアップします');
	}
	//イベントの 3 つの要素: イベント ソース。イベント タイプ = 実行されたコマンド document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('p をクリックしたときのみポップアップします');
	}
	// getElementsByClassName はページ内の要素を見つけるためにクラスを使用します。クラスは複数の繰り返しクラス名を設定できます // 取得するときに、0 からカウントを開始するために最後に [0] を追加する必要があります</script>

知らせ：
IDは一意、つまり単一である
Class は複数形のクラスです。js では、ページ内の要素をクラスで検索するために getElementsByClassName が使用されます。Class では、複数の繰り返しクラス名を設定できます。取得するときに、0 からカウントを開始するために、最後に [0] を追加する必要があります。

テストポイント:
1. ポップアップダイアログボックスがクリックされていない
2. ポップアップしないダイアログボックスをクリックします

4. Javascriptの記述場所（導入方法）

4.1 埋め込みjs

js を html ファイルに埋め込みます。スクリプトタグに入れる、つまりHTMLで書いてスクリプトタグに入れる、これを埋め込みと呼びます。

<スクリプト>
    alert ("ポップアップウィンドウに表示されるコンテンツ"");
</スクリプト>

例：

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
	</本文>
</html>
<スクリプトタイプ = "text/javascript">
	alert('ポップアップが埋め込まれました');
</スクリプト>

4.2 外部リンクjs

外部リンク js : 別の js ファイル内に記述し、スクリプトタグの src 属性を介してページを参照できます。つまり、別の js ファイルに記述し、スクリプト内の src を介して HTML ページにリンクします。これを外部リンクと呼びます。

<script src="js ファイルパス>
    ここにコードを書かないでください。実行されません。</script>

例：

.html ファイル:
<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
	</本文>
</html>
<!-- <スクリプトタイプ = "text/javascript">
	alert('ポップアップが埋め込まれました');
</script> -->
<script type="text/javascript" src="js.js">
</スクリプト>
js.js ファイル:
alert('ポップアップリンク');

知らせ：

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
	</本文>
</html>
<script type="text/javascript" src="js.js">
	//これが外部リンクの構文である場合、何も実行されません alert('111111');
</スクリプト>

4.3 インライン js (禁止)

インライン js : タグ属性に記述されます。この属性はイベント属性である必要があります。（どのタグにもイベント属性がありますが）インラインCSSと同様に、推奨されません！つまり、HTMLタグに記述したものをインラインスタイルと呼びます

<div onclick-alert ( 'heihei');”> ボタン</div>

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<div onclick = "alert('pop-up window line');">非標準の例</div>
	</本文>
</html>

注意: 二重引用符と一重引用符の違いは行内にあります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<div onclick = "alert("ポップアップウィンドウの行");">非標準の例</div>
	</本文>
</html>

行内では一重引用符のみ使用できます。そうでない場合、js の動作は実行されません。

注記：

インライン js は、インライン CSS と同様に推奨されません。埋め込みリンクと外部リンクは自由に使用できますが、js コードと html コードを分離できるため、コードの変更がより便利になるため、外部リンクを使用することをお勧めします。

5. jsの一般的な特殊効果（理解）

専門用語と表示効果を一致させる必要があります。

5.1 ナビゲーションフォロー/エレベーターナビゲーション

ナビゲーション: クリックして移動

5.2 トップに戻る

クリック後、ページの先頭に戻ります

5.3 ローリングフォロー

アニメーション画像のどの部分がユーザーの注意を引くべきでしょうか?

5.4 呼吸する光/フォーカス画像（バナー画像）

画像の切り替え、フェードイン、フェードアウト効果

アニメーション効果を実現するには5.5 js

テストするときは、アニメーションを複数回トリガーして、アニメーションが蓄積されるかどうかを確認してください。

注: js で記述されたアニメーションに古典的なバグ (アニメーション蓄積バグ) がある場合、アニメーションは、移動回数と同じ回数だけ実行されます。
アニメーションに遭遇したとき、どのようにテストしますか?いわゆるアニメーションはクリックしただけでは動かないので、テストを繰り返しトリガーします。

5.6 モーダルウィンドウ

モーダルウィンドウ: 2 つのレイヤーがポップアップ表示され、1 つはその下の他のページコンテンツをカバーするレイヤー (背景色は灰色で、他の下位のコントロールは操作できません) で、もう 1 つはユーザーが操作するレイヤーです。ユーザーは最初のレイヤーのみを操作できます。

目的は、ユーザーが最初に最上層を解けるようにすることです

5.7 時間制御スイッチング

5.8 単一選択、複数選択、ドロップダウンメニューをカスタマイズする

システムに付属するもの (ネイティブ):

カスタマイズ:

システムブラウザにネイティブでない限り、カスタマイズされていても、これらのプログラムは実装に js + html + css の組み合わせが必要であり、ネイティブの記述よりも間違いなく時間がかかります。ただし、ページ全体の美しさのために、プログラマーはデザイナーの要件に従って実装する必要があります。