JavaScript

全16003件中1~20件表示
  • 報酬付き

    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: '1区間', 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で投稿したデータを表示させる。 上記の3つを実装したいです。 新規登録は完成、ログインページも半分までできましたが、ページ遷移ができず、遷移先にURLパラメーターを渡すこともできませんでした。(パラメータを取得できればスプレッドシートから投稿データを表示させることはできると思います。) 解決したいことはページ遷移と遷移先にデータを渡す。この二つになります。 location.href等もGoogleのセキュリティ関係でnullしか返してくれなかったりします。

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

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

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

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

  • 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個のボールを生成し、そのボールを掴んで移動するところまではできました。ボールを掴んで移動させるのではなく、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ブラウザの戻るボタンを無効に出来るのですか?

  • JavaScriptでコメントのsubmit

    作成したスクリプト let com = document.getElementById('message_input'); com.value = 'test' + Math.random(); document.getElementById('messageForm').submit(com); html <form method="post" id="messageForm" action="/m/player.php" style="margin-bottom:2px"> <input type="hidden" name="token" value="a9f182c41fb15b7858db5fee732d4ec2a280191310fa650866b365d76ef718e2"> <input type="hidden" name="mode" value="post_message"> <input type="hidden" name="to_user" value="ALL"> <div class="input-append" style="width:90%;margin:0px;"> <input class="span2" type="text" id="message_input" name="message" style="width:70%" autocomplete="off" value="" placeholder="全員に発言"> <a href="/m/player.php?inputMultiline=1" title="複数行にする" class="btn"><i class="icon-align-justify"></i></a> <input class="btn" type="submit" value="発言"> ちゃんと打ち込んで読み込みが入るのですがコメントが投稿されてません。どうすればいいでしょうか?

  • JavaScriptでのpost送信

    JavaScriptでメッセージのpost送信は行えますか? またできるのであれば例を挙げてほしいです。 回答よろしくお願いします。

  • jsを書き換えてgifができるようにしたい

    function handleFiles(files) { l("アイコン変更!!1"); if (files.length > 0) { l("アイコン変更!!2"); var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { l("アイコン変更!!3"); var reader = new FileReader(); reader.onload = function(evt) { load(evt.target.result) } ; reader.readAsDataURL(file) } } } function load(src) { l("アイコン変更!!load"); img = new Image(); img.onload = function() { analyze() } ; img.src = src } function analyze() { l("アイコン変更!!analyze"); if (!img) return; SmartCrop.crop(img, { width: 100, height: 100, debug: false }, draw) } function draw(result) { l("アイコン変更!!draw"); selectedCrop = result.topCrop; drawCrop(selectedCrop) } function drawCrop(crop) { l("アイコン変更!!drawCrop"); canvas.width = 100; canvas.height = 100; ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height); img_src = canvas.toDataURL(); var img_tag = $('<img>').attr('src', img_src); $('#file_span').html(img_tag); $('#b_change_profile').prop('disabled', false) } function img_selected_clear() { $('img.selected', '#icon_table').each(function() { $(this).removeClass('selected') }) } function emit_change_icon_name() { var data = {}; data.selected_my_icon = selected_my_icon; data.character_name = $("#ipt_change_character_name").val(); socket.json.emit('change_icon_name', data) } $(function() { $('#canvas_wrap').hide(); $('#i_file').change(function(e) { handleFiles(this.files) }); これをどう書き換えれば画質制限の突破やgifの搭載ができるでしょうか。 回答よろしくお願いします。

  • Jsで次の工程に進むのに一定時間待つみたいな

    let sakusei = document.getElementById('b_change_room'); let change = document.getElementById('b_change_room_info'); let name = document.getElementById('i_room_name'); let element = document.getElementById('comment'); let a = new Event('mousedown'); let e = new Event('mouseup'); let target = document.getElementById('b_send'); for (let step = 0; step < 100; step++) { change.dispatchEvent(a); change.dispatchEvent(e); name.value = "トイレ清掃中    " sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "イレ清掃中    ト" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "レ清掃中    トイ" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "清掃中    トイレ" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "掃中    トイレ清" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "中    トイレ清掃" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "    トイレ清掃中" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "   トイレ清掃中" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "  トイレ清掃中" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = " トイレ清掃中" sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); change.dispatchEvent(a); change.dispatchEvent(e); name.value = "トイレ清掃中    " sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); }; 動くのが早すぎて困ってます。 一回(changeからsakuseiまで)ごとに0.5秒待つみたいなことはどうやれば出来ますか? 回答よろしくお願いします。