JavaScriptを使う

[JavaScriptとは?]
JavaScript(ジャヴァスクリプト)とは,プログラミング言語のひとつである.Javaと名前が似ているが,異なるプログラミング言語です.オブジェクト指向のスクリプト言語であることを特徴とします.(wikipediaより)
このスクリプトをwebサイトに使用することで動的なウェブサイト構築が可能となり,様々なインタラクションやそれぞれのオブジェクトに「動き」をつける事が出来ます.

	<script>ここにコードを記述する</script>

JavaScriptを使用するには上記のスクリプトタグを使用します.記述する位置は通常はheadタグの終了の直前でスタイルシートの読み込みよりも後に書きます.

[jQuery]
jQuery(ジェイクエリー)は,ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです.ジョン・レシグが,2006年1月に開催された BarCamp NYC でリリースしました.様々な場面で活用されており,JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいます.(wikipediaより)

<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link href="css/styles.css" rel="stylesheet" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
</head>

jQueryを使用する際にはまずjQueryの本体をスクリプトタグを使用して読み込みます.上記の例では「index.html」の同階層に「js」というフォルダを作成しその中にjQueryファイルを置いて,5行目でscriptタグを使用して読み込んでいます.(※ファイルパスに注意 src=”js/jquery.min.js”)
read

[jQueryプラグイン]
jQuery本体を読み込むことで使用できる様々なプラグインを指します.プラグインは様々な用途に合わせて各ユーザーが使いやすく作成したものです.使用する際は著作権やライセンスなどに注意して下さい.目的に合わせて使用するプラグインを探し使用していきます.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LightBox Sample</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
	<header id="siteheader">
		<h1>LightBox Test</h1>
			<nav>
				<ul>
					<li class="button"><a href="#works">WORKS</a></li>
				</ul>
			</nav>
	</header>
	<div id="contents">
		<!--works-->
		<div id="works">
			<h2>
				WORKS<br/>
				─
			</h2>
			<div><a href="img/works_img/01.jpg" rel="lightbox[group]"><img src="img/thumb/01.jpg" width="250px" alt="thumb01"></a></div>
			<div><a href="img/works_img/02.jpg" rel="lightbox[group]"><img src="img/thumb/02.jpg" width="250px" alt="thumb02"></a></div>
			<div><a href="img/works_img/03.jpg" rel="lightbox[group]"><img src="img/thumb/03.jpg" width="250px" alt="thumb03"></a></div>
			<div><a href="img/works_img/04.jpg" rel="lightbox[group]"><img src="img/thumb/04.jpg" width="250px" alt="thumb04"></a></div>
		</div>
	</div>
</body>
</html>

→サンプルページ(サムネイルをクリックするとポップアップで表示)
jQueryプラグインを使用する際にはまずjQueryの本体を先に読み込む必要があります.その後目的のプラグインを読み込み,使用するプラグイン特有の設定を行い使用していきます.
上記は「LightBox」というプラグインの読み込みと設定です.scriptタグを使用して,8行目でjQuery本体を読み込み,9行目でlightBoxを読み込んでいます.(jsフォルダを作成しその中に両ファイルを置いています).7行目ではlightBox特有のCSSを読み込んでいます.(閉じるボタン,矢印など)プラグインによってはCSSも読み込まなければ使用できないモノもあります.
読み込むだけでは何も起きません.使用するには27行目aタグを使用して,hrefで拡大画像を指定しています.aタグの入れ子でimgタグを使用してサムネイル画像を表示しています.lightBoxを使用するには,aタグにオプションで「rel=”lightbox”」と記述します.lightboxの後ろに[グループ名]を付けるとグループ化されてまとめて閲覧できるようになります.

[様々なjQueryプラグイン]
参考01:http://www.skuare.net/test/jQuery.html
参考02:http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2013-best.html

カテゴリー: ALL, Javascript, メモ パーマリンク