【教材用サンプル】パラメーターを使って初めてページを開いた時のみ実行する【Javascript】

カテゴリ : html/css, JavaScript, 教材サンプル

Webサイトのトップページなどで初めてページを開いた時のみ何か(例:アニメーションなど)を実行する方法です。

サイトを訪れた回数をcookieで取得することも可能ですが、今回は一度目のみを認識できれば良いのでパラメーターを使って簡単に実装します。

parameter.htmlとparameter2.htmlというファイルで確認をします。(ファイル名は任意です)

locationオブジェクトのsearchプロパティで取得した現在のURLのサーチ情報(?で始まる検索クエリ部分)を変数paramに代入し、変数paramの値が?count=2ではない場合「トップページに初めて訪れました」のアラートを出します。(それ以外の場合はアラートは出しません)

トップページに移動するためのa要素のhref属性に「parameter.html?count=2」と指定することで、二度目以降はURLのサーチ情報に?count=2が付与されます。

これによって2度目以降はアラートが出ず、初めてページを開いた時のみアラートを出すことができます。

parameter.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐1</title>
 </head>
 <body>
 <a href="parameter.html?count=2">TOP</a>
 <a href="parameter2.html">別ページに移動</a>
 <script type="text/javascript">
 let param = location.search;
 if(param !== "?count=2"){
 alert("トップページに初めて訪れました");
 //初めて訪れた時の処理を書く
 }
 </script>
 </body>
</html>

 

parameter2.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐2</title>
 </head>
 <body>
 <a href="parameter.html?count=2">トップへ戻る</a>
 </body>
</html>

【ライブラリ】jQueryの一般的な実装手順

カテゴリ : JavaScript, jQuery

 

スクリーンショット 2015-04-08 11.10.11

 

ぼくの教えているWeb講座の受講生の方から「ライブラリ(jQuery)の実装の手順について教えてほしい」と質問が上がりました。

 

色々なサイトで既に紹介されているのですが、中には解説が難しく感じるものもあるようなので、当サイトでも解説をしたいと思います。(とっても今更な感じですが・・・)

今回はまずjQueryへのリンクの貼り方を解説します。

 

 

第1回jQueryへリンクを貼ろう

 

まず最初に行うことは、jQueryを実装したいhtmlファイルからjQuery本体(javascriptファイル)へリンクを貼ることです。

リンクの貼り方は2通りあります。

 

 

a.  ローカルにjQuery本体をダウンロードしてリンクを貼る方法

 

jQuery公式サイトより、jQuery本体をダウンロードし、ローカルサイトフォルダの任意の場所へ移動します。

 

jQuery公式サイトへはこちらのリンクからジャンプします。(新規ウィンドウまたはタブが開きます)

 

スクリーンショット 2015-04-07 21.20.19

 

画面のやや右上にある「Download jQuery」ボタンより、ダウンロード画面へ移動します。

 

スクリーンショット 2015-04-07 21.22.35

 

必要なバージョンのjQueryをダウンロードしましょう。

 

スクリーンショット 2015-04-07 23.45.03

 

ダウンロード後、ローカルサイトフォルダ内の任意の場所に移動し、相対パスの記述でリンクを貼ります。

記述場所はhtmlファイルのhead要素内にしましょう。

 

例:htmlファイルと同じ階層にjsフォルダを作成し、そこにjQuery本体(jquery-1.11.2.min.js)を移動した場合、下記の記述でリンクを貼ります。(script要素以外は任意の記述をしてください)

 

<head>
<meta charset="UTF-8">
<title>jQueryの一般的な実装手順</title>
<script src="js/jquery-1.11.2.min.js"></script>
</head>

 

 

b.CDNを利用してjQuery本体へリンクを貼る方法

公式サイト内に設置されているjQueryの本体ファイルへリンクを貼ることができます。

下記の記述でリンクを貼ります。(script要素以外は任意の記述をしてください)

<head>
<meta charset="UTF-8">
<title>jQueryの一般的な実装手順</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

 

 

以上の2つの方法でjQueryへリンクを貼ることができます。

次回はプラグインの一般的な実装手順を紹介します。

 

【メモ (jQuery)】 Webサイト(全体または一部の要素)をフェードインさせる記述

カテゴリ : JavaScript, 未分類

 

alpha

 

今回はjQueryを使ってWebサイトの全体、または一部の要素をフェードインさせるアニメーションを紹介します。

要素に対するID名でアニメーションの指定が行えるため、比較的自由度が高い設定が行えると思います。

 

 

下記にまずはHTMLの記述から解説をします。

 

この記事の続きを読む

【メモ (jQuery)】 Webサイト全体をアニメーションさせる記述

カテゴリ : JavaScript, すべてのカテゴリ

anime

 

フルフラッシュサイトが流行っていた頃は、最初に全体をアニメーションさせながら登場させるなんていうサイトがよくありました。

 

今回はその動きをjQueryで作成してみたいと思います。

 

下記の記述でid名containerというdivをアニメーションさせてみたいと思います。

 

この記事の続きを読む

【メモ (Javascript)】 特定の要素の座標を取得する記述【jQuery】

カテゴリ : JavaScript, すべてのカテゴリ

js_座標取得

 

先日仕事の関係でJavascriptを使って要素の位置を取得する方法を調べていたので、こちらで紹介します。

 

いくつか方法があったのですが、以下の2通りを紹介します。

 

この記事の続きを読む

【メモ (WordPress)】 Javascript内の全角文字が文字化けしてしまったときの対処

カテゴリ : JavaScript, Wordpress, すべてのカテゴリ

 

スクリーンショット 2013-10-04 11.52.41

 

WordPressで作成したページから外部のJavascriptにリンクを貼った時、Javascript内に記述した値の全角文字が文字化けしてしまうことがあります。その場合の対処を下記に記述します。

この記事の続きを読む

最近の投稿

About Web Site & Key Word

このWebサイトについて&キーワード

■ html,css,JavaScriptなどのweb言語についての解説やメモ、Flash(ActionScript)でゲーム制作を行うための技術紹介、 WordPressを使用したCMS作成のための解説やメモ、アプリ制作の記録や解説やメモ、またそれらにまつわるニュースやブログを掲載します。

■ web制作,CMS制作,ゲーム制作,アプリ制作,
Android,iOS,iPhone,iPad,html,css,JavaScript,Flash,ActionScript,php,cgi,WordPress,Titanium Studio,ブログ,ニュース