JavaScript

全16007件中1～20件表示

  • 報酬付き

    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データが生成されます。」 では駄目でした。 よろしくお願いいたします。

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

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

  • 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 ・マジックナンバー、マジックストリングを排除する オブジェクト内に定数プロパティとしてまとめ ・処理のメソッド化 「変数・定数をすべて１つのオブジェクトにまとめる」 「処理はオブジェクトのメソッドにまとめる」 更に、定義したオブジェクト類は別ファイルに切り離し、 そのスクリプトファイルをロードするようにすれば、 ページデザインと処理（ビジネスロジック）も切り離し別々に管理できます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ これより分かりやすい実例を教えていただけますでしょうか。 ありがとうございます。

  • GoogleSitesでユーザーID参照

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

  • プログラムについて

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

  • Mapから特定のキーの情報を取得したい

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

  • 出発駅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>

  • javascriptの{}の表現は2つ可か不可か？

    <!--HTMLここまで--> <!--問題--> <br> <hr> <br> <!--阪和線--> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。<p> <script> function fare_kotae() { fare_ten=0 if((fare_f.fare_q1.value == "中百舌鳥"&&fare_f.fare_q2.value == "深井")||(fare_f.fare_q1.value == "深井"&&fare_f.fare_q2.value == "中百舌鳥")) {fare_f.fare_q1.style.backgroundColor="aqua ";fare_ten = fare_ten + 3.7} else if((fare_f.fare_q1.value == "中百舌鳥"&&fare_f.fare_q2.value == "泉ケ丘")||(fare_f.fare_q1.value == "泉ケ丘"&&fare_f.fare_q2.value == "中百舌鳥")) {fare_f.fare_q1.style.backgroundColor="aqua ";fare_ten = fare_ten + 7.8} else fare_f.fare_q1.style.backgroundColor="red" fare_f.fare_tokuten.value=fare_ten if((fare_f.fare_tokuten.value=3)&&((fare_f.fare_q1.value == "中百舌鳥"&&fare_f.fare_q2.value == "深井")||(fare_f.fare_q1.value == "深井"&&fare_f.fare_q2.value == "中百舌鳥"))) {fare_f.fare_futsu_otona.value = Number("1000")} else if((fare_f.fare_tokuten.value=78)&&((fare_f.fare_q1.value == "中百舌鳥"&&fare_f.fare_q2.value == "泉ケ丘")||(fare_f.fare_q1.value == "泉ケ丘"&&fare_f.fare_q2.value == "中百舌鳥"))) {fare_f.fare_futsu_otona.value = Number("3000")} </script> とあるとき、 {fare_f.fare_futsu_otona.value = Number("1000")}は、1つしか並べませんか。 これができなくてすごく困っています。 詳細なjavascript分を省略せずにお書きください。

  • WordPressの質問（q10197680）の続

    DOM-based XSS に関するコードについて考えているのですが、関数の「巻き上げ」が可読性と保守性を損なうようで funcion について修正すべきか考えております。 関数宣言を関数式にして const 変数に代入する方法で修正してみたのですが問題はなさそうでしょうか？ 57、62、109、212行目を変更いたしました。 ※関数宣言での巻き上げについて https://qiita.com/kerupani129/items/b2c3619856b048c13394 ※DOM-based XSSのシンクとして働く機能 https://gihyo.jp/dev/serial/01/javascript-security/0006 ※以前アドバイス頂いたコード ※元のコード function lengthCheck() { const left = this.dataset.maxlength - this.value.length; if (left >= 0) { this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています'; this.dataset.submit_disabled = true; } ↓ ※エスケープ処理 function escapeHTML(値) { _ var a = document.createElement('span'); _ a.textContent = 値; _ return a.innerHTML; } 要素.innerHTML = '<strong>' + escapeHTML(文字列) + '</strong>'; ※最新コード https://wandbox.org/permlink/ozofFRK7rkjCXV76

  • matter.jsのイベントについて教えてください

    いろいろなサイトのサンプルコードを参考にさせていただきながら、matter.jsを使って物理エンジンでの表現を勉強してます。なんとか、20個のボールを生成し、それぞれにラベルで番号をふりました。そのボそのボールをクリックして、どのボールをタッチしたのかをalertで表示させようとしているのですが、以下のコードでうまくいきません。どのようにすればよいでしょうか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title>matter.js demo</title> <script src="matter.js"></script> </head> <body> <div id="matter"></div> <script> const engWidth = 680; const engHeight = 400; const wall = 10; const ball = 20; var ballSize = 20; var objs = []; var engine = Matter.Engine.create(document.getElementById("matter"), { render: { options: { wireframes: false, width: engWidth, height: engHeight, background: "rgba(0, 0, 0, 1)" } } }); objs.push(Matter.Bodies.rectangle(engWidth/2, wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth-wall/2, engHeight/2, wall, engHeight, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth/2, engHeight-wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(wall/2, engHeight/2, wall, engHeight, {isStatic: true})); for (var i = 0; i < ball; i++) { var x = Math.random()*engWidth; var y = Math.random()*engHeight; // ボールに番号のラベルをつける objs.push(Matter.Bodies.circle(x, y, ballSize, { label: i, render:{ fillStyle: "#FFFFFF", } })); } Matter.World.add(engine.world, objs); var MouseConstraint = Matter.MouseConstraint; // マウスドラッグではなく、マウスクリックのイベントを設定する var mouseclick = MouseConstraint.create(engine, { element: document.getElementById("matter").childNodes[0], constraint: { stiffness: 0.2, render: { visible: false } } }); Matter.World.add(engine.world, mouseclick); // マウスクリックしたボールの番号をalertで表示する Matter.Events.on(mouseclick, 'mousedown', function(e) { alert("You clicked on ball number " + e.body.label); }); Matter.Engine.run(engine); </script> </body> </html>

  • matter.jsについて教えてください。

    いろいろなサイトのサンプルコードを参考にさせていただきながら、matter.jsを使って物理エンジンでの表現を勉強してます。なんとか、10個のボールを生成し、そのボールを掴んで移動するところまではできました。ボールを掴んで移動させるのではなく、１０個を区別して、どのボールをタッチしたのかを表示させていのですが、どのようにすればよいでしょうか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title>matter.js demo</title> <script src="matter.js"></script> </head> <body> <div id="matter"></div> <script> const engWidth = 680; const engHeight = 400; const wall = 10; const ball = 20; var ballSize = 20; var objs = []; var engine = Matter.Engine.create(document.getElementById("matter"), { render: { options: { wireframes: false, width: engWidth, height: engHeight, background: "rgba(0, 0, 0, 1)" } } }); objs.push(Matter.Bodies.rectangle(engWidth/2, wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth-wall/2, engHeight/2, wall, engHeight, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth/2, engHeight-wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(wall/2, engHeight/2, wall, engHeight, {isStatic: true})); for (var i = 0; i < ball; i++) { var x = Math.random()*engWidth; var y = Math.random()*engHeight; objs.push(Matter.Bodies.circle(x, y, ballSize, { render:{ fillStyle: "#FFFFFF"} })); } Matter.World.add(engine.world, objs); var MouseConstraint = Matter.MouseConstraint; var mousedrag = MouseConstraint.create(engine, { element: document.getElementById("matter").childNodes[0], }); Matter.World.add(engine.world, mousedrag); Matter.Engine.run(engine); </script> </body> </html>

  • 【JavaScript？HTML？】Webページで

    【JavaScript？HTML？】Webページでこのページは戻ることは出来ませんと表示されました。 どうやったら、Webブラウザの戻るボタンを無効に出来るのですか？

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

カテゴリ