🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1290閲覧

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

ryooma

総合スコア3

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/03/14 13:48

編集2021/03/14 14:04

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

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

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

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


私は先月まで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 19HTMLJSPHP>ログ>PHPJSHTML 20って形をとらないといけない! 21 22 23つまり役割としては 24 25PHPはログファイルに書き込む&引き出す 26 27JSHTMLから貰った情報をPHPに渡して受け取る。 28 29HTMLは情報を表示する。 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 4番を選択したので、通信が完了した状態になったら次の処理します。*/ 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なぜ2回も箱を作って送るの? 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 */

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

投稿2021/03/15 02:05

Lhankor_Mhy

総合スコア36928

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryooma

2021/03/15 05:47

なるほど! お?!! i=0 や i <回数;など i++ は 1・初期値(最初はゼロ回目だよ)と 2・何回分の処理をするか と 3・[処理を終えたらもう一度!]ってことです? ちなみに3は [処理を終えたらもう一度!] = 2の「指定した回数分の処理」が カンストするまで繰り返せ。みたいな? for (var i=0; i<datas.length; i++) { この場合 datas.length; は複数のデータが一括で 送られてきたデータの「数」だけ処理をする。ってことでいいのですか? 例えば一括で送られてきたデータの中に、 [ああ、いい、うう]=1セット、が来たら 1ああ 2いい 3うう ...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 になった!けど1は3よりまだちいせぇえ!つづけろ! いいは i++で1=2 になった!けど2は3よりまだちいせぇえ!つづけろ! ううは i++で2=3 になった! 3<3でカンストしたぞ! よし合格だ! ああは初期値 i=0 だから! i++で、 i<3 になるまで!続けろう! 理解できたおぉ!!wありがとぉございます!
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

らじゃ!
guest

0

投稿2021/03/15 01:56

YT0014

総合スコア1748

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

forなんて基本的な文法として序盤に覚えることでは。

forは入門時には一番難しい割にいずれ全く使わなくなる。

投稿2021/03/14 14:12

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryooma

2021/03/14 14:22

>forなんて基本的な文法として序盤に覚えることでは。 同時進行でやっちゃいましたね >forは入門時には一番難しい割にいずれ全く使わなくなる。 やっぱり難しいやつだったんですね つかわなくなるんですか。(;_;) whileが代わりになるからかな。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問