次スレはが(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
ttp://http://jsdo.it/ ttp://http://jsbin.com/ ttp://http://jsfiddle.net/ ttp://http://ideone.com/ ■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
■前スレ
+ JavaScript の質問用スレッド vol.141 +
ttps://mevius.5ch.net/test/read.cgi/hp/1562318008/ ◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
ttp://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 型の中身をそのまま表示してくれます。)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
ttp://http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳) ttp://http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events) ttp://http://www.w3.org/TR/uievents/ (UI Events) ttp://http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳) ◆ その他のWeb関連仕様
ttp://http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等) ttp://http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳) ttp://http://www.whatwg.org/specs/ (WHATWGの仕様一覧) ◆ MDN (Netscape/Mozilla)
ttp://https://developer.mozilla.org/ja/docs ◆ MSDN Library
ttp://https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API) ttp://http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript) ttp://http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript) ttp://http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML) ◆ JavaScript Garden (ja)
ttp://http://bonsaiden.github.com/JavaScript-Garden/ja/ ◆ JSON (JavaScript Object Notation)
ttp://http://www.json.org/json-ja.html ■テンプレ案
ttp://http://fiddle.jshell.net/fH4cC/180/show/light/ ■FAQ
ttp://http://fiddle.jshell.net/vSqKr/44/show/light/ ダウンロード、CDN
ttp://http://jquery.com/download/ ブラウザサポート
ttp://http://jquery.com/browser-support/ jQuery UI
ttp://http://jqueryui.com/ jQuery UI ダウンロ－ド
ttp://http://jqueryui.com/download/ リファレンス等
ttp://http://alphasis.info/ ttp://http://www.jquerystudy.info/ ttp://http://js.studio-kingdom.com/ 【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
ttp://http://qiita.com/fmy/items/345a264a1cf2e2a73f62 ◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に
ttp://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
ttp://http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版) ttp://http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳) ttp://http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) ttp://http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) ttp://http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015) ttp://http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table) ttp://http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) ◆ HTML Standard (HTML5)
ttp://http://www.whatwg.org/specs/web-apps/current-work/multipage/ ttp://http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) jQuery
ttp://http://jquery.com/ jQuery UI
ttp://http://jqueryui.com/ jQuery Mobile
ttp://http://jquerymobile.com/ Lo-Dash
ttp://https://lodash.com/ Backbone.js
ttp://http://backbonejs.org/ Underscore.js
ttp://http://underscorejs.org/ AngularJS
ttp://https://angularjs.org/ Knockoutjs
ttp://http://knockoutjs.com/ RequireJS
ttp://http://requirejs.org/ D3.js
ttp://http://d3js.org/ threejs
ttp://http://threejs.org/ 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に一本化されました。
ttp://https://w3techs.com/technologies/overview/javascript_library/all ■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は
ttp://http://validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
◆ Standard ECMA-262
ttp://http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 2015, いわゆる ES6) ttp://https://www.ecma-international.org/ecma-262/9.0/ (ECMAScript 2018) ttp://https://tc39.es/ecma262/ (ECMA-262 最新ドラフト) ◆ HTML Standard (HTML5)
ttp://http://www.whatwg.org/specs/web-apps/current-work/multipage/ ttp://http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) ttp://http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) 削るべきか要審議
ttp://http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) ttp://http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) ttp://http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table) ttp://http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table) というのは何らかのキーが押されたという状態らしいですが、function eってなんですか
なんのキーか取得するための関数？ですか？
ttp://https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Events ちんぽを出せ
そしてこの板にUPしろ
それがjsニンジャになる一番の近道だ
どういう風に使うものなのかな？
時間を測定するのにmeasure()を使うなら区別できる名前にしておかないとならないし。
同じ場所で呼ばれたのに毎回違う名前付けるほうがおかしいだろ
ttp://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);
そもそもKick10.wavの音の最初に無音期間がある可能性
currentTimeは連打に対応するためにつけてます
一番早そう？だけどどうなんだろ？
無音時間は無いはずですが一番大きい音からスタートとかは調整できるかも？
でも音質考えるとなあ
音ゲーとかどうしてるんだろ？
タップで別の反応（何かの色変えたり文字）が出るようにして問題の切り分けを行ったほうが良い
音ゲー作りたいなら同時再生数を増やさないと話にならない
ttp://https://stackoverflow.com/questions/10651349/how-to-select-empty-inputs-value-using-jquery ここにjqueryでは[value=""]というフィルタを使えないと書いています
valueの初期値で判断するから、という理由のようですが
何故valueの初期値で判断するのかが分かりません
どういう理由からそうなるのでしょうか？
inputタグは後からvalueを変更しようが属性値のｖａｌｕｅが変わることはない
なので入力したかどうかのチェックに[value=""]は使えない
なるほど
値を変えても、ソースリストが変わるわけではないみたいなことですね
ありがとうございました
jQueryではなくDOMの仕様
<input value="test">
input[value="test"] {
color: red;
}
これはページを表示した時に赤くなるが、intputの中もを変更しても色は変わらない
JavaScriptでvalueを変えても同様。valueの値は属性に反映されない。
typescriptをサポートしているって例でボタンをつくったりとかまでは見かけるけどそれ以上突っ込んだ例が少ないので
ドキュメントを読み解くときそこだけ読み替える感じでいける？
DOM操作が反映される前にその後のpromptが実行されてしまうのですが、
これをDOM操作を確実に反映させて（強制再描画させて）からpromptが実行されるようにする簡単な方法ってないでしょうか？
実例は？
element.style.なんたら=かんたら;
var ok=prompt("これでいいですか？");
補足
２行目だけ実行されればいいというものではなくて、２行目以降も色々と処理があってそれは１行目の後であってほしいのです。
だから２行目以降全体をsetTimeoutでくくるとかはできれば避けたいです
setTimeout等で一旦ブラウザ側に表示する隙を与えてやるか
今時なやり方はprompt使わずに自前で表示するかかなぁ
async function a() {
element.style.なんたら=かんたら;
await new Promise((res,rej)=>requestAnimationFrame(()=>setTimeout(res,0)));
var ok = prompt("これでいいですか？");
}
a();
おとなしくdialog要素使え
どのiframeがクリックされたか表示する方法はありますか？
$("iframe").contents().find("body").on("click", function(){
// alert( $(this).attr('id') );では無理
});
jQueryを使うとこんな感じでiframe内のクリックを実行することはできるのですが、
複数iframeがある状態で、「どのiframeか？」というのを知りたいので、
iframeタグのIDが取得したいです。
ttp://https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument これはiframe内のドキュメントを取得・操作するためのもので、
親要素（iframeそのもの）を取得するのと違うのではないでしょうか？
HTML部分が
<iframe id="iframe01" src="test.01html"></iframe>
<iframe id="iframe02" src="test02.html"></iframe>
みたいになっているとします。
に書いたようにiframe内をクリックすると
どのiframeをクリックしたかidが取得できればと思います。
対象のiframeがどれかわかれば、srcを変更して
違うhtmlを読み込んだり出来ると思いまして。
そこのthisはiframe内のbodyだし
iframe内から外を得る方法は無いはずだからこんな感じ？
$("iframe").each(function(idx, elem) {
$(elem).contents().find("body").on("click", function(ev) {
alert($(elem).attr("id"));
});
});
ほらよ
ttp://https://jsfiddle.net/v9586xo0/ <iframe name="iframe01"></iframe>
<iframe name="iframe02"></iframe>
$("iframe").contents().on("click", function(){
alert(this.defaultView.name);
});
よくわからん挙動をしたことがあるので、あまりおすすめしないがな。
イベントの通知は、iframeの中から、親windowの関数を呼び出して
通知するほうが安全だと思うけど、まあ今は解決してるかもしれんし
動くなら別にいいけど
「document.addEventListenerして、documentで判定しろ」というアドバイス
ownerDocumentをとってもいいけど、documentそのものにclick定義する方が手っ取り早い
.contents() が返すのがdocument
だからお前のアドバイスは（内部で）既にやってる
「documentで判定」してない
めんどくせーやつだな
> 「どのiframeか？」というのを知りたいので、
って書いてあるだろ。
理由も追記してる
> 対象のiframeがどれかわかれば、srcを変更して
> 違うhtmlを読み込んだり出来ると思いまして。
最初に書いてあるとおり「どのiframeか？」を知りたいのに、
document（jQueryで言えばcontents().onの中のthis）で判定しろと言われても
判定した所で、iframeにはたどり着かないだろ。
その（iframeの中のdocumentから）iframeにたどり着く方法を聞いているというのに
俺はわかるが、あんたに答えるチャンスをやろう。
君イエローカード
対話する気があるのなら言葉に気をつけろ
次やったら退場ね
このスレの全員で君を無視するから
良いから質問に答えろ
お前はレッドカード（笑）
このスレの全員で君を無視することになった
お前はブラックだな。トリアージ的にｗ
めんどくせーのはお前だよ
iframeとdocumentの関連付けが出来たんだから、documentからiframeを追えないわけがないでしょ
だから、俺も追えるって言ってる。
質問者が聞いてるのは、追う方法であって、
「追えますか」→「追える」という答えは聞いていない。
キタキタ
人の発言をパクることしかできない無能
がっつり釣られましたとさ
勝手に質問者の代弁してるんじゃねーよ
お前の勝手な考え・思いを他人に押し付けるな
何様のつもりだよ
$("iframe").contents().on("click", function(){
alert(this.defaultView.name);
});
これで追えるわけ
$("[name=" + this.defaultView.name + "]")
でもdocumentがわかったとしても、↓のようなやり方でiframeを追うことは出来ない。
$(document)
質問者が書いてるじゃん。iframeのsrcを書き換えるって。
iframeの親で、iframeのdocumentがわかるとして、
どうやってiframeの親から、iframeのsrcを書き換えるのさ？
お前さぁ……
流石に呆れてしょうがないんだけど教えてやるよ
ここはどんなスレだ？
JSを自ら学ぶためのスレ
だろ？
なんで１から１００まで答えを書かないといけないんだ？
いろんなやり方のヒントを示して、質問者が自分の頑張りで解決することを後押しするスレだろ
どうしても分からなければ質問者は追加で質問すればいいだけなんだよ
なんで回答者は抜け目なく回答してあげないといけないんだ？
スレの趣旨と反してるだろ
それくらい分かってくれよ
頼むからさ
だから、お前の場合、ヒントになってないって話をしてる
「.contents() 使えばいいよ」が全くヒントにならないことぐらいわかるやろ？
※ .contents() は contentDocumentのjQuery版
本当にめんどくせー奴だな
documentからiframeを追える事が分かっていて、の反応なら尚更に驚きだわ
for (let iframe of document.querySelectorAll('iframe'))
iframe.ownerDocument.addEventListener('click', event => console.log(iframe), false);
で、何が問題なのかをいってみろ
ありがとうございます！this.defaultView.nameというのが必要なんですね。
ここからidとれそうなので、質問したことができそうです。
私の質問がきっかけで揉めてるようですが、、、
私自身は納得しましたので、終了でお願いします。
みなさん、ありがとうございました。
「documentで判定」してないw
そう思うのは勝手だが、他人にお前の思いを押し付けるな
お前の場合自分の考えに合わないことに文句を言いたいことが前面に来てる
なんの公益性もない他人を不快にさせるだけのレスはチラ裏にでも書いとけ
ヒントになってないと指摘されて
不快に感じてるのはお前だけだｗ
対応表を用意するのは配列時代からあった方法と認識していたが、ひょっとして今時の人は知らないのが普通なのか？
> で、何が問題なのかをいってみろ
動かないから問題（笑）
ttp://https://jsfiddle.net/pczt1muo/ 馬鹿にしてるのは、contentDocumentでできると答えたこと
どうみても、荒らし
お前の毒にも薬にもならない余計な指摘はいらんから
質問者のためにお前が良いと思うコードを披露したらいいじゃん
お前は正義部って結局文句を言いたいだけのクズなの
> ・煽り、批判等の他人を不快にさせる行為
「回答者へ」にも書いてあるのに、「馬鹿にしてる」と堂々と書く奴だからな…
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
だからで書いただろｗ
だから、いちいち他人に絡むな
を100回読み直せ
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
って書いてあるから、で例を示したやろ
お前の方こそ、例を示してないからな。
色々調査して分かったのですが、Chromeはユーザーの環境においてWebサイトに掛けるリソースを大胆に調整するようです。
例えば私のメインの64GBメモリ搭載のマシンだとずっと私のサイトを閲覧した後の状態で、
1タブ辺りで500MBくらい消費していますが、4GBのマシンだと100MBも消費していません。
64GBの方は仮想メモリを設定していないこともあって、沢山タブを開いてると4GBのマシンでは余裕なのに
64GBのマシンでメモリ不足（割合で決まるようで残り10GBくらいから発生します）になるということがおきます。
JSでPerformanceAPIを使えばリソース読み込みのタイミングなどを細かく調査できるようですが、
こういうメモリ周りを調査したり調整するための方法ってどんなものがありますでしょうか？
禁止行為が読めなかったようだな
妄想大好きイキリ君は本当に仕方がないやつだな
ただ一つ言えるのはお前みたいな奴を荒らしと呼ぶになんの支障も無いってことだけ
JSの話題をする気がないのなら他所で一人でやってくれ
あとメンとドウも。
メンドウだけにｗｗｗ
Chrome DevTools
64GBで仮想メモリを設定してないんだろ？ なら使用可能なメモリは64GBしかない。
それに対してメインメモリが4GBで仮想メモリを設定していて、
十分にHDDの空き容量が有るなら使用可能なメモリの最大は16TB （もしくはそれ以上）
ttp://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の問題とは思えない
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
「自分ならこう書くという例」を書けば、「他人の回答を批判」しても良い、と解釈する人がいるとは思わなかったんだが、テンプレ変えた方がいいのかね…？
正当な批判は素直に受け取りましょう。って書いたほうが良いな
私の持ってるマシンで実験する分にはそれで良いのですが
ユーザーから状況を収集したり、動的に対応したりしたいということです。
問題は、仮想メモリが動的の変動ものだからどうか分かりませんが、
ChromeやWindowsは実メモリのサイズや割合によって挙動を変えてくるようだという点です。
4GBで仮想メモリを設定している方が使用可能なメモリが多いのであれば、
それに沿った挙動を示しているのであれば問題ないのです。
まずはその真偽も含めて調査がしたいので、メモリの状況を上手く収集する方法が無いかというのと、
一般にそういった問題に対処する方法はないのかというのが質問です。
よろしくおねがいします。
巻き上げとthisにだけ気をつければ
巻き上げにfunction式とアロー関数式に違いはない。
注意すべきはthisのみで、巻き上げに云々は関係ない。(var f = function(){};もvar f = () => {};も同じ)
this、arguments、それからコンストラクタとしての用法がないことからsuper、それにnew.targetだ。
なんで宣言を省いてしまうのか
どうせ分かり会うことはないだろうから
考え方以前の問題だろ
で、無名関数はfunctionでも式としてしか書けない（() => {}に対してfunction(){}）
嘘だと思うならはfunction(){}を宣言文で書いてみろよｗ
function f(){}は有効な関数宣言だけど
function(){}はすぐGC対象になる関数式だぞｗ
だから突っ込むなと言っただろ
こうなることは分かりきったことだから
お前こそ人の発言の意図を理解しろ
建設的な議論は望めない
> ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
アロー関数の方が、this が、jQuery, Haxe みたいに正常に動くから、
this を一々、自分で、self, that に、代入しなくてもよいw
Linux なら、ps コマンドなどで、システムの状態を調べる
Windows のPowerShell にも、そういうコマンドがあるのでは？
ブラウザからPowerShell起動して状態取得とかハッカーかよ
全てプロトタイプ先に任すというものなので継承ではなく委譲
prototypeプロパティは委譲させられるものを定義する場所で
それをプロトタイプとしたオブジェクトを生み出すnew演算子の効果を持って
形として継承がさせているように見える
その継承と委譲の区別意味あるか？
__proto__は実装方法。
C言語で例外を実装するときにgotoを使う
というのと同じように、__proto__を使って継承や委譲するだけに過ぎない
全くしっくり来ないわ
jQuery#proxyでも委譲云々を唱える奴がいたが、ただの宗教論にしか聞こえない
継承は親クラスから機能を受け継ぐもので
委譲は処理を別のものにさせるものってだけじゃないか
その実装がどうなってるかは関係ないし、
継承、委譲の考え方に、それらを実現するときに使う道具も関係ない
proxyは過去いってた奴がいただけで俺も賛同してない
今の話に関係ない話だろってこと
> 継承は親クラスから機能を受け継ぐもので
はいダウト。「親クラスから機能を受け継ぐ」というのはのはクラスベースオブジェクト指向固有の考え方。
> その実装がどうなってるかは関係ないし、
と自分で書いてるのに語るに落ちたなｗ
これが間違い。プロトタイプベースでも「親クラスから機能を受け継ぐ」ことは継承になる。
これは概念の話なので、言語としてクラスとして読んでいるかどうかは関係ない。
クラスに相当するものがあって、それを引き継ぐならどんな実装でも継承
> 全てプロトタイプ先に任すというものなので継承ではなく委譲
全てを任せてないだろ
「クラスに相当するもの」というのがクラスベース脳から見たらそう見えるというだけ。
頭がクラスベースの実装に染まってるからお前はもうバイアスなしにモノを見ることは無理。
だから継承はクラスベースのクラス相当のものための用語なんだが？
継承＝クラスベースなんだよ
正確に言えばプロトタイプベースでもクラスは作れるが、以前のJavaScriptは
独特のルールを守って実装しなければいけないから面倒だった。
このJavaScriptでクラスが作りづらいというのはJavaScriptの制限であって
プロトタイプベースの制限ではない
その証拠に最近（といっても随分前だが）改善されてJavaScriptでもクラスを作ることが用意になった。
で、以前の面倒な実装でも今の簡単な実装でも、実装がどうであれ「クラス」にすぎない。
クラスに相当するものは、クラスベースでもプロトタイプベースでも（それ以外）でも存在する。
プロトタイプベースだからクラスがないと考えるのは、お前が持ってるバイアスにすぎない。
スポーツカーつかまえてでもそれ農道走りにくいよね言うてるのと同じじゃボケ
class構文入ってるんだから
それな。プロタイプベースってのは内部の実装に過ぎず
class構文を使えば、プロタイプベースでクラスを容易に実装できる。
昔はclass構文がなかったから、クラスを実装するのは容易ではなかったが
別に実装できなかったわけじゃない。
おととい来てね、おじいちゃん？ｗｗ
糖衣構文だから、どういうこと？
最初から糖衣構文を使うことで、プロタイプベースでも
クラスが書きやすくなったって話をしてるよね？
> それな。プロタイプベースってのは内部の実装に過ぎず
仕様を無視した、プロトタイプベースじゃないJavaScript実装が存在するの？
「CでもGC相当のものは実装できるからCはGC言語と言える！」
> それな。「プロタイプベース」ってのは内部の実装に過ぎず
> 最初から糖衣構文を使うことで、「プロタイプベース」でも
「プロトタイプベース」ではなく、「プロタイプベース」と書いてる(バグリング君も似たようなことをしたな)
仕様を知らないので、「内部の実装」と知ったかぶりをする
民主主義国家でなくても民主主義はあるしできるように、
JSでも当然クラスという概念は持ち出せるし、構文にまでなってるんだから、
JSにクラスというものは当然に存在すると考えるのが合理的
クラスというのは概念なので
クラス専用の構文がないC言語でも
クラスの概念を導入したコードを書ける。
というのが正しいかな
以前のJavaScriptでもクラスの概念を導入することは可能だったし
newがあるんだから、クラスの概念を使うのが普通だった。
それに加えて最近のJavaScriptではクラス専用の構文が加わり
クラスを導入したコードが簡単にかけるようになった。
ttp://https://qiita.com/ikedaosushi/items/45652e53c06c761d8137 奇しくもクラス大好き言語JavaはXML大好きである。
クラスおじいちゃんはJSONを使わないように。
同様に、C など、オブジェクト指向ではない言語でも、
苦労すれば、オブジェクト指向で書ける
でも、そういう言語は、オブジェクト指向とは言わない
オブジェクト指向の言語とは、オブジェクト指向を簡単に書けるものだけ。
つまり、クラス構文を持つものだけ！
go言語もhaskellもクラス構文なんてない。
一方jsはes2015でおじいちゃん介護言語に成り果ててしまった…
イケてる言語はみんなない。
それは偶然ではなくて、長年のC++/Java型のクラスベースオブジェクト指向で段々明るみに出てきた問題点を反省して、その問題に対する答えをそれぞれ言語仕様に盛り込んで来てるからなんだよね。
脳死でJavaパクったRubyみたいな要介護言語なんかとは心意気が違う。
JSも同類になったｗｗ
だからオブジェクト指向言語ではない。
第二級言語
> イケてる言語はみんなない。
イケてない言語では？
議論に参加して良いのはイケてる言語になってからだよ。
いちおうひととおり使えるれべるにはなってるかな？
indexedDBがわけわからんしＳＱＬの勉強もかねてつかってみたいんだけどどうなんだろ
IndexedDBが堅苦しいなら使いやすいライブラリを探す事をおすすめする
ttp://https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API#See_also 廃止が決まってからも長い間残されてたけどchromeは遂に次のバージョンから削除されるってよ。
ガワが完成し一応はリリースできるものに仕上がったのですが
どうしても音の遅れが気になり色々調べた結果
どうもaudioを使用する場合遅れはしゃあないって結論になりました…
㍉ｾｯｸ単位の気にしなければ気にならない遅れですがどうしようもないようです
解決するにはweb audio APIを使うしかないみたいだけど知識０だしどうすっかなあ…
引数の x, t, b, c, d, s の内、x と s の説明が見当たりません。
何を指しているかわかる方がいらっしゃいましたら教えてください。
ttps://github.com/danro/jquery-easing/blob/master/jquery.easing.js x と s を含まない関数では、しっかりアニメーションしています。
sはマジックナンバーでググれ
xを使う関数なんてねーよ
そういたします…
調べれば調べるほど自分の欲しい機能がついててもうなんで始めから使わなかったのかと…
情報がそれほど多くなく説明が専門的で理解できるか微妙ですが
幸いあげて下さった簡易版？ライブラリもあるみたいなので頑張ってみます
ありがとう
レスどうも！
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;
}
不勉強ですみません･･･
ttp://http://void.heteml.jp/blog/archives/2014/05/easing_magicnumber.html 即効ありがとうございます。
熟読します！
使ってないじゃん
easeOutBounceの先見たか？
調べるなら、公式サイトをあたれ
ttp://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;
> },
1/2^64じゃね？
n=3-n; //1
n=3-n;//2
n=3-n;//1
こんな感じで 0,1,2,0,1,2,0,1,2…みたいに３つの数字繰り返す感じのやつ教えてください
（関数以外でできないものか気になったのです）
var n=0;
n=(n+1)%3; //1
n=(n+1)%3; //2
n=(n+1)%3; //0
うおおできました！ ありゃす！！
他人のコードで課題提出するのってどうなんだろうね
単にプレイヤーについてるような
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
やるじゃん
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
ジェネレータで無限数列イテレータ作ってもええな。
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やら...やらしたいぜ！
nをクリアしないならbigintでやるべき
たとえばボタンを押した時などに、動的に画像をずらっと一覧で表示させたく、
text += '<div><img src="./image.jpg"></div>'
をループで回したのち、しかるべき要素内にappendなりinnerHtmlなりして挿入を試しています。
たとえば1000件だとChromeだと一瞬なのですが、Edgeだと1秒近くかかってしまいます。
console.timeなどでどこが遅いかを調べてみると、遅いのはforではなく、appendなどのDOM追加部分であることは分かりました。
DOMの追加の方法は様々あるようですが、いずれもEdgeだと大変遅い状態です。
テンプレで、各種ブラウザによって最適化が異なる、との文言を見ましたが、例えば上記の件だと、高速に挿入するには他にどのような手法が考えられそうでしょうか。
DocumentFragment
バイナリエディタ作ってるときにその問題に遭遇して、googleのスプレッドシートどうやってるんだろうと思って見てみたらなるほどCanvasで実装されてた。
昔、エクセルのスプレッドシートみたいに
縦横のテーブル＋上と左のヘッダ（A1 A2 みたいなやつ）を
作ろうとしたら難しかった（その時は諦めた）事があるよ
テーブルの内容とヘッダを同期させて
"スムーズに"スクロールさせようとしたけど無理だった。
DOMではそんなこともできないんですよ。
昔は知らないが今はposition: stickyとかあるし簡単に出来るような気が…
で言ってんのはあくまでパフォーマンスの問題ね。
読み込んだファイルを1バイト16進テキスト一つ当たり1DOM要素に割り当てたら、軽いファイルなら全く問題ないのだが数百キロバイトのファイルだともうガッタガタだった。
googleみたいにcanvasで実装せず、あくまでDOMにこだわるならinfinite scrollみたいなDOM要素使い回しの実装をやらないとダメだろうなぁ。
「1000個のdiv 」「何千何万のtable 」では状況が違い過ぎなのでは？
src付きimgタグ1000個だもんな。
document.createElement('img')で一個作って、
ループ内で.clone()して.src設定してdocumentFragmentにappendしてみては？
DOMへの追加が爆速になり感動しました
一方、今度はそのdocumentFragmentの生成時に大きく時間がかかるようになりました
というのも、どうやらcreateElement(img)に対する
setAttribute(src,./image.jpg)が重いみたいです
そこで、で出していただいたcanvasをヒントに、imgタグを使うのをやめて、
createElement(canvas)後、それに対しdrawImageし、Fragmentに追加してみたところ、高速になりました(画像はループ前にnew Image)
Edgeが異様に遅いのはimgタグのsrc指定が問題だったのでしょうか、srcが空の場合はいずれのブラウザも良い速度でした
で出していただいたやり方も試してみたいとおもいます
1000というのは適当な数で、実用上はたかだか300程度のものなのですが、それでも大きく差があったため疑問になった次第です
様々な回答ありがとうございます。
今度はそれが重くなってるんじゃねーの？
ttp://https://dl.dropboxusercontent.com/s/8zywbtzce1qmysi/%E6%8B%98%E5%BC%95%E7%AA%93%E8%A1%A8%E7%A4%BA.html 
ttps://i.imgur.com/GIbBVqR.gif このGIFのように、モーダルウィンドウを常に文書の表示領域の一定の割合の大きさで表示します
表示中にウィンドウをリサイズしたり、スマホブラウザだとアドレス欄を見せ隠ししても合わせて大きさが変わります
ピンチイン・ピンチアウトでページ表示の表示倍率を変えていても、常に引ききった表示が基準になっています
Chromeでは意図通りに動くんですが、スマホ版Firefoxだとwindow.innerWidth系が表示倍率で変動してしまいます（実際にGIFの最後のように取得すると、Chromeでは一定なのにFirefoxは表示倍率に引きずられる。これは文書ではなく画面の表示領域を指してしまっている）
しかし、window.outerWidthほかは文書の表示領域のサイズではないためクロスブラウザ対応に困ってます
どうにかしてクロスブラウザで、Chromeのwindow.innerWidth系の仕様にあたる数値を取得できないでしょうか
ttps://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にデバッグの数字しか見せてなかった……意図通り動作しているところ入れるの忘れてたので貼っておきます
表示倍率に関係なく、文書の表示領域基準になっているのが判ると思う
ttps://i.imgur.com/t8zMo1U.gif こっちです
ttps://i.imgur.com/ruyTSaH.gif 常に固定サイズフォントってアクセシビリティが恐ろしく良くない実装だな…
var obj={
"329435e5e66be809a656af105f42401e":"hogehoge",
"73bb3253f355e9f0325b4b0b373d27ba":"fugafuga"
};
こういうのです。問題なくできました
もしかしたら”先頭数字ダメ”というのが記憶違いだったかもしれません
識別子の制限と混同しているものと思われる。
var 0120abc;
とか
function 090xyz() {}
とかがダメなのであって。
配列のインデックス値と混同するからダメ等のローカルルールじゃないか？
varダメ、関数式ダメ...etc
思考停止で選択肢を潰してるだけ、ってことにいい加減、気が付くべき
え？いや、上で書いたけど--vwと--vhのCSS変数は表示領域に合わせて変更する実装みなってる
試しに で試してみて欲しい、多分ちゃんと真ん中に75%の幅・高さで表示されるはず
その都度、DOM にアクセスすると「JavaScript(JS)/DOM 間の時間 × 千回分」が掛かる
それを、JS内のDocumentFragment で、千回行ってから、
最後に1回だけ、DOMにアクセスするように変える
Vue.js も同じような仕組み。
JS内に、すべてのDOMのコピー(仮想DOM)を持っていて、
変更された部分だけを、実際のDOMに反映する
これの欠点は、速いが、メモリをDOMの2倍使うこと。
常に、速度と使用メモリ量は、取替えられる！
はリフローを理解して提案しているし、でその件は解決してる
相手して損したNGしとこ
話噛み合ってないけど、 の安価先間違ってない？
そもそも話題が違うんだけど()
相手して損したNGしとこ
は固定フォントサイズじゃなくてむしろレスポンシブだし、それ言ったのにinnerWidthの代替がfragmentで解決しているだの返された
それでも穏やかに人違いじゃないかって提案してあげたのにレス乞食認定って怖い
ifで奇数と偶数のペアならOK、それ以外はNGと出したいのですがif内の処理はどのように書けば良いのでしょうか？
「マンコ」や「ちんこ」といった文字列が来ても偶奇を判定するの？ｗｗｗ
うーん…マンコはよく見たらグロいから奇数かなぁ？
ちんこは偶数！タマタマだけに！ｗｗｗｗ
両方整数でかつ足し合わせた値が奇数ならOKとか。
さんヒントありがとうございます
できました
ボタン押して「インライン」「全称セレクタ」「要素セレクタ」「IDセレクタ」の、4つの種類でCSS属性・値・!importantかどうか・セレクタが表示されてればOKなんです
ttp://https://download1.getuploader.com/g/5da2a832-84fc-4625-bfb2-6407a010e467/6%7Cff11_cast/378/%E8%A6%81%E7%B4%A0%E3%81%AB%E5%AE%9A%E7%BE%A9%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E5%8F%96%E5%BE%97.html `${"`"}←これがバックティック文字です。
変数や式を扱えます。例：${"`"}\$\{a}${"`"}`
もっとスッキリ書く方法をおしえてください
\$\{a}の部分は\${a}でよかったです
`${"`"}\${a}${"`"}`
は
"`${a}`"
や
'`${a}`'
と書くのと同じだよ。
`${"`"}`とか穴を掘ってすぐ埋めるみたいなことして何がしたいのか分からん。
こういうあげ足取りではなくて、どなたか解答をいただけませんか？
"`${a}`"
もっとスッキリ伝わる質問を書いてください
`\`\${a}\``
か？個人的には大してスッキリしたようには見えないが…
挙げ足とりとか失礼なこと言ってないでの通りやったほうがいい
＞`\`\${a}\``か？
そういうことです
最初にそれをやっていたのですがエラーが出たので質問するに至りました
で、エスケープをあらためてやってみると成功しました
おそらくですが、最初に``hogehoge``みたいなことをしてシンタックスエラーが出て
次にhogeを定義していないのに`\`${hoge}\``みたいなことをしたときに出たエラーを
シンタックスエラーと勘違いしたのだろうと思いました
お騒がせしました
＞ 229の通りやったほうがいい
テンプレート文字の中で${}を使いたい、かつ出力に`${}`文字列が出てくるので
つまりバッククォート内でバッククォートの入れ子にしたかったのです
ただ、エスケープで書き直してみましたが仰るとおりめちゃくちゃ見にくいですね
ちなみには自分ではありません
何が違うんですか？
今に始まった事じゃないし過疎るよりましかも知れんが
うーん、要望にマッチするか微妙だが一案として、
const escBQ = ({raw}, ...vals) => String.raw({raw: raw.map(s => s.replace(/BQ/g, '`'))}, ...vals)
みたいなテンプレート関数を作って、
escBQ`あああBQこんにちは
BQHello
よい朝BQ
BQ`
ってやれば文字列として
あああ`こんにちは
`Hello
よい朝`
`
が得られるよ。
なるほど、フィルターしたほうが断然みやすそうですね
見た目だけの問題なのでBQのところを絶対に使わなさそうな（❝⚠❛みたいな）絵文字とか機種依存にしようかなと思いました
（副作用ありそうですが）
ありがとうございました
あいつら全員グンマーだろ
も質問者で、回答を釣るのに失敗したから、別人の体で出てきただけだと思う
ttp://https://mohayonao.hatenadiary.org/entry/20111108/1320756534 ここでやっているようなプログラムを作っても別タブを開いている間は止まります。
同じような経験をしていらっしゃる方いませんか？
workerの部分を別ファイルを使っても、blobを使って単一ファイルにまとめても
同じようになります。
ttp://https://qiita.com/mohayonao/items/b4f713bf8ab9de8907f1 ちなみにここのやつをそのままコピーしてやっても、workerありでも
無しでも同じような結果になりました。
ブラウザはChrome、Operaと試しました。
上記のカウンターを数えるだけのプログラムですが
別タブに行くとworkerがあろうとなかろうと、タイマーが止まってしまいます。
何かいい方法ないでしょうか。
ちなみに誰か、これらのプログラムを試してみて成功した方いらっしゃいませんか？
というより、プログラムは動くので、別タブに行ってもタイマーが止まるかどうか気になります。
緊急退避用でお世話になった方ありがとうございます。
個人的にやった修正はBlobbuilder() を Blobに変更しただけ。
条件文とかはそのままにしています。
とりあえずソースをストリングにするところから始めます。
このスレには、
みたいな荒らしがいるから、要注意！
質問に関係ないことで、言い争いをしている奴も、荒らし
道端に落ちてるゴミを一々踏んづけに言って騒ぐのは異常者
１つのちゃんとした質問レスにそれだけを見てそのまま返答すればいいだけなのに
コテもついてない余計なレスを勝手に同一人物だと思い込んだり
回答者同士でケチつけ合ったりするのが荒らしだろう
継承したいときprototypeに入れるのはただprototypeに入れてるだけ
new演算子が関数コンストラクタとprototypeに入れられてるものを良しなに扱ってインスタンスを生成してくれる
継承したいときprototypeに入れるのはただprototypeに入れてるだけ
class 親 {}
// 親.prototype.constructor = 親
// 親.prototype.__proto__ === Object.prototype
class 子 extends 親 {}
// 子.prototype.constructor = 子
// 子.prototype.__proto__ === 親.prototype
継承のために指定するのはこの部分
// 子.prototype.__proto__ === 親.prototype
なるほどインスタンスを見てかってにやってくれるんすな
モヤモヤが残りますが
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する必要あります・？
Javaでは要らないの？
継承に詳しそうだから質問お願いします
このコードのアラート2回目以降で確認できるんですけど、instance01.constructor === Constructor01がfalseになるのは何故ですか？
コンストラクタのプロトタイプオブジェクトにメンバを設定するとき.prototype.変数名に代入だとtrueなんですが、.prototype = オブジェクトの形にするとfalseになるんです
続き
(()=>{
'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');
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 プロパティは設定されていない。この場合、
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
必要あるでしょ
引数はどうするの？
ありがとうございます！凄くよく分かります
(コンストラクタ).prototype.(プロパティ)に代入したときは、既に存在するプロトタイプオブジェクトのプロパティを変更するだけだから(インスタンス).constructorが(コンストラクタのプロトタイプオブジェクト).constructorなんですね
逆に(コンストラクタ).prototypeに直接代入したときは、プロトタイプオブジェクトとして(オブジェクト).constructorを持たず結果的にObject.prototype.constructorがプロパティconstructorとして参照されるんですね
var e = new MouseEvent("click", {
bubbles: true,
cancelable: true,
clientX: x,
clientY: y
});
element.dispatchEvent(e);
などのような、イベントだとweb workerを使っても
別タブに移動するたびに、実行が止まってしまいます。
上記のinnerTextを書き換えるだけのプログラムも同時に
同じ関数に入れていますが、そちらはタイマーが働いています。
メインのUI側のonmessegeの中のマウスイベントは無効になるのでしょうか。
bのインスタンス生成は新しくSampleのインスタンスを生成することにはならないのですか？
3行目と6行目それぞれでAが表示されるのでは無いのですか？
ttps://i.imgur.com/O63piVm.jpg 
ttps://i.imgur.com/dkGWlmY.jpg それJavaScriptやない、Javaや
隠れてる間にビューを書き換える必要性は無いでしょ
失礼しました
間違えました
そりゃ、親のコンストラクタを呼んでいないと、何かの前提条件が保証できない
例えば、そこでデータベース接続しているかも知れないし、
値をキャッシュしているかも知れない
子クラスからは、親クラスが何をしているかは、わからない。
親クラスのすべてのコードを読む人など、いるわけないし
MouseEvent は、GUI のイベントだから、別のタブがフォーカスを持つと止まる
1つのPC で、フォーカスを持つ、GUIアプリは1つだけ！
フォーカスを持つアプリは、キーボード・マウスも占有するから、
2つ以上、同時に存在できない
サーバーみたいに、バッググラウンドで動き続けるプロセスは、フォーカスを持てない
別タブじゃなくて、別ウインドウだときちんと動作するのですが
それは、別のGUIアプリの扱いをしているからだと考えていいのでしょうか。
それはJavaScriptの話じゃない。
何訳のわからないこと言ってんの
別タブだと描画する必要がないし、入力を受け付けることもないから、それらに関するイベントループがサスペンドされてるかイベントバブリングが抑制されてるんでしょ
別ウィンドウだと描画する必要が基本的にはあるという違いがあるでしょ
よくわかりました。ありがとうございました。
動物（親）：ゾウ（子）、ライオン（子）、犬（子）
はしっくりくるんだけど
動物園（親）：ゾウ、ライオン、犬
っておかしくない？
例えば、ゾウ.speak()→その動物の鳴き声
はわかるけど
ゾウ.count()→動物園にいるその動物の個体数
ってなんか違和感あるんだけど一体どうすれば
まずな「例え」というのは何かっていうのが
わかってないやつが多い。
例えっていうのは、あることを知らない人に対して、
知ってるであろう他の概念を使って理解を容易にすることなんだよ。
例えは例えであって、本物じゃないんだから
本物との違いがあるのは当たり前
どうするかだって？どうもしなくていいよ。
例えで継承を理解したなら、ソフトウェア開発で必要なときに使えばいい
どうせそんな動物園、作るわけじゃないんだろ？
ゾウは動物だけど、
ゾウは動物園じゃないだろ
おかしいなら、継承を使うのが間違いってことだ
その辺は省処理量・省電力化のためにブラウザの開発者が処理を節約する実装をしている場合も多い
仕様書や参考文献に乗ってないけど処理止まる実装になってる事もあるってのを覚えておくと良いよ
ttp://https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame 〉 このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。
ただし、コールバックの確率は、バックグラウンドのタブや隠れた <iframe> では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。
仕様書では60Hzだが実際のブラウザは動作を変更する場合あり
他にも
ttp://https://japan.cnet.com/article/35098191/ ttp://https://blogs.windows.com/japan/2016/06/28/edge-battery-anniversary-update-jp/ 適当に見えるほど画期的な事実だったんなら、より後学のためになるな
よかったな
継承is-a, 包含has-a の違い
動物:ゾウは、継承
動物園:ゾウは、包含
車:消防車は、継承
車:ハンドルは、包含
return hoge();
})
みたいに初期化しているんですけどfillを無くす書き方は無いでしょうか？
サイトによってはundefinedで埋められているとありますが
実際は空の配列のようです
その例で言っても車クラスからハンドルインスタンスができるのは不自然
参照してた元コード貼っちゃうといろいろと面倒なのでその部分だけ例えた感じっす
なるほど単にそういうことですよね
なるほどさらに、しっくりきました
車クラスから作られた車インスタンスが
車部品クラスから生成されたハンドルインスタンスを
包含するということでは？
動物園クラスやその上の包含クラスからみれば、死してなお包含ということかな
あるゾウXが動物園Aから動物園Bに移転する場合は
動物園クラスを包含する展示施設クラス的なのをつくって
（A）展示施設("動物園Bの名前やIDやオブジェクト").登録("ゾウXの名前やIDやオブジェクト");
内部は、
（１）return 動物園Bオブジェクト;
（２）動物園B.登録(ゾウX);
（３）return ゾウXオブジェクト
（４）ゾウX.所属変更(動物園B);
（５）this.所属=動物園B;
（０）（A）でそもそも動物園B、ゾウ共にオブジェクトが引数なら一発変更
みたいな感じだろうか・・こんがらがってきた
好きなの選びなはれ。
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()), []);
よく考えたら今回の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);
[...Array(10)].map(hoge)一択だな
let abc = [...function*(){for(let n=0;n<10;n++)yield hoge()}()];
が最強。他はカスである。
let i = 9;
for(; i >= 0; i--) { }
の方が鮮やか
while (i--)
こんなにあるんですね
ありがとうございます
一番短いやつ使います
WebGLももう終わりを迎えようとしてるんですね。
オブジェクト指向の典型例。
Generic, 総称型
動物園は、親クラスの動物型の配列を持つ。
死ねば、そこから削除する
動物型の配列.each とすると、
各動物は自動的に、自分の(子)クラスに対応した、メソッドを呼ぶ
ゾウは、ゾウのように鳴き、
ライオンは、ライオンのように鳴く
子クラス独自の動きをする
ttp://https://youtu.be/EFM_g_mC_IA var a=a,b=b;
～処理～
}
こんなふうにjavascriptって、関数の引数を
var で新しく変数で定義するってやるべきでしたっけ？
function test(a,b) {}ってやる時点で関数testの中のローカル変数a,b
って意味になって、新しくvar a=a,b=bって不要でしたっけ？
ありがとうございました
オブジェクトのプロパティを変えると
そのオブジェクトを参照している全ての変数に於いて変えた結果が反映されるよ
そうじゃないと困るわ。
それじゃ特別な注意点伝わってない
「仮引数への操作が、そのまま実引数を操作することと（変数名とスコープを覗いて）全く同じ」 → プロパティの操作"以外にも"全ての破壊的変更が実引数にも反映される
これが見落としがちだしあんたも見落としてる
なるほど、分からん
function f( a ) { a.x = 1 }
f( a )
console.log( a ) //=> { x: 1 }
文系らしい理解だなｗ
CやらC++やったら発狂しそうｗｗｗ
「仮引数への操作」じゃなくて仮引数通して参照先のオブジェクト直接操作してんだバカ。
何が「反映される」だバカｗｗｗ
引数の状態を変えると、渡されたオブジェクトの状態も変わる！
仮引数には別名を付けれるんだし、エイリアスちう概念
スミスさんは結婚して山田さんになりましたが仕事では旧姓スミスを引き続き使用しています。
山田さんはある日、家で料理中に指を切ってしまいました。
すると、スミスさん「も」指を切ってしまいました。
これはおかしい。
スミスや山田はラベルに過ぎない。
スミス. hp -= 10
も
山田.hp -= 10
も
同一オブジェクトに対する同じ操作。
違和感を覚えたのは、切った指が同じ指だった事に気づいたときです。
最初はたまたまかも思ったのですが、一緒に風呂に入った時、
指の断面図が私の
どちらでも代用可能なコードであればjsでインラインにした方が読み込み早いとかそういうことはありますか？
自分で計測して判断しましょう
仮引数に実引数が代入される（a=b）か複製されるかは言語仕様による
だからまぁ、初学者は暗黙に変数名変わったら参照を共有してないように考えやすいとは思う
constだと続けて同じコード実行すると定義済みですって怒られるからブラウザ更新するけどいちいちめんどいのですがどうすればいいですか
もちろん元コードをvarとかに書き換えるのはもっと面倒です
後ろに})()
を付けて実行する。
リロードより楽かは知らん
絶対に間違ってはいけない考え方をやってしまっています
渡され方が渡されるものによって変わるということは不自然であり、一般的にありません
多くの言語では、渡され方は、渡し方、によって変わり、それが自然なのです
JSでも、プリミティブかどうかで渡され方が変わることはありません
そして、JSでは参照だの参照の値だのを持ち出す必要はありません
仕様書を愚直に読めば、全ての値が名付けの連鎖によって
例えばあなたに拓哉という名前だったりタッちゃんという名前だったりがあるように
あなたはあなたであり、他の何者でもなく、拓哉やタッちゃんがあなたという存在ではないですが、
あなたという存在を同時に共有して表すための名前という概念で変数を捉える事ができます
そのため、共有渡しという言葉がJSでは使われることがあります
ようするに1でも"Str"でも、それは別の名前がつけられる時複製されているわけではないのです
ただプリミティブ型は不変なため、コピーされていると考えても、同一存在だと考えても辻褄が合います
ですがわざわざ型によって渡され方が変わるなどの仕様書にない不自然な考え方をしなくとも
すべて共有渡しだと簡単に認識すればよいのです
ちなみに、実際のエンジンでも、SMIを除いてプリミティブ型でも参照の値渡しによって
メモリの同一データへの参照が伝播されていく実装になっていることが多いです
SMIを除いてプリミティブ型の多くはオブジェクトとして扱われています
let x = y = '初め';
x = '入れた'; // x === '入れた', b=== '初め' ✕変数の"値を弄る"、○変数の"値をすげ替える"……？参照先を共有してるとすると共有だけど対象は単体？
let a = b = [0];
a = {1}; // a === {1}, b === {1} ○変数の"値を弄る"、○変数の"値をすげ替える"……？参照先を共有してるとすると共有だから対象も連動
変数への再代入は、全く同じ参照先を持つ他の変数の参照先は変えない
Node.js をインストールしているなら、
VSCode の拡張機能のQuokka.js で、
リアルタイムに値も表示される、スクラッチパッドとして使える
ただし、無料バージョンでは、保存したファイルからは実行できない
const b = { x: "x" }
上は、2つのオブジェクトを生成しているけど、
下のc は、オブジェクトを生成していない。
参照の代入だから、単なるエイリアス
const c = a
a.x = 1
console.log( c ) //=> { x: 1 }
参照値の代入って言いたいのか？
インラインにしたほうが約数ミリ秒早い。
ただし開発効率が低下し開発時間がかかる。
お前が働いた時間でどれくらい金がかかるかわかるか？
それだけの金を使って1ミリ秒しか変わらなかったんだぞ！って言われてみ？
速くなるのか遅くなるのかの定性的な事実が重要。
というか、開発効率を気にする奴はインライン化も機械化すると思うが
GoogleのHTMLが手で書かれてるわけない
必要な所では勝手にされるので
開発者は自然に書くといい
自分で速度を測って本気で速度を気にしてる人と
速度を測らないで速いかどうかの話をするだけのなんちゃってやろう
なんちゃってやろうは本気じゃない
俺はちゃんとしてますってふりしてるだけ
限られた環境で限られたケースでのみたまたま今速かったものを心酔するバカパターンと
最速ではないが全てのモダンブラウザで速さが安定して早いWasmを使う賢パターンがある
ttps://cloud.githubusercontent.com/assets/288977/8779228/a3cf700e-2f02-11e5-869a-300312fb7a00.gif WasmでDOMサクセスができるブラウザはどれ？
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 第二引数
ありません
Function#bind
次はjavascriptかphpのどちらかをやりたい
どっちがオススメですか
javascript
同じくJS
ただJSスレでどっちが良いか聞いてもあんま意味ないと思う
両方やる
お前に適切な方が自然と分かる
JSとPHP同時進行で書いてると混乱する
JSに$thisとか書いてエラー出してからハッとする
結局javascriptはある程度勉強しなきゃならんのか
別にそんなこともないと思うけど
現代的なウェブアプリケーションのフロントエンドを作る上で
JSを避けて通れないのはその通りだけど
どっちもJavaScriptで書けるし今だとPHPに劣らず熱いでしょ
clearTimeoutで1つ解除すると、まとめて解除されたりしますか？
何故か途中で処理が止まってしまうようです。
しない
VSCode, jQuery, Babel,
gulp, npm scripts,
SASS, Bootstrap など
ブラウザ依存
解決法としてタイマーのIDであるsetTimeout()の戻り値をclearTimeout()に渡すのはどうだろう
それ以外、clearTimeoutに渡す方法はないから、既知なのでは…？
されたりしなかったりで、ブラウザに依存するのですね。
スクロールするとフェードインするためのクラスを与えるという処理で、
横一列に並んだ要素を、一定の間隔でフェードイン表示させたいのですが、
リロードする度に、上手くいく数がマチマチで、且つ全部表示されることがないという
状態で、何が起きているのか把握できませんでした。
んが、色々試したところ、下記のように条件分岐の中にループ処理を
仕込んだところ、望んだ動作となりました。
このような使い方の場合、タイマーをクリアする必要ってあるのでしょうか？
var loop1 = function() {
if (...) {
setTimeout(loop2, 300);
}
else {
setTimeout(loop1, 16);
}
};
loop1();
単体テストはしてみたの？
動いたんならめでたしと言うことで
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 …
って感じで処理の実行順が異なってくると思うんだけど…
中途半端に切り取ったコードじゃ何も言えん
どっちのパフォーマンスが～って言ってる時点で絶対気にしなくていいレベル
としたときに text の中身をクリップボードに入れるにはどうすればいいんでしょうか？
ttp://https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard ココ見ると
入力フォームがあることが前提になってますが
入力フォームなしでクリップボードにコピーすることはきょかされてないんでしょうか？
フォームでなくてもいいけどDOMツリー内にあって選択状態にしないとだめ
display:none等で隠してしまうと選択状態にはならないので、画面外やサイズ0で見えないように要素作るのがセオリー
document.execCommand("copy")は大抵のブラウザで使えますよ
ファイルを読み込みながら実行する書き方だと
関数の中で関数を呼び出すには、入れ子の方を上に書く必要があり
自分で読み返したときに、どういった順番かわかりづらいことがあります。
DOMContentLoaded で読み込み完了後に実行する書き方であれば
上から順を追って書いていっても問題ないので、
自分としては読み返しやすいと感じています。
どちらが望ましいとかってあるのでしょうか？
DOM読み込み完了時に実行で良いならそれ使えば良いし、他の時機で実行するならそれに合わせた実装をしないと
そもそも関数定義と関数呼び出しは読んだ瞬間に判別できるようになった方が良い
その上で分かりやすい変数名付けて、大きすぎる関数は作らずに小分けした関数を入れ子にすれば、読む時に都合の良い順番なんて必要ない
全ファイルを読み込み完了してから、実行するか
一つずつファイルを読み込み完了してから、実行するか
当然、後者の方が実行速度が向上する
実行速度は一気に実行の方が速いでしょ
逐次実行にしてはやくなるのは開始時機の早さと、それで見込める終わる時機の早さ
まず第一にオフザメインスレッド
どうしてもメインスレッドで行わないといけない処理は
その優先度に基づいて小分けにして実行する
それだと、ダウンロード中は待機しか出来ないんだが
そうだよ
でもスクリプトの実行速度が上がる訳じゃないから初心者が混乱しないように言ったんだ
プチフリがあるよりちゃんと読み込み中の表現した中断の方がストレスないし
var a = document.createElement(wmp)
a.setAttribute('type', 'video/x-msvideo')
document.body.appendChild(a)
wmp.FileName=file_name
wmp.play()
音声は聞こえるんだけれど、映像がどこにも見えなくてわけわからんです。
スタイルいじってもダメなので、何か他に抜けているところがあるんでしょうか。
待機時間が長い方を「速い」と主張するの方が誤解の元だと思うが
速度／時機、速い／早い、をわざわざ対比して書いてるのに誤解の元になるって……
いきなり話に小学生の読み手が入ってくるとか想定してる？
少なくとも流れ見てたら誤解よりもむしろ理解に役立つ書き方でしょ
ファイルの読み込みは遅いに決まってるでしょ
何のために非同期処理になっていると思っているんだ？
は「ダウンロード処理」「ダウンロード後の処理」を合算した「全体の実行速度」の話をしているのに、後者のみに着目したコメントをされても困るよ
処理の単位を勝手に限定しないでくれ
(そもそも、初心者だと「実行速度=スクリプトの実行速度」と読んでダウンロード処理を除外するものなのか？)
一般にIO処理は遅いから、少しでも早く終わるように効率化した方が良いに決まってる
あえて、完了時刻を遅らせる理由があるなら、その理由を添えて質問者に回答してやってくれ
それこそ元レスは前者にも後者にも限ってないし、違い全般を聞くような書き方をしてた
限定的な回答があったからもう一方の限定的な情報付け足した訳で、それに困惑する必要なんてない
そもそも初心者だと～じゃなくて、初学者だからこそ手探り段階の可能性が大いにあるし、「できるだけ思い込みを植え付けない広い情報」を挙げた方が良いし他の誰も困らないでしょ
一般にどっちが良いかとか一言も言ってないし、推しを否定した事もない
それでもJavaScript実行中はレンダリングやら他の多くの処理が止まるから定期的に確実な切れ目を作るのは用途が無い訳じゃないし
もし不満があるなら教えて欲しい
触れられてない情報を付け足す事に誰が困るっていうの？違うなら噛まないで頂戴
読み込み完了後だと開始時機は遅くなるけど処理ははやい。
読み込みながらの場合は開始時機がはやく終了時機もはやくなる見込みがある。
そして、ケースバイケースで使い分けるといった感じでよろしいでしょうか？
関数の書き順なのですが、入れ子となっている場合、慣れてくると
下記の下の方でも問題なく読めるものなのでしょうか？
ご飯を炊く
おかずを作る
配膳する
食べる
↓
食べる
配膳する
おかずを作る
ご飯を炊く
>377とは前提条件が違うだけでどちらも間違ってはいない
逐次処理の方が「ダウンロード処理 + ダウンロード後の処理」の実行速度が速い
一括処理の方が「ダウンロード後の処理」の実行処理が速い
だが、の「実行速度は一気に実行の方が速いでしょ」はその前提を伏せて、一方的に377を間違いと断言しているので、新たな誤解の種を生んでいる
初心者は前提の違いに気がつかず、強い否定があれば「そうかもしれない」と思ってしまう
誤解をなくすには、お互いの主張が正しくなるよう、前提付きで2つの意見を列挙するのがベスト
補足するのは良いが、表現が適切ではなかった
平たく言えばそうなるが……HTML側のダウンロードはJavaScriptの実行速度ではないからそこが少し不明瞭になるのも、それはそれでよろしくないのでは
というか「実行速度は～」って表現は直後に、「JS処理を開始するタイミングが早まって全体の処理が終了するタイミングが早く見込める」という表現を推してる
前提を伏せたんじゃなく、前提と結果を噛み砕いたと思う
「javascript activexobject mediaplayer」で検索！
そうだね
特性が違うから使い分けるのもそうだし、内容によって分けて併用するのも十分あり
元レス見ると、関数の書き順ってのは関数定義の順番だよね？
そのご飯の例の場合は入れ子にはしないだろうから、そもそもその順番で書く意味がないと思う……だから慣れてても読み辛いだろうね
入れ子、例えば「炊き出しする・配膳する・献立を料理する・お米を炊く・おかずを作る・お米を盛る・おかずを盛る」の場合
お米を炊く = (){} //定義
おかずを作る = (){} //定義
献立を料理する = (){お米を炊く(); おかずを作る();} //定義
お米を盛る = (){} //定義
おかずを盛る = (){} //定義
配膳する = (){お米を盛る(); おかずを盛る();} //定義
炊き出しする = (){献立を料理する(); 配膳する();} //定義
炊き出しする(); //呼び出し
みたいに書いても、慣れてると読みやすいと思う
実際には「炊き出し」→「献立」→「米炊く」→「おかず作る」→⋯⋯→「おかずを盛る」って順番で呼び出されるけどね
炊き出し
┣ 献立作る
┃ ┣ 米炊く
┃ ┗ おかず作る
┗ 配膳する
┣ 米盛る
┗ おかず盛る
例えば一昔前はプリロードがプリレンダがベストとされてたけど、セキュリティ上の懸念がある事がわかって今じゃブラウザ皆力入れるの辞めちゃったし
そういうのを追って先を読む力が最も重要
すっごいわかりやすく説明してくださり、ありがとうございます。
定義した関数を処理項目？ごとにまとめて呼び出すと読みやすいですね！
こちらを参考にして、組みなおしてみます。
正解が見えず手が止まってしまってましたので、本当に助かりました。
機能が過剰で煩雑と思うのであればstd:kv-storage使えばいい
の一行目は余計だったと思う
初めのうちは処理を書き連ねたり1つの関数が大きくなったりなりがちだよね
でも今後もっと大きいプログラム書いていくと、それじゃどんどん肥大化して読み辛くなっちゃう
関数はどんどん部品に小分けしていくと良いから少しずつ慣れていこ
1行目無いと2行目の内容が1つ前のレスと競合して意味分からんレスになるぞ
1行目が前提無視の誤解の元だからね
〉 「実行速度は～」って表現は直後に、「JS処理を開始するタイミングが早まって全体の処理が終了するタイミングが早く見込める」という表現を推してる
前提無視じゃなくて前提を明確に区別したと思うんだけど……
対で全体になる前提の、片方だけ抜き取っちゃったらもう片方の前提が内包されないのは当たり前
そうじゃなくて、同じレスの中には全体に言及してる部分があるんだから併読するべきじゃ？
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も問題ない環境になってるが、どうやって構築したのか分からん。
ブログにでも書いておくんだった。
ま、検索したら出てくるやろ。
JSをよく知らないみたいだけど、
イベントドリブンだから始まりと終わりは明確とは限らないんだよ
あやふや過ぎ、適当な否定なんてするんじゃないですよ
イベント駆動なのも記述したもの全てが漏れなく実行される時機が明確じゃないのも知ってるから、そのあやふやな指摘さえ間違い
そしてDOM読み込み以外のイベントで呼び出されるコールバックは今回の話には関係ない
複数のレスで想定されてるレンダリングブロックのような差異に影響しないんだから
むしろ本当に今回の話題の状況についてJSを理解できてないのはあなたじゃ？
文脈を読まなくても今回の話題は（DOM読み込み類を除いて）イベントハンドラは関係ないと判るはず
自分の非は素直に認めたほうが印象いいよ
これでもう貴方の話は誰も信頼できなくなった
その後の反論は見苦しいとしか思わない
後付の言い訳ばかり
本筋じゃない話を後からされたんだから後付けになるのは当然では？
その方向性なら後付けで元の方針を変えた時は叩くべきだけど、今回は当初から主張変えてない
反論じゃなくて一部の表現を否定してる
完全に同意しない意見は漏れなく全否定の反論だ、ってのは違うしそんなつもりもない
勘違いしてるからはっきりさせる
全体を否定する意見じゃなく、むしろその主張に従ってますよって方向性
の"結論・本筋の是非に影響しない"、「前提を無視して」という表現のみを否定してる
正反対ではない意見なら、対立だけじゃなくて共存してる可能性も気に留めてもらえたら良いなとか思う
意固地になって軌道修正しなくとも
そうだねで話は終わるんだよ
そんなつもりはないでは済まないのが現代の社会
受けてファーストだからよく覚えとき
そうだね、よく思えとくよ
ただネット社会の書き込みでは
行間読んでそこに書いてる以上の先読みをするのも適切な事じゃない
ネット社会でどのような発言や対応が炎上して
どのような立ち振舞がうまくいくかは
先人の例から分かってるでしょ
君が自分の好き放題行動するのは勝手だけど
それで最善の結果が帰ってくると思ってるのならお花畑
何かを作れ
自分のPC に、VSCode, Node.js を入れる
炎上しないで話をするのが目的のスレじゃない
だからあのレスもそんな目的のレスじゃない
初めから言ってるけど、右も左も分からないような初心者であっても、偏った情報を背負い込むことにならないようにという目的。まあ釣り合いをとっただけ
だから何故「噛みつかれたくないなら当たり障りのないレスを心掛けろ」って方向の説教をされてるのか疑問だし、それで非難される義理もない
当たり障りのないレスを心掛けるのは他者への最低限のマナーなのにね
上手く会話する気がないのならチラ裏にでも書いてろってね
localStorageならコピペでも簡単にバックアップ取れるけど
IDBはそれができんし
構造化データJSONで入れても全体ロードしてパースだろ
ttp://http://chasen.org/~taku/software/TinySegmenter/ ↑を見つけたけどこれだと分けるだけで 読み がないのでちょっとなりないかなぁと
そのデータは10MB以上あるが
それをクライアントにダウンロードさせるのか？
ちゃんとキャッシュするっていう心づかいさえ守れば
家帰って見つかったら貼っとく
ttp://https://github.com/takuyaa/kuromoji.js/blob/master/README.md ためしにやったらシンタックスエラーでた・・
記憶違い
ロード後とスクロールをイベントとして利用する場合
スクロールをしてからにリロードをすると、ロードとスクロールの
イベントが2重で発火してしまっています。
そこで、ページトップとページの途中を判別したいのですが
何かヨサゲな方法はありますか？
「javascript scroll 位置」で検索！
選択状態を変えるとchangeイベントが二回発生するようで原因がわからない
なんで?
<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内で宣言するようにしたいと思っています。
①forEach内で宣言
test..forEach(function(value, index, array) {
var func() {...};
func();
}
②
var func() {...};
test..forEach(function(value, index, array) {
func();
}
すみません。追記です。
forEach内での関数のvar宣言をした場合配列の数だけ繰り返し宣言されてしまうが
呼び出しであれば、宣言は1回と考えていいのでしょうか？
また、変数や配列の場合forEach内で宣言させないことで、多少なりとも速度に影響はでるのでしょうか？
1. と書いても、コンパイラの最適化で、2. ように展開してくれないのか？
さすがに何回も、関数宣言が実行されたりしないだろ。
無駄だから、最適化するだろ
Windows10 で、Edge, Chrome で実行したが、正常に、1回ずつ表示される！
何度も宣言しない代わりに参照時に何度も外のスコープを見に行く手間が発生するでしょ
だから無闇にそういうことを考えることが無駄
ESの仕様書をスラスラ読めるようになってから考えたら良い
コンパイラなるものがあって最適化されるんですね！！
ググったのですが、難しくて理解できなそうでした
外のスコープを見に行く方が、何度も宣言するよりも処理に時間が掛かるのでしょうか？
であれば、内々で処理を行うのがベターなんですね。
なんと。。。
構成が結構変わってくるので、職場ではこっちが多数みたいのがあれば
ぜひ教えてくださいませ。
ここで誰かがこっちの方が良いと言えば一生それに従うのか？
そういう言語もあるがJSでは言語としてこっちのスタイルが標準的という決めごとはない
JSは壮年期に差し掛かっているかもしれないがまだまだいくらでも成長する言語だ
流行は勿論気にし続けないといけないが、それと同時に自由に常に自分で模索し続けて
自分なりの様々な感覚を養っていくことがWebやJSにおいては重要
それにどっちが自然かなんて全体的な様子で変わる
どちらかというと逆でしょ
普通はインライン化されて、関数の中身がforEach内に展開されて
さらにforEach内全体で最適化がかかる
でもそこまで最適化されることは実際には少ない
最近のエンジンはインタプリタ強化に回帰していて
省メモリとかオーバーヘッド削減に力を入れている
自分とこの会社では、自分の周りは冗長な記述が多く参考にはならず、
違う部署の人はレベル違いで読み解けずといった感じでして。
今の主流を知りたいと思っています。
ブラウザによっても逆転するから一概に言えない
主流なんて無い
極論を考えれば全部グローバルに宣言を出すのも馬鹿らしいし、
最小限になるようできるだけ細かく多くのスコープを区切るのも馬鹿らしい
どちらにすべきかではなくて、バランスを取ってその時その時で全体的に自然に書けとしか言えん
比較演算子で定数をどちらに置くべきかとか、拘るのが馬鹿らしい問題というのは数多くある
そんなことにいちいち惑わされる暇があったら別のところに時間を使え
極論についてはおっしゃる通りですね。
ESの仕様を理解はできていませんがバランスを見つつ改善を続けていきます。
関数やら変数の宣言って、最初の読み込み時にエンジンが把握するためのもので、
呼び出し時に宣言されるってことではないですよね？
それだとスクロールイベントで宣言した場合、毎回宣言されて大変ですよね？
不親切だな
無数にある環境・ブラウザの組み合わせを、考えても無駄！
例えば「Effective Ruby、2015」の項目47 では、
ループ内で、文字列リテラルを使うと、
文字列が生成して、すぐに破棄されるから無駄なので、ループ外に出す
次に、Ruby 2.1 では、文字列リテラル.freeze で、
文字列は、1回しか作られないから、ループ内でも大丈夫
次に、Ruby 2.3 では、スクリプトファイルの1行目に、
# frozen_string_literal: true
と書くと、すべての文字列リテラルは、immutable になる
このように最適化は、ドンドン変わっていく！
宣言文というのは、関数コンテキスト生成時と、コンテキスト実行開始（スコープ到達）時、宣言文到達時にそれぞれ働きがある
そういうのどうやって勉強すりゃいいの？
es仕様直接読む頭ないから噛み砕いて説明してくれる本がほしい
その大部分がa is b , b is cで積み重ねだから
読むために必要な能力って言ったら追っかけ力だけで
それは読んでれば勝手に身につく
計ってみても誤差で判別がつきませんでした
難しそうですね
読み込んだ後は宣言なしと一緒とかだと理解できたのですがｗ
ちょろっと計測しても誤差にしかならないのなら、いっそスコープ狭めた方が
読み手には優しいですよね。
無理してネストを浅くして、気にしないといけない変数が大量にあるよりも。
馬鹿な自分でもわかる方がいいですし。
実行速度にシビアな場面で初めて優先順位が変わる
varはブロックに入れてもスコープは狭くならない
に留めるのがいいかも
宣言文というものはスコープに変数を作らないといけない
スコープが作られるのは宣言文より前のステップだ
だから実際宣言文に達する前にスコープを作る段階で働く
ステップが宣言文に達したらまた別の働きをする
他の多くの構文にもこのようにRuntimeな働きとStaticな働きと言うものがある
とりあえずletにしとこ、程度なんだけど
constにすると大きく違うシーンってどんなのがありますん？
自分じゃない人がメンテするときに
不用意に上書きされないってのはいいとは思うんですが
基本は、とりあえずletにしとこうではなく、とりあえずconstにしとこうだよ
letにしないとエラーが出るとこ以外はすべてconstにするんだよ
基本は、等価判定は可能な限りObject.isを使わなければならない
基本は、可能な限りaltJSで書かなければならない
これ見るとJSはアホすぎて滅ぼしたほうがいいレベルだな
現実には生き残り続けとるが
おおらかに問題を飲み込むコーディングができない人にはJSは難しい
forEachの第三引数で渡せば良い
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 知りませんでした。
ありがどうございます。
この文なんかおかしい。
いやletはブロックスコープで、関数直下に書くと関数スコープと一致するからそれはいいんだけどvarは関数スコープだから「letで宣言してスコープを関数内に留めるのがいいかも」って言及はなんか違う。
だってvarで書いても関数スコープなんだもん。
letの使用を推奨するのはいいんだけどその理由の説明が間違ってる。
あ～確かに
関数内でvarで宣言してもスコープは関数内に留まるね
勘違いしてたっぽい
forEachの第一引数がcallbackで第二引数がthisArgとあるが第三引数なんて出てないが。
その辺の理解が浅いと転職できないですか。
Uncaught SyntaxError: Unexpected identifier
babel先生のお世話になってみるのはいかが？
むしろスコープや定数やクラスシステムを振る舞いから表現まで気にして
JSのバックグラウンドにも詳しくなってるはずだから
それらの構文を扱うのに経験なんて必要なく知って数日で馴染めるでしょ
× 第三引数
○ 第二引数
vivaldiだと落ちます
おそらく処理時間が長すぎるとタイムアウトを起こすようになってるんじゃないかと思いますが
ブラウザによってタイムアウトのメカニズムがあったりなかったりすると困りますよね？
処理時間が長くなる場合はsetTimeoutなどを使ってはじめから処理を細切れにしておくべきなのでしょうか？
そういう話じゃないんだろか
ありがとうございます
確かにメモリの問題だったようです
巨大な文字列を生成するのをやめたら動くようになりました
これがデフォオンになったらいよいよjQueryとプラグインから卒業できるわ
jQueryは自分で実装するのが手間だから使うものだよ。
プラグインのためじゃない。普段コードを書かない人なのかな？
どのタイミングで書くかで変わったりする？
重たいしょりが思いつかなくて計測しても違いがわかりません
下の奴です
e.preventDefault();
jQueryと違ってイベント発火直後がいいのかな？
jQueryの場合でもページのなるべく最初の方で
$(document).on('click, 'A', ～
みたいにするってわかってるか？
$(function() {
この中に書いたりしないぞ
})
documentはJavaScriptが読み込まれるタイミングでは必ずあるので
DOMの読み込み完了を待つ必要はないんだよ。
だから$(document) にイベントを割り当てる場合、
ページの最初でやって問題ない。
その前提の話をしてるか？
当然、バブリング、キャプチャリングフェーズのどこで発動するかによって、タイミングが異なる
だが、e.preventDefaultでイベントハンドラ実行を停止させる使い方は必要なプログラムまで停止させるリスクがあるのでやらない
フォームパリデーションでsubmit抑止など、デフォルトアクションを停止しなければならない時ぐらいだが、それで迷うことはあるまい
んなもん、セレクタで絞り込むだけやん
$(document).on('click, function(e) {
e.preventDefault();
});
で全部元の処理が無効になるが、これを特定のクラスが
ついたものにするなら
$(document).on('click, '.klass', function(e) {
こうするだけ。
たったこれだけが面倒だなんて誰も思わんだろ
非同期処理しなければreturn前のどこに書いても一緒
当然非同期処理内やawaitより後はだめ
例外や考慮すべき事柄が多い
高度な構造はそもそもjQueryで扱うのに適さない
jQueryは適当にざっくり処理するためのもの
trueかfalseかで、event.preventDefault()の可能性の為に規定の処理を待機するかが決定されるってことはそういうことなんだなと
このようにします。
宣言が繰り返されることはありません。
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です。
細々したことに悩む馬鹿らしさに気がついたほうが良い
何いってるのこの人
システムで使ってるの？
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)) + 定数}です。`);
};
})());
ここは実際に困ってる問題を解決するスレであって
心配性構ってちゃんの遊び場ではないから
どっちも同じですか？
リサイズイベントが走りませんでした。
ロードの際に全部読み込むので、リサイズイベントは発火するものだと
考えていたのですが、実際は読み込むときも条件次第で到達できなければ
イベント登録されないということなのでしょうか。
var test = function() {
if (...) {
return;
}
window.addEventListener('resize', function() {
...
});
};
よくよく考えたら当たり前っぽい気がしてきました。
冷静に考えるとイベントリスナだけ特別ってなわけないですもんね。
イベントリスナまでたどり着けてはじめて登録されるってことなんですね。
上手くいかない箇所を探していたところ、まさかのまさかだったので
勢いで質問してしまいました。
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になりました)
君は君のままでいい
ttp://https://eng-entrance.com/java-javascript 日本語が分からないから5chなんかに来るんだろうが
自分が書いているプログラミング言語が何なのかも把握していないgomi
プログラム板のJava スレへ書き込んでください
Java・JavaScript は、異なる言語です！
所作について質問です。
load・resize・scroll などのイベントリスナ内で、それぞれ同じ変数を用いる場合、
親スコープで変数を宣言して、それぞれのイベントリスナ内では値を格納するだけなのか、
それぞれのイベントリスナで変数を宣言をしつつ値を格納するべきなのか、
どちらが普通なのでしょうか？
イベントリスナ内で呼び出した関数の返り値を代入する変数を想定しています。
変数名は一緒です。
よろしくお願いします。
コードかけや
JavaScriptは言語で書き方や構造を縛るような作りにはなっていないし
そう言ったことを主張するような中心的なコミュニティも存在しない
つまり「普通」などない
var t = document.getElementById("test")
t.addEventListener("scroll",function(e){e.preventDefault();e.stopPropagation(); console.log("aa")},{passive:false}
↑でボックス上でスクロールしたらボックス内の数字をかえられるようにしたいのだが
テストで書いた↑のコードだと、コンソールにログもでないし、普通にスクロールもされてしまう。
なんで?
ここに居る数人に聞くよりも１００のコードを読み書きして
自分で研究した方がよっぽど良い結果を得られるとは思わないか？
所定のボタンをおしたら順次移動(Ctrl+Fみたいなの)
みたいなのってJSでどうやればできる?
よっぽどでかいデータを大量に出し入れするんじゃなけりゃ
そんなの気にしないでいい
失礼しました。
各イベント内で同じ関数を実行し、その返り値として真偽値を受け取りたいのですが
値を代入する変数をどのように管理するかで悩んでいます。
①イベントの親スコープで宣言する
②各イベント内で宣言する
変数のスコープを狭めるには後者だと思うのですが、同じ名前の変数を何度も宣言する
記述を今のところ見たことがないため質問しました。
↓は①の例です。
var test = function() {
var returnValue;
var commonFunc = function(){...};
window.addEventListener('resize', function() {
returnValue = commonFunc();
...
});
window.addEventListener('scroll', function() {
returnValue = commonFunc();
...
});
};
状態変数をはじめて知りましたので調べてみます。
普通と言いますか、現役の人達はだいたいがこう書いてるからこうしとけ的なのが知りたいです。
varは使うな。constを使え。letは甘え
現役の人はだいたいjQueryを使ってる。
関数内だけで完結できる変数なら中で宣言しとけ。わざわざ外で宣言して同じ変数使い回してたらバグの温床になりかねない
変数の名前を全て管理する自信があるなら何やったって良い
ちなみに見たことが無いのは職場環境の問題
①の書き方で良い
今回の場合、returnValueはcommonFuncに関係しているから、
commonFuncを外に出す以上、returnValueも外に出すのは十分に自然で
ニュアンス的に意味のある行為なのでその細かいセンスは自信を持って良い
各選択肢の先をportalタグで持っておいて、
ある程度portalタグ内を読み勧めたら完全に遷移して後戻り出来なくしたいのですが、
portalが切り替わるエフェクトモーションの挙動というかそのあたりの調整ってJSでどこまでできるのでしょうか？
いやその前のファイル読んで
JSON文字列にするところが知りたいです
const response = await fetch(url);
const json = await response.json();
ある程度古い環境にも対応させるならXMLHttpRequestで
fetchって同じディレクトリにある.jsonファイルも開けます？
そんなに人と話したいのか？
普通に、上下矢印キーで、数字が変わる！
preventDefault, stopPropagation の意味を勘違いしているのでは？
介入しようという時点で間違っている
スクロールってもしかして入力欄上のマウスホイール操作の事か？
scrollじゃなくてwheelイベントやで
まじか
調べるのでちょとまて
ttp://https://jsfiddle.net/x9brq8e0/ jQuery で作った
span タグのクラスの付け外しで作ったけど、
<br> を使っているから、検索ワードに、これらが入るとバグる。
色々な文字実体参照などでもバグりそう
p タグの中には、他のタグが無い方が安全
これは、解決は難しい。無理
おお、できた!
サンクス!
どゆこと?
Webはスマートウォッチから冷蔵庫まで参照するもので
input系のタグはそれぞれのデバイス・OSに合わせて
ブラウザが自身のポリシーを反映させたデザイン・UIを
練りに練って用意してるのだからうかつにそこに介入すべきではない
弁当を買ってきて調理し直してまた売りに出すようなもので
奇怪で高等テクニックだからオススメしない
値への介入ならReactなんかもしまくってるし、UIに応じた操作をと言うなら
inputタグだってwheelイベントだって抽象化されたものだし。
ホイールの向きにしたって見た目がテキストボックスなら上方向で数字が戻るのが自然だとしても
見た目がドラムホイールなら上方向で数字が進むのが自然かもしれない
現実的にもドラムホイールUIが採用されることがままあるスマホやタブレットに
マウスを接続することだって十分に考えられるがその程度のことだって判別や調整が困難
だからtype=numberという抽象度のかなり高いものを使いつつ
そこに介入しようというのは相当奇怪で高等なテクニックということができる
それならばまだ、抽象度の低い部品で１から好きな入力フォームを組み立てて
俺のサイトではブラウザ様が用意した心のこもった便利さは排除するので
俺が作った使いにくいUIを使えと押し付けるほうが良いと個人的には思う
クロム拡張なので問題ないかな
ttp://https://jsfiddle.net/Mottie/bLp69rt4/ どう言う場面でどういうデバイスからアクセスするとかは
その特質によってたいてい決まってくるもん
冷蔵庫とかスマートウォッチからアクセスがあることは統計的にはほぼ生じないなんてことも
そのアプリが持つ「文脈」を考えないと一概にはいえないとおもうが?
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
自分が言ってるのは、ブラウザの提供する部品を最大限活かしてありのまま使うのが５で、
FlashチックにCanvasと素朴なイベントで全部UIを０から作り直して提供するのが１としたとき、
CSSで少しカスタマイズするくらいの４は混乱がほぼないし、
カスタムエレメントやHoudiniを駆使して独自の世界を作り上げたら
それはウザいかもしれないが、ユーザーはウザいサイトだということが分かる
でも今やろうとしていることは一番中途半端な３であって上手く使えば良いとこどりができるが、
失敗すればブラウザが提供している良さは消えて、こちらが提供したいものも正しく発揮できない結果になるよ
ということ
10進数で小数点以下一桁で表せる数の多くを2進数では有限の桁数で表すことができない
0.1→1/16+1/32+1/256+...
正確に表せるのは
0.5→1/2
だけで他に狂ってないように見えるのはたまたま
Webじゃ当たり前に行われていることだろう。
もし冷蔵庫で動かす可能性が出てきたらそのとき考えればいいだけのこと。
冷蔵庫にwheelが無かったとしてもキー入力ができるならそれでいいわけだし、逆に
キー入力もできない環境も想定しろなんて言われたら input type="text" すら
考え直さなきゃならん。
そこを壊しかねない行動は控えるべきかどうかという話がされているのでは？
結局全部に１つずつ対応するのが良いと思ってるのは君しかいないと思うよ
0.1を2進数で正確にひょうげんできないってのは
なんとなくわかるけど
なんで 時々 端数が出てくるの?
２進数で正確に表現できていれば、つまり２進数で有限の桁数で表されていれば
１０進数でも有限の桁数で表すことができ、つまり表示が崩れない
だけど、その逆は成り立たないのは先に説明した通り
だから、１０進数表記を２進数の値にするときに最終桁で丸められて
誤差を含んでしまっているから、それを１０進数表記に直した時にその誤差が見える
それで済ませるためにデスクトップでモバイル向け画面見せられたらユーザーはたまらんな。
今現代この世に溢れてる物はオンリーワンのオーダーメイドのものの方が少ない
それでも十分によく万人向けに作られたものは多くの人にとって
誰に向けて作られたのか分からないエゴの塊よりも使い勝手は良い
それにお下の面倒まで見ないといけない赤ちゃんではないのだから
ユーザーはあるものをあるものなりに使う
むしろ、ほらお前はこういうのが良いんだろうと押し付けられる方が
ユーザーにとってはたまらないという場合だってある
０か１かでしか考えられない奴って
余すことなく完璧に対応するべきってこと?
違う気がする…
「介入すべきでない」とか言ってる人のこと？
いみわからないね
ビジネスでやるなら
メインのターゲット向けに開発するのが当然だがな
0.1%の例外をあいてに何をもとめるんだってはなしだな
どのあたりが0か1なの?
空のオブジェクトを宣言した後に、離れたとこでひっそりとプロパティを追加されると、
追加されたかわかり辛いです。
どうにかする方法はないでしょうか？
ここはビジネス板ではない
自らJSを学ぶ人のためのスレ
ビジネス相談や依頼はお金を払ってビジネスでやれ
最初ににプロパティをつくらせて
事後にプロパティついかさせないようにすればよくね?
ビジネスでやらないならもっと森羅万象のデバイスにに対応する必要がなくなるが?
趣味なんなら想定したデバイスだけに対応させればいいだけ
なんで趣味でやるのに森羅万象にたいおうさせるひつようあるのか?
言ってることが逆
誰も考慮しねーよバカってことですか？
アヘ顔認証でwheelイベント発動ってことですか？
するか普通?
冷蔵庫でおオナニーなんだよw
落ち着きなさい
森羅万象に対応させる必要があるなんて誰も言っていないでしょ
周りをよく見なさい
Proxyにしとけば追加されたとき分かる
じゃあ何をいってんの?
趣味なら事前にかってに想定したデバイスに対応したアプリでいいじゃん…
金もらってないならあれやこれや想定してないデバイスに対応させる必要あるんかいな。
言ってることがわからないね
君がどの発言に対してコメントしているのかわからないけど、
「０か１かでしか考えられない奴って」という消し忘れた書きかけの言葉に対してどういう意味かと言ってるのなら、
全てのデバイスに完全に対応することはそもそもWebでは不可能なことで、
だからと言って何も考えないで良いわけでもないというようなことを書こうとしてたときの名残
ちなみに自分はだけどではないからね
森羅万象に対応さろって印象うけるが
森羅万象に対応させないなら
切り捨てるものと切り捨てないものの線引きはどうするの?
冷蔵庫はなぜ切り捨てられなかったの?
よくわからん
もう回答いくつか出てるじゃん
それらを試してみてまだ何かあれば続きをやろうね
ひょっとしての話？それならよく全文や話の流れを見なよ
冷蔵庫にも対応しろって話では全く無いでしょ
例えばスマートウォッチや冷蔵庫という極端なデバイスであっても
最低限きちんと使える状態のUIをブラウザがinput要素には提供してくれてるのに
そのわざわざ各デバイス向けにカスタマイズされてるものに介入するのは高等テクニックだよと言ってるだけでしょ
それを取り繕おうとしているってところだろう。
まずIDでないのに全文のながれくむとかむりだから
全文の意味くみとってほしいならIDさらせよ
つぎに冷蔵庫に対応しろって話じゃないなら
何が言いたいの?
冷蔵庫で使わなないら
冷蔵庫の話を出す意味がわからない
せべきではない、っていってるが
それはやるなって話でしょ?
いみがわからない
つか冷蔵庫ってなによ?
いや、全文っていうのは１レス全文のことだよ
冷蔵庫ってのは今どきレシピを見るためにインターネットに繋がってWebViewをもった冷蔵庫も考えられるでしょ
っていうイメージだったけど、そこで混乱を招いたのなら謝る
何が言いたいのかって、input要素、それもnumberという
デバイス毎に独自のUIが提供されそうなものに介入するのは控えた方がいいよって話を
何人かから返信が来たから具体例を交えたり言い回しを変えつつずっとしてただけだよ？
冷蔵庫でレシピを見るあぷりって
限られてるでしょ
そういうアプリなら冷蔵庫に対応すればいいだけでしょ
なぜそれを前提にアプリ作るのかって話なー
つか冷蔵庫アプリってなんやねん…
特殊すぎるわw
いやだから少なくとも自分は冷蔵庫に対応するしないの話はしていないから
input要素って色んなデバイスに合わせてカスタマイズされてるっていう話での
「色んなデバイス」の１つの例として挙げてるだけでしょ？
むしろ、デバイスの特質やOSのスタイルに合うようにブラウザが良きに計らってくれてて
対応とかあまり気にしなくて良くしてくれてるのに、そこに介入するっていうのは高等テクニックだよ
っていう話であって、君の立場と自分の立場って近いと思うよ？
（DevToolでWatchしていると同じような箇所でnullになる、再現性はあるがnullにならないこともある）
その変数は一連の処理が終わったらnullを与えてGCを促し、再度処理を行う場合は改めて初期化して処理を開始する、という使い方をしています。
もしかしたら、nullを代入してGCを促したグローバル変数に対して実際にGCが行われる前に再度参照を与えた場合でも、GCが行われて強制的に破棄されてしまうのではないか、
と考えたのですが、こういった件に関してなにかご存じの型はいませんか？
また、メモリ節約のために上記のようなことをしているのですが、他に適切なやり方等あれば教えていただきたいです。
変数というのはSMIを除いて全てオブジェクトとして管理されている
変数はタイプ情報を参照し、文字列やArrayのような不定長の値そこから何段か経て中身が参照されている
中身が破棄されたり上書きされてもその構造上ObjectがNullに化けることはない
Buffer系やファイルへの参照などはその中身がネイティブによって捨てられたり別スレッドへ移譲が起きていつの間にか空になることがあるが
いずれにせよ変数の型が直接変わるようなことは起きない
だからそのいろんなデバイスの一つとして冷蔵庫出してるんでしょ?
いろんなデバイスってのってのは現実世界でかならずそんざいするわけで
そのいろんなデバイスにたいおうさせるひつようあるのかってはなしじゃないのかよ?
じゃあさきくけど
冷蔵庫はなんでだしたのよ?
例でなにをいいたかったの?
冷蔵庫に対応させる必要ないあぷりなんてとうぜんあるわけで
それが冷蔵庫だろうが ****だろうがいっしょだよw
例が下手すぎるんじゃないのか?
いつまで立ってもこれに対する回答ないんだが。
なんで?
回答ないってのは稀有な自称にも対応させろって意味にしか思えないんだが?
なんで冷蔵庫だしたの?
まずこれに答えて
さんも誰に答えて欲しいのかレスを降ってください
じゃあIDさらして…
やっぱり自分ですか？他所でやりましょ
お風呂入ってくるのでもっとスムーズに２人で会話できるような場を用意しておいてください
IDはさらないのか。。。
だめだな
ありがちなのは他の何かと名前がバッティングしてる、非同期でnull入れたあたりか
冷蔵庫がいったいなんなのかもわからない
正直よくわからんね
もうここから先はあなたと私の１：１のおしゃべりでしかありませんからね
場を汚すのが恥ずかしいので私はここで続ける気は起きません
もしも、私の例の挙げ方、説明の仕方が悪いというような指摘であれば、
それは全面的に受け入れて非を認めます
それ以外に内容について詳しく議論したいというのであれば、別の場を用意してくれませんか？
今日中に用意してくださればそちらに移行します
以上です
なんでココで鼻だめなの?
なんでIDを晒さないの?
冷蔵庫って何?
一切答える気はないの?
あなたが別の場所希望するならあなたがそれを容易すべきでは?
なぜココではだめなの?
???しかないよ
でなんでIDさらさないの?
他者の意見からにげてるだけでは?
あなたは既に私がしっかり返答したと思っていることについて幾つも突っ込んできているため
改めて問題を整理してじっくり腰を据えてあなたと邪魔の入らないところで面と向かって
何度も何度も長文でお話する必要があると判断したからです
私はもはや技術的な話だとは考えていません
これは私とあなたの意思疎通の問題でしかありません
私は新たな技術的な話をする気は毛頭ありません
それ以前の問題として、私が過去に書いた文章をあなたに伝えることができるのかという興味からの提案です
逃げていると捉えてもらっても結構ですし、その他私のことをどのように考えてもらっても構いませんが
私はここでこれ以上続ける気はなく、IDを出さないのもここではあなたに付き合いませんよという意思表示です
なんでかたくなにさげでくるの?
どうでもいいがメールアドレスおしえてよ
IDもさらさない自分で場ももうけない
なにがやりたいのかさっぱり
つかアンカぐらいつけようね?
なんでそれすらできないの?
それが場をよごしてんだよ…
ここは技術について語る場であってその点なんももんだいないとおもうjがねぇ
なんでここじゃだめなの?
つか冷蔵庫ってなにってのには絶高い答え内の?
IDでるでしょ?
あげなさい
自分の発言に責任持つのはここからだね
えすえいちあいえぬだぶりゅおーあーるけいあっとわいえいえいちおーおーどっとしーおーえむ
メールよろ
仕様としてIEEE754準拠してるだけだ。
js固有と言うわけでもない↓
ttp://http://0.30000000000000004.com/ 悟オジと思しき人のアドバイスって、解決の糸口を与えつつ
でも、その方法はよくないで、みたいなジェントルな指摘じゃなくて
悟りの境地から嫌味言うだけで役に立たないのよね。
何でこのスレ居るんだろ？
別に誰か一人が正解を用意する必要はないんじゃないか
だがなぜか、俺の回答を批判するだけで
自分は何も言わないやつがいる。
相手を気持ち悪がらせて楽しむストーカー男
htmlcss一通りできるようになったからjsかjqueryやろうかと思ったら今はvueかreactって勧められたからvueやろうかと
少しjs齧ってからやったほうがいいかな
HTML/CSSメインであればjQueryが一番
vueやreactはJavaScriptを使ってHTML/CSSを
生成するようなものだから作り方が全く違う。
ゲームとかアプリに近いものを作るためのもの。
DOMの基本までは齧った方が良いよ
vueが何やってるか分からんくなる
jQueryはDOM操作を要領よくザックバランにする場合に向いているのであって、使うにはあらゆる知識が少しずつ必要。
一方フレームワークはそれらを覆い隠してくれて、Webの知識に乏しくてもコンポーネントを組み合わせてつくりたいものが作れる。
jQueryはあくまで何かを作ってくれるものではなくて、作りたいものを作る方法がわかっている人が有効に使えるライブラリだから知識が欠けてる人に勧めるようなものではない。
の↓これに注目
> Webの知識に乏しくてもコンポーネントを組み合わせてつくりたいものが作れる。
Webの知識に乏しくてもって書いてあるでしょ？
これ「（他の言語でプログラミング経験があれば）Webの知識に乏しくても」という意味なんだよ
つまりね、フレームワークだと、HTML/CSSといったWebの知識は使わない。
デスクトップアプリ開発の知識が必要ということなんだよ
CSSと違いことからもよく分かると思うよ。
例えば、CSSで全てのリンクを赤くする場合、
a { color: red } と書く
これがjQueryだと
$("a").css({color: 'red'}) となる
> ゲームとか
はい嘘つき乙ｗ
って書いてるのを、ゲームだけ切り取るようなやつやで？
信用できるかな？
これをどうやってvueに組み込めばいいんでしょうか？
jQueryならサンプルがあったのですが・・・
ttp://https://creive.me/archives/10461/ そうだよなｗお前いつもウンコとかカレー食べてるもんなｗｗｗ
あとjqueryにしてもvueにしても、まずはプログラミングの基本文法と制御構造や簡単なアルゴリズムくらいは理解していたほうが良いし、それを生のjsで学んでから始めたほうがいいと思う。
Bootstrapは、jQuery を使っているし
Vue.js, React などは、仮想DOM とか、そのライフサイクル、
どこの時点で、状態が更新されるかなど、内容が難しい
仮想DOM上で状態を更新しても、実際のDOMは、まだ更新されていない。
そのタイミングのズレが、素人には解決できないバグとなる
jQueryなら、コードが実行された時に、実際のDOMが更新されるだけ。
普通のDOMアクセス
Bootstrap に、カルーセルは無いの？
メールはよおくれ
にげてんじゃねぇぞ
逃げてるだけっすか
おもしろい
屁理屈こねて逃げるあほ
メール待ってますよw
当然メールは全部晒すけど
約束守ろうねぇw
IDすら晒せないやつに発言けないよ
メールはよおくりなさい
お前が望んだ連絡法だろw
ttp://https://github.com/twbs/bootstrap/pull/23586 ttp://https://youtu.be/xsCHyCbQH7Q 言語仕様は同じでライブラリーだけ違うみたいな感じと思っていて合ってますか？
プロは「プログラミングができる」の大枠の中の
一つとして、JavaScriptや特定の言語を使ったことが
あるかないかでし考えてないので
特定の言語が使えると言う人＝初心者だからね
ajaxで送信すると日本語が文字化けします
encodeURIやってもencodeURIの文字列そのまま反映されてしまう
どうしたらいいですか
HTMLの仕様を破ってるオレオレサイトで問題が起こるのは仕方が無い
・送信フォームはshift_JIS
・ajaxで日本語をpostすると文字化けする
・ajaxで日本語をencodeURIで変換してからpostするとそのままの文字列
>一昔前からエンコードはUTF8
ほぅ・・そうなんですか
フォームから直接投稿すると問題なくイケるってことは
ajaxでやっても何かしら設定すればイケると安易に考えていたのですが
調べてみると「サーバー側の設定を云々」がいっぱい出てきてお手上げ状態です
Node.js は、Ruby のコピーだから、
先に、Ruby on Rails で、テスト/開発/デプロイの全工程を学んだ方が速い
まあ、どの言語でも、Railsが基本と思ってよい
サーバー構築運用が嫌なら、今時は、サーバーレスのAWS Lambda で、Ruby もある。
Software Design 12月号が、AWS Lambda の特集
Ruby なら、sjis/utf8 変換できる。
NKF モジュールも使える
JavaScript で、sjis/utf8 変換できないの？
漏れは、Web 系なら、Windows でも、utf8しか使わないけど
AjaxはUTF8で行われるのにサーバーでSJISでデコードしようとしてるんでしょ
ajax側でSJIS変換か何かすれば同じように成功する道理なのでは
のような連想配列があるとして、
[8:"ううう", 3: "いいい",1:"あああ"]
のように降順で並べ替えたいと思います。
sort()やreserve()だと思ったとおりにならないのですが、
どうすればいいのでしょうか？
０から順に列挙され、その後にプロパティが作られた順に列挙される
だからその例のプロパティを並び替えることはできない
どうしてもということであればMapを使って
new Map(Object.entries(x).reverse())と書ける
数字キー出ない場合でMapを使わない書き方は
Object.fromEntries(Object.entries(x).reverse())
XHRやfetchで文字列を渡した時にページの文字コードと関係なくUTF-8で送信するのは仕様
どうしてもクライアント側でやらないとだめならなんらかの文字コード変換ライブラリを使って変換するしかないかな
だから勉強しろ
[ { num: 1, str: "a" },
{ num: 5, str: "b" },
{ num: 10, str: "c" } ]
こういうように、property 名が決まっている形なら、
「jquery sort object array by property」で検索できるけど、
その例では、property名が一々、変わる訳でしょ？
設計がおかしい
詳しくありがとうございます
それこそライブラリーだけ違うみたいな感じと思っていて問題ない
MIME type (“text/html”) mismatchでCross-Originのエラーがでたのですが解決方法をおしえてください
（直接スクリプト全文コピペは重いので諦めました）
そういう使い方をして欲しくないからgithubは対応していません。
raw.githubusercontent.comを
rawgithubusercontent.comにしたらできた
いえ、githubが公式回答してました
どこかおすすめのとこないでしょうか
httpだとブラウザ許可するのも面倒なのでhttpsで
かつ直接読み込みOKなホスティングサイトってないのでしょうか
有料でもしょうがないかなと思ってます
ありがとうございます さっそくやってみます
よくそんな中国人所有の怪しいドメインなんか使う気になれるな
> いえ、githubが公式回答してました
嘘つくな。githubは公式にそれを禁止したと書いてる
ttp://https://github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/ github使えよ
IP毎に回数制限があるから、乱用はできないし、皆が使いだしたら不味いけど
もしくはリソース配布pagesを作って隠しiframeでやり取りするか
ウェブアプリ1つつくって公開したレベル
さわっただけでJSできますとかさぎだから
こういうやつ
JSできると言うときは、スコープチェーンやプロトタイプチェーンを理解してるくらいでしょ
ひたすら仕様を勉強しました的な意味になるのかな
ばかかw
具体的にやってきたことを色々話せるのならそれに越したことはないけど
もし面接で私は〇〇のフレームワークを使った経験がありますだとか、
〇〇を作ってきましたではなく、ただ「JSできます！」ってアピールしてくる人が来たら
俺はまず仕様をある程度理解してるかどうかを聞くよ
それでプロトタイプチェーンやスコープチェーンを図に書いて説明できるくらいであれば
確かにただ「JSできます」と言えるだけの能力あるね。基礎能力に期待できるねってことになるけど
そうでなけでば、本当にJSとはどういうものか分かってますか？と聞かないといけなくなるね
JavaScript使えます！ってアピールする人は初心者なんだから
初心者は初心者らしく入門書読んだ程度で
JavaScript使えます！ってアピールしろって。
お前はウェブアセンブリとか分かるのか？上から目線はオワコンやで
君の気持ちは分かるし、一般的にはそういう理屈は分かるけれど、
俺にそういう質問は投げないでくれ
wasmはたまたま分かってしまっているから
asm.jsやNCが流行ってた頃からその系統は追っかけてて
分かってしまうどころかwatも趣味がてら直接書いてるから
watが書けても価値はほぼないが日本でwasmを分かってる上位100人には入ると思うよ
ちなみに上から目線云々に関しては分からないね
どのレベルなら言っていいか決めてくれと言われてるのだから、
上から目線気味の評価基準を語るのは仕方なくはないか？
ただ悪意は無い
でも何も作れない！
こういうやつ多すぎ
それを使って何かを作ることもまた可能だろう
知らずに作ることは出来ないのだから
知っているが活用しない人、知っているがまだ活用できない人を
批難するのはおかしいと思うけどな
何を作ったことがあるかだよw
作ったもの見れば何ができるかわかるし
とりあえず動くものを作るだけってのはそこまで難しい作業じゃないからな
Railsが、すべてのフレームワークの基礎だから。
CakePHP, Spring Boot も、Railsのコピーだろ
Rubyが出来れば、Node.js も出来る。
Node.jsは、Rubyのコピーだから
それと、サーバーレスのAWS Lambda で、Rubyでプログラミングできるかどうか聞く。
Rubyで出来れば、Node.jsでも出来る
どれかやっていればいい
ビジネスで大事なのは何を知っているかでもなく
何を作ったことがあるかでもなく
・こちらの意図を汲み取れる能力があるか
・嘘を付かず誠意があるか
が必要
こちらの指示だったり、依頼だったりを正しく汲み取って
出来ないことは正直に出来ないと言える人なら無能でも問題ない
今は、input.filesを回して、必要なやつだけをメモしておいて
var fd=new FormData('ダミーの<form>')に
fd.append('file',file) ←いるやつだけ追加
fdをajaxでPOST
みたいにしてます
これで「複数ファイルを追加したあと、一部のファイルだけキャンセルしてアップロード」
はできたのですが、なぜか同じファイルを２つずつ投稿してしまうのです・・
２重投稿については、自分のミスでした
単純に投稿しないようなロジックをスルーしていただけでした。
あとは、ダミーformを作って必要なfileデータをappendしてPOSTするしかないのか？
という部分です
思いつきでやっただけなので、普通に一部クリアできるならそっちのがいいかなと
1つのinputあたり1ファイルならvalue=""で消せる
multipleなやつをフィルタするなら新たなFormDataにappendしないとだめかな
ダミーのフォームに他に何もinputが無いならnew FormData()にフォームを渡す必要はないですよ
multipleなやつですね
＞new FormData()にフォームを渡す必要はないですよ
！
さっそくやってみたらできました
わざわざダミーのform作ってdocumentに追加して云々の工程がなくなってスッキリりました
ありがとうございます！
ttp://https://youtu.be/i8IVK80kQAY 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();
ttp://https://www.internetacademy.jp/ var hoge = scrollEventToggle(false)();
これでlocalStorageに保存したデータを
サイトの運営者は取得してサーバに送信とか技術的にできるの?
例えば5chサイトでうごくスクリプトでlocalStorageに入れたデータろ5ch運営者が取得することは可能なの?
いじられたくないデータはGM_getValue/GM_setValue(Greasemonkey4互換の場合はGM.getValue/GM.setValue)を使いましょう
localStorage.getItem("キー");
localStorage.removeItem("キー");
localStorage.clear();
たぶん、サイト側はサイト側が保存した、キーしか見ないだろ。
全部のデータなんて、取得しないだろ
5ch のコード内を「localStorage」で検索してみれば？
自己レス
>たぶん、サイト側はサイト側が保存した、キーしか見ないだろ。
>全部のデータなんて、取得しないだろ
仮にサイト側で、全部のデータを取得したとしても、
サイト側で処理するのは、サイト側が使ったキーだけだろ
それ以外のデータは、無視されるだけだろう
javascript で、自身が組み込まれているhtmlを文字列として取り込むことはできますか？
はい
要素にアクセスして
innerHTMLやouterHTMLで取得してください
CSS Selector/XPath で、a 要素内の画像のURL を取得する
(ただし、Ajax で非同期に、内容を作っているようなページでは、
Ruby, Selenium WebDriver で、ブラウザを操作しないといけないかも)
画像のURLから、curl, wget, Rubyなどで、ダウンロードする。
そして、そのまま保存する
画像は既に圧縮されているので、zip にしない。
2重に圧縮しないこと！
JavaScript なら、Node.js(サーバー)を含んだ、
Electron みたいなアプリでないと、ローカルPC にアクセスできない
おじいちゃん、病室抜け出しちゃダメでしょ
rubyキチガイは太古からあるアーカイブという概念を知らないのだろう。
ttp://https://github.com/imaya/zlib.js/ CRC32の計算式まで理解しろとは言わないからそこはコピペでいいとして、
あとは単純にバイトを並べるだけだから
これができるとどうしてもHTTPSが使えないときに
それなりに安全に情報の受け渡しができる。
ファイルダウンロードだけならjsから対応する必要がないけど
画面に情報を表示できる。
それよりも解凍の方が何倍も難しい
こういうURLがあった場合
abc→123、def→456、ghi→789
にそれぞれ置換したい時どうやんの？
これだと一箇所しか変更出来ないし
javascript:location.href=document.URL.replace('abc','123');
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace 関数を指定しろ
＞ab abc abcd がある時
自分で言ってるけど答えようあるじゃん
さらに言えば単にアルファベット順に対応した数値に置換したいわけではなく
汎用的に複数置換したい意味か？とも考えられるし
いくらでも答えようあるというかそれなりに頭回る人ならわかるでしょ
で、把握が間違っていたとしても何か問題なの？
回答は義務じゃない
URLのabc、def、ghiを同時に指定した文字に置換するのがやりたいのよ
置換したい個数分だけ反復するのが一番手っ取り早い
が書いてるけど「同時」ってのはあり得ないんだってば
単純にサンプルの結果が得たいだけなら工夫も何も要らないが
document.URL.replace('abc','123').replace('def','456').replace('ghi','789');
に書いてある
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 rstr = new RegExp(Object.keys(rep).join('|'), 'g');
"abc.com/def/ghi.html".replace(rstr , key =>rep[key]);
正規表現使えばいいじゃん
なんで、この口の悪い質問者は、無反応を貫いてんの？
＞無駄だから
否定されたと感じるか、それを恥ととるかどうかだけで
知的活動としては無駄ではないよね
全部掲示するなとは言わないし、質問内容にもよるが
質問しにくるレベルの質問者に、全部掲示するorできる能力があると思っている認識がおかしい
伝えようって気があるかないかの話
雑な質問には雑に対応するだけ
全部出したのか雑なのか
その線引きなんてだれにも判断できないだろ
現に729の本題は＞同時に
だったわけで、あとからわかったことだし
逆に最初からその本質を質問できることは、自己解決との撞着じゃないか
それを、ターンが無駄だから最初からやれってやはりおかしい
「おれが答えられるレベルの、きちんと正解が出せる、後出しでおれが恥をかかないよう、丁寧な質問を心がけろ」
と言っているようにしか思えない
関数自体を定義しているオブジェクトではないようなのですが…
呼び出し元依存
thisは0番目の引数だから何であるべきと決まっているわけではないが、
一般的にレシーバーであることが多くコールバック関数にも提起元関数コンテキストのレシーバーを受け継がせるのが一般的
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を呼んでいます
ざっくり質問で申し訳ないですが
よろしくお願いします
正解は同じものを提供しようと思わないこと
IEはモダンブラウザ用よりも幾らか劣る機能を提供すればいい
最悪、ChromeをDLしてねでもいい
それこそ常時TorとかJS無効にしてる人だっているということもあるし
IE中心のPCとモダンブラウザが動かしてるPCでは
期待能力値のアベレージも変わってくるから
無理くりIEに対応しようと思わないのが正解
パフォーマンス優先なら、トランスコンパイラは使わない
Polyfillのみ使用
トランスコンパイル後のコードを読めば分かるが、旧来の文法に変換したコードは効率が悪すぎる
ラムダ・アローなどで、this が異なるから、ややこしい。
だから、jQuery の$( this ) は、コールバックに渡ってきたインスタンスに、変更されている
漏れは、IE11 には対応しない。
Chrome, Edge のみにすれば？
Markdown のパーサーの機能を探すか、
HTML に変換して、jQuery.text( ) を使うか。
ただし、子孫要素の内容が連結されてしまうけど
ありがとう
そして残念
広告屋系だからIE拒否れないんですわ
だれかIE起動したらウィンドウズがぶっ壊れるウィルス作ればいいのに( ；∀；)
だから、Polyfillのみ実装を提案しているのだが
パフォーマンスと開発効率はトレードオフ
IE8時代ならまだしも、IE11ならマシだと思うな
全然違うブラウザに同じ物を提供しようとする方が
閲覧者に取っても迷惑だと教えて上げたほうがいい
家族で海に行くからと寝たきりのお爺ちゃんも引っ張っていって泳がせるか?ってこと
かと言って海に行くのを中止すると言うのも良くない。写真を見せて上げるくらいが丁度良いんだよ
usageだと
IEもchromeもご機嫌斜めでした
そもそも、なぜ問題を切り分けしようとしないんだ？
ttp://https://teratail.com/questions/101783 自己解決しました
正規表現でHTMLタグ指定して切り抜いたら求める結果になりました
それはじいちゃんに聞いたのか？
じいちゃんが一緒に行きたいと言ってるのに
お前は写真で我慢しろっていうのは、お前の価値観の押しつけだろ
おじいちゃんは泳ぐ方法も海水浴場へ行く方法も知りません
解決までの全ての手順を手取り足取り教えてあげなければなりません
ヒントを与えても、自分で考える力がないのです
質問者は要介護者とでも思った方が精神安定上よろしいでしょう
ここの質問者は全く考えようとしません
ウェブ制作業の人多いのかと思ってたけど
意外とそうでもないんだな
HTML/CSSスレの方に書いたので
それで試してから
マルチポストを詫びるために去勢してください
そしてアナ雪のエルサみたいでカッコいいし
おれelseが好きになりました！！
宜しくお願いします。
15年も2chに居続けて自ら学ぶという精神を大事にしてるのだから
JS仙人を目指してるJSオタクが多いでしょ
そうなると他人からあれこれ縛られて注文されるのは嫌いで
自分のペースで好きなものを好きなように作りたいから
俺みたいに自営業で幅広くやってる内の１つとして
Web制作があるって感じの人も多いんじゃない？
タイムトラッキング・・・ではなかったような気がする
ラップタイムだったかもしれない
そもそも単に”この区間のタイムスタンプ”って言ってたかもしれない
処理にどれだけ時間かかったか気になってconsole調べてたときどこかのサイトでみた記憶なんで曖昧
お騒がせしました
時間測定
スポーツ用語をプログラミングにしれっと持ち込む事に違和感を持てよ
用語の意味ぐらい調べろ
AとBの間もtimeだし、A自体もAとOの間だから同じくtime
それを測るってことはmeasure
時間測定はtime measurement
バグ
はい論破
runはもうプログラミング用語でしょ？
起源の話ではなくて新しく持ち込むことについて彼は言っているのだと思うが
大昔に彼のように「持ち込むんじゃねー」とか言ってたやつがいたかもしれないだけの話じゃん
お前の頭がバグってるのか
ただvuetは大型アップデートが控えてるみたいだし学習コストを割いてもよいのか不安なのだが大丈夫かな？
vueとreact以外には何ができる状態なん？
htmlとcssは初歩程度
プログラム経験はCとかC#をそこそこ
ざっくりさわった感じだと素のJSは凡ミスの多い自分には危うく感じたのでtypescriptはつかえたらよいなという印象
であればコストとか気にしてる段階ではないんでね？
他言語知ってるならわかると思うけど
フレームワークはそもそも
その言語には精通している前提で作られてるわけで
手っ取り早く物を作りたいのであればオーサリングツール使えば良いだけなのでは？
オーサリングツールでも拡張や編集はできるからちょっと知識があるくらいならそれも丸々役立てられるし
なんでvueやreactに興味を持つんだ？
DW「いやいやいやいや買い被り」
えっ
> なんでvueやreactに興味を持つんだ？
ウェブサイトには興味ないからでしょ？
作ろうとしてるのがアプリ。デスクトップアプリやスマホアプリの
ウェブ版を作ろうとしてるならvueやreactだよ
ウェブサイトを作るならHTML+CSS+jQueryになるけどね
Webベースであってもなくても１つ作れば全環境向けに書き出せるようなものって幾つもあるんだから
わざわざWebで別個に作る必要ないと言うか、Webで別個に作れるなら最初からPWAでやってもいいけど
vueやreactがPWA構築に最も適している部類のフレームワークかというと違うと思うよ
滅びたから言えないんだろｗ
ウェブサイトを作れるオーサリングツールなんて知らないなぁｗ
自分が無知であることを認めることから成長は始まる
そんなものないって意味だよ
実際お前も名前出せないじゃん
最近Qtをいろいろいじってみてる
こういうののこと？＞オーサリングツール
なにか良いことあるのん？
htmlもあんま詳しくないけどhtmlで外観作ってテンプレートで操作って凄い解りやすくて感動した
2020はIE廃棄元年になるといいなぁ
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;
};
a: 3,
b: 4,
};
obj['c'] = obj.a + obj.b;
有難うございます。
その辺の挙動が学べる様なサイトがあればお示しいただければ幸いです。
最後んとこ
c:this.a+this.b
セミコロンは}の前は文末じゃないから付けない
これで動かない？
それはそれで
aとbがundefinedなだけかと
サイ本
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}
更新したら＞//{a: 3, b: 4, c: 7}
はエラーでした すみません
まだその時点でobjは未定義だかんね
セミコロンの凡ミスがあるし単にabの計算結果をcに入れるテストをしたいだけの可能性大だが
a: 3,
b: 4,
get c() {
return this.a + this.b;
},
};
console.log(obj.c);
ブラウザはcookieをどう管理してるのでしょうか
例えば、クロスサイトを許可した自分のサイトS上で、
AサイトとBサイトへajaxしようとしたとき
BサイトにAサイトのcookie情報が流れる（逆然り）みたいなことはあるのでしょうか？
それはクロスオリジンかcorsと呼ぼう
でcorsの細かなお作法はググった方がわかりやすいのでよしなに
Access-Control-Allow-Credentials
というヘッダがあって、これがtrueになっていて
かつ、クライアント側でmode: cors、credentials: includeになっていれば
AドメインからBドメインにリクエストを送った時
Cookieも渡すことが出来るよ
なるほど
問答無用でcookie情報を送ってしまうのかと思っていました
AドメインとBドメインへ同時というか非同期でリクエストを送って
AドメインにはAドメイン用のcookieだけ（BはBだけ）、
みたいに送れるのだろうか？というのは気になりますが
cors調べてみます ありがとうございました
今後デフォルトで送れなくなる方向です
サーバーサイドでやるしかないですかね
1から100までの値がランダムで配列される時に、[2,3,10]とあると、
1がりんご
10はメロンにしたいんですが、
indexOf("1")>=0?"りんご"にすると
10もりんごになっちゃいます。
1は1
10は10で判定する方法はありますか？
,(カンマ)でsplitしてループで比較
> 1から100までの値がランダムで配列される時に
日本語を頑張れ
> indexOf("1")>=0?"りんご"にすると
> 10もりんごになっちゃいます。
Array#indexOfは10にマッチしない
indexOf("1")
"1" は、文字列じゃん
型が異なると、バグる
まじで？？？
デフォで送れないのは今でもそうだけど
csedentialはどうなっちゃうの？
corsでcookieが扱えなくなるのは俺も知らんけど
Ajaxするときのcredentialがなくなることはなかろう
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()なんたらのときも
_=> みたいに()が無いときも考慮するには
やはり全部の場合分けしかないのでしょうか？
JavaScript には無いけど、jQuery は、引数の型を調べて、場合分けして作っていたかも？
デフォルト値ありの引数か、配列・辞書渡しにするか。
オプションなどは、辞書で渡す
引数の数が変わる、可変引数もあるのか？
とりあえず引数名が何個で何かを判別するオプションを引数に入れて多重定義で一時的に対応することにしました
ただ引数名は限定的になりそうなので渡す関数の書式を制限して関数そのものの文字列から判別する方法もやろうと思います
ありがとうございました
関数の引数の定義上の文字列を知りたい
という要望が特殊すぎるような気が
ちなみにこの文字列を知って
どのような使い方を考えているのん？
例えばforEachするときやmapするとき
最初の引数はindexだったかそれともvalueだったか？忘れてしまうことが多かったので
callbackの記述が
function(index,value),function(index),function(value),function(value,index)だったら
その通りに勝手に解釈してもらいたいなぁと思ったのです
ワロタ
それは、JSでやるべきじゃないんじゃないかなあ
テキストエディタとかトランスパイラとか
JSコードになる以前の問題なんじゃないかと
i=>{}みたいに書けるけど、引数が２個の場合
(i,val)=>{}と書いて、valしか使わないのに・・
みたいな場面に出くわしてじゃあ最初から
val=>{}で書いたときはーーみたいな感じだったのです
物忘れ防止なら、JSDocでも書いておけ
重要なのは、「引数の数」の方だろ
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++の時代からあるよ ←アスペ
$([3,4,5]).each(function(){ console.log(this) });
$([3,4,5]).each(()=>{ console.log(this) });
第一引数つかえっていう話ではなく
jQueryとは関係ない。DOM APIもそうだからどうしようもない
外の環境のthis を、そこまでの文脈で、静的に確定させて取り込んでしまう
レシーバーのthis じゃない
ttp://https://jsfiddle.net/5nhoL081/ これをclass構文で表現するにはどうやればいいのでしょうか？
ttp://https://jsfiddle.net/kabn84sz/ やってはみたものの動くには動いたのですが
if(!f){return thisを外したらinitがnot functionだと言われたり
腑に落ちない点がいろいろとあります
jQuery関係ない
functionの中でthisはそもそもグローバル（かundefined）
メソッドやイベントリスナとして発火するときは
そのオブジェクトが束縛（バインド）される
アロー関数はイベントリスナになっても
束縛がないんだね
ピュアJSのものではなく
jQueryが独自にバインドしているものなのでご注意を
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できるみたいというのはわかりましたが
//これはなんかのテクニックなのでしょうか？？それとも普通はこんなことしないということでしょうか
自明だから
ちなみにこの循環にはどんな意味があるん？
＞falseのとき
!じゃなくて!!なので、つまり!!trueなのでtrueです
この循環とは？
例えばライブラリにするときjqueryなら$()で何回も使えますがそれは
$()で返ってくる中身がインスタンスで、かつinitが親のjqueryのprototypeを持っているからです
別に毎回newを宣言するスタイルなら必要ないと思いますが
無知って恐ろしいな
FugaがHogeを継承しちゃってるからループして
なんどもなんどもフガフガしちゃって
Maximum call stack size exceeded なわけじゃん？
なんでFugaはHogeを継承すんのかなって
Hogeのコンストラクタ関数で
new Fuga(this);
ってするだけじゃいかんかね？
なるほど、心をまっさらにして改めて考えたところ、すんなり解決しました
ttp://https://jsfiddle.net/4o3zq1v5/ initをextendsするのはなぜなのかはわかりませんがそのバージョン
ttp://https://jsfiddle.net/pmrhub5y/ そもそもjQueryのソースコードをみるとなぜわざわざinitを継承させているのか
はわかりませんが、つまり
ttp://https://jsfiddle.net/rb5czox2/ こういうふうにすればいいのに、と思うのですが・・
$文字で静的なユーティリティ関数を使えるからでしょうか（$=jQueryと置くとinitをnewしないといけないので）、わかりません
ttp://https://jsfiddle.net/ca98kq0z/ いやいや、空呼びすることになるんだから評価はfalselyでしょ
trueは最初だけじゃん何いってんの
空呼びとは？
いつ、空呼び？（具体的な行なりを）
最初だけ、とはいつ？（具体的な行なりを）
＞falseのとき
>873コードのどのタイミングで>falseのとき、なのか
＞通らない
とは何が？
いつ何がなんて考えたら分かるし
分からないのなら色々試して分かるように見つけるべきでしょ
あんだけの短いコードなんだから
それともnew演算子の挙動から丁寧に何レスも使って長大にド答えを書いてほしいの？
『>873コードの前半はエラーがでて、後半のコードでは、エラーが出ない、それはなぜか』
ということで、わかってることは
後半コードで『なぜかif()で一旦”間”をとると、エラーが出ない』
ということと『仮に、親の中で子をnewするとエラーがでるなら、後半コードでもif通ったあとにエラーがでるのでは？』
というところまでは、わかっています
その状態で873を質問をしたわけなので
>874で急にfalseの話が出て、ヒントとか以前の問題で
どういうこと？っていう状態なので確認のために>884を聞いたんです
ヒントが欲しいってことではないです
＞親のコンストラクタの中で、子をnewすると
デバッグの基本だよ
後半コードでもif通ったあとにエラーがでるのでは？
ならエラーが出てないのならifを通ってないのでは？
あれどうして通ってないんだっけってなるでしょ
いえ、、それでconsole.log(new Fuga());
が出力されたわけでして・・
の前に
console.log(f)
でしょ
if(!!f)の動作はfに依存してるのだから、fを調べないと始まらないでしょ
ええ、もちろんしてからの>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) }
違うっぽい？
まずの前半の方は
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になり、動かず終わる
もちろん機械が間違っていることもあるが、それは雰囲気ではなくて言い逃れできないくらいの
理詰めと証拠と再現性による証明ができて初めて主張できること
なるほど
＞空呼び
とは、FugaがnewされてHogeコンストラクタ関数が走る、
＞いつ、＞falseのとき
２回目以降のことだったんですね
（２回目以降のreturnでvar hogeに格納されない）
つまり疑問である
＞これはなんかのテクニックなのでしょうか？？
＞それとも普通はこんなことしないということでしょうか
は、回避処理をしたとしても普通は"空呼び"はやらない and 親のコンストラクタ内で子をnewしない（機会はない）
ということでしょうか
というのは、>870のライブラリの基礎部分をclass構文で表現してみたい
というのが本題で、kabn84szコードは$()すると毎回、return this（親？）”も”しているので
無駄や不自然さがあると、今回のやりとりで感じました
なのでのpmrhub5yコードがclass構文表現の一例でいいかなと
新たに出た疑問は
・『全部まとめて毎回親をnewする』4o3zq1v5コードと『毎回継承の子だけnewする』pmrhub5yコードの（コードの見た目以外の）違いや利点がわからない
・class表現にした場合、$文字で親の静的メソッドが使えない（$.eachじゃなくjQuery.eachとしないといけない？）
この辺りを調べてみたいと思います
ありがとうございました
だけどbreakはループの外にしかジャンプできない。
gotoの方が優れているように見えるが、
機能を制限したbreakの方が好まれてる。
何が言いたいかというと汎用的なものより
特定の（よく使われる）用途に制限したほうが
バグが少なくなり、コードはよりわかりやすくなる
それがclassでありシンタックスシュガーが優れていると言われる理由
だけど、機能自体はgotoの方が上なわけで
人が間違わないという前提にたてば、機能を制限したものよりも
より多くのことができる。つまりclassを使わないほうがより柔軟
固執すること無く適所に取捨すればよかったのですね
（同じ変数名で親の静的メソッドも実行できるというのはやはり魅力なのでclass表記は向いていない、のかもしれない）
あとプログラミング言語界も、文書でいうところの”ですます”調・”だである”調は揃える、
みたいなことは気にしたほうがいいのかどうかは気になります
見た目と構造化効率のために使われている
コンストラクタ関数が発火ｗｗｗｗｗ
>親のコンストラクタ内で、子をnewしない
こんな事をする香具師は、いないw
逆に、子のコンストラクタ内で、
super( ) みたいに、親のコンストラクタを呼び出す言語は、あるかも
一般的に、オブジェクト指向では、
子のメソッド内で、super( ) みたいに、親の同名のメソッドを呼び出す言語は、あるかも
子は親を継承しているから、親の部分を含んでいる。
だから、子を作る時に、親の部分も作るから、
その時に、super( ) を呼んで、親の部分をカスタマイズしたい
今はclearInterval(i);で10回とか適当な数まで回して止めてるんですけど
超ありがとうございます。
まさかオブジェクトが定義中だったとは思いもしませんでした。
一度オブジェクトの定義を済ませた後にプロパティを追加すればよいのですね！！
追加で質問がありまして、 さんの記述に近いのですが、
下記記述のように関数の中であれば、定義中のオブジェクトのプロパティを扱うことができるようなのですが、
エラーにならないのは、オブジェクトの定義が済んだ後に関数を呼び出しているから･･･
と考えればよいのでしょうか？
var obj = {
a: 3,
b: 4,
c: function() {
console.log(obj.a + obj.b);
},
};
obj.c(); // 7
関数は、呼び出されるまで実行されない
f( ) みたいに、( )は関数呼び出し演算子で、( )を付けると実行される
前提として複数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つだけ、という状況のようです
これを解決する方法があれば教えていただきたいです
onunloadを書くとしたら子窓が閉じられる時になると思いますが
そうなると次に開くURLをリレーのように渡し続ける必要がありませんか
var url=["
ttp://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();
リレーのように渡し続けたら？
ありがとうございます
残念ですが思ったような動作はしませんでした(url[1]とurl[2]が同時に開かれました)
後付けになってしまって申し訳ありませんが、
配列として保持するURLも自分の管理内なので子画面にもJavascriptは自由に記述できます
なので、onbeforeunloadとwindow.openerで子画面が閉じられる際に親画面に何らかの処理を
渡せれば…と今のところ考えています
と、なるとURLは新しいタブで開くようにして
親に、
var turn=1;
var url=["
ttp://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する処理
→親タブに戻る→①→子→親タブに戻る→①・・・
になるような
１つ１つの間で改ページするようにしたらいかんの？
それなら、Ruby, Node.js みたいなサーバーじゃないと、
ローカルPC 機能にアクセスできないのかも
それか、selenium webdriver か
帰っていいと言われたら一体どうすれば良いんだ?
そいつと勘違いされてるんだ
矢田亜希子
JAVAscript楽しいんだもーん
ウッキウキで書き込んでるんだろうけど正直見てて寒い
必ずユーザーの手動による、アクションが必要
PC内で、Ruby, Node.js みたいなサーバーを立てて、サーバーがOS ネイティブ機能を使う
VSCode などのElectron アプリはそう。
Electron = Node.js + Chromium
単純なHTML, CSS, JavaScript じゃなく、
サーバー・ブラウザの両方を含んでいるから、300MB とか、サイズが大きい
スマホアプリと同じ。
これも、スマホ内のネイティブ機能を使う、権限を許可するだろ
Electronではじめるアプリ開発
JavaScript/HTML/CSSでデスクトップアプリを作ろう、2017
この本では、PDF 印刷機能を実装しましょうとか、OS のネイティブ機能を使っている。
他にも、ファイル保存ダイアログを表示して、PC内のフォルダを選択したり
var obj={
b:1,
get a(){ return this.b*10 },
};
console.log( obj.a );
みたいにしますが、
var obj={ b:1 };
したあとに、getterするにはどうしたら良いですか？
最初にgetterだけして、後からプロパティみたいな方法しかないのでしょうか
secondButton
上記みたいに最初は小文字で後から大文字にしないといけないのですか？
全部小文字の方がミスしなくて良いのですが・・・・
質問内容がド素人すぎてすいません
ちなみにJavaScriptはどうでもいい族。
また言語では強制していないが、コーディングスタイルやはたまた開発チーム内のローカルルールで決められていることもままある。
だからあなたがクリスマスに独りで開発していて、コーディングスタイルなんて気にしない人であれば、全部小文字でもまったく問題ない。
ちなみに…
MY_BIG_DICK 定数用途
my_big_dick 変数用途 スネークケース
MyBigDick jsクラス名など アッパーキャメルケース
myBigDick 変数用途 キャメルケース
my-big-dick CSSクラス名など ケバブケース
ありゃしゃす
それですarrayのconcatみたいなやつ 思い出しましたdefineProperty
concatと違いシャローコピーのようですね
勉強になります
ありがとうございます！！
そういう長い変数名はつけてはいけない
スコープを切って解決するならそうして、
そうでなければbutton.secondに格納する
質問スレなんだから、これこれこうだから付けてはいけない、というふうに根拠を示せよrubyキチガイ。
説明できないというのは自分がわかってないからだぞ。
答えを言えばいいというものではない。
なんだよその例w
ここは自ら学ぶ人のための質問スレ
色んな回答者が出した意見を好きなだけ汲み取って質問者の中で答えを出すためのスレ
質問者が自ら興味を持って深堀りしたいければさらに回答者に聞けばいいだけ
回答者が最初から全ての説明を提示する必要はない
ノーヒントの状態で方法が何も思いつかないということはあるが
ここで沢山出た意見の内何が最も優れてるかは質問者が自ら考え試してみて
質問者のセンスで正解を決めればよいこと
つまり君の目線でどの回答者がどれくらい分かっているかというのは無価値な話
あちこち叩かれればそのうち自然と球に近づくのだから
色んな視点からの色んな場合の意見を見ることが良い価値観を育てる行為
最初から何かを限定したりイチャモンをつけようという姿勢は良くない
そう？
その変数が何かを誤認しなくなる要素は
少しでも多く残したくね？
Javaならそうだな
スクリプト言語には似合わない
+ JavaScript の質問用スレッド vol.143 +
ttps://mevius.5ch.net/test/read.cgi/hp/1577357404/ getElementById
ってどういう意味ですか？
Ｉｄをつけた箇所に来たら何かを稼働させるって事ですか？
引数で指定されたIDを持つHTML要素のオブジェクトを返す
たとえばキミが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);
これ以外だと配列ループするしかないですか？
ループとは？
何を使おうが、配列の要素を走査する処理は走る
配列は広義の意味ではなく上の例だと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) );以外になにか方法ないのかなと思いました
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 )
var newObj = $.extend(true,{},sourceObj)
javascriptでlodashを使ってディープコピーを簡単に行う
ttp://https://qiita.com/t-motoki/items/5685d302e2e242f561b4 す、す、すげええ
わ、わ、わかりやすい
感謝っす
javascript頑張ります！！
の「配列ループ」の説明になっていないようだが？
二次元配列に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>');
ナウ過ぎるのも嫌なんだよ
でパティーン１と２でどっちがいいの？
ありがとうございます
awaitとか調べてみたいと思います
再帰と考えてくれればいいと思います（単にコードを書くつもりでarrをループする具体的な部分を示したので）。
二次元配列というか多次元配列（）です（例は２次元配列ですが）
こちらの管轄に無い配列をコピーしたいときとかですね
理想は配列以外のオブジェクトも含むケースですがまずは配列のみからやってみるという感じです
どっちもダサい
１だろ。２はそもそもspanが間に入ってるので意味が変わってしまってる
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や文字列を切り替えるのはバッドパターン
て、て、テクニシャンかよ
何年でそこまでのレベルに到達したの？
ちょっと憧れてしまったお
下の部分は、ポインタが外れた時っていう意味の単語みたいなの無いけど、なんでポインタが外れたらfadeOutするの？
なんでですか？
$('#language-wrapper').hover(
function() {
$('.language-text').fadeIn();
},
function() {
$('.language-text').fadeOut();
}
);
ttp://https://api.jquery.com/hover/ hoverの第１引数がホバーした時、第２引数が外れた時に実行される関数
ホバーした時と、外した時で、ワンセットて事だね
そのサイトクリックしたら英語でびびったよ
まあ翻訳ソフト入れたけどね
カンマが必要だったり、セミコロンが必要だったり・・・・
こういうのって初心者としてはツライんですが、ずっとやってれば覚えられるものですか？
質問レベル低すぎてすいません
vscode＋javascriptの適当なプラグインで
勝手にチェックしてくれるのでどうでもいい
覚えるものではない
言語なのだから
一々ここではこの構文を使って、とか考えてる内は初心者
文字通りトライ＆エラーでバカでも自然に覚える
こんちわって気分のときとちーっすって気分のときもある場合どうしたらいいのですか
VScodeですね
秀丸を捨てる時が来たようです
アドバイスありがとうございます！！
