+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net

2017/04/02(日) 23:30:38.56

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:----: EXT was configured

2021/04/29(木) 09:34:41.24

>>434
関数が寒くて風邪をひかないように服を着せているんです。

2021/04/29(木) 10:05:07.56

>>434
ここで質問している人は回答を貰っても何故無反応なのですか？

2021/04/29(木) 10:27:52.89

IIFE (Immediately Invoked Function Expression; 即時実行関数式) は、
定義されるとすぐに実行される、JavaScript の関数です

関数を定義して即実行したい場合、( ) で囲んで、式にする

JS の質問は、web制作管理板の方へ書き込んでください！
この板のスレは、荒らしが出た時に、緊急避難用に作られたものだから

2021/04/29(木) 12:23:48.15

>>437
どうもどうも
web版のスレは新スレが立ってないのでこっちに書いてみた

2021/05/03(月) 00:14:59.29

仕事でWebアプリケーションを作ってる方にお聞きしたいんですが、
jsやcssをいわゆるmin化するのに何使ってます？

Web上のサービスでやるのはセキュリティ的によろしくないのでローカルで完結できるものがあればと思いまして調べたら何個かあるみたいなのですが、主流はどれなのかなと…

2021/05/03(月) 17:20:40.35

全Rubyistに今すぐ伝えたいwebpackとwebpacker
https://qiita.com/jesus_isao/items/1f519b2c6d53f336cadd

Ruby on Rails では、この2つを使っているらしい

webpacker の内部のpackage.json

"mini-css-extract-plugin": "^1.0.0",
"terser-webpack-plugin": "^4.0.0"

この2つは、webpack のサイトにも載ってる
https://webpack.js.org/plugins/

2021/05/07(金) 11:11:04.70

質問です。

下記みたいに複数の配列の各要素を合算した配列を作成するために、
スマートなやりかたはありますでしょうか。

function sumItems(hogearray, fugaarray){
let len = hogearray.length;
let sumarray = [];
for (var i = 0; i < len; i++) {
sumarray.push(hogearray[i] + fugaarray[i]);
}
return sumarray;
}

let arr1 = [1, 2, 3, 4];
let arr2 = [4, 5, 6, 7];

console.log(sumItems(arr1, arr2));
→(4)?[5, 7, 9, 11]

上記のsumItemsをもうちょっと賢く行いたいです。
lodashもざっくり見たのですが無さそうなので・・・。
（本当に欲しいものはこのような配列を不特定多数渡して合算した配列を作りたいです。
　ChartJsの積み上げグラフで、合計の線グラフを差し込むのにあればいいなと思っています）

2021/05/07(金) 12:18:29.36

>>441
for使うコードとしては十分にスマートだと思うが…
関数型がスマート打と思うならArray#mapとか

2021/05/07(金) 14:03:34.51

>>442
なるほど！Array.mapにindex使えばよかったんですね！
これで出来ました！（newarrのところ）

function sumItems(hogearray, fugaarray){
let len = hogearray.length;
let sumarray = [];
for (var i = 0; i < len; i++) {
sumarray.push(hogearray[i] + fugaarray[i]);
}
return sumarray;
}

let arr1 = [1, 2, 3, 4];
let arr2 = [4, 5, 6, 7];

let newarr = arr1.map((value, index) => {
return value + arr2[index]
});

console.log(sumItems(arr1, arr2));
console.log(newarr);

↓
(4)?[5, 7, 9, 11]
(4)?[5, 7, 9, 11]

ありがとうございました！

2021/05/07(金) 14:50:50.30

無理に関数型で書くのはどうかと思う
↑で十分

2021/05/07(金) 21:41:50.48

>>444
スマートというふわふわした理由でfor文を毛嫌いしないで欲しいとは思う

2021/05/07(金) 22:28:49.44

Ruby では、zip で、

pp result = [1,2,3].zip( [4,5,6], [7,8,9] ).map( &:sum )

出力
[12, 15, 18]

**446** (ﾜｯﾁｮｲ 692c-M0W8 [180.26.204.51]) · 2021/05/07(金) 22:34:04.42

Lodash にも、zip ある

_.zip( ['a', 'b'], [1, 2], [true, false] );

// [ ['a', 1, true], ['b', 2, false] ]

2021/05/08(土) 08:52:00.58

極論だけどあんまり内包表記とかラムダ式とか関数型的な書き方ばかりしてるとあの人のコードは短いけど読みにくいから一緒に仕事したくないって言われるぞ

2021/05/08(土) 19:17:06.73

var data_array = [];

～いろいろと処理～

このとき、処理に分岐によって、配列を空にしたときって
data_array.splice(0);
っとしているのですが、配列を空にするなら
data_array = []の方がいいのでしょうか？

2021/05/08(土) 20:14:59.28

data_array.length = 0;

2021/05/10(月) 01:09:13.09

https://jsfiddle.net/s1awpc0b/

すみません、JS、jQuery初心者なのですが質問させてください。
「リストの中の文字をホバーしたら、タイトル内のテキストがその文字列に置き換わる」
という機能を実装したいと考えております。

しかし、実際にやってみると、何故か最初に一回変わるだけで他のリストにホバーしても
最初と同じ文字列が出てきてしまうのと、ホバーを外した際にタイトル内のテキストを
元の文字に戻す方法が分からず、困っております・・・

この場合、有効な手段などあれば教えて下さい。よろしくお願いします

2021/05/10(月) 01:32:31.24

.parent(ttl)ってbodyを指してるからじゃないの
jqueryは知らんからどう置き換えたらいいかは分からんけど

2021/05/10(月) 02:00:41.51

ttl.find('p').text(navtxt);

2021/05/10(月) 23:59:24.06

const navtxt = $(this).find('p').text();

find() メソッドは、提供されたテスト関数を満たす配列内の、最初の要素の値を返します。
最初の要素だから、p が複数あるなら、別々に指定しないといけない

テスト1 のp
テスト2のp
テスト3のp

個別に、クラスか何かを付ければ？

2021/05/11(火) 02:35:02.21

var l = data_array.length;
if (l > 51) {
l = 50;
}
for (var i3 = 0; i3 < l; i3 += 1) {～略～}

なんか、書き方がダサい気がする、かっこよくて見やすい書き方
をご教授願います。

2021/05/11(火) 02:53:40.06

const l = Math.min(data_array.length, 50)
for(let i3 = 0; i3 < l; i3++){}

変数名がダサいのは直してない

2021/05/11(火) 03:24:41.76

>>456
早速の回答、ありがとうございます。
変数名や関数名の付け方がよくないのは
上司によく言われますが、直しません。

2021/05/11(火) 03:50:48.88

Ruby なら、Range で、0以上・len未満

( 0...len ).each { |index| p index }

出力
0
1
2

2021/05/11(火) 06:41:38.89

>>456
l=51の時、>>455と結果が違う

2021/05/11(火) 13:35:37.63

>>459
すいません。元のコードが間違えていました。
lに入る値の最大値が50が正しいです。

2021/05/13(木) 23:48:22.88

複数の画像を全て読み込んでからfunc1を実行したい場合、このような書き方で間違いがあったら教えてください
var img_obj_list = [];
var img_file_list = ["./test1.png","./test2.png","./test3.png"];

for(let n=1;n<=3;n++){
img_obj_list[n-1] = new Image();
img_obj_list[n-1].src = img_file_list[n-1];
}

var img_load_count = 0;

for(let n=1;n<=3;n++){

img_obj_list[n-1].onload = function(){

img_load_count++;

if(img_load_count == 3){

func1();

}
}
}

function func1(){alert("");}

2021/05/14(金) 00:39:39.82

細かくは確認してないけどonloadはpromiseでwrapするといい

2021/05/14(金) 00:40:22.23

画像の読み込み完了は、非同期処理か。
そりゃ難しい

async/await とか使えないのか？

2021/05/14(金) 02:11:40.87

>>461
Promise.allを使うか、handleEventを持つオブジェクトにload回数を埋め込んで管理すれば良い

2021/05/14(金) 07:15:30.72

promiseっていうやつですか
調べてみます

2021/05/15(土) 08:00:49.27

aaa.pngという幅１００ピクセル、高さ１００ピクセルの画像があるとして

<img src="aaa.png" id="aaa">

var elm = document.getElementById("aaa");
var rect = getBoundingClientRect();
としたら
rect.leftが8でrect.rightが108でした。

これって幅が101になるのでおかしくないですか？
rect.rightは107にならなければならないのに。

2021/05/15(土) 08:24:12.13

訂正elm.getBoundingClientRectです

2021/05/16(日) 00:04:05.86

正直言って、

(a)=>{

2021/05/16(日) 00:07:02.23

間違いｗ

正直言って

(a)=>{
　bar(a);
}

を引数に渡すのって可読性どうなんだろう？数学的には
美しいのかもしれないけど、世の中の大部分のプログラムは
そういうところまで行ってないプログラマが組んでるわけで。

そのうち、「大多数のプログラマにとって理解しやすいかどうか」理論
みたいのが出てこないかと…。

2021/05/16(日) 07:43:31.39

「大多数のプログラマ」じゃなくて「一年後の自分」で考えればいい
一年経ったら成長するだろ？その時に自分が辛くなるようなコードを書きたいと思うか？

プログラマを一年程度で使い捨てにしているところなら、
そりゃ一年以内の知識だけでやりゃあいいだろうさ
一年後にはプログラマをやってないわけだからな

成長するたびに自分が苦しくなるようなコードを
書き続けなければいけないのは地獄だってわかるかい？

2021/05/16(日) 07:43:31.96

四則演算も出来ないのか....

2021/05/16(日) 10:19:50.12

>>469
その関数だけ見せられてもなにを意図したコードかわからんからなんともいえない

2021/05/16(日) 12:32:29.26

>>471
x座標8～108だと101ピクセルあるので幅101になる
108-8=幅100ピクセルではない
なので107にならなければおかしいので間違ってないですよ

2021/05/16(日) 18:22:27.95

>>473
width=0ならleft,right値が何になると思ってる？

2021/05/16(日) 19:39:53.23

>>466,473
あなたのロジックではこうなる

width=100なら、left=8,right=107
width=1なら、left=8,right=8
width=0なら、left=8,right=7

座標に1*1pxの実体があると認識してそう

2021/05/16(日) 19:59:20.58

>>469
コードが断片的でわからんが、https://medaka.5ch.net/test/read.cgi/prog/1582181395/27 のことか？
> 27 仕様書無しさん 2020/05/24(日) 15:41:00.93
> 最近の言語って、
>
> Button.addEventListener('click', () => {
> //TODO　ずらずらー
> })
> みたいな書き方が、主流のようなんだけど、
>
> 関数は関数できちんと宣言して書いて
> ButtonClick_Function(){
> ずらずらー
> }
> 他の関数(){
> ずらずらー
> }
>
> で、メインの部分で
> 　Button.addEventListener('click', ButtonClick_Function());
> 　オブジェクト.addEventListener('他のイベントA', 他の関数A());
> 　オブジェクト.addEventListener('他のイベントB', 他の関数B());
> 　オブジェクト.addEventListener('他のイベントC', 他の関数C());
> と、ロジックはロジック、コールはコールとかで並んでたほうが可読性高くね？？
> (以下略)

2021/05/16(日) 21:30:12.14

>>475
MSペイントを拡大してドットを打つと一番左上のドットが(0,0)で右隣が(1,0)になってるよ

2021/05/16(日) 22:14:20.49

>>477
MSペイントとCSSで同一のロジックが通用する根拠は何だ？

2021/05/16(日) 22:43:10.57

<img src="test.png" id="test" style="border:Solid 20px #0000ff;padding:10px ">
の画像のブラウザ上での絶対座標はどうやって求めるんですか？
getBoundingClientRectのleft,topだとborderとpaddingを含んだ座標になるので
これらを含まない画像のみの座標で

2021/05/16(日) 22:55:03.32

htmlと画像は別物なんだから同じサイズになるわけないだろ
あとhtmlは仮想サイズ使ってるからドットバイドットじゃない

2021/05/16(日) 23:19:05.48

>>474,478はスルーか

2021/05/17(月) 01:35:41.32

HTML の要素内の位置とか、求めるのは無理じゃないか？

ピクセル操作なら、WebGL, Canvas みたいな所に描かないと無理かも

2021/05/17(月) 08:40:57.94

>>480
html上の座標もpxピクセルで指定するのに何が違うのかわからん
>>481
width=0ならleft=8,right=7になるのでwidth=0ならエラー処理にする

2021/05/17(月) 20:48:45.14

>>483
CSSボックスモデルはwidth=0を認めているのでエラー処理にするのは間違い

2021/05/18(火) 08:20:27.46

やっとわかった
ワイが言ってたのはグリッド座標ではなくピクセル座標のことか
四角形の場合ピクセル座標の右端を＋１すればグリッド座標になるな
左端は同じだけど

2021/05/18(火) 08:27:50.81

>>482
element.clinetLeftで左側のborderの幅を、element.clinetTopで上側のborderの幅をピクセルで取得できるので
getBoudingClientRectのleftとtopの座標にそのぶん加算すれば座標取得できたけど
問題はpaddingの幅をピクセルで取得できないこと
element.style.paddingLeftだとem指定の場合ピクセルで取得できないし

2021/05/18(火) 08:48:41.79

>>486
computedStyle

2021/05/30(日) 12:34:06.53

ググるとforは普通のカウンターがだいたい最速のようですが
普通の言語は高速化のためにeach系があるはず

でも自分のサイトはEgdeで見る限り、forEachの方が若干速いような（ほとんど差はないですが）
forEach＞forカウンター＞for of
（for ofはforEachの改良版だと思ったんですが…）

でも基本的にjavascriptは驚くほど速いと思います
カウンターとeach系があまり変わらないのはeach系の性能が悪いというより、添え字検索が工夫されてるんでしょうか？
最後に見た要素の位置が保持されてて、次に来た添え字が1つ上なら再検索せず、each系のように次を返すとか

2021/05/30(日) 13:00:26.46

そりゃ固定長の配列なら、リストをたどらないで、数値インデックスだけで計算できる。O(1)

例えば、8バイト固定長で[100]なら、800バイト先に内容のアドレスが書いてあるから、
そのアドレスから内容を読み込めばよい

一方、Elixir の片方向リストでは、先頭要素だけが速いだけで、
末尾要素はリストをたどって行くから、O(N)

Ruby では両方向リストだから、末尾も速いけど、メモリを食う

つまりデータを、固定長の配列の並びか、リストで構成しているかによる

2021/06/01(火) 16:14:06.00

http://newpuru.doorblog.jp/
このサイトは何でfeedを取得しているのでしょうか？
ライブドアブログなのでphpは使えないはずです。

2021/06/01(火) 18:22:57.66

どこかのサーバーで、Ruby など何かの言語で、データを集めておいて、
JavaScript(JS)で、そのサーバーにアクセスして結果をもらっているとか？

それか、サーバーを使わずに、
JSで直接データを集めて、集計しているとか？

2021/06/02(水) 19:45:33.58

javascriptでh1やh2を検出して、ページ内リンクを作ることは可能ですか？
ライブドアブログで作ろうかと思います。
アンカーつけるのが面倒なので。

見出しにはアンカーはありません。
その場合でも場所を指定して、飛べるんでしょうかね。

2021/06/02(水) 20:23:28.73

jQueryですぐできそう

2021/06/02(水) 20:54:14.32

他の言語とかフレームワークのスレ行ってみたけど糞みたいな流れでうんざりしました
ここの住人いい人多かったのね…
いつもありがとうございます。

2021/06/03(木) 02:44:28.14

本当は、web制作管理板で、JavaScript のスレを立てるべきだけど、誰も立てない。
jQuery のスレはある

この板のスレは、web制作管理板が荒らされた時に、緊急避難用に立てられたもので、
本来は板違い

2021/06/03(木) 07:23:01.03

Web制作板は荒れ放題だったし、存在価値を感じない
質問者のマナーの悪さはこちらでも変わらない

2021/06/03(木) 12:05:06.51

>>493
jqueryありじゃないとだめなのですか。
なんにしろ見出しにidを付与しないとだめですよね

2021/06/03(木) 12:11:00.36

素のJavaScript は、ややこしい

そのブログシステム自体が、jQuery を使っているかも知れない。
その場合、そのまま使えるかも

2021/06/03(木) 12:22:40.14

jQuery学ぶのも大変なのでjsでやろうとしてます
とりあえず動的にidを追加することがまず必要ですよね

2021/06/03(木) 13:24:01.98

idを付けずに実現するとしたら……
・querySelectorAll()で見出し要素をリストアップして表示
・それぞれのonclickイベントにwindow.scrollBy()でその要素の座標に飛ぶ関数を充てる
とか

2021/06/03(木) 14:33:40.15

>>492
テンプレのFAQ>>3が素のJSで書いていた
hx要素を拾ってid拾うだけだし、そんなに難しくはない

2021/06/03(木) 14:36:56.38

>>499
①適当なプレフィックス文字列を指定して、後ろに連番を付ける
②id衝突確認→衝突したらインクリメントし続ける

2021/06/03(木) 16:51:19.75

>>500　501　502
ありがとうございます。
つまづいたらまた来ます。

2021/06/03(木) 17:35:57.65

>>499
jQueryは学習コストめちゃんこ低いよ
慣れたら素のJSでDOMいじるのだるくなる

2021/06/03(木) 20:57:45.05

教えてください。
https://gist.github.com/withmama/2925509

(function (global, oDOC, handler) {
～中略～
if (oDOC.readyState == null && oDOC.addEventListener) {
oDOC.readyState = "loading";
oDOC.addEventListener("DOMContentLoaded", handler = function () {
oDOC.removeEventListener("DOMContentLoaded", handler, false);
oDOC.readyState = "complete";
}, false);
}
})(window, document);

上記のようなコードがあるのですが、引数にhandlerに値を渡していないのに
handlerが引数にあります。
これって何か意味があるのでしょうか？

(function (global, oDOC) {
var handler;
if (oDOC.readyState == null && oDOC.addEventListener) {
oDOC.readyState = "loading";
oDOC.addEventListener("DOMContentLoaded", handler = function () {
oDOC.removeEventListener("DOMContentLoaded", handler, false);
oDOC.readyState = "complete";
}, false);
}
})(window, document);
っでよくないでしょうか？

2021/06/03(木) 21:06:53.79

>>505
関数スコープで変数を生成するだけならどっちでもいい
最も変数はなくても実装可能だが

2021/06/03(木) 21:20:16.57

>>505
そもそも、readyStateは読み取り専用なのに再代入するとは…
仕様を理解しているとは思えんコードだな

2021/06/03(木) 22:32:19.08

>>506
ありがとうございました。関数で変数生成しているのですね。
よく考えますと handler = function () でなくてもいいですね。下記のように。
oDOC.addEventListener("DOMContentLoaded", function() {
oDOC.removeEventListener("DOMContentLoaded", handler, false);
oDOC.readyState = "complete";
}, false);

>そもそも、readyStateは読み取り専用なのに再代入するとは…
そういえば、readyStateって勝手に値が変わるはずなのに、代入しないですね普通。

2021/06/03(木) 22:54:07.50

>>508
それじゃremoveEventListenerに渡してるhandlerが…
でもそのブロックの上のコメント見るとFirefox3.5以下用のポリフィルみたいだから今時いらんでしょ

2021/06/03(木) 23:08:16.39

>>508
あなたのコードが間違っているのは2回目なんだが… >>460
検証済のコードを示すように心がけた方がいい

2021/06/03(木) 23:12:45.89

/*
if (oDOC.readyState == null && oDOC.addEventListener) {
oDOC.readyState = "loading";
oDOC.addEventListener("DOMContentLoaded", handler = function() {
oDOC.removeEventListener("DOMContentLoaded", handler, false);
oDOC.readyState = "complete";
}, false);
}*/

こうですね。ありがとうございます。

2021/06/03(木) 23:53:51.85

>>510
はい。ありがとうございました。

2021/06/04(金) 11:50:08.32

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/link
javascriptではクラスという概念はないのでしょうか？
リンク先はdocumentクラスのlinkプロパティと考えているのですが、クラスという文字が出てきませんね。

2021/06/04(金) 11:56:45.37

連投すみません。
prototypeというのは、クラスのプロパティにアクセスするための記述と考えてもいいでしょうか？
prototype=組み込み、といった意味だと思いますし、、、。

2021/06/04(金) 12:13:36.89

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/link
javascriptでlinkメソッドが非推奨になったようですが、代わりに何を使ってリンクをつけるんでしょうか？

2021/06/04(金) 12:14:09.97

>>513
糖衣構文としての class はあるが、クラスの概念はない
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

[[Prototype]] とプロトタイプチェーンの理解が必要

2021/06/04(金) 12:19:22.31

>>514
組み込みはビルトイン
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects

プロトタイプは原型の意だろう
https://www.weblio.jp/content/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97
https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

2021/06/04(金) 12:20:38.14

>>515
createElement
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

2021/06/04(金) 18:27:11.43

let get_ul = document.querySelector("#test_ul");
let str = "hogehoge";
get_h2.insertAdjacentElement("beforebegin",str);

こうするとstrはオブジェクトじゃない、というエラーが出ます。
javascriptにおいてのオブジェクトとは、dom、つまりhtmlの構造を持つもののことでしょうか？
文字列を入れたいのなら、htmlと連結するのでしょうか。

>>516,517,518
ありがとうございます。全部見させてもらいます。

2021/06/04(金) 18:29:25.67

insertAdjacentText

2021/06/04(金) 18:32:49.09

↑上でやりたかったことはタグの中に文字列を挿入したかったのです
<a></a>
↑ここに「あああ」をはさみたいのです
innnerhtmlより、insertadjacenthtmlがいいと聞いて使ってみたんですが、文字型はオブジェクトじゃないと、、、。

2021/06/04(金) 18:38:54.51

>>521
textContent
createTextNode

2021/06/04(金) 18:44:54.98

>>519
あなたはまず、DOMのノードの概念を学んだ方がいい
https://uhyohyo.net/javascript/2_1.html
HTMLタグで捉えるから本質とかけ離れた考え方をするようになる

2021/06/04(金) 18:56:14.50

>>522
回答どうも
タグで包んだ場合はいけました

文字列だけの場合はtextContentですね

しかし、これはすべての内容物を書き換えてしまいます
そこでinsertadjacentを使いたかったです

2021/06/04(金) 19:14:18.33

>>524
挿入ならappendChildでも良い

2021/06/04(金) 20:28:32.31

>>525
ありがとうございます。
オブジェクトとそうでないものの違いってなんでしょうか？
全てはオブジェクトだと思うんですが。
stringはオブジェクトじゃないと。

2021/06/04(金) 21:09:03.37

連投すみません。
既存のタグの中にある文字を挟み込むように、新たなタグを挿入するにはどうしたらいいのでしょうか？

<div id="target_div">もじ</div>
↑これを
<div id="target_div"><p>もじ</p></div>
↑こうしたいです

let target = document.querySelector("#target_div");
let parag = document.createElement("p");
target.insertBefore(spa);

https://gray-code.com/javascript/add-html-element/
appendChild,before,after,insertBeforeはどれも違うようです。
前のpと閉じpを別に挿入することはできそうです。

まずtarget_divに対してpタグを先に追加して、innerhtmlで文字列を挿入したほうがいいのでしょうか？

2021/06/04(金) 21:45:58.82

>>526
オブジェクトでもあるが、ノード
困ったらMDNを読めば大体分かる
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

>>527
replaceChild

いい加減、体系的に学ばないとリファレンスが読めるようにはならないと思うが　>>523

2021/06/05(土) 21:16:58.18

javascriptでボタンを押したときにaaaという変数の値(現在100)を変えるには
<input type="hidden" id="aaa" value="200">というのを作って
ボタンを押したときに
var aaa = document.getElementById("aaa").value;を呼び出すというやり方でやっていますが
この方法以外で変数の値を変えるやり方あったら教えてください

2021/06/05(土) 21:54:26.82

>>529
ボタンが押されたどうこうは変数値を変える機能に直線関係していない

変数値を変えるのは代入演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment
グローバル変数ならdefineProperty等のプロパティ操作系機能も使える

2021/06/06(日) 06:22:02.86

>>528
オブジェクトの種類の１つがノードってことですね
yagniってのを信じてて、使うことだけを勉強すると

>>523
domってのはつまり、ただの階層構造ですよね

2021/06/06(日) 07:01:24.97

現実で実践するのは良いがやり過ぎは友達無くすよ
文字通り要らんのかもしれんけど

2021/06/06(日) 09:39:10.77

javascriptの書物とか動画のおすすめとかある？
すでに書かれてあったらスマソ

2021/06/06(日) 11:35:27.06

javascriptでは単なる文字列はオブジェクトではない、とみなされるようです
ノード（つまりタグ）に対して付与されるものであって、文字自体はオブジェクトじゃないということですよね