人気ブログランキング |
タグ:Javascript ( 20 ) タグの人気記事
(JavaScript)match関数を使った正規表現チェックでハマッた
JavaScriptで以下のようにmatch関数を使っていたんですが、一致する値をフォームに入力しても値がnullになります。
//要素選択は、jQueryを使用
alert( $("#tel").val().match('/^[0-9-]{6,9}$|^[0-9-]{12}$/') );


で、よくよく match() の使い方を見たら、パターン文字列はクォーテーションで囲む必要がないんですね。

なので、正しくは下記のとおりになるようです。
//要素選択は、jQueryを使用
alert( $("#tel").val().match(/^[0-9-]{6,9}$|^[0-9-]{12}$/) );


パターン文字列を変数に入れたい時もクォーテーションで囲む必要がありません。
var ptn = /^[0-9-]{6,9}$|^[0-9-]{12}$/;
//要素選択は、jQueryを使用
alert( $("#tel").val().match( ptn ) );


match関数は、マッチすればその値を配列で、マッチしなければnullを返すようです。


参考:
JavaScript - String - match()
正規表現(RegExp)
matchの戻り値って - プログラマ的京都生活
by Jehoshaphat | 2012-11-10 22:37 | Webがらみ
(JavaScript)jQueryを使って文字列の前後の空白を削除
.NetやJavaだと文字列の前後の空白を取り除くための trim メソッドがあるんですが、JavaScriptにはどうやら無いようです。

JavaScriptライブラリの jQuery を使うと、trim が使えるようですね。
こんな感じです。
$.trim(" ほげ ");

半角、全角、タブ、改行が削除の対象となるようです。

JavaScirptだけでtrimをしようとすると、下記のようにすればいいようです。
function trim(str) {
return str.replace(/^[  \t\r\n]+|[  \t\r\n]+$/g, "");
}


参考:
jQuery 開発者向けメモ - リファレンス
浮浪プログラマの始末書:[JavaScript] 文字列空白除去(trim)
by Jehoshaphat | 2012-11-07 00:02 | Webがらみ
(PHP,HTML)AjaxUpload 画像選択時にアップロードしサムネイルを表示
HTML5になるとローカルファイルをブラウザにドラッグしてアップロードできるで書いたように、HTML5対応でないブラウザを考慮すると、従来通りファイル選択ダイアログから画像を選ばしてアップロードするというアプローチになります。

しかし、通常はアップロードファイルをファイル選択してもブラウザにはファイル名が出るだけです。

今回やってみるのは、ファイル選択したら画像を非同期(Ajax)でアップロードし、サムネイルを表示する方法です。


jQuery と AjaxUpload を使います。

AjaxUploadは元来、http://valums.com/ajax-upload/で公開されたらしいのですが、現在は FileUploader という新しいものになっているようです。

で、解説サイトAjax Upload - ZURB Playground - ZURB.comからAjaxUploadをダウンロードします。

使い方は下記のような感じです。

●クライアント側
・HTMLファイル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="ajaxupload.js"></script>
</head>
<body>
<!-- ↓AjaxUploadを使うためのスクリプト。画像を非同期でアップし、完了したらサムネイル表示 -->
<script type="text/javascript" charset="utf-8">
$(function(){
//サムネイル表示するimgタグを ID 名で指定(jQueryを使ったセレクタ)
var thumb = $('img#thumb');
var imagefilename = $("#imagefilename");
//AjaxUploadクラスを生成し、参照ボタン押下時の処理を定義。第一引数は参照ボタンのID名。
new AjaxUpload('imageUpload', {
//formタグのID名 newHotnessForm を実行
action: $('form#newHotnessForm').attr('action'),
name: 'image',
//アップロード中は loading スタイルシートを利用
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
//アップロード完了時の処理
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
//img要素表示
thumb.css("display", "inline");
//hiddenに画像パス指定
$("#imagefilename").attr("value" , response);
/*デバッグ。Ajaxで返された値を表示。*/
$("#res").html(response);
}
});
<!-- ↓クリアボタン押下時の設定 -->
$("#pic1_clear").click(function(){
thumb.removeAttr('src');
thumb.css("display", "none");
imagefilename.attr("value" , "");
});

});

</script>

<form id="hoge" method="post" action="hoge.php"><!-- ←メインのフォーム -->
氏名:<input type="test" id="name" name="name" size="20"><br>
写真1:<input type="file" id="imageUpload" name="imageUpload" size="20"><br>
<!-- ↓に上記参照ボタンで選んだ画像ファイルが表示される。 -->
<div class="preview">
<img id="thumb" width="320px" height="240px" class="no_display" >
<!-- 参照ボタンで画像選択時に、アップロードされた画像パスを保持し、メインのフォーム先に送信 -->
<input type="hidden" id="imagefilename" name="imagefilename" >
</div>
<!-- デバッグ用。Ajaxで返された値を表示 --><div id="res"></div>
<input type="submit" value="登録">
</form>

<!-- ファイル選択参照ボタン押下時に動くフォーム -->
<form id="newHotnessForm" method="post" action="./upphp.php">
</form>

</body>
</html>



・スタイルシート
.loading{
background-image: url("./images/load.gif")
}
.no_display{
display: none;
}


HTMLの規約上、formはネストさせてはいけないので、メインのformとは別に定義する必要があります。(ネストさせるとうまく動きませんでした。
JavaScriptでAjaxUploadのインスタンスを作成し、参照ボタンでファイルを選んだらサーバに送信し、その後、サーバからレスポンスで画像ファイルへのパスを取得し表示します。
ただ、上記の方法だとメインフォーム送信時に、参照ボタンで選んだ画像ファイルを送ることはできません。
なので、AjaxUploadでアップロードされたファイルパスをhiddenに持ち、そのアップロードファイルパスをメインフォーム送信先に送るような仕組みにしています。


●PHPサーバ側(upphp.php)
$uploaddir = './uploads/';  
//画像更新時に発生するブラウザキャッシュの問題を回避したければ、timme() でUnixタイムスタンプをつけたほうが良いかも。
$file = $uploaddir . basename($_FILES['image']['name']);
 
//画像かどうか
$imginfo = getimagesize( $_FILES['image']['tmp_name'] );
if ( $imginfo[2] == IMAGETYPE_JPEG || $imginfo[2] == IMAGETYPE_GIF
|| $imginfo[2] == IMAGETYPE_PNG ){

//画像の時
if (move_uploaded_file($_FILES['image']['tmp_name'], $file)) {
echo $uploaddir . $_FILES['image']['name'];
} else {
echo $uploaddir . "err.jpg";
}
 
}else{
//画像じゃないとき
echo $uploaddir . "err_nonimg.jpg";
}

PHP側では送信されてきたファイルが画像ファイルかどうか判断し、画像ファイルならアップロードディレクトリにコピーします。
そして、ファイルパスをクライアントに返します。

ただ、一回画像をアップロードし、再度参照ボタン押下して別画像に更新しようとすると、ブラウザキャッシュのせいで、画像自体はアップロードされているものの、ブラウザ表示上は変わらない現象が発生しました。(HTTPヘッダでキャッシュ無効にしてもダメでした。)
なので、ファイル名にUnixタイムスタンプを含めるなどの手法を取り、ファイル名が同一にならないようにしたほうが良いかもしれません。


参考:
画像アップロード時にjQueryでサムネイルを表示する方法 | Web活メモ帳
AJAX Multiple File Upload Form Using jQuery
php で画像ファイル形式を判別する方法 - ブックマクロ開発に
PHP関数講座:getimagesize -- そふぃのphp入門
by Jehoshaphat | 2012-10-22 01:31 | PHP開発
(JavaScript)jQueryでAJAX
(JavaScript)ページの一部を動的に置き換える(prototype.js) でprototypeを使ったAjax通信方法を書きました。

今回はjQueryを使った方法です。

AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | QUALL - blogに、PrototypeとjQueryでのAjax構文の比較がなされてました。

ほぼコピペですが、jQueryを使った場合,下記のような感じとなります。

●HTML、JavaScript側

<script type="text/javascript">
$(function(){
$("#evnt").click(function(){
//AJAXを使い、サーバにリクエス。レスポンスを表示。
$.ajax({
url : "/test.php", //リクエス先
type : "post", //GETかPOSTか
data : ({ prm1: $("#paramtext1").val() , prm2: $("#paramtext2").val() }), //パラメータ
success : function(request){
$("#rest").html(request);
}
});
});
});
</script>
 
<input type="text" id="paramtext1">
<input type="text" id="paramtext2">
<input type="button" id="evnt" value="実行">
<div id="res"> </div>





●PHP側(test.php)

foreach ($_POST as $key => $value) {
echo $key . "は" 0 $value . "です<br>";
}

by Jehoshaphat | 2012-10-22 01:27 | Webがらみ
(オンラインツール)JavaScript整形サイト
JavaScriptを解析するときに、サイトによっては改行やブランクを省いてたりして読みづらい場合が多々あります。

そんな時に、Online JavaScript beautifier にアクセスすると、コードを整形しインデントをつけてくれます。
ホント重宝します。
by Jehoshaphat | 2012-02-06 00:14 | ツール
(HTML)指定時間後別ページにジャンプさせる

よくサイト移転で、「新しいサイトに移転しました。○秒後にジャンプします」みたいページを見かけます。
てっきり、Javascriptでやってるのかと思いましたが、下記のようなHTMLのメタタグでもできるようです。

<meta http-equiv="refresh" content="秒数;URL=htt://jehupc.exblog.jp/">

非常に簡単ですね。


Javascriptだと下記のようにできるようです
<SCRIPT language="JavaScript">
<!--
mnt = 5; // 何秒後に移動するか?
url = "http://www.eweb-design.com/"; // 移動するアドレス
function jumpPage() {
location.href = url;
}
setTimeout("jumpPage()",mnt*1000)
//-->
</SCRIPT>

一定時間経過後に指定したページへ移動する - JavaScript
自動的に特定のページにジャンプさせる -HTMLタグ辞典-
by Jehoshaphat | 2011-09-23 22:50 | Webがらみ
(HTML)IE8でページ内リンクが動かない
IE8でページ内リンクが動かない現象が発生してます。必ず起こるというわけではないんですが、ページの下の方へ行くほどこの現象が頻発してきます。

ページの構成としては a.php から b.php のtestというアンカーリンク(ページ内リンク)を呼び出す処理で、a.phpのリンク先には b.php#test としています。

原因ですが、b.php はDBの結果を表示するものでサーバの負荷が高く1ページのデータ量がかなり多いもの(テキストオンリーなのに1MB超え)となってます。
つまり、リクエストを投げてからページを表示するまで若干時間がかかってるようです。(Firebugで計測すると1.92sもかかってます)

おそらく、アンカーリンク先のページをまだ完全に読み込んでないのにIEがアンカーリンクへ飛ぼうとして、このような現象が起きたんだと思います。

対策としては本来は根本原因である1ページのデータ量を減らすべきなんでしょうが、とりあえずページを完全に読み込んだ段階で、Javascriptを使ってアンカータグへ飛ばすことにしました。

onLoad イベントがページの読み込みが完了したら動くのでここに処理書いてたんですが、それでも読み込みの方が遅延することがあったので、setTimeout を使ってアンカータグへ飛ぶのを意図的に(1秒)遅くすることにしました。

こんな感じです。


<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function Href(){
if ( location.hash.length > 0){
//アンカータグを取得し、そこに飛ぶ
location.href = location.hash;
}
}
// -->
</script>
</head>
<body onLoad="setTimeout('Href()', 1000)">
<!-- DBから取得したコンテンツだが省略 -->
<a name="testname">ページの最後の方にあるアンカータグ</a>
</body>
</html>



参考:
ホームページ読み込み時の処理(onLoad) - イベント処理 - JavaScript入門
[JavaScript] URLのアンカーを取得する。 - うなの日記
JavaScript setTimeout:
setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵
by jehoshaphat | 2011-08-25 12:18 | Webがらみ
(JavaScript)マウスオーバーしたら画像を差し替えるスクリプト
よく Web でメニュー画像等にマウスオーバーすると画像が変わるというのを見かけますが、あれを実現するために比較的な汎用スクリプトを作ってみました。(といって昔使ってたやつですが)

まず、各項目の on , off 画像を格納した image オブジェクトを最初に作成します。
この変数名は、HTML の変更対象の img タグの id の値_on(もしくはoff)という命名規則とします。

そして、On , Off というメソッドを作成し、これがマウスオーバーされたときの走るように、a タグのイベントハンドラに定義します。
このメソッドの引数は、変更対象の img タグの id の値にします。

コードはこんな感じです。


■HTML
<a href="index.html" onmouseout="Off('home')" onmouseover="On('home')"><img src="/image/btn_home_off.jpg" id="home"  /></a>
<a href="xxxx.html" onmouseout="Off('product')" onmouseover="On('product')"><img src="/image/btn_product_off.jpg" id="product" /></a>
<a href="yyyy.html" onmouseout="Off('download')" onmouseover="On('download')"><img src="/image/_btn_down_off.jpg" id="download" /></a>


■JavaScript
//表示するイメージを格納した変数定義
if (document .images) {
var home_on=new Image();
home_on.src="/image/btn_home_on.jpg"; // ポイント時の画像
var home_off=new Image();
home_off.src="/image/btn_home_off.jpg"; // 通常の画像
 
var product_on = new Image();
product_on.src = "/image/btn_product_on.jpg";
var product_off= new Image();
product_off.src = "/image/btn_product_off.jpg";

var download_on = new Image();
download_on.src = "/image/btn_down_on.jpg";
var download_off = new Image();
download_off.src = "/image/btn_down_off.jpg";
}
 
 
// ポイント時の処理
function On(name) {
if (document .images) {
document .images[name].src=eval(name + '_on.src');
}
}
 
// 放した時の処理
function Off(name) {
if (document .images) {
document .images[name].src=eval(name + '_off.src');
}
}

by jehoshaphat | 2009-03-02 22:53 | Webがらみ
(HTML)JavaScriptの有効、無効でページの内容を切り替える方法
こちらを参考にしました。
↑で記述されているように2つの方法があるみたいです。
1. 基本エラーページを表示していて、JS 有効時に正常なページを表示する
2. JS が無効なら noscript タグの部分に META でエラーページへ誘導する


これで、1の方法でやってみました。

<html><head>
....
</head>
<body>

<!--JavaScript無効対策-->
<div id="JSNG" class="nonJs">
<p>JavaScriptが無効にされています。本サイトはJavaScriptを有効にしてご覧ください。</p>
</div>
<script type="text/javascript">
document.getElementById("JSNG").style.display = "none";
</script>

<div class="mainContents" id="mainContents" >
ここにメインコンテンツを記述。
</div>
<!--JavaScript無効化対策-->
<script type="text/javascript">
document.getElementById("mainContents").style.display = "inline-block";
</script>

</body>
</html>

(なんかエキサイトブログの厚かましい使用のせいでdocument.のdを全角にしてるのでコピペする場合は注意してください)
これで、JavaScriptが無効なら id=JSNG のブロック要素のみが表示され、有効なら id=mainContents のブロック要素のみが表示される仕組みです。
by jehoshaphat | 2008-11-29 22:23 | Webがらみ
(JavaScript)ページの一部を動的に置き換える(prototype.js)
業務で久しぶりにWebを触ってます。
自社HPのメンテなのですが、各ページのヘッダー(ナビゲーションメニューと会社ロゴ)とフッター(コピーライトとその他もろもろ)の変更にも簡単に対応できるように、それらを別ファイルとして保存しておきページ読み込み時に自動的にヘッダー、フッターファイルを読み込んで表示させるようにしたいと思いました。

JavaScriptでファイル読み込んでinnerHTMLで挿入すればいいだけなのですが、数年前にAjaxの開発で使った老舗ライブラリprototype.jsを使ってみました。

prototype.jsのバージョンは1.6.0.3です。

サーバ側にあるファイルを取得してクライアント側のHTMLページ内の指定の場所に表示するだけでれば、Ajax.Updateを使い非常に簡単にできます。


function IncludeHeadFooterFiles() {
new Ajax.Updater(
{ success: 'header' } ,
'header.html' ,
{ method: 'get' , onFailure: displayError}
);
 
new Ajax.Updater(
{ success: 'footer' } ,
'footer.html' ,
{ method: 'get' , onFailure: displayError}
);
}
 
function displayError(){
alert("ファイルの取得に失敗しました");
}




あとはページのOnloadイベントに IncludeHeadFooterFiles() 関数をセットするだけでOKです。


ちなみにIE7でローカル上(webサーバを経由せず)にテストすると、うまく動きませんでした。
どうやらエクスプローラからHTMLをブラウザで見るとダメみたいです。
ちゃんとWEBサーバに配備してからhttp経由でテストしないといけないんですね。
Firefox3はローカル上からいけたんですが、IE7はやっぱ面倒です。

参考:ファイルの表示(Ajax.Updater)
by jehoshaphat | 2008-10-13 20:01 | Webがらみ