タグ別アーカイブ: Javascript

Javascript：画面上部に入力フォームの進捗状況を表示する「Fort.js」

Posted on by
返信

入力フォームの画面上部に入力の進捗状況を示すプログレスバーを表示することができる、
Javascriptのスクリプト「Fort.js」をご紹介します。

「Fort.js」

jquery_fort_js_1

「Fort.js」を使用するとフォームを入力した時に進捗状況のプログレスバーを
アニメーションで表示することができます。

ダウンロードはこちら

また、「Fort.js」はjQueryを使用しないで動作するスクリプトです。

下記にJavascriptのスクリプト「Fort.js」を使用して進捗状況を知らせるプログレスバーを
表示させた時の方法をメモします。

ライセンスはMITです。

■ 「Fort.js」の使い方

「Fort.js」をダウンロードします。

【共通で読み込むファイル】

ダウンロードしたスクリプトとスタイルを読み込みます。
headタグに下記のコードを記述します。

<link rel="stylesheet" href="fort.min.css">
<script src="fort.min.js"></script>

【HTML】

bodyタグの後にプログレスバーを表示する時に使用するdivタグを記述します。

<body>
    <div class="top">
        <div class="colors"></div>
    </div>

【JS】

bodyの閉じタグの前に「Fort.js」のスクリプトを記述します。

    <script>
        solid();
    </script>
</body>

上記の設定をして入力フォームを設置するとフォーム入力時、
画面上部にプログレスバーが表示するようになります。

また、エフェクトは他にもあります。

solid()

flash()

gradient()

sections()

ログイン画面などの入力フォームで活用できそうです。
スタイルシートなどを変更すればプログレスバーの色やサイズなども変えることができます。

Javascript：セレクトボックス選択時にページ遷移する

Posted on by
返信

セレクトボックスの値を変更した時に、選択した項目によって別のページに遷移（リンク）させたい場合があります。

Javascriptを使用すれば簡単にページ遷移させることが可能です。

JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。

JavaScriptでページ遷移する方法は「location.href」を使用します。
以前に「location.href」の説明を記述しました。下記に記載しています。

Javascript：locationオブジェクトでURL情報を取得する

セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。

下記に例を記述します。

■ セレクトボックス選択時にページ遷移

onChangeはフォームの入力・選択値が変更された時に処理を行うイベントです。

セレクトボックスに「onChange=”location.href=value;”」を記述します。
optionタグのvalue値に遷移させるURLを指定します。

<select onChange="location.href=value;">
    <option value="">---------</option>
    <option value="sample1.html">サンプル1</option>
    <option value="sample2.html">サンプル2</option>
    <option value="http://www.google.co.jp/">Google</option>
    <option value="http://www.yahoo.co.jp/">Yahoo!</option>
</select>

セレクトボックスの値を変更すると、選択した値のURLに遷移することができます。

たまに使いたい時があるのでメモしておきます。

Javascript：print()メソッドを使用して印刷ボタンを設置

Posted on by
返信

Javascriptのprint()メソッドを使用して、印刷ボタンを設置した時の方法をメモします。

データなどを出力する場合など、WEBページを印刷することがあります。

ブラウザのヘッダーにあるメニューからページを印刷してもいいのですが、
ページ内に印刷ボタンがあった方が効率が良い場合があります。

print()メソッドを使用すると、簡単に印刷ダイアログを呼び出してページを印刷することが可能です。

また、ボタンではなくリンクで設定することも可能です。

■ print()を使用して印刷ボタンを設置

【HTML】

・ボタンで設定する場合

<input type="button" value="印刷する" onclick="window.print();" />

・リンクで設定する場合

<a href="#" onclick="window.print(); return false;">印刷する</a>

■ 印刷用のCSSを作成する場合

印刷時に印刷するボタンやリンクなどを隠したいなど、
印刷用のスタイルを適用させたい場合があります。

head内で読み込むCSSファイルに「media=”print”」を設定します。

※印刷時にスタイルが適用されます。

<link rel="stylesheet" type="text/css" href="./print.css" media="print" />

ページ表示用とは別に作成した方がいいと思います。

印刷に不要な部分を非表示にする場合は下記のように記述します。

【CSS】

.noprint {
	display: none;
}

【HTML】

<div class="noprint">
    <a href="#" onclick="window.print(); return false;">印刷する</a>
</div>

長いページなど、改ページの位置を指定したい場合は下記のように記述します。

【CSS】

div.pagebreak {
	page-break-after: always;
}

【HTML】

<div class="pagebreak">
    印刷する内容
</div>

印刷するようなページを作る場合は、印刷するボタンやリンクがあった方が楽に印刷ができると思います。
また、ブラウザのバージョンによっては、print()メソッドが使用できない場合があるようです。

 

Javascript：Javascriptで配列をループする「for」

Posted on by
3

Javascriptで配列をループする方法をメモします。
配列をループさせる場合はfor文を使用します。

lengthを使用して配列の数を取得し、取得した数までループすれば、
配列の全ての値を出力することが可能です。

下記にJavascriptで配列をループし、配列の値を出力した時の方法をメモします。

■ Javascriptで配列をループ

Javascriptで配列を用意し、for文でループします。
「arr.length」で配列の数を取得しています。

<script type="text/javascript">
var arr = ["a", "b", "c", "d", "e"];

for (i = 0; i < arr.length; i++) {
    document.write(arr[i] + '<br>');
}
</script>

下記のように文字列を書き出します。

a
b
c
d
e

上記の方法で配列をループし値を出力することができます。
phpのforeachのようなものがあれば簡単にループすることができるのですが…

Javascript：locationオブジェクトでURL情報を取得する

Posted on by
返信

JavascriptでアクセスしているURL情報を取得する場合、
locationオブジェクトを使用すれば簡単に取得することができます。

URL、ホスト名、アンカーなど色々な情報を取得することができます。
また指定したURLに移動することもできます。

下記にlocationオブジェクトの機能や使用例をメモします。

■ locationオブジェクトの機能説明

※下記URLでアクセスした場合
「http://www.hoge.com/location/index.html?aaa=100#test」

「location.href」

現在アクセスしているURLを取得します。
また、指定したURLに遷移します。

・URLを取得

var url = location.href;
alert(url);

【実行結果】

http://www.hoge.com/location/index.html?aaa=100#test

・指定したURLに遷移

location.href = 'http://google.co.jp';

指定したURLに遷移します。

「location.host」
「location.hostname」

現在アクセスしているホスト情報を取得します。

・ホスト情報を取得（host）

var host = location.host;
alert(host);

【実行結果】

www.hoge.com

・ホスト情報を取得（hostname）

var hostname = location.hostname;
alert(hostname);

【実行結果】

www.hoge.com

「location.hash」

現在アクセスしているアンカーを取得します。
また、指定したアンカーに移動します。

・アンカーを取得

var hash = location.hash;
alert(hash);

【実行結果】

#test

「location.port」

現在アクセスしているポート番号を取得します。

「location.protocol」

現在アクセスしているプロトコルを取得します。

var protocol = location.protocol;
alert(protocol);

【実行結果】

http:

「location.pathname」

現在アクセスしているパス情報を取得します。

var pathname = location.pathname;
alert(pathname);

【実行結果】

/location/index.html

「location.search」

現在アクセスしているパラメータ情報を取得します。

var parameter = location.search;
alert(parameter);

【実行結果】

?aaa=100