- ベストアンサー
プログラムについて
最近、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
- ベストアンサー率61% (153/249)
う〜ん・・・・・・。 これはだなぁ・・・・・・。 いや、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は与えられた「数式を表記した文字列」をそのまま評価可能だ。
関連するQ&A
- dreamweaverCS4でjavascriptを外部ファイル化しましたが、サイト構造が複雑なためうまく外部ファイルとリンクできません
dreamweaverCS4でjavascriptを外部ファイル化しましたが、サイトの構造が複雑なためうまくその外部ファイルとリンクできません。 dreamweaverCS4ではCSSの外部ファイルは自然にリンクコードを作成してくれるのですが、javascriptの外部ファイルはリンクコードを書き換えてくれないようです。全てのファイルとこの外部ファイルを簡単にリンクさせる方法はありませんか？ CSSファイルだとdreamweaverCS4で勝手にCSS外部ファイルとリンクするコードを書いてくれるのですが、javascriptの外部ファイルとは自然にリンクするコードを書いてはくれません。 どうすればよいのでしょうか？
- 締切済み
- JavaScript
- プログラム使用法の簡単化
私は大学院生で，C言語のあるプログラムを作りました． 内容は，ファイルで数値データを読み込んで，計算結果を標準出力として ＞out などでファイルに書き出すというものです．このプログラムは，使用するには勿論，LINUX（正確にはWINDOWS上でcygwinを使っている）でコマンド操作をして動かしますが，この操作をもっと簡単にしたいんです． たとえば，Webブラウザの画面などで，データ入力画面をつくり，ボタンを押すと，データを読み込んで，私が作ったCプログラムに渡して計算させ，結果をWebブラウザの別画面で出してくるといった連携ができないでしょうか． プログラミング自体はいいとして，こういうアプリケーションは知らないんですよね．．．何かいいツールを知りませんか．
- ベストアンサー
- その他（プログラミング・開発）
- javascript:void(0);について
初めまして。 別の人が作ったコードについて編集してアップして 動作確認をしていたら、リンクがクリックできず 開発者ツール等で確認するとリンクに「javascript:void(0);」が付いていました。 私が編集していたファイルにjavascript:void(0);を設定した覚えもなく、 ファイル内のリンク先も全て、特定のファイル名を指定しています。 下記がリンクの実際のコードです。 <a href="__CLink__" class="links"__IfOnClick__ onclick="window.opener.location.href='__CAction__';window.close();"__IfOnClick__> __CLink__や__CAction__部分は、元々入っていて 私が編集する前にはちゃんと動作（リンクが押せた）していました。 私が編集したファイルは上記の記述が書かれているファイルではなく 別ファイルになります。 上記踏まえ質問です。 【javascript:void(0);】と記述しなくても、別の何かで【javascript:void(0);】と 設定されてしまうことはありますか？ 無知で申し訳ないのですが、ご教示頂けると助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- WordPress入門者です
よろしくお願いします。 社内SEをしております。 前職までサーバやネットワークを担当したもので、 サイト作成などは経験がありません。 今後「WordPress」というツールで、 会社のHPメンテナンスを担当します。 このツールを担当するにあたり、以下の言語を習得が望ましい、 など前提（推奨）条件はあるのでしょうか？。 ・PHP ・JavaScript ・CSS ・HTML5 自身としてはJavaやVBなどプログラミング自体は 開発経験があります。 みなさまのご経験より、学習方法など アドバイスを頂けると助かります。
- ベストアンサー
- CSS
- 画像拡大機能のjsをスマホで読み込まない
ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- CSS, Javascript読み込めない
Windows10のノートパソコンを使用しています。各ブラウザの設定は初期設定のままです。 ローカル(PC内)でHTMLファイルにCSSファイル1つとJavascriptファイル1つを読み込ませ、Google Chrome, Microsoft Edge, Internet Explorerで開いたのですが、どのブラウザでもCSSもJavascriptも認識されていません。 ファイル名とそのパスやソースコードを確認しましたが、記述に間違いはありません。htmlファイルと同じ階層にCSSファイルとJavascriptファイルを入れています。 Google Chromeの検証機能で確認するとCSSとJavascriptのファイルが見つかりませんとなっています。 ネットで調べましたが原因は不明です。以上のことから、CSS、Javascriptが読み込めない原因として考えられることを教えて下さい。
- ベストアンサー
- HTML
- CSSやJavaScriptの構文チェッカを探しています。（HTML-lintのような）
CSSやJavaScriptの構文チェッカを探しています。（HTML-lintのような） 今作っているウェブアプリが、FireFox2.0だとなんとか正常に表示されるものの、 IE7だとレイアウトや挙動が不自然です。 CSSとJavaScriptを連携してつかっています。 そこで、CSSやJavaScript用に、HTML-lintのような構文チェッカが、あればな・・・と思っています。 どなたかご存じの方いらっしゃったら、お教えくださいませ。
- ベストアンサー
- HTML
- cssの今、一番旬なブラウザごとに違うcssをかける方法
現在４つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。 ４つのブラウザとは（opera ie6 ie7 firefox）です。 そこで、現在、ie6だけで生じる表示崩れがあり、 そのcssの解決方法も発見したのですが、 それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。 読み込んでいるのは、一つの外部cssファイル、main.cssです。 現在考えられる解決方法としては、 １．ie6だけにcssを掛けるハック？ この場合、どのようにハックをかければいいのでしょうか。 色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。 具体的なcssコードは、以下です。 #pull a:hover{ display:block; /*以下ie6だけに指示したい命令 現状コメントアウトしています*/ /*margin-bottom:-20px;*/ } ２.ie6だけ別の外部cssファイルを読み込ませる。 ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。 （javascriptで判別するのでしょうか？） ie6 なら、main_ie6.cssを読み込み、 それ以外のブラウザなら main.cssを読み込ませる 一番ベストな方法を教えていただければと思います。
- ベストアンサー
- HTML
- javascriptの学習方法等について
初めて質問させて頂きます。 今僕は、javascriptを習得しようといろんな技術書(PerfectJavascript , javascriptの教科書)や、ドットインストール等を見て学んでいる(毎日1時間程度)のですが、いつまでたっても自分自身で作りたいものが思うように作ることができません…(ゲーム等、いろいろと自分で作ってみたいと思っています。) 僕の今までの学習方法としては、codeを見てその解説を読み、自分でもそのコードを打ってみるということをしています(当然ですが、HTMLとCSSに関しては大丈夫です。) まだ、技術書も全てを網羅したわけではないのですが、今月で大体学び始めてから3ヶ月ほど経過しています。ちなみに僕はプログラミングというものに出会ったこと自体が最近で、javascriptは独学です。 javascriptや、その他プログラミング言語を使っている方にお聞きしたいのですが、自分の作りたいと思う物を作れるようになるまでには、一体どれほどの時間がかかったのでしょうか？ また、僕は今の方法を続けていればいつかjavascriptを自在に使いこなし、作りたいと思うものを好きなように作れるようになるのでしょうか？
- ベストアンサー
- JavaScript
- Pythonについて
Pythonはスマホのメモ帳などでもできるの ですか？ htmlやcssは、メモ帳(テキストファイル)を ファイルに保存して拡張子を.htmlにすれば 機能するのですが、Pythonではできるの でしょうか？ また、変数など、どのようにしてPythonと htmlを連携？すれば良いのでしょうか？
- 締切済み
- Python
