9月 2018

2018年9月28日金曜日

Python3 Local DirectoryとPATHなど　トラブル・シュート

pyファイルをローカル・サーバーで実行できなくなったので、トラブルシューティング。

ブラウザから、cgi-binディレクトリにアクセスする際のエラーメッセージ。

Error code: 403
Message: CGI script is not a plain file ('/cgi-bin/').
Error code explanation: HTTPStatus.FORBIDDEN - Request forbidden -- authorization will not help.

1. Djangoを入れてから実行できなくなった？

PATHを確認していく。

確認方法）
左下バー・Windowsアイコン -> コンピュータ -> 右クリック　->　プロパティー ->
左サイドバー・「システム詳細設定」　 -> 「右下・環境変数」

現時点の設定）
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37

ちなみに、IDLEからのパスは以下。
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37

**Script以下の記述が不要なのでは？
ということで。
\Scripts\;C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37
を削除してみる。

挙動確認）
ローカル・サーバーにアクセスすると強制切断されるようになった。
これはWorse な事態になった。

-> いや、この強制切断は、上記の403 エラーメッセージが出たあとに、
他のフォルダにアクセスしようとすると、切断されるようだ。

最初から、cgi-bin以外のフォルダにアクセスしようとすると問題なく
あくせすできる。 pyファイルは実行されずに、コードがそのまま表示される。

2. コマンドラインから、ローカルサーバーを立ち上げてみる。
やり方は、ここ。
https://mycodingjp.blogspot.com/2018/05/pythonweb.html

ローカルサーバーは立ち上がるが、pyファイルは
やはり、コードがそのまま表示されてしまう。

強制切断された時のsocket...のエラーは、httpのコマンドラインに表示されなくなった。
（強制切断された時は出ていたが。。。）

3. フォルダを新規に作成してみる。
simpleserver.pyを使ったやり方。
コマンドラインからのやり方。の２通りでローカル・サーバーを立ち上げて
test.pyを実行してみるが、いずれも、コードがそのまま表示される。

本当に困った。

simpleserver.pyやcgiserver.py を実行して、ローカルサーバーは立ち上がるので、
.pyをPythonが認識できないという訳でもなさそう。

こんなのもあった。

① 起動コマンド： python -m http.server -- bind local.host --cgi 8000
そして
② コマンド： python -mwebbrowser http://local.host:8000/cgi-bin/000.py // 新しくbrowserを開くということ。

しかし、①のコマンドを実行すると、
socket.gaierror: [Errno 11004] getaddrinfo failed.
となってしまった。

結局、Pythonをアンインストール・再インストールをして、直ったよう！！！

１週間くらい時間がかかった！！

参考）
Python 2.x なので参考になるか不明？
http://d.hatena.ne.jp/uriyuri/20081024/1224839381

windows cmd コマンド　一覧

1. 画面クリア
cls

2. Current directory　変更

c:\> からC:\python\HTMLCSS\samplewebserver\002 cgiserverへ
①　移動先のfolderを開いて、directoryをコピー）

② c:\にコピペすると
C:\>cd C:\python\HTMLCSS\samplewebserver\002 cgiserver
赤字部分は重複なので削除

④ C:\>cd python\HTMLCSS\samplewebserver\002 cgiserver 実行
(* cd の後にスペース要）

⑤結果
C:\python\HTMLCSS\samplewebserver\002 cgiserver>

カレントディレクトリを「./」で表記し、1つ上層に行く場合は「../」と表記します。
2つ上層に行く場合は「../../」です。

フォルダの階層構造イメージ

カレントフォルダが「path3-3」の場合、「path1-1」の相対パスは、

../../path1/path1-1

3. コピーの仕方
右クリック->範囲の指定→選択してwhite outさせてEnter

4. 画面クリア
cls

5. コマンドの場所表示
where コマンド名

6.プロセスの確認と強制終了

1. netstat -ano | findstr :2181
       TCP    0.0.0.0:2181           0.0.0.0:0              LISTENING       8876
       TCP    [::]　　 :2181              [::]:0                 LISTENING       8876
                                 ↑　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　ポート番号                                                            プロセス番号

2.taskkill //PID 8876 //F
   SUCCESS: The process with PID 8876 has been terminated.
　*Fは強制終了オプション。

7. ファイルの場所検索（ワイルドカード使用可能）
where ファイル名
C:\python>where python*
C:\python\Python basics.pptx
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37\python.exe
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37\python3.dll
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37\python37.dll
C:\Users\ユーザ名\AppData\Local\Programs\Python\Python37\pythonw.exe

8. Directoryの作成
c:> mkdir \directory\path\name
*ディレクトリは、back slash(又はYen Mark:bloggerでは書けない)です。

8. Directoryの削除
c:> rmdir \directory\path\name /s
*/ s は、削除対象のフォルダーに含まれる全てのツリーを削除するオプション

9. Pythonのバージョン確認
C:\Users\user名>python
Python 3.7.0b4 (v3.7.0b4:eb96c37699, May 2 2018, 19:02:22) [MSC v.1913 64 bit (
AMD64)] on win32

他にもあるかも(5)

Python3　基礎 html boiler template -cgi

/hello.py//
#!/usr/bin/python3
import cgi
print("Content-type:text/html\r\n\r\n")
print("<html><body>")
print("<h1>Hello Program!</h1>")
form = cgi.FieldStorage()
if form.getvalue("name"):
name = form.getvalue("name")
print("<h1>Hello "+name+"! Thanks for using my script!</h1><br />")
if form.getvalue("happy"):
print("<p> Yay! I'm happy too! </p>")
if form.getvalue("sad"):
print("<p> Oh no! Why are you sad? </p>")
print("<form method="post" action="hello.py">")
print("<p>Name: <input type="text" name="name"/></p>")
print("<input type="checkbox" name="happy" /> Happy")
print("<input type="checkbox" name="sad" /> Sad")
print("<input type="submit" value="Submit" />")
print("</form>")
print("</body></html>")

2018年9月27日木曜日

Javascript CSVファイルを読み込む方法

Pythonのように直接、ファイルを開いて操作はできないので、2つの方法。
Python:
with open('test.csv', encoding = 'utf-8') as csvfile:
csvreader = csv.reader(csvfile)
next(csvreader)
とかの記述が楽だな。

では、Javascript

1. APIを利用する方法
*これはファイルをユーザに選択させるという操作プロセスがマッチしないのだが

<body>

<form name="myform">
    <input name="myfile" type="file" /><br/>
    <textarea name="output" cols="80" rows="10"></textarea>

　<p>\n時点の配列</p>
　 <li><span id="001"></span></li>
　 <li><span id="002"></span></li>
　 <li><span id="003"></span></li>

　 <p>002の表示</p>
　<li><span id="004"></span></li>
　<li><span id="005"></span></li>
　<li><span id="006"></span></li>
</form>

<script type="text/javascript">
　 var form = document.forms.myform;

　form.myfile.addEventListener( 'change', function(e) {
　　  var result = e.target.files[0];

  　　//①FileReaderのオブジェクトを作成する
　　 var reader = new FileReader();

  　 //②読み込んだファイルの中身を取得する
    reader.readAsText( result );

     //③ファイルの中身を取得後に処理を行う
    reader.addEventListener( 'load', function() {

   //④ファイルの中身をtextarea内に表示する
    form.output.textContent = reader.result;
    array = reader.result.split('\n'); //この時点では、まだ一次元配列
  document.getElementById("001").innerHTML = array;//全表示
  document.getElementById("002").innerHTML = array[0];//全表示
   document.getElementById("003").innerHTML = array[1];//全表示

   //⑤ カンマで区切って２次元配列に変換
    var twoDimensionArray =[];
    for ( i =0; i < array.length; i++){
       twoDimensionArray[i] = array[i].split(',')
   }

   document.getElementById("004").innerHTML = twoDimensionArray;//全表示
   document.getElementById("005").innerHTML = twoDimensionArray[0][0];//全表示
   document.getElementById("006").innerHTML = twoDimensionArray[1][3];//全表示

  })

})
</script>
</body>

2. XMLHttpRequest(); を利用。

この方法だと、ローカルＰＣではhttpリクエストが機能しないので、サーバー利用が必須。
ローカルＰＣで挙動確認ができないのが、痛い。

<script type="text/javascript">
//CSVファイルを読み込む関数getCSV()の定義
function getCSV(){
    var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
    req.open("get", "test3.csv", true); // アクセスするファイルを指定
    req.send(null); // HTTPリクエストの発行

    // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ
    req.onload = function(){
convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
    }
}
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
    var result = []; // 最終的な二次元配列を入れるための配列
    var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
    // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
    for(var i=0;i<tmp.length;++i){
        result[i] = tmp[i].split(',');
    }
    alert(result[1][2]); // 300yen
}
getCSV(); //最初に実行される

</script>

3．参考
JavaScriptでファイル処理! JSONやCSVなどのファイルを読み込もう
https://www.sejuku.net/blog/32532

2018年9月26日水曜日

3問クイズ　ランダム　とりあえず完成形

とりあえず、完成形

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三択クイズ</title>
</head>
<body>
<h1>クイズひな形</h1>
<hr>

<span id="001"></span>

<h2>問題</h2>
<div id="text_q"></div>
<h2>選択</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>

<script type="text/javascript">

//問題と解答
qa = new Array();
qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];

function run(){ //randomの生成
for (var i = qa.length-1; i>=0; i--){
  var rand = Math.floor(Math.random() * (i+1));
  var temp = qa[i];
  qa[i] = qa[rand]
  qa[rand] = temp;
  document.getElementById("001").innerHTML = i + "回目= " + qa;
  quiz(qa);
}
}

//初期設定
q_sel = 3; //選択肢の数
setReady(qa);

function setReady() {//初期設定
count = 0; //問題番号
ansers = new Array(); //解答記録
run(); //再テストの場合のランダムの生成
quiz(); //最初の問題
}
function quiz() { //問題表示
var s, n;
//問題
document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
//選択肢
s = "";
   for (n=1;n<=q_sel;n++) {
    s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
   }
document.getElementById("text_s").innerHTML = s;
}
function anser(num) { //解答表示
var s;
s = (count + 1) + "問目：";
//答え合わせ
if (num == qa[count][q_sel + 1]) {
   //正解
ansers[count] = "○";
} else {
   ansers[count] = "×";
}
s += ansers[count] + qa[count][num];
document.getElementById("text_a").innerHTML = s;
//次の問題を表示
count++;
if (count < qa.length) {
   quiz();
} else {
   //終了
s = "<table border='2'><caption>成績発表</caption>";
   //1行目
s += "<tr><th>問題</th>";
   for (n=0;n<qa.length;n++) {
    s += "<th>" + (n+1) + "</th>";
   }
   s += "</tr>";
   //2行目
s += "<tr><th>成績</th>";
   for (n=0;n<qa.length;n++) {
    s += "<td>" + ansers[n] + "</td>";
   }
   s += "</tr>";
   s += "</table>";
   document.getElementById("text_q").innerHTML = s;
   //次の選択肢
s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
   s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
   s += "【<a href=''>次の問題に進む</a>】";
   document.getElementById("text_s").innerHTML = s;
}
}
</script>
</body>
</html>

2018年9月25日火曜日

javascript 関数の中で関数を定義　－ Closure

2018年9月24日月曜日

Javascript Quiz 三択　ランダム表示

<body>
◆ Array 全体 <br />
<ul id="wholeArray">
</ul>
◆ 配列の値を１つずつ取り出す <br />
<ul id="elementArray">
</ul>
span id で表示 <br />
<li> 1. <span id="10000"></span> </li>
<li> 2. <span id="9000"></span> </li>
<li> 3. <span id="8000"></span> </li>
<li> 4. <span id="7000"></span> </li>
<script type="text/javascript">
var shuffle = [1,2,3,4,5,6,7,8,9,10];

　function run(){
　　　document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;
　　　　for (var i = shuffle.length-1 ; i >=0 ; i--){
var rand = Math.floor(Math.random()*(i+1));
var temp = shuffle[i];
shuffle[i] = shuffle[rand]; //シャッフル処理
shuffle[rand] = temp;
//wholeArrayへの追加
const wholeArray = document.getElementById("wholeArray");
var liNode1 = document.createElement("li");

var textNode1 = document.createTextNode("カウント変数 i が"+i+"の時" + shuffle);
wholeArray.appendChild(liNode1).appendChild(textNode1);

//ElementArrayへの追加
const elementArray = document.getElementById("elementArray");
var liNode2 = document.createElement("li"); //2度指定する必要なし?。

var textNode2 = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は " + shuffle[i]);

elementArray.appendChild(liNode2).appendChild(textNode2);

document.getElementById("8000").innerHTML = "for文外での配列再表示(3) " + shuffle;
qa = new Array();
　　　　　　　 qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];

　　　　　　　var cnt = i;
var orderArray = shuffle[cnt];

document.getElementById(7000).innerHTML = "qa[i-1] is " + qa[orderArray];
}
}
run();
</script>

</body>

2018年9月23日日曜日

Javascript 配列のリスト表示 DOM

◆基本
親要素ノードを取得して、createElementで li タグを作成し、その配下にtext Nodeを作成し、書き込むバージョン。

これだと、id で、各要素を指定できる。（成功版）

<body>
<p>最初のＰ</p>
<ul id="First"></ul>
<p>2度目のＰ</p>
<ul id="Second"></ul>
　<script type="text/javascript">

//id="First"の操作
    /*（1）Pタグの要素ノードオブジェクト*/
  　 var First = document.getElementById('First');
    //(2) createElementにより新しくタグ要素作成
    var liNode1 = document.createElement('li');
  　 /*（3）新たにテキストノードを作成する*/
  　 var textNode1 = document.createTextNode('こんにちは');
  　　/*（4）作成したテキストノードをliタグ要素の子要素として追加する*/
     liNode1.appendChild(textNode1);
  　 /*（5）ulタグに、完成したliタグを追加する*/
  　 First.appendChild(liNode1);
//id="Second"の操作
    /*（1）Pタグの要素ノードオブジェクト*/
  　 var Second = document.getElementById('Second');
    //(2) createElementにより新しくタグ要素作成
    var liNode2 = document.createElement('li');
  　 /*（3）新たにテキストノードを作成する*/
  　 var textNode2 = document.createTextNode('ご無沙汰！');
  　　/*（4）作成したテキストノードをliタグ要素の子要素として追加する*/
     liNode2.appendChild(textNode2);
  　 /*（5）ulタグに、完成したliタグを追加する*/
  　 Second.appendChild(liNode2);
</script>

上記を応用して、これがやりたかったこと。

<body>
<p>◆ Array 全体 </p>
<ul id="wholeArray">
</ul>
<p>◆ 配列の値を１つずつ取り出す </p>
<ul id="elementArray">
</ul>

<p> Quiz 配列の値を１つずつ取り出す </p>
<li> 1. <span id="10000"></span> </li>
<li> 2. <span id="9000"></span> </li>

<script type="text/javascript">
var shuffle = [1,2,3,4,5,6,7,8,9,10];

function run(){
document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;

  for (var i = shuffle.length-1 ; i >=0 ; i--){
   var rand = Math.floor(Math.random()*(i+1));
   var temp = shuffle[i];
   shuffle[i] = shuffle[rand]; //シャッフル処理
   shuffle[rand] = temp;

   //wholeArrayへの追加
   const wholeArray = document.getElementById("wholeArray");
   var liNode1 = document.createElement("li");

   var textNode1 = document.createTextNode("カウント変数 i が"+i+"の時" + shuffle);
   wholeArray.appendChild(liNode1).appendChild(textNode1);

   //ElementArrayへの追加
   const elementArray = document.getElementById("elementArray");
   var liNode2 = document.createElement("li"); 　//　liも別のノード名でちゃんと作成する。

   var textNode2 = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は " + shuffle[i]);

   elementArray.appendChild(liNode2).appendChild(textNode2);

   }

document.getElementById("9000").innerHTML = "for文外での配列再表示(2) " + shuffle;
}

run();
</script>

◆解説
createTextNode.html
<p id="info"></p>

<script type="text/javascript"> 　
/*（1）Pタグの要素ノードオブジェクト*/ 　
var info = document.getElementById('info'); 　

/*（2）新たにテキストノードを作成する*/ 　
var textNode = document.createTextNode('こんにちは'); 　

/*（3）作成したテキストノードをPタグ要素の子要素として追加する*/ 　
info.appendChild(textNode); </script>

（1）では、テキストを挿入したいPタグの要素ノードオブジェクトを、変数infoに格納します。
（2）では、createTextNodeメソッドに、挿入したい文字を引数に与え、新たに作成されたテキストノードオブジェクトを変数textNodeに格納します。createTextNodeメソッドはdocumentオブジェクトに定義されているメソッドですので、必ずdocument.createTextNode('文字列')といった具合に使ってください。createTextNodeメソッドでテキストノードを新たに作成しても、すぐにはブラウザ上に反映されません。まだ仮想的に作られたにすぎず、HTML上のどの要素にも関連付けられていないのです。この宙に浮いているテキストノードを、appendChildメソッドで関連付けるわけです。
（3）では、appendChildメソッドに、先ほど作成したテキストノードオブジェクトを引数として与えて、ブラウザ上に表示させています。apendChildメソッドは、要素ノードオブジェクトに定義されたメソッドです。そのため、テキストを挿入したい要素ノードオブジェクトに対してappendChildメソッドを実行することで、その場所にテキストノードが追加されるのです。ここでは、Pタグの要素ノードオブジェクトinfoに対してappendChildメソッドを呼び出していますので、<p id="info">こんにちは</p>という状態ができあがったのです。

◆ 新しいタグを追加しつつテキストを追加する場合

<body> 　 <p id="info"></p> </body>

<script type="text/javascript"> 　

/*（1）Pタグの要素ノードオブジェクト*/ 　
var info = document.getElementById('info'); 　

/*（2）新たにH1タグの要素ノードを作成する*/ 　
var h1Node = document.createElement('h1'); 　

/*（3）新たにテキストノードを作成する*/ 　
var textNode = document.createTextNode('こんにちは'); 　

/*（4）作成したテキストノードをH1タグ要素の子要素として追加する*/ 　
h1Node.appendChild(textNode); 　

/*（1）Pタグに、完成したH1タグを追加する*/ 　
info.appendChild(h1Node);
</script>

2．項目をリスト表示する。

http://jsstudy.hatenablog.com/entry/javascript-primer-3-10-array

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-10_array</title>
</head>
<body>
    <h1>やることリスト</h1>
    <ul id="list">
    </ul>
    <script>
        var todo = ['デザインカンプ作成', 'データ整理', '勉強会申し込み', '牛乳買う'];
        todo.push('歯医者に行く');
        for (var i = 0; i < todo.length; i++) {
            var li = document.createElement('li');
            li.textContent = todo[i];
            document.getElementById('list').appendChild(li);　//document.writeのように上書きされない。
        }
    </script>
</body>
</html>

◆応用
上記をつかいならが、２つの要素を記入するスクリプトを書いてみる。

<wholeArray>と<elementArray>の両方に書き込みたいのだが、
片方なら上手く表示されるが、両方一遍にだと、上手くいかない

<body>
<p>◆ Array 全体 </p>
<ul id="wholeArray">
</ul>
<p>◆ 配列の値を１つずつ取り出す </p>
<ul id="elementArray">
</ul>
<script type="text/javascript">

var shuffle = [1,2,3,4,5,6,7,8,9,10];

function run(){
document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;

  for (var i = shuffle.length-1 ; i >=0 ; i--){
   var rand = Math.floor(Math.random()*(i+1));
   var temp = shuffle[i];
   shuffle[i] = shuffle[rand]; //シャッフル処理
   shuffle[rand] = temp;

   var li = document.createElement("li");  //要素ノードの作成
   li.textContent = "カウント変数 i が"+i+"の時" + shuffle;　//配列全体表示
   document.getElementById('wholeArray').appendChild(li);

   //li.textContent = "カウント変数 i が"+ i +"の時の配列要素[i]は、" + shuffle[i];　//配列要素表示
   //document.getElementById("elementArray").appendChild(li);

   /*（1）Pタグの要素ノードオブジェクト*/ 　
   var elementArray = document.getElementById('elementArray'); 　
   /*（2）新たにテキストノードを作成する*/ 　
   var textNode = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は ver2、" + shuffle[i]); 　
   /*（3）作成したテキストノードをPタグ要素の子要素として追加する*/ 　
  // elementArray.appendChild(textNode);

   }

}

run();
</script>

参考）
http://jsstudy.hatenablog.com/entry/javascript-primer-3-10-array

2018年9月22日土曜日

Bloggerでラベル別にタイトルだけの一覧ページを作る方法

1. 『管理画面＞テンプレート＞HTMLの編集＞ウィジェットテンプレートの展開にチェック』までを行なって、HTMLの編集画面を用意する。

2. ページ内検索で『b:include data='post' name='post'/』を検索(981行目くらい）して、
『b:include data='post' name='post'/』を削除しつつ、　以下のコードを挿入する。


<b:if cond='data:blog.pageName == ""'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
    <b:include data='post' name='post'/>
    <b:else/>
    <div class='post hentry'>
      <a expr:name='data:post.id'/>
      <b:if cond='data:post.title'>
        <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
            <b:if cond='data:post.url'>
              <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        </h3>
      </b:if>
    </div>
</b:if>
</b:if>

<!--ラベル別にタイトルだけの一覧ページ終了->

Javascript Quiz 三択問題

Quiz 三択問題
http://www.shurey.com/js/craft/quiz/index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三択クイズ</title>
</head>
<body>
<h1>三択クイズ</h1>
<hr>
<h2>問題</h2>
<div id="text_q"></div>
<h2>選択</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>
<script type="text/javascript">
//問題と解答
qa = new Array();
qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];

//初期設定
q_sel = 3; //選択肢の数
setReady();
//初期設定
function setReady() {
count = 0; //問題番号
ansers = new Array(); //解答記録

//最初の問題
quiz();
}
//問題表示
function quiz() {
var s, n;
//問題
document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
//選択肢
s = "";
for (n=1;n<=q_sel;n++) {
  s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;
}
//解答表示
function anser(num) {
var s;
s = (count + 1) + "問目：";
//答え合わせ
if (num == qa[count][q_sel + 1]) {
  //正解
  ansers[count] = "○";
} else {
  ansers[count] = "×";
}
s += ansers[count] + qa[count][num];
document.getElementById("text_a").innerHTML = s;

//次の問題を表示
count++;
if (count < qa.length) {
  quiz();
} else {
  //終了
  s = "<table border='2'><caption>成績発表</caption>";
  //1行目
  s += "<tr><th>問題</th>";
  for (n=0;n<qa.length;n++) {
   s += "<th>" + (n+1) + "</th>";
  }
  s += "</tr>";
  //2行目
  s += "<tr><th>成績</th>";
  for (n=0;n<qa.length;n++) {
   s += "<td>" + ansers[n] + "</td>";
  }
  s += "</tr>";
  s += "</table>";
  document.getElementById("text_q").innerHTML = s;
  //次の選択肢
  s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
  s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
  s += "【<a href=''>次の問題に進む</a>】";
  document.getElementById("text_s").innerHTML = s;
}
}
</script>
</body>
</html>

2018年9月21日金曜日

Javascript 配列を重複せずにランダムに

これが良いなー

<body>
<li> 1. <span id="010"></span> </li>
<li> 2. <span id="009"></span> </li>
<li> 3. <span id="008"></span> </li>
<li> 4. <span id="007"></span> </li>
<li> 5. <span id="006"></span> </li>
<li> 6. <span id="005"></span> </li>
<li> 7. <span id="004"></span> </li>
<li> 8. <span id="003"></span> </li>
<li> 9. <span id="002"></span> </li>
<li> 10. <span id="001"></span> </li>

<script type="text/javascript">
var array = [1,2,3,4,5,6,7,8,9,10];

function run(){

for (var i = array.length-1 ; i >=0 ; i--){
var rand = Math.floor(Math.random()*(i+1));
var temp = array[i];
array[i] = array[rand];
array[rand] = temp;
document.getElementById("00"+i).innerHTML = i +"回目 = " + array;
}
}
run();
<script>
</body>

2. これは良さそうだけど、理解できない。
https://h2ham.net/javascript-random-array

function random(array, num) {
var a = array;
var t = [];
var r = [];
var l = a.length;
var n = num < l ? num : l;
while (n-- > 0) {
    var i = Math.random() * l | 0;
    r[n] = t[i] || a[i];
    --l;
    t[i] = t[l] || a[l];
}
return r;
}

var test_array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
random(test_array, 5);

Javascript 　演算子

◆　三項演算子

書式：
条件式 ? Trueの処理　：　Falseの処理

例：
var n = num < i ? num: i ;

numがiより小さければnum値をnに代入。
numがiより小さく”なければ”　i 値をnに代入。

◆ ++演算子と--演算子

「++変数」と表現するのは前置形式
「変数++」と表現するのは後置形式

C言語では、計算の課程では多少の違いがあるようだが、
(http:// www.ohshiro.tuis.ac.jp/~ohshiro/gamesoft/loop/incdec.html)
JSでは、どちらも同じ。

◆&&と|| 演算子
ショートカット演算子として使われる場合がある。
例えば、＆＆演算子の場合、左式がfalseと評価された時点で
条件式全体がfalseとなるので、右式は評価されない。

例）
if (x === 1){alert('hello')}は
X === 1 &&('hello')；と同じ

後者は、xが1でない場合、評価されない。

◆”||” と”|” は、or　で使われる場合、同じ。
　　”|”　は、ビット演算子と呼ばれる。

2018年9月19日水曜日

Lolipop サーバーでPythonを実行してみた。

pyファイルの設置は、どのディレクトリーでも良いみたい。

① Pythonのルート指定 (Lolipop指定：下記の赤字部分）
② 属性変更　”７００”(Lolipop指定：ftpでファイルの属性変更）

が大切。　簡単ですね。
cgiも動いた、という理解です。

参考）　
アップしてみたファイルは、以下の通り。

◆helloworld.pyの内容

#!/usr/local/bin/python3.4 <- このパスの指定が大切。
import cgi
print("Content-type: text/html\r\n\r\n")
print("""<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<link rel="stylesheet" type="text/css" href="sample.css">
</style>
</head>")""")
print("<html><body>")
print("<h1> Hello Program! </h1>")

print("<form method = 'post' action = 'helloworld.py'>")
print("<p>Name: <input type='text' name='name'/></p>")
print("<input type='checkbox' name='happy' /> Happy")
print("<input type='checkbox' name='sad' /> Sad")
print("<input type='submit' value='Submit' />")
print("</form>")

form = cgi.FieldStorage()
if form.getvalue('name'):
    name = form.getvalue('name')
    print("<h1> Hello, " + name + "! Thank you!</h1><br/>")
if form.getvalue('happy'):
    print("<p> Yeah! I'm happy, too.</p>")
if form.getvalue('sad'):
    print("<p> Oh, No! What happened?</p>")

print("</body></html>")
俄か勉強だから、ちょっと見ないとすぐPythonのコードを忘れてしまう。

2018年9月12日水曜日

JavaScriptでHTMLをダイナミックに書き換える　(DOM 参考URLのみ）

いい記事書いてますね。

http://www.atmarkit.co.jp/ait/articles/0807/02/news144.html

Javascript 配列とオブジェクト

Pythonはこちら。
Python 配列（List, Tupple, Dictionary, Set）と要素へのアクセス

1. 配列の宣言
①配列コンストラクタの例
　var array1 = new Array('Tuna', 'Chair', 'Ant');
②配列リテラルの例 ||　<- 通常は、こちらの定義の仕方
var array1 = ['Tuna', 'Chair', 'Ant'];　

配列を操作してみる。
//配列では、forEach(),filter(),map(),reduce()などが使える。Objectでは使えない。

◆要素の表示・取得
　 <script type="text/javascript">
　 var array = ['Tuna', 'Chair', 'Ant'];
　 var data = [　
    　["Tuna", " Fish", "You Can eat!"],
      ["Chair", "Furniture", "Can't eat!" ],
      ["Ant", "Insect", ""],
      ];
function display(){
document.getElementById("001").innerHTML = array[1]; // 表示： Chair

document.getElementById("002").innerHTML = data[1]; // 表示： Chair,Furniture,Can't eat!
document.getElementById("003").innerHTML = data[1][2]; // 表示：Can't eat!
document.getElementById("004").innerHTML = data[1,2]; // 表示： Ant,Insect,(想定外の結果?)
document.getElementById("005").innerHTML = data[2][1];// 表示： Insect
document.getElementById("006").innerHTML = data[2,1]; // 表示： Chair,Furniture,Can't eat!,(想定外の結果?)
    }
display();
</script>

◆要素の追加
1. 先頭に追加 - unshift
var array = ['b', 'c'];
array.unshift('a');

2. 末尾に追加 - push　// Pyrhonのappend()に相当
var array = ['a', 'b'];
array.push('c');

3. 指定した位置に一つ以上追加 - splice
var array = ['a', 'b', 'c'];
array.splice(1, 0, 'A'); // 二番目に挿入
console.log(array); // ['a', 'A', 'b', 'c']

var array = ['a', 'b', 'c'];
array.splice(2, 0, 'A', 'B'); // 三番目に複数挿入

要素の削除
配列の先頭を削除して詰める。

var array = ['a', 'b', 'c'];
array.shift();
console.log(array); // ['b', 'c']

配列の先頭にundefinedを代入して、先頭を削除して詰めません。
var array = ['a', 'b', 'c'];

array[0] = void 0; // void 0 によりundefinedを代入できます。
console.log(array); // [undefined, 'b', 'c']

末尾を削除する - pop
var array = ['a', 'b', 'c'];
　array.pop();
console.log(array); // ['a', 'b']

指定した位置から一つ以上の値を削除 - splice
var array = ['a', 'b', 'c'];
array.splice(1, 1); // 二番目から一つ削除
console.log(array); // ['a', 'c']

var array = ['a', 'b', 'c'];
array.splice(1, 2); // 二番目から二つ削除
console.log(array); // ['a']

例）

--2次元配列 (Multidimensional Array)

--連想配列

数字の要素番号（インデックス）の代わりに文字列をキーとして指定できる配列
　（一般に辞書と呼ばれるものと同じ）

①連想配列のサンプル

　var array = { apple:10, banana:20, melon:30, grape:40}

　｛｝で括る。 valueは、数値はそのまま、文字列は " " で括る。

let keys = Object.keys(array)
console.log(keys)
#output:["apple", "banana", "melon", "grape"]

let vals = Object.values(array)
console.log(vals)
#output: [10, 20, 30, 40]

let entries = Object.entries(array)
console.log(entries)
#output:
[["apple", 10],["banana", 20],["melon", 30],["grape", 40]]
#Object.メソッドの結果は配列として返ってくるとことがミソ。
なので、返り値には配列の要領で各要素にアクセスできる。
console.log(entries[0]) //["apple", 10]
console.log(entries[0][0]) // apple
console.log(entries[0][1]) // 10

②多次元連想配列の長さ（=要素数=キー数)
Object.keys(office).length;で取得。

======================================
let office ={employee: 3,
location: "Tokyo",
rent : 300}
let test = Object.keys(office).length;
-------------------------------------------------------------------------
console.log(test) // output : 3

======================================
let office ={asia:{employee: 3,
　　　　　location: "Tokyo",
　　　　　　　　　rent : 300
　　　　　　　　　}
　}
let test = Object.keys(office).length;
-------------------------------------------------------------------------
console.log(office)//output : asia:{employee: 3, location: "Tokyo", rent: 300}
console.log(office.asia.employee)//output : 3
console.log(test)//output : 1

③多次元連想配列へのアクセス

//output :

キー：2020-01-22T00:00:00Z
値：5
キー：2020-01-23T00:00:00Z
値：6
:
キー：2020-01-29T00:00:00Z
値：7

*こうやってLoopして、リストに入れて順番で取り出すという形になる。

var date = {"timeline": {
"2020-01-22T00:00:00Z": 1,
"2020-01-23T00:00:00Z": 2,
"2020-01-24T00:00:00Z": 3,
}}

var number=[]
for( var item in date["timeline"] ) {
number.push(date["timeline"][item]);
}
console.log("number.length is " + number.length)
last_num = Object.keys(date["timeline"]).length;
console.log("Last num is" + last_num)

//Output

number.length is 3
Last num is3

★★全てのvalueをとって、操作する。

(sample)Object.values()で値を一気に配列で取得して、新しい配列を操作するのがミソ

let sample_obj ={
0:{a:"1",b:"2",c:"3",d:"4"},
1:{z:"10",y:"20",x:"30",w:"40", v:"50"},
};

console.log( Object.keys(sample_obj).length) //output:2

all_values=[]

for( let i=0; i< Object.keys(sample_obj).length; i++){
console.log(Object.values(sample_obj[i]));
#Output
valueを配列の形で一気に取得できます。
　　　

Array(4)

0: "1"
1: "2"
2: "3"
3: "4"

all_values.push(Object.values(sample_obj[i]))
}

console.log(all_values)
　
＃output:
0: (4) ["1", "2", "3", "4"]

1: (5) ["10", "20", "30", "40", "50"]

var latest_num_sum = 0
for(let i =0; i < all_values.length; i++){
console.log(all_values[i].length);　//Output: 4と5です。
latest_len = all_values[i].length-1
　　 // 最期のvalueを取得して合算します。
latest_num_sum +＝ parseInt(all_values[i][latest_len])
console.log(latest_num_sum)
};
console.log(latest_num_sum)// output: 54

★★配列同士の足し算。

let array =[
[0,1,2,3,4,5],
[1,2,3,4,5,2],
[2,3,4,5,3,3],
[3,4,5,6,5,5],
];

x_values=[]
x=0
array_value_len = array[0].length

for (let i=0; i<array_value_len; i++){
for (let k=0; k<array.length; k++){
console.log('--k loop is--'+ k)
console.log('--i loop is--'+ i)
x += array[k][i]
console.log(x)
}
x_values.push(x)
x=0
}

console.log(x_values)

Output:
0: 6
1: 10
2: 14
3: 18
4: 17
5: 15

☆オブジェクト

複数のpropertyとmethodがまとまったもの。

Property例： url, documentElement

Method例：write, appendChild, createElement

定義の仕方

例）

var traffic_light = {

blue: "go",

yellow: "slow down",

red: "stop"

}

console.log(traffic_light.blue);

//変数traffic_lightに入っているオブジェクト内のプロパティblue:の値　“go”　を呼び出し

</script>

let zoo ={
mammals:["horse","whale","bison","lion",],
amphibians:["salamander","frog","toad"],
reptiles:["turtle","crocodile","snake","lion"],
fish:["shark","trout","seahorse","eel","tuna"]
};

console.log(zoo.fish); //output:(5) ["shark", "trout", "seahorse", "eel", "tuna"]

◆keyの一覧表示

for (let item in zoo){
console.log(item)
}

//output:

mammals

amphibians

reptiles

fish

◆要素の取得

for (let item in zoo){
for(let k=0; k <zoo[item].length; k++){
console.log(zoo[item][k]);

}}

//output:
horse
whale
bison
lion.....

参考）

いい記事書いてますね。
①　配列とオブジェクトでデータをまとめる
http://www.atmarkit.co.jp/ait/articles/1011/29/news109.html

②2次元配列について
http://javascript.pc-users.net/foundation/array.html

2018年9月11日火曜日

Javascript 　配列から表を動的に作成

1. これが分かり易い。
http://proengineer.internous.co.jp/content/columnfeature/8632

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>

<div id="table"></div>
<script type="text/javascript">

// 表の動的作成
function makeTable(data, tableId){
    // 表の作成開始
    var rows=[]; var table = document.createElement("table");

    // 表に2次元配列の要素を格納
    for(i = 0; i < data.length; i++){
        rows.push(table.insertRow(-1)); // 行の追加
        for(j = 0; j < data[0].length; j++){
            cell=rows[i].insertCell(-1);
            cell.appendChild(document.createTextNode(data[i][j]));
            // 背景色の設定
            if(i==0){
                cell.style.backgroundColor = "#bbb"; // ヘッダ行
            }else{
                cell.style.backgroundColor = "#ddd"; // ヘッダ行以外
            }
        }
    }
    // 指定したdiv要素に表を加える
    document.getElementById(tableId).appendChild(table);
}
window.onload = function(){
// 表のデータ
var data = [[11, 12, 13],
            [21, 22, 23],
            [31, 32, 33],
            [41, 42, 43]];

// 表の動的作成
makeTable(data,"table");
};
</script>
</body>
</html>

2. これが理解したいのだが。
https://teratail.com/questions/122504

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="underscore.js"></script>
</head>
<body>

    <script>
      var temp_str = "<% var list = [" +
"{ name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','射撃','目があああ'] }, " +

" { name: 'ドーラ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['育児','指揮','度胸','上手そうに食べる'] }," +

"{ name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] }," +

"{ name: 'シータ', tag: ['趣味１','趣味２'], desc: ['掃除','バルス'] }];" + "%>" +
                    "
<% _.each(list, function(val){ %>" +
"<h3><%= val.name %></h3>" +
"<dl>" +

"<% for(let i = 0; i < val.tag.length; i++){ %>" +
"<dt><%= val.tag[i] %></dt>" +
"<dd><%= val.desc[i] %></dd>" +
"<% } %>" +
   "</dl>" +
"<% }); %>"; var temp = _.template(temp_str); var html = temp(); document.body.innerHTML = html;

   </script>


<script> const list = [
        { name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','ロムスカ・パロ・ウル','目があああ'] },
        { name: 'ドーラ', tag: ['趣味１'], desc: ['ハムを食いちぎる'] },
        { name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] },
        { name: 'シータ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['掃除','バルス','スルー','物探し'] } ]; //HTML内埋め込みとの境界線

      let frag_node = document.createDocumentFragment();
      const p = document.createElement("p");
      const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------");

      p.appendChild(line);
      frag_node.appendChild(p);
     for(let i in list){ //h3 const h3 = document.createElement("h3");
        const name = document.createTextNode(list[i].name); h3.appendChild(name);
        frag_node.appendChild(h3); //dl
        const dl = document.createElement("dl");

        for(const j in list[i].tag){ //dt const dt = document.createElement("dt");
         const tag = document.createTextNode(list[i].tag[j]);
         dt.className = "tag";
         dt.appendChild(tag); dl.appendChild(dt); //dd
         const dd = document.createElement("dd");
        const desc = document.createTextNode(list[i].desc[j]);
        dd.className = "desc";
        dd.appendChild(desc); dl.appendChild(dd); } frag_node.appendChild(dl);
     }
      document.body.appendChild(frag_node);

    </script>
</body>
</html>

3. 昔ながらの方法　その１

＜td>タグごとに修飾したいんだけで、これでも難しいなぁ！

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>180913 TEST</title>

</head>
<body>
　　　<h2>☆車のパーツ名称</h2>
<table id="001" class="tableCreated"></table>

<style type="text/css">
  .table{
   border: 1px solid black;
   color:#fff8dc;
   }

  table td {
   border: 1px solid #5f9ea0;
   background-color: #fffff0;
   padding: 5px 10px;
   color:black;
   }
  </style>
<script type="text/javascript">
window.onload = function makeTable(carParts, tableId){
  var table = "";

  // 表のデータ
  var carParts = [
   ["ハンドル","Steering Wheel","Don't text while you're behind the wheel!"],
   ["バック・ミラー","rear-view-mirror",""],
   ["アクセル(ブレーキ）ペダル","gas (brake) pedal",""],
   ["バッテリー",　"battery","　"],
   ["バッテリーが上がる　","battery　","My battery is dying. (My battery is dead.)　"],
   ["シートベルト　","seat belt / buckle　","　"],
   ["シートベルトをする　","buckle up　","Buckle up when you're driving.　"],
   ["　","　","　"],
   ["　","　","　"],
   ["　","　","　"],
   ["　","　","　"],
   ]

  alert(carParts.length)

// 表の動的作成
  for(var i = 0; i < carParts.length; i ++){
   table += "<tr>"
    for(j = 0; j < carParts[0].length; j++){
    table += "<td>" + carParts[i][j] + "</td>" // "+="は、加算代入演算子 a +=b -> a = a +b
    }
   table += "</tr>"
   }
  //document.write("<table>" + table + "</table>");

  document.getElementById("001").innerHTML = table;

}

</script>

</body>
</html>

◆．参考になるなぁ

JavaScriptでHTMLをダイナミックに書き換える　
http://www.atmarkit.co.jp/ait/articles/0807/02/news144.html

◆. こんなのもあるなぁ。
There are numerous ways to create table using Javascript !!
http://titi-fe.hatenablog.com/entry/2016/02/15/152723
<script>
// tableタグ要素を作成
var table = document.createElement('TABLE');
table.id = 'nametbl';
table.border = '1';
// TBODYタグ要素作成し、TABLEタグ要素に追加
var tbody = document.createElement('TBODY');
table.appendChild(tbody);
// 1行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr1 = document.createElement('TR');
var td1_1 = document.createElement('TD');
td1_1.appendChild(document.createTextNode('性'));
var td1_2 = document.createElement('TD');
td1_2.appendChild(document.createTextNode('名'));
td1_1.className = 'theadercell';
td1_2.className = 'theadercell';
tr1.appendChild(td1_1);
tr1.appendChild(td1_2);
tbody.appendChild(tr1);
// 2行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr2 = document.createElement('TR');
var td2_1 = document.createElement('TD');
td2_1.appendChild(document.createTextNode('山田'));
var td2_2 = document.createElement('TD');
td2_2.appendChild(document.createTextNode('太郎'));
tr2.appendChild(td2_1);
tr2.appendChild(td2_2);
tbody.appendChild(tr2);
// 3行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr3 = document.createElement('TR');
var td3_1 = document.createElement('TD');
td3_1.appendChild(document.createTextNode('佐藤'));
var td3_2 = document.createElement('TD');
td3_2.appendChild(document.createTextNode('花子'));
tr3.appendChild(td3_1);
tr3.appendChild(td3_2);
tbody.appendChild(tr3);
// tableタグ要素をBODYタグに追加
document.body.appendChild(table);
</script>

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆