- ベストアンサー
プログラムについて
最近、htmlやcssを使いこなせるように なってきました。 計算ツール系を作ろうと思い、他の javascriptなどを学習し始めました。 しかし、なかなか動作しません。 スマホ(iPhone SE3)でも、javascriptは 動作しますか？ 動作するのであれば、どうやって、htmlと javascriptと連携すれば良いのでしょうか。 ・別ファイルで連携する方法 ・1つのファイルで収める方法 どちらかでもわかる方がいたら、 教えてください！ できればのいいのですが、⬜︎+⬜︎=⬜︎ になるように、コードを作ってください。 わかる方がいたら教えてください
- junko（@oKjunko9240）
- お礼率40% (20/50)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
スマホでもjavascriptは動作します。 htmlとjavascriptとの連携については、１つのファイルで収める方法として、簡易計算ツールを下記の通り作成してみました。 （※すでに回答頂いている解説はもっともですが、自由な発想という着眼点で少しでも参考になればと思います。また念のためですがUTF-8で作成しています） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <style> form[name="calculate"] { border:1px solid rgba(0,0,0,.5); border-radius:5px; background-color: #ddd; width:160px; padding:5px; input { font-family:monospace, serif; font-size:14px; box-sizing:border-box; height:30px; margin:5px; &[name="display"] { width:150px; text-align:right; } &[type="button"] {width:30px;} } } </style> <script defer> var inputAry = ["0"]; function doCalc(srcAry) { var ary = Array.from(srcAry); if (srcAry.length == 1) return ary; //×、÷の計算 for (var i=1; i<ary.length; i+=2) { switch (ary[i]) { case '×':ary[i-1] = String(Number(ary[i-1]) * Number(ary[i+1])); ary.splice(i, 2); i = -1; break; case '÷':ary[i-1] = String(Number(ary[i-1]) / Number(ary[i+1])); ary.splice(i, 2); i = -1; break; } } //＋、－の計算 for (var i=1; i<ary.length; i+=2) { switch (ary[i]) { case '＋':ary[i-1] = String(Number(ary[i-1]) + Number(ary[i+1])); ary.splice(i, 2); i = -1; break; case '－':ary[i-1] = String(Number(ary[i-1]) - Number(ary[i+1])); ary.splice(i, 2); i = -1; break; } } return ary; } function doInput(elm) { switch (elm.value) { case 'Ｃ':inputAry = ["0"]; break; case '＝':inputAry = doCalc(inputAry); break; default: if (isNaN(elm.value) != isNaN(inputAry[inputAry.length-1])) inputAry.push(elm.value); else inputAry[inputAry.length-1] = (isNaN(elm.value) || inputAry[inputAry.length-1] == '0') ? elm.value : inputAry[inputAry.length-1] + elm.value; break; } calculate.display.value = inputAry.join(''); } </script> </head> <body> <form name="calculate"> <input type="text" name="display" value="0" readonly> <script> var buttons = ["7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "－", "0", "Ｃ", "＝", "＋"]; buttons.forEach((v) => {calculate.innerHTML += '<input type="button" value="' + v + '" onclick="doInput(this);">';}); </script> </form> </body> </html>
その他の回答 (1)
- cametan_42
- ベストアンサー率62% (162/261)
う〜ん・・・・・・。 これはだなぁ・・・・・・。 いや、junkoさんの発想が「悪い」ってワケじゃない。 実際「計算ツール系」、プログラミング初心者が「電卓」みたいなプログラムを書きたい、って思うって事は良くあるんだ。 そういう質問を見かけた事は何度もある。 多分本人的には「プログラミング言語で計算が出来るなら、電卓なんか簡単にプログラミング出来る筈だわ!」とか思うんだろう。 「発想」はいい。いや、マジで褒めてるんだよ。「自分で課題を設定」して「自分で解いてみよう」と思うその姿勢。それは素晴らしい事なんだ。 ただし、だ。実は電卓作るのって難しいんだよ(笑)。 「だからこそ」実の事を言うと「電卓プログラム」ってのは、初心者用教材として取り上げられないんだ(笑)。 ええとね、実は「計算ツール作成」ってのは一通りプログラミング言語を一つ学んで、データ構造とその解析方法を学んで、スタックマシン、って言う「仮想機械の概念」を知らないとプログラミング出来ないんだ。 もう一度列挙してみよう。 1. 入力された「文字列」を字句解析する: 文字列をバラバラに(トークン単位、と言う)分解する。 -> 例えば"1 + 1"と言う文字列を"1"、 "+"、 "1"と言うカンジで切り分ける。 字句解析: https://ja.wikipedia.org/wiki/%E5%AD%97%E5%8F%A5%E8%A7%A3%E6%9E%90 2. 字句解析されたトークンを設定した「電卓の内部構造」に従って「構文解析」する。 例えば良くあるパターンだと"1"、 "+"、 "1"と言う「並び」を"1"、 "1"、 "+"に並べ替える。 => スタックマシン(電卓の内部構造)が要求する「語順」に変える。 構文解析: https://ja.wikipedia.org/wiki/%E6%A7%8B%E6%96%87%E8%A7%A3%E6%9E%90 3. (このパターンだと)、数値"1"、"1"をスタックに積み、演算子"+"がやってきた際に「評価」する。 スタック、ってのは「メモリの使い方」の一つで、プログラミング言語上では配列やらリストで実装するんだけど、いずれにせよ、まずは「数値」を積んで、演算子が来た時にスタックから数値を取り出して演算を実行するモデルが有名。こういうのを「スタックマシン」と言う(また、ここで「1 + 2 × 3」なんかの+、×の演算の優先順位をどう解釈するか、と言う問題を解決するが、これには別に「コールスタック」と言うモノを用意しないとならない)。 スタックマシン: https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%83%9E%E3%82%B7%E3%83%B3 いずれにせよ、「電卓」を実装するには「スタックマシン」の知識が欠かせないんだ。 4. 結果を出力する。 まず「単純には」こういう流れがあるんだ。 そしてスタックマシンはさておき、上の流れをもっと単純化すると、 ・電卓内部では1 + 1は1 1 + と言う語順の「式」として解釈される。 と言うのが殆ど、なんだ。これは基本、物理的ハードウェアとしての「電卓」でも大体そういう構造になっている。 1 1 + ってヘンな表現なんだけど、これを後置記法、あるいは逆ポーランド記法と呼ぶ。 逆ポーランド記法: https://ja.wikipedia.org/wiki/%E9%80%86%E3%83%9D%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89%E8%A8%98%E6%B3%95 つまり、テクニカルな意味に於いて、「字句解析」「構文解析」そして「逆ポーランド記法を基とした評価器」を作らなアカンのだ。 果たして、「プログラミングを始めたばっか」の人がこれ全部をやってのける、ってのは・・・まぁ難しいよね。 もちろん抜け道もある。ただし「危険」だ。 JavaScriptはHTML/CSSとブラウザのAPIを介してやり取りをする。 で、JavaScript側のコードは次の関数を使えば貴女が当初考えたような「計算ツール」にはなるだろう。 eval(): https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval 上の説明に書いてる通り、だ。 > 警告: 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。eval() を使用すると、悪意のある者が任意のコードを実行することがあまりにも簡単になります。下記の eval() を使わないでください!を参照してください。 つまり、ローカル(貴女のPC上でだけ)で試してみる分には構わないけど、決してWebサイトとして公開しちゃダメだよ(笑)。電卓どころじゃなく、「悪意のある命令を含んだ文字列」でさえ実行されてしまう可能性があるんだ。 eval関数(evaluate = 評価)、ってのは言っちゃえばJavaScriptの「本体」だ。あらゆるJavaScript上の「機能」はこのeval関数を介して実行される。 要は「入力された文字列」に関して「実行出来る」と言う恐ろしい関数なんだ。 ただ、あくまでプログラミング初心者が、ローカル環境に於いてのみ、「せっかく思いついたアイディア」を実験してみる分には、使ってみるのも悪くない、とは思う。1行で済むしな(笑)。 じゃなければ、取り敢えずプログラミング言語を学んで、データ構造作成とその扱い方を学んでから改めて取り組んだ方がいいと思うよ。 写真: 見たら分かるけど、JavaScriptの万能評価関数evalは与えられた「数式を表記した文字列」をそのまま評価可能だ。
