スタイルシートでテーブル制御

JavaScript でHTMLタグのテーブル行<tr id=”foo”>の表示、非表示を切り替えるスクリプト

document.getElementById('foo').style.display = "none";  // 非表示
document.getElementById('foo').style.display = "";      // 表示

テーブル制御するには、同じページのリンクにリロードせずに動的に(onclick)イベント処理をする関数を実装する必要がありますね。本来はPHPが得意な分野だと思った。(粉みかん

jQuery の fullcalendar

jQuery カレンダーfullcalendarを使ってみました。

参考URL: 多機能のカレンダーを実装するjQueryプラグインのFullCalendar

リンク先 Download|FullCalender からzip ファイルをダウンロード、解凍。最新版は、fullcalendar-3.2.0.zip (2017年3月7日現在)

カレントディレクトリに./fullcalendar.min.css, ./fullcalender.js, ./lib/moment.min.js, ./lib/jquery.min.js, ./lib/jquery-ui.min.js, ./fullcalendar.js, ./locale/ja.js を以下の配置でindex.html を作ります。

<html>
<head>
<meta charset='utf-8' />
<link href="./fullcalendar.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./lib/moment.min.js"></script>
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="./fullcalendar.min.js"></script>
<script type="text/javascript" src="./locale/ja.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

demos ディレクトリの selectable.html ではイベントを書き加えることができます。しかし、データとして保存するにはPHPと連携してJsonデータの受け渡しを実装しないといけないので難易度高めに感じました。
Google カレンダー、使おう!(直球)

ちなみにシェルスクリプトでは、

$ cal [-y] month year

参考URL: http://webcache.googleusercontent.com/search?q=cache:Ui3UAAmc3nMJ:sookibizviz.blog81.fc2.com/blog-entry-344.html+&cd=3&hl=ja&ct=clnk&gl=jp

小数係数の処理

前回のエントリーでは連立1次方程式の解の分数表示、分母の符号処理について冗長なコードを書いてみました。(エレガントな方法ではありませんが・・・。)

https://stuffy.mydns.jp/~gusachan/javascript/SimultaneousEquations.html

今回は、小数係数の取り扱いについて考えてみたいと思います。

  function isInteger(w) {
    w = parseFloat(w);
    return Math.round(w) === w;
  }
  var getDecimalPointLength = function(number) {
    var numbers = String(number).split('.'),
        result  = 0;
    if (numbers[1]) {
        result = numbers[1].length;
    }
    return result;
  };
  if(!(isInteger(a1) && isInteger(b1) && isInteger(p1))) {
    var s1 = getDecimalPointLength(a1);
    var t1 = getDecimalPointLength(b1);
    var u1 = getDecimalPointLength(p1);
    var v1 = Math.max(s1, t1, u1);
    var a1 = a1*Math.pow(10, v1);
    var b1 = b1*Math.pow(10, v1);
    var p1 = p1*Math.pow(10, v1);
  }
  if(!(isInteger(c1) && isInteger(d1) && isInteger(q1))) {
    var s2 = getDecimalPointLength(c1);
    var t2 = getDecimalPointLength(d1);
    var u2 = getDecimalPointLength(q1);
    var v2 = Math.max(s2, t2, u2);
    var c1 = c1*Math.pow(10, v2);
    var d1 = d1*Math.pow(10, v2);
    var q1 = q1*Math.pow(10, v2);
  }
  var x1= d1*p1-b1*q1, y1 = a1*q1-c1*p1;
  var z = a1*d1-b1*c1, z1 = Math.abs(z);

連立方程式の片方、または両方に小数係数が含まれている場合、小数点以下の桁数を取得し、方程式を10の最大桁数のべき乗倍して係数を宣言し直す方法を採りました。

また割り切れない分数の定量化として小数表示併記を追加しました。

参考URL: http://shanabrian.com/web/javascript/get-decimal-point-length.php

http://blog.at-human.com/2016/02/10/js%E6%95%B4%E6%95%B0%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E5%88%A4%E5%88%A5%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0%EF%BC%88isinteger%EF%BC%89/

分数の表示

分数表示をするには、分母と分子の最大公約数での約分が必要です。ユークリッド互除法という古くからある解法を用いることで、javascript で分数の表示を実装することができます。今のところ、係数入力には整数しか対応していません。

以下、参照  JavaScript 第6版 より

function memoize(f) {
  var cache = {};
  return function() {
    var key = arguments.length + Array.prototype.join.call(arguments,",");
    if (key in cache) return cache[key];
    else return cache[key] = f.apply(this, arguments);
  };
}
function gcd(m,n) {
  var t;
  if (m < n) t=n, n=m, m=t;
  while(n != 0) t=n, n = m%n, m=t;
    return m;
}
function output() {
  var gcdmemo = memoize(gcd);
  var a1= document.getElementById('a').value;
  var b1= document.getElementById('b').value;
  var c1= document.getElementById('c').value;
  var d1= document.getElementById('d').value;
  var p1= document.getElementById('p').value;
  var q1= document.getElementById('q').value;
  var x1= d1*p1-b1*q1, y1 = a1*q1-c1*p1;
  var z = a1*d1-b1*c1, z1 = Math.abs(z);
  if(z1 == 0) {
    document.getElementById('x').innerHTML = "x = " + a1 + 
        "x + " + b1 + "y = " + p1 + " のすべての解です。";
    document.getElementById('y').innerHTML = "y = " + a1 + 
        "x + " + b1 + "y = " + p1 + " のすべての解です。";
    return false;
  }
  if(Math.abs(gcdmemo(x1,z1)) == z1) {
    document.getElementById('x').innerHTML = "x = " + 
        x1/gcdmemo(x1,z);
    if(Math.abs(gcdmemo(y1,z1)) == z1) {
      document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z);
    }
    else {
      if(z/gcdmemo(y1,z) > 0) {
        document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z) + "/" + z/gcdmemo(y1,z);
      }
      else {
      document.getElementById('y').innerHTML = "y = " +
         (-1)*y1/gcdmemo(y1,z) + "/" + Math.abs(z/gcdmemo(y1,z));
      }
    }
  }
  else {
    if(z/gcdmemo(x1,z) > 0) {
      document.getElementById('x').innerHTML = "x = " + 
        x1/gcdmemo(x1,z) + "/" + z/gcdmemo(x1,z);
    }
    else {
      document.getElementById('x').innerHTML = "x = " + 
        (-1)*x1/gcdmemo(x1,z) + "/" + Math.abs(z/gcdmemo(x1,z));
    }
    if(Math.abs(gcdmemo(y1,z1)) == z1) {
      document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z);
    }
    else {
      if(z/gcdmemo(y1,z) > 0) {
        document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z) + "/" + z/gcdmemo(y1,z);
      }
      else {
        document.getElementById('y').innerHTML = "y = " + 
        (-1)*y1/gcdmemo(y1,z) + "/" + Math.abs(z/gcdmemo(y1,z));
      }
    }
  }
}


追記)分母の符号処理にバグを発見しました。謹んで訂正致します。しかしながら依然、分子か分母またそのいずれもマイナス値だった時のユークリッド互除法の符号処理に疑問があります。