html、JavaScriptでのテキストファイルへの書き込み読み込み。

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
テマリ

html、JavaScriptでのテキストファイルへの書き込み読み込み。

#1

投稿記事 by テマリ » 11年前

htmlでテキストファイルにデータを送る方法をJavaScriptで調べてみたんですがいまいちわかりません。
よければ一番参考になるサイトとhtmlでのテキストファイルを操作するソースを大まかに日本語で教えてもらいたいです。
C++のように簡単じゃないでしょうか。

アバター
h2so5
副管理人
記事: 2212
登録日時: 13年前
住所: 東京
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#2

投稿記事 by h2so5 » 11年前

HTML上のJavascriptからローカルのファイルを操作することはできません。
サーバーサイドでPHPやnode.jsなどを使ってサーバー側のファイルを操作することはできます。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#3

投稿記事 by softya(ソフト屋) » 11年前

htmlからファイルが操作できないのはセキュリティの問題になるからです。
つまり、ウィルス侵入やら個人情報の盗みなどに使われる窓口を塞ぐ必要がありますから。

【補足】
限定された条件でならHTML5 のFile APIを利用したファイル操作は可能です。
※ 概念的にはアップロードとダウンロードに近いです。

「HTML5 File API を使ってファイル読み込み | TM Life」
http://tmlife.net/programming/javascrip ... -read.html
「javascript でテキストをローカルに保存する方法 | TM Life」
http://tmlife.net/programming/javascrip ... -save.html
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ゆうたろう

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#4

投稿記事 by ゆうたろう » 11年前

ちょっと難しいですがjavascriptの変数をphpに渡してphp側でファイルの保存
ていうのができますよ
javascriptとphpの連携↓
http://php.net/manual/ja/faq.html.php#f ... t-variable

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#5

投稿記事 by softya(ソフト屋) » 11年前

ゆうたろう さんが書きました:ちょっと難しいですがjavascriptの変数をphpに渡してphp側でファイルの保存
ていうのができますよ
javascriptとphpの連携↓
http://php.net/manual/ja/faq.html.php#f ... t-variable
その方法はサーバ側で動けば良いので、PerlやJavaやRuby、Pythonなどサーバで動く言語ならどれでも出来ます。
サーバ側でCGIでC/C++を動かすということもサーバ設定次第では可能です。
まぁ、サーバ側にしか保存できないわけですが。

アップロード/ダウンロードに限定すればjavascriptを使わずにhtmlだけで記述可能ですね。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#6

投稿記事 by テマリ » 11年前

softya(ソフト屋) さんが書きました:htmlからファイルが操作できないのはセキュリティの問題になるからです。
つまり、ウィルス侵入やら個人情報の盗みなどに使われる窓口を塞ぐ必要がありますから。

【補足】
限定された条件でならHTML5 のFile APIを利用したファイル操作は可能です。
※ 概念的にはアップロードとダウンロードに近いです。

「HTML5 File API を使ってファイル読み込み | TM Life」
http://tmlife.net/programming/javascrip ... -read.html
「javascript でテキストをローカルに保存する方法 | TM Life」
http://tmlife.net/programming/javascrip ... -save.html
Google Chormeでやってみましたが最近Vistaではダウンロードができないというのがありまして、レジリストをいじれば解決するらしいのですがレジリストに詳しくないのとGoogle Chormeが問題解決した時にレジリストをいじり忘れるのが怖いのでFirefoxでやってみましたがFirefoxでもできませんでした。
Internet explorerはとても重いのでやっていません。

サーバー側で保存についてやってみようと思うんですがオススメのサイト教えてください。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#7

投稿記事 by softya(ソフト屋) » 11年前

テマリ さんが書きました:怖いのでFirefoxでやってみましたがFirefoxでもできませんでした。
私はFireFoxでやりましたが、ちゃんと動きましたよ。
試したコードを貼ってみて下さい。
テマリ さんが書きました: サーバー側で保存についてやってみようと思うんですがオススメのサイト教えてください。
サーバー側の保存というかファイル操作は簡単に見つかると思いますが、Ajaxと言うかクライアントとサーバ間の通信が必要です。
そういうものは、どの程度理解されているのか分からないのですが、ちゃんと理解してやるならともかく良くわからないままサンプルのコピペで余りやってほしくない行為です。
暗号化せずに重要な情報をクライアント・サーバ間でやり取りしそうなので。

疑問としてサーバー側でPerlやPHPなど何らかのサーバーサイド言語は動作する環境とか知識はお持ちなんでしょうか?
明かされている情報が少ないので、できるだけ情報は明かしていただくようにお願いします。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#8

投稿記事 by テマリ » 11年前

「javascript でテキストをローカルに保存する方法 | TM Life」
http://tmlife.net/programming/javascrip ... -save.html
Firefoxでこのサイトのサンプルでダウンロードしてみたんですがダウンロードができません。
別にFirefoxで画像をダウンロードしてみたんですができませんでした。
理由はわかりません。

サーバー、Perl、PHPについてはほとんど知りません。
html、C++を少しかじった程度しか知識はありません。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#9

投稿記事 by テマリ » 11年前

書き忘れてました。

①ランダム数字を一瞬程表示、
②それを入力、正誤を判断、
③正解数で表示される数字の数が増し、
④問題数と正解数、間違った数をテキストに送信、
⑤テキストの中身から成績表などを表示。

というプログラムを作ろうとしています。
④についてでつまっていました。
⑤についてはまだ細かい事はわからないので決まっていません。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#10

投稿記事 by softya(ソフト屋) » 11年前

テマリ さんが書きました:「javascript でテキストをローカルに保存する方法 | TM Life」
http://tmlife.net/programming/javascrip ... -save.html
Firefoxでこのサイトのサンプルでダウンロードしてみたんですがダウンロードができません。
別にFirefoxで画像をダウンロードしてみたんですができませんでした。
理由はわかりません。
ダウンロードじゃなくて、リンク先にあるサンプルからままなら実行できますか?
問題が出たら問題を切り分けて、問題を解決する方法を考えるのが必要なことです。
わからないと投げ出さず。FirefoxにはFireBugなどのデバッガもありますのでデバッグしてみて下さい。
それでも出来ないと分かれば他の方法を考えるときでしょう。

それと前にも書きましたが問題のあるコードを貼って下さい。
テマリ さんが書きました: サーバー、Perl、PHPについてはほとんど知りません。
html、C++を少しかじった程度しか知識はありません。
サーバで保存する場合は、サーバーサイド言語も勉強しないといけませんし、何よりサーバーを用意しないと行けません。
テマリ さんが書きました: ④問題数と正解数、間違った数をテキストに送信、
⑤テキストの中身から成績表などを表示。
いつまで保存するか次第ですが、javascriptであればクッキーで保存するという方法もあります。
サーバーサイドでやるなら他の人とも比較した成績表やらランキングを表示するぐらいの気持ちがないと意味が無いかと。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#11

投稿記事 by テマリ » 11年前

コード:

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Lib : Editor</title>
        
        <style>
            
        </style>
        <script>
            var $id = function(id) { return document.getElementById(id); }
            
            window.onload = function()
            {
                $id("download-link").addEventListener("click", function(){
                    var value = $id("ta").value;
                    var href = "data:application/octet-stream," + encodeURIComponent(value);
                    this.setAttribute("href", href);
                }, false);
            }
        </script>

    </head>
    
    <body>
        
        <h1>TM Lib : Download</h1>
        
        <textarea id="ta" cols="64" rows="16">
#include <stdio.h>

int main()
{
    printf("Hello, world!");
    return 0;
}
        </textarea><br/>
        <a id="download-link" href="#">Download</a>
        
    </body>
</html>
コードに問題があるかはわかりません。
実行はできますがコードで表示されるページのクリック部分をクリックでのダウンロードと右クリックでのダウンロードができません。
FirebugはFirefox 17.0では利用できないそうです。
Firefox初期化をした上でFirefoxで画像ダウンロード、vectorでダウンロードができませんでした。
ダウンロードは開始されますがデスクトップやファイルに保存を指定して実行しても保存がされません。

サーバーで保存はやめる事にします。

クッキーを保存できる期間はわかりませんが一ヶ月分ぐらいは保存したいです。
cookie保存をやってみます。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#12

投稿記事 by softya(ソフト屋) » 11年前

コードをFirefox17.0.1で確認しましたが動作します。
ところで、文字コードはちゃんとUTF-8になっていますか?

>Firefox初期化をした上でFirefoxで画像ダウンロード、vectorでダウンロードができませんでした。
ウィルス対策ソフトとかファイヤウォールを疑ったほうが良いかも知れません。

>クッキーを保存できる期間はわかりませんが一ヶ月分ぐらいは保存したいです。
期間設定できるので一年保存とかかも可能です。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#13

投稿記事 by テマリ » 11年前

コードについてはサンプルページのソースを貼りました。
文字コードなどについては詳しくわかりません。

>ウィルス対策ソフトとかファイヤウォールを疑ったほうが良いかも知れません。
ウイルス対策ソフトを多数使用しているのでそのせいかもしれません。
cookie保存にしようと思うのでダウンロードがうまくいかないことについてはスルーしようと思います。

ゆうたろう

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#14

投稿記事 by ゆうたろう » 11年前

全部javasceiptで書くつもりです?
javascriptはoffにしてる人もいるだろうし
クッキ-を無効にしてる人がいると動きませんよ
そこも考えとかないといけませんよ
①ランダム数字を一瞬程表示、
②それを入力、正誤を判断、
③正解数で表示される数字の数が増し、
④問題数と正解数、間違った数をテキストに送信、
⑤テキストの中身から成績表などを表示

これだけならphpでできると思うのですが

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#15

投稿記事 by softya(ソフト屋) » 11年前

テマリ さんが書きました:コードについてはサンプルページのソースを貼りました。
文字コードなどについては詳しくわかりません。
文字コードはHTMLを公開する気なら勉強して下さい。必須です。
昨今はUTF-8を使うのが一般的ですので、そのための記述をHTMLにする必要があります。
当然ながらエディタをUTF-8を扱えるものにする必要もあります。

いろんな文字コードが混ざると文字化けで苦労しますし、ブラウザの文字コード自動判定は意外と役立たずです。
クッキーでの保存にも文字コードを気にしたほうが良いです。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#16

投稿記事 by softya(ソフト屋) » 11年前

ゆうたろう さんが書きました:全部javasceiptで書くつもりです?
javascriptはoffにしてる人もいるだろうし
クッキ-を無効にしてる人がいると動きませんよ
そこも考えとかないといけませんよ
①ランダム数字を一瞬程表示、
②それを入力、正誤を判断、
③正解数で表示される数字の数が増し、
④問題数と正解数、間違った数をテキストに送信、
⑤テキストの中身から成績表などを表示

これだけならphpでできると思うのですが
ゆうたろうさん、解決チェックは質問者以外は触らないでくださいね。

で、PHPとHTMLだけだと
①ランダム数字を一瞬程表示、
をどうするか問題になりますが、ページ遷移で行うのでしょうか?
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ゆうたろう

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#17

投稿記事 by ゆうたろう » 11年前

そうですね個別にフオ-ム入力ぺ-ジ作ってそこで
$random = rand(0,1000);
echo $random;
とすればいいと思います

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#18

投稿記事 by softya(ソフト屋) » 11年前

ゆうたろう さんが書きました:そうですね個別にフオ-ム入力ぺ-ジ作ってそこで
$random = rand(0,1000);
echo $random;
とすればいいと思います
それだけだと仕様にある一瞬程表示を実現できていません。
時間遷移の仕組みを考える必要がありますよ。javascript抜きで。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ゆうたろう

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#19

投稿記事 by ゆうたろう » 11年前

ランダム数字を一瞬程表示とはどういうことでしょうか
動的に一瞬数が表示されて消えるということでしょうか?
何のためにそんなことするのですかね?(別にできなくもないですが)
要は数を入力すね認証ペ゜-ジみたいなことがやりたいんですよね

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#20

投稿記事 by テマリ » 11年前

個人で使う物を作る予定です。

文字コードに気を付けます。

コード:

<html>
<head>
	<script type="text/javascript" src="fun.js"></script>
</head>
<title>瞬間記憶トレーニング</title> 
<body background="gazo/kabe.jpg">
	<center>
	<table border="0" bgcolor="blue">
		<td>
			<font color="#FFFAFA" face="Amaze" size="6">
			1分間
			<font color="#FFFF00">
			瞬間記憶
			</font>
			トレーニング
			</font>
		</td>
	</table>
	<br>
	<form name="js">
		<input type="text" name="txtb" style="font-size:40px;border-style:groove;border-width:10;" value=""><br><br>
		<input type="text" name="txts" style="font-size:35px;border-style:groove;border-width:5;" value=""><br>
		<input type="button" value="START" onclick="RAN()">
		<input type="button" value="確認" onclick="Sihi()"><br><br>
		<input type="text" name="txtf" style="font-size:25px;border-style:groove;border-width:10;border-color:blue;" value="正解0    不正解0"><br>
	</form>
	</center>
</body>
</html>

コード:

//テキストボックスの文字を操作する
function CLR(){
	document.js.txtb.value="";
}

var kazu,ransu=1000, //乱数関連変数
ten1=0,ten2=0;
//テキストボックスに乱数を表示する
function RAN(){
	kazu = Math.round(Math.random()*ransu);
	document.js.txtb.value= kazu;
	TIME();
}

var Timer1; //タイマーを格納する変数(タイマーID)の宣言

//乱数消去タイマー
function TIME(){
	Timer1=setInterval("CLR()",400);
}

//正不判断+txts操作
function Sihi(){
	var str2=document.js.txts.value;
	if(str2==kazu){
		ten1++;
		document.js.txtf.value="正解"+ten1+"    不正解"+ten2;
	}else{
		ten2++;
		document.js.txtf.value="正解"+ten1+"    不正解"+ten2;
	}
	document.js.txts.value="";
	switch(ten1){
		case 2: ransu=10000; break;
		case 4: ransu=100000; break;
		case 6: ransu=1000000; break;
		case 8: ransu=10000000; break;
		case 10: ransu=100000000; break;
		case 12: ransu=1000000000; break;
		case 14: ransu=10000000000; break;
		case 16:
			document.js.txtf.value="正解"+ten1+"    不正解"+ten2+"クリア";
			ten1=0; ten2=0;
			break;
		default: break;
	}
	switch(ten2){
		case 2:
			document.js.txtf.value="お疲れ様でした。";
			ten1=0; ten2=0;
			break;
		default: break;
	}
}
①~③までこれでできました。
ページ遷移が良いと思いましたがこちらの方が作りやすかったのでテキストボックスで作りました。

プラウザで開くプログラムを作る場合はhtmlよりphpのが簡単ですか?
phpのサイトをよく見る気がします。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#21

投稿記事 by softya(ソフト屋) » 11年前

瞬間記憶がテーマなのでページ遷移よりも時間を細かく制御できるjavascriptで書き換えるのが向いていると私は思います。
それとPHPだからと言って楽なことはないと思いますよ。サーバーを用意したり、PHPを覚えるほうが大変かなと。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#22

投稿記事 by テマリ » 11年前

瞬間的に数字を見てそれを入力、そういうプログラムを作ろうと思っています。
同時に目で捉える数字を増やして速読とかできるようにならないかと思って作っています。
それと想起力を上げるプログラムだったら自分の成長度合いを感じられれば長く続くと思うので成績表も作ろうと思っています。これだけの意味しかないプログラムです。

html、JavaScript、cssで作ります。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#23

投稿記事 by テマリ » 11年前

件名と今回のプログラムととても関係ない事なんですが、VC++やここのC言語交流フォーラムのコード表示が色で綺麗にそして見やすくなっているのですがコードを書く時色鮮やかで背景が黒でさらに明るい色等で文字が分けられる、これってとってもコード書く時楽しくなると思うんですよ。
この機能を自分のアレンジで作りたいんですが作るのって大変ですか?
単語を入力したら色が変わる、という風にしたいです。
html、C++でできたら作りたいと思っています。

さらにまったく関係ないんですがfunctionってとっても素敵ですよね。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#24

投稿記事 by softya(ソフト屋) » 11年前

htmlとjavascriptで出来ると思いますが、C++をどう組み合わせるつもりでしょうか?
長くなりそうなら別トピックにしたほうが良いと思います。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#25

投稿記事 by テマリ » 11年前

間違えました、htmlかC++で作りたいと思っていました。
このプログラムができたら次のトピック立てさせて頂きます。

ゆうたろう

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#26

投稿記事 by ゆうたろう » 11年前

クッキー保存読み込みだけでいいなら以下のようにせきます
いらない文字がくっついてるんですがそこは適当に弄っといてくださいw
<html>
<head>


<script language="JavaScript">



function makecookie(ten1,ten2) {
document.cookie = "ten1=" + ten1 +"ten2="+ ten2;//出て行った時間のクッキーを発行。リンクを踏んだとき発動
}


function readcookie() {
cookie = document.cookie; // クッキー読み込み
data = cookie.split("; "); // "; "で分割
for(i = 0 ; i < data.length ; i++) {
data2 = data.split("="); // "="で分割
if(data2[0] == "ten1") {
outtime = data2[1]; // 訪問回数
} if(data2[0] == "ten2") {
outtime2 = data2[1];
}}
return outtime;
}



//テキストボックスの文字を操作する
function CLR(){
document.js.txtb.value="";
}

var kazu,ransu=1000, //乱数関連変数
ten1=0,ten2=0;
//テキストボックスに乱数を表示する
function RAN(){
kazu = Math.round(Math.random()*ransu);
document.js.txtb.value= kazu;
TIME();
}

var Timer1; //タイマーを格納する変数(タイマーID)の宣言

//乱数消去タイマー
function TIME(){
Timer1=setInterval("CLR()",400);
}

//正不判断+txts操作
function Sihi(){
var str2=document.js.txts.value;
if(str2==kazu){
ten1++;
document.js.txtf.value="正解"+ten1+" 不正解"+ten2;
}else{
ten2++;
document.js.txtf.value="正解"+ten1+" 不正解"+ten2;
}alert(ten2);
document.js.txts.value="";
switch(ten1){
case 2: ransu=10000; break;
case 4: ransu=100000; break;
case 6: ransu=1000000; break;
case 8: ransu=10000000; break;
case 10: ransu=100000000; break;
case 12: ransu=1000000000; break;
case 14: ransu=10000000000; break;
case 16:
document.js.txtf.value="正解"+ten1+" 不正解"+ten2+"クリア";
ten1=0; ten2=0;
break;
default: break;
}
switch(ten2){
case 2:
document.js.txtf.value="お疲れ様でした。";
makecookie(ten1,ten2); alert(readcookie() ); ten1=0; ten2=0;
break;
default: break;
}
}
</script>
</head>
<title>瞬間記憶トレーニング</title>
<body background="gazo/kabe.jpg">
<center>
<table border="0" bgcolor="blue">
<td>
<font color="#FFFAFA" face="Amaze" size="6">
1分間
<font color="#FFFF00">
瞬間記憶
</font>
トレーニング
</font>
</td>
</table>
<br>
<form name="js">
<input type="text" name="txtb" style="font-size:40px;border-style:groove;border-width:10;" value=""><br><br>
<input type="text" name="txts" style="font-size:35px;border-style:groove;border-width:5;" value=""><br>
<input type="button" value="START" onclick="RAN()">
<input type="button" value="確認" onclick="Sihi()"><br><br>
<input type="text" name="txtf" style="font-size:25px;border-style:groove;border-width:10;border-color:blue;" value="正解0 不正解0"><br>
</form>
</center>
</body>
</html>

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 13年前
住所: 東海地方
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#27

投稿記事 by softya(ソフト屋) » 11年前

ゆうたろうさん、前にも書きましたがcodeタグをお使い下さい。読みづらいです。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

Loki
記事: 22
登録日時: 11年前

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#28

投稿記事 by Loki » 11年前

①ランダム数字を一瞬程表示、

コード:

<div id="random" style="font-size:12ex;"></div>
<script type="text/javascript">
function rand=function(minimum,maximum){ /* minimumからmaximumの間で、整数の乱数値を取得 */
	if(!maximum && maximum!=0){
		return Math.floor(Math.random()*(minimum+1));
	}
	else{
		return Math.floor(Math.random()*(maximum+1-minimum)+minimum);
	}
}
document.getElementById('random').innerHTML=rand(100); //乱数の範囲は0~100
setTimeout(function(){
document.getElementById('random').innerHTML='';
},1000);
</script>
②それを入力、正誤を判断、

コード:

<input type="text" id="input">
<input type="button" onclick="if(document.getElementById('input').value==window.random){alert('正');}else{alert('誤');}" value="確認"><br>
<div id="random" style="font-size:12ex;"></div>
<script type="text/javascript">
window.random=rand(100); //乱数の範囲は0~100
function rand=function(minimum,maximum){ /* minimumからmaximumの間で、整数の乱数値を取得 */
	if(!maximum && maximum!=0){
		return Math.floor(Math.random()*(minimum+1));
	}
	else{
		return Math.floor(Math.random()*(maximum+1-minimum)+minimum);
	}
}
document.getElementById('random').innerHTML=random;
setTimeout(function(){
document.getElementById('random').innerHTML='';
},1000); //一秒
</script>
③正解数で表示される数字の数が増し、
?

④問題数と正解数、間違った数をテキストに送信、(→Cookie)
正解数をa,間違った数をbとすると、

コード:

function cookie(name,value,options){
	var cookie,pair,i=0,regexp=/\+/g,hasOwnProperty=Object.prototype.hasOwnProperty;
	switch(value){
	case undefined:	/* read */
		cookie=document.cookie.split(/; ?/);
		i=cookie.length;
		while(i--){
			pair=cookie[i].split('=');
			if(decodeURIComponent(pair[0].replace(regexp,' '))==name){
				return decodeURIComponent(pair[1].replace(regexp,' '));
			}
		}
		return null;
	case null:		/* remove */
		return document.cookie=encodeURIComponent(name)+'=null;expires=Thu, 1 Jan 1970 00:00:00 UTC';
	default:		/* write */
		cookie=encodeURIComponent(name)+'='+encodeURIComponent(value);
		if(options){
			if(hasOwnProperty.call(options,'expires')){
				cookie+=';expires='+new Date((new Date()).getTime()+options.expires).toUTCString();
			}
			if(hasOwnProperty.call(options,'path')){
				cookie+=';path='+options.path;
			}
			if(hasOwnProperty.call(options,'domain')){
			cookie+=';domain='+options.domain;
			}
			if(hasOwnProperty.call(options,'secure') && options.secure===true){
				cookie+=';secure';
			}
		}
		return document.cookie=cookie;
	}
};
//書きこむとき
var option={expires:1000*60*60*24}; //expiresはcookieの期限。単位はミリ秒(1/1000 秒)
// 1000*60=1秒 
// 1秒*60=1分
// 1分*60=1時間
// 1時間*24=1日
cookie('a',a,option); //正解数
cookie('b',b,option); //間違った数

//読み込むとき
a=cookie('a'); //正解数
b=cookie('b'); //間違った数
⑤テキストの中身から成績表などを表示。
上記読み込みを利用。

③の正解数で表示される数字の数が増す
というのは、桁数とか、乱数の範囲が増加するということでしょうか。

アバター
h2so5
副管理人
記事: 2212
登録日時: 13年前
住所: 東京
連絡を取る:

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#29

投稿記事 by h2so5 » 11年前

このコードはJavascriptの文法としておかしいです。
また、引数が一つだけの時に仮引数 minimum の値が最大値として扱われているのが不自然です。

コード:

function rand=function(minimum,maximum){ /* minimumからmaximumの間で、整数の乱数値を取得 */
    if(!maximum && maximum!=0){
        return Math.floor(Math.random()*(minimum+1));
    }
    else{
        return Math.floor(Math.random()*(maximum+1-minimum)+minimum);
    }
}
自分だったらこう書きます。
型チェックをしていないのでそれほど堅牢なコードではないですが、参考までに。

コード:

function rand(arg1, arg2) {
	switch(arguments.length) {
		case 0:
			return Math.random();
		case 1:
			var max = arg1;
			return Math.floor(Math.random() * (max + 1));
		case 2:
			var min = arg1;
			var max = arg2;
			return Math.floor(Math.random() * (max + 1 - min) + min);
		default:
			throw "Too many arguments";
	}
}

Loki
記事: 22
登録日時: 11年前

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#30

投稿記事 by Loki » 11年前

すみません、気付きませんでした。(文法エラー)
JavaScriptでは、常に可読性を無視して速度重視で書いているので、回答する時は気を付けます。
ありがとうございます。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#31

投稿記事 by テマリ » 11年前

皆さんのコード、参考にさせて頂きます。

1~10の名前の箱を10個作り
1=2;
2=3;
...
9=10;
10="今回のデータ";
としたいのですがcookieの使い方がいまいちわからなくてできません。

コード:

<html>
	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=shift_jis">
	</head>
	<title>ファイル書き込み練習用</title>
	<body>
		<script type="text/javascript">
		<!--

		var word2;	//cookieから読み出した文字
		var cook;	//cookieのデータを格納
		var START,END;	//文字切り取りの位置を格納
		var ten2=10;
		var sese = new Array(0,0,0,0,0,0,0,0,0,0,0);

		if(ten2 != 0){
			for(i=0;i<=9;i++){
				if(navigator.cookieEnabled){
					//cookieに文字を書き込む
					sese[i]=sese[i+1];
					document.cookie = i+"="+escape(sese[i])+";";
					document.write("書込文字="+sese[i]+"<br>");
				
					//cookieを読み込む
					cook = document.cookie + ";";
					START= cook.indexOf(i+"=",0);
					END  = cook.indexOf(";",START);
					word2= unescape(cook.substring(START+2,END));
					document.write("読込文字="+word2+"<br>");
				}
				sese[9]=ten2;
				ten2++;
			}
		}
		// -->
		</script>
	</body>
</html>
このコードで上記の事をやるには何が違うのかの助言をお願いします。

テマリ

Re: html、JavaScriptでのテキストファイルへの書き込み読み込み。

#32

投稿記事 by テマリ » 11年前

コード:

<html>
	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=shift_jis">
		<script type="text/javascript" src="fun.js"></script>
	</head>
	<title>瞬間記憶トレーニング</title> 
	<body background="gazo/kabe.jpg">
		<center>
		<table border="0" bgcolor="blue">
			<td>
				<font color="#FFFAFA" face="Amaze" size="6">
					1分間
				<font color="#FFFF00">
					瞬間記憶
				</font>
					トレーニング
				</font>
			</td>
		</table>
		<br>
		<form name="js">
			<input type="text" name="txtb" style="font-size:40px;border-style:groove;border-width:10;" value=""><br><br>
			<input type="text" name="txts" style="font-size:35px;border-style:groove;border-width:5;" value=""><br>
			<input type="button" value="START" onclick="RAN()">
			<input type="button" value="確認" onclick="Sihi()"><br><br>
			<input type="text" name="txtf" style="width:300px;font-size:25px;border-style:groove;border-width:10;border-color:blue;" value="正解0    不正解0"><br><br><br>
			<input type="text" name="txt9" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt8" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt7" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt6" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt5" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt4" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt3" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt2" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
			<input type="text" name="txt1" style="width:300px;font-size:13px;border-style:groobe;border-width:0;border-color:white;" value=""><br>
		</form>
		</center>
	</body>
</html>

コード:

//テキストボックスの文字を操作する
function CLR(){
	document.js.txtb.value="";
}

var kazu,ransu=1000, //乱数関連変数
ten1=0,ten2=0;
//テキストボックスに乱数を表示する
function RAN(){
	kazu = Math.round(Math.random()*ransu);
	document.js.txtb.value= kazu;
	TIME();
}

var Timer1; //タイマーを格納する変数(タイマーID)の宣言

//乱数消去タイマー
function TIME(){
	Timer1=setInterval("CLR()",400);
}

//正不判断+txts操作
function Sihi(){
	var str2=document.js.txts.value;
	if(str2==kazu){
		ten1++;
		document.js.txtf.value="正解"+ten1+"    不正解"+ten2;
	}else{
		ten2++;
		document.js.txtf.value="正解"+ten1+"    不正解"+ten2;
	}
	document.js.txts.value="";
	switch(ten1){
		case 2: ransu=10000; break;
		case 4: ransu=100000; break;
		case 6: ransu=1000000; break;
		case 8: ransu=10000000; break;
		case 10: ransu=100000000; break;
		case 12: ransu=1000000000; break;
		case 14: ransu=10000000000; break;
		case 16:
			document.js.txtf.value="正解"+ten1+"    不正解"+ten2+"クリア";
			Cok();
			ten1=0; ten2=0;
			break;
		default: break;
	}
	switch(ten2){
		case 2:
			document.js.txtf.value="お疲れ様でした。";
			Cok();
			ten1=0; ten2=0;
			break;
		default: break;
	}
}

//cookieの有効期限
var date1,date2;	//日付データを格納する変数
var kigen = 30;		//cookieの期限(30日)
date1 = new Date();	//現在の日付データの取得
date1.setTime(date1.getTime() + kigen*24*60*60*1000); //30日後の日付データ作成
date2 = date1.toGMTString();	//GMT形式に変換して変数date2に格納

var word1;	//cookieから読み出した文字
var cook;	//cookieのデータを格納
var START,END;	//文字切り取りの位置を格納
var sese = new Array();
var ss = new Array("","","","","","","","","","","","","","");

//cookie書き込む関数
function Cok(){
	if(navigator.cookieEnabled){
		//[kap2=]のcookieを読み込み→word1→sese[1]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap2=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[1]=word1

		//cookie書き込み
		document.cookie = "kap1="+escape(sese[1])+";expires"+ date2;

		//[kap3=]のcookieを読み込み→word1→sese[2]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap3=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[2]=word1

		//cookie書き込み
		document.cookie = "kap2="+escape(sese[2])+";expires"+ date2;

		//[kap4=]のcookieを読み込み→word1→sese[3]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap4=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[3]=word1

		//cookie書き込み
		document.cookie = "kap3="+escape(sese[3])+";expires"+ date2;

		//[kap5=]のcookieを読み込み→word1→sese[4]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap5=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[4]=word1

		//cookie書き込み
		document.cookie = "kap4="+escape(sese[4])+";expires"+ date2;

		//[kap6=]のcookieを読み込み→word1→sese[5]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap6=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[5]=word1

		//cookie書き込み
		document.cookie = "kap5="+escape(sese[5])+";expires"+ date2;

		//[kap7=]のcookieを読み込み→word1→sese[6]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap7=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[6]=word1

		//cookie書き込み
		document.cookie = "kap6="+escape(sese[6])+";expires"+ date2;

		//[kap8=]のcookieを読み込み→word1→sese[7]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap8=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[7]=word1

		//cookie書き込み
		document.cookie = "kap7="+escape(sese[7])+";expires"+ date2;

		//[kap9=]のcookieを読み込み→word1→sese[8]の順番に代入
		cook = document.cookie + ";";
		START= cook.indexOf("kap9=",0);
		END  = cook.indexOf(";",START);
		word1= unescape(cook.substring(START+5,END));
		sese[8]=word1

		//cookie書き込み
		document.cookie = "kap8="+escape(sese[8])+";expires"+ date2;

		//sese[9]に最新データ代入
		sese[9]=ten1
		document.cookie = "kap9="+escape(sese[9])+";expires"+ date2;

		//グラフ表示
		for(i=1; i<=sese[9]; i++){
			ss[1]=ss[1]+">";
		}
		document.js.txt9.value=ss[1]+sese[9]+"点<br>";

		for(i=1; i<=sese[8]; i++){
			ss[2]=ss[2]+">";
		}
		document.js.txt8.value=ss[2]+sese[8]+"点<br>";

		for(i=1; i<=sese[7]; i++){
			ss[3]=ss[3]+">";
		}
		document.js.txt7.value=ss[3]+sese[7]+"点<br>";

		for(i=1; i<=sese[6]; i++){
			ss[4]=ss[4]+">";
		}
		document.js.txt6.value=ss[4]+sese[6]+"点<br>";

		for(i=1; i<=sese[5]; i++){
			ss[5]=ss[5]+">";
		}
		document.js.txt5.value=ss[5]+sese[5]+"点<br>";

		for(i=1; i<=sese[4]; i++){
			ss[6]=ss[6]+">";
		}
		document.js.txt4.value=ss[6]+sese[4]+"点<br>";

		for(i=1; i<=sese[3]; i++){
			ss[7]=ss[7]+">";
		}
		document.js.txt3.value=ss[7]+sese[3]+"点<br>";

		for(i=1; i<=sese[2]; i++){
			ss[8]=ss[8]+">";
		}
		document.js.txt2.value=ss[8]+sese[2]+"点<br>";

		for(i=1; i<=sese[1]; i++){
			ss[9]=ss[9]+">";
		}
		document.js.txt1.value=ss[9]+sese[1]+"点<br>";
	}else{
		alert("cookieが使えません")
	}
}
雑で短縮とかできてないですができました。
ありがとうございました。

関係ないですが三陸沖(宮城県)で大きな地震があったので地域の人は海に近づかないでください。

閉鎖

“C言語何でも質問掲示板” へ戻る