+ 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にして見えないようにしてください。文句をつける=荒らしです 「考え」は書くな 「答え」を書け ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ 書いてもいないライブラリやフレームワークが答えの場合だってあるだろ? ってか答を知らないから質問する訳で 答を質問に書くわけがない お前らwshスレって落ちました? 質問しようとしたらスレッド一覧にない・・・ 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。 (A, B)の場合は共に実行。 関数内は、A、Bそれぞれ同じ処理。例えば$('#hoge-' + A).〜。 処理は長いのでif分岐は重複が多すぎ。 yobidasi(A); yobidasi(A, B); function func1(arg1, arg2){ func2(arg1); if(arguments.length === 2){func2(arg2)}; function func2(arg){ $('#hoge-' + arg).〜; $('#hage-' + arg).〜; } } より簡単な書き方教えてください。 そもそもfunc(A);func(B);で良くねとは思うけど function func(...args) { for (let arg of args) { // $('#hoge-' + arg).〜; // $('#hage-' + arg).〜; } } > 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。 > (A, B)の場合は共に実行。 その(A, B)をやめろって話だな >(A, B)をやめろ そうなのですが、すると yobidasi(A); yobidasi(B); となり、yobidasiの類は20種類あるので40行になってしまいまして。 yobidasi(A), yobidasi(B); で良いじゃん >>351 forループはオブジェクトのみ推奨って先生が言ってなかったっけ? >>355 その「先生」は担任の先生って言う意味で素人だろw >>357 google先生だろ SEO少しでもかじったのならすぐピンとくる >>358 オマエ馬鹿だろ JavaScriptって知ってるか? > forループはオブジェクトのみ推奨って先生が言ってなかったっけ? これがSEOと関係があるとでも? ないない Objectのみ推奨ってのはfor-inのことだろ >>353 >>351 でもいいけど、 とにかく君に一番必要なことは配列を覚えることだな 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のやり方でやれば良いんじゃないの? まあ俺はそのやり方を忘れたけどなw アレだろ?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で参照していることが笑えるw 独学で参考書をペン片手に読んでる。今2冊目。 読み終えたところまでのコード解読はいける。 まだまだ何もできないけど まずは基礎知識の積み重ねが大事だなと深く感じてる ペン片手は駄目 キーボード片手でないと とにかくサンプルを試して、自分で改変して仕組みを学び 分からない所は調べてそのうち1%でも理解したような気になるようにする 本はあくまで導入と思うこと いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。 なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。 >>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利用 ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる