私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.135 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
>>701
難しいかどうかはその人のスキルによるとしか。。。
難しいかどうかはその人のスキルによるとしか。。。
困難かという意味ではそうでもないかも
parentNodeのChildNodesを、その要素以降順に見ていくだけだから
ていうか、jQueryだってJSで書かれているわけだしね
parentNodeのChildNodesを、その要素以降順に見ていくだけだから
ていうか、jQueryだってJSで書かれているわけだしね
質問を変えて、jQueryの.nextUntil()をDOM API以外のライブラリを使わずに
10行以内（セミコロン不使用、横80文字まで、普段やらない書き方を使うのなし）で
作れるでしょうか？だったらどう？
10行以内（セミコロン不使用、横80文字まで、普段やらない書き方を使うのなし）で
作れるでしょうか？だったらどう？
まず親要素のquerySelectorAllで
セレクタにマッチする小要素を全部取り出しておく
目的の要素のnextSiblingが、上のマッチした要素群に含まれれば当たり
なければ次のnextSiblingを見る
なんとか80字でいけるか？
セレクタにマッチする小要素を全部取り出しておく
目的の要素のnextSiblingが、上のマッチした要素群に含まれれば当たり
なければ次のnextSiblingを見る
なんとか80字でいけるか？
全部取り出しておいてfilterしてもいいし、
ただ単に次の要素を見ていくだけのイテレータでもいい
５行くらいの関数で書けるんじゃない?
ただ単に次の要素を見ていくだけのイテレータでもいい
５行くらいの関数で書けるんじゃない?
function nextUntil(el, selector){
const result = [];
while(el = el.nextElementSibling){
if(selector && el.matches(selector)){
break;
}
result.push(el);
}
return result;
}
こんな感じか。matchesはIEで動かんからポリフィルを追加して
http://developer.mozilla.org/ja/docs/Web/API/Element/matches
const result = [];
while(el = el.nextElementSibling){
if(selector && el.matches(selector)){
break;
}
result.push(el);
}
return result;
}
こんな感じか。matchesはIEで動かんからポリフィルを追加して
http://developer.mozilla.org/ja/docs/Web/API/Element/matches
function * nextUntil ( el, sel ) {
while ( el = el.nextElementSibling && ! el.matches( sel) )yield el
}
while ( el = el.nextElementSibling && ! el.matches( sel) )yield el
}
>>711は単なる技術マウントだから無視してよい。
技術マウントだからと言って無視するか、
技術を勉強するか
どちらを取るかね？
技術を勉強するか
どちらを取るかね？
>>712
>>711は代入演算子と論理積演算子の優先順位を間違えているから結果がバグっている。
修正してオプションのfilter足してjqueryのnextUntilの
http://js.studio-kingdom.com/jquery/traversing/next_until
のデモと同じことする使い方を
http://codepen.io/anon/pen/VVwdQB
に上げた。
しかし結果を配列でまとめて取り出す使い方しかしないなら
http://codepen.io/anon/pen/YRzvWa
みたいになりわざわざジェネレータ使う意味ないしこんなことするなら>>708のほうがいいな。
>>711は代入演算子と論理積演算子の優先順位を間違えているから結果がバグっている。
修正してオプションのfilter足してjqueryのnextUntilの
http://js.studio-kingdom.com/jquery/traversing/next_until
のデモと同じことする使い方を
http://codepen.io/anon/pen/VVwdQB
に上げた。
しかし結果を配列でまとめて取り出す使い方しかしないなら
http://codepen.io/anon/pen/YRzvWa
みたいになりわざわざジェネレータ使う意味ないしこんなことするなら>>708のほうがいいな。
chromeだけど、dataスキームで新しいタグ開いてhtmlを表示させたいんだけど
data:text/html;云々をwindow.openするとabout:blankになってしまうたすけて
（data:text/html;云々を直接urlボックスにいれて移動、は表示される）
data:text/html;云々をwindow.openするとabout:blankになってしまうたすけて
（data:text/html;云々を直接urlボックスにいれて移動、は表示される）
>>725
再現コードをjsfiddleへUP
再現コードをjsfiddleへUP
>>723
そもそもがcのconst勘違いしてないか。
プリミディブ値ならjsのconstでも同じように使えるし、
cではjsのconst OBJ = {a: 1, b: {c: 2}};みたいにオブジェクト直接入れるみたいなことはそもそも出来ない。
ポインタ使うにしたってOBJ.aやOBJ.b.cなどメンバーを書き換えられてしまうことは同じ。
まあやりたいことは分かる…気がする…
以下にdeepFreezeの実装例出てるから参考にしてみたら？
http://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
こういうことでしょ？違う？
http://codepen.io/anon/pen/EQxJKB
そもそもがcのconst勘違いしてないか。
プリミディブ値ならjsのconstでも同じように使えるし、
cではjsのconst OBJ = {a: 1, b: {c: 2}};みたいにオブジェクト直接入れるみたいなことはそもそも出来ない。
ポインタ使うにしたってOBJ.aやOBJ.b.cなどメンバーを書き換えられてしまうことは同じ。
まあやりたいことは分かる…気がする…
以下にdeepFreezeの実装例出てるから参考にしてみたら？
http://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
こういうことでしょ？違う？
http://codepen.io/anon/pen/EQxJKB
>>726
いろんなサイトでconsole開いて実行したので、jsfiddleのコードに書いて実行してしまうと若干挙動が違う気がするので
具体的には
window.open('data:text/html;charset=utf-8,'+encodeURIComponent('<!DOCTYPE html><html lang="en"><body>hoge</body></html>'));
を適当なサイトでコンソール開いて実行
一応jsfiddleでもやってみたけどポップアップ禁止みたいなのが出てきた
http://jsfiddle.net/pLdojb9w/
ポップアップ許可するとabout:blank
いろんなサイトでconsole開いて実行したので、jsfiddleのコードに書いて実行してしまうと若干挙動が違う気がするので
具体的には
window.open('data:text/html;charset=utf-8,'+encodeURIComponent('<!DOCTYPE html><html lang="en"><body>hoge</body></html>'));
を適当なサイトでコンソール開いて実行
一応jsfiddleでもやってみたけどポップアップ禁止みたいなのが出てきた
http://jsfiddle.net/pLdojb9w/
ポップアップ許可するとabout:blank
ちなみに用途としては
とあるサイトの画像urlだけをスクレイピングして
htmlで新しいタブに<img src=>みたいに単純表示したいだけ
今までconsoleで<img src="">を出力してコピペ→テキストエディタでhtmlで新規保存
ブラウザで開いてウェブ丸ごと保存ってやってたのでめんどくさくなった
（別のスクリプトやアプリで画像urlだけ抽出してダウンロードしたらいいのではと思うし
都合が良いところはそれでやってるけど）
とあるサイトの画像urlだけをスクレイピングして
htmlで新しいタブに<img src=>みたいに単純表示したいだけ
今までconsoleで<img src="">を出力してコピペ→テキストエディタでhtmlで新規保存
ブラウザで開いてウェブ丸ごと保存ってやってたのでめんどくさくなった
（別のスクリプトやアプリで画像urlだけ抽出してダウンロードしたらいいのではと思うし
都合が良いところはそれでやってるけど）
あと、document.writeで上書き版もしたけど
ajaxでページロードしてる感じのとこだと続きの画像表示したいときに不便だった
ajaxでページロードしてる感じのとこだと続きの画像表示したいときに不便だった
dataURI直で新規タブ開いて中身反映されないのはセキュリティ理由によるもの
blob→objectURL化が必要
const blob = new Blob([ '<!DOCTYPE html><html lang="en"><body>hoge</body></html>' ], { type: 'text/html' });
const url = URL.createObjectURL(blob);
window.open(url);
blob→objectURL化が必要
const blob = new Blob([ '<!DOCTYPE html><html lang="en"><body>hoge</body></html>' ], { type: 'text/html' });
const url = URL.createObjectURL(blob);
window.open(url);
>>734
勉強になった
勉強になった
漏れは、Ruby で、selenium webdriver, Nokogiri を使って、
5ch の書き込み内から、画像リンクだけを取り出して、
Nokogiri で、img タグを構築して、そのsrc 属性に設定して表示している
ブラウザに、5ch のスレを表示して、結果はそれとは異なる、新しいタブに表示している
driver.execute_script "window.open()" # 新しいタブを開く
driver.switch_to.window ( driver.window_handles.last ) # 新しいタブへ移動する
ERB みたいな、HTML 内にRuby プログラムを書ける、
埋め込みテンプレートを使えば、もっと簡単にできるのだろうけど
5ch の書き込み内から、画像リンクだけを取り出して、
Nokogiri で、img タグを構築して、そのsrc 属性に設定して表示している
ブラウザに、5ch のスレを表示して、結果はそれとは異なる、新しいタブに表示している
driver.execute_script "window.open()" # 新しいタブを開く
driver.switch_to.window ( driver.window_handles.last ) # 新しいタブへ移動する
ERB みたいな、HTML 内にRuby プログラムを書ける、
埋め込みテンプレートを使えば、もっと簡単にできるのだろうけど
jsならコンソールやブックマークレットでできることをそんな大がかりにしてバカみたい。
で、何をやってるかと思えばjs呼び出してるだけｗｗｗ
そりゃそうだよなruうんこbyなんてブラウザで動かないもんなｗｗｗｗｗ
で、何をやってるかと思えばjs呼び出してるだけｗｗｗ
そりゃそうだよなruうんこbyなんてブラウザで動かないもんなｗｗｗｗｗ
>>739
> そりゃそうだよなruうんこbyなんてブラウザで動かないもんなｗｗｗｗｗ
いつの時代の話してるんだよｗｗｗ
Ruby2.0はChromeブラウザでネイティブに動くようになりそう
http://hoshi.air-nifty.com/diary/2012/05/ruby20chrome-d6.html
> そりゃそうだよなruうんこbyなんてブラウザで動かないもんなｗｗｗｗｗ
いつの時代の話してるんだよｗｗｗ
Ruby2.0はChromeブラウザでネイティブに動くようになりそう
http://hoshi.air-nifty.com/diary/2012/05/ruby20chrome-d6.html
>>740
皮肉キツいぜｗｗｗｗｗ
皮肉キツいぜｗｗｗｗｗ
echo.jsより容量小さい画像遅延読み込みのスクリプトってあんの？
RubyみたいなポンコツエンジンをNative Clientで走らせるとか愚の骨頂の考えだった
WasmにコンパイルしてJSエンジン上で走らせる方がよっぽどパフォーマンス出る可能性がある
WasmにコンパイルしてJSエンジン上で走らせる方がよっぽどパフォーマンス出る可能性がある
jQueryだと
$(window).on('resize', data, func);
のようにdataを与える事が出来ますよね。
それを
window.addEventListener('resize', data, func);
とは出来ませんが、どうやれば同じようにdataをfuncにパス出来ますか？
$(window).on('resize', data, func);
のようにdataを与える事が出来ますよね。
それを
window.addEventListener('resize', data, func);
とは出来ませんが、どうやれば同じようにdataをfuncにパス出来ますか？
>>747
内部的にクロージャーを使っているから
内部的にクロージャーを使っているから
えっ、なにが疑問なのかよく分かんない…
function chinko(data) {
return 'I love ' + data;
}
function manko(func, data) {
if (!data) data = func.name;
console.log(func(data));
}
let data = 'unko';
manko(chinko); //=> "I love chinko"
manko(chinko, data); //=> "I love unko"
function chinko(data) {
return 'I love ' + data;
}
function manko(func, data) {
if (!data) data = func.name;
console.log(func(data));
}
let data = 'unko';
manko(chinko); //=> "I love chinko"
manko(chinko, data); //=> "I love unko"
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.130 + (1001) - [97%] - 2017/11/25 20:45
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.130 + (974) - [97%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.105 + (1001) - [97%] - 2013/5/20 4:45
- + JavaScript の質問用スレッド vol.125 + (1001) - [97%] - 2015/10/7 17:45
- + JavaScript の質問用スレッド vol.118 + (1002) - [95%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.119 + (1002) - [95%] - 2014/10/3 15:30
- + JavaScript の質問用スレッド vol.117 + (1009) - [95%] - 2014/8/5 3:30
トップメニューへ / →のくす牧場書庫について