JSの方程式ですか？JSからログデータの入出力！

結論から言うと！やりたかったことは大成功しました！

こんにちわ、今回！質問をしたい部分は本当に大したことではないのかもしれません。
やりたかったことも出来たのであくまで一部の未解を**「きになるな！」**ていうレベルで質問させてください。

軽めの考察会！みたいなかんじで付き合ってくれたら嬉しいです！

※**今一番きになるところ！**まで余談です！軽めに飛ばしてください

私は先月までHTMLやCSSオンリーな人でした。
あることをきっかけにJSをいじり始めることにしました。(PHPもほぼ同時期です！)
そのときJSからログファイルに書き込んだり抜き取ったりできないか調べてみたら、

こちらのサイトで拾ったサンプルをもとに、いじってみることに。
ググりながらも明確にならない部分は動作確認して自分なりにコメントアウトで考えをまとめてみました。

私自身のレベルは多分基礎知識は...自信がないけどできてるかも？くらいです。
「がちでそのレベルでこれやるの？！ほんとに？」ってくらい反対意見が出ると思いますが・・・反対されてもやりたいです！

なのでコメントアウトの「ここの考え方はちょっと違うぞ。」って部分があったら
ついでにでいいので教えて欲しいです！

あちなみにですが、JSからログファイルに直接入出力はできないみたいです。
API？という関数なのか機能なのかわかりませんが、それを使えばできるぞ！
みたいなことをどこかで聞いたような気がします。多分それが**XMLHttpRequest();**これだと思う！ちがうかな？

実行環境はWin10
PHPCGI版！
JS(jQueryは今回つかってません)

今一番きになるところ！

今回一番質問したい部分はここです！
私の中でいま一番「なんだこれ？方程式かな。」ってなってる部分です！

js
1for(var i=0; i<datas.length; i++){
2     //その他の処理
3}

ここのForの　ここから[i=0; i<datas.length; i++]ここまで！
この中で一体何が行われているのか
簡単な例え話みたいなのがあったら嬉しいです！

全体的なコードの提示！

js
1if(this.readyState === 4){
2      var datas = this.responseText.split("\n");//[\n]で改行処理
3      var ht = "";
4      for(var i=0; i<datas.length; i++){//ここ！
5        ht += '<div>'+datas[i]+'</div>';
6      }
7      var list = document.getElementById("list");
8      list.innerHTML = ht;
9    }

わたしの考え方！
i=0　は　アイはゼロだよ！
i<datas.length;　このdatas は i < より小さい！(datasの文字列は長文だよ！)
i++　アイを1回処理する？増やす？(ここを削除してそのまま処理させたら無限ロードになりました！）なんでだろう。

といった具合です！
以下は全文の提出になります。
参考サイトより若干書き換えている箇所があるのでご注意を！

JSとPHPの全文と考えた内容を提示する！

JSとHTML

js
1
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6        <title>PHP Collaboration</title>
7        <!--<script type="text/javascript" src="common.js"></script>-->
8    </head>
9    <body>
10<pre><code>
11  なぜJsからログに書き込んでチャットを作らないの？
12
13Jsから直接ログファイル(txt)に書き込むことができないから。かな
14
15なのでPHP(サーバー)に一回情報を送って　サーバーがログファイルに書き込んで。
16
17書き込んだデータをサーバーが取り出してJsに送ってHTMLに表示させる！
18
19HTML＞JS＞PHP＞ログ＞PHP＞JS＞HTML
20って形をとらないといけない！
21
22
23つまり役割としては
24
25・PHPはログファイルに書き込む＆引き出す
26
27・JSはHTMLから貰った情報をPHPに渡して受け取る。
28
29・HTMLは情報を表示する。
30
31</code></pre>
32
33      <form name="form1">
34        <input type="text" name="test">
35        <button type="button" id="btn">送信</button>
36      </form>
37      <div id="list"></div>
38
39<script type="text/javascript">
40  
41window.onload = function(){
42  
43  // data-write
44  var btn = document.getElementById("btn");//htmlのボタン要素を呼び出している。
45  btn.onclick = function(){//htmlのボタンをクリックしたら以下の処理をする。
46    var input = document.forms.form1.test;
47    //HTMLの.forms.form1.test要素から送られた情報をinputに格納。
48    
49    var url = "./collabo.php?mode=write";
50    //送り先を指定して「mode=write」でタグ付けた。(情報を入れる[箱に]タグをつけた感じ)
51
52    var requests = "message="+input.value;//inputには文字列(情報)が格納されている。
53    //箱の中に入れる[情報]に[message=]でタグをつけた感じ。
54
55    var xhr = new XMLHttpRequest();
56    //API(JavaScriptでサーバー(php)側と非同期通信を行うため)
57    //「非同期通信」とは、サーバーと通信中であっても別の処理を引き続き行えること。
58    
59    xhr.open('POST', url, true);
60    //openはAPIをつかって「どんな方法で？」・「どのサーバーに？」・/?[true]/?
61    xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
62    //「このファイルは、こんな種類のファイルですよ」 = Content-Typeでファイルのタイプを指定している。
63    xhr.send(requests);
64    //requestsを送れ！！って言ってる。｛この時点でデーターはPHP(サーバ)に送ることができた。
65
66
67    //「.onreadystatechange」でサーバーから取得したデータを受け取り、取り扱うことができる。が
68    xhr.onreadystatechange = function(){
69    //「通信が完了しているか？」%「通信が成功したか？」などをIF文で条件分岐しながら確認する必要がある。
70      
71      //this=xhr
72      if(this.readyState === 4){/*//いつデータを取得するか？0〜4の内どれかを選べ！
73
740 準備段階｜ まだ通信は行われていない状態
751 準備完了｜ 通信を行う準備が完了している状態
762 通信開始｜ サーバーと通信が始まっている状態
773 受信中・・｜サーバーから目的のデータを取得している状態
784 通信完了｜ データを取得して通信が終了している状態
79    
80    ４番を選択したので、通信が完了した状態になったら次の処理します。*/
81
82        var list = document.getElementById("list");//htmlからlistのID要素を呼び出して、
83        list.innerHTML += '<div>'+this.responseText+'</div>';
84        //listの要素の中に"<div>"でXHRにPHPから受け取った情報を"</div>";表示して！って書く。
85        document.forms.form1.test.value = "空手〜チョップ！";
86        //最後に表示に成功したら入力フォーム内の書き込んだ情報を空にして！って書く！
87      }
88    };
89  };
90  
91/*ここからは、さらにサーバーに送る箱をもう一つ作る。
92なぜ２回も箱を作って送るの？
93
94一つ目の箱は、
95現在進行形の[やり取り]をログファイルに記録するついでに、そのままHTMLに出力するため！
96
97二つ目の箱は過去の情報をログファイルから抜き出してHTMLに出力するため、
98(だから空の状態で送る必要がある)
99*/
100
101  // data-read
102  var url = "./collabo.php?mode=read";//PHPに空の[mode=read]って箱を送る準備。
103  var xhr = new XMLHttpRequest();//API[非同期通信]を(xhr)に付与
104  xhr.open('POST', url, true);//[送り方]と[送り先]を(xhr)に付与
105  xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
106  //どんな種類のファイル(箱)か。
107  xhr.send();//php(サーバー)に送る！
108
109  xhr.onreadystatechange = function(){//phpから帰ってきた情報を取り扱うよ！
110    if(this.readyState === 4){//phpから送られてきた[mode=read]を
111      var datas = this.responseText.split("\n");//[\n]で改行処理
112      var ht = "";//htという関数で文字を並べる場所を作る？そのさい[""]で空の状態にする！
113      for(var i=0; i<datas.length; i++){
114        ht += '<div>'+datas[i]+'</div>';
115
116/*forの部分、自分なりに考えてこれくらい短縮させられると思う。が、一応そのままにしておく。
117      for(var i=0; i<datas.length; i++){
118      var list = document.getElementById("list");
119      list.innerHTML += '<div>'+datas[i]+'</div>';
120      }*/
121
122      }
123      var list = document.getElementById("list");
124      list.innerHTML = ht;
125    }
126  };
127};
128
129</script>
130
131    </body>
132</html>
133
134

php
1<?php
2 
3if($_REQUEST["mode"] === "write"){//JSからGet又はPOSTされた情報を扱うよ！って言ってる。
4	//この時点では$_REQUEST["mode"]は、JSから渡された[何か]を主張しているが中身(文字列)の情報までは把握していない。後にfile_get_contents("data.txt")で文字列を獲得する。
5	$num = 1;
6	
7	/*
8	if(is_file("data.txt")){
9	}//今までのデータログを参照・呼び出している。(表示処理はしていない)
10	*/
11
12	//explodeの説明↓[改行処理　, JSから渡された文字列(保存場所)]
13	$data = explode(PHP_EOL , file_get_contents("data.txt"));//二番目に送られる情報(JSのボタン処理)
14	//file_getでログファイルのデーターを引き出してPHP_EOLで改行処理を施している。
15	$num = count($data);
16	//改行順に番号を割り当て。
17
18	file_put_contents("data.txt" , $num."過去の私:".$_REQUEST["message"].PHP_EOL , FILE_APPEND);
19	//現在の私が発言した内容をログファイルに記載している(過去の私として処理、記録される)
20	//ちなみにログファイルがなかった場合、FILE_APPENDは自動でファイルを作成してくれる。(本来は追記機能を有している)
21
22	echo $num."(現在の私):".$_REQUEST["message"];
23	//現在の私の発言をダイレクトで表示(ログファイルに残す処理をせず、そのままJSに返してる)
24}
25
26else if($_REQUEST["mode"] === "read"){
27	echo file_get_contents("data.txt");//一番最初にJSに送られる。
28	//今までのデータログを参照・呼び出してJSに送っている。(js側で表示処理してる)
29}
30
31
32	/*[put]と[get]のちがい
33
34	文字通り、[get]はファイルやURLを獲得する。一方で
35	[put]はファイルなどに書き込みをしたりできる。
36	
37	[構文]
38	file_put_contents(ファイル名, 書き込みするデータ [, オプションフラグ [, コンテキスト]]);
39	file_get_contents ( string $パス/ファイル名 [, bool $インクルードパス = false [, $コンテキスト [, int $オフセット値 = 0 [, int $最大バイト数 ]]]] );
40	*/

以上になります。
よろしくお願いします！

行動規範の内容に同意します

回答3件

ベストアンサー

「for javascript」でググると、いろいろ出てきます。

投稿2021/03/15 02:05

Lhankor_Mhy

総合スコア36930

ryooma

2021/03/15 05:47

なるほど！お？！！ i=0 や　i <回数;など　i++ は１・初期値（最初はゼロ回目だよ）と２・何回分の処理をするか　と３・[処理を終えたらもう一度！]ってことです？ちなみに3は [処理を終えたらもう一度！] ＝２の「指定した回数分の処理」がカンストするまで繰り返せ。みたいな？ for (var i=0; i<datas.length; i++) { この場合 datas.length; は複数のデータが一括で送られてきたデータの「数」だけ処理をする。ってことでいいのですか？例えば一括で送られてきたデータの中に、 [ああ、いい、うう]＝１セット、が来たら１ああ２いい３うう　...i++でカンストしたから終わり！的な。。。？ }

Lhankor_Mhy

2021/03/15 05:59

まあ、ニュアンス的には合ってると思います。 0ああ　i++で1になったので、1<3となり成立するので続行。 1いい　i++で2になったので、2<3となり成立するので続行。 2うう　i++で3になったので、3<3となり成立しないので終了。

ryooma

2021/03/15 06:13

そっかゼロからスタートなのかああは i++で0=1 になった！けど１は３よりまだちいせぇえ！つづけろ！いいは i++で1=2 になった！けど２は３よりまだちいせぇえ！つづけろ！ううは i++で2=3 になった！　3<3でカンストしたぞ！　よし合格だ！ああは初期値 i=0　だから！　i++で、 i<3　になるまで！続けろう！理解できたおぉ！！ｗありがとぉございます！

Lhankor_Mhy

2021/03/15 06:19

この回答の主題は「ググれば出てくるぞ」＝「ググってから質問しようぜ」なのですが、伝わってますでしょうか……？まあ、ご解決されて何よりです。

ryooma

2021/03/15 06:21

うん、ググったけどわからなかった！

Lhankor_Mhy

2021/03/15 06:35

そしたら、「ググったらこう書いてあったんだけど、この部分がよくわからん」という質問にした方がいいと思う。じゃないと、まともな回答は返ってこないんじゃないかな。今後も質問されることがあるようでしたら、どうぞお試しください。

ryooma

2021/03/15 07:09

らじゃ！