Giblog公式サイト

jQueryなどのJavaScriptライブラリを使おう

jQueryやなどのJavaScriptライブラリを配置して使ってみましょう。

Giblogで作成されたWebサイトでは、静的なCMSでは、JavaScriptが使えます。

ここでは、例としてjQueryを使ってみましょう。

jQueryを、ダウンロードしてきて、配置して利用するという方法をとります。

jQuery公式サイト - ダウンロード

サイトの上の方にある以下の部分に注目。 

Download the compressed, production jQuery 3.4.1

2019年5月8日のバージョンは、3.4.1です。

このリンクを右クリックして、名前を付けてリンク先を保存してください。

名前は「jquery-3.4.1.min.js」のようにしてください。

JavaScriptを使うと、サイトで動きのある表現を使えるようになります。

JavaScriptライブラリを配置する

最初に、JavaScriptライブラリを配置する必要があります。

保存した名前が「jquery-3.4.1.min.js」だとして、以下のディレクトリの中に配置しましょう。 

templates/static/js

JavaScriptライブラリを読み込もう

次にJavaScriptライブラリを読み込む必要があります。JavaScriptライブラリは、使う前に、読み込むことが必要です。

HTMLのheadセクションで読み込むのが推奨です。以下のファイルの中に記述しましょう。 

templates/common/meta.html

ファイルを開いて、次の一行を書き込みます。 

<script src="/js/jquery-3.4.1.min.js"></script>

JavaScriptはscriptタグで読み込むことができ、パスをsrc属性に記述します。

jQueryで「こんにちは」

次に、実際にjQueryを使ってみましょう。

ブログの記事やindex.htmlなど、好きなコンテンツを開いてみてください。

この中の一番上に、次のように記述しましょう。 

<script>
  $(function() {
    alert('こんにちは');
  });
</script>

これはjQueryの文法で書かれています。

このJavaScriptが書かれたページを開くと、「こんにちは」というメッセージボックスが表示されます。

Perlクラブ