Javascriptを使ったタイピングができるwebページについてですが、下記のソースコードでは、表示されるワードを配列としてあつかっていますが、これをMySQLのデータベースに入れて、そこから取り出したいのですが、どのようにすればよいのかがわかりません。よい方法がありましたら教えてください。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script>
// ★ワード ↓
var wordList = [
"Alfa", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India",
"Juliett", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo",
"Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"
];
// 時間制限
var timeLimit = 30;
var timer1;
var wordStr;
var wordChars;
var charIndex;
var messageArea;
var wordArea;
var typeArea;
var score;
var timeLeft;
window.onload = function (){
messageArea = document.getElementById("message");
wordArea = document.getElementById("word");
typeArea = document.getElementById("type");
startButton = document.getElementById("start-button");
}
// 3秒後に開始
function onStartButtonClick(){
messageArea.textContent = "Ready?";
setTimeout("startTyping()", 3000);
}
// 開始
function startTyping(){
score = 0;
timeLeft = timeLimit;
nextWord();
countDown();
timer1 = setInterval("countDown()", 1000);
startButton.disabled = true;
}
// 終了
function stopTyping(){
clearInterval(timer1);
wordChars = [];
messageArea.textContent = "Score: " + score;
wordArea.textContent = "";
typeArea.textContent = "";
startButton.disabled = false;
}
// 次の単語を表示
function nextWord(){
charIndex = 0;
var random = Math.floor( Math.random() * wordList.length );
wordArea.textContent = wordList[random];
typeArea.textContent = "";
wordChars = wordList[random].toUpperCase().split('');
}
// 残り時間を計測
function countDown(){
if(timeLeft <= 0) {
stopTyping();
return;
}
messageArea.textContent = timeLeft + " sec.";
timeLeft--;
}
// キー押下時の処理
document.onkeydown = function (e){
var keyStr;
if(e.keyCode == 189){
keyStr = "-";
} else {
keyStr = String.fromCharCode(e.keyCode);
}
if(wordChars[charIndex] == keyStr){
charIndex++;
typeArea.textContent = typeArea.textContent + keyStr;
if(charIndex== wordChars.length){
score++;
nextWord();
}
}
};
</script>
</head>
<body>
<form><p><input type="button" id="start-button" value="Start" onClick="onStartButtonClick()">
<span id="message">Press Start</span></p></form>
<hr>
<div style="font-weight: bold;" id="word"></div>
<div id="type"></div>
</body>
</html>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
一般の Web ページの場合は、JavaScript から MySQL への接続は不可能です。
Windows 8 の ストアアプリでの提供でも、無理っぽいです。
Windows の HTML Application 形式で配布するなら、ADODB 経由の手段がありますが現実的ではありません。
クライアント側に Node.js or Rhino を入れて実行させるなら楽勝ですが、HTML5 の範疇ではないですね。
というわけで代替案
* 定期的にバッチ実行で MySQL を叩いた結果をテキスト保存し、JSONP で読み取り
* Web サーバー側で MySQL を叩く Servlet or CGI or スクリプト を用意し、AJAX 呼び出し
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
JavaScriptで決まった「時刻」...
-
jqGridについて
-
C#OpenCv V4にのエラーに関する...
-
ローカルにあるファイルを検索...
-
C# 演算 奇数と偶数 表現の仕方
-
VSCODE[Python]の設定について
-
ASP.NETのコントロールの値をJa...
-
1日1回だけ引けるjavascriptお...
-
イベントが初めの一回しか起き...
-
1日1回だけ引けるjavascriptお...
-
C# 演算 分岐処理 繰り返し処理
-
イラストレーターでドキュメン...
-
シンプルなweb版スタンプラリー...
-
チェックボックスのチェック保持
-
javascriptでテーブルに追加し...
-
【javascript】正規表現で括弧...
-
gas スプレッドシートがアクテ...
-
なぜmatchメソッドがエラーにな...
-
カンマで終わってるのはセミコ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報