JavaScript

全16052件中41～60件表示
  • Chart.js　ラベルを１段で表示させるには？

    Chart.jsを使用してドーナツグラフを表示させています。 現状は、ラベルの四角形が長いために２段になってしまっています。 これを１段で表示させるために、 ラベルの色の付いた四角形の横幅を変更（設定）したいです。 コード中の optionなどで設定できますか？ <style> .container { padding: 30px; width: 300px; height: 200px; border: solid 1px gray; } </style> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1"></script> <canvas id="sushi_circle" class="container"></canvas> [code] <script> const context = document.querySelector("#sushi_circle").getContext('2d'); new Chart(context, { type: 'doughnut', data: { labels: ["サーモン", "ハマチ", "マグロ", "サバ", "イカ"], datasets: [{ data: [60, 20, 15, 10, 5], backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#E7E9ED"], borderColor: "#ffffff", borderWidth: 2 }] }, options: { responsive: false } }); </script>

  • JS iframe要素の読込データでグラフ表示

    JS iframe要素に読み込んだデータでグラフ表示したい JavaScript iframe要素にデータを書いたテキストファイルを読み込んで グラフを描くことができますか？ 例えば、ある同行会のイベント企画のデータ。 題目 希望アンケートの集計結果 (この場合のセパレーターは半角空白) 食べ歩き 20人 バーベキュー 15人 映画鑑賞 10人 卓球大会 5人 -------------- [html] <iframe src="sample.txt" width="400" height="100"></iframe> <div class="container"> <canvas id="canvas1"></canvas> </div> [仕様] ・ローカル環境であること ・ファイルリーダーは使わない ・JavaScriptのコードを用いて実現させること ・テキストファイルの先頭行がグラフタイトルで、それ以降がデータ ・グラフ化は、Chart.js などのプラグインを使用してもよい 以上から、 iframe要素に読み込んだデータでグラフ表示ができますか？ （※グラフは添付画像のように）

  • JS Object要素に読み込んだデータを配列に

    JavaScript Object要素に読み込んだデータを配列変数に格納したい [html] <object data="sample.txt" type="text/plain" width="300" height="100"></object> [sample.txtの内容] United States, アメリカ China, 中国 Germany, ドイツ Japan, 日本 [JavaScript] // 配列に読み込まれたデータ const data = [ ["United States", "アメリカ"], ["China", "中国"], ["Germany", "ドイツ"], ["Japan", "日本"] ]; [仕様] ・ローカル環境であること ・jQueryなどのプラグインは不使用 ・ファイルリーダーは使わない ・JavaScriptのコードを用いて実現させること 以上から、 Object要素に読み込んだデータを配列変数に格納できますか？

  • jspのif文にて、特殊文字含む文字列が一致しない

    jspのif文にて、特殊文字を含む文字列が一致しません。 c:if文にて、特殊文字を含む文字列一致判定をする方法を教えていただきたいです。 以下のコードを試しましたが一致しませんでした。ダブルクォーテーションを除去すると、一致しました。（javaからは\"、jspからは&quot;を除去） javaコード ------------------------------------------ modelAndView.addObject("key", "\"0000000000\""); ------------------------------------------ jspコード ------------------------------------------ <c:if test="${key == &quot;0000000000&quot;}"> <b>一致しました</b> </c:if> <c:if test="${key == '&quot;0000000000&quot;'}"> <b>一致しました</b> </c:if> ------------------------------------------

    • mirumen
    • 回答数1
  • iPhoneのsafariにて読込出来ない

    iPhoneの一部のアプリのURLコピーにて読込出来ないものがある。 IE、Android、iPhoneのクリップボード読込可能ですが、iPhoneの一部のアプリのURLコピーが読込出来ない。どうすれば良いでしょうか？ <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" charset="utf-8"> </head> <body> <button type="button" id="btn">Read</button> <script type="text/javascript"> document.getElementById('btn').addEventListener('click', async () => { const text = await navigator.clipboard.readText(); alert(text); }); </script> </body> </html>

  • node-qrcodeのQRコードを画像で取得

    以前QRcode.jsで出力したQRコードを画像で取得する方法を教えてもらいましたが・・https://okwave.jp/qa/q100 今回は下記のようなnode-qrcodeを使った場合どうすれば出来るかお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { let info = "ひらがなQRサンプル" ; const options = { width: 128, height: 128, color: { dark: "#000000", // QRコードの自体 light: "#ffffff", // QRコードの背景 }, }; QRCode.toDataURL(info, options) .then((url) => { document.getElementById("qrcode").src = url; }) .catch((err) => { console.error(err); }); }); </script> </head> <body> <img id="qrcode" alt="QRコード" /> </body> </html> 前回のように 「QRコードを生成しているスクリプトの後ろに var canv = document.getElementsByTagName("canvas"); var image = canv[0].toDataURL("image/jpeg", 0.75 ); と書き足せば image 変数の中にJPEGデータが生成されます。」 では駄目でした。 よろしくお願いいたします。

    • turu575
    • 回答数1
  • 外部ウェブサイトの最終更新日時の自動確認方法

    javascript で、指定されたアドレスのウェブサイトの 最終更新日を取得する方法が分かりません。 Document.lastModified を自分のページ内部で用いるのではなく 外部のページ変更確認方法として コードを作成したいのですが 方法が分かりません。 --- 指定先のURLのページ内容が変更されたかどうかを知りたい場合は、 XMLHttpRequest() API について読め --- という説明がありましたが いったい、どんなコードを書けば良いのか見当もつきません。 ご指導のほどよろしくお願いします。

    • o45t92
    • 回答数2
  • javascript 初心者

    https://paiza.jp/works/mondai/data_structure/data_structure__set_boss この問題で以下のコードで試したのですが、大きな数字だと正しい結果が出ません。なぜなのでしょうか。有識者の方教えてください。 （汚いコードでごめんなさい） let n=lines[0]; let a=lines[1].split(" "); let b=lines[2].split(" "); let c=a.concat(b); const arrayB = Array.from(new Set(c)); const sort = arrayB.sort((a,b) => (a < b ? -1 : 1)) const answer=sort.join(" "); console.log(answer);

  • 『オブジェクト化』の実装例が　よく分からない

    『オブジェクト化』の実装例が　よく分からない 保守性を高めるために オブジェクト化を進めることが大切なのは 雰囲気的に分かります。 ところが、実際に何をすればよいか、という段階になると 具体策が見えてきません。 以前に、下記の回答が出されていましたが 意味が良く分からないで困っています。 ＝＝＝＝＝＝＝＝＝＝　過去の回答　＝＝＝＝＝＝＝＝ http://okwave.jp/qa/q8601972.html ・マジックナンバー、マジックストリングを排除する オブジェクト内に定数プロパティとしてまとめ ・処理のメソッド化 「変数・定数をすべて１つのオブジェクトにまとめる」 「処理はオブジェクトのメソッドにまとめる」 更に、定義したオブジェクト類は別ファイルに切り離し、 そのスクリプトファイルをロードするようにすれば、 ページデザインと処理（ビジネスロジック）も切り離し別々に管理できます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ これより分かりやすい実例を教えていただけますでしょうか。 ありがとうございます。

    • o45t92
    • 回答数1
  • GoogleSitesでユーザーID参照

    現在GoogleSitesでログイン機能を実装しています。 どうやらGoogleSitesではJavaScriptの機能の一部が制限されているようで、ページ遷移やローカルデータのやりとりが難しいようです。 今はlocalStorageでIDを管理し、同一ページ内でID情報の保管ができています。これを別ページに移動しても消えないようにしたいです。 異なるページ間でIDを共有できるのであれば他の機能でも大丈夫です。

  • プログラムについて

    最近、htmlやcssを使いこなせるように なってきました。 計算ツール系を作ろうと思い、他の javascriptなどを学習し始めました。 しかし、なかなか動作しません。 スマホ(iPhone SE3)でも、javascriptは 動作しますか？ 動作するのであれば、どうやって、htmlと javascriptと連携すれば良いのでしょうか。 ・別ファイルで連携する方法 ・1つのファイルで収める方法 どちらかでもわかる方がいたら、 教えてください！ できればのいいのですが、⬜︎+⬜︎=⬜︎ になるように、コードを作ってください。 わかる方がいたら教えてください

    • junko
    • 回答数2
  • Mapから特定のキーの情報を取得したい

    MapからforEachを使用してkeyとvalueを取得する際、下記のように記述すると思います。この時、forEachを使用してtestMapからkeyArrayに一致するkeyの情報だけ取得することはできますでしょうか？ keyArray: number[] = [1, 2, 3]; testMap.forEach((value, key) => { });

    • unko347
    • 回答数1
  • 出発駅A、到着駅Bを選択すると、距離と運賃が返る

    出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。 具体的には{ name:["A", "B"], distance: 1.5,between:1}に対して、{ between:1,fare:170 }と返るようにしたいです。 実装方法がわからないです。 また、これらをifで分岐させたいです。どうしたらいいのでしょうか。 <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> /** * distance : 区間距離(km) * name : 区間名 * price : 区間における乗車運賃 */ const price_table = [ { distance: 0, name: '見送り', price: { normal: 120, child: 60 } }, { distance: 3, name: '１区間', price: { normal: 150, child: 80 } }, ]; /** * name: '駅名' * distance: 次の駅までの距離 */ const stations = [ { name: 'A', distance: 1.5 }, { name: 'B', distance: 1.5 }, ]; </script> <script> $(function () { $(document).on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); // 何番目の駅かを探す let from_idx = stations.findIndex(station => station.name == f); let to_idx = stations.findIndex(station => station.name == t); // from, to が昇順になるようにする。 let from_to = [from_idx, to_idx].sort(); // どちらかが未入力の場合、もしくは駅名が見つからない場合は処理を受け付けないようにする。 if (from_to[0] < 0) { return; } // 駅間の距離を加算する。 let d = 0; for (let i = from_to[0]; i < from_to[1]; i++) { d += stations[i].distance; } // 距離の合計値による料金テーブルを探す const period = price_table.find(price => d <= price.distance); $('span[name=distance]').html(d); $('span[name=kukan]').html(period.name); $('span[name=price]').html(period.price.normal); }); }); </script> </head> <body> <div> 出発駅: <select name="from"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div> 到着駅略 </div> 距離：<span name="distance"></span>km<br /> 区間：<span name="kukan"></span><br /> 料金：<span name="price"></span>円 </body> </html> jsのプログラムサイトをいろいろ調べてみましたが、グッとくるものはなかったです。

  • 出発駅A、到着駅Bを選択すると、120円と返る

    出発駅A、到着駅Bを選択すると、120円と返るプログラムを作りたいのですが、 以前、AとBを選択すると、2.3kmと判断し、そこから120円とするのは、プログラム的にも、可読性を下げることがわかりました。 で、今回は、AとBを選択すれば、もうその時点で2.3㎞という値が付与されるプログラムを作りたいです。 ちなみにjqueryを使っています。 これもわけがあり、プログラムが簡便で済むからです。 お願いです。jsを省略せずにお願いします。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> </script> <script> var list = (list ?? []).concat([ { "stations": ["A", "B"], destination: 1.5, price_nomal_adult: 100 }, { "stations": ["A", "C"], destination: 1.5, price_nomal_adult: 150 }, { "stations": ["A", "D"], destination: 1.5, price_nomal_adult: 200 }, ]); </script> <script> var list = (list ?? []).concat([ { "stations": ["B", "C"], destination: 1.5, price_nomal_adult: 100 }, { "stations": ["B", "D"], destination: 1.5, price_nomal_adult: 170 }, { "stations": ["C", "D"], destination: 1.5, price_nomal_adult: 100 }, ]); </script> <script> $(function () { $(document).on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.departure ?? null; $('[name=departure]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.arrival ?? null; $('[name=arrival]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.destination ?? null; $('[name=destination]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.price_nomal_adult ?? null; $('[name=price_nomal_adult]').val(p); }); }); </script> <script> </script> 出発駅:<select name="from"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select><br> 到着駅:<select name="to"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select><br> <span id="span11"></span> <br />～ <br /><span id="span51"></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('*[name="from"]').change(function() { // value値を取得 const str11 = $('*[name="from"]').val(); $("#span11").text(str11); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('*[name="to"]').change(function() { // value値を取得 const str51 = $('*[name="to"]').val(); $("#span51").text(str51); }); </script> <br /> destination:<input name="destination"><br /> price_nomal_adult:<input name="price_nomal_adult">

  • CORSに引っかかってしまいます。

    post送信側のスクリプト javascript:(function(){ var data = { field1: 'value1', field2: 'value2', field3: 'value3' }; var xhr = new XMLHttpRequest(); xhr.open("POST", "スクリプトのurl", true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify(data)); })(); gas側のスクリプト // スクリプトのトリガーを設定する場合は、必要に応じてトリガーを追加することもできます。 function doPost(e) { var sheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID').getActiveSheet(); var data = JSON.parse(e.postData.contents); // データをスプレッドシートに書き込む sheet.appendRow([data.field1, data.field2, data.field3]); // 必要なフィールドに合わせて変更 return ContentService.createTextOutput('Success').setMimeType(ContentService.MimeType.TEXT); } スプレッドシートに書き込みたいのですがhttps://script.google.com/以外から実行すると書き込めません。どうすれば外部サイトから書き込めるでしょうか？

  • GoogleSitesで会員ページ・マイページ

    GoogleSitesでマイページ等の機能を実装したいです。 具体的には ・新規登録ページ→スプレッドシートにIDとパスワード記録 ・ログインページ→スプレッドシートのデータと参照、マイページにページ遷移 ・マイページ→別のスプレッドシートから自分のIDで投稿したデータを表示させる。 上記の３つを実装したいです。 新規登録は完成、ログインページも半分までできましたが、ページ遷移ができず、遷移先にURLパラメーターを渡すこともできませんでした。（パラメータを取得できればスプレッドシートから投稿データを表示させることはできると思います。） 解決したいことはページ遷移と遷移先にデータを渡す。この二つになります。 location.href等もGoogleのセキュリティ関係でnullしか返してくれなかったりします。

  • jsで別のサイトに情報を送信する

    botが完成したのでbotのログを別サイトに送信したいのですがどうすれば良いのかわかりません。 やり方、解説してくれる方がいたらよろしくお願いします。

  • JS 円の中心座標を取得するには？

    JavaScript 円の中心座標を取得するには？ 横400ｐｘ、縦３00ｐｘの画像に１つの円が描かれています。 この円の座標は不明です。 この時、円の中心座標を取得するには どのようなコードになりますか？

  • JavascriptによるURL取得

    Youtubeで、指定した語句を自動で検索し、指定したチャンネルの最も上位に表示された動画のURLを取得するには、どうしたらよいのでしょうか？

  • 埋め込み式では成功できたのに外部読み込み式ではなぜ

    次のプログラムを外部読み込み式にしましたが、うまくいきません。 埋め込み式でしたらうまくいったのに…。 ↓javascript (function () { const form = document.semboku_f; //フォーム要素 form.onchange = function () { //インデックスを取得 const i21 = form.semboku_q1.selectedIndex; const i22 = form.semboku_q2.selectedIndex; //禁止条件 if (i21 == 0 || i22 == 0) { return false; } //テキストを取得 const text21 = form.semboku_q1.options[i21].text; const text22 = form.semboku_q2.options[i22].text; let str = text21 + " から " + text22 + " まで"; form.result11.value = str; if (i21 == i22) { str = "異なる記号を選んでください"; } else if ((semboku_f.semboku_q1.value == "中百舌鳥" && semboku_f.semboku_q2.value == "深井") || (semboku_f.semboku_q1.value == "深井" && semboku_f.semboku_q2.value == "中百舌鳥")) { str = "3.7km"; } else if ((semboku_f.semboku_q1.value == "中百舌鳥" && semboku_f.semboku_q2.value == "泉ケ丘") || (semboku_f.semboku_q1.value == "泉ケ丘" && semboku_f.semboku_q2.value == "中百舌鳥")) { str = "7.8㎞"; } form.result21.value = str; //結果を表示 }; })(); ↓html <script src="泉北 20220801 Mon\jsファイル 20220801 Mon\距離 20231219 Wed.js"></script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select>0 です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select></select>0 です。<p> <input id="result11" type="text11" value="" size="30"> <input id="result21" type="text21" value="" size="30"> <input type="reset" value="リセット"></p> <input type="button" name="b1" value="運賃検索" onclick="semboku_kotae()"> <p></input> <table border="1"> <input name=semboku_tokuten id="semboku_tokuten_2" size="6" type="hidden">km</input></th></tr> </table>00 <!--HTMLここまで--> <!--問題--> <hr /> <hr /> <hr /> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

カテゴリ