チュートリアル記事

上級

10 分

JavaScriptの概要

JavaScriptおよびjQueryを使用して、webページにインタラクティブな機能を追加する方法を説明します。

JavaScriptはスクリプト言語であり、オープンなweb標準技術として、すべての主要なブラウザーでサポートされています。JavaScriptを使用して、ページにインタラクティブな機能やさらなる機能を追加できます。jQueryは、ユーザーインターフェイス要素、エフェクト、およびアニメーションをより簡単にwebページに追加するためのJavaScriptライブラリです。このチュートリアルで使用できるプロジェクトファイルをダウンロードして、手順に沿って作業を進めてください。

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでstep-1-intro-js.html を開き、「分割」ビューでソースコード を表示します。

1

JavaScriptでアラートを追加する

JavaScriptのおすすめの学習方法は、まずアラート機能 の組み込みを通じてスクリプトの動作の基本構造を理解することです。アラート 機能では、ダイアログボックスにメッセージが表示されます。JavaScriptを使用して、関数 、つまり実行されるアクションを定義する必要があります。また、アクションを実行させるイベント を定義する必要があります。イベントとは、発生する出来事(ユーザーがボタンをクリックする、フィールドからタブを表示するなど)のことで、関数にいつ動作すべきかを指示します。

アラート 機能を の内部にある タグの内部に追加して、messageWindow という名前を付けます。次に、onClick イベントをページ下のボタンに追加します。ユーザーがこのボタンをクリックすると、アラートを表示する関数が呼び出されます。

headセクションのHTML



....

ボタンのonClickイベント


SHOW MORE

ブラウザーで変更結果をプレビューする

「ファイル」>「リアルタイムプレビュー」 をクリックしてブラウザーを選択し、JavaScriptをテストしてください。

ファイルを保存してから、結果を確認してください。

2

jQueryの概要

jQueryは、多数のJavaScriptコードを追加せずにインタラクティブな機能、アニメーション、および他のエフェクトをページに簡単に追加できる関数JavaScriptライブラリです。Dreamweaverの標準ビューで作業する場合、「挿入」>「jQuery UI」または「jQuery Mobile」メニューオプションから使用できるjQueryウィジェットを確認してください。

また、自分のjQueryスクリプトをページに追加することもできます。jqueryui.com をwebで確認して、追加できる他のインタラクション、ウィジェット、およびエフェクトを調べてください。

2番目の練習用ファイルを開く

Dreamweaverでstep-2-intro-js.html を開き、「分割」ビューでソースコード を表示します。

jQueryアニメーションを追加する

ページのセクションの表示を切り替える機能をjQueryで追加して、webページでのjQueryの利用イメージをつかみましょう。jQueryを自分でダウンロードしてインストールすることができます。また、GoogleまたはMicrosoftがホストするjQueryライブラリを参照することもできます。この例では、Googleがホストするライブラリを使用します。そうすると、ライブラリを個別にインストールするよりも短時間で組み込むことができ、維持するファイルの数も少なくなります。

タグの内部にある タグを使用して、ライブラリをページに読み込みます。

次に、slideToggle メソッドを追加して、ユーザーがボタンをクリックしたときにページにテキストセクションが表示および非表示されるようにします。下のコードの#moreBtn は、slideToggleメソッドを実行するためにユーザーがクリックするボタンのIDです。#content3 は、ユーザーがボタンをクリックしたときに表示および非表示される

のIDです。

ブラウザーで変更結果をプレビューする

ファイル/リアルタイムプレビュー 」をクリックしてブラウザーを選択し、JavaScriptをテストしてください。

ファイルを保存してから、結果を確認してください。


2021年10月20日

Dreamweaver でこれらのチュートリアルをお試しください

モダンでレスポンシブな web ページをデザイン