誰もjQueryが何にでも使えるとは言ってないので
（エスパーでもない限り他人が思ってることなんてわからないので）
思い込んでる事とわかるのは自分自身（>>679）だけである
ここまではよい
探検
+ JavaScript の質問用スレッド vol.131 +
レス数が1000を超えています。これ以上書き込みはできません。
誰もjQueryが何にでも使えるとは言ってないので
（エスパーでもない限り他人が思ってることなんてわからないので）
思い込んでる事とわかるのは自分自身（>>679）だけである
ここまではよい
をサーバーサイドで受け取る時に文字列中に￥ｒや￥ｎも渡す事は出来ますか？
一番の問題はそう思われてるってことだと思うぞ
jQuerer含むライブラリスタが過剰にライブラリを推してるのは事実
度々スレ分離したり議論になってるのにまだ自分たちがどう思われてるのかが分かってないのか
jQueryのアンチが変なふうに思い込んでるのは
アンチが悪いってことで終わりじゃね？
ライブラリを使わない書き方はライブラリ使ってても使ってなくても通じる
ってところか？
俺は普通に食べてるだけ
耳障りに聞こえるのはお前が悪いと言われたって感じか
今まで小さな企業でしか勤めたことがなく、大規模案件と言われてもイメージが湧きません
てことは一生知る必要がないんじゃないか
今のままの小さい仕事しかせずにjavascriptと言えばjqueryでチョロチョロ、みたいなキャリアで本当に将来生き残れるのかという不安があるのです
あとは、自分がjqueryしかできないから会社も大きな仕事が取れないんじゃないかとか考えてしまったりですね
だが、そのバージョンはv0.いくつのもの、今の最新はv3
そのくらい年単位で開発する案件に使うもの
そこからわかると思うがフレームワークは前もって勉強する必要はない
実際使うべきときには役に立たないから
大手も使うと決めたときに改めて勉強会を開くなりして対応してる
大規模だから使うというより
少数の比較的小規模な会社が
使い続けてく方が多い印象がある
いい加減目を覚ましたほうが良い
作者も見放してReactやってるじゃん
jQueryの役目が終わってからjQueryの役目が終わったというように
https://w3techs.com/technologies/overview/javascript_library/all
w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。
またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる
だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される
これからの自分たちがどうしていくかの話をしてるのに
他の人が今何をやってるのかを気にするって意味がわからんな
良く使われてるのは所謂「枯れた技術」とは言えるけど
熟れた物ってこれから先腐っていくこととほぼイコールじゃん
せやな、一年前に、これからはjQueryは減っていくとか
これからは腐っていくとか予想を立てた人恥ずかしいよな
これから？来年にはまたjQueryのシェア増えるんじゃね？
AngularもReactも熟れる前にくされなきゃ良いけど
Angularは一回腐れたよな
> HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ？
わかったわかった。HTTPSは最初からある程度使われいたからな
何かのフレームワークの使用率が10%を超えたら考えよう。
それでいいだろ？
中小規模の会社が請ける規模の案件なら
素のJSだけでも十分やってけるよ
昔と比べて格段に安定して書けるようになってきたから
万が一必要になったらその時必要な分だけ調べれば済む
なにせ0.5%しか使われていない
HTMLとRubyの構文が交互に来るから、わかりにくい。
PHP なんかもそう
<% @items.each do |item| %>
<li><%= item %></li>
<% end %>
もしRuby に、JSX があれば最強だろう
言語の機能を使うようじゃダメ
mustacheが最強
仕様というのは作って環境というのは動かしていくもんだと考えてる開発者と
仕様というのは与えられて環境というのは落ち着いたものに浸かるもんだと考えてる開発者じゃ
話合うわけ無いってことだな
「作って環境というのは動かしていくもん」と
「与えられて環境というのは落ち着いたものに浸かるもんだ」の
違いを完結に述べよ
簡潔に言えば仕様標準化と実装に関わっているかどうかってことで言えるんじゃない？
企業で言うとミーティングやカンファレンスに社員を出張させているかどうか
別にそれは社会貢献のためではなくて自分たちのやりたいように環境を動かすためにそうしてる
環境というが実際は人
その場にいる仕様や実装書いてる人に直接会って、
こここういうバグが有るんですよとか、こういうところで困ってるんですよとか話ができるってことが重要
やっぱりそれはオンラインでプルリクエスト送るのとはぜんぜん違う
仕様や実装を作ってるのは人間で、意外と少数だから、向こうも幅広い意見を汲み取ろうとはしてるけれど
どうしても自分たちの近い範囲が得をする恣意的なものになってしまう
そのために皆わざわざ録画で見れるものを会場まで行く
まで読んだ
ひとまず自分のやりうる業務のことを考えたらjqueryやes6の習熟でひとまずは大丈夫だと感じました
まずはjqueryを使い倒してみて、jqueryでは不十分だと感じられるようになった段階で改めて考えてみることにします
ありがとうございました
既にモダンブラウザで使える重要なES2018の機能もあるよ
ES2015 の本。
これを読めば、クラスとか、素人はあまりの難しさに愕然とするだろう
いや、お前がプロで、難しくて騒然としたっていうなら
それはそれで面白いことだがｗ
https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3
理解しやすくなる。可読性の向上
ひねくれた方法で「実現できる」じゃだめなんだ
普通に書いて普通に読めなければいけない
しかしテストでパターン数爆発で大抵死ぬ。
テストしたいんならよりし易い言語で書いてコンパイルすべき
ではその、よりし易い言語がなにで
どういう理由で、よりし易いのか言えるんでしょうな？
casperでもぞもぞしたりするなあ
SVG操作系javaScriptライブラリまとめ
https://jslob.repop.jp/2017/07/svgjavascript.html
ナイスまとめ！
今その情報を教えて頂けますか?
「あああ」をミラーしたら「あああ」が２つになって、大本を 「いいい」に変更するとコピー先も「いいい」になるという機能です
svg関連で角度の計算に使える関数やよい方法があれば教えていただけますか。
動きとしては↓こちらのサイトのようなものです。
https://itstudio.co/sample/svganime/anime7.html
その犬の動きのほうがよく分からんｗ
もうお前らには一切聞かんわ
SVGの線上となるとアレだけど
動かすルートが決まっているなら接線の傾き求めればいいじゃない
接線か、なるほど気づきませんでした
接線の求め方から勉強してみます。。
すみません。アニメーション自体はサイトのようなもので、これに角度の変化を付け加えたいという意味でした。
そしてよく見たらサイトのも微妙にrotateで傾けてますね。。折り返しの際に逆を向いてくれないので考えているものとは違いますが。
反転はtransformのscaleを使うのが容易いかも
a: 1,
b: 5,
c: 6
}
ってあって
test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか？
『javascript test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか？』
のGoogle検索結果を見ていけばわかる
console.log(key + ':' + value);
}
こうするとちょっとPHPっぽい
for (let v of Object.values(test)) {
console.log(v);
}
とか
Object.values(test).forEach(v => {
console.log(v);
});
Object.entries(test).forEach(([key, value], index) => {
console.log(key, value, index);
});
冗長になるのか教えてほしいものだ。
lodashを使ったほうが短いとか意味分からん
_.forOwn(test, (value, key) => {
console.log(key + ':' + value);
});
いつものlodashくんがスレチ話するためのエクスキューズのつもりなんだろｗ
はいlodash敗北
必死になるなｗ
https://lodash.com/docs/4.17.4#forIn
https://lodash.com/docs/4.17.4#forOwn
前者はそもそもエラーなので論外
後者は普通にあり
entriesやvaluesは使えない環境も多いしね
個人的にはObject.keysを使うことが多いかな
よっぽど大量にループさせるんならfor..in使うけど
そんなことを言ったら何もできない
いつまでレガシーブラウザを延命させる気なんだ
構造は明示されてて
構造が未知だったり完全に信頼できなかったりしない
javascriptはゴルフ絶対主義なんか
もちろんオブジェクトにそのチェックが不要だという保証があるなら.hasOwnProperties()で調べる必要はない
今までに一度もないなｗ
とはいえ素のJavaScriptで
Object.values(test).filter(x => x % 2 === 0).map(x => x * 2)
みたく書くと無駄に何度も配列作っちゃうから、そういう意味ではlodashが羨ましい
filterとかしなくてもif returnで良いんだし
処理分離したいし破壊的代入はなるべく避けたいじゃん？
ほんの少しづつ頑張ればいいだけだよ
小さいものを積み重ねても大きくはならない
今回がそもそもfor-inとの対比の話だからな
値を列挙して利用したいというだけだから
配列をどう処理していきたいかみたいな一般論とは話が違う
つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと
列挙したい物を連続してフィルタリングしたりする書き方したいか？ということ
メタプログラミングみたいな設計自体がおかしい
もし、テストツール以外で、こういう設計をしていたら、おかしいと思え！
n の変更でアクセスする方法ってないんでしょうか?
lastChildとかつうと位置が変わった時に書き換えるのが面倒なんですけど。
ありがとうございます。
別の質問なんですけど
table の tbody に入っているデータを
localStorageに保存したあとで
ページを開き直した後に
localStorageから呼び出して
同じ形式で再表示したいんですけどどうすれば良いんでしょう?
storage.data = document.getElementByID("toboyのID")
で保存して
appendChild(storage.data)
とかやってもうまく行かないんですけど
forループかなんかつかって1つづつ要素を createChild とかして appendChild() するしかないんですか?
storage.data = document.getElementByID("toboyのID")
↓
storage.data = document.getElementById("tbodyのID")
=使ってるようだが…
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
プロパティ構文、ブラケット構文、メソッド構文とあるようなので問題ないようです。
>>777
あぁ、それ本に書いてたなぁと思って調べたら
オブジェクトはJSON.stingiy/parseつかえってかいてたので試したけど
駄目っぽいですね。
一つ一つデータをオブジェクトかなにかで保存して
それを取り出して一つ一つcreateElement/appendChildしていくしか無いっぽいですかね。
だれか妙案あれば引き続きよろしくお願いします。
知らんかった！恥ずかしい
>>780
こんなかんじでどうじゃろ
var storage = localStorage;
//保存
storage.data = document.getElementById("tbodyのID").innerHTML;
//復元
document.getElementById("tbodyのID").innerHTML = storage.data;
あぁ、それ良いかもですね!
あとで試してみます。
どちらも文字列の、key : value 型だろ
innerHTMLを出し入れしてもただの文字列でしょ、問題はないんじゃね
なんか問題あるっけ
なんで、そんな表示情報を保存するねんw
保存するのは、アプリに必要なデータだろ
key : value
アプリに必要な、データの項目と値
HTMLのままが駄目と言っちゃ
縦横長＋配列に分割することになるんだろうけど
そうなったらJSON化もあんまりスマートでないのでIDB使おうかとかも言えるしな
まあ、大きなアプリで沢山入出力するなら
そこ抽象化して丁寧にやるのもいいけど
簡素なものには適当な対応でHTML突っ込んで戻すくらいで良いんじゃないかと思うよ
で？復元時にはバラバラにしたデータからまた元のhtmlの文字列組み直すのか？それとも一つずつcreateElement繰り返して挿入か？ｗ
どっちにしろバカなんじゃねーのオメー
えんぴつを使わないアメリカかよｗｗｗ
でも君プログラムのアーキテクチャについて無知じゃん
値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。
（アロー関数を使えばもっと減らせる）
https://jsfiddle.net/1uopxycn/
var data = [
[{text: 1, colspan:2},{text: 3}],
[{text: 1},{text: 2},{text: 3}],
[{text: 1},{text: 2},{text: 3, style: 'color:red'}],
];
var rows = data.map(function(row) {
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
});
$('#table').append(rows);
1行で終わる話
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
}));
後からHTMLをかえたくなったときとかね
テンプレートにデータを流し込んでビューを作るってことを
やっている人なら理解できると思う
そもそもデータとして参照する時HTMLを解析しなければいけなくなる
仕様的に許されているからOKと考えるんじゃなくて
後々のメンテナンス性なんかも考えらるようでなければダメ
lodashとかにあるテンプレートエンジンの機能を使って
文字列として処理したほうが速い
attrsの部分がちょっと大変だけどね
ある意味、真理ではあるが
区切り線付きの横並びの要素とかで
Model(データ)と、View は分離させる。
View は、しょっちゅう変わるから、Modelは、View に依存させない
>>799
異なるドメインから読み込んだものや、素性の知れない者が作ったものを、
innerHTML で読み込んで実行すると、何されるか分からないので、危険
自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな
Houdini Layout API
20時間くらいでいける?
ただのライブラリだからすぐに覚えられる20時間もいらん。
本気で1時間やればもうDOM APIは使いたくなくなる。
したことがあるならjQueryの簡単さに感動するだろうな
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね
そうだよ。ライブラリってのは普通何か目的があって
その目的をうまくやるために作られる。
なんにでも使えるライブラリとかそいういうのゴミだから
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。
>>793
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?
>>802
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?
>>808
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/
この本に書いてそうなので読んでみます。
ヒントありがとうございます!
var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);
setAttributeを使用し画像を真ん中に設置する方法はありません出ようか？
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?
外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName'
多分ID変わってます
ありがとうございます
頑張ってみます！
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。
safari 11.0.2です。
実現したい機能：Youtubeの自動再生ボタン（動画を再生した後に次の動画に自動遷移する機能）をUserScriptで自動クリックしてオフにする。
Youtubeの自動再生機能はデフォルトではオンで、オフにする事もできるのですが、その設定はCookieで保存されるようです。
しかし私は普段、プライベートモードでブラウジングをします。
そこで上記の機能をTampermonkeyのUserScriptで実現しようとしました。
私はjavascriptに関しては完全な初心者なので、ググって出てきたソースを改変しましたが、機能しませんでした。
おそらく、的外れなことをしているんだと思います。
以下のソースについてアドバイス、ここがおかしい等のツッコミをいただけたら幸いです。
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("style-scope ytd-compact-autoplay-renderer");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})();
>自動再生ボタンをUserScriptで自動クリックしてオフに
意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか？
最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ
javascriptで操作できんのか
>>823私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL
ほらよ。直してやったで
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("paper-toggle-button[checked]");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})();
覚えるとサクッとできるぞ。
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
$("paper-toggle-button[checked]").click();
}, 1000);
})();
適切と思われるものに直した後、checkedがついているときだけoffにするようにした
またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する（この場合はclick）
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる
setInterval(() => $("paper-toggle-button[checked]").click(), 1000);
>>826,>>827,>>828,>>829
動作を確認できました。助かりました。
欲しい機能をさらって実現出来たら最高ですよね！
本当にありがとうございました。
Javascript勉強します。
これでもいける?
createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);
このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて
行けるかもしれないけど実装次第だろうね
まずpaper-toggle-buttonというタグ（カスタムタグ？）は
動き見てると非同期で表示されてる感じがする。
なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利
クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実
本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです)
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87
コンストラクタでスマートに作れるだろ
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる
ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある
本が売れるとか？アフィが捗るとか？
イベントは
new Event(nameString,optionObject)
の形で作れ
createは非推奨
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013
JavaScriptパターン ＞ JavaScriptデザインパターン ＞＞＞＞＞ オブジェクト指向JavaScript
jQueryはすでに広まってるよ
どんな特があるかは、広めて特があるんじゃなくて使うと特がある。
今回みたいなのはささっと実装できるという得がね
俺の得じゃなくて、使うみんなが得をする
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);
だと
$('<img>', {src: fugafuga, title: hogehoge});
ね？
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法
これは?
それで勉強するような本ではない
hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)
上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね？
配列の値が毎度変動するため、（１〜１０の時もあれば、１〜３０の時もある）
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。
サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう？
セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨
ちなみに今ではXHRはもう使われない
Fetch APIを使う
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる
まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。
live-serverなんて何も考えなくても１分あれば準備できる最もお手軽なサーバーだぞ
でインストール以降、
serve .
これだけ。
サーバーを立てていないと、異なるドメインにアクセスできない
Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば？
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・
> Fetch APIを使う
これはウソ。前提としてXHRを使えば以下の問題は全て解決している
まずFetch APIにはIE11が対応してない。
Fetch APIに対応していたとしてもStreams APIに対応していなければ
プログレスの取得やキャンセルが実装できない。
https://developer.mozilla.org/en-US/docs/Web/API/Streams_API
Firefox、IE、が対応していない。Safariは不明
Chromeも59からなので少し前の機種は使えないかもしれない
また仕様上アップロードのProgressは取ることはできない
以上のような制限があるので、苦行の道を進みたい人ぐらいしかFetch APIを使ってない。
嘘だと思うのなら勉強サイト以外でFetch APIを使ってるサイトを探してみると良い
まず見つからない
仕事ではそうもいかんけど
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか？
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852
どうせ簡単な話だろうが、めんどくさい
サンプルコードかけ
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです
$("p").slideToggle();
});
って書き直せば動く。documentの部分は
たぶん"#menu"でもいい
うまくできました！
ありがとうございます。
http://mevius.5ch.net/test/read.cgi/hp/1517028608/769
に対する回答こちらに書かせてもらいます。
１秒(1000ミリ秒)後別タブでやほおを開き１０秒後(10000ミリ秒)後もとのタブをアマゾンに遷移
<a href="javascript:setTimeout((function(){window.open('https://www.amazon.co.jp', '_self')}), 10000)" onclick="setTimeout((function(){window.open('https://www.yahoo.co.jp')}), 1000)">[テキスト]</a>
注意）
・onclickのタイムアウトの値１秒(1000ミリ秒)超える値設定するとChromeではブラウザにブロックされた。迷惑広告対策か。
・当然だけどhrefのタイムアウトの値がonclickのタイムアウトの値を下回ってると元のページが先に遷移しちゃうからyahoo開く処理は破棄される
ここはお仕事相談所ではなくて
純粋にJSを勉強しようと思う人のための質問スレだからね
jsじゃないから他所いけ
料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う
ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り
jQueryならサラッと書ける回答を素のJSで書くのダルい
もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ
でもできないって言うのはやっぱり良くないと思うから
初心者には素のJSで教えるべきだよ
基本的にライブラリは背景を理解しとかないとね
これは電子レンジでチンすればできるものということしか知らないのと
暖める必要があるから電子レンジを使うということを知っているのと
電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う
jqueryならこう書けると称して
jquery関係なく処理変更で行数減らしたやつ
ブラウザ固有のDOM APIなどはnativeのJavaScriptではないので
その理屈はとおらない
質問に回答する人 >>>>>>> 何も書かないで文句だけ言う人
これだけは理解しような。
書けばいいんやで、誰よりも早く
ここは5chだぞ
発言に優劣は無いし急かされる理由もない
nodejsとかブラウザを使わないような本なら
jQueryは出てこないと思うよ
個人的にはどっちでもいいが
求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。
http://mevius.5ch.net/test/read.cgi/hp/1510321470/
ありますやん
それは当たり前のように横暴に書かないということで
一応色んな人に配慮してる書き方のつもりなのでは？
のって経験上何か思い当たる？
thisの扱いが違う
クロージャーを作るかどうか
だったらfunnction命令と違ってかならず
呼び出す前に定義をかかないといけない。
と適当に書いて見る。
適当に突っ込んどいてくれ。
>>892はfunction式って言ってるんだから巻き上げが起こらないのはどっちも同じだよ
基本的にfunction式にthisをbindしたものと同じと考えて相違ないと思う
var aaa;
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bbb"
aaa = ()=>{};
aaa.name;
=> "aaa"
chromeなに勝手に無名関数に名前付けてんだよ…
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name
Inferred function names
Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).
狐とクロムだけが対応してる仕様てことじゃないの?
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bound bbb"
ってなったが？
aaa.name
=> "aaa"
へぇ、ブラウザ何？
Bound function names
Function.bind() produces a function whose name is "bound " plus the function name.
function foo() {};
foo.bind({}).name; // "bound foo"
知らんと思うが
これなんでこうなってんの？
bind()が名前に影響及ぼさなきゃならんの？
適当にisBoundとかのプロパティ設定するんじゃだめなの？
bind() 関数は、新たな関数（束縛された関数 = a bound function; BFとも）を生成して返します。
BF は 特殊関数オブジェクト (exotic function object; ECMAScript 2015からの用語) であり、
元の関数オブジェクトをラップします。BF を呼び出すとラップされた関数が実行されます。
新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの?
f.name => "bound bound bound bound bound bound bbb"
自分でbindメソッドを実装してみれば？
元と同じ名前ではダメな理由がわかるよ
ぎゃっはっはっは
>>848
そうなのか。
good partsはちょっと古いけど、アマゾンレビューにも古いからどうとか書いてなくて(最近のレビューないけど)
ページ数もそんななくて手頃だし評判もいいので次コレ読もうと思ってたんだけど。
どうするかなぁ
同期モードでバイナリを受信する方法はないの？
ない
しなくていいんですね
ありがとうございました
URL：/xxx_get
とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、
URL：/xxx_set
Request：cmd={xxx_no}&id={xxx_id}
とあるものは、どうやってアクセスすればよいのでしょうか？
ド素人の質問で恐縮ですが教えて下さい。
scriptタグの中に何か指定するのかな、じゃあJavaScriptかなと思いました。
サーバーのプログラミング組んだ人に聞かないと駄目なんじゃない?
まぁ俺自信が完全な素人やから参考にしないで
?cmd={xxx_no}&id={xxx_id}
つければいいのじゃないのかな
説明不足ですみません、httpのPOSTです。xmlで返ってきます。
GETならば、URLに?cmd={xxx_no}&id={xxx_id}をつければよいみたいですが。
サンプルがありまして、jqueryを読み込んでいて、scriptタグの中に以下の記述があります。
function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}
宛先であるURLにデータを送る方法、つまりPOST？の方法が分かりません。
ってかPOSTしてるじゃん
その関数を実行すれば動くだろうさ
data: {cmd: 1, id: 1}
こっちの書き方で良くて、見やすく文字列加工がいらないから
あとpostなら$.ajaxじゃなくて、$.post使えばいいのに
なんでみんな長い$.ajaxを使うんだろうな？
$.post("cgi/xxx", {cmd: 1, id: 1});
でいい。
んで、お前が分かってないのは、そんな所じゃなくて、
相手のサーバー（ホスト名）は何なんだってところだろ？
そんなのドキュメントでも見ろとしか
urlは見ての通りパスしか書いてないから、そのHTMLを追いてる
サーバーのホスト名になる
で、さらに次は、postしたあとの結果の受け取り方どうするのかわかってるのか？
そこも分かってなさそうなんだが。
まあこんな感じだな
<form action="cgi/xxx" method="post">
<input type="hidden" name="cmd" value="1">
<input type="hidden" name="id" value="1">
<input type="submit">
</form>
まあ、答えたはしたがこのレベルじゃないな。
GETっていうのはサーバーからデータを受け取るもの
POSTっていうのはサーバーにデータを送信することだよ
お前に必要なのはこのレベルの説明だろ？
>>923で書いたサンプルは一部でして、idには他で値を入れてます。
そのPOSTする方法が分からないのです。
ボタンとかを作ってクリックしてあげる必要があるのでしょうか。
以下のサイトを参照しています。
https://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47
URLは、192.168.xx.xx/cgi/xxx_set なのですが、どのようにして送信するのでしょうか？
だから関数を実行すればいい。
実行する方法はいくらでもある。
この仕事をする上で、その方法を知らないわけがない。
つまりだな。
手術の真っ最中にメスって何って聞いてるようなもんだ
url: "cgi/xxx", の箇所を、url: "192.168.xx.xx/cgi/xxx_set", にして、
ボタンとかを作って押してあげるでよいのでしょうか
同期モードでバイナリを受信する方法はないの？
jsスレです
そのコメントで興味をもって見てみたが
MicroSoftのあたりで見るのをやめたｗ
Promiseじゃだめなの?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
XHRによる画像の読み込み
PromiseとXMLHttpRequestで画像を読み込む別の例は、MDN GitHub js-examplesリポジトリにあり、動作を確認することができます。それぞれの行のコメントでプロミスとXHRの構造がよくわかるはずです。
url: "cgi/xxx/cmd=1&id=" + id,
or
data: {
cmd: "1",
id: id
}
xhr.open('POST', 'cgi/xxx', true);
xhr.setRequestHeader('Content-Type','application/x-www-urlencoded;charset=UTF-8');
xhr.send("cmd=1&id="+ id )
かな
＞url: "cgi/xxx/cmd=1&id=" + id,
urlにホスト名を記述していないのに、なぜ宛先に届くのかが分かりません。
GETの場合は、URLで指定しているので分かります。
POSTの場合は、サーバにデータを送信するのに、サーバのアドレス(ホスト名)をどこに指定すればよいのか？が分かりません。
関数を実行するには、ボタンとかを作って押すというので正しいのでしょうか
宛先であるホスト名は、192.168.xx.xx なのですが、
＞xhr.open('POST', 'cgi/xxx', true);
これでどうやってホスト名に送るのでしょうか？
ここにかいとるよ
アドレスは、192.168.xx.xx/cgi/xxx です。
＞サーバへのデータ送信について
の箇所を読みましたが、疑問がはれません。
GETのときは、ブラウザのURLに192.168.xx.xx/cgi/xxx_get などと指定してアクセスすれば値が返ってくる。←単純明快
POSTのときは、ブラウザのURLに指定する？しない？
どうやら、XMLHTTPRequest()を作って送るみたいだ。どうやれば実行される？
実行されたとして、どうやって192.168.xx.xx/cgi/xxx へメッセージを送っているのか？
GETのときは、192.168.xx.xx をブラウザのURLで指定したけど、
POSTのときは、192.168.xx.xx をどこにも指定しないでどうやって送るのだろうか？
Web系の知識ゼロの底辺SEがWeb APIを使おうとして悪戦苦闘中です。
いまの環境だと試せないので明日試します。
通信先URLが、ホスト名が指定されていない cgi/xxx だけであっても、
だから絶対に機能しないとはいえない
xhr.open('GET',encodeURIComponent('sample.sample?query1=some2&query2=some2'))
xhr.send(null)
POSTのとき
xhr.open('POST', 'sample.sample')
xhr.setRequestHeader('content-type','application/x-www-urlecoded;charset=UTF-8');
xhr.send(encodeURIComponent('query1=some1&query2=some2'))
GETのときは、ブラウザのURL欄に192.168.xx.xx/cgi/xxx_get と指定するので、そこにあるデータを取得するのは分かります。
POSTのときは、GETのときのようにブラウザのURL欄に指定することはしないみたいなので、どこに192.168.xx.xx を指定しているのでしょうか？
この構文の中に 192.168.xx.xx/cgi/xxx のアドレスが含まれているようではなさそうですし。。
?
カレントディレクトリはどこのカレントディレクトリでしょうか？
サーバーの？それともクライアントの？
>>923でRequestを設定しなくてよい方は、ブラウザにURLを入れて実行したら値が表示されたので、
これがGETなのかなと思っていて、そのことを言っています。
>>928の
＞url: "cgi/xxx",
このパスはサ−バのカレントディレクトリからのパスを指していると思うのですが、
192.168.xx.xx を指定しなくても送信できるのでしょうか？
宛先が分からないのではないでしょうか？
そうですよね。前途多難です
ばかなのかこいつ
ツンデレなの?
ただの独り言なんだからっ
流石にこの程度じゃjQueryの素晴らしさを他の人に
伝えることは難しいからね。
つまり1+1の答はなんだ？っていう話題で
jQueryを使うと〜という話をするのは難しいということ
せめてAjaxの話にまでくれば良いんだけどね
>>959
もうおまえこの業界でいきていけんぞ
jQueryの話題じゃねーもの
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
↑このexecuteAsyncScriptのExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと？
とりあえずコレ嫁
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments
「jquery form submit」で検索！
Ajax で同期処理は、非推奨だから使うな。
非同期のみ使え
JavaScript のXHR は、ややこしいので使うな。
素人は、jQueryのAjaxなどを使え
「jquery ajax example」で検索！
高級言語自体甘え
return出来ないとなると即時関数内にまとめて処理を書くしかないんでしょうか？
処理を分離したいのですが良い方法はありませんでしょうか？
GM.xmlHttpRequest({
method: "GET",
url: "http://www.example.com/";,
onload: function(response) {
処理
}
});
Requestのデータにcmdだけを設定するものがあったので、まずはそれを試してみました。
<form action="http://192.168.xx.xx/cgi/yyy"; method="post">
<input name="cmd" value="1">
<button>test</button>
</form>
すると、ブラウザでは<error> xxxxxxxx </error> タグが入ったものが返ってきました。
ステータスコードは、302 Foundでした。とりあえずはサーバからResponseが返ってきました！
302の意味は「今ちょっとここにないよ」みたいなので、設定が足りないのだと思います。(何となく心当たりがあります)
↑このexecuteAsyncScript関数のExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと？
Promiseオブジェクトのresolve関数だろう
executeAsyncScript関数の定義の中身が
Promiseになっててarguments[arguments.length-1]
でresolve関数が実行されるようになってるのだろう
Unlike executing synchronous JavaScript with #executeScript, scripts executed wit
h this function must explicitly signal they are finished by invoking the provided call
back. This callback will always be injected into the executed function as the last a
rgument, and thus may be referenced with arguments[arguments.length - 1].
てかいてるやん。
おまえってさ
何日か前にXHRのバイナリがなんとかで質問してたやつ?
解答ないと質問コピペで繰り返して
解答あってもスルーする糞野郎だろ?
しねよ
こいつの質問には今後一切答えないように
またコピペ質問してるはずだろ
こいつならw
https://mevius.5ch.net/test/read.cgi/hp/1520329583/
コピペで質問返されてもな。
に書いてある
素人は、jQuery のAjax を使え!!
+ JavaScript の質問用スレッド vol.132 +
https://mevius.2ch.net/test/read.cgi/hp/1520329583/
formを作ってsubmit()させるのとじゃ効果が違くね？
新しいスレッドを立ててください。
life time: 105日 1時間 34分 55秒
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php
レス数が1000を超えています。これ以上書き込みはできません。
ニュース
- 岸田総理「誰ひとり取り残さない社会」実現へ [煮卵★]
- 慶應義塾長が国立大の学費増額を提言「年55万→150万に」 文科省の会合で ★2 [少考さん★]
- “消えない広告” ×マークが押せません!? 「ダークパターン」世界で問題に | NHK [少考さん★]
- 【世帯年収2000万円以上の富裕層】「よく身に着ける洋服のブランド」…ダントツ1位は「ユニクロ」 [ネギうどん★]
- 【俳優】令和の沢尻エリカ事件か！番宣出演の若葉竜也に苦言殺到「態度悪すぎ」「朝から不快」 [ネギうどん★]
- トライク(三輪自動車)が大型貨物に追突、男性死亡 男児意識不明 ヘルメットなし [蚤の市★]
- NYM @ LAD ★4
- AFC U23アジアカップ カタール2024★8
- AFC U23アジアカップ カタール2024★9
- NYM @ LAD ★2
- NYM @ LAD ★2
- 【フジテレビ】2024 FORMULA 1【NEXT】Lap270
- 昼になったし旦那のチンポしばいてくる
- 昼から酔っ払ってるんだが質問ある？
- すまん炎刀・銃って刀なの？
- 昼飯書いて消えろ [874629454]
- 鳥って可愛いよな。 飼いたいからおすすめの品種を教えてくれ🐦🐓 [225652761]
- バイトもろくにしたことないから初任給が嬉しすぎて変になってる