JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです
+ JavaScript の質問用スレッド vol.131 +
レス数が900を超えています。1000を超えると表示できなくなるよ。
2017/11/21(火) 21:58:33.01ID:???
2018/02/24(土) 16:39:50.42ID:???
2018/02/24(土) 16:46:08.13ID:???
DOM APIつかってループで繰り返し要素を作ったり変更したり
したことがあるならjQueryの簡単さに感動するだろうな
したことがあるならjQueryの簡単さに感動するだろうな
2018/02/24(土) 16:59:21.24ID:???
正規表現リテラルって
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね
2018/02/24(土) 17:04:45.85ID:???
だめ
815Name_Not_Found
2018/02/24(土) 19:00:58.00ID:ZwKHpr8s jQueryってDOM操作特化なの?
2018/02/24(土) 19:16:49.06ID:???
817Name_Not_Found
2018/02/25(日) 11:42:32.95ID:+FLdsO/Y >>781
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。
>>793
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?
>>802
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?
>>808
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/
この本に書いてそうなので読んでみます。
ヒントありがとうございます!
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。
>>793
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?
>>802
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?
>>808
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/
この本に書いてそうなので読んでみます。
ヒントありがとうございます!
2018/02/25(日) 12:33:31.82ID:???
画像を真ん中に配置したいのですが真ん中に配置されずに困っています
var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);
setAttributeを使用し画像を真ん中に設置する方法はありません出ようか?
var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);
setAttributeを使用し画像を真ん中に設置する方法はありません出ようか?
2018/02/25(日) 13:09:17.86ID:???
>>818
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?
外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName'
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?
外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName'
2018/02/25(日) 14:29:05.50ID:???
>>817
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。
822Name_Not_Found
2018/02/25(日) 21:12:43.79ID:tH4r9gsg macOS High Sierra 10.13.2
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);
})();
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);
})();
2018/02/25(日) 21:50:46.55ID:???
>>822
>自動再生ボタンをUserScriptで自動クリックしてオフに
意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか?
最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ
>自動再生ボタンをUserScriptで自動クリックしてオフに
意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか?
最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ
2018/02/25(日) 22:46:33.87ID:???
ツベのプレイヤーって特殊だよね
javascriptで操作できんのか
javascriptで操作できんのか
825Name_Not_Found
2018/02/25(日) 23:39:34.21ID:tH4r9gsg 822です。レスありがとうございます。
>>823私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL
>>823私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL
2018/02/26(月) 00:20:30.30ID:???
>>825
ほらよ。直してやったで
// ==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
// ==/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);
})();
2018/02/26(月) 00:20:55.28ID:???
ついでにjQueryを使ったバージョンな。
覚えるとサクッとできるぞ。
// ==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);
})();
覚えるとサクッとできるぞ。
// ==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);
})();
2018/02/26(月) 00:23:17.60ID:???
補足しておくと最初のやつはセレクタがよく分からんやつだった。
適切と思われるものに直した後、checkedがついているときだけoffにするようにした
またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する(この場合はclick)
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる
適切と思われるものに直した後、checkedがついているときだけoffにするようにした
またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する(この場合はclick)
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる
2018/02/26(月) 00:30:44.50ID:???
なお、一行でも書ける
setInterval(() => $("paper-toggle-button[checked]").click(), 1000);
setInterval(() => $("paper-toggle-button[checked]").click(), 1000);
830Name_Not_Found
2018/02/26(月) 01:05:40.91ID:anD7k8Wx2018/02/26(月) 01:28:47.36ID:???
document.querySelector("paper-toggle-button").checked = false
これでもいける?
createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);
このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて
これでもいける?
createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);
このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて
2018/02/26(月) 01:39:57.14ID:???
>>831
行けるかもしれないけど実装次第だろうね
まずpaper-toggle-buttonというタグ(カスタムタグ?)は
動き見てると非同期で表示されてる感じがする。
なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利
クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実
本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。
行けるかもしれないけど実装次第だろうね
まずpaper-toggle-buttonというタグ(カスタムタグ?)は
動き見てると非同期で表示されてる感じがする。
なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利
クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実
本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。
2018/02/26(月) 04:45:38.01ID:???
やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです)
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです)
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87
2018/02/26(月) 04:46:12.86ID:???
おいおい、、、、頼むからもうcreateEvent系は使うな
コンストラクタでスマートに作れるだろ
コンストラクタでスマートに作れるだろ
2018/02/26(月) 05:36:10.88ID:???
じゃあ作ってくれよ
2018/02/26(月) 06:28:00.10ID:???
clickイベントを発行するだけなら.
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる
ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる
ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある
2018/02/26(月) 08:39:38.20ID:???
jquwryは他所でやれ
2018/02/26(月) 09:31:38.10ID:???
jq広めてどんな得があるというのか
本が売れるとか?アフィが捗るとか?
本が売れるとか?アフィが捗るとか?
2018/02/26(月) 11:31:45.54ID:???
変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる
2018/02/26(月) 11:37:17.85ID:???
とりあえずjqueryは他いけな
2018/02/26(月) 12:02:37.73ID:???
2018/02/26(月) 16:24:03.79ID:???
>>817-821
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013
2018/02/26(月) 17:35:05.56ID:???
>>842
JavaScriptパターン > JavaScriptデザインパターン >>>>> オブジェクト指向JavaScript
JavaScriptパターン > JavaScriptデザインパターン >>>>> オブジェクト指向JavaScript
2018/02/27(火) 00:25:56.22ID:???
2018/02/27(火) 00:30:54.05ID:???
>>818
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);
だと
$('<img>', {src: fugafuga, title: hogehoge});
ね?
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);
だと
$('<img>', {src: fugafuga, title: hogehoge});
ね?
846Name_Not_Found
2018/02/27(火) 03:07:57.09ID:yvlj/jpz >>843
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法
これは?
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法
これは?
2018/02/27(火) 03:37:44.33ID:???
グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで
2018/02/27(火) 04:52:43.68ID:???
The Good Partsなんて出たときから歴史を振り返る見て楽しむ本であって
それで勉強するような本ではない
それで勉強するような本ではない
849Name_Not_Found
2018/02/27(火) 12:57:13.86ID:snOiXd7a 配列に関しての質問いいでしょうか?
hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)
上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね?
配列の値が毎度変動するため、(1〜10の時もあれば、1〜30の時もある)
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。
hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)
上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね?
配列の値が毎度変動するため、(1〜10の時もあれば、1〜30の時もある)
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。
2018/02/27(火) 13:01:21.36ID:???
hoge.length - 1で何かまずいのか?
2018/02/27(火) 14:31:14.67ID:???
JSではlengthゲッタに副作用を持たせる事ができるし
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない
2018/02/27(火) 15:14:56.35ID:???
ゲッタ・・・
853Name_Not_Found
2018/02/27(火) 15:16:07.33ID:yvlj/jpz 本読んで勉強してたらXMLHttpRequestの項目が合って
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。
サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。
サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。
2018/02/27(火) 15:26:14.60ID:???
ローカル環境では自由にXHRはできない、特にChromeはその制約がややきつい
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう?
セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨
ちなみに今ではXHRはもう使われない
Fetch APIを使う
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう?
セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨
ちなみに今ではXHRはもう使われない
Fetch APIを使う
2018/02/27(火) 15:41:08.05ID:???
単純にhtmlを
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる
まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる
まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか
856Name_Not_Found
2018/02/27(火) 16:27:33.21ID:yvlj/jpz なんとなく構造がわかりました。
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。
2018/02/27(火) 18:02:52.83ID:???
いくらJSとはいえlengthが配列の長さじゃないかもしれないと疑いだしたらキリがなくない?
2018/02/27(火) 20:37:30.61ID:???
>>856
live-serverなんて何も考えなくても1分あれば準備できる最もお手軽なサーバーだぞ
live-serverなんて何も考えなくても1分あれば準備できる最もお手軽なサーバーだぞ
2018/02/27(火) 20:43:48.29ID:???
npm i serve -g
でインストール以降、
serve .
これだけ。
でインストール以降、
serve .
これだけ。
2018/02/27(火) 21:43:46.27ID:???
CORS だろ。
サーバーを立てていないと、異なるドメインにアクセスできない
Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば?
サーバーを立てていないと、異なるドメインにアクセスできない
Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば?
2018/02/27(火) 21:51:16.55ID:???
htmlとjsだけなんだから
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・
2018/02/27(火) 21:53:05.05ID:???
> ちなみに今ではXHRはもう使われない
> 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を使ってるサイトを探してみると良い
まず見つからない
> 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を使ってるサイトを探してみると良い
まず見つからない
2018/02/27(火) 22:03:42.47ID:???
ブラウザ互換性は重要だが正直言えばそろそろIEは切り捨てても赦して欲しい
仕事ではそうもいかんけど
仕事ではそうもいかんけど
2018/02/27(火) 22:05:13.09ID:???
仕事でそうはいかないのをわかってるなら
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん
865Name_Not_Found
2018/02/27(火) 22:13:06.82ID:wA1MMf5K 最初から読み込んでいるJavascriptで制御している開閉ボタンつきサブメニュー部分を
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか?
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか?
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852
2018/02/27(火) 22:18:13.74ID:???
867865
2018/02/27(火) 22:32:13.89ID:??? >>866
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです
2018/02/27(火) 22:55:04.12ID:???
$(document).on("click", "button", function () {
$("p").slideToggle();
});
って書き直せば動く。documentの部分は
たぶん"#menu"でもいい
$("p").slideToggle();
});
って書き直せば動く。documentの部分は
たぶん"#menu"でもいい
2018/02/28(水) 00:27:19.48ID:???
2018/02/28(水) 01:35:15.70ID:???
スレ違い質問
http://mevius.5ch.net/test/read.cgi/hp/1517028608/769
に対する回答こちらに書かせてもらいます。
1秒(1000ミリ秒)後別タブでやほおを開き10秒後(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のタイムアウトの値1秒(1000ミリ秒)超える値設定するとChromeではブラウザにブロックされた。迷惑広告対策か。
・当然だけどhrefのタイムアウトの値がonclickのタイムアウトの値を下回ってると元のページが先に遷移しちゃうからyahoo開く処理は破棄される
http://mevius.5ch.net/test/read.cgi/hp/1517028608/769
に対する回答こちらに書かせてもらいます。
1秒(1000ミリ秒)後別タブでやほおを開き10秒後(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のタイムアウトの値1秒(1000ミリ秒)超える値設定するとChromeではブラウザにブロックされた。迷惑広告対策か。
・当然だけどhrefのタイムアウトの値がonclickのタイムアウトの値を下回ってると元のページが先に遷移しちゃうからyahoo開く処理は破棄される
2018/02/28(水) 03:14:34.55ID:???
2018/02/28(水) 09:06:05.99ID:???
>>867
jsじゃないから他所いけ
jsじゃないから他所いけ
2018/02/28(水) 09:48:06.70ID:???
jQueryというライブラリを使ってるだけでJavaScriptだよ
2018/02/28(水) 14:54:28.28ID:???
料理の為の質問スレと言っても
料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う
ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り
料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う
ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り
2018/02/28(水) 17:55:22.17ID:???
nativeのjsスレですよー
2018/02/28(水) 18:05:34.10ID:???
nativeオンリーならDOM関連の質問は全部jQueryスレに行ってほしい
jQueryならサラッと書ける回答を素のJSで書くのダルい
もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ
jQueryならサラッと書ける回答を素のJSで書くのダルい
もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ
2018/02/28(水) 18:41:59.13ID:???
だるいなら回答やめればいいんじゃね
2018/02/28(水) 20:19:31.72ID:???
だるいって言うのはまあ良いんじゃない
でもできないって言うのはやっぱり良くないと思うから
初心者には素のJSで教えるべきだよ
基本的にライブラリは背景を理解しとかないとね
これは電子レンジでチンすればできるものということしか知らないのと
暖める必要があるから電子レンジを使うということを知っているのと
電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う
でもできないって言うのはやっぱり良くないと思うから
初心者には素のJSで教えるべきだよ
基本的にライブラリは背景を理解しとかないとね
これは電子レンジでチンすればできるものということしか知らないのと
暖める必要があるから電子レンジを使うということを知っているのと
電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う
2018/02/28(水) 20:36:18.20ID:???
2018/02/28(水) 21:02:42.15ID:???
2018/02/28(水) 21:05:54.42ID:???
2018/02/28(水) 21:24:00.39ID:???
回答だけが欲しいなら専門サイトでやれ
ここは5chだぞ
発言に優劣は無いし急かされる理由もない
ここは5chだぞ
発言に優劣は無いし急かされる理由もない
2018/02/28(水) 21:27:16.25ID:???
俺は回答がしたいだけやで?w
2018/02/28(水) 23:08:12.41ID:???
ライブラリ禁止なんてどこに書かれてんの?
2018/02/28(水) 23:26:20.17ID:???
javascript自体勉強したいんだけどコード書くような本は全部jqueryなんだよなぁ
2018/02/28(水) 23:30:02.91ID:???
887Name_Not_Found
2018/02/28(水) 23:58:02.30ID:S6UN6FH7 なんか変な争い始まってんなwwww
個人的にはどっちでもいいが
求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。
個人的にはどっちでもいいが
求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。
2018/03/01(木) 00:12:45.81ID:???
2018/03/01(木) 05:48:18.21ID:???
2018/03/01(木) 09:14:37.23ID:???
エラーが出てないのにe.preventDefaultが機能しない
のって経験上何か思い当たる?
のって経験上何か思い当たる?
2018/03/01(木) 10:01:16.14ID:???
stopPropagation()と勘違いしてる
2018/03/01(木) 12:18:04.61ID:???
アロー関数式とfunction式って挙動に何か違いあるの?
2018/03/01(木) 12:26:33.76ID:???
>>892
thisの扱いが違う
thisの扱いが違う
2018/03/01(木) 12:35:10.71ID:???
分かった、じゃあ(function(){〜}).bind(this)と()=>{〜}の違いは?
2018/03/01(木) 13:11:25.38ID:???
>>894
クロージャーを作るかどうか
クロージャーを作るかどうか
2018/03/01(木) 13:14:34.52ID:???
嘘乙。
2018/03/01(木) 19:50:57.79ID:???
アロー関数ってリテラルやろ?
だったらfunnction命令と違ってかならず
呼び出す前に定義をかかないといけない。
と適当に書いて見る。
適当に突っ込んどいてくれ。
だったらfunnction命令と違ってかならず
呼び出す前に定義をかかないといけない。
と適当に書いて見る。
適当に突っ込んどいてくれ。
2018/03/01(木) 20:09:16.53ID:???
2018/03/01(木) 20:54:20.28ID:???
同じじゃないぞ
var aaa;
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bbb"
aaa = ()=>{};
aaa.name;
=> "aaa"
chromeなに勝手に無名関数に名前付けてんだよ…
var aaa;
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bbb"
aaa = ()=>{};
aaa.name;
=> "aaa"
chromeなに勝手に無名関数に名前付けてんだよ…
2018/03/02(金) 01:20:32.20ID:???
>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).
狐とクロムだけが対応してる仕様てことじゃないの?
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).
狐とクロムだけが対応してる仕様てことじゃないの?
2018/03/02(金) 04:22:09.61ID:???
2018/03/02(金) 04:23:26.12ID:???
aaa = function (){}
aaa.name
=> "aaa"
aaa.name
=> "aaa"
2018/03/02(金) 06:44:12.48ID:???
>>901
へぇ、ブラウザ何?
へぇ、ブラウザ何?
2018/03/02(金) 06:48:59.74ID:???
く
2018/03/02(金) 09:32:42.74ID:???
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
Bound function names
Function.bind() produces a function whose name is "bound " plus the function name.
function foo() {};
foo.bind({}).name; // "bound foo"
Bound function names
Function.bind() produces a function whose name is "bound " plus the function name.
function foo() {};
foo.bind({}).name; // "bound foo"
906Name_Not_Found
2018/03/02(金) 10:32:50.96ID:LbN5BTkq DHCってもともとは翻訳会社なんだぜ
知らんと思うが
知らんと思うが
2018/03/02(金) 10:37:50.11ID:???
ドコサヘキサエン酸だっけ?
2018/03/02(金) 10:41:55.31ID:???
2018/03/02(金) 11:11:37.76ID:???
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
bind() 関数は、新たな関数(束縛された関数 = a bound function; BFとも)を生成して返します。
BF は 特殊関数オブジェクト (exotic function object; ECMAScript 2015からの用語) であり、
元の関数オブジェクトをラップします。BF を呼び出すとラップされた関数が実行されます。
新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの?
bind() 関数は、新たな関数(束縛された関数 = a bound function; BFとも)を生成して返します。
BF は 特殊関数オブジェクト (exotic function object; ECMAScript 2015からの用語) であり、
元の関数オブジェクトをラップします。BF を呼び出すとラップされた関数が実行されます。
新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの?
2018/03/02(金) 11:41:17.42ID:???
ならnewは?
レス数が900を超えています。1000を超えると表示できなくなるよ。
ニュース
- 【ラジオ】永野芽郁、田中圭との不倫疑惑後初の『ANNX』で謝罪「誤解を招くような行動…反省」「本当にごめんなさい」★3 [Ailuropoda melanoleuca★]
- いじめられていた記憶しかないが…年収2500万円・身長180に急成長・妻も美人なエリート男性が初めて行ってみた「同窓会」 [パンナ・コッタ★]
- 【テレビ】芦田愛菜“好きな納豆の食べ方”語る「週に2〜3回くらいは食べますよ」 [湛然★]
- 自民幹事長 中国の国際交流団体トップにパンダ貸与継続 求める [香味焙煎★]
- 【移民】日本史上初めての中国人の大量移住が始まる ★5 [ぐれ★]
- コメ5キロ、最高値4220円 16週連続上昇、前年比2倍 ★3 [蚤の市★]
- 【実況】博衣こよりのえちえち朝こよ🧪★1
- 中国「今年の7月、日本が危ないらしいから不動産購入は慎重にな」自国民に注意喚起😫 [583597859]
- 借金のせいで完全に精神おかしくなった、死ぬことばっか考えてる
- 【祝】コメ、16週連続値上がり 自民党とJAが悪い [402859164]
- エッホ、エッホ、エッホ、お🏡が立ったって伝えなきゃ
- セブンイレブンの冷凍麻辣湯、ガチで美味そうだと話題に [183154323]