元スレ+ JavaScript の質問用スレッド vol.130 +
JavaScript覧 / PC版 /みんなの評価 :
601 = :
>>600
async func内で無名関数作ったら自動でasync func になるか、async funcにしないと警告するようにできないもんかね。
あとawait記入漏れも地味にきつい。これもlintツールでチェックして欲しい
602 = :
>>601
できるだろうけど、そうすると互換性がなくなるので
それならCoffeeScriptの二の舞いになって
結局使われなくなる
603 = :
asyncにし忘れはawait書いた時点で構文エラーになるんだから実際は問題ない
await書き忘れもちょっとしたミスで変数に意図しない型が入ってそのまま進んでしまうという
動的型付け言語のよくある問題点だしデバッグには慣れてるでしょ
605 = :
とりあえずconsole.logでcsvの入力が処理できてるか確認したら?
そしたらcsv云々の質問はまるまるカットできる。
問題を切り分けるところから始めようか
606 = :
とりあえずパッと見て思ったのは
・document.writeは使うな
・XMLHttpRequestは使うな
・opel (#test)ってなんだ?使われてないが
・selectがないぞ
・CSVの構造がわからん
だな
607 = :
>>605
CSVの入力はできています。
>document.writeしたらその部分以外が出ない
→document.write('<option value="'+result[i][1]+'">'+result[i][1]+'</option>'); ×CSV行数
=<option value="[数字]”>[数字]</option>のタグになってるかはわからないですが
×CSV行数</option>前の数字は表示されているので。
というか・・・できるはずだと思っていたのですが、document.writeを書くと
真っ白になるんですよね、上記表示以外が。
consol使ったこと無いのでググってきます・・・
608 = :
>>606
ありゃ失礼
・opel→innerHTMLに書き換えようとして設定した変数。
しかしinnnerHTMLではfor文で繰り返し出力ができないんじゃね?でdoument.writeに変えた
使い慣れてたし(化石)
・CSVの仕様
PerlCGIでよく使うログファイルといっしょ。UTF-8になってるが。
1,ねこ,くろ
2,いぬ,しろ
selectは消しすぎたごめん(改行多すぎって怒られた)
<body bgcolor="black">
<form method="post" name="info">
<div class="title">ろぐびゅーわ</div>
<div class="element-select">
<div class="small"><span>
<select name="id" >
<script type="text/javascript">
611 = :
全部書くのめんどいからヒントっぽく書くと
var foo = '';
for(){
foo += '<option>';
}
select.innerHTML = foo;
ってすればいい
612 = :
>>611
できました!!
変数+=は初めて見ました。こんなのあるんですね。
みなさん感謝!
613 = :
でも古臭くて今となっては誰もやらないやり方だからな
615 = :
document.write は、文書自体をすべて一旦破棄してから上書きするから、使うな
XMLHttpRequest は、jQuery の、ajax を使う。
初心者には、jQuery は必須だから、検索して
$("#test").text("hello world!");
「セレクタ.動作」の構文で、該当するセレクタすべてに対して、ある動作をする。
つまり、ループ処理と同じ
618 = :
>>615
初心者にはjQuery必須とかいうのヤメレ
document.querySelector('#test').textContent = 'hello world!’;
620 = :
Web制作板の癌はjQuery必須なんて馬鹿な落書きをしに巣から出てくんなよ
623 = :
const o = document.getElementById('o');
const f = (n) => (e) => {
console.log(n, e);
};
o.addEventListener('click', f(1), false);
(n) => (e) =>っていう2個書く書き方をよく知らないんですがなんですかこれは?
なんでこれでnとeが使えるんですか?
624 = :
>>623
const f = function(n){
return function(e){
console.log(n, e);
}
};
なので
o.addEventListener('click', f(1), false);
は
o.addEventListener('click', function(e){
console.log(1, e);
}
, false);
になる
625 = :
>>623
関数の戻り値がまた別の関数になってる
カリー化ともいう
nが使えるのはその戻り値の関数もまたのfの範囲内だから
ちなみに
const f = n => e => console.log(n, e);
でもいい
ただJavaScriptでカリー化することなんてあるか?
Haskellみたくデフォルトでカリー化されてるわけじゃないんだしメリットが見当たらん
627 = :
まあ正直みづらいよね
629 = :
>>618-619
一番単純な例を出してドヤ顔するのやめれw
jQueryはその一番単純な書き方で複雑なことができるんだよ
例えば
document.querySelector('#test').textContent = 'hello world!’;
に相当するjQueryの書き方は
$('#test').text('hello world'); だが
全てのclass=testの要素に文字を入れるのもほぼ同じ書き方でよい
$('.test').text('hello world');
630 = :
モダンなJSは難しいな
631 = :
> でいいのに何で冗長な書き方するかね
test.textContext = 'hello world';
$('#test').text('hello world');
jQuery使ったほうが短いっていうねw
なんで冗長な書き方するかね?
633 = :
node.jsはサーバー側アプリを作るものだから関係ない
まあ正確に言えばブラウザ用のJavaScriptファイルを
"ビルドして" 作ることも有るからサーバー用限定ではないが、
少なくともブラウザで直接動かすためのものじゃない
634 = :
>>625
> 関数の戻り値がまた別の関数になってる
> カリー化ともいう
それはカリー化ではない。
カリー化は、引数を取る普通の関数を
特殊な形式の関数に変換すること
foo(a,b,c) という使い方をするfoo関数を
foo2(a)(b)(c) という使い方ができる別の関数に変換すること
>>623は関数を返す関数ってだけなのでカリー化ではない
JavaScriptでカリー化をする必要はないっていうのは理解できるが、
関数を返す関数はときたま使う
ある関数に同じ引数を何度も渡すのであれば、
部分適用を行って何度も渡さないようにできるし、
別のもう少し具体的な例をだすと
[{a: 1, b: 2}, {a: 11, b: 22}, {a: 111, b: 222}] みたいなデータが有って
aの項目でソートするか、bの項目でソートするか、選べるようにしたい時
aでソートする関数、bでソートする関数の2つを作る代わりに、
ソートする項目名を引数にして「ソートする関数」を返す関数
なんてのを作る時に使う
635 = :
>>623
> (n) => (e) =>っていう2個書く書き方をよく知らないんですがなんですかこれは?
アロー関数が2つくっついたってだけなだな。
function(n) {
return n+1;
}
という関数を(thisの扱い以外)同等のアロー関数で書くと
(n) => {
return n + 1;
}
一行で書いて
(n) => { return n + 1; }
{}とreturnを省略して
(n) => n + 1
n+1の部分が (e) => { console.log(n, e) } だったら?
(n) => (e) => { console.log(n, e) }
636 = :
react学ぼうと思うんですがオススメの書籍教えてください
637 = :
>>634
あーごめん、変な間違いしてしまった
関数を返す関数は高階関数の範疇やね
638 = :
>>637
また間違えた
いや、確かに関数を返す関数は高階関数の範疇なんだけど、今回のケースは特に部分適用って言った方がいいな
厳密に参照透明にこだわりたいなら使うのも良いと思うけど、ほとんどクロージャで対応しちゃうなあ
>>623なら
const n = 1;
o.addEventListener('click', e => console.log(n, e), false);
で済むし、ソートする場合も
xs => _sort(xs, 'a')
みたいな無名関数で対応してることが多い
JavaScriptの部分適用は何か無理やり感があって個人的に苦手だ
639 = :
そんな貴方にこの仕様がオススメ
http://github.com/rbuckton/proposal-partial-application
今のままだと身になる可能性は5割程度
議論に参加し支援してStageを上げよう!
640 = :
jQuery を使っていないと、各ブラウザに対応できないから、
自分で各ブラウザの違いを調べて、コーディングしなければならないから、無理
>>636
入門 React ――コンポーネントベースのWebフロントエンド開発、2015
WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron
641 = :
各ブラウザの違いというけど今のモダンブラウザに違いは殆どないよ
逆に残っている違いってjQueryでも同じく対処が難しいなものばかり
(例えばfile選択キャンセルの監視とか)
あとはIEに対応するかどうかだけど、他にもAPIのポリフィル噛ますのと
同じようにIEにもポリフィル用意するほうが良いと思う
642 = :
o.addEventListener('click', function(e) {}, false);
ってするとダメで
const f = (e){}
o.addEventListener('click', f, false);
がメモリにいいとか無駄に関数が作られないとか何とか昔呼んだ気がするけど
理由はよく知りません
643 = :
>>641
> 各ブラウザの違いというけど今のモダンブラウザに違いは殆どないよ
そう思うならjQueryのソースコード見てみれば?
特定のブラウザ(機種)用のワークアラウンドがいくつも有る
仕様において違いはなくても、バグがあったりするわけ
特定の環境のみで起こるバグだから見つけるのは大変
644 = :
ライブラリなんだから好きにすればいい
スレ違い
645 = :
>>643
そもそも全く同一に動かそうというのが間違いなのでは?
しかも普通その必要があればオーサリングツール使うよね
646 = :
ゲームのBGMで繋ぎ目が分からないシームレスなループ再生をしたいのですが一般的にはどんな方法がありますか?
Web Audio APIにはloopStartやloopEndがあるので可能ですがこれは短い音声の再生用でBGMには向かないとか・・・
647 = :
普通にaudio要素のloop属性や秒数指定で十分じゃないかと思うけど
本当に完璧に無くしたいんならAudioWorklet使うしか無いんじゃね
649 = :
>>647,648
ああその用途ならこれ、といったものは無さそう?
もう少し調べてなんとかしてみます ありがとうございました
650 = :
>>645
あんたが言ってるのは、同一じゃなくても(違いがあっても)
動いてるなら良いじゃないって話でしょ?
俺が言ってるのは、特定のブラウザだけバグや仕様の違いで
動かないって話だよ。
http://code.jquery.com/jquery-3.2.1.js
例えばms-プレフィックスがついて動かないとか
// Support: IE <=9 - 11, Edge 12 - 13
// Microsoft forgot to hump their vendor prefix (#9572)
セレクタのバグに対応する
// Support: IE8, Opera 11-12.16
// Nothing should be selected when empty strings follow ^= or $= or *=
// The test attribute must be unknown in Opera but "safe" for WinRT
//http://msdn.microsoft.com/en-us/library/ie/hh465388.aspx#attribute_section
とか
// Support: Chrome<29, Android<4.4, Safari<7.0+, iOS<7.0+, PhantomJS<1.9.8+
とか
// Webkit/Opera - :checked should return selected option elements
//http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
// IE8 throws error here and will not see later tests
とか
// Support: Safari 8+, iOS 8+
//http://bugs.webkit.org/show_bug.cgi?id=136851
// In-page `selector#id sibling-combinator selector` fails
とか
類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.130 + (974) - [100%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
- + 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.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.135 + (1002) - [97%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.140 + (1001) - [97%] - 2019/9/19 10:45
- + JavaScript の質問用スレッド vol.120 + (1002) - [97%] - 2014/11/8 1:15
- + JavaScript の質問用スレッド vol.100 + (1001) - [97%] - 2012/6/13 22:46
- + JavaScript の質問用スレッド vol.113 + (1001) - [95%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.118 + (1002) - [95%] - 2014/8/29 22:30
トップメニューへ / →のくす牧場書庫について