+ JavaScript の質問用スレッド vol.124 +

1 名前：デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:24:24.80 ID:jxD2VXPG0.net] JavaScript を自ら学ぶ人のための質問スレッドです。 >>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください ■質問を書く上で (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。 (2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。 　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など) (3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。 (4) 常に自発的に調べる心構えを持ってください。 　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。 　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。 (5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。 (6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。 　　※必ず「問題の事象が再現されること」を確認してください。 　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。 (7) サンプルコードに HTML が含まれる場合は validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。 (9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。 (10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 ※前スレ + JavaScript の質問用スレッド vol.123 + https://mevius.5ch.net/test/read.cgi/tech/1491143438/ VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured 136 名前：デフォルトの名無しさん mailto:sage [2021/11/29(月) 13:23:14.24 ID:T3PYHNfj0.net] >>132 >>129の方法ではダメなのか？ 137 名前：デフォルトの名無しさん mailto:sage [2021/11/29(月) 15:20:06.33 ID:0iOICyJy0.net] 定期的にaddEventListener自体から引数渡したいって人出てくるけど 仮にできたとしてもaddEventListenerした時点で値が固定されることが考えから抜け落ちてるよね >>132 引数渡したいならイベントハンドラに関数式使えば済むけど 複数のイベント仕込むなら一連の動作をこんな感じでclassかオブジェクトにした方が楽よ https://jsfiddle.net/hgro7t5m/ 138 名前：デフォルトの名無しさん mailto:sage [2021/11/29(月) 15:41:30.31 ID:cAtmNTK4M.net] クロージャ使えば普通にできるやろ それに参照型ならaddEventListenerした後からでも値を変えられるよ 139 名前：デフォルトの名無しさん mailto:sage [2021/11/29(月) 18:56:58.07 ID:QQHq1BUR0.net] var か 140 名前：デフォルトの名無しさん mailto:sage [2021/11/29(月) 20:17:26.02 ID:T3PYHNfj0.net] >>135 オブジェクトを束縛すれば、プロパティは固定されない(>>129) handleEventも使ってみればその有用性に気がつくと思うが 141 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:18:05.48 ID:Zxe83BGy0.net] 読み込みたいファイルのパスだけがわかっている場合に reader= new FileReader(); reader.readAsText("aaa/hoge.csv") ; みたいな感じで読み込もうと思ったんですが、 readAsTextの引数はblobだかfileオブジェクトでないとだめみたいで、 レファレンスを読んで見るも、 パスから 142 名前：blogだかfileオブジェクトだかを作成する方法がわかりませんでした。 ファイル読み込み自体は他の方法を使ってできるものの、 FileReaderとreadAsTextの組み合わせを使ってトライしてみたいので どなたかアドバイスお願いできますでしょうか [] [ここ壊れてます] 143 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:36:24.21 ID:6Q/yxXZX0.net] >>139 それが出来たら、ファイルの情報を盗み出せるようになるな 144 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:48:45.94 ID:Zxe83BGy0.net] >>140 例えばxmlhttpRequest()でもパスからファイルを読み込むことが出来るので FileReaderでそれが出来ないのは不思議な気になるんですがそういうものなんですかね 145 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 14:35:37.60 ID:t4TtjIXNM.net] むしろ他の方法とやらが気になる 146 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 14:36:47.65 ID:6Q/yxXZX0.net] >>141 xhrは基本的にhttp接続しか出来ない 147 名前：デフォルトの名無しさん mailto:sage [2021/12/04(土) 16:15:20.01 ID:4OadB/pcM.net] とりあえずリファレンス読め https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications 148 名前：デフォルトの名無しさん mailto:sage [2021/12/07(火) 11:51:05.11 ID:sVKUttQ/0.net] ガチでヌーブなんですけどrequestsとbeautifulsoupでスクレイピングやってます waitかけないとバンされるよと言われましたがどうすればいいですか？ requests.get()でtimeoutは今書きましたがforで同じサイトの似たようなページに何度もアクセスするのでサーバーへの負荷はすごいと思います これに対してどうすればいいですか？ 149 名前：デフォルトの名無しさん mailto:sage [2021/12/07(火) 11:56:58.02 ID:PaA+NeG00.net] >>145 マルチ禁止 150 名前：デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:07:14.43 ID:uyimWi/30.net] const test = [ {main:"A"}, {main:"B"}, {main:"C"} ] から全てのmainをとり出した["A","B","C"]となる配列を作りたいです forを使えば作れますが、もっと簡単に作れる便利なメソッドあったりしますか？ 151 名前：デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:32:51.58 ID:gfmL2AFS0.net] const test = [ {main:"A"}, {main:"B"}, {main:"C"} ] let testB = test.map(e=>e.main) 知っててコレジャナイ方法をきいてるのかもしれないけど 152 名前：デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:38:12.28 ID:uyimWi/30.net] >>148 自分もそれやってたけど不可能なので質問しましたが どうやらqueryselectorAllにmapが効かないっていうのが原因だったみたいです すんません 153 名前：デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:51:07.69 ID:uyimWi/30.net] 許して下さい… 154 名前：デフォルトの名無しさん mailto:sage [2021/12/09(木) 16:09:45.62 ID:CDvY1Ccm0.net] querySelectorAllの戻り値はArrayではなくNodeListだからね hoge = Array.from(test).map(e => e.main); 155 名前：デフォルトの名無しさん mailto:sage [2021/12/10(金) 03:36:53.73 ID:TbLIJEp/M.net] hoge = Array.prototype.map.call(test,e => e.main); とか 156 名前：デフォルトの名無しさん mailto:sage [2021/12/10(金) 20:33:15.32 ID:Kd0T5CdW0.net] Pythonの 157 名前：デフォルトの名無しさん mailto:sage [2021/12/10(金) 20:34:21.58 ID:Kd0T5CdW0.net] PythonのコードですがどなたかJavascriptに直して下さい… sorted(pts, key=clockwiseangle_and_distance) import math pts = [[2,3], [5,2],[4,1],[3.5,1],[1,2],[2,1],[3,1],[3,3],[4,3]] Origin = [2, 3] refvec = [0, 1] def clockwiseangle_and_distance(point): 　vector = [point[0]-Origin[0], point[1]-Origin[1]] 　lenvector = math.hypot(vector[0], vector[1]) 　if lenvector == 0: 　　return -math.pi, 0 　normalized = [vector[0]/lenvector, vector[1]/lenvector] 　dotprod = normalized[0]*refvec[0] + normalized[1]*refvec[1] 　diffprod = refvec[1]*normalized[0] - refvec[0]*normalized[1] 　angle = math.atan2(diffprod, dotprod) 　if angle < 0: 　　return 2*math.pi+angle, lenvector 　return angle, lenvector 158 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:19:38.29 ID:kTfvj9Ya0.net] すんません var hoge = test(); //←2個入った 159 名前：配列が返ってくるヤツ var A = hoge[0]; var B = hoge[1]; って書いてます。 これもーちょっとカッコよく var A B = test(); って感じで一行でAとBに変数に入れる方法とかあります？ [] [ここ壊れてます] 160 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:55:24.52 ID:4C+gjCbR0.net] var hoge = [1,9]; var [A,B] = hoge; 161 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:56:54.19 ID:kTfvj9Ya0.net] >>156 うおーすげー天才 ありがとうございます！ 162 名前：デフォルトの名無しさん [2021/12/12(日) 17:05:57.60 ID:neOkkgxzM.net] var obj={ key:{x:200,y:300} } obj.key2=500; alert(obj.key2); alert(obj.key.x); 上はオブジェクトで下はオブジェクトのオブジェクトです。 実行結果は上が500で下が200です。 一応動作はしますがこのような使い方は間違っていますか? 163 名前：デフォルトの名無しさん mailto:sage [2021/12/12(日) 18:15:54.15 ID:vioicQgx0.net] >>158 「間違っている」は「期待する動作」によって決定される それをあなた自身しか知らないので、第三者による判断は不可能 164 名前：デフォルトの名無しさん [2021/12/12(日) 18:40:13.36 ID:MwcQtjtM0.net] >>159 文法的にはどうですか？ 165 名前：デフォルトの名無しさん mailto:sage [2021/12/12(日) 19:22:12.57 ID:vioicQgx0.net] >>160 文法は他人に聞くまでもない コンソールにSyntaxErrorが出力されていなければ、文法的に問題ない 166 名前：デフォルトの名無しさん mailto:sage [2021/12/12(日) 20:06:45.86 ID:A9cM/MPAM.net] 何に引っかかってるのか書かないと期待してる答えは返ってこない 特に変なところないし 167 名前：デフォルトの名無しさん [2021/12/13(月) 08:42:46.82 ID:8aJMJMAP0.net] 引数が多い場合の引数の渡し方について function( aaa, bbb, ccc, ・・・（略） zzz ){} って書くより function(obj){ var aaa = obj.aaa; var bbb = obj.bbb; ・・・・・（略） var zzz = obj.zzz; } って書く方がいいんでしょうか？ どっちもメリット、デメリットはあると思うけど 168 名前：デフォルトの名無しさん mailto:sage [2021/12/13(月) 13:06:28.94 ID:CRKwXgwv0.net] >>163 何でこう無条件に善し悪しを求めようとするかね メリット、デメリットがあるなら、どちらが良いと決めつけることは出来ないと判断出来ないものなのか 169 名前：デフォルトの名無しさん mailto:sage [2021/12/13(月) 15:27:20.29 ID:+BabEBNV0.net] 下のほうなら const f = function({aaa, bbb, zzz}){ console.log(aaa, bbb, zzz); } のほうが分かりやすくないか const o = { aaa: 'あ', bbb: 42, zzz: 'ん', }; f(o); 170 名前：デフォルトの名無しさん mailto:sage [2021/12/13(月) 18:56:15.12 ID:hdHWXJOsM.net] >>136 形だけひとまとめにしても後でバラすんじゃなんの意味もない objとかじゃなくて意味のある名前が付けられる範囲でまとめるべき 171 名前：デフォルトの名無しさん mailto:sage [2021/12/13(月) 18:56:54.87 ID:hdHWXJOsM.net] >>166は>>163あて 172 名前：デフォルトの名無しさん [2021/12/14(火) 13:31:35.06 ID:qf3fX3jjM.net] var str="ｘ^2 + (x+2)^2 - (x*(x-2))^3"; をMath.pow(x,2)+Math.pow((x+2),2)- Math.pow((x*(x-2)),3)に置換するにはどうやればいいんですか? 173 名前：デフォルトの名無しさん mailto:sage [2021/12/14(火) 15:01:16.14 ID:82CERvuP0.net] Math.powを使わなければ簡単なんだけどね eval(str.replace(/\^/g, '**')); 174 名前：デフォルトの名無しさん mailto:sage [2021/12/14(火) 15:08:13.94 ID:4lV7iDvz0.net] スペース含まない半角文字列限定。式の文字列つくるまで。 賢い人ならもうちょっとスマートに書けるかと。 var str="x^2+(x+2)^2-(x*(x-2))^3"; function func(s){ var s2=s.split('^'); var s3=s2[1].replace(/¥d+/,""); return "Math.pow("+s2[0]+","+s2[1].replace(/[^¥d]/,"")+")"+s3; } var result=str.replace(/[a-z¥(¥)¥d¥*¥+¥-¥/]+¥^¥d+([¥+¥-¥*¥/]|$)/g,func); 175 名前：デフォルトの名無しさん [2021/12/14(火) 18:05:48.23 ID:ZmdmxRFm0.net] >>169 そうやった方が簡単そうですね >>170 ありがとうございます 176 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:13:45.77 ID:h9C3pi7L0.net] いつもはreplaceやmatchを使うんだけど、 execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました txt="AabBxxB"; pattern = /A(.*)B/; d=pattern.exec(txt); alert(d[1]); 期待する結果はab でも実際はabBxxが返ってきます、後方参照ってやつですか？一番後ろのものとマッチしてしまう これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか？ 177 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:19:59.60 ID:UjbkuvW00.net] .*? 178 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:20:26.59 ID:LAChl8N10.net] ぱっとしかみてないけど pattern = /A(.*?)B/; 179 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:22:08.15 ID:Z/edc8620.net] A([^B]*)B 180 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 20:16:03.92 ID:1LHweqXF0.net] ( ^)o(^ )b 181 名前：デフォルトの名無しさん mailto:sage [2021/12/15(水) 20:34:33.03 ID:h9C3pi7L0.net] >>173 >>174,175 ありがとうございます なるほど、*も+も?も単体で使うと最長一致になるけど *?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい… 182 名前：デフォルトの名無しさん mailto:sage [2021/12/16(木) 20:22:00.71 ID:bW+aVaO40.net] >>177 その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>175 183 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 17:33:35.08 ID:ONJh0jXva.net] 【環境】Windows 7 64bit, IE11 【何をしたのか】 $("form")で取得している内容が自分の考えと正しいかを確認したい 1. alert($("form")) → [object Object]と表示される 2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了 【エラーメッセージ】- 【期待する結果】 $("form")の中身が確認したいです 手段は選びません console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています 【サンプルコード】 $("form").attr("name"); 184 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 17:43:33.97 ID:ONJh0jXva.net] >>179 自分は取得しているものが<form 〜>であると思っています なのでHTMLが確認したいです 185 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 18:34:04.36 ID:VeORz/HR0.net] 試してみたらfirefoxだと強制終了しないね IEは消したからわからん 186 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 20:25:41.33 ID:WODdA7db0.net] >>179 試してないconsole.logやconsole.dirでいいと思うが、まず試してみては？ コンソールはモーダルウインドウが開いてなくても関係ない あなたがほしいのは$("form")[0]な気はするが 187 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 20:33:32.43 ID:WODdA7db0.net] モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか モーダルウインドウを使わないのが一番だが 、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな 188 名前：デフォルトの名無しさん mailto:sage [2021/12/22(水) 22:15:47.78 ID:oJlbnIXA0.net] >>181-183 ありがとうございます >>182,183 お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、 現時点では当時の開発環境(VS2012)でデバッグ実行しています JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです $("form")[0]は明日試してみます console.logなどを試していない（諦めた）理由は、 動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く →子でデータを選択する→親に選択したデータが入力される という流れになっており、 親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね？ ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます >モーダルウインドウを開くページから参照するとか、 ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした >breakpointで止めるとか、 showModalDialogで開いた後に処理される関数に貼ってみたんですが 張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね… 関数の最初にdialogArgumentsを参照してifで分岐するんですが showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました >モーダルウインドウを閉じるコードを一時的にコメントアウトするとか その発想はなかったです 今後のデバッグに使ってみます ひとまず、$("form")[0]とピン止めを試してみます 189 名前：デフォルトの名無しさん mailto:sage [2021/12/27(月) 21:01:36.58 ID:XB7P0UiP0.net] html5のcanvasについて質問です drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png ctx.globalCompositeOperation = 'destination-in'; や c2.globalCompositeOperation = 'darken'; を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします 何か良い手はないでしょうか？ 190 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 10:31:30.75 ID:ChI3TD7z0.net] 今後はclassが標準になるの？ 191 名前：デフォルトの名無しさん [2021/12/28(火) 10:36:46.52 ID:ChI3TD7z0.net] JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。 そのため、以前できなかったことは、今でもできません。 クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。 prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。 class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。 でも理解したら、わざわざclassを使う必要がない気がします。 使いたければ使えばいいんじゃない？と思います。 192 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 12:53:44.91 ID:s8DIRgNG0.net] >>186-187 自問自答？ 使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい >>82,110 193 名前：デフォルトの名無しさん [2021/12/28(火) 13:05:03.77 ID:ChI3TD7z0.net] JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。 そのため、以前できなかったことは、今でもできません。 クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、 誰にとってわかりやすいかいまいち不明。 prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。 class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、 勉強にならないですね。 でも理解したら、わざわざclassを使う必要がない気がします。 194 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:28:00.05 ID:ediH0wTa0.net] >>179 const form = $( 'form' ) console.log( form.length, form[ 0 ] ) HTML 内に、フォームが1つしかないなら、 form.length は1 で、form[ 0 ] でform 要素を取得できる <form action="" id="form_1" name="form_1"> みたいに、id を付けた方が良いかも そうすれば、これで取得できる const form_1 = $( '#form_1' ) まあ、HTML, JavaScript, jQuery の質問は、 この板よりも、web制作管理板の方へ書き込んでください 向こうのスレが、本スレです 195 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:30:12.08 ID:ediH0wTa0.net] 今は、class を使う 今さら、prototype を使う人は、いない 196 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:50:08.36 ID:ChI3TD7z0.net] >>191 内部構造が分かりにくい。 197 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 14:58:53.60 ID:Gh6bV9aa0.net] ワイにとってはclassのほうが分かりやすいかな 198 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 16:37:46.66 ID:ChI3TD7z0.net] すごい。 みんな頭いいんだな。 199 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 17:14:08.11 ID:jIrgILJka.net] まあな 200 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 18:05:32.60 ID:VM83xPh40.net] 中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。 classとしての振る舞いに何か問題があるならそこは注意すべきだが。 201 名前：デフォルトの名無しさん mailto:sage [2021/12/28(火) 19:24:57.81 ID:ChI3TD7z0.net] みなさんjavascript何年目？ オレは2年。 202 名前：デフォルトの名無しさん [2021/12/31(金) 00:19:23.87 ID:K3Q5NoN00.net] 　昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。 そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに 出品され、$515,000（約5,150万円）で落札されました！ 実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。 2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏 とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される チャリティー・オークションのひとつとして出品されています。 今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました！　 203 名前：デフォルトの名無しさん mailto:sage [2022/01/02(日) 11:53:11.76 ID:qPLPCP6o0.net] fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか？ <script type="text/javascript">alert("hoge");</script> また、動かない原因をブラウザの検証から調べる事はできますか？ 204 名前：デフォルトの名無しさん mailto:sage [2022/01/02(日) 12:00:54.33 ID:qPLPCP6o0.net] 自己解決　すみませんす 205 名前：デフォルトの名無しさん mailto:sage [2022/01/03(月) 10:30:02.94 ID:ciAHc7bt0.net] 文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか？ ブログのトップページなんですが、本文の１部を表示させておいて、続きを読むというリンクを設置したいなと。 <div id="text">１２３４５６７８９</div> <script> let text = document.getElementById("text"); let inner_text = text.innerHTML; let text_length = inner_text.length; let max_length = 5; if(text_length > max_length){ console.log("5文字超えてます"); text.innerHTML = inner_text.substr(0,max_length); } </script> これで動きはしましたけど 206 名前：デフォルトの名無しさん [2022/01/04(火) 19:09:00.18 ID:NiWy5jYJ0.net] x=<span id="x">0</span>,y=<span id="y">0</span> <p>　</p> <div style="text-align:center"> <canvas id="canvas"></canvas> </div> <スクリプト> var canvas_elm = document.getElementById("canvas"); var x_elm = document.getElementById("x"); var y_elm = document.getElementById("y"); var context = canvas_elm.getContext("2d"); canvas_elm.width = 600; canvas_elm.height = 500; context.fillStyle = "#0000ff"; context.fillRect(0,0,canvas_elm.width,canvas_elm.height); canvas_elm.addEventListener( "mousemove", function(e){ x_elm.innerHTML = e.offsetX; y_elm.innerHTML = e.offsetY; } ); </スクリプト> canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。 スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか？ 207 名前：デフォルトの名無しさん mailto:sage [2022/01/04(火) 19:25:07.68 ID:vw+5Ecnq0.net] スマホなど、色々なデバイスに対応させるのは、 React, Vue.js などのフレームワークを使うのでは？ それと、JavaScript の質問は、この板よりも、 web制作管理板の方へ書き込んでください！ この板のスレは、荒らしが出て、緊急避難用に立てたものだから 208 名前：デフォルトの名無しさん mailto:sage [2022/01/04(火) 19:34:13.24 ID:vw+5Ecnq0.net] >>201 Ruby on Rails では、続きを読むのは、truncate(文字数)。 Railsがどういう実装をしているかまでは知らないけど npm とか、Lodash とかに、そういう関数が無いのか？ 「javascript 続きを読む」「css 続きを読む」で検索してみれば？ 209 名前：デフォルトの名無しさん mailto:sage [2022/01/04(火) 20:53:53.77 ID:QGpHZiP/0.net] >>202 タッチイベントにはevent.offsetX, event.offsetYはありません event.changedTouches[0].pageX等から計算してください 210 名前：デフォルトの名無しさん [2022/01/04(火) 22:55:40.12 ID:NiWy5jYJ0.net] そうなんですか ありがとうございます 211 名前：デフォルトの名無しさん mailto:sage [2022/01/05(水) 10:08:51.69 ID:D2CbxegU0.net] >>206 どう致しまして。 212 名前：デフォルトの名無しさん [2022/01/06(木) 12:37:03.20 ID:qVRSVavo0.net] 質問１　element.addeventlistnerとdocument.addeventlistnerの違いは？ 質問２　 function(elm){ elm.addeventlistner( "click", function(e){alert("クリック");} ); } のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか？ 213 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 12:51:53.90 ID:/RkhTEU50.net] 外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。 jQuery で書いた <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 ) { console.log( $( event.target ).prop( 'value' ) ) } ); この板よりも、web制作管理板の方へ書き込んでください！ そちらの方が、本スレです 214 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 13:04:40.48 ID:nb3ueMLOM.net] >>208 1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい（一般的には普通は比較的近いコンテナ要素でトラップするもんだが...） 2. その関数なら共通でOK >>209 本当に誘導したいなら、せめてリンクを貼りましょう 215 名前：デフォルトの名無しさん [2022/01/06(木) 14:19:29.65 ID:j/6fwGrk0.net] このスレで質問しても何の問題もありません 荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください 216 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 15:06:56.73 ID:cXhLxUi00.net] >>208 回答1 event.currentTargetが異なる 回答2 e.targetを確認すれば良い 217 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 15:09:56.94 ID:cXhLxUi00.net] >>209 Web制作板でも次スレが立たず、旧スレを再利用してる状態 本スレなど存在していない 本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない 218 名前：209 mailto:sage [2022/01/06(木) 16:09:40.84 ID:/RkhTEU50.net] この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。 本スレは、向こうの方 この板は荒らしが多い 荒らしは短文で、必ず2回書き込む。 複数回書き込むことで、多くの人が書いているように見せる それと、テンプレをしょっちゅう、自分が有利なように書き換える Python のスレのテンプレとか、ひどい。 NGワードは何々とか、しょっちゅう書き換えている まあ、ソースコードを書かない香具師は、 プログラマーじゃないから、相手にしない方がよい 219 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:02:16.03 ID:Ozp6fgWI0.net] window.onload = function(){ } このfunctionって何の意味があるんですかね？ 220 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:09:14.63 ID:N8zU5Utu0.net] 中の変数とかを外から見えなくしてるんじゃない？ 221 名前：デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:28:50.56 ID:aRDKku+G0.net] >>215 変数 = function() { ... } で関数式(無名関数)っていう形で定義できる 関数式についての説明はこの辺を参照 https://ja.javascript.info/function-expressions https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions で、window.onload = function() { ... } っていう風に実装すると、少し特殊な動きになって HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload (他言語だとあんまり見ない書き方だから混乱するかもしれんけど） 222 名前：超面白いyoutubeチャンネル [2022/01/06(木) 21:52:51.91 ID:eAd55W1B0.net] https://www.youtube.com/channel/UC9UsyidyKO-s6K8sgWKmE2w 223 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 07:23:20.82 ID:RiDo7mPm0.net] >>217 変数に関数を入れられるんですよね。 処理を直には入れられないから、関数で包むとイメージなんでしょうかね。 224 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 13:51:45.20 ID:RiDo7mPm0.net] <div class="content"> <h2>header2</h2> <h2>header2-2</h2> <h2>header2-3</h2> <h2>header2-4</h2> </div> <script> let content = document.getElementsByClassName("content"); let all_element = content.querySelectorAll("h2"); console.log(all_element); </script> gebcnで取得したターゲットにqueryselectorは使えないんでしょうか？ idで取得したものなら可能なんですけども。 225 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 14:27:21.79 ID:YQSfQDAQ0.net] >>220 contentはgetElementsでHTMLCollectionをとってるので content[0]とかにすればでるんじゃない？ 226 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:28:49.81 ID:RiDo7mPm0.net] >>221 返り値が違うんですね。 要素だけを取ってくるもんだと思っていました。 ありがとうございます。 227 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:31:00.59 ID:RiDo7mPm0.net] エレメントしかいらないのならid使ったほうが良いみたいですね 228 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:36:46.10 ID:HaEbTiQw0.net] document.querySelectorAll(".content > h2"); でよくね？ 229 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 20:54:20.38 ID:RiDo7mPm0.net] こういった場合クラスを使うんでしょうか？ cssではidは出来るだけ使わないということになっているらしいですが 230 名前：デフォルトの名無しさん mailto:sage [2022/01/07(金) 21:09:58.61 ID:/l7S/g/G0.net] できるだけ使わないというか詳細度に関わる 1ページ一回というユニークルールもcss使い回しに不向き 231 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:37:14.84 ID:ly/XOtiZ0.net] classnameでやってみますです 232 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:41:40.78 ID:ly/XOtiZ0.net] >>224 そうやって書けるんすね html collectionの構造がよくわからんくて 233 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:48:14.75 ID:ly/XOtiZ0.net] >>224 いや、これだめでしたね nodelistは帰ってきますけど、h2はとれてないです 234 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:55:36.78 ID:fLniY7PXM.net] 全てconstでOK 235 名前：デフォルトの名無しさん [2022/01/08(土) 07:52:36.25 ID:GNp2CfCTd.net] Android10 F-51A Chrome 93.0.4577.62 ブラウザ上での画像についての質問です。 画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。 エラーメッセージは出ません。 ファイルマネージャーというアプリから起動すると、正常に動作します。 考えられる原因、解決案は、例えば何があるでしょうか。 絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。 236 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 09:00:28.06 ID:5hFueUuG0.net] >>229 最初の一個だけでいいなら let all_element = document.querySelector(".content h2")

---

---

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef