ワードプレスのJAVASCRIPTの基本

JavaScriptとは？

JavaScript言語で書かれたプログラムはスクリプトと呼ばれています。スクリプトはウェブページのHTMLに直接記述することができ、ページが読み込まれると自動的に実行されます。

例えば、ページに埋め込まれたJavaScriptは以下のようなことができます。

・ページへの新しいHTMLの追加、既存のコンテンツの変更、スタイルの変更。
・マウスのクリック、ポインタの動き、キーの押下等に反応して実行する。
・ネットワークを介してサーバーにリクエストを送信し、ファイルをダウンロードしてり、アップロードする（AJAX）。
・クッキーの取得と設定、訪問者への質問、メッセージの表示。
・ユーザーのデータをブラウザに記憶する。

JavaScriptには少なくとも3つの優れた特色があります。

１　HTML/CSSとの完全な統合
２　非同期のデータベースとの通信ページの描画
３　すべての主要なブラウザでサポートされており、デフォルトで有効になっている

ワードプレスもJAVASCRIPTを多用した管理画面、テーマの出力を実装しています。

JAVASCRIPTの記載方法

JavaScriptプログラムは、<script>タグの助けを借りて、HTMLドキュメントの任意の部分に挿入することができます。

<!DOCTYPE HTML>
<html>

<body>

<p>出力１</p>。

<script>
alert( 'この部分はjavascriptで表示されています' ).
</script>

<p>出力２</p>。

</body>

</html>

<script> タグには JavaScript コードが含まれています。このコードをブラウザーに.htmlという拡張子でファイルとして保存し、ブラウザーで読み込むと、ブラウザーの画面に出力１と表示された後に、javascriptによるアラートが表示され、okを押すとその後の出力２がブラウザーに出力されるのがわかるかと存じます。

※スクリプトタグの中にtype=”text/javascript”という記載がある場合もありますが、現在のモダンブラウザではこの記載は必要ではありません。

外部スクリプト

JavaScriptのコードが多い場合は、別のファイルにjavascriptコードだけをまとめておくこともできます。外部javascriptには＜script>タグは不要です。外部のスクリプトファイルは、HTMLにsrc属性をつけて読み込むことができます。

<script src=”スクリプトファイルのURL.js”></script>。

複数のスクリプトを読み込むには、複数のタグを使用します。

<script src=”スクリプトファイルのURL1.js”></script>。
<script src=”スクリプトファイルのURL2.js”></script>。

javascriptコード構造

処理命令

処理命令とは、JAVASCRIPTの実行するべき構文構成やコマンドのことです。

すでに alert(‘この部分はjavascriptで表示されています’) という処理命令を見てきましたが、これは “この部分はjavascriptで表示されています” というアラートを表示するものです。
コードには、必要な数だけ処理命令を記述することができます。処理命令はセミコロンで区切ることができます。

例えば、ここでは “Hello World “を2つのアラートに分割しています。

alert(‘Hello’);
alert(‘World’);

コメント

コードが何をするのか、なぜこの処理をするのかを記述するコメントを追加することが可能です。
コメントはスクリプトの任意の場所に入れることができます。コメントはスクリプトの実行に影響を与えません。

1 行のコメントは、2 つの前方のスラッシュ文字 // で始まります。

// この部分がコメントです
alert(‘Hello’);

複数行のコメントは、最初にスラッシュとアスタリスク /* で始まり、最後にアスタリスクとスラッシュ */ で終わります。

以下のようになります。

/* 2つの行を持つ例。
これは複数行のコメントです。
*/
alert(‘World’);

コメントの内容は無視されるので、 /* … */ の中にJAVASCRIPTのコードを入れても実行されません。

JQuery

jQueryはワードプレスに初めから組み込まれているJAVASCRIPTのブラウザー間の実行の差分を補完したり、様々なHTMLに含まれる要素のコントロールしたり、動的にデータを読み込むことができたりする便利な拡張機能の集合のようなJAVASCRIPTのコード群(ライブラリと呼ばれます)です。

ワードプレスのJAVASCRIPTコードは多くの場合このJQUERYの書式に従って記載されます。

$　JQUERYを介する機能であることを示す接頭子

jQueryライブラリには、CSSのクラスやIDを使って要素を選択できるjQuery関数が用意されています。
下記のコードではページ含まれるすべてのLiタグの要素に何らかの処理をするために選択するコードとなります。

var listItems = $( ‘li’ );

上記が一般的な書式ですが、ワードプレス上のｊQUERYでは＄を利用できませんので下記のように記載します。

var listItems = jQuery( ‘li’ );

ページが全部読み込まれてから実行する

jQuery( document ).ready(function() {)
alert( 'ready!' );
});

これは、ページの準備ができたら アラートを表示するプログラムになります。

要素のクラスやIDと連携

jQuery でできる最もシンプルなことは、いくつかの要素を取得して、それを使って何かをすることです。CSS セレクタを理解していれば、いくつかの要素を取得するのは非常に簡単です。

jQuery( ‘#header’ ); // IDが’header’の要素を選択します。
jQuery( ‘li’ ); // ページ上のすべてのリスト項目を選択します。
jQuery( ‘.person’ ); // クラスが ‘person’ のすべての要素を選択します。
jQuery( ‘#person’ ); // IDが ‘person’ のすべての要素を選択します。

 

ページ上のすべてのリスト項目のHTMLを変更したいとしましょう。これを行うには、.html() メソッドを使用し、選択されたリスト項目のすべての HTML を変更します。

下記のコードはリスト(Liタグ)の中身を全てAAAに置き換えします。

jQuery( 'li' ).html( 'AAA' ).

jQueryコードの連結

jQueryは、処理をドットで「連結」してまとめて呼び出すことができます。

jQuery( ‘li’ ).click(function() {)
alert(‘li要素がクリックされました！’)
});

上記の例では、li要素にクリックのイベントを付与し、クリックされたらアラートを表示します。

\ 　他社の制作したワードプレスサイトもOK ! 　/
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから

このコンテンツは役に立ちましたか？

はい いいえ

関連コンテンツ

コメントを投稿する


上の計算式の答えを入力してください