KENスクールブログ-パソコンスクール パソコン教室 KENスクール

JavaScript

JavaScriptとJSON

JSONとは

以前にも増してJavaScript界隈で聞くことが多くなったデータの表現形式に「JSON」というものがあります。正式には「JavaScript Object Notation」といいます。名前に含まれている通り、JavaScriptのために作られた表記法です。

XML同様、テキストファイルとして作ることもでき、人間が読み書きしやすいようなデータ形式となっています。また、階層を追って目的のデータを探しに行くXMLより、JavaScriptからのデータアクセスがしやすい構造になっているため、データの解析がXMLよりも速いというメリットがあります。

AjaxとJSON

Ajaxも、現在は利用が当たり前のようになってきているJavaScriptを利用した技術です。「Asynchronous JavaScript + XML」の略称で、JavaScriptからWebサーバーにリクエストを送り、サーバーからXML形式で取得したデータをもとにして、JavaScriptで動的にブラウザのコンテンツを書きかえる技術です。「非同期通信」という仕組みを使っています。このとき取得するデータを、XMLではなくJSONデータにすることも増えています。

JSONの基本書式

このように、1つ1つのデータを管理する項目名(名前)と、具体的なデータ(値)のセットをカンマで区切ってリストアップしていくような構造になっています。

名前と値の1セットを、JSONではまとめて「メンバー」と呼びます。

JSON 表記例1

配列や連想配列、マップに似た構造となっていますね。この例では、5つのメンバーを含んでいることになります。

JSONの型

JSONは、XMLと違い「型」というものが値に対して存在します。「型」というのはデータのタイプ(種類)のことです。

● string型(文字列)
“KEN” や “プログラム” など、文字をダブルクオートで囲んだもの。プログラムではよく「文字列」と言います。
● number型(数値)
100や3.14など、ダブルクオートなどで囲まず、数値をそのまま書いたもの。
● boolean(真偽値)
true、falseの2つ。if文やwhile文では、条件の判定結果として使われますが、JSONでは「はい/いいえ」「ON/OFF」的な要素として使われることが多いです。
● null(ヌル値)
空文字や、0とは違う「値が何もない」という状態を表すもの。
● array(配列値)
複数の値を[ ]でまとめて管理する形式。
例)
JSON 表記例2

このような構造にすることで、簡易的なデータベースのように扱うこともできます。

イメージ

id name tel
1001 さいとう 070-0000-0000
1002 すぎやま 080-0000-0000
1003 よねやま 090-0000-0000

JavaScript以外でもJSONをデータの形式として利用することは増えていますので、是非学習してみてください。

この記事に関連する講座

ライブラリの利用にとどまらない技術をマスター

詳しくはこちら


カテゴリー: JavaScript Web プログラム

jQueryでタブごとに色が変えられるタブメニューをプラグインなしで実装する

jQueryには便利なプラグインがたくさんありますが、ちょっとした機能や、シンプルな機能が欲しいという場合、また、プラグインでは存在していない仕組みを作りたい場合は、jQueryをベースとしたプログラムを自分で書く必要があります。

今回は、タブで文字を切り替えるという仕組みを、プラグインなしのjQueryコーディングのみで作成するソースコードを紹介します。

選択されていないタブの色が全て同じサンプルは、探すと結構あるのですが、せっかくならタブごとに色を変えられるように作ってみましょう。

 

実行イメージ

タブ切り替え

HTMLソース

 

記述の解説

liタグとsectionタグを1セットずつ増やし、liタグ内のaタグのhref属性にカラーコードを設定します。

liタグの幅をCSSで調整すれば、タブの数は自由に変更できます。 見た目は適宜CSSで調整をしてください。

下部 <div id=”tab_disp”></div> はタブの切り替えに合わせて中身の変わる、文字表示領域です。

 

jQueryソース

記述の解説

タブ切り替えに合わせて表示したい文字を管理している範囲を、非表示にします。

liタグの数だけ繰り返し処理を行い、aタグのhref属性に設定されたカラーコードをliタグ本体の背景色に設定します。
また、クリックされた位置がわかるようにaタグにclass属性をつけ、連番になる値を設定し、目印をつけます。

初期状態を「TOP」タブが選択されている設定し、
次にタブクリック時の処理を設定します。
クリックされた箇所を取得して、href属性に設定したカラーコードを文字表示領域の背景色にし、sectionタグの中身を表示する内容として設定します。

 


 

タブを実装するプラグインはたくさんありますが、ちょっとしたカスタマイズを盛り込みたいときなど、出来合いのプラグインを利用するだけだと、プラグイン本体のカスタマイズが必要になったり、逆に手間がかかる場合もあります。

jQueryは、本来のJavaScriptより、HTMLを操作するプログラムを書きやすいような機能が豊富に用意されています。

ですので、単純にプラグインを入れるだけでなく、jQueryそのもののコーディング方法を理解してこそ「jQueryを理解した」と言えるでしょう。

 

今回はHTML・jQuery・CSSの各ソースコードの紹介と概要の説明となりましたが、これを機に「jQueryを使う」から「jQueryを書く」ということを考えてみてはいかがでしょうか。

 

 

この記事に関連する講座

JavaScriptで動きのあるサイトを作る!

詳しくはこちら


カテゴリー: JavaScript Web

使える!簡単でお洒落なjQueryのスクロール

autumn-194834_640
iphoneを起動させてから左にスライドし、パスコードを入力する画面に切り替わる際、
背景が徐々にボケるのご存知でしょうか?

Webサイトでも、ページをスクロールする際に前の画像がボケて切り替わると
お洒落だと思いませんか?

実はjQueryを利用する事で、Webページにこのような機能を簡単に実装できるのです。

(サンプル表示)

準備も簡単です。
『通常表示させたい画像』と『ぼかした画像』の2種類を用意するだけです。

では、手順に沿って実装してみましょう。

(1)jQuery公式サイトより、jQuery本体をダウンロードします。
 http://jquery.com/download/
01

(2)Crossfade.jsをダウンロードして解凍します。
 https://github.com/mikefowler/crossfade.js
02

(3)(1)と(2)でダウンロードしたjsファイルをscript要素で読み込みます。
 (今回のサンプルはHTMLと同じ階層に配置しています)

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

必要なjQueryの読み込みは以上です。
次は使い方を見ていきましょう。

(4)ぼかしを適用させたい要素をセレクターで指定し、crossfade()メソッドを呼び出します。
 下記は「.cf」というクラスで指定しています。

 <script>
 	$(function(){
 		$('.cf').crossfade();
 	});
 </script>

(5)画像に効果を適用させたい箇所をdiv要素で囲み、クラス「.cf」を追加します。

 <div class="cf"></div>

(6)『通常表示させたい画像』の画像のパスを「data-crossfade-start」に、
 『ぼかした画像』の画像のパスを「data-crossfade-end」にそれぞれ指定します。

 <div class="crossfade" data-crossfade-start="通常表示させたい画像のパス" data-crossfade-end="ぼかした画像のパス"></div>

(7)CSSは、画像を表示する要素にpositionプロパティのrelativeを指定します。

 .div要素に指定するクラス名 {
    position: relative;
 }

以上です。
これだけでスクロールすると徐々にボケる効果が実装できてしまうのです。
簡単ですよね!

基本的な動作以外にも色々なオプションが用意されておりますので、
試してみてくださいね。

また、MITライセンスですので、著作権表示は削除しないようにしましょうね。


カテゴリー: JavaScript Web プログラム

JavaScriptで画像を変更する方法【初心者向け】

children-593313_640

今回は、JavaScriptで画像を変更する方法について解説します。
JavaScriptはWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

画像とボタンを表示させよう

まずは、画像とボタンを画面に表示しましょう。
画像を変更するimgタグにid属性を指定するところがポイントです。

<p>
    <img src="images/gu.jpg" alt="ジャンケン" id="janken" >
</p>
<p>
    <button type="button">グー</button>
    <button type="button">チョキ</button>
    <button type="button">パー</button>
</p>

グー

画像を変更する書き方

次に、画像を変更する書き方を説明します。
JavaScriptで画像を変更するときは、下記のように書きます。

document.getElementById('imgタグのid属性').src='画像のパス';

下記のようなimgタグの画像を「images/gu.jpg」から「images/choki.jpg」に変更したい場合は、「imgタグのid属性」に「janken」を指定し、「画像のパス」に「images/choki.jpg」を指定します。

<img src="images/gu.jpg" alt="ジャンケン" id="janken" >

document.getElementById('janken').src='images/choki.jpg';

ボタンをクリックした時に画像を変更しよう

JavaScriptでボタンをクリックした時に、画像を変更するなどの処理をさせるためには、下記のように書きます。

<button type="button" onclick="画像を変更するなどの処理">グー</button>

最後に、各ボタンをクリックした時に画像を変更できるように追記しましょう。

<p>
    <img src="images/gu.jpg" alt="ジャンケン" id="janken">
</p>
<p>
    <button type="button" onclick="document.getElementById('janken').src='images/gu.jpg'">グー</button>
    <button type="button" onclick="document.getElementById('janken').src='images/choki.jpg'">チョキ</button>
    <button type="button" onclick="document.getElementById('janken').src='images/pa.jpg'">パー</button>
</p>

入力できたら、各ボタンを押して確認してみましょう。

チョキ

パー

グー

今回は、ボタンをクリックした時に画像を変更する方法を紹介しましが、マウスがボタンの上に重なった時や、離れた時に画像を変更させることもできます。
ご自身で調べて、いろいろ試してみましょう。


カテゴリー: JavaScript プログラム