+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
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にして見えないようにしてください。文句をつける＝荒らしです js初心者です。
var accounts = {
'mail@address1': 'user1',
'mail@address2': 'user2',
...
'mail@address100': 'user100',
'mail@address n': 'user n',
}
このように別のプログラムで使用してるオブジェクト型の文字データがありましてそれを利用したいのですが
うまく行かないので教えてください。
オブジェクトのデータの登録数は不定の為、メールアドレスとユーザー名を1セットと考え総数をカウントしたいのと
n番目のメールアドレスとユーザー名を文字列データで取得したい。
全部を読み取って文字列配列にいれてもOKですし、n番目のデータは何と返すだけでも構いません。
例えば 登録総数111で100番目のデータを取得した場合
100/111 のデータは、ユーザーはuser100でアドレスはmail@address100です のように出来るとありがたいです。 スクレイピングのサイト巡回を自動化するスクリプトかいてて
テストでクロムの開発者ツールでいろいろためしているんだけど
ログインが必要なサイトで名前とかのフォーム入力まではできたのですけど
それをsubmitするほうほうがわかりません。
｢送信｣ボタンのセレクターからノード?オブジェクトを取得。
例えば var button = document.querySelector('セレクター')
それにbutton.submit()という感じでsubmit()をつけてみたけど↓みたいなエラーがでます
どうすればいいのでしょうか?
button.submit()
VM775:1 Uncaught TypeError: button.submit is not a function
at <anonymous>:1:8
とコンソールにエラーがでます 配列はfor かfor of
for in はオブジェクとって本に書いてた >>365
自分も初心者だとことわっておくけど
mapオブジェクト使えば?
マップオブジェクトの作成
var mail = new Map()
中身の追加
mail.add('name3','address3')
IDとの名前の対応表を作成
var id = {1:"name3"}
要素数の取得
var size = mail.size
console.log(size)
名前からアドレスの取得
console.log(mail.get('name3')) >>366
自己解決しました
formエレメントの要素オブジェクトにsubmitをつけるんですね >>365
Object.keys(accounts)でキーの配列を取得できる
総数が欲しいならObject.keys(accounts).length
ES2017からはObject.entries(accounts)が理想的
ただし順序は保証されない
可能ならオブジェクトは避けるべき >>370,373
ありがとうございます！
一歩先にすすめそうです <div ng-if="vm.isProgressBarShowing()" qa-value="{"label": 90,"percentage" :0.9}"
qa-id="jss-score" eo-round-progress="" round-progress-model="vm.roundProgressData"
round-progress-width="210" round-progress-height="210" round-progress-outer-circle-width="15"
round-progress-outer-circle-radius="95" round-progress-label-font="40pt Gotham SSm" class="ng-scope"><canvas width="210" height="210" class=""></canvas></div>
これから一行目のqa-valueの90を正規表現でstringを解析する方法以外で取り出す方法ってありますか?
obj.qa-valueとかobj.qa-value.labelではとりだせないのですが >>375
そりゃあるだろうけど、それってangularだよな？
angularのやり方でやれば良いんじゃないの？
まあ俺はそのやり方を忘れたけどなｗ
アレだろ？jsの変数にバインドされてるってやつ >>376
angularってやつなのですか。
聞いたことはありますが全く知らないです。
勉強しないといけないことおおすぎる。。。 obj.getAttribute('qa-value')でとれました!!!!
感動!!! とれるっていうのならそうなんだろうけどさ
angularのやり方じゃねーぞ？
それで良いのか悪いのか知らんけどさ
普通は正しくないやり方だろうな 勝手なやり方をしたら、ダメ！
フレームワークのやり方に従っていないのなら、誤動作を起こす
Angular を勉強すべし >>364
最初配列でやってたのですがA,値,B,値という形もあり、
また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。
どうもでした。 >>380
jQueryもやりたいんだけど
AngularとjQueryどっちをさきにやればいい? 何を目指すかによる
JavaScript必須なページを作りたいならAngular 今一番やりたいのはスクレイピングで
次にデータ可視化なんで
サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど
jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど
JavaScriptの勉強一通りおわったら
Angurlarやってみることにしました
そのあとD3やるかな
ほんでひつようそうだったらjQueryやるかな
やることおおすぎ。。。 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.match(/\<tag\>(.*?)\<\/tag\>/g);
console.log(r);
とすると結果は
["<tag>hoge</tag>", "<tag>poge</tag>", "<tag>fuge</tag>"]
になります
つまりグループ化した部分を取り出していません
gスイッチを使った場合はグループ化を使えないのでしょうか？
こういう場合どうするのがいいのでしょうか？ スクレイピングなら、Angular なんて関係ない。
君が、たまたま、Angular製のページを対象にしただけだろ
JavaScript なら、jQuery は必須
Ruby で、Nokogiri とか、
Selenium WebDriver, PhantomJS とか、
Chromium, Chrome のヘッドレスモードとか >>385
グループ化した部分ってどこ？
グループ化って何のこと？ >>385
jQuery を使え
$('tag').text(); >>387
(.*?)のことです
正規表現において一般的な用語だと思いますが 結局、jQuery でも、Ruby のNokogiri でも、
取得する要素を、CSS セレクターで指定するのは同じ
上はjQuery、下はNokogiri
$('tag').text();
doc.css('tag').text
xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる 正規表現では、データに親子関係のような構造があるものは、うまく取れない
<tag1><tag2></tag2></tag1>
このように要素がネストしていると、<tag1></tag2> が対応してしまうから
jQuery とか、Ruby のNokogiri で、
取得する要素を、CSS セレクターで指定する 失礼、(.*?)だけを取り出したいってことか
gフラグは正規表現全体で配列にする
ので、こんなのしか思いつかない
let s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
let regex = /\<tag\>(.*?)\<\/tag\>/;
let result = [];
while(s){
s = s.replace(regex, (...args) => {
result.push(args[1]);
return '';
})
}
console.log(result);
入れ子は考慮せず
そこまでやると複雑すぎてどうにもならない >>392
while(s)
じゃなくて、
while(regex.test(s))
のほうがいいかも
DOM（jQueryでもできるはず）で、
let div = document.createElement('div');
div.innerHTML = s;
let elements = div.querySelectorAll('tag');
// で、各elementsのtextContentを取得
というのもありかと
タグの入れ子は考慮せず String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」
RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
根本的に参照が間違っている HTMLタグならHTMLパーサーやXMLパーサーが使えるけど
正規表現はセパレーターがタグ（<>記号で囲まれた文字列）でない場合でも使える var resAry = [];
function replacer(match, p1) { resAry.push(p1); };
var oldStr = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var re = new RegExp('\<tag\>(.*?)\<\/tag\>', 'g');
// 第2引数は、コールバック関数
oldStr.replace(re, replacer);
console.log(resAry); // ["hoge", "poge", "fuge"]
String.prototype.replace()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。
js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな？
それにしてもプロトタイプベースのメジャー言語なさすぎじゃ… あ、お題はこれでいいんじゃないか？
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/g).filter(item => item !== '');
console.log(r); // ["hoge", "poge", "fuge"] すまん空文字列はfalsyだから比較要らんわ訂正
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/g).filter(item => item);
console.log(r); // ["hoge", "poge", "fuge"] グローバルスイッチも要らんかった…
これからゲームしようと思ってたけどもう寝とくわ…
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/).filter(item => item);
console.log(r); // ["hoge", "poge", "fuge"] クラスベース言語が多いのは皆C++に影響を受けているから
多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ
C++がクラスベースなのはCの構造体からの自然な発想
CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない
JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で
生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから
また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い
クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い よっしゃジャバスクリプトの勉強始めるで！
お前らよろしく！！！！！！！！！！！ プロトタイプベースは型システムとの相性が良くない, 気がする htmlをStringで参照していることが笑えるｗ 独学で参考書をペン片手に読んでる。今2冊目。
読み終えたところまでのコード解読はいける。
まだまだ何もできないけど
まずは基礎知識の積み重ねが大事だなと深く感じてる ペン片手は駄目 キーボード片手でないと
とにかくサンプルを試して、自分で改変して仕組みを学び
分からない所は調べてそのうち１%でも理解したような気になるようにする
本はあくまで導入と思うこと いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。 なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。
>>408もいいアドバイスだと思うんだが。
もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。
しかしそもそもどういう意図で>>407書き込んだんだ？
エライエライ頑張れして欲しかったのかな？ jQuery で作った
var oldStr = '<div>hoge</div><div>poge</div><div>fuge</div>';
$('body').append(oldStr);
var resAry = [];
$( 'div' ).each( function(){ resAry.push( $(this).text() ); } )
console.log( resAry ); // ["hoge", "poge", "fuge"] やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ
こればかりは人によって違うもの。 まだまだ何もできないのにどうしてそれが最善なの？
その人の最善の方法見つけるには他の方法も試さなきゃダメでは？
合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは？ jQueryありなの？ならこうするわ。
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = $(s).get().map(item => item.innerHTML);
console.log(r); // ["hoge", "poge", "fuge"]
rのとこは
var r = $(s).map(function() {return this.innerHTML}).get();
でもいいけど。
上のmapはjavascriptネイティブのmapでこっちはjQueryのmapね念のため。 var r = $(s).get().map(item => item.innerHTML);
var r = $(s).map(function() {return this.innerHTML}).get();
var r = $.map($(s), item => item.innerHTML);
jQuery.mapを使ったほうが僅かに短いよ ほんまや！
速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。
もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。 その人の最適な方法とかいう魔法みたいなものはない
人間の脳はニューラルネットと同じなんだから
Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上
沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない
ブロックを積み上げるように体系的に学ぶのは無理
薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い >>421
お前Changelogに○○を最適化しましてって
書いてあったら、それは最適な方法じゃないって
いちいちツッコむのか？ その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した！という意味ではないだろう。
virtual→仮想と並ぶ近代クソ訳語のひとつ。 他者を認められない受け入れられないというのも
自分の、個人の考え方やり方なんだよね >>424
初心者と今活躍してる業界人とじゃけして平等ではないからな
色んな人に教えて自身でも色々失敗してきた経験を元に
無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき onclick="javascript:ac_tracer(
って何でしょうか？ボタン画像を挟む<a>タグ内にあります。 イベントハンドラの設定方法のひとつです。
今回の場合onclickなのでクリックイベントのハンドラ。
クリックするとそこに書かれたJavaScriptコードが実行されます。 ありがとうございます。
このac_tracerというのは何でしょう？ >>429
ブラウザの検証機能でコードを見るのが早い >>429
昔昔あるところに太郎という人が居ました
この太郎というのは何でしょう? >>429
銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう？ あるところにおじいさんとおばあさんがいました。
さて私は誰でしょう？ >>429
関数です。
ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。
つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。 >>433
> この太郎というのは何でしょう?
人の名前では？ >>440
そうだねイベントハンドラの設定方法のひとつだね >>435
> あるところにおじいさんとおばあさんがいました。
> さて私は誰でしょう？
そんなことよりよ、桃太郎の
おじいさんとおばあさん、子供がいないらしいぜ？
ってことは、おじいさんとおばあさんじゃないよな？
子供ができたら、やっとおとうさんとおかあさんになるはずだ
孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる
っていうか、子供いないのに孫を養子に取ることってできるのかよ？
孫悟空の孫じゃないぞ。子供の子供という意味の孫だ 歳的な意味での爺婆だし
子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし
桃太郎から見たらお父さんお母さんでも
全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う >>442
でもお前甥も姪もいないのにおじさんじゃん。 >>442
【お祖父さん】 祖父(そふ)の敬称。
【お爺さん】 男の老人の敬称、また親しんで言う語。 localStorageやsessionStorageなどwebStorageには文字列値しか保存できないとMDNで読んだ
でも[ 3, 6, 1, 23 ]や[ 'apple', 'orange', 'kiwi' ]など単純な配列は
特に変換することなしに、そのままsetItem()/getItem()できているようにみえる
値を取り出してすぐ直接push()やslice()などで操作できるしindexOf()もできてる
これはどういう理屈でこういう挙動になるんでしょうか？ブラウザが勝手にやってくれてる？配列関数が優秀？
試したのはMacのSafariとWindowsのFirefoxでsessionStorage利用 http://sdsoffice.com/tools/homepage-patrol-v2b.html
上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。
windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、
htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。
(巡回してくれない)
windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。
windows8.1でエラーになる原因がわかりません。
お詳しい方、力になっていただけないでしょうか?
よろしくお願いいたします。 別フレームに指定の複数のページをランダム時間（何分から何分の間ランダム）で表示する。
の参考資料とかありませんか？
十数年前「html」だったのか「javascript」か覚えていないけど
色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・
よかったら教えてください。 >>448
そもそも普通は、crossOrigin (CORS)アクセス禁止だろ
自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。
iframe 内に、他のドメインのページを読み込んでも、
iframeの内外で、異なるサイトになるから、アクセスできない
自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。
または、ネット上のそういうサーバーを利用するとか
以前使えていた、Yahoo Query Language (YQL) も、使えなくなった aからbまでの間でランダムは
a+(0からb-a)までランダムと表せられる
つまりa+Math.random()*(b-a)となる >>449
「iframe ランダム表示」で検索！
iframe 内に、他のドメインのページを、ランダムに読み込む あるある質問かもしれませんが
Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか？
単独のフリーソフトでも良いですし
atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが
windows7を使っています <iframe src="#" id="ifrm"></iframe>
<script type="text/javascript">
window.onload = function(){
var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];
// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );
var ifrm = document.getElementById('ifrm');
ifrm.src = urls[idx];
}
</script>
これを、<body>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる >>449
「jquery plugin カルーセル」で検索！
jQuery Plugin を探す方が、簡単かも >>453
「javascript コメント 削除 ツール」で検索！ >>456
ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました >>449
454 を修正した。
ランダム時間は難しくてできない。一定時間ならできる
以下を、<body>タグの中に書いて実行すれば、5秒毎に、違うサイトが読み込まれる。
タイマーを止めるには、clearInterval を使う
<iframe src="#" id="ifrm"></iframe>
<script type="text/javascript">
window.onload = function(){
var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];
var ifrm = document.getElementById('ifrm');
var timerID = setInterval(function () {
// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );
ifrm.src = urls[idx];
}, 5000); // 5分なら、5 * 60 * 1000 とする
}
</script> 458 を修正した
setTimeout() で、最初から表示する。
その後、setInterval() で、一定時間ごとに表示する
<iframe src="#" id="ifrm"></iframe>
<script type="text/javascript">
window.onload = function(){
var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];
var ifrm = document.getElementById('ifrm');
function setExternalWebsite() {
// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );
ifrm.src = urls[idx];
}
setTimeout(setExternalWebsite, 0); // 最初から表示する
// 5分なら、5 * 60 * 1000 とする
var timerID = setInterval(setExternalWebsite, 5000);
}
</script> >>459
setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで 問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い >>461
それってスタックオーバーフローしないの？ ■ このスレッドは過去ログ倉庫に格納されています
