人生最悪の忘れ物

クッキーを食べさせた会員には割引価格を適用したい。

解決済

  • 質問者：toutetsu
  • 質問日時：
  • 回答数：6件

他所を参考にして作ってみました。
次の3点がよくわかりません。アドバイスをいただけるとありがたいです。
・価格が表示されない。
・有効期限は24日間？
・function cgIMG()の役割。

<script type="text/javascript">
function checkmember() {
var price = '20000';
var mprice = price * 0.9;
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
fm.kakaku.value = mprice;
}
else{
fm.kakaku.value = price;
}
}
function eatcookie(name,data,days){
var cdate=new Date();
cdate.setTime(cdate.getTime()+1000*60*60*24*days);
document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString();
}
function writeprice() {
document.write("<p>会員価格：'+mprice+'</br>通常価格：'+price+'</p>");
}
function cgIMG(){
eatcookie("cgIMGnm","123", 10);
}
</script>

<body onload="return checkmember()">
<p>
<script type="text/javascript">
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
document.write('<a href="#" onClick="cgIMG()">' +
'現在ログイン中</a>');
}
else{
document.write('<a href="#" onClick="cgIMG();location.reload()">' +
'ログインしてください</a>');
}
</script>

<script type="text/javascript">
writeprice();
</SCRIPT>
</p>
<form name="fm" id="fm" Action="" METHOD="POST">
<INPUT TYPE="text" NAME="kakaku" id="kakaku">
<SELECT NAME="kazu">
<OPTION>1<OPTION><OPTION>2<OPTION>
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="カートに入れる">
</FORM>
<form>
<input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除">
</form>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

＃５補足＞<head>内にCSSを書き込み文字を赤字にしたいのです。


ＣＳＳを動的に書き換えるには、<head>内にＣＳＳを動的に書き換えるのじゃなく、普通は、それぞれのエレメントのスタイルをスクリプトから変更することで行います。
例えば、
function stockStatus (){
if(stock == 0) {
document.write('<style type="text/css"><!-- #soldout { color: red; } --><\/style>');
}
}
を
function stockStatus (){
if(stock == 0) {
document.getElementById('soldout').style.color='red';
}
}
のようにします。
スタイルシート全体を切り換えたり、動的にスタイルシートを作成するとかもあるかと思いますが、１つのエレメントの文字色を変えるだけですので、この方がよろしいかと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

BLUEPIXYさん、いつもすばやい回答ありがとうございます。
教えていただいた方法で希望通りに動作させることができました。
スタイルシートを書き換えるのはスタイルシートをヘッド内に書き込むという先入観があったためこのような方法は思いもよりませんでした。
document.getElementByIdとスタイルで検索してみたらスタイルシートを書き換える方法がたくさん出てきました。
入り口を間違えるとなかなか先に進めないものですね。
何度も根気よく丁寧に教えていただき大変感謝しております。
できるだけ自力でできるよう勉強しますが、また行き詰ったときはお力をお借りできれば幸いです。

通報する
お礼日時：2005/09/25 13:17

No.5

  • 回答者： BLUEPIXY
  • 回答日時：

＞Firefoxで、フォームのdisabledが効いていない


＞<INPUT TYPE="text" NAME="kakaku">にfm.kakaku.value = price;で指定した価格が表示されない
document.fm.kakaku.value=price;
のようにしてみて下さい。
多分、disabledについても同じ原因だと思います。
documentを省略するソースが多いですが、省力しない方がいいです。
idから直接捕まえる場合はいいですけど。

この回答への補足

BLUEPIXYさん、ご指摘いただいたところを修正したら希望通りに動きました！
適切な回答ありがとうございました。
他所からコピーして組み立てているだけでしたので基本的なことすら理解していませんでした。
これからはdocumentを省略せずに書くよう心に留めておきます。
今回は大変勉強になりました。

最後にもうひとつだけお聞きしたいことがあります。
これもきっと初歩中の初歩のような気がして、お聞きするのは恥ずかしいのですが、どんなに検索しても似たようなケースにヒットしないため教えていただけませんでしょうか？

内容は簡単でvar stock = 0;//在庫あり=1,　在庫なし=0　として、在庫なし=0のときに、<head>内にCSSを書き込み文字を赤字にしたいのです。
フラグとなるvar stock = 0;は仕様上、body内に書き込みます。
恐らく引数を渡して、if（在庫チェック関数()）{ CSS書き込み }となるんじゃないかと想像しているのですがここの流れがよくつかめません。

何度もお聞きして心苦しいのですが最後にアドバイスをいただけるとうれしいです。
よろしくお願いいたします。

<html>
<head>
<style type="text/css">
<!--
#soldout { color: black; }
-->
</style>
<script type="text/javascript">
<!--
function stockStatus (){
if(stock == 0) {
document.write('<style type="text/css"><!-- #soldout { color: red; } --><\/style>');
}
}
//-->
</script>
</head>

<body onload="stockStatus();">
<script type="text/javascript">
<!--
var price = '20000';
var xday = new Date(2005, 9, 23, 24);
var stock = 0;
//在庫あり=1,　在庫なし=0

//-->
</script>

<p id="soldout">完売</p>
</body>
</html>

補足日時：2005/09/24 14:16
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

＃３は、論点をはずしてる？と思ったので追加


実際に試してないのでいい加減ですけど、
function checkmember(){
　if(会員か？){
　　//会員の時の処理
　} else { //会員じゃない
　　if(非会員としてまだクッキーに登録されていない？){
　　　//非会員としてクッキーに時間と共に書き込む
　　}
　　//時間を取りだし、有効な時間内のアクセスかどうか調べて処理
　}
}
みたいな感じでやればいいのでは

この回答への補足

BLUEPIXYさん、丁寧なご回答ありがとうございました。
教えていただいた内容は私にはまだ高度すぎて、半分も理解したかどうかあやしいところですが時間をかけて何とか希望通りのものを作ることができました。
本当にありがとうございます。
Java Scriptを始めたばかりの初心者が教えてもらってばかりでしたがよくここまでできたものだと一人で悦に入っていました。
しかし・・・困ったことがおきました。
Firefoxでチェックしてみたら、フォームのdisabledがまったく効いていないのです。
IE6ではうまくいきます。
いろいろ調べてみたのですが、以前教えていただいたid="soldout"のときはfirefoxでも問題なくdisabledしますのでクッキーのところに原因があるようです。firefoxのクッキーは有効にしてあります。
完全にお手上げです。
いったいどこに問題があるのでしょうか？もしお判りになれば教えていただけませんでしょうか。
よろしくお願いします。

補足日時：2005/09/23 23:49
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

firefoxでもうひとつ問題がありました。
<INPUT TYPE="text" NAME="kakaku">にfm.kakaku.value = price;で指定した価格が表示されないのです。
IE6ではちゃんと表示されるのにfirefoxでうまくいかないのはなぜなんでしょう？

通報する
お礼日時：2005/09/24 00:18

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

＞getMonth()が実際の月-1であるため、var xday = new Date(2005, 9-1, 22, 20);とすればうまく行きます。


＞しかしこれではPCに不慣れな人間にはわかりにくいです。
そうですね。みな同じようなことで悩んでいると思います。
でも、これはDateの仕様なので、しょうがないです。
＞new Date(2005, 9, 22, 20);と入力して問題なく動作するには…
Dateクラスを置き換えてしまうということもできますが、その場合、他の人がこのプログラムを部分的に見た場合、逆に勘違いする恐れがあるので、そういうのは良くないと思います。
そこで、DateをラップするようなmyDateを作ってそれを使うというのもありますが、まあ、そこまでしなくても…と思えます。
私の場合で言えば、コメントで、月は-1とか付けたりする場合もありますが、ＰＣに不慣れな人ようには
//販売開始時期
var sale_year=2005;
var sale_month=9;
var sale_day=23;
var sale_hour=20;
のような部分を作って、プログラムの動作に影響を及ぼす設定値みたいなものをそこで入力（変更）してくださいと書いておきます。
いわゆるインターフェース部分みたいなものを作るということですね。
それで、プログラム部分では、
var xday = new Date(sale_year, sale_month -1 , sale_day, sale_hour);　//販売開始時間、月は-1で扱う
みたいにします。
これは、ＰＣに不慣れな人だけじゃなくて、論理的な意味を与えるというような意味と、プログラムの変更に関係する部分を１つにまとめておけるというような意味もあります。

＞▲ここの部分（特に@）がよくわからなかったのですが、どういうことなんでしょう？
フォーマットに関しては、プログラマが適当に設計して、それがどうなっているか判っていればいいのです。（そのフォーマットの意味がどういう構成になっているかコメントにしておく必要はありますが）
＠の意味っていうと別に特別な意味などないのですが、＾＾；
＠はアットマークと呼ばれることから
非会員の最初のログイン時間 at 日時
のような意味を掛けたものです。
また、フォーマットが固定長になっていて
substringを使うなら、どの部分でも任意に取り出せるから必要ないと思われるかもしれませんが、そのようなデリミタ（区切り）を入れることで人間にとっては読みやすくなります。
また、場合によっては
unmenber@sep 23, 2005 20:00:00
のような形にしておけば、
var user=data.split("@");
のようにして
user[1]に"sep 23, 2005 20:00:00"
を取り出せます。（user[0]は"unmenber")
そして、
var startDate=new Date(user[1]);
のようにそのまま使うことができます。

＞コードには次の記述が3回も出てきます。
＞if(document.cookie.substring(0, 11) == "cgIMGnm=123"
そういうことに気がついたなら、こういう部分は、１つのところに押し込めるのが常道です。
たとえば、
isMemberというような会員かどうかをチェックする関数を作って（同じような名前の関数が既にあるので、紛らわしいですが＾＾；）
function isMember(){
return document.cookie.substring(0, 11) == "cgIMGnm=123"
}
とかしておけば、
＞if(isMember())
と書けますね。
ただ、間接的にしただけのように思えますが、
会員データを表す「cgIMGnm=123」とか
そのフォーマット位置を表すsubstring(0, 11)とか
データの保持にクッキーを使っているとか
そういう事柄を隠蔽できたという効果があります。
また、一箇所に押し込めたことで、フォーマットが変わって1,12になったとしても、この部分だけを変更すればいいし、場合によっては、先述のsplitを使う方式に変えても、メインのプログラムの論理的意味は変わらないということに効果があります。

ところで老婆心ですが、
＞if(document.cookie.substring(0, 11) != "cgIMGnm=123" & count > 0){
の部分の＆ですが、
論理的なＡＮＤ条件（かつ）の意味なら＆＆を使うのが普通です。
＆は、ビット演算に使われます。

あと
＠のことなど、私の変なアドバイスに惑わされることなく、自分で考えてプログラムされればいいと思いますよ。
自分の考えた論理を体現させるというのが１つのプログラムの醍醐味であるわけですしね。
"ダイエット"についても、論理的な意味がすっきりしてれば、それほどこだわる必要はないと思います。
ただまあ、同じような処理をまとめたり、今回でいう隠蔽ということは、なにかにつけ考えるようにするといいかもしれません。
プログラム中に良くでてくる数字や文字列などそういうものに意味づけしてやるとかなるべく一箇所にまとめて変更を容易にするとかそういうことに注意するといいと思います。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： BLUEPIXY
  • 回答日時：

>詳細：非会員が購入できる時間を指定（４８時間以内）。

指定時間までは非会員はフォームが使えない。フォームの下に「２８時間後にご購入いただけます」のように表示。指定時間が来たらフォームが使えるようになる。
クッキーを使って会員と非会員をonLoad時に判定しているわけですから、
会員で無かった場合に、過去に非会員としてアクセスがあったかどうかをクッキーで調べてそういう非会員としてのデータが無い場合には、
非会員としてアクセスがあった日時をクッキーとして保存しておけば、
２８時間が経過していて、４８時間以内であるかということも調べられると思います。
cgIMGnm=123
が会員だとすると
cgIMGnm=000が非会員である。
また、
cgIMGnm=000@2005/09/23 20:00
などとフォーマットすればいいかと思います。

この回答への補足

BLUEPIXYさん、早速のご回答ありがとうございました。いつも迅速な回答に本当に感謝しております。
教えていただいた内容を参考に何とかイメージに近いものができたのですが、ひとつだけうまく動作しません。
getMonth()が実際の月-1であるため、var xday = new Date(2005, 9-1, 22, 20);とすればうまく行きます。
しかしこれではPCに不慣れな人間にはわかりにくいです。
new Date(2005, 9, 22, 20);と入力して問題なく動作するにはどこを変更したらよいのでしょうか？
初歩的な質問な気がするのですがどうやってもうまくいかないためアドバイスいただければうれしいです。

> cgIMGnm=000が非会員である。
> cgIMGnm=000@2005/09/23 20:00
などとフォーマットすればいいかと思います。

▲ここの部分（特に@）がよくわからなかったのですが、どういうことなんでしょう？
勉強不足で申し訳ありません。

コードには次の記述が3回も出てきます。よくわからなくてこうなってしまったのですが、もしダイエットさせるよい方法がありましたら教えていただけませんでしょうか？よろしくお願いいたします。
if(document.cookie.substring(0, 11) == "cgIMGnm=123"


<html>
<head>
<script type="text/javascript">
<!--
var price = '20000';　//通常価格
var xday = new Date(2005, 9, 22, 20);　//販売開始時間

var mprice = price * 0.9;
var today = new Date();
count = Math.ceil( (xday.getTime() - today.getTime()) / (60*60*1000) );

if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
document.write('<style type="text/css"><!-- #memberPrice { font-weight:bold; } --><\/style>');
}
function checkmember(num) {
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
fm.kakaku.value = mprice;
}
else{
fm.kakaku.value = price;
count = Math.ceil( (xday.getTime() - today.getTime()) / (60*60*1000) );
if(count > 0) {
for (var i =0; i<=fm.length -1 ;i++){
fm.elements[i].disabled=num;
}
}
else {
fm.elements[i].disabled=false;
}
}
}
function eatcookie(name,data,days){
var cdate=new Date();
cdate.setTime(cdate.getTime()+1000*60*60*24*days);
document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString();
}
function writeprice() {
document.write('<p id="memberPrice">会員価格：'+mprice+'<\/p><p>通常価格：'+price+'<\/p>');
}

function displaytime() {
if(document.cookie.substring(0, 11) != "cgIMGnm=123" & count > 0){
document.write(count);
document.write("時間後にご購入いただけます");
}
}

function cgIMG(){
eatcookie("cgIMGnm","123", 10);
}
//-->
</SCRIPT>
</head>

<body onload="return checkmember(true)">
<p>
<script type="text/javascript">
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
document.write('<a href="#" onClick="cgIMG()">' +
'現在ログイン中</a>');
}
else{
document.write('<a href="#" onClick="cgIMG();location.reload()">' +
'ログインしてください</a>');
}
</script>

<script type="text/javascript">
writeprice();
</SCRIPT>
</p>
<form name="fm" id="fm" Action="" METHOD="POST">
<INPUT TYPE="text" NAME="kakaku" id="kakaku">
<SELECT NAME="kazu"><OPTION>1</OPTION><OPTION>2</OPTION></SELECT>
<SELECT NAME="color"><OPTION>赤</OPTION><OPTION>青</OPTION>
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="カートに入れる">
</FORM>
<form>
<script type="text/javascript">
displaytime();
</SCRIPT><br>
<input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除">
</form>
</body>
</html>

補足日時：2005/09/23 11:54
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

>・価格が表示されない。


＞document.write("<p>会員価格：'+mprice+'</br>通常価格：'+price+'</p>");
の部分を言ってるんだったら
document.write("<p>会員価格："+mprice+"</br>通常価格："+price+"</p>");
とします。
また、そういう使い方であるなら
mpriceとpriceは大域的であるので、
＞var price = '20000';
＞var mprice = price * 0.9;
を
＞function checkmember() {
より前（上）に出します。

>・有効期限は24日間？
＞function eatcookie(name,data,days){
のdaysが有効期限
なので、このプログラムでは１０日間

>・function cgIMG()の役割。
＞eatcookie("cgIMGnm","123", 10);
を呼び出しているだけ、
直接プログラムの各部に
eatcookie("cgIMGnm","123", 10)
を書くと、それぞれの引数を変更するときに、各部をいちいち変更しなくてはならなくなるので、１箇所にまとめる意味で間接的にしているのだと思う。

この回答への補足

BLUEPIXYさん、いつも丁寧に教えていただいてありがとうございます。
お返事遅くなって申し訳ありませんでした。
教えていただいた内容は大変参考になりました。少しはクッキーの働きがつかめてきた感じがします。
さて、機能を追加するためにコードを書き直していたのですが、▼次の機能追加がどうしてもわかりません。

●非会員は指定時間までフォームを使えなくする。
詳細：非会員が購入できる時間を指定（４８時間以内）。指定時間までは非会員はフォームが使えない。フォームの下に「２８時間後にご購入いただけます」のように表示。指定時間が来たらフォームが使えるようになる。

前回教えていただいたものを元にフォームを使えなくするところまではうまくいきました。しかし指定時間に使えるようにすることがどうしてもできません。▼下のURLを参考にしたりしましたが理解できませんでした。
http://jsm.suepon.com/script/jsm13.html

お手数かけて申し訳ありませんがもう少しだけおつきあいいただけませんでしょうか？よろしくお願いいたします。
また別の質問のときに回答者の方から教えていただいたのですが、私のコードは無駄が多く、美しくないそうです。何かお気づきの点がありましたら些細なことでもご指摘いただけるとうれしいです。

<html>
<head>
<script type="text/javascript">
<!--
var price = '20000';
var mprice = price * 0.9;
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
document.write('<style type="text/css"><!-- #memberPrice { font-weight:bold; } --><\/style>');
}
function checkmember(num) {
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
fm.kakaku.value = mprice;
}
else{
fm.kakaku.value = price;
for (var i =0; i<=fm.length -1 ;i++){
fm.elements[i].disabled=true;
}
}
}
function eatcookie(name,data,days){
var cdate=new Date();
cdate.setTime(cdate.getTime()+1000*60*60*24*days);
document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString();
}
function writeprice() {
document.write('<p id="memberPrice">会員価格：'+mprice+'<\/p><p>通常価格：'+price+'<\/p>');
}
function cgIMG(){
eatcookie("cgIMGnm","123", 10);
}
//-->
</SCRIPT>
</head>

<body onload="return checkmember(true)">
<p>
<script type="text/javascript">
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
document.write('<a href="#" onClick="cgIMG()">' +
'現在ログイン中</a>');
}
else{
document.write('<a href="#" onClick="cgIMG();location.reload()">' +
'ログインしてください</a>');
}
</script>

<script type="text/javascript">
writeprice();
</SCRIPT>
</p>
<form name="fm" id="fm" Action="" METHOD="POST">
<INPUT TYPE="text" NAME="kakaku" id="kakaku">
<SELECT NAME="kazu"><OPTION>1</OPTION><OPTION>2</OPTION></SELECT>
<SELECT NAME="color"><OPTION>赤</OPTION><OPTION>青</OPTION>
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="カートに入れる">
</FORM>
<form>
２８時間後にご購入いただけます
<input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除">
</form>
</body>
</html>

補足日時：2005/09/23 01:44
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報