JavaScript – ページ 3 – 東京発、雲に乗って

2017年4月19日2017年4月19日

【JavaScript】連想配列でも配列でも要素数を取得

配列の要素数はlengthで取得できますが、
連想配列の場合はlengthは使えません。
スマートではないですがfor inでループを回してカウントするのが簡単です。

連想配列でも配列でも同じように要素数が取得できる関数です。

var len = function(val) {
  if(val == undefined || val == null) {
    return 0;
  }
  if(val instanceof Array) {
    return val.length;
  }
  else if(val instanceof Object) {
    var _cnt = 0;
    for(var x in val) {
      _cnt++;
    }
    return _cnt;
  }
  else {
    return val.length;
  }
};

var len = function(val) {

if(val == undefined || val == null) {

return 0;

}

if(val instanceof Array) {

return val.length;

}

else if(val instanceof Object) {

var _cnt = 0;

for(var x in val) {

_cnt++;

}

return _cnt;

}

else {

return val.length;

}

};

文字列だったら長さが返ってきます。

2017年4月13日2017年4月13日

【JavaScript】FORMタグのないページからPOST送信する

FORMタグがない状況でJavaScriptからパラメータをPOSTで渡す関数です。

var post_submit = function(url, data) {
  // FORMがなければ作ればいいじゃない。
  var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';
  for(var x in data) {
    _html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';
  }
  _html += '</form>';
  $("body").append(_html);

  $('#temp_form').submit();
  $('#temp_form').remove();
};

var post_submit = function(url, data) {

// FORMがなければ作ればいいじゃない。

var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';

for(var x in data) {

_html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';

}

_html += '</form>';

$("body").append(_html);

$('#temp_form').submit();

$('#temp_form').remove();

};

引数のdataには連想配列でパラメータを渡します。

2017年4月7日2017年4月12日

【jQuery】ページのトップ（最上部）へなめらかにスクロール

最近多用している、ページトップへのアニメーションスクロール、
jQueryなら簡単に実装できます。

var pagetop_scroll = function() {
  var speed = 500; /* ミリ秒 */
  var position = $('html').offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
};

var pagetop_scroll = function() {

var speed = 500; /* ミリ秒 */

var position = $('html').offset().top;

$('body,html').animate({scrollTop:position}, speed, 'swing');

};

2017年4月6日2017年4月6日

【JavaScript】ドラッグ＆ドロップで複数ファイルの一括アップロード

複数のファイルをドラッグ＆ドロップで一気にアップロードするページ、
実はけっこう簡単に作れます。Ajaxを使えばページ遷移も不要です。
（一部jQueryを使用しています）

まずはHTML側にドロップさせる場所を作ります。

<div id="upload_area">
<div id="drop_area" style="background-color:#f0f0f0;width:100%;height:200px;padding:10px;border:2px solid #808080;border-radius:5px;" ondragover="dragover(event);" ondrop="drop(event);">
この枠内にファイルをドラッグ＆ドロップしてください。
<br/>
複数のファイルを選択すれば一度にアップロードできます。
</div>
</div>

この枠内にファイルをドラッグ＆ドロップしてください。

<br/>

複数のファイルを選択すれば一度にアップロードできます。

</div>

ドラッグ時とドロップ時には関数を呼ぶようにしておきます。

次にその関数をJavaScriptで定義します。

ドラッグ中にブラウザの機能をキャンセルさせます。

var dragover = function(e) {
  e.preventDefault();
};

var dragover = function(e) {

e.preventDefault();

};

ドロップされたらファイルを取り出してアップロード関数を呼びます。

var upload_cnt = 0;
var drop = function(e) {
  // ブラウザの機能をキャンセルします
  e.preventDefault();

  // ファイルを取り出します
  var files = e.dataTransfer.files;
  upload_cnt = 0;
  file_num = files.length;

  // 1件ずつアップロード関数を呼びます
  for (var i = 0; i < files.length; i++) {
    ajax_upload(files[i]);
  }
};

var upload_cnt = 0;

var drop = function(e) {

// ブラウザの機能をキャンセルします

e.preventDefault();

// ファイルを取り出します

var files = e.dataTransfer.files;

upload_cnt = 0;

file_num = files.length;

// 1件ずつアップロード関数を呼びます

for (var i = 0; i < files.length; i++) {

ajax_upload(files[i]);

}

};

アップロード関数です。
（エラー処理などは割愛し要点だけ簡単に記述します）

var ajax_upload = function(file) {
  var form_data = new FormData();
  form_data.append('file', file);
  var func = function() {
    upload_cnt++;
    if(file_num == upload_cnt) {
      alert('アップロードが完了しました');
    }
  };
  $.ajax({
    type: 'POST',
    url: '（アップロード処理を行うサーバー側のURL）',
    data: form_data,
    success: func
  });
};

var ajax_upload = function(file) {

var form_data = new FormData();

form_data.append('file', file);

var func = function() {

upload_cnt++;

if(file_num == upload_cnt) {

alert('アップロードが完了しました');

}

};

$.ajax({

type: 'POST',

url: '（アップロード処理を行うサーバー側のURL）',

data: form_data,

success: func

});

};

対応していないブラウザのための処理をロード時に呼びましょう。

if(!window.File) {
  $('upload_area').html('対応していません');
}

if(!window.File) {

$('upload_area').html('対応していません');

}

2011年9月20日2017年4月12日

【ツール】生年月日を設定すると年齢が返ってくるウィジェットできたよー

年齢は当然ですが毎年増えていくもので、
ページに直接年齢を記述したりすると
やがて間違った情報になってしまいます。

毎年修正するのも面倒でしょうし
（〇〇年時点）と記述しても、数年後には分かりにくいですよね。

生年月日を使って、年齢を自動計算させましょう。

下記のように
年齢を表示したい場所にscriptタグを2つ貼り付けるだけです。

私は
<script type="text/javascript">
var birth = '1977-03-18';
</script>
<script type="text/javascript" src="//clouds.tokyo/blog/tools/birth2age.js"></script>
歳です。

私は

var birth = '1977-03-18';

</script>

歳です。

最初のscriptタグの1行目、1977-03-18の部分をあなたの生年月日に変えるだけ。
おかしな値を入れると「(ERROR)」と表示されます。

実行した結果は↓

「私は歳です。」

↑40の部分、「40」と書いているのではなく、上記のscriptタグを埋め込んでいます。

scriptタグが禁止されている人はあきらめましょう。

ブログの投稿なんかで使うと逆に不自然なので注意してください。
プロフィールページとかにどうぞ。