+ JavaScript の質問用スレッド vol.142 +
レス数が1000を超えています。これ以上書き込みはできません。
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.141 +
https://mevius.5ch.net/test/read.cgi/hp/1562318008/ ■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。
補足
jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。
1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。
しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。
そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。 ■JavaScript主要ライブラリ・フレームワーク 利用率
https://w3techs.com/technologies/overview/javascript_library/all
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 document.onkeydown = function(e)
というのは何らかのキーが押されたという状態らしいですが、function eってなんですか
なんのキーか取得するための関数？ですか？ >>14
ちんぽを出せ
そしてこの板にUPしろ
それがjsニンジャになる一番の近道だ performance.mark(name)ってnameに同じ名前を入れてもいいらしいけど、それって
どういう風に使うものなのかな？
時間を測定するのにmeasure()を使うなら区別できる名前にしておかないとならないし。 measureを使うならそうかも知れないが
同じ場所で呼ばれたのに毎回違う名前付けるほうがおかしいだろ 逆で、違う場所で同じ名前を使えるのがなんでかなと。
https://developer.mozilla.org/ja/docs/Web/API/Performance/getEntries
ここにそういう例があるんだけどcheck_PerformanceEntryの中身がなくてよくわからない。
measure()しないとdurationは入ってこないと思うんだけど、どうやっているんだか。 なんで違う場所で同じ名前を使えなくする必要があるんだ？
プログラミング言語を何だと思ってるんだ？ >なんで違う場所で同じ名前を使えなくする必要があるんだ？
どこをどう読んだらそんな解釈になるんだか。 違う場所で同じ名前を使えなくする必要性を感じてないのに
違う場所で同じ名前を使えることに疑問を抱くわけ無いだろ
それともおかしいとも思わない森羅万象に対して一々疑問に思って人に聞く迷惑な奴なのか？ 「使えなくする必要性」なんてどこから出てきたんだか。
measure()を使うなら各mark(name)のnameを変えなきゃならんってだけだよ。 こういう１０文字分くらいしかワーキングメモリ持ってない奴と話し合いをすることは不可能 タッチイベントをタッチした瞬間出来るだけ素早く反応させるのはどのような方法をとればいいのでしょうか？
音楽関係のアプリのためラグをなくしたいのですがどうも少し反応が遅れます
少し調べた結果ダブルタップの判定のための遅れ？なのかも？とは思いますが
他にも何かありましたらお願いいたします
HTML
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<audio id = "bass_drum_sound" src="sound/bassdrum/Kick10.wav" preload="auto"></audio>
<div id = "bass_drum"">
<p>バスドラム</p>
</div>
CSS
#bass_drum{
position: absolute;
top: 55%;
left: 30%;
height: 35%;
width: 35%;
text-align: center;
background: rgb(212, 212, 212);
border-radius: 50%;
border: solid black;
}
javascript
var touchPannel = document.getElementById("bass_drum");
function touch(){
bass_drum_sound.currentTime = 0;
document.getElementById("bass_drum_sound").play() ;
}
touchPannel.addEventListener("touchstart",touch); touchstartイベントが何度も起きてそのたびにcurrentTimeが再設定されてる可能性
そもそもKick10.wavの音の最初に無音期間がある可能性 >>27
currentTimeは連打に対応するためにつけてます
一番早そう？だけどどうなんだろ？
無音時間は無いはずですが一番大きい音からスタートとかは調整できるかも？
でも音質考えるとなあ
音ゲーとかどうしてるんだろ？ とにかくタップと再生のどっちで問題起きてるかが分かりにくいので
タップで別の反応（何かの色変えたり文字）が出るようにして問題の切り分けを行ったほうが良い
音ゲー作りたいなら同時再生数を増やさないと話にならない How to select empty inputs (value=“”) using jQuery
https://stackoverflow.com/questions/10651349/how-to-select-empty-inputs-value-using-jquery
ここにjqueryでは[value=""]というフィルタを使えないと書いています
valueの初期値で判断するから、という理由のようですが
何故valueの初期値で判断するのかが分かりません
どういう理由からそうなるのでしょうか？ セレクタは属性値しか見ない
inputタグは後からvalueを変更しようが属性値のｖａｌｕｅが変わることはない
なので入力したかどうかのチェックに[value=""]は使えない >>31
なるほど
値を変えても、ソースリストが変わるわけではないみたいなことですね
ありがとうございました >>30
jQueryではなくDOMの仕様
<input value="test">
input[value="test"] {
color: red;
}
これはページを表示した時に赤くなるが、intputの中もを変更しても色は変わらない
JavaScriptでvalueを変えても同様。valueの値は属性に反映されない。 vueのプロジェクトでtypescriptを利用する場合、コンポーネントの定義をクラスベースな記述ができるくらいのイメージでいいのかな？
typescriptをサポートしているって例でボタンをつくったりとかまでは見かけるけどそれ以上突っ込んだ例が少ないので
ドキュメントを読み解くときそこだけ読み替える感じでいける？ DOM操作をした直後にprompt命令を実行すると、
DOM操作が反映される前にその後のpromptが実行されてしまうのですが、
これをDOM操作を確実に反映させて（強制再描画させて）からpromptが実行されるようにする簡単な方法ってないでしょうか？ >>36例えばこういう感じです。１行目が反映されるのが２行目が帰ってきたあとになるんですよね。
element.style.なんたら=かんたら;
var ok=prompt("これでいいですか？"); >>37
補足
２行目だけ実行されればいいというものではなくて、２行目以降も色々と処理があってそれは１行目の後であってほしいのです。
だから２行目以降全体をsetTimeoutでくくるとかはできれば避けたいです chrome/safariだと古くからあるダイアログは描画保留中のを処理せずに表示しちゃうのか
setTimeout等で一旦ブラウザ側に表示する隙を与えてやるか
今時なやり方はprompt使わずに自前で表示するかかなぁ くくりたくないってのならどっちにしろ非同期しか無くね？
async function a() {
element.style.なんたら=かんたら;
await new Promise((res,rej)=>requestAnimationFrame(()=>setTimeout(res,0)));
var ok = prompt("これでいいですか？");
}
a(); そもそもpromptやalertで一時停止する義務もない中そんな細かい挙動の担保はできない
おとなしくdialog要素使え iframeがクリックされた時に、
どのiframeがクリックされたか表示する方法はありますか？
$("iframe").contents().find("body").on("click", function(){
// alert( $(this).attr('id') );では無理
});
jQueryを使うとこんな感じでiframe内のクリックを実行することはできるのですが、
複数iframeがある状態で、「どのiframeか？」というのを知りたいので、
iframeタグのIDが取得したいです。 >>45
これはiframe内のドキュメントを取得・操作するためのもので、
親要素（iframeそのもの）を取得するのと違うのではないでしょうか？ 情報不足だと思うのでもう少し書きます。
HTML部分が
<iframe id="iframe01" src="test.01html"></iframe>
<iframe id="iframe02" src="test02.html"></iframe>
みたいになっているとします。
>>44に書いたようにiframe内をクリックすると
どのiframeをクリックしたかidが取得できればと思います。
対象のiframeがどれかわかれば、srcを変更して
違うhtmlを読み込んだり出来ると思いまして。 >>44
そこのthisはiframe内のbodyだし
iframe内から外を得る方法は無いはずだからこんな感じ？
$("iframe").each(function(idx, elem) {
$(elem).contents().find("body").on("click", function(ev) {
alert($(elem).attr("id"));
});
}); >>44
ほらよ
https://jsfiddle.net/v9586xo0/
<iframe name="iframe01"></iframe>
<iframe name="iframe02"></iframe>
$("iframe").contents().on("click", function(){
alert(this.defaultView.name);
}); 一応言っておくとフレームをまたがってjQueryでイベントをハンドルすると
よくわからん挙動をしたことがあるので、あまりおすすめしないがな。
イベントの通知は、iframeの中から、親windowの関数を呼び出して
通知するほうが安全だと思うけど、まあ今は解決してるかもしれんし
動くなら別にいいけど >>46
「document.addEventListenerして、documentで判定しろ」というアドバイス
ownerDocumentをとってもいいけど、documentそのものにclick定義する方が手っ取り早い >>51
.contents() が返すのがdocument
だからお前のアドバイスは（内部で）既にやってる documentがユニーク、という事実に質問者も>>52も気がついてないのだろう >>53
めんどくせーやつだな
> 「どのiframeか？」というのを知りたいので、
って書いてあるだろ。
理由も追記してる
> 対象のiframeがどれかわかれば、srcを変更して
> 違うhtmlを読み込んだり出来ると思いまして。
最初に書いてあるとおり「どのiframeか？」を知りたいのに、
document（jQueryで言えばcontents().onの中のthis）で判定しろと言われても
判定した所で、iframeにはたどり着かないだろ。
その（iframeの中のdocumentから）iframeにたどり着く方法を聞いているというのに
俺はわかるが、あんたに答えるチャンスをやろう。 >>55
君イエローカード
対話する気があるのなら言葉に気をつけろ
次やったら退場ね
このスレの全員で君を無視するから >>56
お前はレッドカード（笑）
このスレの全員で君を無視することになった >>55
めんどくせーのはお前だよ
iframeとdocumentの関連付けが出来たんだから、documentからiframeを追えないわけがないでしょ >>60
だから、俺も追えるって言ってる。
質問者が聞いてるのは、追う方法であって、
「追えますか」→「追える」という答えは聞いていない。 >>57, >>58, >>59
キタキタ
人の発言をパクることしかできない無能
がっつり釣られましたとさ >>61
勝手に質問者の代弁してるんじゃねーよ
お前の勝手な考え・思いを他人に押し付けるな
何様のつもりだよ 例えば、これはiframeのnameがわかるから
$("iframe").contents().on("click", function(){
alert(this.defaultView.name);
});
これで追えるわけ
$("[name=" + this.defaultView.name + "]")
でもdocumentがわかったとしても、↓のようなやり方でiframeを追うことは出来ない。
$(document) >>63
質問者が書いてるじゃん。iframeのsrcを書き換えるって。
iframeの親で、iframeのdocumentがわかるとして、
どうやってiframeの親から、iframeのsrcを書き換えるのさ？ >>65
お前さぁ……
流石に呆れてしょうがないんだけど教えてやるよ
ここはどんなスレだ？
JSを自ら学ぶためのスレ
だろ？
なんで１から１００まで答えを書かないといけないんだ？
いろんなやり方のヒントを示して、質問者が自分の頑張りで解決することを後押しするスレだろ
どうしても分からなければ質問者は追加で質問すればいいだけなんだよ
なんで回答者は抜け目なく回答してあげないといけないんだ？
スレの趣旨と反してるだろ
それくらい分かってくれよ
頼むからさ >>66
だから、お前の場合、ヒントになってないって話をしてる $("iframe").contents()を使ったコードを書いてる人に対して
「.contents() 使えばいいよ」が全くヒントにならないことぐらいわかるやろ？
※ .contents() は contentDocumentのjQuery版 >>61
本当にめんどくせー奴だな
documentからiframeを追える事が分かっていて、>>55の反応なら尚更に驚きだわ
for (let iframe of document.querySelectorAll('iframe'))
iframe.ownerDocument.addEventListener('click', event => console.log(iframe), false);
で、何が問題なのかをいってみろ >>49
ありがとうございます！this.defaultView.nameというのが必要なんですね。
ここからidとれそうなので、質問したことができそうです。
私の質問がきっかけで揉めてるようですが、、、
私自身は納得しましたので、終了でお願いします。
みなさん、ありがとうございました。 >>67
そう思うのは勝手だが、他人にお前の思いを押し付けるな
お前の場合自分の考えに合わないことに文句を言いたいことが前面に来てる
なんの公益性もない他人を不快にさせるだけのレスはチラ裏にでも書いとけ >>72
ヒントになってないと指摘されて
不快に感じてるのはお前だけだｗ >>71documentとiframeの対応表をMapで持てば可能 この場合は、WeakMapでも良い
対応表を用意するのは配列時代からあった方法と認識していたが、ひょっとして今時の人は知らないのが普通なのか？ 俺は最初から対応表で出来ることぐらい知ってんだわ
馬鹿にしてるのは、contentDocumentでできると答えたこと 方法が出た後も「煽ることしかできない人」とは対話する意思がないって事なので、話し合うだけ無駄だと思うよ
どうみても、荒らし いいように受け取られそうなので付け加えると、荒らしは>>77ね >>73
お前の毒にも薬にもならない余計な指摘はいらんから
質問者のためにお前が良いと思うコードを披露したらいいじゃん
お前は正義部って結局文句を言いたいだけのクズなの >>1の禁止行為が読めない奴なんだろうよ
> ・煽り、批判等の他人を不快にさせる行為
「回答者へ」にも書いてあるのに、「馬鹿にしてる」と堂々と書く奴だからな…
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください >>82
だから、いちいち他人に絡むな
>>81を100回読み直せ だから
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
って書いてあるから、>>49で例を示したやろ
お前の方こそ、例を示してないからな。 動画サイトを運営しているのですが、特にChromeの挙動に悩まされています。
色々調査して分かったのですが、Chromeはユーザーの環境においてWebサイトに掛けるリソースを大胆に調整するようです。
例えば私のメインの64GBメモリ搭載のマシンだとずっと私のサイトを閲覧した後の状態で、
1タブ辺りで500MBくらい消費していますが、4GBのマシンだと100MBも消費していません。
64GBの方は仮想メモリを設定していないこともあって、沢山タブを開いてると4GBのマシンでは余裕なのに
64GBのマシンでメモリ不足（割合で決まるようで残り10GBくらいから発生します）になるということがおきます。
JSでPerformanceAPIを使えばリソース読み込みのタイミングなどを細かく調査できるようですが、
こういうメモリ周りを調査したり調整するための方法ってどんなものがありますでしょうか？ 自分がこのスレで裁判したり取り締まったりする権限を付与されてるとでも思い込んでるんだろうか？
妄想大好きイキリ君は本当に仕方がないやつだな そりゃそんな権限あったらこんな酷い状況になってないさ
ただ一つ言えるのはお前みたいな奴を荒らしと呼ぶになんの支障も無いってことだけ お前が他人のことを考えず暴言を吐くことについて支障がない人間だってことはよく分かったから
JSの話題をする気がないのなら他所で一人でやってくれ コテ付けてくれる？
あとメンとドウも。
メンドウだけにｗｗｗ >>85
64GBで仮想メモリを設定してないんだろ？ なら使用可能なメモリは64GBしかない。
それに対してメインメモリが4GBで仮想メモリを設定していて、
十分にHDDの空き容量が有るなら使用可能なメモリの最大は16TB （もしくはそれ以上）
https://docs.microsoft.com/en-us/previous-versions/technet-magazine/ff382717(v=msdn.10)
> on any PC that is capable of running Windows 7?the maximum size of the page file is 16 TB.
Windows 7だけどWindows 10でも同じだろうし、この制限がWindows 7のNTFSのファイルサイズの
制限によるものなら、それ以上のファイルサイズに対応したWindows 10なら8PBかもしれない
つまりな、あきらかに4GBのマシンのほうが使用可能メモリは多いんだよ。
その内容からしたら、Chromeの問題とは思えない >>1
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
「自分ならこう書くという例」を書けば、「他人の回答を批判」しても良い、と解釈する人がいるとは思わなかったんだが、テンプレ変えた方がいいのかね…？ 次から、質の悪い回答に対しては批判もあります。
正当な批判は素直に受け取りましょう。って書いたほうが良いな 「他人の回答を批判する代わりに」のルールが読めない奴には言うだけ無駄 >>91
私の持ってるマシンで実験する分にはそれで良いのですが
ユーザーから状況を収集したり、動的に対応したりしたいということです。
>>92
問題は、仮想メモリが動的の変動ものだからどうか分かりませんが、
ChromeやWindowsは実メモリのサイズや割合によって挙動を変えてくるようだという点です。
4GBで仮想メモリを設定している方が使用可能なメモリが多いのであれば、
それに沿った挙動を示しているのであれば問題ないのです。
まずはその真偽も含めて調査がしたいので、メモリの状況を上手く収集する方法が無いかというのと、
一般にそういった問題に対処する方法はないのかというのが質問です。
よろしくおねがいします。 functionって全部アロー関数で書いてもいいですか？問題ある？ node.js入れてbabel入れとけば問題ないよ 式と宣言があるfunctionと違いアロー関数は式のみで宣言はない。
巻き上げにfunction式とアロー関数式に違いはない。
注意すべきはthisのみで、巻き上げに云々は関係ない。(var f = function(){};もvar f = () => {};も同じ) そうだったね。
this、arguments、それからコンストラクタとしての用法がないことからsuper、それにnew.targetだ。 そこは考え方や範囲の違いだから深く突っ込まなくていいよ
どうせ分かり会うことはないだろうから functionをアロー関数にするのだから当然宣言も含まれる
考え方以前の問題だろ アロー関数の趣旨は無名関数を簡単に書けるようにすること。
で、無名関数はfunctionでも式としてしか書けない（() => {}に対してfunction(){}）
嘘だと思うなら>>106はfunction(){}を宣言文で書いてみろよｗ
function f(){}は有効な関数宣言だけど
function(){}はすぐGC対象になる関数式だぞｗ >>108
だから突っ込むなと言っただろ
こうなることは分かりきったことだから
お前こそ人の発言の意図を理解しろ >>107は>>77と同タイプでマウント君
建設的な議論は望めない >>110
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください ネストした関数内のthis は、グローバルを指してしまうから、よくバグルだろ
アロー関数の方が、this が、jQuery, Haxe みたいに正常に動くから、
this を一々、自分で、self, that に、代入しなくてもよいw
>>96
Linux なら、ps コマンドなどで、システムの状態を調べる
Windows のPowerShell にも、そういうコマンドがあるのでは？ >>112
ブラウザからPowerShell起動して状態取得とかハッカーかよ プロトタイプ（__proto__）の仕組みは、自分が預かり知らないことを
全てプロトタイプ先に任すというものなので継承ではなく委譲
prototypeプロパティは委譲させられるものを定義する場所で
それをプロトタイプとしたオブジェクトを生み出すnew演算子の効果を持って
形として継承がさせているように見える 継承や委譲は考え方。
__proto__は実装方法。
C言語で例外を実装するときにgotoを使う
というのと同じように、__proto__を使って継承や委譲するだけに過ぎない > 全てプロトタイプ先に任すというものなので継承ではなく委譲
全くしっくり来ないわ
jQuery#proxyでも委譲云々を唱える奴がいたが、ただの宗教論にしか聞こえない なんでそこでjQuery#proxyがでてくるのかわからん
継承は親クラスから機能を受け継ぐもので
委譲は処理を別のものにさせるものってだけじゃないか
その実装がどうなってるかは関係ないし、
継承、委譲の考え方に、それらを実現するときに使う道具も関係ない >>121
proxyは過去いってた奴がいただけで俺も賛同してない 賛同するかしないかじゃなくて、
今の話に関係ない話だろってこと >>121
> 継承は親クラスから機能を受け継ぐもので
はいダウト。「親クラスから機能を受け継ぐ」というのはのはクラスベースオブジェクト指向固有の考え方。
> その実装がどうなってるかは関係ないし、
と自分で書いてるのに語るに落ちたなｗ 通常のプロパティアクセスも出来るのに「委譲」になるわけがない > 「親クラスから機能を受け継ぐ」というのはのはクラスベースオブジェクト指向固有の考え方。
これが間違い。プロトタイプベースでも「親クラスから機能を受け継ぐ」ことは継承になる。
これは概念の話なので、言語としてクラスとして読んでいるかどうかは関係ない。
クラスに相当するものがあって、それを引き継ぐならどんな実装でも継承 >>115
> 全てプロトタイプ先に任すというものなので継承ではなく委譲
全てを任せてないだろ >>127
「クラスに相当するもの」というのがクラスベース脳から見たらそう見えるというだけ。
頭がクラスベースの実装に染まってるからお前はもうバイアスなしにモノを見ることは無理。 >>129
だから継承はクラスベースのクラス相当のものための用語なんだが？
継承＝クラスベースなんだよ
正確に言えばプロトタイプベースでもクラスは作れるが、以前のJavaScriptは
独特のルールを守って実装しなければいけないから面倒だった。
このJavaScriptでクラスが作りづらいというのはJavaScriptの制限であって
プロトタイプベースの制限ではない
その証拠に最近（といっても随分前だが）改善されてJavaScriptでもクラスを作ることが用意になった。
で、以前の面倒な実装でも今の簡単な実装でも、実装がどうであれ「クラス」にすぎない。
クラスに相当するものは、クラスベースでもプロトタイプベースでも（それ以外）でも存在する。
プロトタイプベースだからクラスがないと考えるのは、お前が持ってるバイアスにすぎない。 わざわざ質問してきてこうなんだよと教えたら、いやそうじゃないはずだと突っ張るやつってなんなんだろう 残念ながら、回答にケチつけて、マウントとるのか大好き勢が常駐してるんだよ 何が制限だバカバカしい。クラスの存在を前提としないプロトタイプベースのオブジェクト指向でクラスが作りにくくて何が悪い。
スポーツカーつかまえてでもそれ農道走りにくいよね言うてるのと同じじゃボケ JSではクラスは作りやすいでしょ
class構文入ってるんだから Math.random()が0を返す確率はどれくらいですか？ >>134
それな。プロタイプベースってのは内部の実装に過ぎず
class構文を使えば、プロタイプベースでクラスを容易に実装できる。
昔はclass構文がなかったから、クラスを実装するのは容易ではなかったが
別に実装できなかったわけじゃない。 ECMAScript 2015 で導入された JavaScript クラスは、JavaScript にすでにあるプロトタイプベース継承の糖衣構文です。クラス構文は、新しいオブジェクト指向継承モデルを JavaScript に導入しているわけではありません。
おととい来てね、おじいちゃん？ｗｗ >>138
糖衣構文だから、どういうこと？
最初から糖衣構文を使うことで、プロタイプベースでも
クラスが書きやすくなったって話をしてるよね？ >>137
> それな。プロタイプベースってのは内部の実装に過ぎず
仕様を無視した、プロトタイプベースじゃないJavaScript実装が存在するの？ 「Cでもクラス相当のものは実装できるからCにクラスはある！」
「CでもGC相当のものは実装できるからCはGC言語と言える！」 実装すればあるだろうけど実装してないものにはないというだけ ECMAScript仕様って、「プロトタイプベース」ではないの？ 文言は細かく見よう
>>137
> それな。「プロタイプベース」ってのは内部の実装に過ぎず
>>139
> 最初から糖衣構文を使うことで、「プロタイプベース」でも
「プロトタイプベース」ではなく、「プロタイプベース」と書いてる(バグリング君も似たようなことをしたな)
仕様を知らないので、「内部の実装」と知ったかぶりをする クラスベースっていうのはクラスから逃れられない言語ということであって、
民主主義国家でなくても民主主義はあるしできるように、
JSでも当然クラスという概念は持ち出せるし、構文にまでなってるんだから、
JSにクラスというものは当然に存在すると考えるのが合理的 つまりC言語にもクラスは当然存在する。実装できるからｗ クラスを実装していないC言語にクラスは存在しない。あたりまえ。 C++はCで実装されたんだからクラスを存在せしめたのはC言語。あたりまえ。 >>147
クラスというのは概念なので
クラス専用の構文がないC言語でも
クラスの概念を導入したコードを書ける。
というのが正しいかな
以前のJavaScriptでもクラスの概念を導入することは可能だったし
newがあるんだから、クラスの概念を使うのが普通だった。
それに加えて最近のJavaScriptではクラス専用の構文が加わり
クラスを導入したコードが簡単にかけるようになった。 JSONの発明者ダグラスクロックフォードはJSへのクラス構文導入に大反対だった。
https://qiita.com/ikedaosushi/items/45652e53c06c761d8137
奇しくもクラス大好き言語JavaはXML大好きである。
クラスおじいちゃんはJSONを使わないように。 任天堂の初期のマリオでも、アセンブラで、オブジェクト指向で書いていたとか
同様に、C など、オブジェクト指向ではない言語でも、
苦労すれば、オブジェクト指向で書ける
でも、そういう言語は、オブジェクト指向とは言わない
オブジェクト指向の言語とは、オブジェクト指向を簡単に書けるものだけ。
つまり、クラス構文を持つものだけ！ クラス構文は介護用言語の証。
go言語もhaskellもクラス構文なんてない。
一方jsはes2015でおじいちゃん介護言語に成り果ててしまった… Rustもクラス構文なんて無いね。
イケてる言語はみんなない。
それは偶然ではなくて、長年のC++/Java型のクラスベースオブジェクト指向で段々明るみに出てきた問題点を反省して、その問題に対する答えをそれぞれ言語仕様に盛り込んで来てるからなんだよね。
脳死でJavaパクったRubyみたいな要介護言語なんかとは心意気が違う。
JSも同類になったｗｗ go言語もhaskellもクラス構文なんてない。
だからオブジェクト指向言語ではない。
第二級言語 > Rustもクラス構文なんて無いね。
> イケてる言語はみんなない。
イケてない言語では？
議論に参加して良いのはイケてる言語になってからだよ。 webSQLって開発とまってるらしいけど
いちおうひととおり使えるれべるにはなってるかな？
indexedDBがわけわからんしＳＱＬの勉強もかねてつかってみたいんだけどどうなんだろ >>157
廃止が決まってからも長い間残されてたけどchromeは遂に次のバージョンから削除されるってよ。 >>26です
ガワが完成し一応はリリースできるものに仕上がったのですが
どうしても音の遅れが気になり色々調べた結果
どうもaudioを使用する場合遅れはしゃあないって結論になりました…
㍉ｾｯｸ単位の気にしなければ気にならない遅れですがどうしようもないようです
解決するにはweb audio APIを使うしかないみたいだけど知識０だしどうすっかなあ… 下記jQueryのeasing関数をjavascriptのみで作った動作に組み込みたいのですが、
引数の x, t, b, c, d, s の内、x と s の説明が見当たりません。
何を指しているかわかる方がいらっしゃいましたら教えてください。
ttps://github.com/danro/jquery-easing/blob/master/jquery.easing.js
x と s を含まない関数では、しっかりアニメーションしています。 >>162
sはマジックナンバーでググれ
xを使う関数なんてねーよ >>161
そういたします…
調べれば調べるほど自分の欲しい機能がついててもうなんで始めから使わなかったのかと…
情報がそれほど多くなく説明が専門的で理解できるか微妙ですが
幸いあげて下さった簡易版？ライブラリもあるみたいなので頑張ってみます
ありがとう >>163
レスどうも！
x については一部で使って入るようです･･･
ちょろっと調べたところ、null が代入されていると考えてよいのでしょうか？
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
また、マジックナンバーについても調べましたが、どういった関連性があるのでしょうか？
下記で言うと、何か値を入れるか入れないかで処理が変わるようですが･･･
とりあえず 0 でも入れておけってことでしょうか？
easeOutBack: function (x, t, b, c, d, s) {するってこと
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
不勉強ですみません･･･ >>167
即効ありがとうございます。
熟読します！ >>166
使ってないじゃん
easeOutBounceの先見たか？ >>162
調べるなら、公式サイトをあたれ
http://gsgd.co.uk/sandbox/jquery/easing/
> † this is an extra parameter not needed for the equations, but necessary for compatibility with jQuery
どのインターフェースに寄せたのか知らんが、無駄な設計にしか見えんな
内部コード上もthisを使えばいいのに、jQuery.easing.easeOutBounce() をわざわざ直接呼びだしているし、作者はよくわかってないんじゃないかね
> easeInBounce: function (x, t, b, c, d) {
> return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
> }, var n=2;
n=3-n; //1
n=3-n;//2
n=3-n;//1
こんな感じで 0,1,2,0,1,2,0,1,2…みたいに３つの数字繰り返す感じのやつ教えてください
（関数以外でできないものか気になったのです） 答えを貰う度に、華麗にスルーして、新しい質問を量産する実験でもしてるのかな >>172
var n=0;
n=(n+1)%3; //1
n=(n+1)%3; //2
n=(n+1)%3; //0 >>174
他人のコードで課題提出するのってどうなんだろうね か、課題・・？
単にプレイヤーについてるような
Aボタン→Bボタン→解除→Aボタン→Bボタン→解除…
みたいなのをやりたかっただけすよ？
ただ、120120…だけじゃなく汎用性ありそうなので結局クロージャで書きました
こんな感じで良いのでしょうか
function turn(d){
var n=0;
return function(){
n=(n+1)%d;
return n;
}
}
var a=turn(3);
a();//1
a();//2
a();//0
var b=turn(2);
b();//1
b();//0 n を、クラス変数とみなすと、クロージャは、クラスと同じ。簡易クラス。
Ruby で書くと、@@ はクラス変数
class Cycle
def initialize( divisor )
@@accumu = 0 # 蓄積変数
@@divisor = divisor # 除数
end
def cycle
@@accumu = ( @@accumu + 1 ) % @@divisor # 余り
end
end
obj_2 = Cycle.new( 2 )
5.times { p obj_2.cycle } #=> 1,0,1,0,1
obj_3 = Cycle.new( 3 )
7.times { p obj_3.cycle } #=> 1,2,0,1,2,0,1 >>178
ジェネレータで無限数列イテレータ作ってもええな。
function* turn(d) {
for (let n = 0; ; n = n % d) yield n++;
}
var a=turn(3);
a.next().value //0
a.next().value //1
var [b, c, d, e, f] = a;
b //2
c //0
d //1
e //2
f //0
ちなみにイテレータを分割代入に使うと無限数列だろうがdone: trueにされてしまうことを、これ作ってて今知ったorz…
犬も歩けば… なんでそういう仕様になってるんだろ？
引き続き.next()やらofやら...やらしたいぜ！ >>181
nをクリアしないならbigintでやるべき 初学者です、色々勉強させて頂いてます
たとえばボタンを押した時などに、動的に画像をずらっと一覧で表示させたく、
text += '<div><img src="./image.jpg"></div>'
をループで回したのち、しかるべき要素内にappendなりinnerHtmlなりして挿入を試しています。
たとえば1000件だとChromeだと一瞬なのですが、Edgeだと1秒近くかかってしまいます。
console.timeなどでどこが遅いかを調べてみると、遅いのはforではなく、appendなどのDOM追加部分であることは分かりました。
DOMの追加の方法は様々あるようですが、いずれもEdgeだと大変遅い状態です。
テンプレで、各種ブラウザによって最適化が異なる、との文言を見ましたが、例えば上記の件だと、高速に挿入するには他にどのような手法が考えられそうでしょうか。 程度の問題でchromeだろうが何千何万ものDOM要素を扱うとやっぱり重い。
バイナリエディタ作ってるときにその問題に遭遇して、googleのスプレッドシートどうやってるんだろうと思って見てみたらなるほどCanvasで実装されてた。 >>187
昔、エクセルのスプレッドシートみたいに
縦横のテーブル＋上と左のヘッダ（A1 A2 みたいなやつ）を
作ろうとしたら難しかった（その時は諦めた）事があるよ
テーブルの内容とヘッダを同期させて
"スムーズに"スクロールさせようとしたけど無理だった。
DOMではそんなこともできないんですよ。 >>188
昔は知らないが今はposition: stickyとかあるし簡単に出来るような気が…
>>187で言ってんのはあくまでパフォーマンスの問題ね。
読み込んだファイルを1バイト16進テキスト一つ当たり1DOM要素に割り当てたら、軽いファイルなら全く問題ないのだが数百キロバイトのファイルだともうガッタガタだった。
googleみたいにcanvasで実装せず、あくまでDOMにこだわるならinfinite scrollみたいなDOM要素使い回しの実装をやらないとダメだろうなぁ。 >>187
「1000個のdiv >>185」「何千何万のtable >>187」では状況が違い過ぎなのでは？ なんだろ、htmlテキストからDOM構築するのに時間かかってるのかな？
src付きimgタグ1000個だもんな。
document.createElement('img')で一個作って、
ループ内で.clone()して.src設定してdocumentFragmentにappendしてみては？ documentFragment、試させて頂きました
DOMへの追加が爆速になり感動しました
一方、今度はそのdocumentFragmentの生成時に大きく時間がかかるようになりました
というのも、どうやらcreateElement(img)に対する
setAttribute(src,./image.jpg)が重いみたいです
そこで、>>187で出していただいたcanvasをヒントに、imgタグを使うのをやめて、
createElement(canvas)後、それに対しdrawImageし、Fragmentに追加してみたところ、高速になりました(画像はループ前にnew Image)
Edgeが異様に遅いのはimgタグのsrc指定が問題だったのでしょうか、srcが空の場合はいずれのブラウザも良い速度でした
>>191で出していただいたやり方も試してみたいとおもいます
1000というのは適当な数で、実用上はたかだか300程度のものなのですが、それでも大きく差があったため疑問になった次第です
様々な回答ありがとうございます。 > (画像はループ前にnew Image)
今度はそれが重くなってるんじゃねーの？ https://dl.dropboxusercontent.com/s/8zywbtzce1qmysi/%E6%8B%98%E5%BC%95%E7%AA%93%E8%A1%A8%E7%A4%BA.html
https://i.imgur.com/GIbBVqR.gif
このGIFのように、モーダルウィンドウを常に文書の表示領域の一定の割合の大きさで表示します
表示中にウィンドウをリサイズしたり、スマホブラウザだとアドレス欄を見せ隠ししても合わせて大きさが変わります
ピンチイン・ピンチアウトでページ表示の表示倍率を変えていても、常に引ききった表示が基準になっています
Chromeでは意図通りに動くんですが、スマホ版Firefoxだとwindow.innerWidth系が表示倍率で変動してしまいます（実際にGIFの最後のように取得すると、Chromeでは一定なのにFirefoxは表示倍率に引きずられる。これは文書ではなく画面の表示領域を指してしまっている）
しかし、window.outerWidthほかは文書の表示領域のサイズではないためクロスブラウザ対応に困ってます
どうにかしてクロスブラウザで、Chromeのwindow.innerWidth系の仕様にあたる数値を取得できないでしょうか Firefoxではこのようにdialog生成時点で表示倍率が高い場合に、合わせて小さくなります
https://i.imgur.com/t8zMo1U.gif
ちなみにCSSでの長さ指定がvwやvhでは、スマホブラウザでの実際の文書の表示領域(viewport)ではないので、以下のCSS変数を設定して正確に軽量で実装できています
ここのwindow.innerWidthが、Firefoxでは固定されず表示倍率で変動します
let vw = window.innerWidth/100, vh = window.innerHeight/100, vmax, vmin;
if(vw >= vh){ vmax = vw; vmin = vh; }else{ vmax = vh; vmin = vw; }
document.documentElement.style.setProperty('--vw', `${vw}px`);
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.documentElement.style.setProperty('--vmax', `${vmax}px`);
document.documentElement.style.setProperty('--vmin', `${vmin}px`);
(()=>{
let timeoutId;
window.addEventListener('resize', () => {
clearTimeout(timeoutId);
timeoutId = setTimeout( () => {
vw = window.innerWidth/100;
vh = window.innerHeight/100;
if(vw >= vh){ vmax = vw; vmin = vh; }else{ vmax = vh; vmin = vw; }
document.documentElement.style.setProperty('--vw', `${vw}px`);
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.documentElement.style.setProperty('--vmax', `${vmax}px`);
document.documentElement.style.setProperty('--vmin', `${vmin}px`);
}, 50);
});
})(); 連投失礼します
ChromeのGIFにデバッグの数字しか見せてなかった……意図通り動作しているところ入れるの忘れてたので貼っておきます
表示倍率に関係なく、文書の表示領域基準になっているのが判ると思う
https://i.imgur.com/t8zMo1U.gif >>194
常に固定サイズフォントってアクセシビリティが恐ろしく良くない実装だな… objectの要素名って先頭は数字ダメって昔習った気がするのですが今でもダメでしたっけ？
var obj={
"329435e5e66be809a656af105f42401e":"hogehoge",
"73bb3253f355e9f0325b4b0b373d27ba":"fugafuga"
};
こういうのです。問題なくできました
もしかしたら”先頭数字ダメ”というのが記憶違いだったかもしれません クオート無しやドット記法で使えないから初心者向けにそういう説明したんだとおも 昔もクソもダメだった時などない。
識別子の制限と混同しているものと思われる。
var 0120abc;
とか
function 090xyz() {}
とかがダメなのであって。 >>199
配列のインデックス値と混同するからダメ等のローカルルールじゃないか？ 後の祭りだけど、ダメだけ覚えてダメな理由を覚えないのがダメなんだけどな…
varダメ、関数式ダメ...etc
思考停止で選択肢を潰してるだけ、ってことにいい加減、気が付くべき >>198
え？いや、上で書いたけど--vwと--vhのCSS変数は表示領域に合わせて変更する実装みなってる
試しに >>194 で試してみて欲しい、多分ちゃんと真ん中に75%の幅・高さで表示されるはず >>185-186
その都度、DOM にアクセスすると「JavaScript(JS)/DOM 間の時間 × 千回分」が掛かる
それを、JS内のDocumentFragment で、千回行ってから、
最後に1回だけ、DOMにアクセスするように変える
Vue.js も同じような仕組み。
JS内に、すべてのDOMのコピー(仮想DOM)を持っていて、
変更された部分だけを、実際のDOMに反映する
これの欠点は、速いが、メモリをDOMの2倍使うこと。
常に、速度と使用メモリ量は、取替えられる！ その都度アクセスするように書いてもモダンブラウザならキャッシュが効く >>204
>>186はリフローを理解して提案しているし、>>192でその件は解決してる >>207
話噛み合ってないけど、 >>198 の安価先間違ってない？
そもそも話題が違うんだけど() >>207 には、 >>194 が >>186 や >>192 と同じ話題に見えてて安価先を間違えてるんじゃないかって提案してあげたのにレス乞食とは……
>>194 は固定フォントサイズじゃなくてむしろレスポンシブだし、それ言ったのにinnerWidthの代替がfragmentで解決しているだの返された
それでも穏やかに人違いじゃないかって提案してあげたのにレス乞食認定って怖い そもそもID非表示なのに主語書かずに指示語で喋ったら意思疎通厳しいだろ すいません。質問です。
ifで奇数と偶数のペアならOK、それ以外はNGと出したいのですがif内の処理はどのように書けば良いのでしょうか？ それは不明ですので、前提とそうでない場合の解答をお願いします じゃあ整数どころか数字ですらなくて、
「マンコ」や「ちんこ」といった文字列が来ても偶奇を判定するの？ｗｗｗ
うーん…マンコはよく見たらグロいから奇数かなぁ？
ちんこは偶数！タマタマだけに！ｗｗｗｗ 偶数も奇数もどっちも整数なんだからそれ以外は全部NGでいいだろ。
両方整数でかつ足し合わせた値が奇数ならOKとか。 218です
>>222 さんヒントありがとうございます
できました バックティック文字を入れ子したいのですが
`${"`"}←これがバックティック文字です。
変数や式を扱えます。例：${"`"}\$\{a}${"`"}`
もっとスッキリ書く方法をおしえてください 訂正
\$\{a}の部分は\${a}でよかったです なんだかよく分からんが
`${"`"}\${a}${"`"}`
は
"`${a}`"
や
'`${a}`'
と書くのと同じだよ。
`${"`"}`とか穴を掘ってすぐ埋めるみたいなことして何がしたいのか分からん。 >>229
こういうあげ足取りではなくて、どなたか解答をいただけませんか？ >>229の一体何が揚げ足取りなのか分からん。
もっとスッキリ伝わる質問を書いてください 俺も何がしたいのかさっぱりわからんが
`\`\${a}\``
か？個人的には大してスッキリしたようには見えないが…
挙げ足とりとか失礼なこと言ってないで>>229の通りやったほうがいい もっとすごいスッキリ書く方法知ってるけど質問者の態度が気に入らないので教えませんｗｗｗｗｗ >>233
＞`\`\${a}\``か？
そういうことです
最初にそれをやっていたのですがエラーが出たので質問するに至りました
で、エスケープをあらためてやってみると成功しました
おそらくですが、最初に``hogehoge``みたいなことをしてシンタックスエラーが出て
次にhogeを定義していないのに`\`${hoge}\``みたいなことをしたときに出たエラーを
シンタックスエラーと勘違いしたのだろうと思いました
お騒がせしました
＞ 229の通りやったほうがいい
テンプレート文字の中で${}を使いたい、かつ出力に`${}`文字列が出てくるので
つまりバッククォート内でバッククォートの入れ子にしたかったのです
ただ、エスケープで書き直してみましたが仰るとおりめちゃくちゃ見にくいですね
ちなみに>>230は自分ではありません ほんとID非表示だからか何の主張も発信もないレス多いよな
今に始まった事じゃないし過疎るよりましかも知れんが >>235
うーん、要望にマッチするか微妙だが一案として、
const escBQ = ({raw}, ...vals) => String.raw({raw: raw.map(s => s.replace(/BQ/g, '`'))}, ...vals)
みたいなテンプレート関数を作って、
escBQ`あああBQこんにちは
BQHello
よい朝BQ
BQ`
ってやれば文字列として
あああ`こんにちは
`Hello
よい朝`
`
が得られるよ。 >>239
なるほど、フィルターしたほうが断然みやすそうですね
見た目だけの問題なのでBQのところを絶対に使わなさそうな（❝⚠❛みたいな）絵文字とか機種依存にしようかなと思いました
（副作用ありそうですが）
ありがとうございました >>238
>>230も質問者で、回答を釣るのに失敗したから、別人の体で出てきただけだと思う https://mohayonao.hatenadiary.org/entry/20111108/1320756534
ここでやっているようなプログラムを作っても別タブを開いている間は止まります。
同じような経験をしていらっしゃる方いませんか？
workerの部分を別ファイルを使っても、blobを使って単一ファイルにまとめても
同じようになります。
https://qiita.com/mohayonao/items/b4f713bf8ab9de8907f1
ちなみにここのやつをそのままコピーしてやっても、workerありでも
無しでも同じような結果になりました。
ブラウザはChrome、Operaと試しました。
上記のカウンターを数えるだけのプログラムですが
別タブに行くとworkerがあろうとなかろうと、タイマーが止まってしまいます。
何かいい方法ないでしょうか。
ちなみに誰か、これらのプログラムを試してみて成功した方いらっしゃいませんか？
というより、プログラムは動くので、別タブに行ってもタイマーが止まるかどうか気になります。
緊急退避用でお世話になった方ありがとうございます。
個人的にやった修正はBlobbuilder() を Blobに変更しただけ。
条件文とかはそのままにしています。 そのままでは使えそうにないですね。
とりあえずソースをストリングにするところから始めます。 Blobにしたら行けました。ありがとうございます。 >>235
このスレには、
>>230
みたいな荒らしがいるから、要注意！
質問に関係ないことで、言い争いをしている奴も、荒らし 継承したいときprototypeに入れるのはクラスでもコンストラクタでもなく別のインスタンスなの？ >>230は荒らしではないだろう
道端に落ちてるゴミを一々踏んづけに言って騒ぐのは異常者
１つのちゃんとした質問レスにそれだけを見てそのまま返答すればいいだけなのに
コテもついてない余計なレスを勝手に同一人物だと思い込んだり
回答者同士でケチつけ合ったりするのが荒らしだろう >>248
継承したいときprototypeに入れるのはただprototypeに入れてるだけ
new演算子が関数コンストラクタとprototypeに入れられてるものを良しなに扱ってインスタンスを生成してくれる
継承したいときprototypeに入れるのはただprototypeに入れてるだけ class構文を使うとこういう構造ができあがる
class 親 {}
// 親.prototype.constructor = 親
// 親.prototype.__proto__ === Object.prototype
class 子 extends 親 {}
// 子.prototype.constructor = 子
// 子.prototype.__proto__ === 親.prototype
継承のために指定するのはこの部分
// 子.prototype.__proto__ === 親.prototype >>250
なるほどインスタンスを見てかってにやってくれるんすな
モヤモヤが残りますが class Parent {
constructor(){
this.a=10;
this.b=20;
}
sum(){ return this.a+this.b; }
}
class Child extends Parent{
constructor(){
super();
this.a=2;
this.b=3;
}
}
var hoge=new Child();
console.log(hoge.sum());
super()ってなんで必要なんですか・・？
extendsする＝ふつうはparentのメソッド使うからsuperする必要あります・？ >>251
継承に詳しそうだから質問お願いします
このコードのアラート2回目以降で確認できるんですけど、instance01.constructor === Constructor01がfalseになるのは何故ですか？
コンストラクタのプロトタイプオブジェクトにメンバを設定するとき.prototype.変数名に代入だとtrueなんですが、.prototype = オブジェクトの形にするとfalseになるんです
>>256 続き
(()=>{
'use strict';
const stringifyObject = (object) => {
return JSON.stringify(object, (key, value) => {
if(typeof value === 'function') {
return value.toString();
} else {
return value;
}
}, ' ');
};
const Constructor01 = function Constructor1(name) {
this.name = name;
};
Constructor01.prototype.aShareProperty = 0;
Constructor01.prototype.aShareFunction = () => { Constructor01.prototype.aShareProperty++; };
let instance01 = new Constructor01('instance1'); >>255の続き
const showInfo = () => {
window.alert(`instance01.name: ${instance01.name},\n`
+ `instance01.constructor: ${instance01.constructor},\n`
+ `Constructor01: ${Constructor01},\n`
+ `instance01.constructor === Constructor01: `
+ `${instance01.constructor === Constructor01},\n`
+ `instance01[[prototype]]: ${stringifyObject(Object.getPrototypeOf(instance01))},\n`
+ `Constructor01.prototype: ${stringifyObject(Constructor01.prototype)},\n`
+ `instance01[[prototype]] === Constructor01.prototype: `
+ `${Object.getPrototypeOf(instance01) === Constructor01.prototype},\n`
+ `instance01.aShareProperty === instance01[[prototype]].aShareProperty &&`
+ ` instance01.aShareProperty === Constructor01.prototype.aShareProperty: `
+ `${instance01.aShareProperty === Object.getPrototypeOf(instance01).aShareProperty &&
instance01.aShareProperty === Constructor01.prototype.aShareProperty},\n`
+ `instance01.aShareFunction: ${instance01.aShareFunction},\n`
+ `instance01[[prototype]].aShareFunction: ${Object.getPrototypeOf(instance01).aShareFunction},\n`
+ `Constructor01.prototype.aShareFunction: ${Constructor01.prototype.aShareFunction}`
);
};
showInfo();
Constructor01.prototype = {
aShareProperty: 0,
aShareFunction: () => {
Constructor01.prototype.aShareProperty++;
}
};
instance01 = new Constructor01('instance1');
showInfo();
instance01.aShareFunction();
showInfo();
})(); > instance01.constructor === Constructor01がfalseになるのは何故ですか？
instance01オブジェクト自身にはconstructor プロパティは設定されていない。この場合、
instance01.__proto__.constructor
instance01.__proto__.__proto__.constructor
instance01.__proto__.__proto__.__proto__.constructor
…
と__proto__をたどりながらconstructorプロパティを探し、最初に見つかったものが取得される(プロトタイプチェーン)。
Constructor.prototypeを新しいオブジェクトで上書きした場合は
Constructor.prototype.__proto__ === Object.prototype
となっている。
instance01.__proto__.constructor
=== Constructor.prototype.constructor
→なし
instance01.__proto__.__proto__.constructor
Constructor.prototype.__proto__.constructor === Object.prototype.constructor
=== Object
となるので最終的には
instance01.constructor === Object >>257
ありがとうございます！凄くよく分かります
(コンストラクタ).prototype.(プロパティ)に代入したときは、既に存在するプロトタイプオブジェクトのプロパティを変更するだけだから(インスタンス).constructorが(コンストラクタのプロトタイプオブジェクト).constructorなんですね
逆に(コンストラクタ).prototypeに直接代入したときは、プロトタイプオブジェクトとして(オブジェクト).constructorを持たず結果的にObject.prototype.constructorがプロパティconstructorとして参照されるんですね 244ですが、web workerの使い方は分りましたが
var e = new MouseEvent("click", {
bubbles: true,
cancelable: true,
clientX: x,
clientY: y
});
element.dispatchEvent(e);
などのような、イベントだとweb workerを使っても
別タブに移動するたびに、実行が止まってしまいます。
上記のinnerTextを書き換えるだけのプログラムも同時に
同じ関数に入れていますが、そちらはタイマーが働いています。
メインのUI側のonmessegeの中のマウスイベントは無効になるのでしょうか。 これ実行したときにAが1つしか表示されないのは何故ですか？
bのインスタンス生成は新しくSampleのインスタンスを生成することにはならないのですか？
3行目と6行目それぞれでAが表示されるのでは無いのですか？
https://i.imgur.com/O63piVm.jpg
https://i.imgur.com/dkGWlmY.jpg >>261
それJavaScriptやない、Javaや >>260
隠れてる間にビューを書き換える必要性は無いでしょ >>253
そりゃ、親のコンストラクタを呼んでいないと、何かの前提条件が保証できない
例えば、そこでデータベース接続しているかも知れないし、
値をキャッシュしているかも知れない
子クラスからは、親クラスが何をしているかは、わからない。
親クラスのすべてのコードを読む人など、いるわけないし >>260
MouseEvent は、GUI のイベントだから、別のタブがフォーカスを持つと止まる
1つのPC で、フォーカスを持つ、GUIアプリは1つだけ！
フォーカスを持つアプリは、キーボード・マウスも占有するから、
2つ以上、同時に存在できない
サーバーみたいに、バッググラウンドで動き続けるプロセスは、フォーカスを持てない >>266
別タブじゃなくて、別ウインドウだときちんと動作するのですが
それは、別のGUIアプリの扱いをしているからだと考えていいのでしょうか。 もうそろそろブラウザ依存の話はやめてくれないか？
それはJavaScriptの話じゃない。 >>267
何訳のわからないこと言ってんの
別タブだと描画する必要がないし、入力を受け付けることもないから、それらに関するイベントループがサスペンドされてるかイベントバブリングが抑制されてるんでしょ
別ウィンドウだと描画する必要が基本的にはあるという違いがあるでしょ >>269
よくわかりました。ありがとうございました。 classの継承って例えば
動物（親）：ゾウ（子）、ライオン（子）、犬（子）
はしっくりくるんだけど
動物園（親）：ゾウ、ライオン、犬
っておかしくない？
例えば、ゾウ.speak()→その動物の鳴き声
はわかるけど
ゾウ.count()→動物園にいるその動物の個体数
ってなんか違和感あるんだけど一体どうすれば >>271
まずな「例え」というのは何かっていうのが
わかってないやつが多い。
例えっていうのは、あることを知らない人に対して、
知ってるであろう他の概念を使って理解を容易にすることなんだよ。
例えは例えであって、本物じゃないんだから
本物との違いがあるのは当たり前
どうするかだって？どうもしなくていいよ。
例えで継承を理解したなら、ソフトウェア開発で必要なときに使えばいい
どうせそんな動物園、作るわけじゃないんだろ？ >>271
ゾウは動物だけど、
ゾウは動物園じゃないだろ
おかしいなら、継承を使うのが間違いってことだ >>270
その辺は省処理量・省電力化のためにブラウザの開発者が処理を節約する実装をしている場合も多い
仕様書や参考文献に乗ってないけど処理止まる実装になってる事もあるってのを覚えておくと良いよ >>275
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
〉 このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。
ただし、コールバックの確率は、バックグラウンドのタブや隠れた <iframe> では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。
仕様書では60Hzだが実際のブラウザは動作を変更する場合あり
他にも https://japan.cnet.com/article/35098191/
https://blogs.windows.com/japan/2016/06/28/edge-battery-anniversary-update-jp/
適当に見えるほど画期的な事実だったんなら、より後学のためになるな
よかったな >>271
継承is-a, 包含has-a の違い
動物:ゾウは、継承
動物園:ゾウは、包含
車:消防車は、継承
車:ハンドルは、包含 let abc = Array(10).fill(0).map(v => {
return hoge();
})
みたいに初期化しているんですけどfillを無くす書き方は無いでしょうか？
サイトによってはundefinedで埋められているとありますが
実際は空の配列のようです 自分でfillMapとかのメソッドを作ったら良いだけでは？ >>277
その例で言っても車クラスからハンドルインスタンスができるのは不自然 >>272
参照してた元コード貼っちゃうといろいろと面倒なのでその部分だけ例えた感じっす
>>273
なるほど単にそういうことですよね
>>277
なるほどさらに、しっくりきました 横からですが
>>280
車クラスから作られた車インスタンスが
車部品クラスから生成されたハンドルインスタンスを
包含するということでは？ 動物クラスに”死（HP０状態）”メソッドやプロパティをつけた場合も
動物園クラスやその上の包含クラスからみれば、死してなお包含ということかな
あるゾウXが動物園Aから動物園Bに移転する場合は
動物園クラスを包含する展示施設クラス的なのをつくって
（A）展示施設("動物園Bの名前やIDやオブジェクト").登録("ゾウXの名前やIDやオブジェクト");
内部は、
（１）return 動物園Bオブジェクト;
（２）動物園B.登録(ゾウX);
（３）return ゾウXオブジェクト
（４）ゾウX.所属変更(動物園B);
（５）this.所属=動物園B;
（０）（A）でそもそも動物園B、ゾウ共にオブジェクトが引数なら一発変更
みたいな感じだろうか・・こんがらがってきた >>278
好きなの選びなはれ。
let abc = [...Array(10)].map(() => hoge());
let abc = Array.from(Array(10), () => hoge());
let abc = Array.from({length:10}, () => hoge());
let abc = Array.apply(null, {length: 10}).map(() => hoge());
let abc = [...Array(10)].reduce(acc => [...acc, hoge()], []);
let abc = [...Array(10)].reduce(acc => acc.concat(hoge()), []);
let abc = [...function*(){for(let n=0;n++<10;)yield hoge()}()];
let abc = [...function*(){let n=0;while(n++<10)yield hoge()}()];
let abc = Array.from(Array(10)).reduce(acc => [...acc, hoge()], []);
let abc = Array.from({length:10}).reduce(acc => [...acc, hoge()], []);
let abc = [...{*[Symbol.iterator](){for(let n=0;n++<10;)yield hoge()}}];
let abc = [...{*[Symbol.iterator](){let n=0;while(n++<10)yield hoge()}}];
let abc = Array.apply(null, {length: 10}).reduce(acc => [...acc, hoge()], []);
let abc = Array.apply(null, {length: 10}).reduce(acc => acc.concat(hoge()), []); >>284
よく考えたら今回のhoge、引数取らないみたいだから上の４つ以下のように関数ラップはずせるわ。Yo!Yo!
let abc = [...Array(10)].map(hoge);
let abc = Array.from(Array(10), hoge);
let abc = Array.from({length:10}, hoge);
let abc = Array.apply(null, {length: 10}).map(hoge); hoge(v)の間違えじゃ？初期値0はhoge()内で設定
[...Array(10)].map(hoge)一択だな 拡張性、汎用性、パフォーマンス、共に
let abc = [...function*(){for(let n=0;n<10;n++)yield hoge()}()];
が最強。他はカスである。 forループで順番問わないなら
let i = 9;
for(; i >= 0; i--) { }
の方が鮮やか >>284
こんなにあるんですね
ありがとうございます
一番短いやつ使います AppleがOpenGL廃止するから、
WebGLももう終わりを迎えようとしてるんですね。 >>283
オブジェクト指向の典型例。
Generic, 総称型
動物園は、親クラスの動物型の配列を持つ。
死ねば、そこから削除する
動物型の配列.each とすると、
各動物は自動的に、自分の(子)クラスに対応した、メソッドを呼ぶ
ゾウは、ゾウのように鳴き、
ライオンは、ライオンのように鳴く
子クラス独自の動きをする 規約違反だと思うのでとりあえず通報ポチってみましたｗｗ function test(a,b) {
var a=a,b=b;
～処理～
}
こんなふうにjavascriptって、関数の引数を
var で新しく変数で定義するってやるべきでしたっけ？
function test(a,b) {}ってやる時点で関数testの中のローカル変数a,b
って意味になって、新しくvar a=a,b=bって不要でしたっけ？ 実引数が文字列とか数値とかの不変な型、じゃない場合は仮引数に対して値とか値の内容を変えたつもりでも、実引数も変更されるから注意 ニホンザル語→《翻訳》→日本語
オブジェクトのプロパティを変えると
そのオブジェクトを参照している全ての変数に於いて変えた結果が反映されるよ いや当たり前だろどれも同じオブジェクト指してるんだから。
そうじゃないと困るわ。 >>301
それじゃ特別な注意点伝わってない
「仮引数への操作が、そのまま実引数を操作することと（変数名とスコープを覗いて）全く同じ」 → プロパティの操作"以外にも"全ての破壊的変更が実引数にも反映される
これが見落としがちだしあんたも見落としてる const a = { x: "x" }
function f( a ) { a.x = 1 }
f( a )
console.log( a ) //=> { x: 1 } >>303
文系らしい理解だなｗ
CやらC++やったら発狂しそうｗｗｗ
「仮引数への操作」じゃなくて仮引数通して参照先のオブジェクト直接操作してんだバカ。
何が「反映される」だバカｗｗｗ C/C++ 以外の言語の引数は、primitive 以外は、参照渡し！
引数の状態を変えると、渡されたオブジェクトの状態も変わる！ 概念的には「も」でいいんじゃないの
仮引数には別名を付けれるんだし、エイリアスちう概念 よくない。
スミスさんは結婚して山田さんになりましたが仕事では旧姓スミスを引き続き使用しています。
山田さんはある日、家で料理中に指を切ってしまいました。
すると、スミスさん「も」指を切ってしまいました。
これはおかしい。
スミスや山田はラベルに過ぎない。
スミス. hp -= 10
も
山田.hp -= 10
も
同一オブジェクトに対する同じ操作。 居候している田中さんも切ってしまったらどうなるの？ 山田（旧姓：スミス）さんと田中さんは別人（別オブジェクト）だからそこは「も」でいい。 山田（旧姓：スミス）さんと田中さんと隣に住むヤクザさんは別人（別オブジェクト）だからそこは「も」でいい。 そう。別人だと思っていたのです。その時までは・・・
違和感を覚えたのは、切った指が同じ指だった事に気づいたときです。
最初はたまたまかも思ったのですが、一緒に風呂に入った時、
指の断面図が私の jsとjquery
どちらでも代用可能なコードであればjsでインラインにした方が読み込み早いとかそういうことはありますか？ ありますが此処で聞いても良いことないので
自分で計測して判断しましょう 仮引数も実引数も同一のものだろって言えるのはJS引数の仕様を知ってるからでは
仮引数に実引数が代入される（a=b）か複製されるかは言語仕様による
だからまぁ、初学者は暗黙に変数名変わったら参照を共有してないように考えやすいとは思う ちょっとしたスクリプトの検証のためにコピペしてブラウザのコンソールにぶっ込んで使ってるけど
constだと続けて同じコード実行すると定義済みですって怒られるからブラウザ更新するけどいちいちめんどいのですがどうすればいいですか
もちろん元コードをvarとかに書き換えるのはもっと面倒です 貼り付けるコードの前に(()=>{
後ろに})()
を付けて実行する。
リロードより楽かは知らん >>307
絶対に間違ってはいけない考え方をやってしまっています
渡され方が渡されるものによって変わるということは不自然であり、一般的にありません
多くの言語では、渡され方は、渡し方、によって変わり、それが自然なのです
JSでも、プリミティブかどうかで渡され方が変わることはありません
そして、JSでは参照だの参照の値だのを持ち出す必要はありません
仕様書を愚直に読めば、全ての値が名付けの連鎖によって
例えばあなたに拓哉という名前だったりタッちゃんという名前だったりがあるように
あなたはあなたであり、他の何者でもなく、拓哉やタッちゃんがあなたという存在ではないですが、
あなたという存在を同時に共有して表すための名前という概念で変数を捉える事ができます
そのため、共有渡しという言葉がJSでは使われることがあります
ようするに1でも"Str"でも、それは別の名前がつけられる時複製されているわけではないのです
ただプリミティブ型は不変なため、コピーされていると考えても、同一存在だと考えても辻褄が合います
ですがわざわざ型によって渡され方が変わるなどの仕様書にない不自然な考え方をしなくとも
すべて共有渡しだと簡単に認識すればよいのです
ちなみに、実際のエンジンでも、SMIを除いてプリミティブ型でも参照の値渡しによって
メモリの同一データへの参照が伝播されていく実装になっていることが多いです
SMIを除いてプリミティブ型の多くはオブジェクトとして扱われています 実態と理屈は別だから実用上は「全部同じ共有」ってだけの認識じゃ不便じゃね
let x = y = '初め';
x = '入れた'; // x === '入れた', b=== '初め' ✕変数の"値を弄る"、○変数の"値をすげ替える"……？参照先を共有してるとすると共有だけど対象は単体？
let a = b = [0];
a = {1}; // a === {1}, b === {1} ○変数の"値を弄る"、○変数の"値をすげ替える"……？参照先を共有してるとすると共有だから対象も連動 >>324は間違いの例ね
変数への再代入は、全く同じ参照先を持つ他の変数の参照先は変えない >>320
Node.js をインストールしているなら、
VSCode の拡張機能のQuokka.js で、
リアルタイムに値も表示される、スクラッチパッドとして使える
ただし、無料バージョンでは、保存したファイルからは実行できない const a = { x: "x" }
const b = { x: "x" }
上は、2つのオブジェクトを生成しているけど、
下のc は、オブジェクトを生成していない。
参照の代入だから、単なるエイリアス
const c = a
a.x = 1
console.log( c ) //=> { x: 1 } 参照の代入ってなんだ？
参照値の代入って言いたいのか？ >>316
インラインにしたほうが約数ミリ秒早い。
ただし開発効率が低下し開発時間がかかる。
お前が働いた時間でどれくらい金がかかるかわかるか？
それだけの金を使って1ミリ秒しか変わらなかったんだぞ！って言われてみ？ そんなのチェックしないから大丈夫。
速くなるのか遅くなるのかの定性的な事実が重要。 インライン/外部化は必要に応じて決定する
というか、開発効率を気にする奴はインライン化も機械化すると思うが
GoogleのHTMLが手で書かれてるわけない インライン化は最適化の基本
必要な所では勝手にされるので
開発者は自然に書くといい 実行速度を気にしてる人は二パターンあって、
自分で速度を測って本気で速度を気にしてる人と
速度を測らないで速いかどうかの話をするだけのなんちゃってやろう
なんちゃってやろうは本気じゃない
俺はちゃんとしてますってふりしてるだけ 速度を気にしてる人は２パターンあって、
限られた環境で限られたケースでのみたまたま今速かったものを心酔するバカパターンと
最速ではないが全てのモダンブラウザで速さが安定して早いWasmを使う賢パターンがある forEach に対して value, index, array 以外の引数を渡す方法ってありますか？ >>334
WasmでDOMサクセスができるブラウザはどれ？ htmlとcssは出来るようになった
次はjavascriptかphpのどちらかをやりたい
どっちがオススメですか >>344
同じくJS
ただJSスレでどっちが良いか聞いてもあんま意味ないと思う >>344
両方やる
お前に適切な方が自然と分かる 俺の頭が低スペなんだろうけど
JSとPHP同時進行で書いてると混乱する
JSに$thisとか書いてエラー出してからハッとする phpで何か作るならjavascriptは避けて通れないってマジですか？
結局javascriptはある程度勉強しなきゃならんのか >>349
別にそんなこともないと思うけど
現代的なウェブアプリケーションのフロントエンドを作る上で
JSを避けて通れないのはその通りだけど 鯖専用で言語学ぶ非効率さを嫌うなら、利用者側をJavaScript・鯖側をNode.jsって選択肢あるね
どっちもJavaScriptで書けるし今だとPHPに劣らず熱いでしょ forEachの中でsetTimeoutを利用する場合、複数のタイマーが同時に動くと思うのですが、
clearTimeoutで1つ解除すると、まとめて解除されたりしますか？
何故か途中で処理が止まってしまうようです。 Ruby on Rails でも、Node.js, Webpack が必要
VSCode, jQuery, Babel,
gulp, npm scripts,
SASS, Bootstrap など >>352
解決法としてタイマーのIDであるsetTimeout()の戻り値をclearTimeout()に渡すのはどうだろう >>357
それ以外、clearTimeoutに渡す方法はないから、既知なのでは…？ >>352です。
されたりしなかったりで、ブラウザに依存するのですね。
スクロールするとフェードインするためのクラスを与えるという処理で、
横一列に並んだ要素を、一定の間隔でフェードイン表示させたいのですが、
リロードする度に、上手くいく数がマチマチで、且つ全部表示されることがないという
状態で、何が起きているのか把握できませんでした。
んが、色々試したところ、下記のように条件分岐の中にループ処理を
仕込んだところ、望んだ動作となりました。
このような使い方の場合、タイマーをクリアする必要ってあるのでしょうか？
var loop1 = function() {
if (...) {
setTimeout(loop2, 300);
}
else {
setTimeout(loop1, 16);
}
};
loop1(); なんか問題は別にありそうな気がしてならんのだが
単体テストはしてみたの？ そのちっちゃいコードでは何も分からんが
動いたんならめでたしと言うことで forEachを使うときって下のコードみたいに、スクロールイベントの中で
forEachを回して、添え字を関数に渡すべきなのか、
それぞれの関数でforEachを回すべきなのか、
どちらがパフォーマンスよいのでしょうか？
window.addEventListener('scroll', function() {
test.forEach(function(value, index) {
funkA(index);
funkB(index);
});
}); 前者が配列一周回るのに対し後者は二周回るから前者のほうが速い気がするが、まあ関数呼び出しコストの違いもあるし計れば？
それより実行順は大丈夫なの？
ようするに、
前者は
a0 b0 a1 b1 a2 b2 a3 b3 …
後者は
a0 a1 a2 a3 … b0 b1 b2 b3 …
って感じで処理の実行順が異なってくると思うんだけど… スクロールイベントで総当たりループって事は最近のブラウザならIntersectionObserverで済むやつだったり？ 敢えて2回回す理由は無いと思うが
中途半端に切り取ったコードじゃ何も言えん ブラウザの最適化具合にもよるだろ
どっちのパフォーマンスが～って言ってる時点で絶対気にしなくていいレベル パフォーマンスのためにはパッシブリスナにしてアイドルコールバックで少しずつ処理すべきだろ text = "abc"
としたときに text の中身をクリップボードに入れるにはどうすればいいんでしょうか？ >>369
フォームでなくてもいいけどDOMツリー内にあって選択状態にしないとだめ
display:none等で隠してしまうと選択状態にはならないので、画面外やサイズ0で見えないように要素作るのがセオリー
>>371
document.execCommand("copy")は大抵のブラウザで使えますよ clipboard.js使えば異種・新旧のブラウザ間の実装差異吸収してくれるけどそれじゃダメなん？ 関数を書く順番でなやんでいます。
ファイルを読み込みながら実行する書き方だと
関数の中で関数を呼び出すには、入れ子の方を上に書く必要があり
自分で読み返したときに、どういった順番かわかりづらいことがあります。
DOMContentLoaded で読み込み完了後に実行する書き方であれば
上から順を追って書いていっても問題ないので、
自分としては読み返しやすいと感じています。
どちらが望ましいとかってあるのでしょうか？ 当然自分の分かりやすさより、どう実行されるかの方が優先度高い
DOM読み込み完了時に実行で良いならそれ使えば良いし、他の時機で実行するならそれに合わせた実装をしないと
そもそも関数定義と関数呼び出しは読んだ瞬間に判別できるようになった方が良い
その上で分かりやすい変数名付けて、大きすぎる関数は作らずに小分けした関数を入れ子にすれば、読む時に都合の良い順番なんて必要ない >>375
全ファイルを読み込み完了してから、実行するか
一つずつファイルを読み込み完了してから、実行するか
当然、後者の方が実行速度が向上する >>377
実行速度は一気に実行の方が速いでしょ
逐次実行にしてはやくなるのは開始時機の早さと、それで見込める終わる時機の早さ 一気に実行するような時代ではない
まず第一にオフザメインスレッド
どうしてもメインスレッドで行わないといけない処理は
その優先度に基づいて小分けにして実行する >>378
それだと、ダウンロード中は待機しか出来ないんだが >>379 >>380
そうだよ
でもスクリプトの実行速度が上がる訳じゃないから初心者が混乱しないように言ったんだ 数字が少ないのがユーザー体験にとっていいとは限らないしな
プチフリがあるよりちゃんと読み込み中の表現した中断の方がストレスないし vueのtransitionってclickやscrollイベントを割り当てることは不可能なんですかね？ var wmp = new ActiveXObject('MediaPlayer.MediaPlayer.1')
var a = document.createElement(wmp)
a.setAttribute('type', 'video/x-msvideo')
document.body.appendChild(a)
wmp.FileName=file_name
wmp.play()
音声は聞こえるんだけれど、映像がどこにも見えなくてわけわからんです。
スタイルいじってもダメなので、何か他に抜けているところがあるんでしょうか。 >>381
待機時間が長い方を「速い」と主張する>>378の方が誤解の元だと思うが >>387
速度／時機、速い／早い、をわざわざ対比して書いてるのに誤解の元になるって……
いきなり話に小学生の読み手が入ってくるとか想定してる？
少なくとも流れ見てたら誤解よりもむしろ理解に役立つ書き方でしょ >>388
ファイルの読み込みは遅いに決まってるでしょ
何のために非同期処理になっていると思っているんだ？ >>381
>>377は「ダウンロード処理」「ダウンロード後の処理」を合算した「全体の実行速度」の話をしているのに、後者のみに着目したコメントをされても困るよ
処理の単位を勝手に限定しないでくれ
(そもそも、初心者だと「実行速度=スクリプトの実行速度」と読んでダウンロード処理を除外するものなのか？)
一般にIO処理は遅いから、少しでも早く終わるように効率化した方が良いに決まってる
あえて、完了時刻を遅らせる理由があるなら、その理由を添えて質問者に回答してやってくれ >>390
それこそ元レスは前者にも後者にも限ってないし、違い全般を聞くような書き方をしてた
限定的な回答があったからもう一方の限定的な情報付け足した訳で、それに困惑する必要なんてない
そもそも初心者だと～じゃなくて、初学者だからこそ手探り段階の可能性が大いにあるし、「できるだけ思い込みを植え付けない広い情報」を挙げた方が良いし他の誰も困らないでしょ
一般にどっちが良いかとか一言も言ってないし、推しを否定した事もない
それでもJavaScript実行中はレンダリングやら他の多くの処理が止まるから定期的に確実な切れ目を作るのは用途が無い訳じゃないし
もし不満があるなら教えて欲しい
触れられてない情報を付け足す事に誰が困るっていうの？違うなら噛まないで頂戴 確かに、初心者だからこそ、JSやWebで気をつけないといけないことは真っ先に知っておくべきだろう >>375です
読み込み完了後だと開始時機は遅くなるけど処理ははやい。
読み込みながらの場合は開始時機がはやく終了時機もはやくなる見込みがある。
そして、ケースバイケースで使い分けるといった感じでよろしいでしょうか？
関数の書き順なのですが、入れ子となっている場合、慣れてくると
下記の下の方でも問題なく読めるものなのでしょうか？
ご飯を炊く
おかずを作る
配膳する
食べる
↓
食べる
配膳する
おかずを作る
ご飯を炊く >>391
>377と>>378は前提条件が違うだけでどちらも間違ってはいない
>>377 逐次処理の方が「ダウンロード処理 + ダウンロード後の処理」の実行速度が速い
>>378 一括処理の方が「ダウンロード後の処理」の実行処理が速い
だが、>>378の「実行速度は一気に実行の方が速いでしょ」はその前提を伏せて、一方的に377を間違いと断言しているので、新たな誤解の種を生んでいる
初心者は前提の違いに気がつかず、強い否定があれば「そうかもしれない」と思ってしまう
誤解をなくすには、お互いの主張が正しくなるよう、前提付きで2つの意見を列挙するのがベスト
補足するのは良いが、表現が適切ではなかった >>394
平たく言えばそうなるが……HTML側のダウンロードはJavaScriptの実行速度ではないからそこが少し不明瞭になるのも、それはそれでよろしくないのでは
というか「実行速度は～」って表現は直後に、「JS処理を開始するタイミングが早まって全体の処理が終了するタイミングが早く見込める」という表現を推してる
前提を伏せたんじゃなく、前提と結果を噛み砕いたと思う >>385
「javascript activexobject mediaplayer」で検索！ >>393
そうだね
特性が違うから使い分けるのもそうだし、内容によって分けて併用するのも十分あり
元レス見ると、関数の書き順ってのは関数定義の順番だよね？
そのご飯の例の場合は入れ子にはしないだろうから、そもそもその順番で書く意味がないと思う……だから慣れてても読み辛いだろうね
入れ子、例えば「炊き出しする・配膳する・献立を料理する・お米を炊く・おかずを作る・お米を盛る・おかずを盛る」の場合
お米を炊く = (){} //定義
おかずを作る = (){} //定義
献立を料理する = (){お米を炊く(); おかずを作る();} //定義
お米を盛る = (){} //定義
おかずを盛る = (){} //定義
配膳する = (){お米を盛る(); おかずを盛る();} //定義
炊き出しする = (){献立を料理する(); 配膳する();} //定義
炊き出しする(); //呼び出し
みたいに書いても、慣れてると読みやすいと思う
実際には「炊き出し」→「献立」→「米炊く」→「おかず作る」→⋯⋯→「おかずを盛る」って順番で呼び出されるけどね >>397 の場合入れ子構造はこんな感じ
炊き出し
┣ 献立作る
┃ ┣ 米炊く
┃ ┗ おかず作る
┗ 配膳する
┣ 米盛る
┗ おかず盛る 流行り廃りというものがあるからな
例えば一昔前はプリロードがプリレンダがベストとされてたけど、セキュリティ上の懸念がある事がわかって今じゃブラウザ皆力入れるの辞めちゃったし
そういうのを追って先を読む力が最も重要 >>397
>>398
すっごいわかりやすく説明してくださり、ありがとうございます。
定義した関数を処理項目？ごとにまとめて呼び出すと読みやすいですね！
こちらを参考にして、組みなおしてみます。
正解が見えず手が止まってしまってましたので、本当に助かりました。 IndexedDBと似た構造やしくみをもつNoSQLってなにかある? IndexedDBに似たものでいいなら好きなように軽くラップすればいいだけじゃん
機能が過剰で煩雑と思うのであればstd:kv-storage使えばいい >>400
初めのうちは処理を書き連ねたり1つの関数が大きくなったりなりがちだよね
でも今後もっと大きいプログラム書いていくと、それじゃどんどん肥大化して読み辛くなっちゃう
関数はどんどん部品に小分けしていくと良いから少しずつ慣れていこ >>403
1行目無いと2行目の内容が1つ前のレスと競合して意味分からんレスになるぞ >>406
〉 「実行速度は～」って表現は直後に、「JS処理を開始するタイミングが早まって全体の処理が終了するタイミングが早く見込める」という表現を推してる
前提無視じゃなくて前提を明確に区別したと思うんだけど……
対で全体になる前提の、片方だけ抜き取っちゃったらもう片方の前提が内包されないのは当たり前
そうじゃなくて、同じレスの中には全体に言及してる部分があるんだから併読するべきじゃ？ はじめてのフロントエンド開発って本でReact入門始めたんだがfirebaseの設定という全く関係ないところで躓いた・・・
npx firebase serve --only functionsを実行すると
gyp ERR! node -v v10.16.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
〜中略〜
node-pre-gyp ERR! node -v v10.16.3
node-pre-gyp ERR! node-pre-gyp -v v0.13.0
node-pre-gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! grpc@1.24.1 install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the grpc@1.24.1 install script.
って１つのエラーが消えない・・・
エスパーさん助けて！！！ gypは鬼門。
これのせいでネイティブモジュールが大嫌いだった。
今はgypも問題ない環境になってるが、どうやって構築したのか分からん。
ブログにでも書いておくんだった。
ま、検索したら出てくるやろ。 >>407
JSをよく知らないみたいだけど、
イベントドリブンだから始まりと終わりは明確とは限らないんだよ >>410
あやふや過ぎ、適当な否定なんてするんじゃないですよ
イベント駆動なのも記述したもの全てが漏れなく実行される時機が明確じゃないのも知ってるから、そのあやふやな指摘さえ間違い
そしてDOM読み込み以外のイベントで呼び出されるコールバックは今回の話には関係ない
複数のレスで想定されてるレンダリングブロックのような差異に影響しないんだから
むしろ本当に今回の話題の状況についてJSを理解できてないのはあなたじゃ？ そもそもイベント駆動部分を考慮したら始まりと終わりの差異なんて考察できないだろうに……
文脈を読まなくても今回の話題は（DOM読み込み類を除いて）イベントハンドラは関係ないと判るはず うーん、かなり無理がある反論だね
自分の非は素直に認めたほうが印象いいよ
これでもう貴方の話は誰も信頼できなくなった >>394で結論は出てるからなあ
その後の反論は見苦しいとしか思わない 俺は知ってる、そういうつもりで言ったんじゃない、俺の心を感じろ
後付の言い訳ばかり >>415
本筋じゃない話を後からされたんだから後付けになるのは当然では？
その方向性なら後付けで元の方針を変えた時は叩くべきだけど、今回は当初から主張変えてない
>>414 >>413
反論じゃなくて一部の表現を否定してる
完全に同意しない意見は漏れなく全否定の反論だ、ってのは違うしそんなつもりもない
勘違いしてるからはっきりさせる
>>394 全体を否定する意見じゃなく、むしろその主張に従ってますよって方向性
>>394 の"結論・本筋の是非に影響しない"、「前提を無視して」という表現のみを否定してる もし「反論じゃないのか？じゃあ意見の本筋に文句が無いならややこしいから物申すな」って感じたなら、二元論になりかねない
正反対ではない意見なら、対立だけじゃなくて共存してる可能性も気に留めてもらえたら良いなとか思う >>416
意固地になって軌道修正しなくとも
そうだねで話は終わるんだよ
そんなつもりはないでは済まないのが現代の社会
受けてファーストだからよく覚えとき >>418
そうだね、よく思えとくよ
ただネット社会の書き込みでは
行間読んでそこに書いてる以上の先読みをするのも適切な事じゃない 業務系システムで使うJavaScriptに関するオススメ本を教えて頂けないでしょうか プロゲート、パイザとか一通り終わりましたがこの後どう勉強していけばいいでしょうか >>419
ネット社会でどのような発言や対応が炎上して
どのような立ち振舞がうまくいくかは
先人の例から分かってるでしょ
君が自分の好き放題行動するのは勝手だけど
それで最善の結果が帰ってくると思ってるのならお花畑 HTML, SASS/CSS, jQuery, Bootstrap などを学ぶ
自分のPC に、VSCode, Node.js を入れる >>422
炎上しないで話をするのが目的のスレじゃない
だからあのレスもそんな目的のレスじゃない
初めから言ってるけど、右も左も分からないような初心者であっても、偏った情報を背負い込むことにならないようにという目的。まあ釣り合いをとっただけ
だから何故「噛みつかれたくないなら当たり障りのないレスを心掛けろ」って方向の説教をされてるのか疑問だし、それで非難される義理もない 他者を否定するコメントで釣り合いがとれると思う理由がわからないけど、彼の中では納得出来る理由があるんだろうなあ 何いってんだかね
当たり障りのないレスを心掛けるのは他者への最低限のマナーなのにね
上手く会話する気がないのならチラ裏にでも書いてろってね indexedDBって使いみちがよーわからんな
localStorageならコピペでも簡単にバックアップ取れるけど
IDBはそれができんし 文字列しか入れられんからじゃ？
構造化データJSONで入れても全体ロードしてパースだろ クライアントサイドで完結する形態素解析器ってなんかないですかね?
http://chasen.org/~taku/software/TinySegmenter/
↑を見つけたけどこれだと分けるだけで 読み がないのでちょっとなりないかなぁと 形態素解析のキモはデータにあるとして
そのデータは10MB以上あるが
それをクライアントにダウンロードさせるのか？ Webアプリなんだから10MBや100MBくらい問題無いでしょ
ちゃんとキャッシュするっていう心づかいさえ守れば あったと思うけどパッと出てこない
家帰って見つかったら貼っとく 演算子で !* ってどこかでみた記憶があるんだけどどんな意味だっけ
ためしにやったらシンタックスエラーでた・・ kuromoji.jsのほかにrakuten MAってのもあるけど何年も更新されてないな… イベントについて質問があります。
ロード後とスクロールをイベントとして利用する場合
スクロールをしてからにリロードをすると、ロードとスクロールの
イベントが2重で発火してしまっています。
そこで、ページトップとページの途中を判別したいのですが
何かヨサゲな方法はありますか？ 特定の要素からの、スクロール位置だろ
「javascript scroll 位置」で検索！ ラジオボタンのchangeイベント監視したいんだけど
選択状態を変えるとchangeイベントが二回発生するようで原因がわからない
なんで? htmlは
<div id="radioButton">
<input type="radio" name="options" value="option1" id="option1">option1
<input type="radio" name="options" value="option2" id="option2"> option2
<div>
でJSが
document.getElementById("radioButton").addEventListener("change",function(){
console.log("changed")
})
で、ラジオボタンの選択をかえるとchangedが二回表示される。
divにリスナーつけてるからだめなのかと思って試しにid="option1"につけてみたけどやっぱ二回でる forEach内でvar宣言すると、無闇に宣言が繰り返されてしまうので
よくないのかなと思い、外で宣言するようにしているのですが意味はありますか？
↓の例の以外にも変数やら配列やら、モロモロ外で宣言するようにしています。
その場合、スコープの関係で変数が親スコープ？に大量に並んでしまい
少しわかり辛い気がしています。
なので、意味がないのであれば、forEach内で宣言するようにしたいと思っています。
①forEach内で宣言
test..forEach(function(value, index, array) {
var func() {...};
func();
}
②
var func() {...};
test..forEach(function(value, index, array) {
func();
} >>442
すみません。追記です。
forEach内での関数のvar宣言をした場合配列の数だけ繰り返し宣言されてしまうが
呼び出しであれば、宣言は1回と考えていいのでしょうか？
また、変数や配列の場合forEach内で宣言させないことで、多少なりとも速度に影響はでるのでしょうか？ >>442-443
1. と書いても、コンパイラの最適化で、2. ように展開してくれないのか？
さすがに何回も、関数宣言が実行されたりしないだろ。
無駄だから、最適化するだろ >>441
Windows10 で、Edge, Chrome で実行したが、正常に、1回ずつ表示される！ >>443
何度も宣言しない代わりに参照時に何度も外のスコープを見に行く手間が発生するでしょ
だから無闇にそういうことを考えることが無駄
ESの仕様書をスラスラ読めるようになってから考えたら良い >>444
コンパイラなるものがあって最適化されるんですね！！
ググったのですが、難しくて理解できなそうでした
>>446
外のスコープを見に行く方が、何度も宣言するよりも処理に時間が掛かるのでしょうか？
であれば、内々で処理を行うのがベターなんですね。 >>448
なんと。。。
構成が結構変わってくるので、職場ではこっちが多数みたいのがあれば
ぜひ教えてくださいませ。 >>449
ここで誰かがこっちの方が良いと言えば一生それに従うのか？
そういう言語もあるがJSでは言語としてこっちのスタイルが標準的という決めごとはない
JSは壮年期に差し掛かっているかもしれないがまだまだいくらでも成長する言語だ
流行は勿論気にし続けないといけないが、それと同時に自由に常に自分で模索し続けて
自分なりの様々な感覚を養っていくことがWebやJSにおいては重要
それにどっちが自然かなんて全体的な様子で変わる >>444
どちらかというと逆でしょ
普通はインライン化されて、関数の中身がforEach内に展開されて
さらにforEach内全体で最適化がかかる
でもそこまで最適化されることは実際には少ない
最近のエンジンはインタプリタ強化に回帰していて
省メモリとかオーバーヘッド削減に力を入れている >>450
自分とこの会社では、自分の周りは冗長な記述が多く参考にはならず、
違う部署の人はレベル違いで読み解けずといった感じでして。
今の主流を知りたいと思っています。 昔は推奨された書き方が今では遅いなんてのが結構あるからね
ブラウザによっても逆転するから一概に言えない ESのバージョンも無しに今の書き方って言われても分かんない >>452
主流なんて無い
極論を考えれば全部グローバルに宣言を出すのも馬鹿らしいし、
最小限になるようできるだけ細かく多くのスコープを区切るのも馬鹿らしい
どちらにすべきかではなくて、バランスを取ってその時その時で全体的に自然に書けとしか言えん
比較演算子で定数をどちらに置くべきかとか、拘るのが馬鹿らしい問題というのは数多くある
そんなことにいちいち惑わされる暇があったら別のところに時間を使え >>455
極論についてはおっしゃる通りですね。
ESの仕様を理解はできていませんがバランスを見つつ改善を続けていきます。
関数やら変数の宣言って、最初の読み込み時にエンジンが把握するためのもので、
呼び出し時に宣言されるってことではないですよね？
それだとスクロールイベントで宣言した場合、毎回宣言されて大変ですよね？ 最適化は仕様にない。各社、自由だろ。
無数にある環境・ブラウザの組み合わせを、考えても無駄！
例えば「Effective Ruby、2015」の項目47 では、
ループ内で、文字列リテラルを使うと、
文字列が生成して、すぐに破棄されるから無駄なので、ループ外に出す
次に、Ruby 2.1 では、文字列リテラル.freeze で、
文字列は、1回しか作られないから、ループ内でも大丈夫
次に、Ruby 2.3 では、スクリプトファイルの1行目に、
# frozen_string_literal: true
と書くと、すべての文字列リテラルは、immutable になる
このように最適化は、ドンドン変わっていく！ >>456
宣言文というのは、関数コンテキスト生成時と、コンテキスト実行開始（スコープ到達）時、宣言文到達時にそれぞれ働きがある >>461
そういうのどうやって勉強すりゃいいの？
es仕様直接読む頭ないから噛み砕いて説明してくれる本がほしい 仕様書なんて英語の文章としては超絶簡単な部類
その大部分がa is b , b is cで積み重ねだから
読むために必要な能力って言ったら追っかけ力だけで
それは読んでれば勝手に身につく >>457
計ってみても誤差で判別がつきませんでした
>>461
難しそうですね
読み込んだ後は宣言なしと一緒とかだと理解できたのですがｗ
ちょろっと計測しても誤差にしかならないのなら、いっそスコープ狭めた方が
読み手には優しいですよね。
無理してネストを浅くして、気にしないといけない変数が大量にあるよりも。
馬鹿な自分でもわかる方がいいですし。 その考え方でよい
実行速度にシビアな場面で初めて優先順位が変わる あと念の為補足すると
varはブロックに入れてもスコープは狭くならない letで宣言してスコープを関数内
に留めるのがいいかも >>464
宣言文というものはスコープに変数を作らないといけない
スコープが作られるのは宣言文より前のステップだ
だから実際宣言文に達する前にスコープを作る段階で働く
ステップが宣言文に達したらまた別の働きをする
他の多くの構文にもこのようにRuntimeな働きとStaticな働きと言うものがある 今のJS初心者なんで
とりあえずletにしとこ、程度なんだけど
constにすると大きく違うシーンってどんなのがありますん？
自分じゃない人がメンテするときに
不用意に上書きされないってのはいいとは思うんですが >>469
基本は、とりあえずletにしとこうではなく、とりあえずconstにしとこうだよ
letにしないとエラーが出るとこ以外はすべてconstにするんだよ 基本は、オブジェクトは可能な限りfreezeかsealしなくてはならない
基本は、等価判定は可能な限りObject.isを使わなければならない
基本は、可能な限りaltJSで書かなければならない >>471
これ見るとJSはアホすぎて滅ぼしたほうがいいレベルだな
現実には生き残り続けとるが 問題に神経質に対処しようとするのではなく
おおらかに問題を飲み込むコーディングができない人にはJSは難しい >>466
知りませんでした。
ありがどうございます。 >>467
この文なんかおかしい。
いやletはブロックスコープで、関数直下に書くと関数スコープと一致するからそれはいいんだけどvarは関数スコープだから「letで宣言してスコープを関数内に留めるのがいいかも」って言及はなんか違う。
だってvarで書いても関数スコープなんだもん。
letの使用を推奨するのはいいんだけどその理由の説明が間違ってる。 >>476
あ～確かに
関数内でvarで宣言してもスコープは関数内に留まるね
勘違いしてたっぽい >>474
forEachの第一引数がcallbackで第二引数がthisArgとあるが第三引数なんて出てないが。 IE対応でletやらconstやらclass構文使えてないです。
その辺の理解が浅いと転職できないですか。 >>478
Uncaught SyntaxError: Unexpected identifier >>480
babel先生のお世話になってみるのはいかが？ letやらconstやらclass構文使えない環境で頑張ってきていたら
むしろスコープや定数やクラスシステムを振る舞いから表現まで気にして
JSのバックグラウンドにも詳しくなってるはずだから
それらの構文を扱うのに経験なんて必要なく知って数日で馴染めるでしょ chromeで動いていた重いJavaScriptが
vivaldiだと落ちます
おそらく処理時間が長すぎるとタイムアウトを起こすようになってるんじゃないかと思いますが
ブラウザによってタイムアウトのメカニズムがあったりなかったりすると困りますよね？
処理時間が長くなる場合はsetTimeoutなどを使ってはじめから処理を細切れにしておくべきなのでしょうか？ 確保したメモリ使い果たしたとか
そういう話じゃないんだろか >>488
ありがとうございます
確かにメモリの問題だったようです
巨大な文字列を生成するのをやめたら動くようになりました 今COTでScroll To Text使えるけど
これがデフォオンになったらいよいよjQueryとプラグインから卒業できるわ jQueryは使ってるけど、jQueryプラグインは使ってないなぁ
jQueryは自分で実装するのが手間だから使うものだよ。
プラグインのためじゃない。普段コードを書かない人なのかな？ クリックイベントとかの元々の処理を無効にする記述って
どのタイミングで書くかで変わったりする？
重たいしょりが思いつかなくて計測しても違いがわかりません
下の奴です
e.preventDefault();
jQueryと違ってイベント発火直後がいいのかな？ jQueryと違ってというが、元の処理を無効にする場合
jQueryの場合でもページのなるべく最初の方で
$(document).on('click, 'A', ～
みたいにするってわかってるか？
$(function() {
この中に書いたりしないぞ
})
documentはJavaScriptが読み込まれるタイミングでは必ずあるので
DOMの読み込み完了を待つ必要はないんだよ。
だから$(document) にイベントを割り当てる場合、
ページの最初でやって問題ない。
その前提の話をしてるか？ >>492
当然、バブリング、キャプチャリングフェーズのどこで発動するかによって、タイミングが異なる
だが、e.preventDefaultでイベントハンドラ実行を停止させる使い方は必要なプログラムまで停止させるリスクがあるのでやらない
フォームパリデーションでsubmit抑止など、デフォルトアクションを停止しなければならない時ぐらいだが、それで迷うことはあるまい > 必要なプログラムまで停止させるリスクが
んなもん、セレクタで絞り込むだけやん jQueryだと
$(document).on('click, function(e) {
e.preventDefault();
});
で全部元の処理が無効になるが、これを特定のクラスが
ついたものにするなら
$(document).on('click, '.klass', function(e) {
こうするだけ。
たったこれだけが面倒だなんて誰も思わんだろ イベントハンドラ関数内のどこに書くかを聞いてるのだと理解したが
非同期処理しなければreturn前のどこに書いても一緒
当然非同期処理内やawaitより後はだめ >>494
例外や考慮すべき事柄が多い
高度な構造はそもそもjQueryで扱うのに適さない
jQueryは適当にざっくり処理するためのもの EventTarget.addEventListener()の第3引数のpassiveプロパティで分かりそうなもんだけどね
trueかfalseかで、event.preventDefault()の可能性の為に規定の処理を待機するかが決定されるってことはそういうことなんだなと >>442
このようにします。
宣言が繰り返されることはありません。
let arr = [1,2,3,4,5];
arr.forEach((({
足す１ = n => n + 1,
掛ける２ = n => n * 2,
定数 = 42,
} = {}) => (value, index, array) => {
console.log(`配列${JSON.stringify(array)}の${index}番目の要素${value}に1を足して2を掛けて定数42を足した数は${掛ける２(足す１(value)) + 定数}です。`);
})());
出力:
配列[1,2,3,4,5]の0番目の要素1に1を足して2を掛けて定数42を足した数は46です。
配列[1,2,3,4,5]の1番目の要素2に1を足して2を掛けて定数42を足した数は48です。
配列[1,2,3,4,5]の2番目の要素3に1を足して2を掛けて定数42を足した数は50です。
配列[1,2,3,4,5]の3番目の要素4に1を足して2を掛けて定数42を足した数は52です。
配列[1,2,3,4,5]の4番目の要素5に1を足して2を掛けて定数42を足した数は54です。 いい加減何万人月もかけて作られてこれでもかとお膳立てしてくれているブラウザ上で
細々したことに悩む馬鹿らしさに気がついたほうが良い ブラウザ毎に精度違う可能性があるなら気に掛ける意味あるじゃん
何いってるのこの人 ubntuってもとからnode入ってるんだな
システムで使ってるの？ >>501
const厨だからクロージャ使うのでもこっちのほうがいいですわ
arr.forEach((() => {
const 足す１ = n => n + 1;
const 掛ける２ = n => n * 2;
const 定数 = 42;
return (value, index, array) => {
console.log(`配列${JSON.stringify(array)}の${index}番目の要素${value}に1を足して2を掛けて定数42を足した数は${掛ける２(足す１(value)) + 定数}です。`);
};
})()); >>504
ここは実際に困ってる問題を解決するスレであって
心配性構ってちゃんの遊び場ではないから <img>要素のonclick使うよりadEventLithnerの"click"使ったほうがいいの？
どっちも同じですか？ ↓のようにif文の条件に当てはまってreturnするケースの場合
リサイズイベントが走りませんでした。
ロードの際に全部読み込むので、リサイズイベントは発火するものだと
考えていたのですが、実際は読み込むときも条件次第で到達できなければ
イベント登録されないということなのでしょうか。
var test = function() {
if (...) {
return;
}
window.addEventListener('resize', function() {
...
});
}; >>511
よくよく考えたら当たり前っぽい気がしてきました。
冷静に考えるとイベントリスナだけ特別ってなわけないですもんね。
イベントリスナまでたどり着けてはじめて登録されるってことなんですね。
上手くいかない箇所を探していたところ、まさかのまさかだったので
勢いで質問してしまいました。 public class Hero
String name;
int hp;
public Hero(String name,int hp){
this.name=name;
this.hp=hp;
}
public void heal(int sec){
this.hp=this.hp+sec;
}
public class Main{
public static void main(String args[]);
Hero h1= new Hero("zako",10);
Hero h2= new Hero("gomi",20);
h1.heal(2);
h2.heal(3);
Hero h3= h1;
h3.heal(7);
h1=h2;
h1.heal(11);
}
質問です 上記のプログラムを実行したらzakoとgomiのhpはいくらになりますか？(自分の解釈はzakoが34 gomiが 23になりました) こいつキチガイか？
日本語が分からないから5chなんかに来るんだろうが zakoなのはjavascriptスレでjavaの質問をしてしまった自分だったと言う話。
自分が書いているプログラミング言語が何なのかも把握していないgomi 「スッキリわかる Java入門 第2版、2014」の話は、
プログラム板のJava スレへ書き込んでください
Java・JavaScript は、異なる言語です！ いい加減、jQueryは不滅ってことでいいですかね？ 何度もすみません。
所作について質問です。
load・resize・scroll などのイベントリスナ内で、それぞれ同じ変数を用いる場合、
親スコープで変数を宣言して、それぞれのイベントリスナ内では値を格納するだけなのか、
それぞれのイベントリスナで変数を宣言をしつつ値を格納するべきなのか、
どちらが普通なのでしょうか？
イベントリスナ内で呼び出した関数の返り値を代入する変数を想定しています。
変数名は一緒です。
よろしくお願いします。 お前のその言葉での説明でわかるわけ無いだろ
コードかけや load・resize・scroll で、共通の状態変数なら、関数の外で保持する >>524
JavaScriptは言語で書き方や構造を縛るような作りにはなっていないし
そう言ったことを主張するような中心的なコミュニティも存在しない
つまり「普通」などない <input type="number" id="test"></input>
var t = document.getElementById("test")
t.addEventListener("scroll",function(e){e.preventDefault();e.stopPropagation(); console.log("aa")},{passive:false}
↑でボックス上でスクロールしたらボックス内の数字をかえられるようにしたいのだが
テストで書いた↑のコードだと、コンソールにログもでないし、普通にスクロールもされてしまう。
なんで? ちっぽけな事に拘るなとは言わんが
ここに居る数人に聞くよりも１００のコードを読み書きして
自分で研究した方がよっぽど良い結果を得られるとは思わないか？ 変数は関数内に閉じ込めてカプセル化したほうがモジュール性がたかまるのでいいい 文書内を全文検索して特定の単語の位置を取得して
所定のボタンをおしたら順次移動(Ctrl+Fみたいなの)
みたいなのってJSでどうやればできる? いまどきのPCは性能がいいので
よっぽどでかいデータを大量に出し入れするんじゃなけりゃ
そんなの気にしないでいい >>525
失礼しました。
各イベント内で同じ関数を実行し、その返り値として真偽値を受け取りたいのですが
値を代入する変数をどのように管理するかで悩んでいます。
①イベントの親スコープで宣言する
②各イベント内で宣言する
変数のスコープを狭めるには後者だと思うのですが、同じ名前の変数を何度も宣言する
記述を今のところ見たことがないため質問しました。
↓は①の例です。
var test = function() {
var returnValue;
var commonFunc = function(){...};
window.addEventListener('resize', function() {
returnValue = commonFunc();
...
});
window.addEventListener('scroll', function() {
returnValue = commonFunc();
...
});
};
>>526
状態変数をはじめて知りましたので調べてみます。
>>527
普通と言いますか、現役の人達はだいたいがこう書いてるからこうしとけ的なのが知りたいです。 関係がないなら変数の使い回しはするな
varは使うな。constを使え。letは甘え
現役の人はだいたいjQueryを使ってる。 状態保存したり、他から参照する必要があるなら外で宣言
関数内だけで完結できる変数なら中で宣言しとけ。わざわざ外で宣言して同じ変数使い回してたらバグの温床になりかねない IE11ですら不完全ながらlet,const使えたのにsafari9以下が足を引っ張ってたのがね 変数は必要ない限り関数中に閉じ込めるのが基本って何回言えばいいんだよw >>533
変数の名前を全て管理する自信があるなら何やったって良い
ちなみに見たことが無いのは職場環境の問題 >>533
①の書き方で良い
今回の場合、returnValueはcommonFuncに関係しているから、
commonFuncを外に出す以上、returnValueも外に出すのは十分に自然で
ニュアンス的に意味のある行為なのでその細かいセンスは自信を持って良い ノベルゲーム作っているのですが、
各選択肢の先をportalタグで持っておいて、
ある程度portalタグ内を読み勧めたら完全に遷移して後戻り出来なくしたいのですが、
portalが切り替わるエフェクトモーションの挙動というかそのあたりの調整ってJSでどこまでできるのでしょうか？ jquery使わないでJSONファイル読み込むにはどうやりますか？ const parsedObject = JSON.parse(JSON文字列); >>544
いやその前のファイル読んで
JSON文字列にするところが知りたいです >>545
const response = await fetch(url);
const json = await response.json();
ある程度古い環境にも対応させるならXMLHttpRequestで >>546
fetchって同じディレクトリにある.jsonファイルも開けます？ どうして既に知ってることを聞くんだろうな
そんなに人と話したいのか？ >>528
普通に、上下矢印キーで、数字が変わる！
preventDefault, stopPropagation の意味を勘違いしているのでは？ インプット要素はどんなUIが設定されているか分からないのに
介入しようという時点で間違っている >>528
スクロールってもしかして入力欄上のマウスホイール操作の事か？
scrollじゃなくてwheelイベントやで >>531
https://jsfiddle.net/x9brq8e0/
jQuery で作った
span タグのクラスの付け外しで作ったけど、
<br> を使っているから、検索ワードに、これらが入るとバグる。
色々な文字実体参照などでもバグりそう
p タグの中には、他のタグが無い方が安全
これは、解決は難しい。無理 addEventListenerの3番目の引数のfalseって何なん？省略してもいい？ >>552
おお、できた!
サンクス!
>>551
どゆこと? >>557
Webはスマートウォッチから冷蔵庫まで参照するもので
input系のタグはそれぞれのデバイス・OSに合わせて
ブラウザが自身のポリシーを反映させたデザイン・UIを
練りに練って用意してるのだからうかつにそこに介入すべきではない
弁当を買ってきて調理し直してまた売りに出すようなもので
奇怪で高等テクニックだからオススメしない 個人の思い込みではないかな。
値への介入ならReactなんかもしまくってるし、UIに応じた操作をと言うなら
inputタグだってwheelイベントだって抽象化されたものだし。 >>559
ホイールの向きにしたって見た目がテキストボックスなら上方向で数字が戻るのが自然だとしても
見た目がドラムホイールなら上方向で数字が進むのが自然かもしれない
現実的にもドラムホイールUIが採用されることがままあるスマホやタブレットに
マウスを接続することだって十分に考えられるがその程度のことだって判別や調整が困難
だからtype=numberという抽象度のかなり高いものを使いつつ
そこに介入しようというのは相当奇怪で高等なテクニックということができる
それならばまだ、抽象度の低い部品で１から好きな入力フォームを組み立てて
俺のサイトではブラウザ様が用意した心のこもった便利さは排除するので
俺が作った使いにくいUIを使えと押し付けるほうが良いと個人的には思う Chromeは一度フォーカスすればホイールで変えられるがそれでは駄目なのか？
https://jsfiddle.net/Mottie/bLp69rt4/ Webアプリにはそれぞれの特質があって
どう言う場面でどういうデバイスからアクセスするとかは
その特質によってたいてい決まってくるもん
冷蔵庫とかスマートウォッチからアクセスがあることは統計的にはほぼ生じないなんてことも
そのアプリが持つ「文脈」を考えないと一概にはいえないとおもうが? 👇なんで途中で端数が出てきたりするの?
n=0
0
n+=0.1
0.1
n+=0.1
0.2
n+=0.1
0.30000000000000004
n+=0.1
0.4
n+=0.1
0.5
n+=0.1
0.6
n+=0.1
0.7
n+=0.1
0.7999999999999999
n+=0.1
0.8999999999999999
n+=0.1
0.9999999999999999
n+=0.1
1.0999999999999999
n+=0.1
1.2 >>563
自分が言ってるのは、ブラウザの提供する部品を最大限活かしてありのまま使うのが５で、
FlashチックにCanvasと素朴なイベントで全部UIを０から作り直して提供するのが１としたとき、
CSSで少しカスタマイズするくらいの４は混乱がほぼないし、
カスタムエレメントやHoudiniを駆使して独自の世界を作り上げたら
それはウザいかもしれないが、ユーザーはウザいサイトだということが分かる
でも今やろうとしていることは一番中途半端な３であって上手く使えば良いとこどりができるが、
失敗すればブラウザが提供している良さは消えて、こちらが提供したいものも正しく発揮できない結果になるよ
ということ >>564
10進数で小数点以下一桁で表せる数の多くを2進数では有限の桁数で表すことができない
0.1→1/16+1/32+1/256+...
正確に表せるのは
0.5→1/2
だけで他に狂ってないように見えるのはたまたま 対象のデバイスが違えば同じ記述じゃ間に合わないから@mediaで切り替えるなんて
Webじゃ当たり前に行われていることだろう。
もし冷蔵庫で動かす可能性が出てきたらそのとき考えればいいだけのこと。
冷蔵庫にwheelが無かったとしてもキー入力ができるならそれでいいわけだし、逆に
キー入力もできない環境も想定しろなんて言われたら input type="text" すら
考え直さなきゃならん。 対象のデバイスが違っても同じ記述でおおよそ間に合うように作られてるのがWebなのに
そこを壊しかねない行動は控えるべきかどうかという話がされているのでは？
結局全部に１つずつ対応するのが良いと思ってるのは君しかいないと思うよ >>567
0.1を2進数で正確にひょうげんできないってのは
なんとなくわかるけど
なんで 時々 端数が出てくるの? >>570
２進数で正確に表現できていれば、つまり２進数で有限の桁数で表されていれば
１０進数でも有限の桁数で表すことができ、つまり表示が崩れない
だけど、その逆は成り立たないのは先に説明した通り
だから、１０進数表記を２進数の値にするときに最終桁で丸められて
誤差を含んでしまっているから、それを１０進数表記に直した時にその誤差が見える 同じ記述で全部まかなえたらいいというのは作る側の都合だわな。
それで済ませるためにデスクトップでモバイル向け画面見せられたらユーザーはたまらんな。 それを否定することは効率化の否定だろう
今現代この世に溢れてる物はオンリーワンのオーダーメイドのものの方が少ない
それでも十分によく万人向けに作られたものは多くの人にとって
誰に向けて作られたのか分からないエゴの塊よりも使い勝手は良い
それにお下の面倒まで見ないといけない赤ちゃんではないのだから
ユーザーはあるものをあるものなりに使う
むしろ、ほらお前はこういうのが良いんだろうと押し付けられる方が
ユーザーにとってはたまらないという場合だってある
０か１かでしか考えられない奴って 森羅万象この世に存在するすべてのデバイスからのアクセスを
余すことなく完璧に対応するべきってこと?
違う気がする… >０か１かでしか考えられない奴って
「介入すべきでない」とか言ってる人のこと？ >>573
いみわからないね
ビジネスでやるなら
メインのターゲット向けに開発するのが当然だがな
0.1%の例外をあいてに何をもとめるんだってはなしだな
どのあたりが0か1なの? const とか let とか宣言すると、宣言してるな！ってパット見でわかるのですが
空のオブジェクトを宣言した後に、離れたとこでひっそりとプロパティを追加されると、
追加されたかわかり辛いです。
どうにかする方法はないでしょうか？ >>576
ここはビジネス板ではない
自らJSを学ぶ人のためのスレ
ビジネス相談や依頼はお金を払ってビジネスでやれ >>578
最初ににプロパティをつくらせて
事後にプロパティついかさせないようにすればよくね? >>579
ビジネスでやらないならもっと森羅万象のデバイスにに対応する必要がなくなるが?
趣味なんなら想定したデバイスだけに対応させればいいだけ
なんで趣味でやるのに森羅万象にたいおうさせるひつようあるのか?
言ってることが逆 エロ動画サイト作るときに、冷蔵庫で動画流しながらオナニーする奴のことなんて
誰も考慮しねーよバカってことですか？
アヘ顔認証でwheelイベント発動ってことですか？ >>582
するか普通?
冷蔵庫でおオナニーなんだよw >>581
落ち着きなさい
森羅万象に対応させる必要があるなんて誰も言っていないでしょ
周りをよく見なさい >>578
Proxyにしとけば追加されたとき分かる >>584
じゃあ何をいってんの?
趣味なら事前にかってに想定したデバイスに対応したアプリでいいじゃん…
金もらってないならあれやこれや想定してないデバイスに対応させる必要あるんかいな。
言ってることがわからないね inputフィールドの内容をwheelイベントで変更するってだけの話がえらい横道に逸れたな。 >>586
君がどの発言に対してコメントしているのかわからないけど、
「０か１かでしか考えられない奴って」という消し忘れた書きかけの言葉に対してどういう意味かと言ってるのなら、
全てのデバイスに完全に対応することはそもそもWebでは不可能なことで、
だからと言って何も考えないで良いわけでもないというようなことを書こうとしてたときの名残
ちなみに自分は>>573だけど>>579ではないからね そもそもtype=numberはマウスホイールで数値変更できるでしょ >>584
森羅万象に対応さろって印象うけるが
森羅万象に対応させないなら
切り捨てるものと切り捨てないものの線引きはどうするの?
冷蔵庫はなぜ切り捨てられなかったの?
よくわからん >>591
もう回答いくつか出てるじゃん
それらを試してみてまだ何かあれば続きをやろうね >>592
ひょっとして>>558の話？それならよく全文や話の流れを見なよ
冷蔵庫にも対応しろって話では全く無いでしょ
例えばスマートウォッチや冷蔵庫という極端なデバイスであっても
最低限きちんと使える状態のUIをブラウザがinput要素には提供してくれてるのに
そのわざわざ各デバイス向けにカスタマイズされてるものに介入するのは高等テクニックだよと言ってるだけでしょ >>551が深く考えないで雰囲気でマウントとりに行ったらいろいろツッコミが入って、
それを取り繕おうとしているってところだろう。 >>594
まずIDでないのに全文のながれくむとかむりだから
全文の意味くみとってほしいならIDさらせよ
つぎに冷蔵庫に対応しろって話じゃないなら
何が言いたいの?
冷蔵庫で使わなないら
冷蔵庫の話を出す意味がわからない
せべきではない、っていってるが
それはやるなって話でしょ?
いみがわからない
つか冷蔵庫ってなによ? >>596
いや、全文っていうのは１レス全文のことだよ
冷蔵庫ってのは今どきレシピを見るためにインターネットに繋がってWebViewをもった冷蔵庫も考えられるでしょ
っていうイメージだったけど、そこで混乱を招いたのなら謝る
何が言いたいのかって、input要素、それもnumberという
デバイス毎に独自のUIが提供されそうなものに介入するのは控えた方がいいよって話を
何人かから返信が来たから具体例を交えたり言い回しを変えつつずっとしてただけだよ？ >>597
冷蔵庫でレシピを見るあぷりって
限られてるでしょ
そういうアプリなら冷蔵庫に対応すればいいだけでしょ
なぜそれを前提にアプリ作るのかって話なー
つか冷蔵庫アプリってなんやねん…
特殊すぎるわw >>599
いやだから少なくとも自分は冷蔵庫に対応するしないの話はしていないから
input要素って色んなデバイスに合わせてカスタマイズされてるっていう話での
「色んなデバイス」の１つの例として挙げてるだけでしょ？
むしろ、デバイスの特質やOSのスタイルに合うようにブラウザが良きに計らってくれてて
対応とかあまり気にしなくて良くしてくれてるのに、そこに介入するっていうのは高等テクニックだよ
っていう話であって、君の立場と自分の立場って近いと思うよ？ あるグローバル変数が、特にnullを代入する処理を書いていない箇所で唐突にnullになってしまうという現象に遭遇しています。
（DevToolでWatchしていると同じような箇所でnullになる、再現性はあるがnullにならないこともある）
その変数は一連の処理が終わったらnullを与えてGCを促し、再度処理を行う場合は改めて初期化して処理を開始する、という使い方をしています。
もしかしたら、nullを代入してGCを促したグローバル変数に対して実際にGCが行われる前に再度参照を与えた場合でも、GCが行われて強制的に破棄されてしまうのではないか、
と考えたのですが、こういった件に関してなにかご存じの型はいませんか？
また、メモリ節約のために上記のようなことをしているのですが、他に適切なやり方等あれば教えていただきたいです。 仮にエンジンの不具合で参照が残っているのにGCされても、その変数がnullになることはない
変数というのはSMIを除いて全てオブジェクトとして管理されている
変数はタイプ情報を参照し、文字列やArrayのような不定長の値そこから何段か経て中身が参照されている
中身が破棄されたり上書きされてもその構造上ObjectがNullに化けることはない
Buffer系やファイルへの参照などはその中身がネイティブによって捨てられたり別スレッドへ移譲が起きていつの間にか空になることがあるが
いずれにせよ変数の型が直接変わるようなことは起きない >>601
>>601
だからそのいろんなデバイスの一つとして冷蔵庫出してるんでしょ?
いろんなデバイスってのってのは現実世界でかならずそんざいするわけで
そのいろんなデバイスにたいおうさせるひつようあるのかってはなしじゃないのかよ?
じゃあさきくけど
冷蔵庫はなんでだしたのよ?
例でなにをいいたかったの?
冷蔵庫に対応させる必要ないあぷりなんてとうぜんあるわけで
それが冷蔵庫だろうが ****だろうがいっしょだよw
例が下手すぎるんじゃないのか? で、冷蔵庫って何を想定してるの?
いつまで立ってもこれに対する回答ないんだが。
なんで?
回答ないってのは稀有な自称にも対応させろって意味にしか思えないんだが?
なんで冷蔵庫だしたの?
まずこれに答えて 自分は答えられないので、他の方、どうかよろしくおねがいします。 >>607 == >>600 です
>>606 さんも誰に答えて欲しいのかレスを降ってください >>609
やっぱり自分ですか？他所でやりましょ
お風呂入ってくるのでもっとスムーズに２人で会話できるような場を用意しておいてください >>602
ありがちなのは他の何かと名前がバッティングしてる、非同期でnull入れたあたりか レスの対象をいいなさいというがIDは晒さない
冷蔵庫がいったいなんなのかもわからない
正直よくわからんね >>613
もうここから先はあなたと私の１：１のおしゃべりでしかありませんからね
場を汚すのが恥ずかしいので私はここで続ける気は起きません
もしも、私の例の挙げ方、説明の仕方が悪いというような指摘であれば、
それは全面的に受け入れて非を認めます
それ以外に内容について詳しく議論したいというのであれば、別の場を用意してくれませんか？
今日中に用意してくださればそちらに移行します
以上です >>614
なんでココで鼻だめなの?
なんでIDを晒さないの?
冷蔵庫って何?
一切答える気はないの?
あなたが別の場所希望するならあなたがそれを容易すべきでは?
なぜココではだめなの?
???しかないよ
でなんでIDさらさないの? 場をよごすって技術的な話をすることがなぜ場を汚すことなのかもよくわからない 技術的な話をするのになぜ1;1なのかもよくわからない
他者の意見からにげてるだけでは? なぜここでは駄目なのか、なぜ場を汚すと考えるのかと言うと
あなたは既に私がしっかり返答したと思っていることについて幾つも突っ込んできているため
改めて問題を整理してじっくり腰を据えてあなたと邪魔の入らないところで面と向かって
何度も何度も長文でお話する必要があると判断したからです
私はもはや技術的な話だとは考えていません
これは私とあなたの意思疎通の問題でしかありません
私は新たな技術的な話をする気は毛頭ありません
それ以前の問題として、私が過去に書いた文章をあなたに伝えることができるのかという興味からの提案です
逃げていると捉えてもらっても結構ですし、その他私のことをどのように考えてもらっても構いませんが
私はここでこれ以上続ける気はなく、IDを出さないのもここではあなたに付き合いませんよという意思表示です >>618
なんでかたくなにさげでくるの?
どうでもいいがメールアドレスおしえてよ
IDもさらさない自分で場ももうけない
なにがやりたいのかさっぱり
つかアンカぐらいつけようね?
なんでそれすらできないの?
それが場をよごしてんだよ…
ここは技術について語る場であってその点なんももんだいないとおもうjがねぇ
なんでここじゃだめなの?
つか冷蔵庫ってなにってのには絶高い答え内の? とりあえずあげでいいよあげで
IDでるでしょ?
あげなさい
自分の発言に責任持つのはここからだね なぜここでだめなのかわからんけど
えすえいちあいえぬだぶりゅおーあーるけいあっとわいえいえいちおーおーどっとしーおーえむ
メールよろ >>564
仕様としてIEEE754準拠してるだけだ。
js固有と言うわけでもない↓
http://0.30000000000000004.com/ 悟りマウントオジさんが攻められてるってことでいいの？
悟オジと思しき人のアドバイスって、解決の糸口を与えつつ
でも、その方法はよくないで、みたいなジェントルな指摘じゃなくて
悟りの境地から嫌味言うだけで役に立たないのよね。
何でこのスレ居るんだろ？ 質問者は幅広い意見を聞いて参考にして自ら解決すればいいのであって、
別に誰か一人が正解を用意する必要はないんじゃないか そうそう。だから俺は俺の回答をする。
だがなぜか、俺の回答を批判するだけで
自分は何も言わないやつがいる。 お前のことを知ってるぞという
相手を気持ち悪がらせて楽しむストーカー男 全く出来ないに等しいです
htmlcss一通りできるようになったからjsかjqueryやろうかと思ったら今はvueかreactって勧められたからvueやろうかと
少しjs齧ってからやったほうがいいかな jQueryでいいよ。HTML/CSSと親和性が高いのはjQuery
HTML/CSSメインであればjQueryが一番
vueやreactはJavaScriptを使ってHTML/CSSを
生成するようなものだから作り方が全く違う。
ゲームとかアプリに近いものを作るためのもの。 >>630
DOMの基本までは齧った方が良いよ
vueが何やってるか分からんくなる 違うでしょ
jQueryはDOM操作を要領よくザックバランにする場合に向いているのであって、使うにはあらゆる知識が少しずつ必要。
一方フレームワークはそれらを覆い隠してくれて、Webの知識に乏しくてもコンポーネントを組み合わせてつくりたいものが作れる。
jQueryはあくまで何かを作ってくれるものではなくて、作りたいものを作る方法がわかっている人が有効に使えるライブラリだから知識が欠けてる人に勧めるようなものではない。 >>630
>>634の↓これに注目
> Webの知識に乏しくてもコンポーネントを組み合わせてつくりたいものが作れる。
Webの知識に乏しくてもって書いてあるでしょ？
これ「（他の言語でプログラミング経験があれば）Webの知識に乏しくても」という意味なんだよ
つまりね、フレームワークだと、HTML/CSSといったWebの知識は使わない。
デスクトップアプリ開発の知識が必要ということなんだよ jQueryとHTML/CSSの親和性の高さは、jQueryを使った記述が
CSSと違いことからもよく分かると思うよ。
例えば、CSSで全てのリンクを赤くする場合、
a { color: red } と書く
これがjQueryだと
$("a").css({color: 'red'}) となる > ゲームとかアプリに近いものを
って書いてるのを、ゲームだけ切り取るようなやつやで？
信用できるかな？ vueでカルーセルを使ってみたいんですが、
これをどうやってvueに組み込めばいいんでしょうか？
jQueryならサンプルがあったのですが・・・
https://creive.me/archives/10461/ >>638
そうだよなｗお前いつもウンコとかカレー食べてるもんなｗｗｗ ライブラリとフレームワークを同列で評価するのはおかしいと思う
あとjqueryにしてもvueにしても、まずはプログラミングの基本文法と制御構造や簡単なアルゴリズムくらいは理解していたほうが良いし、それを生のjsで学んでから始めたほうがいいと思う。 jQuery, Bootstrap のどちらかを先に学ぶ。
Bootstrapは、jQuery を使っているし
Vue.js, React などは、仮想DOM とか、そのライフサイクル、
どこの時点で、状態が更新されるかなど、内容が難しい
仮想DOM上で状態を更新しても、実際のDOMは、まだ更新されていない。
そのタイミングのズレが、素人には解決できないバグとなる
jQueryなら、コードが実行された時に、実際のDOMが更新されるだけ。
普通のDOMアクセス
>>639
Bootstrap に、カルーセルは無いの？ Bootstrapは内部でjQuery使ってるってだけで、Bootstrap学ぶ分にはjQuery関係ないよね。 >>618
屁理屈こねて逃げるあほ
メール待ってますよw
当然メールは全部晒すけど
約束守ろうねぇw >>618
IDすら晒せないやつに発言けないよ
メールはよおくりなさい
お前が望んだ連絡法だろw バックエンドのJavaScriptも勉強方法としては同じですか？
言語仕様は同じでライブラリーだけ違うみたいな感じと思っていて合ってますか？ JavaScript出来ます！って言っていいのってどのレベル？ 初心者向けの入門書読んだぐらいじゃね？
プロは「プログラミングができる」の大枠の中の
一つとして、JavaScriptや特定の言語を使ったことが
あるかないかでし考えてないので
特定の言語が使えると言う人＝初心者だからね フォームに直接記述してポストすると文字化けしないけど
ajaxで送信すると日本語が文字化けします
encodeURIやってもencodeURIの文字列そのまま反映されてしまう
どうしたらいいですか ちなみにサイト側(html側)はmetaタグでShift_JISが設定されてました 一昔前からエンコードはUTF8限定、metaタグに指定できるのもUTF8だけ
HTMLの仕様を破ってるオレオレサイトで問題が起こるのは仕方が無い ・サーバー側は触れない
・送信フォームはshift_JIS
・ajaxで日本語をpostすると文字化けする
・ajaxで日本語をencodeURIで変換してからpostするとそのままの文字列
>>658
>一昔前からエンコードはUTF8
ほぅ・・そうなんですか
フォームから直接投稿すると問題なくイケるってことは
ajaxでやっても何かしら設定すればイケると安易に考えていたのですが
調べてみると「サーバー側の設定を云々」がいっぱい出てきてお手上げ状態です >>651
Node.js は、Ruby のコピーだから、
先に、Ruby on Rails で、テスト/開発/デプロイの全工程を学んだ方が速い
まあ、どの言語でも、Railsが基本と思ってよい
サーバー構築運用が嫌なら、今時は、サーバーレスのAWS Lambda で、Ruby もある。
Software Design 12月号が、AWS Lambda の特集 >>659
Ruby なら、sjis/utf8 変換できる。
NKF モジュールも使える
JavaScript で、sjis/utf8 変換できないの？
漏れは、Web 系なら、Windows でも、utf8しか使わないけど サーバー側の問題
AjaxはUTF8で行われるのにサーバーでSJISでデコードしようとしてるんでしょ htmlではSJIS指定になっていてhtml側からの投稿が成功するってことは
ajax側でSJIS変換か何かすれば同じように成功する道理なのでは [1:"あああ", 3: "いいい", 8:"ううう"]
のような連想配列があるとして、
[8:"ううう", 3: "いいい",1:"あああ"]
のように降順で並べ替えたいと思います。
sort()やreserve()だと思ったとおりにならないのですが、
どうすればいいのでしょうか？ プロパティの列挙はまず配列の添字に有効な範囲の数値の数字キーを持つものが
０から順に列挙され、その後にプロパティが作られた順に列挙される
だからその例のプロパティを並び替えることはできない
どうしてもということであればMapを使って
new Map(Object.entries(x).reverse())と書ける
数字キー出ない場合でMapを使わない書き方は
Object.fromEntries(Object.entries(x).reverse()) >>659
XHRやfetchで文字列を渡した時にページの文字コードと関係なくUTF-8で送信するのは仕様
どうしてもクライアント側でやらないとだめならなんらかの文字コード変換ライブラリを使って変換するしかないかな >>665-666
[ { num: 1, str: "a" },
{ num: 5, str: "b" },
{ num: 10, str: "c" } ]
こういうように、property 名が決まっている形なら、
「jquery sort object array by property」で検索できるけど、
その例では、property名が一々、変わる訳でしょ？
設計がおかしい 今はサーバレスの時代でRoRとNodeで最低限のAPIサーバーを建てるやり方は違う
それこそライブラリーだけ違うみたいな感じと思っていて問題ない githubのhtt○○.jsを直接jQuery.getScriptしたら
MIME type (“text/html”) mismatchでCross-Originのエラーがでたのですが解決方法をおしえてください
（直接スクリプト全文コピペは重いので諦めました） githubのhtt○○.jsを直接使用してはいけません。
そういう使い方をして欲しくないからgithubは対応していません。 自己解決
raw.githubusercontent.comを
rawgithubusercontent.comにしたらできた >>673
いえ、githubが公式回答してました 自作jsが長くなってきたのでもういっそのこと外部サイトで管理しようと思うのですが
どこかおすすめのとこないでしょうか
httpだとブラウザ許可するのも面倒なのでhttpsで
かつ直接読み込みOKなホスティングサイトってないのでしょうか
有料でもしょうがないかなと思ってます netlfyでええやろ。ドラッグ＆ドロップするだけやで。git管理もできるけど。 >>677
ありがとうございます さっそくやってみます >>674
よくそんな中国人所有の怪しいドメインなんか使う気になれるな API使えばGitHubで配布しても大丈夫でしょ
IP毎に回数制限があるから、乱用はできないし、皆が使いだしたら不味いけど
もしくはリソース配布pagesを作って隠しiframeでやり取りするか >>652
ウェブアプリ1つつくって公開したレベル
さわっただけでJSできますとかさぎだから
こういうやつ>>653 それはJSじゃなくてWebアプリできますでしょ
JSできると言うときは、スコープチェーンやプロトタイプチェーンを理解してるくらいでしょ フロントエンドもnodeも触らず
ひたすら仕様を勉強しました的な意味になるのかな >>686
具体的にやってきたことを色々話せるのならそれに越したことはないけど
もし面接で私は〇〇のフレームワークを使った経験がありますだとか、
〇〇を作ってきましたではなく、ただ「JSできます！」ってアピールしてくる人が来たら
俺はまず仕様をある程度理解してるかどうかを聞くよ
それでプロトタイプチェーンやスコープチェーンを図に書いて説明できるくらいであれば
確かにただ「JSできます」と言えるだけの能力あるね。基礎能力に期待できるねってことになるけど
そうでなけでば、本当にJSとはどういうものか分かってますか？と聞かないといけなくなるね うん、だから言ったろ？
JavaScript使えます！ってアピールする人は初心者なんだから
初心者は初心者らしく入門書読んだ程度で
JavaScript使えます！ってアピールしろって。 >>688
お前はウェブアセンブリとか分かるのか？上から目線はオワコンやで >>690
君の気持ちは分かるし、一般的にはそういう理屈は分かるけれど、
俺にそういう質問は投げないでくれ
wasmはたまたま分かってしまっているから
asm.jsやNCが流行ってた頃からその系統は追っかけてて
分かってしまうどころかwatも趣味がてら直接書いてるから
watが書けても価値はほぼないが日本でwasmを分かってる上位100人には入ると思うよ
ちなみに上から目線云々に関しては分からないね
どのレベルなら言っていいか決めてくれと言われてるのだから、
上から目線気味の評価基準を語るのは仕方なくはないか？
ただ悪意は無い wasmについて知ってる！
でも何も作れない！
こういうやつ多すぎ 何かの技術を知ってると言えるまで興味と持続力を持って取り組めたのなら
それを使って何かを作ることもまた可能だろう
知らずに作ることは出来ないのだから
知っているが活用しない人、知っているがまだ活用できない人を
批難するのはおかしいと思うけどな ビジネスで必要なのは何を知ってるかより
何を作ったことがあるかだよw
作ったもの見れば何ができるかわかるし 結局のところ実際見てみないとってところに落ち着くw
とりあえず動くものを作るだけってのはそこまで難しい作業じゃないからな 漏れなら、Ruby on Rails をやった事があるかどうか聞く
Railsが、すべてのフレームワークの基礎だから。
CakePHP, Spring Boot も、Railsのコピーだろ
Rubyが出来れば、Node.js も出来る。
Node.jsは、Rubyのコピーだから
それと、サーバーレスのAWS Lambda で、Rubyでプログラミングできるかどうか聞く。
Rubyで出来れば、Node.jsでも出来る CakePHP, Spring Boot も、Railsのコピーなので
どれかやっていればいい >>694
ビジネスで大事なのは何を知っているかでもなく
何を作ったことがあるかでもなく
・こちらの意図を汲み取れる能力があるか
・嘘を付かず誠意があるか
が必要
こちらの指示だったり、依頼だったりを正しく汲み取って
出来ないことは正直に出来ないと言える人なら無能でも問題ない rubyrubyうるさいやつが来たら叩き出すことにしよう type=fileに複数ファイル追加したあと、一部取り除きたいのですがどうやればいいでしょうか
今は、input.filesを回して、必要なやつだけをメモしておいて
var fd=new FormData('ダミーの<form>')に
fd.append('file',file) ←いるやつだけ追加
fdをajaxでPOST
みたいにしてます
これで「複数ファイルを追加したあと、一部のファイルだけキャンセルしてアップロード」
はできたのですが、なぜか同じファイルを２つずつ投稿してしまうのです・・ 半分、自己解決しました
２重投稿については、自分のミスでした
単純に投稿しないようなロジックをスルーしていただけでした。
あとは、ダミーformを作って必要なfileデータをappendしてPOSTするしかないのか？
という部分です
思いつきでやっただけなので、普通に一部クリアできるならそっちのがいいかなと >>701
1つのinputあたり1ファイルならvalue=""で消せる
multipleなやつをフィルタするなら新たなFormDataにappendしないとだめかな
ダミーのフォームに他に何もinputが無いならnew FormData()にフォームを渡す必要はないですよ >>702
multipleなやつですね
＞new FormData()にフォームを渡す必要はないですよ
！
さっそくやってみたらできました
わざわざダミーのform作ってdocumentに追加して云々の工程がなくなってスッキリりました
ありがとうございます！ このクリスマスにSpheroを子供たちに買い与えようと思っています
JavaScriptでもプログラミングできるそうなのですが
10年前にちょっと触っただけで最近のasync?とか良く分からないので
どなたか私も含めたコーチになっていただけませんでしょうか？ スクロールの有効無効を切り替える関数を下記①のように記述し、
呼び出すときの引数で、受け取る関数を選別していたのですが、
上手く停止できませんでした。
そこで、②のようにオブジェクトごと受け取り、それぞれを呼び出したところ
上手くいきました。
setTimeout・clearTimeoutでも似たようなことがあり、その際は
タイマー用のIDをループの親において、IDが初期化されないようにすることで
解決できました。
①のときは何が原因で上手くいかなかったのでしょうか？
①
var scrollEventToggle = function(boolean) {
var funcObj = {
// スクロールイベント停止のまとめ
disableScroll: function() {
// 無効の記述
},
// スクロールイベントの停止を無効のまとめ
enableScroll: function() {
// 有効の記述
},
};
if (boolean) {
return funcObj.enableScroll;
}
return funcObj.disableScroll;
}
;
var hoge = scrollEventToggle(false);
続きます。 ②
var scrollEventToggle = function(boolean) {
...
return funcObj;
};
var obj = scrollEventToggle(); >>706
var hoge = scrollEventToggle(false)(); クロムでTamperMonkeyてユーザスクリプト仕えるようにする拡張使ってんだけど
これでlocalStorageに保存したデータを
サイトの運営者は取得してサーバに送信とか技術的にできるの?
例えば5chサイトでうごくスクリプトでlocalStorageに入れたデータろ5ch運営者が取得することは可能なの? ユーザースクリプトが動くオリジンのlocalStorageに保存されるのだから当然サイト側のスクリプトからも読み書きしようと思えばできる
いじられたくないデータはGM_getValue/GM_setValue(Greasemonkey4互換の場合はGM.getValue/GM.setValue)を使いましょう localStorage.setItem("キー", "値");
localStorage.getItem("キー");
localStorage.removeItem("キー");
localStorage.clear();
たぶん、サイト側はサイト側が保存した、キーしか見ないだろ。
全部のデータなんて、取得しないだろ
5ch のコード内を「localStorage」で検索してみれば？ >>713
自己レス
>たぶん、サイト側はサイト側が保存した、キーしか見ないだろ。
>全部のデータなんて、取得しないだろ
仮にサイト側で、全部のデータを取得したとしても、
サイト側で処理するのは、サイト側が使ったキーだけだろ
それ以外のデータは、無視されるだけだろう firefoxでブラウザに表示されている画像ファイルをzipファイルに保存するアドインを作成したいです。
javascript で、自身が組み込まれているhtmlを文字列として取り込むことはできますか？ >>716
はい
要素にアクセスして
innerHTMLやouterHTMLで取得してください curl, wget, Ruby のNokogiri などで、
CSS Selector/XPath で、a 要素内の画像のURL を取得する
(ただし、Ajax で非同期に、内容を作っているようなページでは、
Ruby, Selenium WebDriver で、ブラウザを操作しないといけないかも)
画像のURLから、curl, wget, Rubyなどで、ダウンロードする。
そして、そのまま保存する
画像は既に圧縮されているので、zip にしない。
2重に圧縮しないこと！
JavaScript なら、Node.js(サーバー)を含んだ、
Electron みたいなアプリでないと、ローカルPC にアクセスできない >>719
おじいちゃん、病室抜け出しちゃダメでしょ 多数の画像を無圧縮zipでまとめるだけというのはよくあるでしょ netlifyでドラッグ＆ドロップでサイト上げる時も画像もまとめてzipに入ってるよ。
rubyキチガイは太古からあるアーカイブという概念を知らないのだろう。 ZIP化なんて簡単だから書いてみたら良いのに
CRC32の計算式まで理解しろとは言わないからそこはコピペでいいとして、
あとは単純にバイトを並べるだけだから じゃあzipの暗号化に対応させてくれ
これができるとどうしてもHTTPSが使えないときに
それなりに安全に情報の受け渡しができる。
ファイルダウンロードだけならjsから対応する必要がないけど
画面に情報を表示できる。 暗号化もCryptoAPIを通せば良いだけだから、暗号化がないとこまで作れたのなら簡単に作れる
それよりも解凍の方が何倍も難しい abc.com/def/ghi.html
こういうURLがあった場合
abc→123、def→456、ghi→789
にそれぞれ置換したい時どうやんの？
これだと一箇所しか変更出来ないし
javascript:location.href=document.URL.replace('abc','123'); ab abc abcd がある時はどうしたいのかとか、もっともっと条件を絞らないと答えようがない >>730
＞ab abc abcd がある時
自分で言ってるけど答えようあるじゃん
さらに言えば単にアルファベット順に対応した数値に置換したいわけではなく
汎用的に複数置換したい意味か？とも考えられるし
いくらでも答えようあるというかそれなりに頭回る人ならわかるでしょ
で、把握が間違っていたとしても何か問題なの？ 頭回る人が答えてあげればいいじゃん
回答は義務じゃない 回答する側がエスパーして、そうじゃなくてーと言われたらそのやり取りが無駄だから最初に全部提示しろって話でしょ >>729だがブックマークレット実行したら
URLのabc、def、ghiを同時に指定した文字に置換するのがやりたいのよ >>735
置換したい個数分だけ反復するのが一番手っ取り早い >>735
>>730が書いてるけど「同時」ってのはあり得ないんだってば
単純にサンプルの結果が得たいだけなら工夫も何も要らないが
document.URL.replace('abc','123').replace('def','456').replace('ghi','789'); >>731
に書いてある
replace には、関数も指定できる！
「javascript replace 関数」で検索！ 正規表現を使わずに、変換した！
function my_replacer( src_str, dest_word ) {
var pos = src_str.indexOf( '.' ); // 位置
return dest_word + src_str.slice( pos ); // 連結
};
var src_str = 'abc.com/def/ghi.html';
var src_words = src_str.split( '/' ); // 分割
console.log( src_words );
//=> [ 'abc.com', 'def', 'ghi.html' ]
var dest_words = [ ]; // 配列に追加していく
dest_words.push( my_replacer( src_words[ 0 ], '123' ) );
dest_words.push( '456' );
dest_words.push( my_replacer( src_words[ 2 ], '789' ) );
console.log( dest_words );
//=> [ '123.com', '456', '789.html' ]
var result = dest_words.join( '/' ); // 結合
console.log( result );
//=> 123.com/456/789.html var rep = {abc:123, def:456, ghi:789};
var rstr = new RegExp(Object.keys(rep).join('|'), 'g');
"abc.com/def/ghi.html".replace(rstr , key =>rep[key]);
正規表現使えばいいじゃん >>729
なんで、この口の悪い質問者は、無反応を貫いてんの？ >>734
＞無駄だから
否定されたと感じるか、それを恥ととるかどうかだけで
知的活動としては無駄ではないよね
全部掲示するなとは言わないし、質問内容にもよるが
質問しにくるレベルの質問者に、全部掲示するorできる能力があると思っている認識がおかしい 質問者の分かる範囲で全部出してくれれば良い
伝えようって気があるかないかの話
雑な質問には雑に対応するだけ >>743
全部出したのか雑なのか
その線引きなんてだれにも判断できないだろ
現に729の本題は＞同時に
だったわけで、あとからわかったことだし
逆に最初からその本質を質問できることは、自己解決との撞着じゃないか
それを、ターンが無駄だから最初からやれってやはりおかしい
「おれが答えられるレベルの、きちんと正解が出せる、後出しでおれが恥をかかないよう、丁寧な質問を心がけろ」
と言っているようにしか思えない 抽象的な質問をされると困る謎の勢力、俗に言うアスペ回答者がいるんだろう 質問の具体化を求められると困る勢力、俗に言うアスペ質問者がいるだろう コールバック関数の中にあるthisっていうのはどのオブジェクトを指しているんでしょうか？
関数自体を定義しているオブジェクトではないようなのですが… ふつうの関数かアロー関数かによっても違うからなんとも Object.entries( { abc:123, def:456, ghi:789 } ).reduce( Function.apply.bind( ''.replaceAll ), 'abc.com/def/ghi.html' ) >>748
thisは0番目の引数だから何であるべきと決まっているわけではないが、
一般的にレシーバーであることが多くコールバック関数にも提起元関数コンテキストのレシーバーを受け継がせるのが一般的 >>748 いろいろ試してみるとおもしろいよ
class Hoge{
constructor(x,y){
this.x=x;
this.y=y;
}
cal(callback){
return callback(this.x,this.y);
}
}
var hoge=new Hoge(2,3);
var sum=(x,y)=>x+y;
var mul=(x,y)=>x*y;
console.log( hoge.cal(sum) );
console.log( hoge.cal(mul) ); 皆さん有り難うございます
色々試してみましたが、どうやらライブラリのコールバック関数はグローバルから呼ばれてる事が結構ある模様でした
呼び出し元依存というのが何となく掴めた気がします 質問です
ここで教わったJSがそのままではIE11では動かないので
webpack4とbabel7でごにょごにょして
なんとか動くところまではたどり着いたんですが
質問1
webpackがdevelopモードだとIEがピクリとも出来ませんが
productionモードだとmapがないのでデバッグがしんどいです
どのようにするのが正解ですか？
質問2
polyfillとプラグインのせいか、ファイルサイズが200～300KBくらいになり
特にIEで読み込みも起動も遅いんですが、何か改善策はありますか？
polyfillはuseBuiltIn entryにして、追加でwhatwg-fetchを呼んでいます
プラグインは、jquery@3とmagnific-popupを呼んでいます
ざっくり質問で申し訳ないですが
よろしくお願いします markdown記法で書かれた文章を余計なタグを取って文字列に変換する方法はありますか？ >>756
正解は同じものを提供しようと思わないこと
IEはモダンブラウザ用よりも幾らか劣る機能を提供すればいい
最悪、ChromeをDLしてねでもいい
それこそ常時TorとかJS無効にしてる人だっているということもあるし
IE中心のPCとモダンブラウザが動かしてるPCでは
期待能力値のアベレージも変わってくるから
無理くりIEに対応しようと思わないのが正解 >>756
パフォーマンス優先なら、トランスコンパイラは使わない
Polyfillのみ使用
トランスコンパイル後のコードを読めば分かるが、旧来の文法に変換したコードは効率が悪すぎる >>748-755
ラムダ・アローなどで、this が異なるから、ややこしい。
だから、jQuery の$( this ) は、コールバックに渡ってきたインスタンスに、変更されている
>>756
漏れは、IE11 には対応しない。
Chrome, Edge のみにすれば？
>>757
Markdown のパーサーの機能を探すか、
HTML に変換して、jQuery.text( ) を使うか。
ただし、子孫要素の内容が連結されてしまうけど >>758,759,760
ありがとう
そして残念
広告屋系だからIE拒否れないんですわ
だれかIE起動したらウィンドウズがぶっ壊れるウィルス作ればいいのに( ；∀；) >>761
だから、Polyfillのみ実装を提案しているのだが
パフォーマンスと開発効率はトレードオフ
IE8時代ならまだしも、IE11ならマシだと思うな >>761
全然違うブラウザに同じ物を提供しようとする方が
閲覧者に取っても迷惑だと教えて上げたほうがいい
家族で海に行くからと寝たきりのお爺ちゃんも引っ張っていって泳がせるか?ってこと
かと言って海に行くのを中止すると言うのも良くない。写真を見せて上げるくらいが丁度良いんだよ >>764
usageだと
IEもchromeもご機嫌斜めでした >>757
自己解決しました
正規表現でHTMLタグ指定して切り抜いたら求める結果になりました >>763
それはじいちゃんに聞いたのか？
じいちゃんが一緒に行きたいと言ってるのに
お前は写真で我慢しろっていうのは、お前の価値観の押しつけだろ じいちゃんがいきたいと言ったら真夏の海に連れて行って泳がすとか猟奇的な価値観だな >>763
おじいちゃんは泳ぐ方法も海水浴場へ行く方法も知りません
解決までの全ての手順を手取り足取り教えてあげなければなりません
ヒントを与えても、自分で考える力がないのです
質問者は要介護者とでも思った方が精神安定上よろしいでしょう
ここの質問者は全く考えようとしません 劣ってる存在が１つあれば、それの対応を分けるのが自然でしょという話のたとえ話でしょ このスレって
ウェブ制作業の人多いのかと思ってたけど
意外とそうでもないんだな PCサイトなんですが コンテンツをボックス型にしてその上からはてなマークを被せたいと思ってます マウスを乗せるとはてなが消えて内容が見えるようにしたいです マリオのハテナボックス(マウスを乗せると透ける)のような感じが理想です 何か方法はありますでしょうか？ >>774
HTML/CSSスレの方に書いたので
それで試してから
マルチポストを詫びるために去勢してください elseを学習中だけど便利だねぇ
そしてアナ雪のエルサみたいでカッコいいし
おれelseが好きになりました！！
宜しくお願いします。 >>773
15年も2chに居続けて自ら学ぶという精神を大事にしてるのだから
JS仙人を目指してるJSオタクが多いでしょ
そうなると他人からあれこれ縛られて注文されるのは嫌いで
自分のペースで好きなものを好きなように作りたいから
俺みたいに自営業で幅広くやってる内の１つとして
Web制作があるって感じの人も多いんじゃない？ AからBまでの処理のタイムスタンプの差を求めることってなんていうんだっけ？
タイムトラッキング・・・ではなかったような気がする 自己解決？した
ラップタイムだったかもしれない
そもそも単に”この区間のタイムスタンプ”って言ってたかもしれない
処理にどれだけ時間かかったか気になってconsole調べてたときどこかのサイトでみた記憶なんで曖昧
お騒がせしました >>781
スポーツ用語をプログラミングにしれっと持ち込む事に違和感を持てよ
用語の意味ぐらい調べろ 時間はtime
AとBの間もtimeだし、A自体もAとOの間だから同じくtime
それを測るってことはmeasure
時間測定はtime measurement durationなりtime lengthなり好きなの使えばいいよ 他にもtime periodとかtime spanとか >>786
runはもうプログラミング用語でしょ？
起源の話ではなくて新しく持ち込むことについて彼は言っているのだと思うが >>791
大昔に彼のように「持ち込むんじゃねー」とか言ってたやつがいたかもしれないだけの話じゃん vueとreact、とりあえず手っ取り早くモノを完成させたいならvueの方がお手軽なのかな？
ただvuetは大型アップデートが控えてるみたいだし学習コストを割いてもよいのか不安なのだが大丈夫かな？ >>796
vueとreact以外には何ができる状態なん？ >>797
htmlとcssは初歩程度
プログラム経験はCとかC#をそこそこ
ざっくりさわった感じだと素のJSは凡ミスの多い自分には危うく感じたのでtypescriptはつかえたらよいなという印象 >>798
であればコストとか気にしてる段階ではないんでね？
他言語知ってるならわかると思うけど
フレームワークはそもそも
その言語には精通している前提で作られてるわけで こういう質問いつも不思議でしょうがないんだけど、
手っ取り早く物を作りたいのであればオーサリングツール使えば良いだけなのでは？
オーサリングツールでも拡張や編集はできるからちょっと知識があるくらいならそれも丸々役立てられるし
なんでvueやreactに興味を持つんだ？ >>801
> なんでvueやreactに興味を持つんだ？
ウェブサイトには興味ないからでしょ？
作ろうとしてるのがアプリ。デスクトップアプリやスマホアプリの
ウェブ版を作ろうとしてるならvueやreactだよ
ウェブサイトを作るならHTML+CSS+jQueryになるけどね いや、それならオーサリングツールで作るはずでしょ
Webベースであってもなくても１つ作れば全環境向けに書き出せるようなものって幾つもあるんだから
わざわざWebで別個に作る必要ないと言うか、Webで別個に作れるなら最初からPWAでやってもいいけど
vueやreactがPWA構築に最も適している部類のフレームワークかというと違うと思うよ オーサリングツールとか一般名で誤魔化してないで具体的にツール名言えや。
滅びたから言えないんだろｗ >>806
ウェブサイトを作れるオーサリングツールなんて知らないなぁｗ 知らないのは恥ずかしいことじゃないよ
自分が無知であることを認めることから成長は始まる この場合の「知らない」は
そんなものないって意味だよ
実際お前も名前出せないじゃん ジジイのオナニー談話とか良いからもっと参考になる話してくれ 自分で調べるのが面倒だからと回答者を煽って答えを聞き出そうとするのは感心しないね すれ違い甚だしいけど
最近Qtをいろいろいじってみてる
こういうののこと？＞オーサリングツール まったく違うけど、まあしょうがないよね、もう生き残ってないから見たことも触ったこともないだろうｗｗ こういうスレで答え引っ張ると
なにか良いことあるのん？ 大きなアプリ作るんじゃなきゃ初めてjavascript使った俺でもVueってそんな難しくなかったよ
htmlもあんま詳しくないけどhtmlで外観作ってテンプレートで操作って凄い解りやすくて感動した win7終了が1/14で翌日に新Edgeリリースか
2020はIE廃棄元年になるといいなぁ ブラウザのf12を押してconsoleで以下の様になる理由を教えていただけませんか？
empty は後から定義されたのに、なぜ、第0要素に値が入っているのでしょう？
そもそも、最初の push() 命令の意味するところが分かりません。
>Array.prototype.push("lol")
1
>var empty=[];
undefined
>empty[0];
"lol" >値が入っている
console.log(empty)すれば分かるけど入ってない
入ってない以上プロトタイプチェーンに則りArray.prototype[0]を読みに行くので至極当然の挙動 下記はエラーとなってしまうようなのですが、
オブジェクトのプロパティで他のプロパティ同士を演算する方法は
ありますでしょうか。
var obj = {
a: 3,
b: 4,
c: a + b;
}; var obj = {
a: 3,
b: 4,
};
obj['c'] = obj.a + obj.b; >>819
有難うございます。
その辺の挙動が学べる様なサイトがあればお示しいただければ幸いです。 >>820
最後んとこ
c:this.a+this.b
セミコロンは}の前は文末じゃないから付けない
これで動かない？ >>824
それはそれで
aとbがundefinedなだけかと var obj = {
a: 3,
b: 4,
c: this.a + this.b
};
console.log(obj);//{a: 3, b: 4, c: NaN}
var obj = {
a: 3,
b: 4,
c: obj.a + obj.b
};
console.log(obj);//{a: 3, b: 4, c: 7} 単に前半のobjが生きていただけで
更新したら＞//{a: 3, b: 4, c: 7}
はエラーでした すみません 質問>>820の直後>>821に答え出てるのになぜ続ける 820は簡略形でじつはクラスとか必要としている可能性も微存
セミコロンの凡ミスがあるし単にabの計算結果をcに入れるテストをしたいだけの可能性大だが var obj = {
a: 3,
b: 4,
get c() {
return this.a + this.b;
},
};
console.log(obj.c); 任意のサイト限定でクロスサイトをやりたいのですが
ブラウザはcookieをどう管理してるのでしょうか
例えば、クロスサイトを許可した自分のサイトS上で、
AサイトとBサイトへajaxしようとしたとき
BサイトにAサイトのcookie情報が流れる（逆然り）みたいなことはあるのでしょうか？ >>834
それはクロスオリジンかcorsと呼ぼう
でcorsの細かなお作法はググった方がわかりやすいのでよしなに
Access-Control-Allow-Credentials
というヘッダがあって、これがtrueになっていて
かつ、クライアント側でmode: cors、credentials: includeになっていれば
AドメインからBドメインにリクエストを送った時
Cookieも渡すことが出来るよ >>836
なるほど
問答無用でcookie情報を送ってしまうのかと思っていました
AドメインとBドメインへ同時というか非同期でリクエストを送って
AドメインにはAドメイン用のcookieだけ（BはBだけ）、
みたいに送れるのだろうか？というのは気になりますが
cors調べてみます ありがとうございました JSが扱うのはdocument.cookieだけですし 残念ながらドメインをまたいだCookieは送れない設定になってることも多いし、
今後デフォルトで送れなくなる方向です 質問です、
1から100までの値がランダムで配列される時に、[2,3,10]とあると、
1がりんご
10はメロンにしたいんですが、
indexOf("1")>=0?"りんご"にすると
10もりんごになっちゃいます。
1は1
10は10で判定する方法はありますか？ >>841
,(カンマ)でsplitしてループで比較 >>841
> 1から100までの値がランダムで配列される時に
日本語を頑張れ
> indexOf("1")>=0?"りんご"にすると
> 10もりんごになっちゃいます。
Array#indexOfは10にマッチしない [2,3,10] は、数値の配列でしょ？
indexOf("1")
"1" は、文字列じゃん
型が異なると、バグる >>839
まじで？？？
デフォで送れないのは今でもそうだけど
csedentialはどうなっちゃうの？ >>845
corsでcookieが扱えなくなるのは俺も知らんけど
Ajaxするときのcredentialがなくなることはなかろう function hoge(callback){
console.log( callback(10,20) );
console.log("callbackの引数の名前を知りたい xxxとyyy");
console.log(callback.toString().match(/^\((.*),(.*)\)/).filter((_,i)=>i%3!==0));
}
hoge((xxx,yyy)=>xxx+yyy);
と、しましたがもっとスッキリ書けないものでしょうか？ 引数が一個のときも考慮したいし
function()なんたらのときも
_=> みたいに()が無いときも考慮するには
やはり全部の場合分けしかないのでしょうか？ 引数の数が異なるなら、オブジェクト指向で言う、関数のoverload・多重定義だろ。
JavaScript には無いけど、jQuery は、引数の型を調べて、場合分けして作っていたかも？
デフォルト値ありの引数か、配列・辞書渡しにするか。
オプションなどは、辞書で渡す
引数の数が変わる、可変引数もあるのか？ >>849
とりあえず引数名が何個で何かを判別するオプションを引数に入れて多重定義で一時的に対応することにしました
ただ引数名は限定的になりそうなので渡す関数の書式を制限して関数そのものの文字列から判別する方法もやろうと思います
ありがとうございました >>847
関数の引数の定義上の文字列を知りたい
という要望が特殊すぎるような気が
ちなみにこの文字列を知って
どのような使い方を考えているのん？ >>852
例えばforEachするときやmapするとき
最初の引数はindexだったかそれともvalueだったか？忘れてしまうことが多かったので
callbackの記述が
function(index,value),function(index),function(value),function(value,index)だったら
その通りに勝手に解釈してもらいたいなぁと思ったのです >>853
ワロタ
それは、JSでやるべきじゃないんじゃないかなあ
テキストエディタとかトランスパイラとか
JSコードになる以前の問題なんじゃないかと アロー関数使うときに、引数が一個しかなければ
i=>{}みたいに書けるけど、引数が２個の場合
(i,val)=>{}と書いて、valしか使わないのに・・
みたいな場面に出くわしてじゃあ最初から
val=>{}で書いたときはーーみたいな感じだったのです >>853
物忘れ防止なら、JSDocでも書いておけ
>>851
重要なのは、「引数の数」の方だろ
arguments.lengthやrest parameterを使え まぁ引数の数だけが問題ならイコール引数の順序を覚えている
ということなので、普通に既存のライブラリ使うかなと。 そういうのは型付言語ならできるだろう
map(i:int=>i*2)
map(val:string=>var+"abc")
みたいな感じだ
だが、valもintだったらどうなるだろうか？区別がつかない。
そこでint型とindex型は分けるべきではないだろうか？
map(i:index=>i*2)
map(val:int=>val*2)
つまりこういうわけだな
そして思うのは、indexとかintという型は冗長というわけだ
ならここで型名変数という概念があっても良いのかもしれないな
型名をそのまま変数として使える書き方だ
map(:index=>index*2)
map(:string=>string*2)
夢は膨らんでいくな！ 何を言ってるんだか ここは阿呆ばかりなのか？
オーバーライドは関数と引数の取り回しが不自由なJavaのような言語で
柔軟さをなんとか実現するための苦肉の策であってJSには最も必要ない部類の機能だろ オーバーライドじゃなくてオーバーロードな（呆）
JavaじゃなくてC++の時代からあるよ オーバーライドじゃなくてオーバーロードな ←潔癖症
JavaじゃなくてC++の時代からあるよ ←アスペ jqueryでアロー関数のthisがwindowになるのなんとかならんの
$([3,4,5]).each(function(){ console.log(this) });
$([3,4,5]).each(()=>{ console.log(this) });
第一引数つかえっていう話ではなく >>864
jQueryとは関係ない。DOM APIもそうだからどうしようもない ES6 のアロー関数は、たぶん、クロージャなんだろ。
外の環境のthis を、そこまでの文脈で、静的に確定させて取り込んでしまう
レシーバーのthis じゃない jQueryの基礎部分を書いてみたのですが
https://jsfiddle.net/5nhoL081/
これをclass構文で表現するにはどうやればいいのでしょうか？
https://jsfiddle.net/kabn84sz/
やってはみたものの動くには動いたのですが
if(!f){return thisを外したらinitがnot functionだと言われたり
腑に落ちない点がいろいろとあります >>864
jQuery関係ない
functionの中でthisはそもそもグローバル（かundefined）
メソッドやイベントリスナとして発火するときは
そのオブジェクトが束縛（バインド）される
アロー関数はイベントリスナになっても
束縛がないんだね あとjQueryのeachとかで使うthisは
ピュアJSのものではなく
jQueryが独自にバインドしているものなのでご注意を class Hoge{
constructor(){
console.log(new Fuga());
}
}
class Fuga extends Hoge{
f(){}
}
var hoge = new Hoge();
//Maximum call stack size exceeded
//となってしまうので
class Hoge{
constructor(f){
if(!!f){
console.log(new Fuga());
}
}
}
class Fuga extends Hoge{
f(){}
}
var hoge = new Hoge(true);
//ifをかますと親コンストラクタで子をnewできるみたいというのはわかりましたが
//これはなんかのテクニックなのでしょうか？？それとも普通はこんなことしないということでしょうか ifを咬ませてfalseのとき通らない説明はしようがないね
自明だから >>873
ちなみにこの循環にはどんな意味があるん？ >>874
＞falseのとき
!じゃなくて!!なので、つまり!!trueなのでtrueです
>>875
この循環とは？
例えばライブラリにするときjqueryなら$()で何回も使えますがそれは
$()で返ってくる中身がインスタンスで、かつinitが親のjqueryのprototypeを持っているからです
別に毎回newを宣言するスタイルなら必要ないと思いますが ライブラリ内で$()を使っても循環してるわけじゃないだろ
無知って恐ろしいな いやそもそも循環って何を指しているかがわからんのです Hogeがコンストラクタ関数でnew Fuga() してるのに
FugaがHogeを継承しちゃってるからループして
なんどもなんどもフガフガしちゃって
Maximum call stack size exceeded なわけじゃん？
なんでFugaはHogeを継承すんのかなって FugaからHogeを参照したいだけなら
Hogeのコンストラクタ関数で
new Fuga(this);
ってするだけじゃいかんかね？ >>875,879,880
なるほど、心をまっさらにして改めて考えたところ、すんなり解決しました
https://jsfiddle.net/4o3zq1v5/
initをextendsするのはなぜなのかはわかりませんがそのバージョン
https://jsfiddle.net/pmrhub5y/
そもそもjQueryのソースコードをみるとなぜわざわざinitを継承させているのか
はわかりませんが、つまり
https://jsfiddle.net/rb5czox2/
こういうふうにすればいいのに、と思うのですが・・
$文字で静的なユーティリティ関数を使えるからでしょうか（$=jQueryと置くとinitをnewしないといけないので）、わかりません >>876
いやいや、空呼びすることになるんだから評価はfalselyでしょ
trueは最初だけじゃん何いってんの >>883
空呼びとは？
いつ、空呼び？（具体的な行なりを）
最初だけ、とはいつ？（具体的な行なりを）
>>874
＞falseのとき
>873コードのどのタイミングで>falseのとき、なのか
＞通らない
とは何が？ なんでこれだけヒント上げてんのにconsole.log()を挟んだりして確認しないの？
いつ何がなんて考えたら分かるし
分からないのなら色々試して分かるように見つけるべきでしょ
あんだけの短いコードなんだから
それともnew演算子の挙動から丁寧に何レスも使って長大にド答えを書いてほしいの？ あー…分かんないやつは無理して回答するフリしなくていいからｗ わからないことは
『>873コードの前半はエラーがでて、後半のコードでは、エラーが出ない、それはなぜか』
ということで、わかってることは
後半コードで『なぜかif()で一旦”間”をとると、エラーが出ない』
ということと『仮に、親の中で子をnewするとエラーがでるなら、後半コードでもif通ったあとにエラーがでるのでは？』
というところまでは、わかっています
その状態で873を質問をしたわけなので
>874で急にfalseの話が出て、ヒントとか以前の問題で
どういうこと？っていう状態なので確認のために>884を聞いたんです
ヒントが欲しいってことではないです 訂正 ＞親の中で子をnewすると
＞親のコンストラクタの中で、子をnewすると じゃあ逆に考えてみたら良いじゃない
デバッグの基本だよ
後半コードでもif通ったあとにエラーがでるのでは？
ならエラーが出てないのならifを通ってないのでは？
あれどうして通ってないんだっけってなるでしょ >>889
いえ、、それでconsole.log(new Fuga());
が出力されたわけでして・・ if(!!f){
の前に
console.log(f)
でしょ
if(!!f)の動作はfに依存してるのだから、fを調べないと始まらないでしょ >>891
ええ、もちろんしてからの>873の質問ですよ
で、>874でなんでfalseの話が出てきたのだろう？？ってなったんです
ちなみにもしかして
class Hoge{
constructor(f){
if(!!f){
console.log(new Fuga());
}}}
class Fuga extends Hoge{
f(){}
}
var hoge = new Hoge(true);
これが通るのっておまかんってことでしょうか？
念の為、これ↓はtrueですよね
if(!!true){ console.log(true) }else{ console.log(false) } 最初は>874さんが!fと!!fを見間違えただけなのかな？と思ってたのですが
違うっぽい？ >>884
まず>>873の前半の方は
Hogeはコンストラクタ関数でnew Fuga()って書いてるので
new Hoge() でコンストラクタ関数が発火して、new Fuga()
このFugaはHogeを継承してるから
Hogeのコンストラクタ関数がまた走る
Hogeのコンストラクタ関数がまた走る
Hogeのコンストラクタ関数がまた走る
：
っていう無限ループ
if節をもちいた後半に書いてあるやつは
1回目は var hoge = new Hoge(true); ってしてるから
Hogeのコンストラクタ関数にはtrueが渡り
if節がtrueだから、new Fuga()する
このFugaはHogeをextendsしてるから
Hogeのコンストラクタ関数がまた走るけど（2回目）
このときは引数なしだからif節はfalseになり、動かず終わる まず自分が間違ってるんじゃないかという姿勢がないとデバッグはできない
もちろん機械が間違っていることもあるが、それは雰囲気ではなくて言い逃れできないくらいの
理詰めと証拠と再現性による証明ができて初めて主張できること >>894
なるほど
＞空呼び
とは、FugaがnewされてHogeコンストラクタ関数が走る、
＞いつ、＞falseのとき
２回目以降のことだったんですね
（２回目以降のreturnでvar hogeに格納されない）
つまり疑問である>>873
＞これはなんかのテクニックなのでしょうか？？
＞それとも普通はこんなことしないということでしょうか
は、回避処理をしたとしても普通は"空呼び"はやらない and 親のコンストラクタ内で子をnewしない（機会はない）
ということでしょうか
というのは、>870のライブラリの基礎部分をclass構文で表現してみたい
というのが本題で、kabn84szコードは$()すると毎回、return this（親？）”も”しているので
無駄や不自然さがあると、今回のやりとりで感じました
なので>>881のpmrhub5yコードがclass構文表現の一例でいいかなと
新たに出た疑問は
・『全部まとめて毎回親をnewする』4o3zq1v5コードと『毎回継承の子だけnewする』pmrhub5yコードの（コードの見た目以外の）違いや利点がわからない
・class表現にした場合、$文字で親の静的メソッドが使えない（$.eachじゃなくjQuery.eachとしないといけない？）
この辺りを調べてみたいと思います
ありがとうございました gotoはコードの色んな所にジャンプできる。
だけどbreakはループの外にしかジャンプできない。
gotoの方が優れているように見えるが、
機能を制限したbreakの方が好まれてる。
何が言いたいかというと汎用的なものより
特定の（よく使われる）用途に制限したほうが
バグが少なくなり、コードはよりわかりやすくなる
それがclassでありシンタックスシュガーが優れていると言われる理由
だけど、機能自体はgotoの方が上なわけで
人が間違わないという前提にたてば、機能を制限したものよりも
より多くのことができる。つまりclassを使わないほうがより柔軟 なるほど 時代の流れはclass表記のみなっていくのかと勝手に思っていましたが
固執すること無く適所に取捨すればよかったのですね
（同じ変数名で親の静的メソッドも実行できるというのはやはり魅力なのでclass表記は向いていない、のかもしれない）
あとプログラミング言語界も、文書でいうところの”ですます”調・”だである”調は揃える、
みたいなことは気にしたほうがいいのかどうかは気になります JSのクラス構文は何かを制限するような機能はまだ弱いしその様には使われていない
見た目と構造化効率のために使われている 今はTypeScriptも人気あるしねぇ。必ずしもclassありきじゃない。 >>897
>親のコンストラクタ内で、子をnewしない
こんな事をする香具師は、いないw
逆に、子のコンストラクタ内で、
super( ) みたいに、親のコンストラクタを呼び出す言語は、あるかも
一般的に、オブジェクト指向では、
子のメソッド内で、super( ) みたいに、親の同名のメソッドを呼び出す言語は、あるかも
子は親を継承しているから、親の部分を含んでいる。
だから、子を作る時に、親の部分も作るから、
その時に、super( ) を呼んで、親の部分をカスタマイズしたい すでにアクティブな未知のsetIntervalを止める方法良い方法ないですかね
今はclearInterval(i);で10回とか適当な数まで回して止めてるんですけど >>821
超ありがとうございます。
まさかオブジェクトが定義中だったとは思いもしませんでした。
一度オブジェクトの定義を済ませた後にプロパティを追加すればよいのですね！！
追加で質問がありまして、>>833 さんの記述に近いのですが、
下記記述のように関数の中であれば、定義中のオブジェクトのプロパティを扱うことができるようなのですが、
エラーにならないのは、オブジェクトの定義が済んだ後に関数を呼び出しているから･･･
と考えればよいのでしょうか？
var obj = {
a: 3,
b: 4,
c: function() {
console.log(obj.a + obj.b);
},
};
obj.c(); // 7 Ruby でもそうだが、一般的に、地の文は、実行されるコード・実行文で、
関数は、呼び出されるまで実行されない
f( ) みたいに、( )は関数呼び出し演算子で、( )を付けると実行される こいつの頭のおかしいところは、これでrubyとかいうクソ言語の宣伝になると思ってるところ 10年前ならまだしも今のこの過疎2chと繁栄したJS界を鑑みるにRubyの4文字程度に反応する必要もない 【環境】Windows10 IE11
前提として複数URL文字列が格納された配列を保持しています
これらを全て(できるかぎり)自動で印刷する動作を実現したいです
まず下記を書きました
function hoge{
for(var i = 0; i < url.length;i++) {
subwin = window.open(url[i],"_blank","top=0,left=0");
subwin.print();
subwin.close();
}
}
エラーは発生しませんでしたが、全てのURLが子画面で同時に開かれ、
さらに印刷ダイアログが開かれた子画面は1個だけしか残りませんでした
【期待する結果】
親画面でボタンが押される→
→url[0]が開かれ、自動的に印刷ダイアログが表示→印刷ボタンを押すと自動的に閉じられる
→url[1]が開かれ、自動的に印刷ダイアログが表示→印刷ボタンを押すと自動的に閉じられる
→全ての配列分繰り返す
…という流れにしたいのですが、IE11の印刷ダイアログ画面は常に一つしか開けないようで
そこでさらにwindow.openすると強制的に閉じられてしまい、さらにその後のwindow.closeで勝手に閉じられ
結果的に印刷ボタンを押せるのは1つだけ、という状況のようです
これを解決する方法があれば教えていただきたいです ActiveXを使ってシリアルポートを叩いてプリンタの状態を確認すればできる 閉じられたら次を開けばいい 一度に全部開くやつがおるか アホか selenium webdriver で、ブラウザを自動操作して、印刷できないのかな？ >>918
onunloadを書くとしたら子窓が閉じられる時になると思いますが
そうなると次に開くURLをリレーのように渡し続ける必要がありませんか >>916 無理かも
var url=["https://google.com/";,"https://twitter.com";,"https://google.co.jp/";];
function subwinprint(){
console.log("subwin print");
var _url=url.shift();
if(!_url){ return; }
var subwin = window.open(_url,"_blank","top=0,left=0");
subwin.print();
subwin.close();
}
window.onafterprint = subwinprint;
subwinprint(); 916です
>>921
ありがとうございます
残念ですが思ったような動作はしませんでした(url[1]とurl[2]が同時に開かれました)
後付けになってしまって申し訳ありませんが、
配列として保持するURLも自分の管理内なので子画面にもJavascriptは自由に記述できます
なので、onbeforeunloadとwindow.openerで子画面が閉じられる際に親画面に何らかの処理を
渡せれば…と今のところ考えています >子画面にもJavascriptは自由に記述できます
と、なるとURLは新しいタブで開くようにして
親に、
var turn=1;
var url=["https://google.com/";,"https://twitter.com";,"https://google.co.jp/";];
document.addEventListener('webkitvisibilitychange', function(){
if(url.length===0){return}
if (!document.webkitHidden && turn===2 ) {
window.open(url.shift());//①
}
turn=3-turn;
}, false);
window.open(url.shift());
子に、
プリント画面終了を感知したらwindow.closeする処理
→親タブに戻る→①→子→親タブに戻る→①・・・
になるような 全部一画面に表示して
１つ１つの間で改ページするようにしたらいかんの？ ひょっとしてプリント画面は、HTML じゃなくて、OS のネイティブの画面なのか？
それなら、Ruby, Node.js みたいなサーバーじゃないと、
ローカルPC 機能にアクセスできないのかも
それか、selenium webdriver か 家に帰ってこのスレを開くのが唯一の楽しみなのに
帰っていいと言われたら一体どうすれば良いんだ? このスレには隙あらばRubyの話しようとする困ったちゃんがいるのよ
そいつと勘違いされてるんだ >>931
矢田亜希子
JAVAscript楽しいんだもーん この時期になるとやたらこじつけでクリスマスネタぶっ込みたがる奴いるよな
ウッキウキで書き込んでるんだろうけど正直見てて寒い ローカルPC 機能にアクセスするなら、PCのアクセス権限が必要。
必ずユーザーの手動による、アクションが必要
PC内で、Ruby, Node.js みたいなサーバーを立てて、サーバーがOS ネイティブ機能を使う
VSCode などのElectron アプリはそう。
Electron = Node.js + Chromium
単純なHTML, CSS, JavaScript じゃなく、
サーバー・ブラウザの両方を含んでいるから、300MB とか、サイズが大きい
スマホアプリと同じ。
これも、スマホ内のネイティブ機能を使う、権限を許可するだろ
Electronではじめるアプリ開発
JavaScript/HTML/CSSでデスクトップアプリを作ろう、2017
この本では、PDF 印刷機能を実装しましょうとか、OS のネイティブ機能を使っている。
他にも、ファイル保存ダイアログを表示して、PC内のフォルダを選択したり objectにgetterを付与するとき
var obj={
b:1,
get a(){ return this.b*10 },
};
console.log( obj.a );
みたいにしますが、
var obj={ b:1 };
したあとに、getterするにはどうしたら良いですか？
最初にgetterだけして、後からプロパティみたいな方法しかないのでしょうか Object.defineProperty(obj, "a", { get: function() { return this.b * 10 } }); secondParagraph
secondButton
上記みたいに最初は小文字で後から大文字にしないといけないのですか？
全部小文字の方がミスしなくて良いのですが・・・・
質問内容がド素人すぎてすいません My big dickみたいに複数の単語から成る名前を識別子にするとき、どうスペースを詰めるかという方法論であり、言語によって強制されてたりどうでもよかったりする。
ちなみにJavaScriptはどうでもいい族。
また言語では強制していないが、コーディングスタイルやはたまた開発チーム内のローカルルールで決められていることもままある。
だからあなたがクリスマスに独りで開発していて、コーディングスタイルなんて気にしない人であれば、全部小文字でもまったく問題ない。
ちなみに…
MY_BIG_DICK 定数用途
my_big_dick 変数用途 スネークケース
MyBigDick jsクラス名など アッパーキャメルケース
myBigDick 変数用途 キャメルケース
my-big-dick CSSクラス名など ケバブケース >>937
ありゃしゃす
それですarrayのconcatみたいなやつ 思い出しましたdefineProperty
concatと違いシャローコピーのようですね >>939
勉強になります
ありがとうございます！！ >>938
そういう長い変数名はつけてはいけない
スコープを切って解決するならそうして、
そうでなければbutton.secondに格納する >>942
質問スレなんだから、これこれこうだから付けてはいけない、というふうに根拠を示せよrubyキチガイ。
説明できないというのは自分がわかってないからだぞ。
答えを言えばいいというものではない。 >>943
ここは自ら学ぶ人のための質問スレ
色んな回答者が出した意見を好きなだけ汲み取って質問者の中で答えを出すためのスレ
質問者が自ら興味を持って深堀りしたいければさらに回答者に聞けばいいだけ
回答者が最初から全ての説明を提示する必要はない
ノーヒントの状態で方法が何も思いつかないということはあるが
ここで沢山出た意見の内何が最も優れてるかは質問者が自ら考え試してみて
質問者のセンスで正解を決めればよいこと
つまり君の目線でどの回答者がどれくらい分かっているかというのは無価値な話
あちこち叩かれればそのうち自然と球に近づくのだから
色んな視点からの色んな場合の意見を見ることが良い価値観を育てる行為
最初から何かを限定したりイチャモンをつけようという姿勢は良くない >>942
そう？
その変数が何かを誤認しなくなる要素は
少しでも多く残したくね？ >>948
Javaならそうだな
スクリプト言語には似合わない 初心者すぎてすいません
getElementById
ってどういう意味ですか？
Ｉｄをつけた箇所に来たら何かを稼働させるって事ですか？ >>952
引数で指定されたIDを持つHTML要素のオブジェクトを返す >>952
たとえばキミがElementだとしてIdがtaroだったとする
で、おれがgetElementById('taro')するとキミ（taro）を取得し
キミの服装を変えたり、しゃべらせたり、歩かせたり、髪型を変えたりできる
例）
var taro=getElementById('taro'); //取得
taro.style.color='blue'; //taroElement内の文字の色を変える 多次元配列をディープコピーしたいのですが
var arr=[['a','b'],['c','d']];
var arr2=JSON.parse( JSON.stringify(arr) );
arr2[1][0]='e';
console.log(arr,arr2);
これ以外だと配列ループするしかないですか？ >>955
ループとは？
何を使おうが、配列の要素を走査する処理は走る >>956
配列は広義の意味ではなく上の例だとarrのループです
Arrayのみならこんな感じでしょうか？↓
var deepCopy=function(obj){
var arr=[];
if(Object.prototype.toString.call(obj)==="[object Array]"){
obj=obj.concat();
for (var i=0;i<obj.length;i++){
arr.push(deepCopy(obj[i]));
}
}else{
return obj;
}
return arr;
}
var arr=[["a","b"],["c","d"]];
var arr2=deepCopy(arr);
arr2[1][0]="e";
console.table(arr);
console.table(arr2);
Arrayだけじゃないともっと複雑になりそうな気がしますが
JSON.parse( JSON.stringify(arr) );以外になにか方法ないのかなと思いました function deepCopy ( obj ) {
return new Promise( done => {
let mc = new MessageChannel
mc.port2.onmessage = e => done( e.data )
mc.port1.postMessage( obj )
} )
}
let ary1 = [ [ 'a', 'b' ], [ 'c', 'd' ] ]
let ary2 = await deepCopy( ary1 ) jQuery のdeepcopy。
var newObj = $.extend(true,{},sourceObj)
javascriptでlodashを使ってディープコピーを簡単に行う
https://qiita.com/t-motoki/items/5685d302e2e242f561b4 >>954
す、す、すげええ
わ、わ、わかりやすい
感謝っす
javascript頑張ります！！ >>957
>>955の「配列ループ」の説明になっていないようだが？
二次元配列にdeepcopyなど不要
var array1 = [["a","b"],["c","d"]];
var array2 = array1.slice().map(array => array.slice());
console.log(JSON.stringify(array1) === JSON.stringify(array2));
まあ、deepcopyが必要となる状況がそもそもないようにコードを組むがね
DOMのcloneNodeのように、新しい概念上で必要な場合もあるが、それも新しくclassを作って複製可能なように作っておく 本当に全プロパティを複製する必要があるのか？
Proxyを作って更新があったものだけキャッシュしとく方が効率的なこともあるだろう こんにちはをこんばんはに変更する場合、パターン１とパターン２のどっちがナウいですか？
原宿とかのスタバでコーディングしてて、エンジニアにチラ見されて恥ずかしくないのはどっちですか？
【パティーン１】
index.html
<p>こんにちわ</p>
script.js
$('p').text('こんばんは');
【パティーン２】
index.html
<p>こんにちは</p>
script.js
$('p').html('<span>こんばんは</span>'); >>965
ナウ過ぎるのも嫌なんだよ
>>964でパティーン１と２でどっちがいいの？ スタバでindex.htmlとscript.js睨みながら$("p")とかやってんのがいるの想像するだけで笑ってしまった >>958,959
ありがとうございます
awaitとか調べてみたいと思います
>>962
再帰と考えてくれればいいと思います（単にコードを書くつもりでarrをループする具体的な部分を示したので）。
二次元配列というか多次元配列（>>955）です（例は２次元配列ですが）
こちらの管轄に無い配列をコピーしたいときとかですね
理想は配列以外のオブジェクトも含むケースですがまずは配列のみからやってみるという感じです >>964
１だろ。２はそもそもspanが間に入ってるので意味が変わってしまってる 説明してあげると、どちらもダサいって言ってる人は、タグpを使ってるからだよ。
pは普通たくさんあって他の用途でも使われるのでp全部をこんばんはに
したいことはまず無いだろうなという前提に経てば、そういうことはしない。
idを使うと言い出すやつがいるかも知れないが、一番いいのはclassを使うこと。
そうすれば変換したいこんにちはが一つでも複数でもコードは変換しなくて良くなる。
<p class="greeting">こんにちわ</p>
$('.greeting').text('こんばんは');
つまりこういうのだな。もっといいやり方は。
だがそもそもJavaScriptで文字を変えるべきことなのか？という話がある
<body data-timeframe="daytime">
<p class="daytime greeting">こんにちわ</p>
<p class="night greeting">こんばんは</p>
</body>
.greeting { display:none }
[data-timeframe="daytime"] .daytime.greeting { display:block }
[data-timeframe="night"] .night.greeting { display:block }
例えばこういうCSSとHTMLを書いておけば、data-timeframeを
daytimeにするかnightにするかで、こんにちわやこんばんはが自動的に変わる
応用で色んな部分を変えることができる。
jQueryでやるのは、このようにclassとか今回はdata-*属性を変えるだけにするもんだよ。
JavaScriptでHTMLや文字列を切り替えるのはバッドパターン >>971
て、て、テクニシャンかよ
何年でそこまでのレベルに到達したの？
ちょっと憧れてしまったお 上の部分は、１行目のhoverでポインタが,languageの上に乗った時に、fadeInするって意味だと思うんだけど
下の部分は、ポインタが外れた時っていう意味の単語みたいなの無いけど、なんでポインタが外れたらfadeOutするの？
なんでですか？
$('#language-wrapper').hover(
function() {
$('.language-text').fadeIn();
},
function() {
$('.language-text').fadeOut();
}
); よく見ろ下も単体じゃなくて上と一緒にhoverメソッドに渡してあるでしょ
https://api.jquery.com/hover/
hoverの第１引数がホバーした時、第２引数が外れた時に実行される関数 >>974
ホバーした時と、外した時で、ワンセットて事だね
そのサイトクリックしたら英語でびびったよ
まあ翻訳ソフト入れたけどね クオンテーションやダブルクオンテーションを付けたり、付けなかったり
カンマが必要だったり、セミコロンが必要だったり・・・・
こういうのって初心者としてはツライんですが、ずっとやってれば覚えられるものですか？
質問レベル低すぎてすいません 覚えるし、大した話じゃないし
vscode＋javascriptの適当なプラグインで
勝手にチェックしてくれるのでどうでもいい >>977
覚えるものではない
言語なのだから
一々ここではこの構文を使って、とか考えてる内は初心者 出たエラーを見ればいい >>977
文字通りトライ＆エラーでバカでも自然に覚える >>971
こんちわって気分のときとちーっすって気分のときもある場合どうしたらいいのですか >>978
VScodeですね
秀丸を捨てる時が来たようです
アドバイスありがとうございます！！ アロー関数の、=> この記号ってキーボードのどこをどうやって入力するんですか？
ググっても出てこないという悲劇 2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない 一文字にくっついているからやろ
リガチャって知っとるか？ javascript勉強しだして2週間だけどまだ半分もいってないんだが
独学でjavascriptの勉強をして、未経験からIT企業に就職するまでに、何時間くらいの勉強時間が掛かると思いますか？
500時間くらいですか？ >>991
Fランクの糞みたいな大学卒（偏差値54）
30代前半で現在の職業は賃貸不動産の案内というカス仕事
タイピングまあまあ速い、付き合った女性の数は40人強、体形はスリム
入りたい企業、聞いた事ないような3流企業でもブラックじゃなければOK
最初は派遣でもOK！これってどう？ >>984そのまま、=>（半角英数でイコール、不等号（大なり））と続けて2文字打つのがその書き方だよ、それで合ってるよ
そんな些細なことをちょっと聞けるような勉強仲間もいない中で独学しようと立ち上がった君に温かい拍手を送りたいぞ こんな情弱がプログラミング始めることもあるんだな。 >>992
たとえば未経験者歓迎で教えてくれる企業に入って、経験を積んでから転職していく道もあるので
大事なのは何時間やったかではなくて、何時間かやって自分に向いてると思うかどうかだね。
本当に楽しくて仕方がないのなら、会社に入るとむしろ苦痛になるのでいきなりフリーランスっていうのも、最近なら十分考えられるし。 でも30代か
色んな経営者とか、業界で有名な人と話したり、言ってるのを聞いた感じだと０から始めるのは30が限界って考えてる人が多そう。
ならクラウドワークスとかで副業として始めて、行けると思ったタイミングで切り替えるのがいいかもね。 30代とか関係あるかな？35歳で入ってきて出世していく人もいれば
大学卒業してすぐ入ってきてもメンヘラになって全く何も出来ないようなの普通に居るぞ
言語が新しいバージョンになったら対応できないんだよそういう人は >>995
いきなりステーキみたいで楽しそうですね
いきなりフリーランスやってみようと思います
スクールにも通うつもりです このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 105日 2時間 32分 54秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
