?data と split("=")[1] の角括弧の1の意味

javascriptでファイル間のデータの受け渡しを勉強しています。

あるサイトで参考にしているコードの中でよく分からないものがあります。

//送信側のスクリプトファイル(main.js)

window.onload = function(){
document.getElementById("sendButton").onclick = function(){
var text = document.getElementById("sendText").value;
location.href = "next.html?data="+encodeURIComponent(text);
}
}

このlocation.hrefに代入されるnext.html?dataの?dataの意味がよくわかりません。ちなみにnext.htmlは、受信側のファイルです。?はnext.htmlでキャッシュを回避しているのだと思われますが、ではこのdataというものは何なのか。メソッドや関数を用いているのかと思ったのですが、そのような説明はどこにもありませんでした。また、htmlのデータ属性かとも考えましたが、送信側・受信側ともにそのような属性値を指定したものはありませんでした。ただ、受信側のスクリプトにはlocation.hrefに代入したdataという変数があります。これのことかと思ったのですが、関数内で定義しているので何となく違うような気がしました。
下記が受信側のスクリプトファイルになります。

//受信側のスクリプトファイル（receive.js）

window.onload = function(){
var data = location.href.split("?")[1];
var text = data.split("=")[1];
document.getElementById("message").innerHTML = decodeURIComponent(text);
}

また別件で、受信側にあるsplit("=")[1]この[1]の意味が分かりません。おそらく引数なのかと察しますが、何の引数かは分からず。もしかするとコンソールで調べればわかるのかもしれませんが、写経する前に一度知っておきたいなと思っております。

教えていただければ幸いです。
もしhtmlファイルの記述も閲覧が必要とあればお伝えください。

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

回答3件

サーバサイドの仕掛けを使わずクライアントサイドだけで状態遷移する仕組みは「うまくつくるもんだなあ」と感心しますが、個人的にはちょっと強引かなあ、と思ったり。

さて、通常あるページから次のページに遷移する場合は submit を使いサーバーにデータを送ります。その際に送り方として GET もしくは POST を指定しますが、今回の場合に近いのは GET ですね。(POST は説明省略します)

GET で送る場合以下のフォーマットになります。

hrttp://hogehoge.com/piyo?data1=xxx&data2=yyy&data3=zzz

このように ? に続けてデータの並びを & で区切って指定することになります。
各データは「データ名=値」のように = で対にします。
つまり、今回つけられたURL上の "data" はテキトウに指定されたデータ名となります。

次に受け側をちょっと変えて書くと

//var data = location.href.split("?")[1];
var url = location.href;
var all_data = url.split("?");
var data = all_data[1];
//var text = data.split("=")[1];
var arr = data.split("=");
var text = arr[1];

とまあ、こんな感じでいくつかの処理をいっぺんに書くとこうなるってことですな。

投稿2021/01/18 12:30

takasima20

総合スコア7460

of_the_Europa

2021/01/18 13:03

ありがとうございますm(__)m ちょうどパラメーターの値がどんな並びになっているのか知りたかったので、分解していただいてすごく分かりやすいです！ splitで分割すると、まず("?")はURLとパラメーターに別けていて、 ("=")はパラメーターのそれぞれの値を配列のようにして別けているという風に認識しました。