+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 HPなどで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
JQRZBVXHM2 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
5TNTB insertBeforeでフレーム内に要素を追加するにはどうすればいいでしょうか?
document.frames('a').document.getElementsByName('b')[0]
という感じで間にフレームを入れても追加できません >>174
document.frames()じゃなくてwindow.frames[]
ちなみにローカルでテストする場合今時のブラウザはfileurlスキームからだと同じフォルダにあったとしてもクロスオリジンになってframe内には触れないのでサーバー立てる必要あり >>175
ありがとうございます。
window.frames[]で追加できました
しかし、フレームの中にフォームがある場合は追加できません
window.frames[].document.forms[]も、
window.frames[].window.forms[]もダメで、
そもそもフレーム内に追加する例が見つかりません
もしかしたら、今時はこんなやり方はしないのでしょうか? 「javascript window.frames」で検索！ >>177
やっとわかりました。
window.frames[].document.forms[].document.getElementsBy～じゃなくて、
window.frames[].document.forms[].elements[]なんですね
ずっとVBAの感覚で考えてました
ありがとうございました document.querySelector("#hoge").innerHTML = <span role="textbox"><test></test></span>";
と入力してテキストボックス内に<test></test>と表示したいのですが上手く行きません
<を<にエスケープすれば解決しますが、他に"<test></test>"で囲ったりして解決する方法はないのでしょうか？ document.querySelector("#hoge").innerHTML = '<span role="textbox"></span>';
の後に
document.querySelector("#hoge>span").innerText = '<test></test>';
とか？
悪いけどエスケープよりメモリ・速度とも効率悪いよ
なんでそんな要件なのか、何がしたいのか全然書いてないからこうしたら？のアドバイスもしづらい >>179
エスケープ用の関数用意してからテンプレートリテラルで
console.log(`<span role="textbox">${escape_html("<test></test>")}</span>`);
https://qiita.com/saekis/items/c2b41cd8940923863791 自分のホムペに天気予報だけとってきて出したいんですが、できますか？
ＩＦＲＡＭＥを使えばできると自分は聞いたんですが相手の画面全部が入っ
てしまいます。焦ってます。ＪＡＶＡが得意でなんとか出来る方法を知って
る方お願いします。 Windows10なら天気は常時右下に表示されてると思うけど、需要あるんかいな のようなコードが出てきますが出来ません
Rubyとかはサイトが非対応みたいです 自分のサイトに置いてあるjsonファイルを一緒に置いてある
javascriptから書き換える方法を知ってる人いますか
（URLが書き込めない）
のようなコードが出てきますが出来ません
Rubyとかはサイトが非対応みたいです
jsonの内容は{"a":1}だけで
aを2に変えるだけのコードを教えてください
言葉で説明されても全くわかりません function WriteToFile(){
let hugastring = JSON.stringify(huga);
let blob = new Blob([hugastring],{type:"text/plan"});
let link = document.createElement('a');
link.href = UR.createObjectURL(blob);
link.download = '作ったファイル.json';
link.click();
} スクリプト初心者です。教えてください。
画像（25枚くらい）をページの端のほうに小さくスライドショー
でのせたいと思っています。
画像の出方はアクセスするたびランダムで
どの画像をクリックしても同じＵＲＬへ別windowで飛ぶようにしたいんです。
どうにかスライドショー＆リンクまではできましたが
どうやっても別windowで開かないんです。
どうすればいいのでしょうか？
よろしくお願いします。 >>189
単にaタグで囲めばいいんじゃない？
JSでやる必要ないよ >>190
ありがとうございます。
何度もソースコードを投稿しようとしているのですがはじかれます。
すみません。 スクリプトタグは、はじかれる。
<scr＠ipt>
コードは、jsfiddle, paiza などへ書けばよい。
>>2-4
を参照 >>183
iframe にサイズ指定をすれば、小さく表示されるのでは？ >>186
ファイルの保存は、バックエンド(サーバー側)の言語で書く
例えば、Ruby on Rails なら、Rubyで書く。
Word Press なら、PHP で書く。
Node.js なら、JavaScript で書く
だから、まず、サーバーのフレームワークが何で、言語が何か、調べなければならない
それかサーバーに、ファイル保存用のAPI が作ってあって、
それを通して、保存できるようになっているとか >>194
ありがとうございます
意味わからなくて無理そうなのでjsonに保存するのは諦めて
javascriptの変数をメールフォームに入れて送るのを試してみます すいません、下記のようにボタンを押した時の処理をあらかじめ一つずつJSで書いて書いてるんですが、
ボタンの種類と数が莫大な量になるとJSを書くのが大変になってきました
逆にクリックされた任意のボタンオブジェクトを変数に入れる方法ってあったりしますでしょうか
（ボタンがクリックされる→クリックされたボタンのclassやvalueやtextを調べて目的の処理、という順番に変更したい）
下記が現状のコードです
・html
<button class="BtnA" value="固有の番号">ボタンAタイプ</button>
<button class="BtnA" value="固有の番号">ボタンAタイプ</button>
<button class="BtnB" value="固有の番号">ボタンBタイプ</button>
・js
const BtnA = document.getElementsByClassName('BtnA');
for(i=0;BtnA.length>i;i++){
BtnA[i].addEventListener('click', () =>{
//ここに押された時の処理を書く（固有の番号毎に別々）
});
}
const BtnB = document.getElementsByClassName('BtnB');
以下BtnAのコードとほぼ同様の個別処理がBtnB～BtnXまで延々と続く感じ イベント移譲
ボタンの親にイベントをつけてevent.targetを調べれば、押されたボタンが分かる 求めてることのイメージ的には下記みたいな感じですがこの一番最初の行の書き方がわからないです
//何かわからんがボタンが押された！
ボタン〇〇addEventListener('click', () =>{
//何のボタンが押された？
クラス名=ボタン〇〇..className;
if(クラス名="BtnA"){
//その他処理
}
}); ボタンの外側のエレメントなりbodyなりにイベントリスナ仕込んでevent.target.nodeNameがBUTTONかどうかチェックすればいい class="BtnA BtnAll"
class="BtnB BtnAll"
みたいに、BtnAll で、すべてのボタンの処理をまとめれば？
jQuery で書けば、
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
$( ".BtnAll" ).on( 'click', function ( ) {
console.log( $(this).prop( 'value' ) )
} ); >>202
では、event listener の数が多くなるのか。
それなら、外側・親に、イベントを付けて、親でイベントをキャッチする
jQuery で書けば、
<div id="btn-wrap">
<button class="BtnA" value="1">A-1</button>
<button class="BtnA" value="2">A-2</button>
<button class="BtnB" value="3">B-3</button>
</div>
$( '#btn-wrap' ).on( 'click', function ( event ) {
console.log( $( event.target ).prop( 'value' ) )
} ); この種の質問は何度もされてると思いますが prototypeを使った継承について教えてください
function Base(x=0,y=0) { [this.x, this.y] = [x, y] }
Base.prototype.hello = function () { console.log("hello:"+ this.x +"," + this.y) }
// パターン 1
function Derived(z=0) { Base.call(this,10,20); this.z = z }
Derived.prototype = Object.create(Base.prototype); // → Base {}
let obj = new Derived(30); // → { x: 10, y: 20, z: 30 }
obj.hello(); // → hello:10,20
obj.__proto__.__proto__.hello === Base.prototype.hello; // → true
// パターン 2
Derived.prototype = {...Base.prototype}; // → { hello: [Function (anonymous)] }
obj = new Derived(30); // → { x: 10, y: 20, z: 30 }
obj.hello(); // → hello:10,20
obj.__proto__.hello === Base.prototype.hello; // → true
obj.__proto__.__proto__.hello === Base.prototype.hello; // → false
よく紹介されているパターン 1 だと hello メソッドへの参照は 間に挟まった Baseインスタンスの分だけ遠くなります.
パフォーマンス的にはパターン 2 の方が良さそうに感じますが何か問題があるでしょうか？ スプレッド構文でコピーしちゃったらそのあとでBase.prototypeに何かしても反映されないし
getter/setter/列挙不可能プロパティあたりで問題があるかな >>205 ありがとうございます
> あとでBase.prototypeに何かしても反映されない
ああ...確かにそうですね。 ES2015 から、class 構文が使えるから、
そういう、昔の書き方をしなくても良い せやなclass構文よりオブジェクトリテラルのスプレッド構文の方が新しいし ぷよぷよプラグラミングの質問なんですが
https://puyo.sega.jp/program_2020/dl/puyo-programming-code.pdf
p8の18行あたり initialize ()の中でイベントリスナーでキー操作呼び出してるのですが
initialize ()って一回しか読まないものだと思うのですがどこでキーイベント取得するのでしょうか
一般的なプログラムだとメインの動いてるところで取得するイメージなんですが？
static initialize () {
// キーボードの入力を確認する
this.keyStatus = {
right: false,
left: false,
up: false,
down: false
};
// ブラウザのキーボードの入力を取得するイベントリスナを登録する
document.addEventListener('keydown', (e) => {
// キーボードが押された場合
switch(e.keyCode) {
case 37: // 左向きキー
this.keyStatus.left = true;
e.preventDefault(); return false;
case 38: // 上向きキー
this.keyStatus.up = true;
e.preventDefault(); return false;
case 39: // 右向きキー
this.keyStatus.right = true;
e.preventDefault(); return false;
case 40: // 下向きキー
this.keyStatus.down = true;
e.preventDefault(); return false;
}
}); >>209
loop関数の最後に非同期のrAF(loop)があるから、その1/60秒の隙間でブラウザからキー入力を取得してんのかね。 nodejsでwebスクレイピングアプリを作っています
<body topicId="2557157" state="old">
こういうhtmlタグがあって、stateのvalueを取りたいのですが
Document.getElementsByTagName("body")[0].state
こうしてみたのですがundefinedとなります
取得する方法はないでしょうか document.querySelector('body').getAttribute(’state’) >>209
document.addEventListener('keydown', (e) => {
で、何回もイベント登録されたら、大変。
イベント登録は1回だけでよい
登録しておけば、keydown される度に処理される 見てる人いるかわかりませんが
ellipseでcanvasに楕円を描写したあと中央の部分をくり抜いて透明にしたいです
ellipseで緑色に描写した後arcで中心に円を描いてclipしても円の線が切り抜かれるだけで円形の穴はできませんでした。 「html canvas 図形 切り抜き」などで検索すれば？ スレ間違えたので、こちらで出直します
拠ない事情でフロントエンドを作ってるんだけど
<a><img></a>でaにaddEventListener(‘click’)したのに、飛んできたイベントのtargetプロパティがimgになってる
aを探して遡るのはなんか負けの気がする
aにイベント飛ばさせるテクはありますか？ jQuery では、外側・親にイベントを付けて、親で、子のイベントをキャッチできる。
event.target で、子のvalue の値、1,2,3 を取得できる
<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>
// 外側・親にイベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} ); 「js event.target vs event.currenttarget」で検索してみれば？ ありがとう皆さん
currentTargetで目的を果たせました 自分のサイトにあるフォーム
↓①
googleフォーム
↓②
googleスプレッドシート
と情報を渡す時、①の部分はどのように実装すると良いでしょうか
・自分のサイトの「送信」ボタンを押すと、submitで送信する
・自分のサイトの「送信」ボタンをaタグにし、hrefをjsで編集する
①の部分はここを参考にしています
https://stackoverflow.com/questions/51995070/post-data-to-a-google-form-with-ajax/55496118#55496118 aタグは、get しか出来ないでしょ？
Ruby on Rails では、post なども出来るようにしているけど
[Rails]aタグでも「data-method="delete"」を設定すればlink_toと同じ挙動
https://qiita.com/haruya_hamasaki/items/b69de2c680bb01d88017
form = $('<form method="post" action="' + href + '"></form>'),
aタグをクリックされたら、見えないフォームを作って、post 送信している >>224
は？rubyとかもう化石じゃないですか。使いませんよ
postするならsubmitすればいいだけだし。rubyってこんなアホしか使ってないんですか？ すいません、あまりの気持ち悪さに口が悪くなってしまいました
あとID隠してしまいましたが>>225は私です >>223
普通に前者で良いよ。
むしろ後者にする必然性が何一つない
もし合計を出す、税込みにするなどでどうしても加工したいなら、後者はありえる
あとこのrubyキチガイはrubyという言語を終わらせるために活動しているので、相手しなくていいぞ うーむ、めちゃはまってしまってる
1:スプレッドシートのE列を配列 arrColWork に格納
range = workReportSheet.getRange(1,5,150);
arrColwork =range.getValues();
2:arrColWorkから重複排除した要素だけをarrColに格納
arrCol = arrColWork.filter(function(value, index, self){return self.indexOf(value) === index;});
↑
上記1→2の流れやりたいんだけど 2 がうまくいかない
重複排除されずに全件arrColに格納されてしまう…
テストケースとしてE列の先頭行(1行)と最終行(150行)に"野口"と入力
2行～149行には"田中"を入力したもので試したが全部出力されてしまってる
1の結果を Logger.log(arrColwork); で出力したら正常にE列の1行目から150行目まで入力した値がきちんと配列に格納できてる
2の結果を Logger.log(value + ":" + index + ":" + self.indexOf(value)); で出力したら
valueはきちんと150件分入力したものが入ってるが、index と self.indexOf(value) が同じ値になってしまってて
全部 True になってる self.indexOf(value) が機能してない？
原因わかるやつおる？？ valueがオブジェクトだったみたいな振る舞いですね 試してたら1の部分を arrColwork = ["野口","野口","田中","橋本","田中","小林","入間"]; のように
ソースコード内で配列の中身を指定するように置き換えたら2のコードのまんまできちんと重複を排除できた
スプレッドシートのE列の値を配列に格納するあたりで何かひっかかってる？？ うーむ、getValues()で取得したものは1列分であっても二次元配列で取得されてるってことかな
んでもって、indexOf() は一次元配列にしか使えない… スプレッドシートの1列分のデータを一次元配列で取得する方法ってないのかな？？
二次元配列で取得したものをforで回して一次元配列に格納しなおすしかないんだとしたらめんどい A. https://www.example.com/test/form.html (有料SSL)
のフォームから
B. https://abc.example.com (無料SSL)
へPOSTでデータを渡していました。
Aのフォームでsubmitボタンに対し、
リロードさせないようにpreventDefault()を入れてBに渡していました。
Aの有料SSLを無料SSLに変えて同時にwww無しのドメインに正規化しました。
するとpreventDefault()を入れるとデータが飛ばなくなってしまいました。
結局submitボタンをtype=buttonに変えて、
JavaScriptでsubmit()することで飛ばせるようには鳴りました。
2つ(有料SSLとwww外し)を同時にやってしまったのですが、
なぜAからBへダメになってしまったのでしょうか？ お前ら和歌山県出身の下村拓郎様（35歳独身、元自衛隊）をご存知か、この方は将来素晴しい人物になるから覚えておいて損はないぞ javascript素の実装で
fetchした結果をreturnしたいんだけど毎度おなじみ非同期の沼に嵌ってよくわからない
これreturn書いても書かなくてもpromise返ってるんだけど
promiseから値を取り出すにはどうすればよいの？
みんなどうやってるのか聞きたいな
毎度コールバックでfetchとかコード大変なことになるし
共通jsに別関数でgetListみたいな名前でAPI問い合わせしてjson返すようなデザパタは
Javascriptではご法度なの？ javascriptではというかGUIが絡むコーディングではどの言語でもご法度だよ
シングルスレッドならね
言語(&環境)によってそれをマルチスレッドで解決するか非同期で解決するかというだけ
とはいえやりたければjavascript(&ブラウザ)でそういう同期処理的なふうにできなくもないよ
当然メインスレッドブロックするけどね
おとなしくasync/await勉強すべきだと思うけど
MDN読みながら手を動かして1～2時間もあればだいたい分かると思うけどその程度の手間も惜しいの？ Callback 地獄 → Promise 地獄 → async/await
JavaScript には、こういう変遷の歴史がある。
Promise は、jQuery の時代の技術 aタグを全て新規タブで開きたいと思い、
以下のコードを書いてみたのですが
Uncaught TypeError: foo.forEach is not a function
at <anonymous>:2:5
というエラーになりました
foreachの書き方が間違っているのでしょうか
それとも、fooに対してはforeachが使えないのでしょうか？
var foo = document.getElementsByTagName("a")
foo.forEach(function(bar){
window.open(bar.getAttribute);
}); >>239
querySelectorAllならIE以外でforEachが使えるけど
今時のブラウザはブラクラ防止で一つの処理でwindow.openは1回しか動かないものが多いよ 15年ぐらい前のlightbox環境は毎秒5フレームぐらいのカクカクした感じなんだけど
スムーズにするにはどこを触ればいい？
lightbox2はうまく動かなかった
なんとかlightbox.jsのパラメータを触って実現できたらいいんだけど cssを直で書く
jsでアニメーションはカクカクになる javascriptでブラウザの外に画像を表示したり、動かしたりする事ってできますか？ 条件を後出しせず、書かれた通りの質問なら、できるよ >>246
URLとか忘れたんですけど、以前ブラウザのボタンを押すとブラウザの後ろから画像がニョキッって横に飛び出る動画見た事あるんですよね
アレってjavascriptなのかなーって疑問を抱いてました test.jsの中で
(function(){
var a = 1;
})();
と変数を宣言しましたがchromeのコンソールでこのaを取得するにはどうすればよいのでしょうか？ breakpoint入れてその関数実行時にスコープの中に入らないと無理じゃないかな
スクレイピング用途ならhttp proxyかましてスクリプトを変更して外部からアクセスできる変数にする >>248
無名関数は、
var a = 1;
が他に影響しないようにするための便利な書き方なんだ
その中見を無理に使おうとすると
var a = 2;
(function(){
a = 1;
})();
console.log(a)
のようなアホみたいな書き方になる
aを使いたいなら、
a = 1;
だけで良い >>249 >>250
ありがとうございます。
すごい分かり易かったです。 今だと非同期関数を作るときはasyncを付けます。
まだasyncが登場してない時ってどうやって自作の非同期関数を作っていたのでしょうか。 どなたか教えてください。
<body>
<script>
var str = document.getElementById{"test").innerHTML;
str = str.replace(“やま”, “ほし”);
document.getElementById("test").innerHTML = str;
</script>
<div id=“test”>
<p>うみ</p>
<p>やま</p>
</div>
</body>
としてもブラウザーには
うみ
やま
と表示されてしまいます。
どこか間違っているのでしょうか？
その場合どこを直せばいいでしょうか。
よろしくお願いします。 >>253
ダブルクォートやカッコが間違ってる
scriptタグを</div>より後に DOMがreadyになってから実行しろって話じゃないの？ みなさんレスありがとう。
()と”を’に置き換えて下記のようにしてみました
<div id=“test”>
<p>うみ</p>
<p >やま</p>
</div>
<script>
var str = document.getElementById('test').innerHTML;
str = str.replaceAll('うみ', 'ほし');
document.getElementById('test').innerHTML = str;
</script>
しかしブラウザでは うみ やま と表示され ほし やま になってくれません。 シングルクォートにしろという事ではなく全角ダブルクォートなのが間違い
<div id="test"> >>258
半角だと思うのですがこれじゃだめなんですね。 お騒がせしています
<div id="test">
<p>うみ</p>
<p >やま</p>
</div>
<script>
var str = document.getElementById("test").innerHTML;
str = str.replaceAll("うみ", "ほし");
document.getElementById("test").innerHTML = str;
</script>
このように書き換えましたがはやり うみ が やま に変わりません。
どこかどのようにだめなのかわかりませんか？ すみません。混乱していて。
うまく表示されていたようです。
初歩的な事にレスをいただいてみなさんありがとうございました。
感謝します。 const express = require('express');
const server = express();
と書いた場合と、express(); の前に new を付けて、
const express = require('express');
const server = new express();
と書いた場合、何が違うのでしょうか？
同じように動作しているように見えます。 こういう鍵盤をイメージしたボタンが複数60Keyほどあって、鍵盤のキーをクリックしたらイベントを開始したい。
<span class="white-key" data-key="90" data-note="1c"><i>ド</i></span>
<span class="white-key" data-key="88" data-note="1d"><i>レ</i></span>
<span class="white-key" data-key="67" data-note="1e"><i>ミ</i></span>
.
.
.
しかし、id属性がないので、
let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
とは記述できない。
jQueryや、Reactや、Vue.jsなどは使わず記述する方法ありますか？ >>263
classなりなんなり共通してる他の属性を使えばいい
document.querySelectorAll(".white-key, .black-key").forEach(elem => elem.addEventListener("click", buttonClick)); >>264,>>265
ありがとうございます。やってみます。この方法なら、keyごと（ボタンごと）に、
addEventListener()
つくらなくていいのかもしれないですね。
60個も、addEventListener()つくるのは面倒だなと思ってました。 あ。いや。ボタン毎にaddEventListener()記述しないと、同じ音が出てしまうな。。 繰り返しaddEventListenerでイベントハンドラ設定するのが嫌なら、
適当な親要素にイベントハンドラつけてそのイベントハンドラ内で
let button = event.target.closest(".white-key");
ってやればいいんじゃないかな
https://developer.mozilla.org/ja/docs/Web/API/Element/closest フリーランス向けエージェント「クラウドテック」会員数8万人突破
～働きやすい環境構築のため、単価向上・全年齢の活躍の場創出・
地方企業のDX推進の取り組みを強化します～
フリーランスエンジニア専門の案件一括検索サイト「フリーランススタート」、
累計掲載案件数25万件突破！リモートワークの累計掲載案件数35,000件突破！
新規人材の80%がフルリモート希望！ IT人材市況動向レポート2021年12月版を公開
人口移動報告 家賃高い、首都圏脱出 「コロナ禍、仕事フルリモート」
クラウドテック、地方企業向け『クラウドテックDX』を開始、
7万人を超えるDX人材が、地方の非IT企業のDX推進を支援
新潟県、移住してきたテレワーカー／フリーランスに最大50万円を支給
テレワークの一般化により、11月にはテレワーク可能案件83.7%へと増加。
2021年、フリーランスのトレンドは「移住＆テレワーク」と予測 
