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

**Name_Not_Found** · 2019/12/26(木) 19:50:04.40

JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです

■前スレ
+ JavaScript の質問用スレッド vol.142 +
https://mevius.5ch.net/test/read.cgi/hp/1568622157/

**263** · 2020/02/07(金) 10:30:00.42

>>254
var a = function(url){
var requestFile = new XMLHttpRequest();
requestFile.onload = function () { };
}

var b = function(url){
var requestFile = new XMLHttpRequest();
requestFile.onload = function () { };
}

上は、a 関数内の処理の定義で、
下は、b 関数内の処理の定義だから、全く別の定義です！

new で作っている、2つのXHR インスタンス、requestFile も、
同じ名前ですが、異なるインスタンスです！

これを同じ、1つのインスタンスで使いたいなら、外のスコープで定義しないといけないのでは？
できるかどうか知らないけど

var requestFile = new XMLHttpRequest();

var a = function(url){
requestFile.onload = function () { };
}

var b = function(url){
requestFile.onload = function () { };
}

**263** · 2020/02/07(金) 10:33:25.59

でも、1つのXHR インスタンスで、2回もonload を呼び出してくれるのか？

**Name_Not_Found** · 2020/02/07(金) 12:51:07.12

>>266
aのrequestFileを取得する必要は無いでしょ
プロトタイプに上書きされないようにセットすることはできるんだから

**Name_Not_Found** · 2020/02/07(金) 15:57:27.27

>>268
上書きしたいって言ってるんだから２回呼び出されなくていいんでね？
複数回呼び出したいならonloadプロパティではなくaddEventListener使えばいいんだし

**Name_Not_Found** · 2020/02/07(金) 17:31:39.36

>>269
どうやって、loadイベントをセットするの？

**Name_Not_Found** · 2020/02/07(金) 23:00:46.73

XMLHttpRequestを上書きすればいくらでもやりようがある

**Name_Not_Found** · 2020/02/08(土) 08:45:28.38

>>272
それだとプロトタイプ云々は関係なくなるな >>265

**Name_Not_Found** · 2020/02/10(月) 14:15:27.84

対応希望ブラウザはIE11,chromeです

閉じるボタン（ブラウザの×ボタン）または、こちらで用意したキャンセルボタンをクリックしたかどうかを判定する方法はありますか？

モーダル画面を開く処理の実装中です
子画面を開くときに親画面を操作不可にする処理を実行し、onunload処理で親画面に付与した操作不可の状態を解除するという流れにしています
しかし、子画面の中で画面を閉じる以外にもポストバックが走る処理があり、それらが実行された際にonunload処理が実行されてしまい小画面が閉じていないのに親画面が操作可能になってしまうという問題が生じています。
閉じるボタンまたはキャンセルボタンが押下された場合のみonunload処理の中身が走るように分岐を加えたいのですが、それらを判定する方法があれば教えてください

**Name_Not_Found** · 2020/02/10(月) 14:56:30.98

button要素にbisabled設定してJSのifでtrue,false設定しよう

**Name_Not_Found** · 2020/02/11(火) 10:16:07.02

bisabled?
disabledの誤字ですかね
閉じるボタンを押したらそのボタンをdisabledにしちゃえという感じですかね

**Name_Not_Found** · 2020/02/11(火) 12:53:55.11

>>274
> onunload処理の中身が走るように

onunloadは使ってはいけません。
最後の最後の最後の手段で実行されてなくて問題ない
という場合にのみおまけで実行するためのものです。

**Name_Not_Found** · 2020/02/11(火) 21:48:45.64

特定の変化をキャッチして状態を測ろうというのは特定の場合には効果的だが、
そうでないときはできるのならばポーリングで直接状態を調べたほうが良い
まあ、今はnavigator.locksという素晴らしいAPIもあるんだがIE11では当然使えないしな

**Name_Not_Found** · 2020/02/12(水) 11:58:31.11

text=''あいうえお<br><br>かきくけこ<br><br>さしすせそ";
という文字列をPタグで囲って
<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p>

としたいのですが、

var array = text.split(/<br>+/);
var html = "";
for (var i = 0; i < array.length; i++){
html += '<p>' + array[i] + '</p>';
}

だと空の<p></p>もできたりして上手くいきません。
どのように書けばよいのでしょうか？

**Name_Not_Found** · 2020/02/12(水) 12:14:37.53

>>279
text.split(/(?:<br>)+/);

**Name_Not_Found** · 2020/02/12(水) 13:08:38.83

>>280
できました！勉強になります。ありがとうございました

**Name_Not_Found** · 2020/02/13(木) 06:19:26.68

'<p>'+text.replace(/(<br>)+/g,'</p><p>')+'</p>'

**Name_Not_Found** · 2020/02/14(金) 17:14:00.59

var str="あいうえお<br><br>かきくけこ<br><br>さしすせそ";
console.log( str.split(/(?:<br>)+/).map(t=>`<p>${t}</p>`).join('') );

**Name_Not_Found** · 2020/02/14(金) 19:27:36.41

>>279
文字列でなく、ノード単位で扱った方が良いと思うけどな

**Name_Not_Found** · 2020/02/17(月) 08:17:57.89

パーフェクトスクロールバーってやつを導入したんだけど、横方向のスクロールバーだけ非表示にする方法はありますか？

**Name_Not_Found** · 2020/02/17(月) 09:58:52.27

>>285
noneにする

**Name_Not_Found** · 2020/02/17(月) 14:26:36.07

消えました
ありがとうございます

**Name_Not_Found** · 2020/02/17(月) 14:31:01.59

もう一個パーフェクトスクロールバーについて質問です
二つのdiv要素を縦に並べて配置していて、その２つを含む親のdiv要素にスクロールバーを設定しているのですが、その画面を表示すると二つ並べたdiv要素のうち上の要素の高さ分だけスクロールバーが表示されてしまいます
そして、画面上でホイールをクルクルさせると親のdiv要素全体のスクロールバーがちゃんと表示される（最初に表示された変なスクロールバーは消える）という状況が起きているのですが、最初から正しく表示させる方法はありますか…

**Name_Not_Found** · 2020/02/17(月) 18:15:56.00

max-heightを設定しておく

**Name_Not_Found** · 2020/02/18(火) 04:30:37.70

下記リンクのページについて質問があります。

https://www.englishplus.jp/nuance/to-me-for-me/

firefoxでjavascriptを無効にして開くと、右クリックメニューは出るようになったのですが、
うまく、CTRL+Aや、文字列選択ができません。

javascript以外にどんな機構が働いてこのような挙動になるのでしょうか。
また文字列選択や、CTRL+Aをできるようにするにはどういうことが考えられるか教えてください。

**Name_Not_Found** · 2020/02/18(火) 06:10:50.22

「右クリック禁止解除アドオン firefox」で検索！

右クリック禁止は、
document.oncontextmenu=function(){return false;};

これを、
document.oncontextmenu = null;
で解除できるけど、

テキストの選択禁止は、解除できないので、
下の語句で検索して、解除していかないといけない

document.onselectstart, document.ondragstart, onclick,
stopPropagation, preventDefault, return false

**Name_Not_Found** · 2020/02/18(火) 13:24:44.70

>>291
レスありがとうございます。

教えてもらったdocument関係のステートメントはjavascriptだと思うんですが、
firefoxで、javascript.enabledをfalseに切り替えたにも関わらず、
それらが動作するのは不思議です。

**Name_Not_Found** · 2020/02/18(火) 13:30:08.32

>>290
そのサイトはjavascriptではなくcssのuser-select: noneで選択できないようにしてあるから
ちなみにfirefoxはjavascript切らなくてもshift+右クリックでコンテキストメニューを出せる

**Name_Not_Found** · 2020/02/18(火) 18:06:54.05

そういうユーザビリティの欠片もないサイトは見ないに限る

**Name_Not_Found** · 2020/02/18(火) 20:32:09.04

うぜえと思って大昔適当なユーザースクリプトを書いたが7,8割はそれでずっと間に合ってるな
それも効かないやつはdevツールから見るか諦める

**Name_Not_Found** · 2020/02/18(火) 22:04:04.27

cssの、user-select: none か！
初めて知ったw

ケチ臭え。テキストぐらい、コピーさせろや！w

**292** · 2020/02/19(水) 01:22:36.64

>>293
詳しい方、どうもありがとうございます。

>>296さんではないですが、
私も初めて知りました。

チップスを含めてとても参考になりました。

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

**Name_Not_Found** · 2020/02/19(水) 10:24:18.30

昔だったらjs使わなきゃダメだったことも
ie捨てればhtmlとcssでできたゃうことが多くなったね

**Name_Not_Found** · 2020/02/19(水) 13:11:05.45

プログラミングしたいけど顔がキモオタ顔になるのが嫌です
職場のseの話し方とか顔が嫌い
最近ネットに増殖してきたエンジニア系男子の顔も本当に嫌い

どうすればいいですか

**Name_Not_Found** · 2020/02/19(水) 15:10:00.96

>>299
鏡を眺めて表情を作る練習をしましょう

**Name_Not_Found** · 2020/02/19(水) 18:39:06.55

>>299
仕事の悩み相談スレを探せ

**Name_Not_Found** · 2020/02/19(水) 22:21:10.00

>>298
IEは昔からCSSの対応はそんなに悪くないぞ
IE発のものも多いし

**Name_Not_Found** · 2020/02/20(木) 01:13:35.39

ウェイ系行けよ

**Name_Not_Found** · 2020/02/20(木) 08:21:04.75

>>299
プログラマの雑談部屋 ★95
https://medaka.5ch.net/test/read.cgi/prog/1582036051/

**Name_Not_Found** · 2020/02/20(木) 14:26:04.22

>>293さんの投稿について、
ブラウザプラグインで、
cssのuser-select: none を抜くようなことができたらいいのに。
あるかな？

**Name_Not_Found** · 2020/02/20(木) 20:18:49.87

幾つかのイベントでトップレベルでstopImmediatePropagationする
style*="user-select"を走査して外す
それだけでも半分以上に効果がある

**Name_Not_Found** · 2020/02/20(木) 22:44:18.76

jQuery で、すべての要素を巡回しながら、user-select: none; なら、auto に変更する。
Chrome では、正常に動いた

$( function ( ) {
const user_selects = [ 'user-select', '-moz-user-select', '-webkit-user-select', '-ms-user-select' ];

$( '*' ).each( function ( index, element ) {
user_selects.forEach( elem => {
that = $( this )
if ( that.css( elem ) === 'none' ) { that.css( elem, 'auto' ) }
} );
} );
} );

**307** · 2020/02/20(木) 22:49:23.12

>>307
修正。上下が逆だった

>user_selects.forEach( elem => {
>that = $( this )

that = $( this )
user_selects.forEach( elem => {

**Name_Not_Found** · 2020/02/21(金) 00:07:12.59

質問です
classって名前空間に閉じ込めることはできないんですかね？

他所のJS読んだときに
安易な名前だとぶつかっちゃいそうな気がするんですが

**Name_Not_Found** · 2020/02/21(金) 03:41:00.21

>>307
それをどうやって相手のWEBサーバーからのHTMLに組込めば良いの？

**Name_Not_Found** · 2020/02/21(金) 07:11:09.76

>>309
モジュールがあるでしょ

**307** · 2020/02/21(金) 17:14:59.02

Chrome のF12 開発者ツールのコンソールに、
「ここから～ここまで」の行、つまり「$( function ( ) { } );」の内側だけをコピーして、Enter を押す

これでエラーが出たら、そのページは、jQuery を使っていないから、
以下のすべてをコピーして、Enter を押す。
コードの内容は、head 内に、script タグを作って、Google のCDN から読み込んで実行する

でも、ひょっとしたら、jQuery を使わなくても、出来るかも。
素のJavaScript だけで、書けるかも知れない

const script = document.createElement( "script" );
script.setAttribute( "type","text/javascript" );
script.setAttribute( "src","https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"; );

document.head.appendChild( script );

script.addEventListener( "load", function( ) {
$( function ( ) {
const user_selects = [ 'user-select', '-moz-user-select', '-webkit-user-select', '-ms-user-select' ]; // ここから
$( '*' ).each( function ( index, element ) {
that = $( this )
user_selects.forEach( elem => {
if ( that.css( elem ) === 'none' ) { that.css( elem, 'auto' ) }
} );
} ); // ここまで
} );
} );

**Name_Not_Found** · 2020/02/21(金) 19:56:32.80

>>290のサイトの場合は
TampermonkeyやViolentmonkey拡張等のユーザースクリプトで
// ==UserScript==
// @name englishplus選択右クリ
// @match https://www.englishplus.jp/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function() {
function un(e) { e.stopImmediatePropagation(); }
document.addEventListener('selectstart', un, { capture: true });
document.addEventListener('mousedown', un, { capture: true });
document.addEventListener('contextmenu', un, { capture: true });
document.head.insertAdjacentHTML('beforeend', `<style>
* { user-select: initial !important; }
</style>`);
})();
でおｋ

**Name_Not_Found** · 2020/02/21(金) 21:02:10.11

どんなサイトで来るか分からんしブックマークレットにしたほうが賢いでしょ

**307** · 2020/02/21(金) 21:49:00.00

jQuery を使わず、素のJavaScript だけで書けた！

Chrome のF12 開発者ツールのコンソールに、下のコードをコピーして、Enter を押す

//ドキュメント全体から全ての要素を取得する
const all_elements = document.getElementsByTagName( "*" );

for ( let i = 0; i < all_elements.length; i++ ) {
elem = all_elements[ i ];
if ( window.getComputedStyle( elem ).userSelect === "none" ) {
elem.style.userSelect = "auto";
}
}

**Name_Not_Found** · 2020/02/22(土) 00:41:49.42

>>311
なるほど…

**Name_Not_Found** · 2020/02/22(土) 13:21:02.05

>>309
React, Vue.js か忘れたけど、フレームワークでは、scoped CSS になっていた

**Name_Not_Found** · 2020/02/22(土) 15:30:16.05

プログラミング初心者

質問お願いします
ブラウザの作業を自動化したいと考えてます。ググってみた結果
現在pythonでSeleniumを使った方法を調べてますが、色々と苦戦しております。
検索ワードでjsでもできそうなのですがそもそもプログラムに詳しい方からすると
どちらの方法が好ましい(効率的とか簡単等)のでしょうか？
因みに使用用途はダウンロードを繰り返すというものです。
ひと昔前にあったダウンローダー等使えないサイトとなっております。
宜しくお願いします。

**Name_Not_Found** · 2020/02/22(土) 16:15:07.94

君自身が色々と調べて迷っているのに、
たった数行の情報をここに書いて見た人が何か判断できると本気で思ってるのかい？
せめてここのサイトのこのコンテンツをDLしたいですとか言ってくれないと
可能性が無数にありすぎて何もわからないでしょ

**Name_Not_Found** · 2020/02/22(土) 17:00:20.19

漏れは、スクレイピングに、Ruby, Selenium WebDriver, Nokogiri を使っている

ブラウザの自動操作もできるし

**320** · 2020/02/22(土) 17:08:04.99

【VBScript】WSHについて話し合うスレ【JScript】
https://mevius.5ch.net/test/read.cgi/tech/1578522041/27

ここに書いたように、Ruby, Selenium WebDriver で、
ブラウザを自動操作して、Yahoo に自動ログインしてる

ユーザー名を入力して、ボタンを押す。
パスワードを入力して、ボタンを押す

**320** · 2020/02/22(土) 17:12:48.55

ダウンロードには、wget, curl を使う

それよりも複雑なものには、漏れは、Ruby, Selenium WebDriver, Nokogiri を使うけど、
各サイトの解析が大変

例えば、5ch の投稿から画像ファイルだけを探すのに、
「div.message a」内のURL で、拡張子が「png jpg jpeg gif」のものだけを絞り込むとか、
こういう処理を、Ruby以外で書くのは辛い

Rubyは、可読性が高いから良いけど

**Name_Not_Found** · 2020/02/22(土) 17:39:49.88

javascriptでやるにしてもユーザースクリプトやブラウザ拡張、Node.js+Selenium、Electron等いろいろ方法はあるわけで

**Name_Not_Found** · 2020/02/22(土) 17:59:14.09

場合によってはコンソールに打ち込んでもいいだろうしな

**Name_Not_Found** · 2020/02/22(土) 18:21:29.17

>>313
面白そうで試してみたいけど、
どう使えばいいの？

**Name_Not_Found** · 2020/02/22(土) 18:24:26.43

ググレカス
.user.jsにして拡張機能ページにDnDするだけだろポンコツ

**Name_Not_Found** · 2020/02/22(土) 21:59:56.96

>>326
ありがとう、そのキーワードでググってみるよ

**Name_Not_Found** · 2020/02/22(土) 22:40:57.62

わざわざファイルにせんでもユーザースクリプト拡張で新規作成選んでコピペするだけでしょ

**Name_Not_Found** · 2020/02/23(日) 14:02:07.76

わざわざ拡張入れなくてもファイル１つ作るだけでしょ

**Name_Not_Found** · 2020/02/23(日) 16:48:07.81

これ系は昔からブックマークレットで無効にしてたわ
>>290のサイトも試したがもちろん解除できる

この程度でjQueryを使う必要性も無いし、ユーザースクリプトやブラウザ拡張も不要

**Name_Not_Found** · 2020/02/24(月) 09:54:18.68

こういう直前の１，２レスしか頭に入らないやつをどうにかしてほしい
ブックマークレットの話は十分に出たからそれ以外の解決例をオマケで話してるんだろうが
頭悪すぎ

**きりん** · 2020/02/24(月) 21:11:14.91

Flexboxで二つの列をつくり、左が3つのブロック、右が一つのブロックをつくります。
position:stickyで右側のブロックのスクロールを半固定（左側のブロック要素が全表示されるまで固定）します。

JSでやりたいこと
右側のブロック（#col-4）の左側の中心値から、左側のブロック（#col-1,#col-2,#col-3）の右側中心値まで、
線を描きつなぎます。いろいろと、調べてソースを書き込み、取り急ぎ二つのブロックを繋げてみましたが
うまくいきません。どなたか解決方法をご教授ください。

■HTML
<div class="col-container">
<div class="part-1">
<div class="col must_col" id="col-4">あああ</div>
</div>
<div class="part-2">
<div class="col must_col" id="col-1">いいい</div>
<div class="col must_col" id="col-2">ううう</div>
<div class="col must_col" id="col-3">えええ</div>
</div>
<canvas id="myCanvas" ></canvas>
</div>

**きりん** · 2020/02/24(月) 21:15:31.42

■CSS
<style>
.col-container{
position:relative;
display:flex;
flex-direction:row-reverse;
align-items: baseline;
}
.part-1 {
position: sticky;
top: 0;
width: 48%;
max-width: 48%;
width: 48%;
}
.part-2 {
width: 48%;
max-width: 48%;
align-items: stretch;
justify-content: space-between;
perspective: 800px;
}
.col {
margin-bottom:20px;
}
#myCanvas {
position : absolute;
left: 0px;
top: 0px;
}
</style>

**Name_Not_Found** · 2020/02/29(土) 14:28:18.87

セミコロンの有無について質問です。

const half =(number) => {
return number / 2;
};
―――――――――――――――
If (条件式) {
処理
}

関数を定義する時は }; とするのに、
If文などでは }の後にセミコロンを付けないのはなぜですか？

**Name_Not_Found** · 2020/02/29(土) 15:22:59.46

ifは式じゃないから…というのはCの時代からの構文解析の決まりだな

と言ってもJSはそもそもセミコロン不要だから
本当に飾りみたいなもんだろう

**Name_Not_Found** · 2020/02/29(土) 16:06:58.86

>>334
blockはセミコロンを付けない構文

**Name_Not_Found** · 2020/02/29(土) 17:20:09.16

ありがとうございました！
ブロックという概念があるんですね。
progateでそこら辺のこと書いてなかったんで。
調べてみます！

**Name_Not_Found** · 2020/02/29(土) 19:53:09.59

ajaxについての質問です。
動画サイトにて、下記のように事前に用意した変数を
POSTで送信する場合に、プロパティ名に変数と同名を利用していました。
値のanswerが変数のanswerを参照するのは理解できるのですが、
プロパティのanswerは変数のanswerを参照してしまったりしないのでしょうか？
ajaxの送信する構文の中ではプロパティ名は参照しない…的な仕様なのでしょうか？

...
var answer = $selected.text();
$.post('test.php', {
　　answer: answer
})
...

**Name_Not_Found** · 2020/02/29(土) 20:16:42.47

ajaxに限らずオブジェクト初期化子の裸のキーは変数展開されない
es2015以降であれば
{
　[answer]: answer,
}
のようにブラケットで囲むことで変数や計算結果をキーにできる

**Name_Not_Found** · 2020/02/29(土) 20:16:49.87

>>334
関数を定義するなども;は必須ではない、つけないスタイルもある
ただ特定の場合で次の行と結合するので、そこを気にしたくないのであれば;を無駄につけるというだけ
一方if文などは次の行と結合しないことがわかりやすいのでつけない人が多い
要するに気分や感覚の問題

**Name_Not_Found** · 2020/02/29(土) 20:22:36.99

>>338
https://tc39.es/ecma262/#sec-object-initializer-runtime-semantics-evaluation
LiteralPropertyName:IdentifierName
Return StringValue of IdentifierName.
評価はされない

**Name_Not_Found** · 2020/03/01(日) 10:12:08.14

>>339
ありがとうございます。
いろんな言語の当たり前の仕様だったのですね。
すっきりしました。

>>341
すみません。
翻訳しましたが、よくわかりませんでした…

**Name_Not_Found** · 2020/03/01(日) 12:38:18.25

>>341
ESの仕様書は英語としては難しいものではなく、
withだのofだのandだの小学校レベルの前置詞や接続詞さえ分かればほとんど読める
あとちょこちょこ出てくる単語はプログラミング用語だと思って暗記する
そして根気よく順を追ってゆっくり読んでいく力さえあればいい

まず構文の定義の見方
obj = { key: value }　とあったら
https://tc39.es/ecma262/#sec-object-initializer 　の「Syntax」の所を見て
ObjectLiteral: { PropertyDefinitionList }　から　key: value　がPropertyDefinitionListに当たるでしょ
PropertyDefinitionListのとこをクリックすれば更に定義に飛んで、PropertyDefinitionをカンマ「,」で区切ったものということが分かり、
PropertyDefinitionは４種類あるけど今回はPropertyName: AssignmentExpressionの形でしょ
つまりkeyはPropertyNameってことで、PropertyNameのどちらに当たるかというと
ComputedPropertyNameは[prop]の記法だから、そちらではない方でkeyがLiteralPropertyNameということが分かった
そしてその中でも、文字列リテラルでも数値リテラルでもないのでIdentifierNameということがわかる

**Name_Not_Found** · 2020/03/01(日) 12:39:27.14

>>341
valueも同じように、AssignmentExpressionからたどって
AssignmentExpression→ConditionalExpression→RelationalExpression→ShiftExpression→AdditiveExpression→
MultiplicativeExpression→ExponentiationExpression→UnaryExpression→UpdateExpression→LeftHandSideExpression→
NewExpression→MemberExpression→PrimaryExpression→IdentifierReference→Identifier→IdentifierName
と長いけどただただ適切なところを辿っていけば見つかる
{ key: value }が{ LiteralPropertyName:IdentifierName }の形だということをどうやって知るかが分かったら、次に評価を見よう

評価はざっくり分けて２種類あって、「Static Semantics」と「Runtime Semantics」がある
まずコードという文字列が最初に読み込まれてパースされるときに働く処理がStaticの方で、
上の行から実際に処理が始まってその構文が効力を発するときに働く処理がRuntimeの方と思ったら良い
StaticはRuntimeの前段階とも言えるので、それっぽいRuntimeの目安がつけられるのであれば、
最初にRuntimeを見てわからない定義が出てきたらStaticやSyntaxをみるのが効率がよい

今回はオブジェクトの大本のRuntimeから見ていこう
https://tc39.es/ecma262/#sec-object-initializer-runtime-semantics-evaluation
ObjectLiteral:{PropertyDefinitionList}に当たることはSyntaxで事前に調べて分かっている（ここからリンクを飛んで調べてもよい）のでその下の処理を読んでいこう

**Name_Not_Found** · 2020/03/01(日) 12:40:30.97

>>341
1.Let obj be OrdinaryObjectCreate(%Object.prototype%).
Let X be YとはXをYとおく、つまるところX = Yということ
OrdinaryObjectCreate(%Object.prototype%)はプロトタイプをObject.prototypeとした一般オブジェクトを作る処理
プロトタイプをObject.prototypeとした一般オブジェクトとはつまるところ「 { } 」のこと
つまり obj = { } ということ

2.Perform ? PropertyDefinitionEvaluation of PropertyDefinitionList with arguments obj and true.
Performとは実行すること、PropertyDefinitionList のPropertyDefinitionEvaluationという処理を、1.のobjとtrueを引数として渡して実行
つまり PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true ) ということ
Performの後の?はReturnIfAbrupt処理の省略記法
JSの内部的には何か処理をするたびに、渡された値が期待したものでなかった場合など、エラーが起こりうる
しかし、内部処理を途中で中断することは、エンジンのハングアップや強制終了を意味するのでそれはできない
正しい処理ができたときは、正しい値を普通に返すのと同じく、問題が起きたら問題が起きたという値を返さないといけない
それを判断しているのがReturnIfAbruptであって、正しい処理なら次へ進み、そうでなければ例外を呼び出し元へ返す

つまり、3.Return obj.と合わせるとこういうこと
try {
PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true )
}
return obj

**Name_Not_Found** · 2020/03/01(日) 12:41:52.18

>>341
こういう感じで読んで行けばよい、次に
PropertyDefinitionEvaluationではまず
PropertyDefinitionList:PropertyDefinitionList,PropertyDefinition
が評価されて、カンマで区切られた各プロパティ定義が再評価される、次に
PropertyDefinition:PropertyName:AssignmentExpression
1.Let propKey be the result of evaluating PropertyName.
evaluatingとは評価することで、つまり propKey = PropertyNameの評価
今回はPropertyNameの中でもLiteralPropertyName、その中でもIdentifierNameということが分かっているから、
LiteralPropertyName:IdentifierNameをみて、1.Return StringValue of IdentifierName.
つまり、IdentifierNameの文字列を返すことがわかる

慣れてくるとこの時点でもう先を見る必要はない
もし{key:value}ではなく{'key':value}だった場合は'key'はIdentifierNameではなくStringLiteralになるわけだが、その処理は
1.Return the String value whose code units are the SV of StringLiteral.
つまりその文字列を返すということがわかる
なのでこういう整然とした積み重ねロジックで普通に考えるとこの先の処理で何か違うことが起こるとは考えにくいので
{key:value}と{'key':value}は同じということが予想できる
勿論先に進んでpropKeyがどのように扱われているかを見ていってもよい

ざっくり言うとこういう感じでESの仕様書は読める

**Name_Not_Found** · 2020/03/01(日) 12:46:05.90

>>345 に間違いがあった

try {
　　PropertyDefinitionList.PropertyDefinitionEvaluation( obj, true )
} catch ( err ) {
　　return err
}
return obj

のイメージが正しい

**Name_Not_Found** · 2020/03/01(日) 19:07:03.67

長いw

**Name_Not_Found** · 2020/03/01(日) 23:15:05.87

>>338
例えば、そのオブジェクトと、
そのオブジェクト内のプロパティーのキーが同じ名前でも、区別がつく

let obj = { obj: 1, a:2 }

オブジェクトそのもの
console.log( obj ) //=> { obj: 1, a:2 }

オブジェクトの各プロパティー
console.log( obj.obj ) //=> 1
console.log( obj.a ) //=> 2

**Name_Not_Found** · 2020/03/01(日) 23:47:58.26

オブジェクトに名前はない
名前があるのは関数

**Name_Not_Found** · 2020/03/03(火) 22:31:22.31

吾輩は猫である
名前はまだない

**Name_Not_Found** · 2020/03/03(火) 22:36:14.30

そもそも概念的には一般的に物体というものが名前を保持しているのではない
名前が物体を参照しているのだ

**Name_Not_Found** · 2020/03/05(木) 00:03:06.37

インプットのvalueを変えたいんだけどdomのIdでないと中身変換できないん？
nameもclassもやってみたけどミスってるわけじゃないのに変化しないから気になったんだけど

**Name_Not_Found** · 2020/03/05(木) 00:03:33.19

function EventHandler(event) {
var e = event || window.event;
}

イベントオブジェクトの取得で↑が例としてのってたのですが
またはの記号って左辺が優先されるとかありますか？
event がなければ window.event から取得するみたいな

**Name_Not_Found** · 2020/03/05(木) 05:50:00.42

>>353
JavaScript ID属性で取得/設定する(getElementById)
https://itsakura.com/js-getelementbyid

getElementById は、単数形を返すけど、

下のものは複数形を返すから、最初の要素なら、
elements[ 0 ] みたいな順番を指定しないといけない

var elements = document.getElementsByClassName(names);
elements は、見つかった要素の生きた HTMLCollection です

var elements = document.getElementsByName(name);
elements は、生きた NodeList コレクション

VSCode では、入力補完で、戻り値の型も表示される！

**Name_Not_Found** · 2020/03/05(木) 05:59:03.51

>>354
短絡評価だろ

左が真なら、右を評価しないで、左を戻す。
左が偽なら、右を評価して戻す

let e = 1 || "a" //=> 1

e = null || "あ" //=> あ

**Name_Not_Found** · 2020/03/05(木) 08:34:24.46

>>354
>>3のリファレンスぐらい読め
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

**Name_Not_Found** · 2020/03/05(木) 08:38:40.99

>>353
querySelector
querySelectorAll
getElementsByClassName
他にいくらてもある

**Name_Not_Found** · 2020/03/05(木) 12:04:18.25

>>353
fileは変えられないよ

**Name_Not_Found** · 2020/03/05(木) 15:54:16.11

>>355
どうも、後で見直したら配列で戻ってくるのに気づいてなかった
ありがとう

**Name_Not_Found** · 2020/03/05(木) 16:20:49.73

配列じゃないけどね。
本当に配列が欲しいならArray.from( )か [... ]で囲みなよ。

**Name_Not_Found** · 2020/03/06(金) 00:27:15.97

IE11というクソカスの為にObject.getOwnPropertySymbols()のポリフィルを自作したいんだが、
どんなアプローチでSymbolを区別してやればいいかねぇ？

**Name_Not_Found** · 2020/03/06(金) 07:09:44.34

>>361
配列だろArrayじゃないと言うだけで

**Name_Not_Found** · 2020/03/06(金) 09:20:03.57

JavaScriptにおいて、Arrayの一般的な訳語が配列ではないと言うのなら、そうですね。

**Name_Not_Found** · 2020/03/06(金) 12:16:24.92

>>363
コレクションだ

**Name_Not_Found** · 2020/03/06(金) 12:28:52.50

NodeListは「配列メソッドが使えない！」という誤認が初心者でよく見かけるな