次スレはが(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
ttp://http://jsdo.it/ ttp://http://jsbin.com/ ttp://http://jsfiddle.net/ ttp://http://ideone.com/ ■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
※前スレ
+ JavaScript の質問用スレッド vol.137 +
ttps://mevius.5ch.net/test/read.cgi/hp/1546773073/ ttp://https://fiddle.jshell.net/6ksf2087/show/light/ ■参考URL
ダウンロード、CDN
ttp://http://jquery.com/download/ ブラウザサポート
ttp://http://jquery.com/browser-support/ jQuery UI
ttp://http://jqueryui.com/ jQuery UI ダウンロ－ド
ttp://http://jqueryui.com/download/ リファレンス等
ttp://http://alphasis.info/ ttp://http://www.jquerystudy.info/ ttp://http://js.studio-kingdom.com/ 【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
ttp://http://qiita.com/fmy/items/345a264a1cf2e2a73f62 jQuery
ttp://http://jquery.com/ jQuery UI
ttp://http://jqueryui.com/ jQuery Mobile
ttp://http://jquerymobile.com/ Lo-Dash
ttp://https://lodash.com/ Backbone.js
ttp://http://backbonejs.org/ Underscore.js
ttp://http://underscorejs.org/ AngularJS
ttp://https://angularjs.org/ Knockoutjs
ttp://http://knockoutjs.com/ RequireJS
ttp://http://requirejs.org/ D3.js
ttp://http://d3js.org/ threejs
ttp://http://threejs.org/ (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は
ttp://http://validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
ttp://https://w3techs.com/technologies/overview/javascript_library/all > カンマ演算子につき、
> A, Bと書くとき、Aに期待できるのは副作用のみである。
a = 1, b = a のような書き方ができるので間違い
単に A, B で Aの部分で再代入なしの代入（束縛）ができることに気づいてないマヌケってだけ
[1,2,3].map(v => (const w = v + 2, w * w))
あ、あれ？(TдT)
カンマ演算子につき、
A, Bと書くとき、Aに期待できるのは副作用のみである。
カンマ演算子が取れるのは式(Expression)のみである。
変数宣言(VariableStatement)は宣言であって式ではない。
すなわち、
const a = 1, b = 2
は変数宣言であり、
またこのカンマはカンマ演算子ではない。
[1,2,3].map(v => (v += 2, v * v));
のv += 2は仮引数vを書き換える副作用である。
カンマ演算子は式(Expression)しか取れないので、副作用なく
[1,2,3].map(v => (const w = v + 2, w * w))
などと書くことはできない。
なぜならconst w = v + 2は変数宣言(Statement)であって式(Expression)ではないからである。
カンマ演算子を使わず
[1,2,3].map(v => {
const w = v + 2;
return w * w;
})
と書いたときはどこにも副作用がない。カンマ演算子もどこにもない。
いい加減にしろよ？
ttps://mevius.5ch.net/test/read.cgi/tech/1548720347/160 で決着ついただろ！
恥ずかしいからやめて…
jQueryはいいとしてさすがに今どきjQuery UIはなくね？
面白いジョークをありがとう。朝からみんな笑ってスレに活気が生まれたよ。
>1と>4だけでいいかもね
ここしばらく見たことがないなｗ
回答側にも問題有
是正する人がいないから、無意味と化してる
登録されたコールバックの引数が どんなもんかを
チェックする方法ってありますか？
たとえば、引数に int ひとつだけの関数が登録されることを前提にしてるのに
引数が文字列な関数を登録したら、登録時にエラーにしたいんだ
コールバックを呼び出すのがあなたが作成している関数ならtypeof演算子で調べられる
function sample (i, f) {
if (typeof i !== 'number') {
throw new TypeError;
}
f(i);
}
あーそうか、型がそもそも無いんだから無理だね。
typescript使うしかないか
ありがとう
if (typeof o !== 'object') {
throw new TypeError;
}
f(o);
}
function samplecb (obj) {
obj.newprop = 'new!';
}
sample(null, samplecb);
なるほど。
それは全Object型を判定できてないぞ
Int型が欲しいなら、Int32準拠で作るなら自前実装すれば良い
整数判定なんてたいして難しくはあるまい
ttps://crocro.com/write/manga_javascript/wiki.cgiというサイトを見て分かりやすいと思ったんですが、ちょっと昔のものをやっても大丈夫なんですか？ また、他に初心者にオススメの学習サイトってありませんか？
Progateは分かりやすく初級編は一周しましたが、クレジットカード持ってなく会員登録できないのでやめました。
ドットインストールはテキストエディタが白くて目が疲れて集中出来ないのでやめました。
なので、なるべく無料で初心者向けの学習サイトがあったら教えてください。お願いします...
そのサイトは確度に問題があると思うがなあ
まじっすか...
使うのやめます...
とりあえずMDNでいいんじゃね。
初心者用チュートリアルとかあるし
レス代行しているのですが、後でと思って放置してしまう時があります
未読に戻せれば忘れないのですが
FireFoxのやつとか使うのが一般的?
できればpythonのjupyter notebookみたいな学習ノートとしての機能もしっかりついてるような
環境が欲しいんだけど。
テキストエディタはatom辺りでええやろ
とっくにpython専用じゃないんだがあれ。
後は設計する力を高めたほうが良いと思う
見たところ自分に合ってそうです！
やってみます！
ありがとうございます！
知らなかった！サンクス
ちなみにnode.jsのnodebrewとnpmは、pythonだとpyenvとpipに相当するという理解でOK？
コマンドプロンプトで、where node と打つと、
C:\Program Files\nodejs\node.exe
後は、VSCode のスレへ行って、お勧め拡張機能を、10個ぐらい入れる
ただし時刻は、Node.js を直接実行すると、UTC となり、9時間ずれる。
timeZone を指定すれば、ローカルタイムになる
同じソースコードをブラウザや、拡張機能のQuokka.js で実行すると、ローカルタイムになる
// 1970年01月01日 00:00:00 UTC (Unix エポック)
var dt3 = new Date( 1970, 0, 1, 0, 0, 0 );
// 上は、1969-12-31T15:00:00.000Z, 下は、1/1/1970, 00:00:00
console.log ( dt3 );
console.log ( dt3.toLocaleString( 'en-US', { timeZone: 'Asia/Tokyo', hour12: false } ) );
node.js のnpm, yarn は、Ruby のBundler と同じ
パッケージをグローバルにインストールすると、すべてのプロジェクトで共通となる
逆に、プロジェクトフォルダに設定ファイルを置いて、
プロジェクト固有にインストールすると、そのプロジェクトのみに適用できる
Ruby では例えば、sqlite3 のgem(パッケージ)を、グローバルにインストールすると、
自分は、Ruby2.4 を使っているのに、2.0～2.4 のすべてが入る！
最新版のバージョン指定をしなかったからかな？
npm, yarn では、どうなるのか、わからないけど
C:\Ruby24-x64 以下に、
./lib/ruby/gems/2.4.0/gems/sqlite3-1.3.13-x64-mingw32/lib/sqlite3/2.0/sqlite3_native.so
./lib/ruby/gems/2.4.0/gems/sqlite3-1.3.13-x64-mingw32/lib/sqlite3/2.1/sqlite3_native.so
./lib/ruby/gems/2.4.0/gems/sqlite3-1.3.13-x64-mingw32/lib/sqlite3/2.2/sqlite3_native.so
./lib/ruby/gems/2.4.0/gems/sqlite3-1.3.13-x64-mingw32/lib/sqlite3/2.3/sqlite3_native.so
./lib/ruby/gems/2.4.0/gems/sqlite3-1.3.13-x64-mingw32/lib/sqlite3/2.4/sqlite3_native.so
死ね
また、javascriptだけで出来る範囲というのはどこまですか？
フレームワーク＝ ライブラリ群
エンジン＝ライブラリ
unityぐらいになると、独自のフレームワークになったりする
まぁおｓれらはさておき、超絶おざっぱに言うと
＞、javascriptだけで出来る範囲と
あったりなかったりする
ボタンを配置するのがjs
セーブデータを設定するのがphp
> ライブラリ（英: Library）は、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。
ライブラリ群は、汎用性の高い複数のプログラムを、ひとまとまりにしたものを、ひとまとまりにしたものである？？？
まあ「フレームワーク＝ライブラリ群」という説明が間違ってるから
意味不明になるんだけどねｗ
ライブラリ・・・俺（ライブラリ）が中身を書いたから、お前は便利に使ってくれ
申し訳ない、飲みながら適当ｎ書きました！
file:///～.html#aaa
とか
file:///～.html?aaa
のような感じで開こうとすると
#が%23、?が%3Fに置き変わってしまい
htmlファイルそのものが見つからなかったような感じになってしまうんですが
このようにURLにhashなりsearchなりを含めた形で開くのはローカルでは無理なのでしょうか？
へぇ、知らなかった
その辺は限界かと思うので、xamppなどを導入すると良いと思う
hostsファイルの編集と組み合わせるとメチャクチャ強力だぞ
詳細はこの辺
ttp://https://15g.jp/post-770/ file:///は通信を発生させないから
add configurationの部分に候補が出てこないです
node jsはインストールしてます
ttp://https://code.visualstudio.com/docs/nodejs/nodejs-tutorial また、連想配列のキーの長さの最大値って何文字ですか？
ちょっと重複のカウントとかに連想配列を使いたいので知りたいです。
よろしくお願いします。
どんな要件か教えろ
そんなくだらないこと考える必要のない素晴らしい実装を見せてやんよｼｭｯｼｭｯ
[[Prototype]]をnullにしたなら、文字列リテラルの仕様に準ずる
たまたま、__proto__ というキーに値を設定すると、ハマる
var obj = { __proto__: 1 };
var obj = { };
obj[ '__proto__' ] = "a";
だから、Haxe では内部的に、文字列の前に、@ を連結して、
@__proto__ のようにして、元からあるプロパティを上書きしないようにしている
確か、ES6 だったかな？ のmap みたいなライブラリを使うとか、
Object.assign() とかかな？
Node.js をインストールしたら、
コマンドプロンプトで、where node と打つと、
C:\Program Files\nodejs\node.exe
と表示されるか、確かめる
右側に表示される、.js ファイル上で、ターミナルを開くと、
そのファイルがあるフォルダ上で、ターミナルが開くので、
node a.js と打てば、実行できる
ターミナルでは、タブで入力補完、上下矢印で履歴をさかのぼれる
拡張機能のCode Runner を入れると、右クリックメニューから、
指定したソースコードの範囲を実行できる。
Ctrl+Shift+P で、Run Code でも同じ
拡張機能のQuokka.js を入れると、Ctrl+Shift+P で、Quokka.js New File でも実行できる。
変数名だけで、その内容をファイル上にも表示してくれる。
console.log( 変数名 ); と書かなくてもよい！
でnullにするよう指摘済
文字列のままならそれでよいが、Mapがより有用
値が不要ならSet
質問に対する答えになってないね。
分かんねーなら黙ってろクズ。
VS codeの設定がわからん
ttp://https://playcode.io/ というオンラインエディタ使ってるんですが、どこからダウンロードできますかね
ファイルを
そんなことを言い出したらたまたま1GBのキーが来ることなども考えないといけない
隕石が怖いとかそんなレベルな話は止めよう
しかしこれ攻撃側も結構大変みたいだな。
目隠ししたまま迷路を解くみたいだ。
なにかツールがあるんでしょうか。
かいひするほうほうがるなら、対策した方が良くね？
さあ
俺はできることなら全てやるべきとは考えないけどね
著名なライブラリとかだとどこでどう使われるか分かんないから気にするのは分かるけど
キリないぞ
手元で使う分には注意するだけで済む事もあるんじゃない
オブジェクトを連想配列に使うと、
たまたま、__proto__ という単語を登録しようとして、ハマる
var obj = { };
obj[ '__proto__' ] = 1;
死ね。お前がハマってんのはクソ言語の改行コードだろｗｗｗ
ttps://mevius.5ch.net/test/read.cgi/tech/1545421414/166 $('#aaa').text((()=>{
～略～
～略～
～略～
return bbb;
})());
とするのがよいのでしょうか？
なんかずいぶん括弧が多いですが…
即時関数を使わずおとなしく外で
～略～
～略～
const bbb = ～略～;
$('#aaa').text(bbb);
とする場合との使い分けがどうもわからず…
前者（即時関数）のほうが、まとまった一連の処理って感じでわかりやすい＆変数名が重複しづらいので良さげな気もしますが
なんで即時関数を使わないといけないだ？
$('#aaa').text(function() {
～略～
～略～
～略～
return bbb;
});
ってすりゃいいじゃん
ttp://http://js.studio-kingdom.com/jquery/manipulation/text const o = {
a:1,
b:2,
};
Object.keys(o).forEach(key => {
console.log(`${key}${o.key}`);
});
このo.keyの部分がundefinedになってしまうんですが
なんで1って表示されないんでしょうか
o.key → o[key]
変数名とプロパティ名がごっちゃになってる
ああそうか、わかりました
o.keyだとkeyが変数でアクセスできるわけないですね
[]だと中が変数でも中身の文字列に変換されるからアクセスできるってわけですね
ありがとうございました
sinが-cosが-だったらπ～2πの角度で返してくれる関数って存在しますか？
asinとacosが別々なのでどっちも-π/2～π/2または0～πで返ってしまうので
Mathクラス
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math Math.cos(Math.PI)
は-1が返る
ようは、オブジェクト初期化子を使うのが問題なだけだな
更新されていないものが多いのですか・
好み
古いとか気にせず、好きに選べばよい
ttp://https://github.com/wise9/enchant.js 自己判断できるなら他人に尋ねる必要はないと思うのですが
サーバーでデータ持たせればいいんだけど、それはそれで面倒すぎる
1人遊び用にすればいい
それならDXライブラリで作るんだ・・・
webの特色、サーバーサイドの処理はやっぱり活かしたかった
まぁもう作ることもないだろうけどね
あー関数を渡せば勝手に実行してくれるんですね、そういえばやったことあったような
でもjQueryでなく例えば配列へのpushとかだとエラーになるので、そういったときはやっぱり
array.push((()=>{
～略～
～略～
～略～
return bbb;
})());
のような形になるんですかね…？
原題：Learning Cocos2d-JS Game Development
この本の著者、Emanuele Feronato
italian geek and PROgrammer
ttp://http://www.emanueleferonato.com/ このイタリア人、最近は、Phaser ばっかり！
他には、Haxe とか
チュート通りにやるのですが、うまくいきません
ttps://i.imgur.com/wfkEtt0.jpg 解決しました
あと新しい言語学ぶときとかの題材にいい。俺の場合直接数学とか題材にしちゃうと眠くなるので…
何が解決？
良かったね
もう報告しなくていいよ
とても困っています。
どなたか起きてらっしゃる方おられますか？
【条件】
出勤可能時間を提出する画面を作成している。
終日可、時間指定出勤可、出勤不可、未提出でボタンが切り替わる方式。
【何をしたのか】
各種ボタンが切り替わる機構と時間指定のときのみ
時間を入力できるフォームが生成される条件式を開発
【エラーメッセージ】なし
【期待する結果】デフォルトが終日可、かつ、７日以内の場合、ボタンを切り替えられなくしたい。（終日可のまま変更できないこと）
【サンプルコード】
ttp://https://ideone.com/63JYMf ７日以内の操作制御自体はできているのですが
制御を上手くコントロールできません。
是非とも宜しくお願い致します。
そういう依頼は他所で有料でやると良いよ
わかりました！ありがとうございます。
オススメのサービスなどございますか？
ぐぐれ
このスレでは、その部分のやり方だけを聞いてくれ。
条件など、if 文で書けばよいだけ
ポイントに関係ない部分のソースコードが多いほど、回答者の理解コストが高くなる。
特殊な事が多いから、業務の仕様を理解するのが、最も困る。
だから質問を、業務の仕様から切り離して、例題を作って質問してくれ
ボタンを切り替えられないようにするには、disabled 属性とかだろ？
「html button 押せない」で検索！
フレームワーク使わずにです
「画像のキャラクター」
が何を指すか分からない
例を出して
パラパラ漫画のように、スプライトを切り替えながらアニメーションさせていく感じです
勉強のためにフレームワークなしでやってるんですが
個人的な意見だけど、そここそ逆にライブラリに頼るべき場所と思うが・・・
・ダントツで手っ取り早いのはアニメーションgifを置くだけ
・軽いのはcssスプライトで画像を切替える方法。移動はtopとleftを増減させる
ttp://https://qiita.com/takumifukasawa/items/7463d9fa48aced1cf3cb ・画像の差し替えが楽なのはimgを複数用意し、予め全て読み込ませておいて、display:noneなどで切り替えつつtop・leftで移動
か？
アニメーションはあっという間に重くなる
動いてハイ終わり、なら何とでも鳴るけど、すぐにパフォーマンスを考える必要が出てくる
できるだけcss使う方法を考えてみて
フレームワークってどれがいいんですか？
古いの多くて
jquery不要の奴が良いと思うけど、
やりたいことが変なので色々と探す事になると思う
ttp://https://grow-group.jp/archives/1214/ その手があったか
ただ俺には良く分からん
開発環境は秀丸エディタとchromeで十分でしょうか？
VSCodeやSublimeTextのがよい。
ありがとうございます
VSCodeをインストールしようと思います
に書いてある
死ね
エンド アングル なんだから
ブラウザでも動作確認できませんか？
ttp://https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja RPGなどだとPHPなどを使うことになるからでしょうか？
ローカルだとそれでCanvasに画像を読み込めないとかあるから
よくわからないけど、サーバを分けるってことですよね
ローカルもサーバだし
phaserは英語はありますが、日本語はほとんどないです
環境設定もまともにできない
でお勧めを聞いておいて、条件後出しで追加質問多過ぎ
初めから全ての要件を書いて質問しなさい
生成元が違ってもCanvasには描画できる
Canvasがdirtyになるだけ
それでアップロードされた状態になっているんでしょうか？
RPGツクールMV
JavaScriptのゲームエンジンで比較的新しくてネット上に日本語資料とっても多い
エディタをインストールすれば環境設定いらない
何も書いてないということは、何でもいいってことだ
【Switch/PS4/XboxOne】RPGツクールMV Trinity★part19
ttps://rosie.5ch.net/test/read.cgi/gamerpg/1550321689/ ●バグ・不具合
あらゆる場面での読み込みがフリーズと見紛うほど長い
(マップの大きさ・データベースの項目数などによって５～１０秒以上)
他、不具合の種類が多いので修正されるまで別項参照
MAMP
phaserがんばります
英語しかないけど
実行環境がブラウザだけだと、
CORS(オリジン間リソース共有、Cross-Origin Resource Sharing)で、エラーになる事が多い
そういう場合に、自分のPC にサーバーを立てて、サーバー経由にして回避する。
開発中は、Ruby のSinatra(Webrick)などの遅いサーバーでも良い。
JavaScript のNode.js でも良いけど、Rubyほど簡単じゃないから
Ruby なら、PowerShell から、1-liner で、
Rubyで作られた遅いウェブサーバー、WEBrick が起動する
ruby -run -e httpd . -p 8080
そのフォルダに、index.html があれば、
何も考えなくても、これでブラウザからアクセスできる
ttp://http://localhost:8080 クソ言語の紹介やめろ
npx serve .
ワロタｗｗ
こっちのほうが簡単じゃねーかｗｗｗ
npm i -g serve
でインストールしといた方がいいな
これでどこでも
serve .
でカレントディレクトリが
ttp://http://localhost:8080でアクセスできる C:\Program Files\nodejs\npx
C:\Program Files\nodejs\npx.cmd
node.js のインストールで、そういうコマンドも入っていたのか
埋め込みSQL, PLC, HDL、電気電子回路とか、ゲームから産業機械まで、何でも作るから
この間、新幹線のチケット予約で、バグったとか、
漏れも大昔、それをプログラミングしてたし、
漏れが見れば、原因がわかるんだがなw
で、に完全敗北してると
何の意味もない人生だな
ほーんｗ
で、改行コードは原因分かったのか？ｗｗｗ
お前がruby『初心者』スレで『質問』してたｗｗｗｗｗ
ttps://mevius.5ch.net/test/read.cgi/tech/1545421414/166 住人は迷惑してます
例えばCSSで
@media only screen and (max-width: 768px)
となっている箇所のmax-widthの値をjQueryで書き換える方法はありますか？
ttp://https://uhyohyo.net/javascript/5_2.html startangle0でendangleは360で円だと思うんですが、endangle３５０にしたら少し欠けた円になるかと思っていました
しかし結果が違いします
コレラはどういう意味なんでしょうか
ttp://https://phaser.io/docs/2.6.2/index javascriptってclassがないのではないのですか？
フレームワークまでjavascriptというわけではないのですかね
JavaScriptには他の言語の機能はなんでもあると
言えるぐらい言語仕様は進化している。
ないというのは昔の話ですか
どうも
steamにうｐできるんですか？
ブラウザ上で動かせる＝端末による差が少ない
その代り重いし誰もプレイしないしデメリットの方が大きい
steamは知らん
C#とunityでええやろ
・マルチプラットフォームへの展開
・支配的なストア(高額なロイヤリティ、コンテンツ制限)からの脱却
・プレイ前(ダウンロード、インストール)の心理的障壁の緩和
ガワネイティブにすりゃsteamもあるだろうけどあんまメリット感ないな
誰もプレイしないとはなんのことですか？
ただ、あんまりゲームには向いてなかった気がする
理由は忘れた
海外のフォーラムで質問してきたんですが、できない
その点、ブラウザゲームではブラウザが実行環境だから、楽
音楽を変換って何？
もう今はmp4なら大体okだよ
例えば<select>タグの中の3番目にある<option>を選択したいときって
どうすればいいですか？
<select>のvalueでvalueの値を直接指定する方法しかわからなくて
<select id='s'>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
const select = document.getElementById('s'); console.log(select.options[2].value)
querySelectorでもjQueryでも'select > option:nth-of-type(3)'で取れなかったっけ
・WebPackでビルドしたjsファイルのみキャッシュされない。他のビルドしないファイルはキャッシュされる
・scriptタグでjsファイル指定してるが、ファイル名はbundle.js?v=1.0.0みたいにパラメータも固定のままにしてる
・ChromeDeveloperToolの設定でキャッシュ無効化にはしていない（もし有効なら全ファイルがキャッシュされないはず）
あと考えられることはなんだろう？
あーそういう配列に格納されてるんですね！
思ったより簡単だった…
そういえば記憶の中にうっすらあったような気がしますがoptionでも可能…？
やってみようと思います
いや、割とガチで
何使ったらいいですか
ちょっとしたパズルです
フレームワークも日本語がないし
>>.197
8gbです
君前からずっと質問してるよね
パズル要素は今初めて出たけど、どうせ他の条件も後出しして質問し直すんでしょ？
Phaser英語だけだけど、頑張るんじゃなかったの？
このスレでくだ巻く前にゲ製板でおすすめツール教えてもらった方が遥かに有意義
日本語じゃないと面白くないんだよな
変な孤独感・疎外感みたいなものを感じる
とりあえずパーって作ってみたら？
個人的にはc#とunityの方が100倍楽と思うけど、
パズルゲームの場合重要なのはアルゴリズムだから言語なんて何でも良いだろう
すまんけどこれわかる人おる？
キャッシュされてるかどうかってどう判断してるの
いるよ
ChromeDeveloperToolで確認しとるよ
教えてくんなまし！
ttps://imgur.com/N8o1WQu.jpg 正直このスレで聞く案件なのか疑わしいんだけど
たしかに…
だけどとりあえずレスポンスヘッダはこれ
ttps://i.imgur.com/aQJO6WX.jpg パラメータ外してリロード後に数回リロードしたけどキャッシュされないっす！
htmlってもはや1つのjavascriptを読み込むだけのものになってきてるよね
で検索したら
キャッシュさせない js
の結果しか出て来ない
キャッシュを利用すると判断出来る情報がない
多分サーバー側の設定の問題だと思う
なるほど
サーバー側調べてみるかあ
そうなんだよw
あ？
参考書なしの独学で勉強なさってる方いますか？
参考にしてるサイトがあれば教えてください
今はイヌでもわかるJavaScript講座を眺めたり写経しています
サイト作ったほうが良い
JavaScript なら、Cocos Creator(Cocos2d-x), Phaser, Haxe。
Python 風なら、Godot
それよりも本格的なものは、Unity, UE4
まあ、ゲーム製作板で聞いて
ありがとうございます
RPG作りたいんですが、ウディタはこちらの環境だと文字サイズが小さすぎて辛いです
フレームワークとゲームエンジンならどちらがRPG向きなんでしょうか
ウディタは古い開発ツールで作成されている感じでしょうか
いつまでも、学習しない人だな
独り言ならチラシの裏にお願いしたいね。
ゲーム制作板に行ってくれ
最初に作ったpromiseオブジェクトのthen()で別のpromiseオブジェクトを作ってreturnした場合、最初のpromiseはどうなるんでしょうか？
function doSomething1() { return new Promise(function(resolve,reject){ // resolve or reject }); }
function doSomething2() { return new Promise(function(resolve,reject){ // do something 2 }); }
var prom1 = doSomething1().then(function(result){
// 最初のpromise
return doSomething2(); // 別のプロミスを返却
}).then(function(result) {
// 2番目のpromise？
// return prom1; <= 合法 or 非合法？ promiseのthenの中で別のプロミスを返却した場合、プロミスチェーンどうなる？
}).then(function(result) {
// どっちのpromise ?
})
別のプロミスを返却するのは当然で何もおかしいこと無いんだけど
「prom1 = 〜」の中でprom1を返すのはおかしくね？
自分が完了するのを待機するから永遠に終わらない
他のファイルをインポートしたり出来るようですが
大常識としてプロミスチェーンのループは認められてないでしょ
プロトタイプチェーンと同じく例外が発生する
誰か回答するだろうと思って放置していたが誰も回答しないな。
仕方ないので最初に、jQueryは素晴らしいDOM操作ライブラリだぞ。と一言言わせてもらおうｗ
まずな、thenの引数の関数の中にはPromiseなんていないんだよ。
var prom1 = doSomething1().then(function(result){
// 最初のpromise ← 間違い。ここにPromiseなんていない
return doSomething2();
}).then(function(result) {
には、「.then」という単語が3回でてくるが、このメソッドが属する
Promiseオブジェクトはすべて別物だ。別のオブジェクトでなければいけない
（変な書き方をすりゃ話は別だが）
また、.thenの引数の関数は、新しいPromiseオブジェクトを返すものなんだが、
Promiseオブジェクト以外も返すことができる。
var prom1 = doSomething1().then(function(result){
return 123;
}).then(function(result) {
この場合でも、123という数値は、内部でごにゃごにゃされて
すぐにresolve(123)されるPromiseオブジェクトに変換される。
と書いたが、つまりはプロミスチェーンで複数出てくる .then、
この.thenが属するPromiseオブジェクトはそれぞれ別ものなんだよ。
なんでかというと、.thenが実行されるのはPromiseがresolveになった時。
一旦resolveになるとその状態が保たれて変更できないわけだから、
以下のようなことをすると単純に次々実行されてしまうだけ。
var prom = Promise.resolve(); # resolveされたPromiseを返す
prom.then(function(result){
return prom;
}).then(function(result) {
return prom;
}).then(function(result) {
return prom;
})
プロミスを複数つなげる = 非同期処理を複数つなげる。
ならばresolveでもrejectでもない状態にしなければいけないので
それぞれ異なったPromiseにならざるを得ない
詳しい解説ありがとうございます。
thenの中で新しいpromise作って返却したら、それまでのthenで繋がってる元々のプロミスチェーンが宙ぶらりんになって途切れてしまうものだと思ってました。
プロミスとプロミスチェーンの概念がイマイチ理解出来ないでいます・・・
中学生が作ったブラクラの奴ね
見せしめでしょ、うざいプログラム作るなと
作ってすらおらずリンク貼っただけらしいｗｗ
何がしたいのか全然わからん
チェーンは非同期に動的に組み変わるものだからね
ただしチェーンが変わってもプロミスオブジェクトは変わらないからね
すみません
例えばゲーム中
ttps://i.imgur.com/8SKokMQ.jpg このような画面になった時、赤枠の文字列を取得したいのです
そして取得した文字列をhtml上に表示させたいです
本当にしたいことはhtmlに表示させることじゃないと思うけど・・・
質問にそのまま回答するなら
これがjsで動いてるゲームなら開発ツールで簡単に取得できる
プロミスチェーンという言葉を気にする必要はないよ
プロミスを使えばチェーン出来ますよ、
チェーンできるようにしたのがプロミスですよってだけだから
プロミスがない時代、非同期処理を書こうとすると
foo(function() {
bar(function() {
baz(function() {
});
});
});
みたいに、どんどんネストが深くなってしまっていた。
これをこんなふうに縦に並べてかけますよーってのがプロミスで
縦に並べて書いたものをプロミスチェーンと呼ぶってだけ
foo()
.then(function() {
return bar();
}).then(function() {
return baz();
});
マウスカーソルがポインターになる部分（つまめる部分）の範囲を大きくすることは可能でしょうか？
1~3ドット分ぐらいしかないのでつまみづらいなと思い大きくしたいです。
＞補導されたのは、愛知県刈谷市に住む中学１年生の１３歳の女子生徒で、
＞警察によりますと、インターネットの掲示板に、不正なプログラムのアドレスを書き込んだ疑いがもたれています。
＞このプログラムでは、クリックすると、画面の真ん中に「何回閉じても無駄ですよ〜」という文字や、顔文字などが表示され続けるよう設定されているということです。
他人が作った、起動中のアプリに、外部からアタッチできないだろ。
そのアプリを自分で分析して改造するなど、しないと無理
ブラウザゲームなどのHTML アプリなら、
そのHTMLを解析して、Ruby, Selenium Webdriver などを使って、アタッチできる
iMacros と言う、ブラウザを自動操作するソフトもある
アプリでも様々な種類があるから、
対応できるのは、ブラウザゲームなどのHTML アプリだけ
ブラウザゲームなら、F12 を押せば、開発者ツールが起動する。
それを見て、他人のソースコードを分析していくから大変
取得したい文字列の上で、マウスで右クリックメニューを開いて、要素の検索をすればよい
でも、かなりプログラミングできないと、他人のアプリなど解析できないよ。
そのアプリの仕様書が無いから、何をやっているのか、全くわからないため
まだ会話を続けるなら、名前欄に、235 と入れて投稿して
死ね
現代ならスクリーンキャプチャして
文字解析WebAPI叩くとか現実的
今のブラウザは100%Javascript動くと思ってOK？
逮捕されることを覚悟してやるしかねえわ
どんな感じでやるんですかね
今だと
const regObj = { 'a':正規表現, 'b':正規表現, 'c':正規表現 ];
const strObj = { 'a':文字列, 'b'文字列, 'c':文字列 };
const index = 'c';
text.replace(regObj[index], strObj[index]);
って別々の配列使っちゃってるんですけど
まとめたほうがわかりやすいだろうなと
一応
const regStrObj = {
'a' : [ 正規表現, 文字列 ],
'b' : [ 正規表現, 文字列 ],
'c' : [ 正規表現, 文字列 ],
};
const arr = regStrObj['c'];
text.replace(arr[0], arr[1]);
って方法は思いつくものの、なんかもっといい書き方があるような気がして
こんなんは？てきとうだけど。
const replaceRules = {
'a' : [ 正規表現, 置換文字列 ],
'b' : [ 正規表現, 置換文字列 ],
'c' : [ 正規表現, 置換文字列 ],
};
const replaceByRule = rule => str => str.replace(...rule);
使い方
const replaceByRuleC = replaceByRule(replaceRules['c']);
const replacedText = replaceByRuleC(text);
または
const replacedText = replaceByRule(replaceRules['c'])(text);
もっと柔軟に考えな
定義はできるだけシンプルのほうが良い
アクセスは構造化されていたほうが良い
この２つは両立できる
だからArray#entries/Object.entriesとかも好きになれない
key/valueを配列で持ってるでしょ
そのことよ
とかすりゃいいだけじゃん
new Map
多分もうそれが嫌なんじゃない？
jsのArrayオブジェクトを静的型付け言語の配列と同じように考えてるっぽい
え、違和感ない？一ミリも？
他にもMapに配列リテラル与えるのも違和感あるんだが
全く違和感ない
むしろ、で無駄にキーを定義しているのが気になる
配列はキーがインデックスになっただけ
> 他にもMapに配列リテラル与えるのも違和感あるんだが
「違和感がある」がキーのことか、引数に二次元配列を渡していることか、わからんが、既にある定義に違和感があるなら、Mapを漠然と理解している気になってるからなんじゃないかね
イテレータとか、理解してるか？
デストラクチャリングできるから良いって問題じゃないし
ただesには妥協の産物もあるってことは理解しといたほうがいいぞ
const [count, setCount] = useState(initialCount);
5ちゃんのｽｰﾊﾟｰﾊｶｰによると妥協の産物である。
すぐ共感を求める女性のような考え方だな
'a' : [ 正規表現, 文字列 ],
key が文字列で、value がコンテナなんて、
JSON なんか、ほとんどこればっかりだろ
違和感なんて感じないけど？
考え方が狭いだけだと思うよ
[a,b],
[c,d],
[e,f]
って
_ key val
0 a b
1 c d
2 e f
のような項目名が暗黙のテーブルってだけなんだよ
なんか配列というものにへんな固定観念を持ってるから違和感を感じるだけなんだよ
定義はシンプルな方が良いんだからさ
{key:'a',value:'b'},{key:'c',value:'d'},{key:'e',value:'f'}
みたいにするよりは配列を使ったほうが良いんだよ
別に[a,b],[c,d],[e,f]と書いて置いてオブジェクトに変換して使うとかも簡単にできるんだからさ
そのへんが内部的にも行われてると考えればいいだけで変なこだわりを持っても価値がないんだよ
new Map(Object.entries(o))
でいいじゃん
htmlファイルと外部読み込みjavascriptファイルをPCで作り、スマホに送ってクロームで開いたところ、
htmlは表示されましたが、どうしてもjavascriptがうまくいきません。なぜでしょうか？
(スクリプトをhtmlに直接書き込むと動作するので、外部読み込みファイルの指定の仕方が悪いと思っています。)
【外部ファイル指定部分】
<a href="./time.html" target="frame_name" >現在時刻</a><br>
<iframe name="frame_name" width="200" height="50" ></iframe><br>
まず服を脱いでください
var x = 123;
function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
このときyがundefinedになりますが、
クリックのイベントハンドラ内にyを渡す方法はありませんか？
> このときyがundefinedになりますが、
button.onclick の関数を定義してるのはhello関数のスコープ
hello関数で定義しているyは参照できるはず
適当に補って試してみたが再現しない
変数のスコープ説明のためのソースっぽいけど、このソースそのままなの？
どこかtypoしてないか？
3つボタンを用意して押下するとそれぞれの数字がアラートで表示されるものを作りました
index.html
<button id="btn1" value="1" onclick="show(1)">ボタン１</button>
<button id="btn2" value="2" onclick="show(2)">ボタン２</button>
<button id="btn3" value="3" onclick="show(3)">ボタン３</button>
main.js
function show(val) {
alert(val);
}
こちらをonclickを使わずにaddEventListenerを使ってこのように再現しました
const fnc = function(a) {
alert(a.currentTarget.value);
}
document.addEventListener("DOMContentLoaded", function() {
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", fnc, false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", fnc, false);
var btn3 = document.getElementById("btn3");
btn3.addEventListener("click", fnc, false);
}, false);
簡潔に短く書く方法はないでしょうか？
仮にボタン10個に増えたときは下のボタン取得とクリックしたら～の2行を10回繰り返すのでしょうか
すいません、ちょっと違いました
function(){}とvar = function(){}でスコープが違うんですね・・・
var x = 123;
var world = function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
それならjQueryを使うと良い。単純に置き換えるだけでもここまで短くなる
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
var btn1 = $("#btn1");
btn1.click(fnc);
var btn2 = $("#btn2");
btn2.click(fnc);
var btn3 = $("#btn3");
btn3.click(fnc);
});
一時変数を使うまでもないのでこうだな
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
$("#btn1").click(fnc);
$("#btn2").click(fnc);
$("#btn3").click(fnc);
});
<button id="btn1" value="1" class="btn">ボタン１</button>
<button id="btn2" value="2" class="btn">ボタン２</button>
<button id="btn3" value="3" class="btn">ボタン３</button>
$(function() {
$(".btn").click(function() {
alert(this.value);
});
});
const $$ = q => [...document.querySelectorAll(q)]
を定義しておいて、冗長になっているところを、
$$`#btn1,#btn2,#btn3`.forEach(el => el.addEventListener('click', fnc, false))
で置き換えては？
また、
$$(['#btn1', '#btn2', '#btn3']).forEach(el => el.addEventListener('click', fnc, false))
と書くこともできるから、以下のようにすれば対象要素増やしたいときも配列にセレクタ追加するだけで対応できるよ。
const selectors = [
'#btn1',
'#btn2',
'#btn3',
'#btn4', // new!
]
$$(selectors).forEach(el => el.addEventListener('click', fnc, false))
ボタンが一列に並ぶかどうかとか色々不明な前提条件があるので
すまんけど明確な方針は出せない
少なくとも適用する関数が全て同じfncならば、
idじゃなくてclassでまとめることをオススメする
ttp://https://jsfiddle.net/kgn91oyL/ のコードを動くようにしてみた
ttp://https://jsfiddle.net/r38gt724/ 更に一行で書いてみた。
個人的にはアロー関数は戻り値を使うべきだと思ってるので好きではないが
ttp://https://jsfiddle.net/pm4cqf75/ ありがとうございます
様々な書き方があって勉強になります
jQueryはまだ名前を知っている程度なのですが、とても興味を唆られました
個別ボタンにaddEventlistenerするのではなく外側の要素でイベント取ってclass等で判別するとか
ttp://https://jsfiddle.net/o3s2mwp9/ var btn1 = document.getElementById("btn1");
などはまるごと省略してよい
id属性をもつ要素はそのままグローバルプロパティとして現れる決まりがある
document.getElementById("buttons").addEventListener("click", ev => {
if (ev.target.classList.contains("btn")) {
alert(ev.target.value);
}
});
↓
$("#buttons").on("click", '.btn', function(event) {
alert(this.value);
});
ttp://https://jsfiddle.net/3t1nv7kq/ DOMに関してはなんでも出来ると思ってればいいけど、基本はclassの付け外しのみに抑え、
後はcssで全部やるようにすると思っておいたほうが良い
cssで出来る所をjsでやろうとすると途端に重くなる
><a href="./time.html" target="frame_name" >現在時刻</a><br>
これは、単なるリンクだろ。
JavaScript(JS) なんて読み込んでいないよ
それとも、./time.html ファイルの中で、JSを読み込んでいるのか？
被害者に対して暴力団以外にタゲそらしをしてるがやってるのは暴力団で普段外に出ることが少ないため遊びで公共の電波と同じような電波を使って殺人をしてる
統失はほとんどが作られた病気で実際は電波によって音声送信や思考盗聴ができることが最近明らかになりつつある
警察や病院では病気としてマニュアル化されてしまっているのが現状で被害者は泣き寝入りしてる
被害者がリアルタイムで多い現状を知って、被害者間でしか本当の事だと認知できていない
実際にできると思われていない事だから、ただの幻聴ではない実際に頭の中で会話ができる
できないことだと思われているからこそ真面目に被害を訴えてる
海外でも周知されつつあることを知ってほしい。
このままだとどんどん被害が広がる一方
#テクノロジー犯罪
#四代目澄田会
べつにonclickでもいい
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", fnc, false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", fnc, false);
var btn3 = document.getElementById("btn3");
btn3.addEventListener("click", fnc, false);
↓
for(let i = 1; i <= 3; i++)window['btn'+i].onclick = fnc
アホでも書ける
これが現実やで。周りに振り回されている人が、周りを振り回そうとしてるだけ
2017年 JavaScript★71.9%ものサイトがjQueryを利用 [無断転載禁止]©2ch.net
ttps://medaka.5ch.net/test/read.cgi/prog/1485008061/">ttps://medaka.5ch.net/test/read.cgi/prog/1485008061/ ↓ 2年後
ttp://https://w3techs.com/technologies/history_overview/javascript_library/all/y 73.8% (+1.9%)
Angular 0.5% → 0.4% (+0.1%)
React 0.5% → 0.2% (-0.3%)
Vue 0.1% → 0.2% (+0.1%)
TypeScriptとか？
Vueお勧めされたぜ
少なくとも古い新しいの問題では無いよ
何を作るかで決まる
そこまで複雑じゃないから
それが数字に表れている
セキュリティか個人情報扱う時に一気に難易度が跳ね上がる
具体的にはユーザーログイン・ECが付くと大規模になる
静的ページなんぞ10000ページあっても大規模でもなんでもない
大規模サイトもｊQuery使ってるよね
規模が大きいか小さいかと、動的か静的かは直交する。
10000ページあって小規模とか頭大丈夫？
昔、簡易HP作成サイトが当たって30000アカウントに登録してもらえた
・FWを除けばphpファイルは10ファイルぐらい
・30000アカウント集まって30000ページのサイト
これって大規模に当たる？
最初の開発は一週間ぐらいで終わった
すげえなｗ
すげえ…ヒマなんだなｗ
無職になって作ったエロアフィブログだ
サーバー設定、プログラミング、コンテンツ作成等メチャクチャ勉強になったな。今も進化中だ
儲けは少ないが一部マニアに非常に高い評価をいただいておる
海外のエロレビューサイトにも高レスポンスな良心的サイトとして紹介されたりもしたよ
あほ、メチャクチャ求められるわ
広告で邪魔しないこと
クリック押したらすぐに表示されること
シークしたらすぐに移動すること
ダウンロードできること
じゃないかな
いや、残念ながら求められていない
勘違いくん♪
foreachの中ではアロー演算子は使わない方が良いのでしょうか？
thisがwindowを差してしまいます
thisは今まで使ってきたのですが、
アロー演算子はどういう時に使うと良いのでしょうか？？
最終的にはinputに入力された文字列から数字のみを抜き出し、全て半角数字にしたいのです
入力：
あ０い１う2え3お4
結果：
012345
"あ０い１う2え3お4".replace(/^[０-９]/u, '')
ではうまく行きませんでした、どなたかお助けを～
"あ０い１う2え3お4".replace(/./g, (c)=>{
if (c.match(/\d/)) return c;
if (c.match(/[０-９]/)) return h[c];
return '';
});
"あ０い１う2え3お4".replace(/[０-９]/g, c => String.fromCodePoint(c.codePointAt(0) - 0xFEE0)).replace(/[^0-9]/g, '');
すごい！
半日ぐらい頑張った苦労は一体・・・ｗ
ありがとうございました！！
基本的にthisを使わない(挙動をコードを書いた時点で確定する)方針にしようぜって思想が根底にある
どうしても使いたいときは明示的にbindする
ありがとうございます
思想に頭が追いつかない(@@;
もう少し勉強します
ないから（笑）
「使わない」じゃなくて「束縛しない」だな
すまん
だからそういう思想があるわけじゃない。
thisが必要ないから結果としてそうなっただけ
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions アロー関数はthisを持たないとか初めて知った
ちゃんとMDN読んどくべきだなあ
関数オブジェクトが作られるときに束縛される
定義後にthisは変動しない仕様だった？
MDNにハッキリと書いてあるんだけど
＞2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、
＞2 つ目の理由は this を束縛したくない、ということです。
＞アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。
＞つまり、アロー関数内の this 値は通常の変数検索ルールに従います
＞（スコープに this 値がない場合、その一つ外側のスコープで this 値を探します）。
翻訳が間違ってるか、MDN自体が間違ってるってこと？
mdnなんか見てないで仕様読め仕様
コールバック関数を使う関数を作りたいのですが、どう書けばよいのか分かりません。
検索しても既存のコールバック関数を伴う関数の使い方（setTimeout()の使い方など）ばっかり出てきて
そういう関数の「作り方」が出てこないのです…
早い話がsetTimeout()のような関数本体の方を作り、書きたいのですが
どうすればいいんでしょうか？ どう検索したら出てきますかね？
function(func){
func()
}
var コールバック使う関数が用意するデータ = 'hello, ';
var result = コールバック(コールバック使う関数が用意するデータ);
return result;
};
使い方：
var 文字列の長さを返す関数 = function(文字列) {
return 文字列.length;
};
var 文字列の後ろにworld足して返す関数 = function(文字列) {
return 文字列 + 'world';
};
console.log(コールバック使う関数(文字列の長さを返す関数));
//=> 7
console.log(コールバック使う関数(文字列の後ろにworld足して返す関数));
//=> hello, world
ありがとうございます！完全に分かりました。助かります…
だから、jQuery, Haxe では、this を修正している
def add(a, b)
a + b
end
def opTwo(a, b, func)
func(a, b)
end
p opTwo(1, 2, add)
=> Line 9:in `add': wrong number of arguments (0 for 2) (ArgumentError)
from t.rb:9
ﾌﾟｷﾞｬｰm9(^Д^ )
ちなみにPython:
def add(a, b):
return a + b
def opTwo(a, b, func):
return func(a, b)
print(opTwo(1, 2, add))
=> 3
ちなみにJavascript:
function add(a, b) {
return a + b;
}
function opTwo(a, b, func) {
return func(a, b);
}
console.log(opTwo(1, 2, add))
=> 3
RubyにはRubyのやり方がある
はず
あるよねーいっぱいｗ
def 、proc、Proc.new、->、lambda、ブロック、・・挙動と使いどころの異なるこれら関数ライクを使いこなし、
==、===、eql?、equal?の違いと使いどころを完璧に把握しているRuby信者ｗｗｗｗｗ
逆ギレワロタｗ
jpegやpng形式で保存出来るようにしたいのですが、どうすればいいのでしょうか？ どなたか教えて下さい。
使用しているブラウザはグーグルクロームです。
どうやるんだろ？
指してしまうってｗ
指す用に自分で書いてるだけなのに…
プログラムは思うようには動かんの
書いたように動くだけ
thisは全ての関数内でキーワードとして動作する
だから「持つ」「持たない」というとそういう仕組みを持っているのかの話と
取られかねないのでオススメしない
thisキーワードは[[ThisValue]]が束縛され得る最も近いスコープを検索して
その[[ThisValue]]を参照しようとする
アロー関数の関数スコープは束縛しない事になっているので検索から外される
↑
hogeはwindow（global）のメソッドだからthisはwindow
var A = {
hoge : function(){}
};
↑
hogeはAのメソッドだからthisはA
var img = document.querySelector('#img');
img.addEventListener('click', A.hoge);
img.addEventListener('click', function(){ });
↑
imgにA.hogeという関数がバインドされて実行されるからthisはimg
ただし
img.addEventListener('click', () => { });
↑
アローの場合は、ひとつ上のスコープのthis
て理解であってますか？
＞ var A = {
＞ hoge : function(){}
＞ };
＞↑
＞hogeはAのメソッドだからthisはA
A.hoge()で呼び出される限りにおいてはYes。
「FunctionオブジェクトがAのhogeプロパティに設定されている」だけで
必ずしも「Functionオブジェクトを呼び出したときのthisがAになる」わけではない
この辺がクラスベース言語のインスタンスメソッドとは違うので、混乱しやすいとこですね
globalになるのは、非Strict Modeのみ
違う
thisは関数の呼ばれ方によって決まって
「.」演算子によってReference内部型が作られるときに決まる
直に呼ぶとsloppy modeのときはglobalになるという決まりなだけ
簡単に言うとobj.func()と呼んだ時onjがthisになるというだけ
thisは第０番目の引数とでも思えば良い
見た目はそうだけど、そう言って良いもんかどうか
まあ引数に関数渡して、そっちで実行してねってやつだよ
例えば関数Aの後に関数Bを実行したいけど、Aが
function A(){
setTimeout(function(){
// ふはははは、いつ終わるかわかるまい！
}, Math.floor( Math.random() * 1000 ));
}
こんなのだと、Bをいつ発火させればいいかわからん
そんなとき
function A( callback ){
setTimeout(function(){
// おわたぁ！
callback();
}, Math.floor( Math.random() * 1000 ));
}
こうしておいて
A( B );
ってすれば、ちゃんとAが終わってからBが発火する、よね！
って考え方がコールバック
x = y + 1 = f(y)、 y = z - 1 = g(z)
としたとき
x = f( g(z) )
と出来るねって話
これをプログラムっぽく書くと
function f(y){ return y + 1; }
function g(z){ return z - 1; }
x = f( g(z) );
こんな感じになる
これは関数fの引数に、関数gを実行した結果を渡しているわけであって
関数gを渡しているわけではない
のでこれはコールバックとは呼ばない、と思う
プログラムの「=」は代入なので
そのへん気をつけて
（１）テンプレート（ブログのカラムみたいな）方式
・１ページ分、コマ単体の中にさらにテンプレートを用意、みたいな
・テンプレート以外の微妙な調整ができない
（２）mousemoveなりで（居合斬りみたいに）直線で切り分け方式
・割った部分だけの削除後の再描画のアルゴリズムがよくわからない
・柔軟性あり
（３）線描画ツール方式
・特定の図形を描画できる
・テンプレート式だが柔軟性もある
・目視配置なのでズレが気になる（マス目内だけを移動するように補正すればよいかも）
を考えてみました（まだ作っていない）
何か効率の良いアイデアはないでしょうか？
（おそらく普通？は（２）のシミュレーション方式で、canvasに再描画する感じで
コマと枠線を選択し編集できる機能を別々に作ってー、という風にすると思うのですが
せっかくなのでブラウザとかHTMLやCSSをうまく組み合わせて効率よくできないものかと思ったのです）
すでに作ったもので言えば、DOM要素に横割り縦割り機能をつけ
要素を割ったら（要素の中に要素を作る）その中の要素にも縦横割り機能がつく、をループ（比率調整付き）
みたいなのは作ったのですが、垂直割りしかできないのでなんか今一です（キャプチャはブラウザの拡張）
要素を台形とかにできれば良いのですが・・
JSの=は代入じゃない
所謂共有渡しにおける名前付け
Syntax
ttp://https://www.ecma-international.org/ecma-262/5.1/#sec-11.13 JSで参照になるのはArrayや関数含めたオブジェクトで、数値やtrue/falseなどのプリミティブ値は値で、文字列はちょっと特殊じゃなかったっけ。
本当に全部参照になってるのはPythonだった気がする
そのまま作り続けろ
１年後行き詰まるからCanvasで作り直せ
１０年後良いものができてる
冗談でなくおれはそうしてものづくりをしてきてる
JSに参照とかはない（Reference型はあるが）
値は基本的に複製されることはなく
すべて同一存在の名前付けの連鎖でしかない
要するにお前が会社ではタッ君と呼ばれ、家ではターちゃんと呼ばれてるのと同じ
何かの図形描画ツールを参考にすれば？
昔はundefinedがうんちだった
undefinedに何か代入するとかワザと壊しにかかってるんだからその結果壊れても問題ないでしょ
他にも置き換えられたら困るものなんて無数にあるんだし
昔動いてたコードは今も動く
動いてたうんちコードは今も動くはず
'use strict'がなければundefined = 'puyopuyo'も
使わなきゃいいじゃん
そのときには使えなくても後々使うかもしれない
（ただ単にバッチファイルをダブルクリックしたら起動してファイルを生成してくれるってだけだけど）
一応localhostでなんやかんやするやつのチュートリアルもやったけど
それらを組み合わせて色々するとなると、コールバック地獄とか大変だと聞くので
なかなか重い腰が上がらずにいる
うまく使えたらすごく良さそうだと思うんだけど
このへんどこで学んだらいいものか
JSで設定できないCSSプロパティがあるということでしょうか？
ttp://https://jsfiddle.net/0vrcehsf/1/ Ctrl+Shift+P から、Run Code で、node.js で実行される
node は、npm, yarn を使うのに必須だから
他にも、webpack, babel, vue.js なども、たぶん、node が必須だろ
aが負の数（-700など）だったなら-1に
aが正の数（329など）だったなら1に
変換したいのですが、どうすればいいですか？
iframe使ったら勝手に非同期処理になるんですか？
それでした！ありがとうございます
危うく みたいなことするところでした
はカッコイイけど俺の可読性が低いので使わないと思う
signとか距離求めるっ時ぐらいしか使わないよぉ
今は大丈夫かな？
IE10以下は論外として
他にsignumをsignって書く言語あったっけ？
これはどうして動くの
流石に自分でいろんな場合考えてみようぜ
論理演算子 ||（or）は
expr1 || expr2 としたとき
expr1がfalseとみなせる値の時、expr2を返す
falseとみなされるのは
0、-0、false、null、undefined、NaN、空文字
aが正のとき、カッコがfalseつまり0なので
0 || 1 となり、0はfalseとみなされ1が返る
aが負のとき、カッコがtrueつまり1なので
-1 || 1 となり、-1はfalseとみなされないので-1が返る
a>0?1:a<0?-1:a
か
+a>0?1:+a<0?-1:+a
の方が良いだろうな
が一番わかり易いでしょ
すばらしい
-(a<0>0)|1
-(a<0)|1
a|1
7文字で終わりなのかい！？
以外はa=0の時の挙動がsignと違うからポリフィルにはならないような
がだめじゃん
まぁガバガバだけどそこそこ動けばいいレベルだと７文字限界っぽいな
a/~a|1
対応したぞ～
a?/^-/.test(a)?-1:1:0
0のときの挙動もsignと同じだｗ
これは安全w
遅そうだけど
対応したぞ～
Number.isFinite(a)?a?/^-/.test(a)?-1:1:0:NaN
ブラウザで出力できるのならそれでも良いのですが、なかなか難しいようで…
使いやすくはないけど
ttp://https://codepen.io ttp://https://jsfiddle.net/ スマホで無理に書くより、大人しく仕様を読むとかにとどめておいたほうが良いとは思う
codepenを使わせていただきます。
ありがとうございました。
スマホでなんでもやっていくスタイルには賛成だが
少なくともjavascriptのコーディングをスマホのみでやるのは数年早い
フォークしてコピペや改変くらいならまだしも
大丈夫、できるよ
昔はメモ帳で書く人も多かったんだし
制約が多い中頑張ることは変な癖がつくけどそれはプラスにもなる
あるelementAが存在するかしないか分からない時に、
var element=elementA;
elemet.style.display="none";
というふうに書くとelementが要素でないのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
こういう時に「要素があれば指定の処理をする、なければ何もしない、エラーは出さない」ようにするには
var element=elementA;
if(element)elemet.style.display="none";
というふうに書くしかないのでしょうか？もう少し簡潔に書く方法とかあったりしないのでしょうか
すみません
x というふうに書くとelementが要素でないのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
o というふうに書くとelementAが存在しない場合はelementが要素でなくなるのでstyleがundefinedになるので2行目の時点でエラーになってしまいますよね。
です
十分簡潔だと思うけど……
ver element = elementA?elementA:new Element()
みたいなことをしたいのかな
NullObject的な
try { return f(); } catch(e) {} ;
}
ignore(() => {
var element =elementA;
element.styke.display = "none";
});
呼んだ？ｗ
jQueryの設計は
1. セレクタで検索する
2. 「0個以上のマッチした要素」であるjQueryオブジェクトが作られる
3. そのjQueryオブジェクトに対してメソッドを呼び出すと、
「0個以上のマッチした要素」全体に対して処理が適用される。
つまり存在してもしなくても同じように処理をかけて
要素がなければないでエラーにならないという設計だよ。
CSSと同じだね。（CSSも要素がなくてもエラーにならない）
の例だと以下のように簡潔に書ける。
$(elementA).css({display: 'none');
ただ普通はこのようには書かない。
一般的には $(elementA) ではなく、$('.foo') みたいなセレクタを書くし
CSSを直接いじるのではなく $(・・・).addClass('bar'); みたいにクラス名をつけ外しして
CSS側で .bar { display: none } みたいに書く
なお はありえないクソコード
もっとべた書きでいいと思う
このレベルの質問する人なら、もうjqueryを利用したライブラリはバンバン使ってると思う
jQueryの導入については気にしなくていいと思う
なんだったら、テンプレを作ってみては？jQueryの有無とか
beautifyをかけた時に２行に分かれてしまうのがイヤだったり（そんな重要な部分じゃないのでソース上で場所とったり変に目立ったりして欲しくない）
同じ変数名を１度以上書きたくなかったり（そこが変数じゃなかったり変数名が長かった場合かさばるから）
して、まさにjQueryみたいに反応してほしいんですよね。むしろ直接
elementA.style.display="none";
と書いて、elementAが存在しなかったりエレメントじゃなかったりすれば何もせず素通りしてほしいぐらいなんです。
(elementA?).style.display="none"; とか
if(elementA).style.display="none";
みたいな書き方が（空想ですが）あればいいんですが。
そうですね、そんなふうに１行にまとめる書き方でelementAを2度書かなくてすむ書き方があれば知りたいです…
tc39で提案されてると思う
どちらかといえば、変数 element が100%要素ノードになるようにコードを組むか、要素ノードでない場合にTypeErrorを返す方が厳密動作で俺は好きだけどな
(バリデーションするなら、Object.getPrototypeOfとか、nodeTypeとか、tagNameとか、いろいろあるが)
君のやりたいことを実現するには、setProperty(element, 'style.display', 'none') をユーザ定義すれば良い
だが、呼び出すごとに2の乗数分の組み合わせが出来るから、そこを考慮してアルゴリズムを考える手間が必要
1=ニューヨーク
2=東京
3=パリ
として、1,2,3みたいな文字列を
ニューヨーク,東京,パリ
という風に置き換えるにはどうすれば良いですか？
1000個以上あって全部replaceだととんでもない長さになるので、良い方法を探しています。
ソースの時点で書き換えるのはダメなの？
string.replace(/\d+/g, n => hash[n]);
var map = {
'1':'ニューヨーク',
'2':'東京',
'3':'パリ'
};
var newstr = str.replace(/\d+/g, function(match){
if(match in map){
return map[match];
}
});
const cities = [, 'ニューヨーク', '東京', 'パリ'];
const nStr = '1,2,3';
const cStr = nStr.split `,`.map(n => cities[n]).join();
console.log(cStr);
\\=> ニューヨーク,東京,パリ
間違えた。訂正
var str = '1,2,3';
var map = {
'1':'ニューヨーク',
'2':'東京',
'3':'パリ'
};
var newstr = str.replace(/\d/g, function(match){
return (match in map) ? map[match] : match;
});
それにわざわざ、str で数字を定義しなくても、
map のすべてのキー・値を取り出せば、良いのでは？
JSは最も高速なメジャー汎用スクリプト言語の一つなのだから
なんとなくだけどメモリを多く消費するイメージがある
1. ユーザーがmousedownやkeydownする
2. それらに対してJSでイベントハンドラに設定された処理が実行される
3. ブラウザのデフォルトの処理
4. ユーザーがボタンやキーを離すまで何も起こらない（ドラッグとかするならここ）
5. ユーザーがmouseupやkeyupする
6. JS
7. ブラウザのデフォルトの処理
この一連の流れのうち、2と3を入れ替えるか
あるいは3と4の間にJSで何かしたいのですが…
setTimeoutを使った方法以外にないんですかね？
普通に使うとペーストされた文字列を取得できなかったりするので…（ペーストされる前に何かするだけ）
ttp://https://qiita.com/neko_the_shadow/items/c05a266075c08b73bddb ここだとやっぱりsetTimeoutを使っているようですが
画像上で、右クリックメニューを開かないように、return false とかにしてるサイトがあるけど、
確か、F12 開発者ツールを起動して、return false を削除すれば、
右クリックメニューが出るようになるから、画像をダウンロードできたと思う
また、jQuery などでDOM から、return false を削除できるかも知れない
または、clip コマンドを呼び出して処理している。
VBScript などからも呼べる
コマンドプロンプトで、where clip で、
C:\Windows\System32\clip.exe
# クリップボード内の複数行文字列の、各行の先頭・末尾から、
# 連続する空白類を除去して、クリップボードに入れる
str = `powershell Get-Clipboard`
str.encode! Encoding::UTF_8, Encoding::CP932 # UTF_8 へ変換
ary = str.each_line.map( &:strip )
IO.popen( 'clip', 'w:cp932' ) do | clip | # CP932 へ戻す
clip.print( ary.join "\n" )
end
これからPWAの基本的な使い方を学習しようと思うのだけど、開発環境はどういうのが良いの？テキトーなエディタとブラウザで進める感じ？それともvisual studio codeとか？
ゆくゆくはVue.jsあたりでSPAに進んでいくつもりだけど、最初は簡単なサイト(HTML+CSS+JS)をPWA対応しながらPWAとServiceWorkerの使い方になれていきたいと思っている
質問者はpython使いでjavascriptは基本を抑えた程度。開発環境はpycharmとかVScodeのイメージはある一方で、JSでの開発経験はないからおかしいこと言ってるかもしれない
よろしくです。
というか一番素朴にキャッシュにSWを使ったら
SPAである必要もないことも多い
キャッシュにあるってことは高速に切り替えられるってことだから
無理に既存の平凡なサイトをSPAという名のpjax対応しても体験は変わらない
そういう面ではPWAとSPAは競合しうる概念
でもゲームのようなSPAもあるしSWのキャッシュにしたって
ちょっと拘ると、ファイル種やディレクトリごとに挙動を調整したりしないといけないし
表と連携したり、基本はないし、フレームワークに適当に任せられるものでもないので難しい
ttp://http://nowsmartsoft.atwebpages.com/ ↑こういう ToolKit を作ってるんだけど、MIT/BSD系ライセンスでオープンソース
にしたら、興味ある人いるかな。
C++で、ブラウザとWindows nativeの両方で動くアプリがソース共通で作れるんだけど。
# 既に WebProg 板に板違いで投稿してまったけど、見逃して欲しい。
以下からでも見れる：
ttp://http://nowsmartsoft.atwebpages.com/demo1/index.html ttp://http://nowsmartsoft.atwebpages.com/demo2/index.html 実際に起動してみると、ブラウザの「中に」Windowが出てくるので
サイズを変更したり、タイトルバーをドラッグしたり、メニュー項目を
クリックしてみたり、その中にある 小さな Window をクリックして
文字を入力したりしてみて欲しい。
一度は見てから決めてくれよ。
バカにしないでマーケティング少しは勉強しなよ。
適切な商品を、適切な顧客に。
あなたがやってるのは真夏のプールでコタツの押し売り。
そりゃ開かれないよ。
そういうことか・・・。
オイラにはそういうことは理解しにくいのかも知れない。
んじゃ評価するけど・・・
・まず見た目がひどすぎる。使わずに評価するなってお前、こんな見た目で誰が使うんだ
・技術的には素直に凄いと思う
・需要がない。現状、widowsネイティブで作る物が思い浮かばない。ちなみに俺はちょっとしたツールならvbaとVB.NET使ってる
・時期もあまりに遅い。15-20年前なら、フリゲとブラゲ両方同時に作れるって触れ込みでかなり需要があったと思うけど、今はその手のライブラリは山程あるしメインはスマホアプリとsteam。もっと早ければDXライブラリの代わりになれたかも知れない
・そのためにこのツールを使おうって気にはならない事は、説明読めば大体分かるんだけど使ってみても意見が変わらなかった
ツールを作る事自体は悪い事じゃないけど、もう少しコンセプト（どんな物を作るのに向いているか）を考えた方が良いと思う
あと、「使って下さい、お願いします」ぐらいの気持ちで作らないと、ロクでもないものしか出来ないと思う
有難う。色々と参考になる。
よく頑張ってると思う
最初はいろいろどうかと思ったけど、考え直した
コマンドラインで動くようなものをWASMに移植するのはそう難しくないし、
ゲームのオーサリングツールはいろいろあるけど、
最低限のGUIを持ったツール的なもののための環境は整備されてないから
そういう広い視野で見たら可能性があって目の付け所は良いと思う
だからそういうところを間違わず見失わず続けていけば
必ず評価されるものになると思うよ
逆に少しでも余計なことに拘るとそっぽを向かれる
例えば今の見た目は確かに駄目だが、これを「足りない」と思うと失敗するパターン
むしろ変に拘ってるものを捨てようとして一番重要で地味な部分を着実に整備していったほうがいい
そしてアピールして回るのはいいけど、もし自ずと使ってくれる人がいるなら
その人の声を、見失わない範囲で最も大事にしたほうがいい
ありがとう。
クリップボードからのコピーもペーストもできるんだね。
リアル机の上に置いてあるやつのこと言ってる？
ソフト上で実装しようと思えば出来ると思うけど、めんどいからOS丸投げだわな
ブラウザは、「ペースト」の方はセキュリティー上の問題から禁止している
ことが多い。JSからは原則的には、native OSのクリップボードの内容を
paste する事が出来ない。ところが、textarea には出来る。
JSからでも全く出来ないわけではなく、ユーザーが CTRL+V を押した場合
にのみは、textarea 以外でも出来るらしい。イベントが発生した場合に
のみは、他の要素、例えば <p> タグなどでも使えるようになっている。
でも、何か使えなくなってるっぽい？
ttp://https://qiita.com/kwst/items/8d9cd40e181761085325 1人の私が、参考になった と評価しています
document.execCommand('paste')
は使えなくなってるけど、それとはまた別の問題のはず。
何にもない場合に、JS から関数を呼び出してもペーストは出来ないようになっている。
ところが、ユーザーが CTRL+V キーを押した場合は、<p> タグにさえもペースト
できる方法が有る。<p> タグの attribute に名前は忘れたけど、
xxxx="true" みたいにしておく必要がある。すると、そのタグで、
pasteイベントが発生するようにもなるので、そのイベントを拾えば、
また、いろいろなことが出来るようになる。
あぁ、そういう事か理解した
＞何にもない場合に、JS から関数を呼び出してもペーストは出来ないようになっている。
これが出来ると思って色々触ってたわ
但し、＜＞括弧は半角から全角に変えてある：
＜p contenteditable="true" onpaste="myFunction()"＞Try to paste something inside this paragraph.＜/p＞
＜script＞
function myFunction() {
alert("You pasted text!");
}
＜/script＞
htmlタグにcontenteditable="true"したらえらいことになったｗｗｗ
開発ツール無しでも結構色々出来て面白いなこれ
今だとnavigator.clipboard.readText()で取得できる
execCommandなんかはオワコン
googleのVisBug拡張機能じゃダメか？
ページロード時にデータベースの項目とかどうやって表示するの？
何か変なコード書いてる気がする
let Hoge = function(){};
Hoge .prototype.open= () => {};
Hoge .prototype.run = () => {
let self = this;
window.addEventListener("DOMContentLoaded", ()=>{
self.open();
});
};
これでself = windowと見なされてwindow.open()してたもよう
let Hoge = function(){};
Hoge .prototype.run = () => { console.log(this); } // 1
new Hoge().run();
Hoge .prototype.run = function() { console.log(this); } // 2
new Hoge().run();
下だとthis = Hogeでいいんだけど上だと何故かthis = Window
アロー演算子の使い方が間違っているのかも
辺りからアロー関数のthisについて話があるから読んでみて
俺もアロー関数は苦手で、いつも無名関数にしてる
Hoge .prototype.run = function() { console.log(this); } // 1
とかどうだろう。試す気力もないぐらい眠い。今日は、寝る。後は誰か頼んだ・・・
関数宣言のfunctionを省いて
()と{}の間に=>を書く書式にしたものだよ
自分より上のスコープのthisが貫通するのが従来のfunctionとの違い
高階関数を簡単に書くためのものだよ
高階関数っていうのは関数を引数に取る関数
コールバックを引数にするとほぼ同等
var array1 = [1, 4, 9, 16];
var map1 = array1.map(function(x) {
return x * 2
});
長ったらしいだろ？
これをこう書ける。
var map1 = array1.map(x => x * 2);
こう書くことで、単に短く書けるだけでなく
「関数が呼ばれる」という感じから「式を渡す」感じになるだろ？
さらに関数っぽく見えないのでthisも呼び出し元のthisを
そのまま参照するという感じが素直に受け入れられる
たまに関数の改良型だと思ってなんでもアロー関数にするやつがいるけど
高階関数用の引数だと思ったほうが良いよ
以上
以上
今は分からんでも一度使っておけば良い
恥ずかしくないの？
TypeScript は、これを踏襲しているけど、
Haxe, jQuery は、this の意味を変えている
jQがそうしたことが
ピュアJS知らない世代の中に
thisの理解を間違う層を一定数生んでいる、気がする
> jQuery は、this の意味を変えている
変えてないよ。jQueryはDOMの仕様準拠だから
DOMのthisと同じ意味になってる
ほいこれ。これがDOMのthisでjQueryはDOM標準に準拠してる。
ttp://https://jsfiddle.net/ub0rh3fo/ document.getElementById('id').addEventListener('click', function() {
this.classList.toggle('on');
},false);
「Global(window) を指す事があるから、ややこしい」＝setTimeoutぐらいしか
思いつかないんだが。あとは似たようなsetIntervalか。
変えてるよ
eachとかmapとかfilterとか、いくらでもあるよね
thisは関数が呼ばれるときに決まる第0の引数のようなものなんだから
呼ばれ方によって呼ぶ方の取り決めによって如何様な値も取りうることは当然だし
ドット演算子と関数呼び出しを組み合わせるとレシーバが来るという基本はあるけれど
別にthisはそれだけのために存在してるものではないし
変な固定観念を捨てて簡単に考えれば何も難しくないと思うけどな
まだ未実装ということでwebpackだかbabelだかソース変換ツールが必要なのかな
とはいえ悪いことでもないので、人に教えるなんて無駄なことせずにガシガシコード書いてればいい。
const array = [1, 2, 3, 4,5];
array.forEach(function() {
console.log(this); // Windowと表示される。
});
いま、thisが「Global(window) を指す事があるから、ややこしい」
って話でしたよね？
JavaScript標準自体がややこしいんだよね。
const array = [1, 2, 3];
console.log(this); // ここのthisはDOM Element
array.forEach(function() {
console.log(this); // ここのthisはWindow
});
}, false);
このように、thisが変わるのがややこしいって話でしょ？
jQueryとか関係ないよ。
アロー関数を使えばいい。これもJavaScript標準と同じ
$('#id').on('click', function() {
const array = [1, 2, 3];
console.log(this); // ここのthisはDOM Element
$.each(array, () => console.log(this)); // ここのthisもDOM Element
});
thisはクラスのメンバ関数でクラス自体を参照するものだったじゃん？
「俺の知っている言語では」という言葉が抜けてるよ
class Hoge {
private String str = 'hoge';
public void foo() {
System.out.println(this.str); // ×間違い thisはクラスのインスタンス自身です
}
}
Hoge hoge = new Hoge();
hoge.foo()
↑
○ 正解 thisとはfooメソッドを呼んだ時の.の左側のことです。
と正しく説明していれば、JavaScriptも同じだってわかるのに
jQueryはthis値を変えてるって話だったよね？
forEachとeachのthis値を比較してみ
そもそもthisを変えない。ということはありえないよ
document.getElementById('id').addEventListener('click', function() {
const array = [1, 2, 3];
console.log(this); // ここのthisはDOM Element
array.forEach(function() {
console.log(this); // ここのthisはWindow ← 【thisが変わってしまっている】
});
}, false);
君の個人的な「あり得ない」の話はしていない
jQueryがthis値を変えているのは事実
その言い方だとjQueryがthisを変えてるのが悪いように見えるけど、
実際にはJavaScriptだってthisを変えているし、
むしろjQueryは正しい方向にthisを修正しているってことだろう？
君が勝手に「良い」「悪い」の話しにすり替えているだけ
元々はでしょ？
↓
そもそもthisを変えない。ということはありえないよ
？？？
教える才能もクソもないよ
JSの細かな仕様を覚えろと説明してもしょうがないでしょ
だから変な固定観念を捨てて柔軟に捉えろと言ってる
thisが難しいのではなくて難しく考えてるだけ
そしてそこを柔軟に捉えるのが難しいってだけで
最初から第0引数と思ってれば何にも難しくない
そこが難しくなってしまってるのはもう仕方のないことだから頑張れとしか言えん
何か詳しく知りたいのなら聞いてくれれば具体的に細かく教えるが
細かく聞いてそれで理解できる人は自分で調べられる
だからとりあえず固定観念を捨てろとしか言えん
それ俺が言ったんじゃないんですけどｗ
俺は最初からjQueryは優れているという話をしてる。
jQueryがthisを変えているならば、それはその方が優れているからだ。
現に混乱の理由となっているthisがWindowとなるのは
JavaScript標準の話だっただろ
自分は初めからjQueryの良し悪しなんて話してないんだけど
関係ないなら初めから関わってこないでよ
何か少し勘違いしてね？
addEventListenerは第二引数に渡される関数を
DOM要素にバインドするメソッドなんだから
thisがイベントターゲットになるのは当たり前
forEachは引数に渡された関数を繰り返すだけなんだから
何にもバインドされてない関数のthisがグローバルになるのも当たり前よ
JSとAS界隈で、即席に閉じたスコープを作るのに
(function(){
})();
をほいほい書いちゃう宗教が出来て
それがループに適用されると
for(var i=0 ; i<配列.length ; i++)(function(index,item){
})(i, 配列[i]);
みたいな形になって、ここでcallやapplyを使って
thisを配列[i]にしちゃう宗派も出来た
その系譜がjQueryだったんだな
では、にレスしたのが間違いだね
何か少し勘違いしてね？
イベントリスナーのthisArgがターゲット要素になるのは
ただ仕様でわざわざそうするように決まってるからで
何の自然で当然な動作でもなんでもないぞ
へー面白い
何か少し勘違いしてね？
> addEventListenerは第二引数に渡される関数を
> DOM要素にバインドするメソッドなんだから
その理屈だと、jQueryもDOM要素にバインドするメソッドなんだから
thisがイベントターゲットになるのは当たり前
> forEachは引数に渡された関数を繰り返すだけなんだから
> 何にもバインドされてない関数のthisがグローバルになるのも当たり前よ
だからってthisを変えたらダメでしょ
JavaScript のthis は、文脈によって、Global(window) を指す事があるから、ややこしい
console.log(elem);
});
を、
$('.hoge').each(function() {
console.log(this);
});
と書けるのは、jQueryがelemをthisにバインドしてるからでしょ。
アロー関数使ってこれは無理。
$('.hoge').each(() => {
console.log(this);
});
つまりjQueryバカ君は「this変えられるfunction最高！アローはクソ！」って言いたいんだねｗ
アロー関数を使う場合はこうな。
$('.hoge').each((i, elem) => console.log(elem));
ってか、アロー関数はthisをバインドしないんだから
引数でやるしか無いでしょ？jQueryの問題じゃないよ。
アロー関数使う以上、thisは関数の外のものが使われる
アロー関数で書く
$('.hoge').each((i, elem) => {
console.log(elem);
});
は、functionでも同じく
$('.hoge').each(function(i, elem) {
console.log(elem);
});
と書ける。
しかしjQueryはわざわざelemをthisにバインドして
$('.hoge').each(function() {
console.log(this);
});
と書けるようにしている。
これは全く無駄なことである。
つまりjQueryは必要もないのにthis変えるアホである。
そうではなく
$('.hoge').each(function() {
console.log(this);
});
と書けることに価値があるのであれば、
$('.hoge').each(() => {
console.log(this);
});
と書けないアロー関数はクソということになってしまうからだ。
…と、こういうことか…
ぜんぜん違うよｗ
変わってないよ
ただのfunctionなんだからグローバルになるのは仕様通りだし自然じゃん
何から何に変わったと主張しているの？
DOM ElementからWindowに変わった
これがややこしいって話をしてる
document.getElementById('id').addEventListener('click', function() {
const array = [1, 2, 3];
console.log(this); // ここのthisはDOM Element
array.forEach(function() {
console.log(this); // ここのthisはWindow ← 【thisが変わってしまっている】
});
}, false);
class Foo {
constructor(){
this.value = 100;
}
foo() {
console.log(this.value); // 100と表示される
var ar = [1, 2, 3];
ar.forEach(function() {
console.log(this.value); // エラーになる
})
}
}
var f = new Foo();
f.foo();
Global（Window）じゃない。
使い方によってthisがコロコロ変わる
ああわかった、何がわかってないのかが
thisは関数を実行した時に
その関数がメンバとなるオブジェクトの参照になるんよ
んで、何のメンバでもない関数はどのスコープで作られようと
グローバルのメンバ扱いになる
して、addEventListenerもforEachも
引数に渡されてる何のメンバでもないただの無名関数は
本来ならthisの参照先はグローバルになる
ただaddEventListenerは引数の関数をDOM要素にバインドする関数だから
バインド先のDOM要素がthisになるってだけ
thisってのは関数スコープを上から下に貫通するただの変数ではなくて
関数ごとに持ってるキーワードなんよ
だから変わってるのではなくて
addEventListenerの引数関数のthisと
forEachの引数関数のthisは
もともと別のものなんだよ
> ただaddEventListenerは引数の関数をDOM要素にバインドする関数だから
> バインド先のDOM要素がthisになるってだけ
じゃあ。
my.foo(function() {
// ここのthisはなんになる？
}
関数ごとにバラバラじゃないですか？
関数ごとにバラバラであっていいっていうのが、
JavaScriptの正しい仕様なんですか？
バラバラじゃないって
何のメンバでもない、どのオブジェクトのメソッドでもない関数で
thisキーワードが参照されたときは一律グローバル
そもそもthisってのは関数がオブジェクトのメソッドとして実行されたとき
そのオブジェクトを参照するキーワードなんよ
参照すべきオブジェクトがないからグローバルにしてる
foo();
var bar = {
foo: foo
};
bar.foo();
こうしてみればわかりやすかろう
そうでもない？
strictモードだと
thisで返るのはグローバルではなくundefinedになる
いずれにせよ、メソッドとして実行されていないので
参照されても返すものがねえって意味で
補足
function foo(){}
は関数文
var foo = function(){};
bar.forEach(function(){});
は関数リテラル
なんで正確にはちょっと違うんだけど、まあ捨て置け
コールバック関数がthis束縛するはずない
一度、コードを書いてみろ
>んで、何のメンバでもない関数はどのスコープで作られようと
>グローバルのメンバ扱いになる
これはちょっと乱暴w
> ただaddEventListenerは引数の関数をDOM要素にバインドする関数だから
> バインド先のDOM要素がthisになるってだけ
それは理屈にあわない。
element.onclick = function() { }
これなら、イベントハンドラを呼び出す時、
element.onclick() と実行するから、イベントハンドラの中では
this = element だって納得できるが、
addEventListenerの場合はイベントハンドラを複数登録できるわけで、
何かしらの配列に入れてるはず。
function addEventLister(type, handler) {
this.handlers.push({type, handler}) ;
}
みたいな感じで。そしてイベントハンドラを呼び出す時は
for(var handler in this.handlers) {
handler();
}
もしくは、handlersがただの配列ではなくてオブジェクトでこんな風になってるとか
this.handlers.call_all_handler();
そうするとイベントハンドラの中のthisは、globalかundefinedかhandlersになるはずだ。
イベントハンドラはDOM要素に直接バインドされていない。
イベントハンドラの中でthisがDOM要素になっているのは、
DOM要素が複数のイベントハンドラを呼び出す時に
わざわざthisをDOM要素に変更して呼び出しているはずだ
そりゃそうよ。コールバック関数自体はどのオブジェクトにも
紐付いてないのだからthis束縛はされていない
addEventListerとかは、わざわざ自分の要素が
thisになるようにしてからコールバック関数を呼び出している。
漏れは、そういう認識です
callとかapplyとか知らんの？
知ってるよ？addEventListenerは
callとかapplyを使って、関数を呼び出す時に
thisを変更してから呼び出してるよねって話をしてる
thisArgがundefinedのときsloppy modeではglobalThisに置き換えられてただけ
jQuery君がそれを理解してくれれば解決なんだがね
俺がそのjQuery君なわけだがｗ
アホか
バインドするメソッドなんだからそうするに決まっとろうが
もお前なら、と矛盾してる
> バインドするメソッドなんだからそうするに決まっとろうが
バインドするメソッドとは？
それはどういう意味で、
どこにそういう仕様であると書いてあるんですか？
なんか名前書いてよ
興味のある人は読むし
ない人はNGすっから
むしろ一番最初にjQueryでてきた
オレオレ用語使ってないで、ちゃんと説明しろ
ttp://https://qiita.com/kan_dai/items/b1850750b883f83b9bee このサイトに載っているカレンダーを勉強してるんですが、
calendarHtml += '<h1>' + year + '/' + month + '</h1>'
calendarHtml += '<table>'
ソースを見ると上記のように、変数を上書きしています。
前の値を保持して、新しい値を追加してると考えていいのでしょうか？
このあともfor文で、<tr>や<td>もcalenderHtmlに代入されていってます。
上書きすると前の値が消えて、新しい値に上書きされると思ってたんですが。
ttp://https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment リンクありがとうございます
解決しました。
理由が「バインドするメソッドなんだから」って
書いてるんだから、その理由の意味を聞いてるわけ。
それが答えられないなら、理由がないってことになる。
他意は無いんだが
質問者が未解決のままレス続ける時は
名前欄に最初の質問のレス番号入れてくれんかね
文脈わからなくなるし
混ざって他の質問者が流されたりしちゃうこともあるから
あんまり口うるさくするのもアレなんだけど
マナーっつうか
みんなで使う掲示板なんで、ちょっとした気遣いみたいなもんで
レシーバー（→this）が要素オブジェクトになると言いたかったんだろうが
紐付けてるからそうなってるのではなくて
紐づけてる風でもあるし、便利だからそうされてたのが
デファクトとして今仕様になってると考えたほうが良いと思う
何れにせよthisをどうしようが自由でそこに言語の縛りはないのだから
うん、でもaddEventListenerは複数指定できるから
要素に直接紐づけてるわけじゃないんだよね。
便利だからわざわざthisを要素自身にして呼び出してる
便利だから。jQueryも同じ。便利だからそうしている。
$('.hoge').each(function(i, elem) {
console.log(elem);
});
を、
$('.hoge').each(function() {
console.log(this);
});
と書けるようにしてるから便利という意見ですよね。
つまり、
$('.hoge').each((i, elem) => {
console.log(elem);
});
としか書けない、
$('.hoge').each(() => {
console.log(this);
});
とは書けないアロー関数はクソ、thisを自由に変えられるfunction最高という意見ですねｗ
thisが変わってほしい時は、function、
thisを変えたくない時は、アロー関数
使い分ければ良いんだよ
所でさ、
1. thisが要素になる・・・使いやすくするため
2. thisが変わらない（つまりアロー関数）・・・関数の外のthisを使える
この２つにメリットが有るのは分かるんだが
3. thisがGlobal（Window）に変わる。（ただし"use strict"の場合はundefined）
この仕様にメリットってなにかある？
お前はクソということだな
昔はthisは（他のクラスベース言語だとインスタンスを表すのでそれに習って）
オブジェクトでないといけないという縛りがあったので
undefinedのときは仕方がないのでglobalThisに置き換えられてただけ
ES5になってその制限を緩くして
strict modeだとthisがプリミティブになることができるようになった
うん。それはそれでいいんだけど、
JavaScriptのforEachでthisがundefinedもしくはwindowになる（strictかどうかで挙動が変わる）
という仕様は何が便利なのかなーって話
人の話聞いてる？
forEachなんかでのthisValueは当然メソッド呼び出しでもないんだしundefinedでしょ
ただsloppy modeだとundefinedがglobalThisに置き換えられるってだけ
置き換えられる理由は前述の通り
返すものがないから
歴史的な問題でもあるから
詳細は90年代からESに至るまで仕様書順に読んできて
ここでこんなに引っ張るような話でもねえよ
仕様なんだから
メリットはないって言ってくれれば良いんだけど？
foreachにアロー関数渡す理由が無い
foreachには無名関数渡せば良いだけで、
変な事してる人に配慮して言語仕様を貶める事は俺には出来ないな
お前言ってることがおかしいよ
undefined以外だったらおかしくてむしろデメリットになり得るでしょ
thisは何にでも使えるとはいえ「THIS」なのだから
ライブラリやらが何をどうしようと勝手だが標準には秩序というものがある
undefinedの代わりに何か便利なものを提供しろ！
とか言いそうだな
> undefined以外だったらおかしくてむしろデメリットになり得るでしょ
どんなデメリット？
> thisは何にでも使えるとはいえ「THIS」なのだから
forEachの中では、必ず undefined （またはWindow）になるんです。
「THISなのだから」とはどういう意味？
便利なものが思いつかないなら、何も提供しなくて良いのでは？
おかしくなかったら揉めない
必ずなるなんて誰も言ってないでしょ
forEachやmapは第二引数で指定できるでしょ
コールバックのthisが何になるかなんてJSの秩序では自明でないでしょ
それに利便性も含めて指定できるようになってるんだから
指定されていない時はundefinedが自然でしょ
それが嫌なら指定すればいいだけなのだから
いいえ、コールバックのthisが何になるかなんてJSの秩序では自明ではありません。
※ただしアロー関数は除くｗｗ
なんかおかしいことあるか？
あと揉めてるっていうか
変な人が居着いちゃってるだけのような気が…
自明じゃね？
何かのオブジェクトのメソッドとして実行されないから
thisキーワードを参照しても返すべきオブジェクトがないわけで
だからそのクラスベース脳捨てろよ。
hoge(function() {console.log(this);});
//=> undefined
が自明だって？バカいうな。
hogeの定義はこうだ！
function hoge(cb) {cb.bind('うんこ')();}
だから、
//=> undefined
じゃなくて、
//=> うんこ
なんだよこのうんこ！
jQueryだってやってることは同じだバカ！
日本語でok
> 何かのオブジェクトのメソッドとして実行されないから
> thisキーワードを参照しても返すべきオブジェクトがないわけで
その理屈だと、DOMのイベントは、
DOM要素オブジェクトのメソッドとして実行されないから
undefinedになるべきなんですよ。
お前足りん子か?
デフォルト値がない限り引数に指定できるものを指定してない＝undefinedと扱われるのはJSの秩序だろうが
DOMはあくまでDOMで外様の仕様だから
そこには別のルールがある
お前の言う「JSの秩序」によると
element.addEventListener('click', function() {
// ここのthis は
}, false) ;
undefinedとして扱われるべきということになってしまう
DOMの仕様に準拠している。と考えればいいのか
恥ずかしい奴
ん？
addEventListenerが特別な振る舞いするってだけじゃね？
なぜ特例を挙げる？
言語の仕様と歴史の問題だから
仕様書読んでよ
ttp://http://www.planetpdf.com/codecuts/pdfs/tutorial/jsspec.pdf 一つ上くらい読め
足りん子
これでええやろ。
Array.prototype.forEach2 = function(cb) {
this.forEach((v, i, a) => { cb.bind(v)(v, i, a); });
};
コールバックにはfunctionつかうんやで？
アローはthis変えさせてくれへんいけずやからな。
[5, 4, 3].forEach2(function() { console.log(this); });
5
4
3
[5, 4, 3].forEach(Map.call, function() { console.log(this); });
5
4
3
がまったく分からない…
バカにも分かるよう解説してほしい
バカ舐めてない？
まずMap.callが何かググってみると良いと思う
Mapオブジェクト便利だよ
fn = function() { console.log(this); }
[5, 4, 3].forEach(Map.call,fn);
↓
Map.call.call( fn, 5 ); Map.call.call( fn, 4 ); Map.call.call( fn, 3 )
Map.call.call( fn, 5 );
↓
Map.__proto__.call.call( fn, 5 )
↓
(Function.prototype.call).call( fn, 5 )
↓
(fn.__proto__.call).call( 5 )
↓
fn.call( 5 )
∵o.m(x) ≡ (o.m).call( o, x ) ⇐ ( o.__proto__.m ).call( o, x )
> forEachの第二引数はthisの指定だって既出じゃん
だから、その第二引数でどうやって、各要素がthisとなるように
指定するんですか？って話なんですが
どうやってって指定するのかって
が例出してるじゃん
さんが丁寧に説明してくれてるじゃないか
callが連続するのが分かりづらいかも知れんけど
落ち着いて一個ずつ読んでみ
だと読み直すたびに毎回そこで引っ掛かる自信あるｗ
再帰関数を実装したらスタックが溢れてしまいます。スタックサイズを設定出来るコンパイラオプションみたいなものはないのでしょうか？
無限に必要だろ。お前のコードは。
わからんのなら黙っとけ
それでも溢れるのはエンジンの実装がまだだから
各エンジンにスタックサイズ指定のオプションがある
普通はそこまで無理くりthisを使おうとしないほうが
よっぽどいくらでもスマートに書く方法があるから
なぜ第一引数で与えられるものをわざわざthisを使おうとする
考え直したほうがいい
○ 末尾最適化が可能なように書いた場合に限り、末尾においてスタックは消費しないだけで
末尾以外でスタックは消費するし、末尾最適化が可能じゃない書き方をしていれば、それもスタック消費する
最初からループで書けばすむものを、再帰で書いてコンパイラにループに戻してくれることを期待するという無駄なことをしている。
最後の意見は超同意。再帰が話題になるたび思う。
jQueryディスｗ
thisだけにｗｗなんちゃってｗｗｗ
本当に不可能なことをしようというのであればそれは不毛だよと教えてあげないといけないが
エンジンの設定などで動き得る範囲なら
書きたいように書けるように設定するほうが正しい判断だと思う
今の時代人間が機械に合わせるより機械を人間に合わせるほうが絶対に良いことで
JSなんてエンジンが頑張ってくれるおかげでいろいろ好きなように楽に書けてる言語の代表なのだから
むしろ今は人が機械に合わせた方が恩恵大きそうな気が
array.forEach(v=>console.log(v));
これでいいじゃん
this束縛したら通常の動作ではなくて直感的じゃないし、第二引数でthis束縛する場合に改修コストが余計にかかるし、メリットがまるでない
つーか、ループ処理でthisで束縛してるのはjQueryだけだし、それが当然としたり顔でいわれても困るわ
それでもforEachに一々躓くのは異常としか言えないね
だと思う
それにバグも少なく見通しがよくなる
FWの設計を無視して無理矢理色々やろうとすると歪が出てくる
> jQueryからそれが当たり前のように始めると危ないよと様々な人が様々に言ってきた害が現実に起きてるだけとは言え
なんか害起きてるか？
お前が害害いってるだけだろう？
javascriptのforEachは、間違っている！
でどうしろと
そんなことを言ってるのはお前だけ
DOMが要素をthisに変更してるように
jQueryも要素をthisにしてるだけのこと
addEventListenerとforEachは全く違う
で俺らにどうしろと
JSの仕様に文句があるならECMAに言ってよ
jQueryも全く違う。thisをどうするかは設計者が決めること
お前もうレスしてくるな
これまでの話の流れのニュアンスを理解できないというのならよくいるただのアスペだが
お前は１レス中の隣接する行すら関連付けて理解できないのだから
そんなAI以下の知能でよく今まで生きてこれたな
お前が、存在しない「害」をある前提にして洗脳しようとするからだろ
「害」なんて無いんだよ。有るならどんな「害」か書けるはずだが。
それともお前は、これが正しいんだ！とかいうお前の思い込みを主張するつもりか？ｗ
俺も同意見だから、異論はない
彼はjQueryの仕様がECMAにないのはおかしいという論調だったからな
全くその通り
jQueryの仕様をESに持ってくるなと
そもそも、NodeList#forEachでもthis値を書き換えてないわけで、addEventListener云々は採用する理由にもならん
お前頭湧いてるのか？
jQuery流にドップリ浸かったせいでJSの基礎構文に違和感を感じて
無理やりにでもthisを活用しようとすることが害でなくてなんなんだ？
正しいとか正しくないとか誰も言ってないことを思い込むのも辞めてくれ
もしかしてjQueryを否定してると思ってるのかもしれないがそれも違う
表があれば裏があるという当たり前で自明なことを言ってるだけ
それを受け入れられないというのならただの病気
お前と話すことはない
第二引数(index)を使わずとも、第一引数(値)で参照出来るぞ？
スマン、普通に間違えた
もちろんvalueねｗ
arr = [1,2,3];
arr.forEach(function(i){
console.log(arr[i-1]);
})
引数の位置的に、jQuery脳も疑う
> jQuery流にドップリ浸かったせいでJSの基礎構文に違和感を感じて
ん？誰が違和感を感じてるんだ？ 逆だろう。
jQueryが憎くて憎くて、jQueryの構文に違和感を感じてるのはお前だろう。
自覚ないんだろうけどなｗ
JSの基礎構文（？）なら、jQueryにも採用されてるんで、
違和感を感じるはずがないんだよ。
あ、そっちのやり方ね。で終わる話だから
$.each([1, 2, 3], function(index, value) {
console.log(value); // 1, 2, 3 と表示される
});
アンチjQuery脳・・・jQuery脳のやつはjQueryが絶対だって思ってるはずだ！
これな
ワンライナーで戦争終わらせたぞ
同じような存在
未来には不要
棲み分けの話なら、jQuery流はjQueryの世界で好きにやればいい
標準APIにjQueryの流儀を持ってくるな、という話
本当にオワコンになるのは、開発元がやめたときで
他人が言ってるだけ（＝オワコンなってほしい、なってくれー）が
現実のものになることはないのです。COBOLとかね。
アンチjQuery脳・・・標準APIにjQueryの流儀を持ってこようとしているはずだ！
むしろjQueryとも組み合わせて使っていんだが？
↓に書いてあるとおり
551 自分：Name_Not_Found[sage] 投稿日：2019/03/31(日) 21:05:11.90 ID:???
jQueryはもちろんアロー関数と組み合わせて便利に使えます（当たり前）
ほんと、これだよなｗ
では、逆に聞くが、はそういう奴ではないのか？
ぜんぜん違うだろｗ
なぜ？
iphoneは知らんけどドロは好き放題変えられる
標準APIにjQueryの流儀を持ってこようとしてないから
COBOLがオワコンになってないと思う方がヤバイ
VBは勿論、PascalやFortranですらオワコンでなくなってしまう
まだまだ活力はあるけど今まさに萎みだしてる段階をオワコンと言うと思う
そういうのはディープラーニングでできる
出来るわけねーだろハゲ
俺なんて、１件だけ変わった客いて
今でも月に１回くらいActionScript書いてるんだぜ
すごくね？
案件来るんだろうか
まーないでしょう
そもそもブラウザもデフォでは実行できなくなってきてるし
これ、俺と客以外、誰が見るんだろう…って思いながら作業するんだぜ
できるよ
パターンを判別するのは得意
Array#forEachでthisが変わらないとおかしいという論調には読めないのかね？
ほっとけ
意味不明。なんでそうなるんだかｗ
そのコードはforEachでthisが変わるという例だろうが
パターンを判別するのが得意であって
位置情報の偽造を判別できてるわけじゃないですね
最近は少ないサンプルでも学習できるようになってるから
最初幾らか人力も使ってサンプルを用意して
運用しながら人間が判別しつつサンプルを増やしていけばいいんだよ
「偽装」っていうのはそういうものだから
もしかすると端末のGPSの精度がおかしいから外部アタッチメントと
アプリ使ってAndroidの位置情報置き換えてるかもしれないけど
そういうのは「偽装」とは言えないしね
ああ、「アロー関数の動きを期待している」といいたいのか？
どちらにしても、「ここのthisはWindow ← 【thisが変わってしまっている】」といっている時点で標準APIに文句付けているようだが
そもそも、の質問に対しては的外れだったな
？
ドロの位置偽装はアプリ使うぞ
だから仮に端末のGPSモジュールをバイパスしてるかどうかが分かったとしても
それで「偽装」が分かるわけではない
「偽装」っていうのはヒューリスティックに判断するしか無いということ
以前はそうだったけど
最近はディープラーニング的な解析が出来るようになって
位置情報のような社会行動学的偽装はわりと見破りやすくなった
って話じゃね？
調べて分からないのです 観察上はBootstrap使う時につきものみたいですが
JavaScript を自ら学ぶ人のための質問スレッドです。
ならプログラミングの適性ないから止めてけ
ttp://https://youtu.be/RKcFIg1yHOI ↑こういうの真似しようとおもったけどどうなんだろ
間違いなく将来強い拘り持って孤立するへんくうな奴だけど
JS仙人になれる資格を有する
そういう奴は多少変な教え方されようがされまいが
すぐに自分の心理へとたどり着けるので問題はない
単一存在にいろんな場所からいろんな名前が付けられていくイメージをするといいよ
<canvas id="canvas-1" width="640" height="480"></canvas>
<canvas id="canvas-2" width="640" height="480"></canvas>
<canvas id="canvas-3" width="640" height="480"></canvas>
</div>
canvasをabsoluteで重ねてレイヤー化。
各々単独レイヤーのみでのtoDataURL()でpng/jpeg化。
var d = data:image/png;base64,・・・
ここまではできてます。
複数の、例えば#canvas-1と#canvas-2を結合したdを得るにはどうしたらいいでしょうか？
または複数のdを結合してあたかも1層のようにさせる関数やライブラリなどありますか？
OSやブラウザは最新のものに対応してればいいです。お願いします。
すみません、もうちょっと詳しくお願いします
合わせてダブルバッファリングみたいにして一括描画、みたいな
転送元から転送先へのブロックコピー機能は、無いの？
ダブルバッファリングみたいに、一旦、裏側のバッファへ、
幾つかのシーンを合成して描いておいてから、ディスプレイに切り替えるような
実行環境はブラウザ・Node.js の2つがある
ブラウザのコンソール画面で、コード片を実行するか、
VSCode, Node.js をインストールしておいて、VSCodeからNode.jsで実行するか
上品にOffscreenCanvasとcommit()でやってもいいし
>canvas には、Win32 API の、BitBlt() みたいな、
>転送元から転送先へのブロックコピー機能は、無いの？
>ダブルバッファリングみたいに、一旦、裏側のバッファへ、
>幾つかのシーンを合成して描いておいてから、ディスプレイに切り替えるような
あるよ。
ttp://http://nowsmartsoft.atwebpages.com/demo1/index.html の Caret Blink で、それやってる。
Caret の下の canvas 画像を読み込んで、RGB データの色を
反転してから、danvas に過去戻すみたいなこと。
canvas は、back surface みたいなものも持てる。
正：反転してから、canvas に描き戻すみたいなこと。
確か、 var canvas = document.createElement("canvas") みたいにすれば、
back surface 的な canvas を作れる。例えば、
appendChild(canvas)
としない限りは、画面に表示されることは無い。
同じハズ。
知らないなら黙っているということができないのか
オフスクリーンキャンバスを使った
JavaScriptのマルチスレッド描画
- スムーズなユーザー操作実現の切り札
ttp://https://ics.media/entry/19043/ > OffscreenCanvasはWeb Workers（ウェブワーカーズ）を使用してWorkerスレッドで描画処理を行える機能です。
負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。
これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。
> OffscreenCanvasの使用方法
> メインスレッドでDOMから取得したCanvas要素に対し、transferControlToOffscreen()メソッドを呼ぶことでOffscreenCanvasオブジェクトを取得できます。
このOffscreenCanvasオブジェクトのコンテキストに対して行った描画命令は自動的にもとのCanvas要素に反映されます。
OffscreenCanvasオブジェクトをWorkerに転送し、描画を行います。
それで、どこが違うんですか？
BitBltとどこが違うか聞いてるんじゃないよ？
の「それ」とどこが違うのかを聞いてる。
あー、そういえば、そんなの聞いたことがある。
ただ、マルチスレッドで高速化しようとする技術だと思うので、
マルチスレッドへの対応が微妙な段階にある WebAssembly では
使えるかどうかはやってみないと分からないかも。
> の「それ」とどこが違うのかを聞いてる。
マルチスレッドで出来るかどうかだと思う。
WebWorkerというのは、MainThreadとは別のスレッドで起動するプログラムで、
「OffscreenCanvas」というものは、そのスレッドを使って、MainThreadとは
別のCPUコアで描画しよう、というものだと思う。
高速化や、レスポンスのよさ(?)の追求に使うのかな。
でもたしか、OffscreenCanvas自体が新しい仕様なので、まだ、使えない
環境の人が多すぎて、使うのには速すぎるんじゃなかろうか。確か。
ttp://https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility まだ、Safari が対応してないので、iPhone、iPad、Mac では使ってもらいにくい
と思う。
Owl Carousel
2つセットで使われていることが多い。
この時それぞれどんな動作しているのかいまだにわからない。
今のWebには「off-the-main-thread」って言葉があるんだよ
高速化云々ではなく、メインスレッドでやる必要の無いことは別のスレッドでやろうという
勿論理由もあるけど、「Extensible Web」のような原理主義ポリシー
OffscreenCanvasはそうした使い方もできるし、単純にcreateElement('canvas')で仮の要素を作るという
ちょっと気持ち悪さをなくすためだけにも使える
なんのためのレイヤーなのか
ほう。今時は何が流行りですか？
ゲームしか想定してないのか
CADのレイヤーを想定したらいいし元からそういう話
レイヤー用途でも普通に気軽に使えるもの
ttp://https://teratail.com/questions/25283 てのがあったけど、これできる？
最後「;」入れても何も表示されないのだが
わざわざdataURLとか取らなくてもdrawImageには直接Canvas指定できるっつうの
ではバカではない実際のコードの見本を
言っておくがその記事の筆者ではない
もしお前が知りたければそれはお前が調べることだから
つうか調べる必要すらない、全部言ってるんだから
その上でただコードを要求するとかお前失礼な奴だな
だから俺は意地でも見本は書かない
何が嬉しくてバカがバカ言って大バカになる手伝いをしないといけないんだ
俺がバカと言ってるのは俺の基準によるものだから
お前が俺をどう思おうが関係ないこと
馬鹿に分かるように説明するのが
すんなりできない馬鹿だから
それだけjsは誰にでも出来る簡単な言語って事なんだ
それだった
canvasは罠が多い
俺だけ？
2dなんて10行程度でしょ
Chromeで Emulate 出来る？
開発者モードのスマホエミュレートモードで「Nexus 5」モードにして、
Landscape keyboard をチェックしてみると、仮想キーボードの画像自体
は表示できたんだけど、そのボタンをマウスでクリックしても input タグには
文字が入力されない。
買った場合、USBケーブルでPCのデータを転送してフォルダやファイルの内容を
見たり出来る？ 例えば、html を転送したりとか。
あと、PCで使ってるモデムとかから有線 LAN ケーブルを使っての Web ページ
の閲覧とかも出来るのかな？
何でもできる
運気が上がり、きっと幸せになります。天国に行けます、多分。
MDN読んでもよく分からんので使ったことある人教えてください。
するのと、
htmlタグの属性でcontnteditable="true"
付けるのとの違いはなんでしょう？
編集可能になった後の挙動は同じように見えるのですが。
document.designModeが'off'の状態でhtmlをcontnteditable="true"してもdocument.designModeは'off'のままです。
つまり別の機能？挙動が同じなのに？なぜ１つにしなかったのでしょう？？
奇遇ですね。
私もお金が欲しいのです。どうか恵んで下さい。
きっと、金運が上がります。
最初は、Chromeがインストールされて無いらしいんだけど、
Google Play をインストールした後、APKファイルをDLした
らインストールできるの？
PCでAPKファイルをDLしておいて、Fire 7 端末にUSB経由でコピー
してもインストールできるのかな？
Huaweiのタブレット買ったほうが良いと思うよ
dtabとか性能そこそこだけど解像度抜群で回覧用タブレットにはベスト
中古1万くらいで売ってるでしょ
integrity=
って必要なの？
いろいろ調べたんですが、動かないものが多くて困ってます
ドットインストールのものは途中から有料のようです
いろいろ調べた？
サンプルなんか腐るほど見つかるが…
これは？
ttp://https://github.com/imshubhamsingh/15-puzzle 動いてるぞ
ttp://https://15puzzle.netlify.com 現代人とは思えない致命的な検索力のなさだな。そっちの方を何とかした方がいい。マジで。
ttp://https://github.com/diffdiff/15-puzzle ttp://https://blooming-fortress-48092.herokuapp.com 👀Rock54: Caution(BBR-MD5:b95868ef2c0ed5e765a4d10ada4cf289)
かけるわけないじゃないですかｗｗｗ
出題した人も探せるわけだから
特にJSって自由で人のコード理解して真似するの難しいのだから
その数字を、jQuery で書き換えていけば、簡単なのでは？
入力は、4つの矢印キーで
CSSスプライトでもっと簡単にできるだろ
それをどうやって判定するか or
「解なし」にならないシャッフルを行うか
が肝だろう
最初に、正解の盤面を作って、
そこから10～20回ほど、ランダムに動かしてから、問題を作る
日本語の説明がないと結局ロジックがよくわからなんだです
jQuery のバージョンは、もっと新しいのがあるかも
<body>
<table id="board">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td></td></tr>
</table>
<script type="text/javascript" src="../jQuery/jquery-3.1.0.js"></script>
<script>
$( document ).ready ( function( ) {
$( 'body' ).keydown ( function( e ) {
switch( e.key ) {
// 32:空白、37:←、38:↑、39:→、40:↓
case " " :
case "ArrowLeft" :
case "ArrowRight" :
case "ArrowUp" :
case "ArrowDown" : console.log( e.key );
}
} )
} );
</script>
</body>
知能が低すぎる・・・
生のチュートください
15 パズルは、ややこし過ぎる！
もっと簡単にできそうだが飽きたのであとよろしく
ttp://https://jsfiddle.net/gyj1mo9L/4/ 判定する必要はない
完成状態からランダムに十分な回数動かせばいいだけ
うおすげぇ
なぜ同じことをレスしたのか
レイアウト崩れるけど、サーバ使わないとだめなん？
それが英語だとわからない
手元ではファイルプロトコルでも壊れないけど
SCSSをCSSにコンパイルしてないとかじゃないの？
コードに全て書いてあるじゃないか
どうも
SCSSッテ物があることを初めて知りました
パズル製作がはじめてのど初心者なので、、、
わからんのなら黙っとけ
ttp://https://pastebin.com/mxadnK5i SCSSをCSSにして、JSにコメントもつけた
あとは自分でやれ
正常に読み込めなかったです
ありがとぅございますぅ
神！
ファイル名に意味が無いのは避けたほうが良い
main.jsやcommon.jsなどの名前を使う
(function(d)
ってなんで変数名宣言してないんですか？
(function hensuname(d)
変数宣言を調べたんですが、コレの持つ意味がよくわかりません
不要だからかと
定義、即、実行
即時関数＋無名関数
ttp://https://qiita.com/hiroshimaeasyryo/items/a270b00c420ed96f02f0 即時関数は即時実行できる関数
関数名は不要なので無名関数にしている
こう書くことで変数名を閉じ込めることが出来るので、他のコードに影響を与えない
まぁ要するに便利な書き方だ
jsfiddle は、Chrome では動くけど、Edge では動かない
click を使ったのか。
上下左右の矢印キーの方が、楽なのでは？
CSS アニメか
うちのEdgeでは普通に動いてるよ
IE11はread onlyになるけど、それでも動くことは動くし
あと矢印キーのほうが楽だとは思わないし、スマホやタブレットのこと考えたら、
clickのほうが手間が省けるだろ
ありがとぅ
エラーを出すのはどうしたらいいでしょう？
まだ実行して無くても、後の方の行に関数が書いてあるだけでもスクリプト自体が
エラーになって停止してしまって、肝心のエラー表示のロジック部分は実行される
事がない場合があるようです。つまり、
// 判定ロジックのつもり :
if ( !(関数 aaa が定義されているか？) ) {
alert( "aaa が使えません。" );
}
・・・
aaa();
とすると、関数 aaa が使えない場合でも、alert() 部分が実行される前に
実行前の先読みのような感じで aaa の呼び出し部分が先にパースだけされて
しまって、そこでスクリプト自体がエラーで停止してしまう事があるようです。
なんというか、先読みでパースされて内部でJITコンパイルされてから、
実行に移るからではないかと思っているのですが。
var tag = document.getElementsByTagName("*");
for (i=0; i < tag.length; i++)
{
for (j=0; j < tag[i].attributes.length; j++)
{
if (tag[i].attributes[j].nodeName === "href" || tag[i].attributes[j].nodeName === "src")
{
//console.log(tag[i].attributes[j].nodeName);
//hrefとsrcが表示される
}
else
{
//console.log(tag[i].attributes[j].nodeName);
//styleとwidthを含めて全部表示される
tag[i].removeAttribute(tag[i].attributes[j].nodeName);
//styleとwidthを削除できない場合がある
}
}
}
一旦、すべての属性を削除してから、href, src を追加すれば？
いちいちhtml作ってalertするしかないんですか？
typeof演算子を使えばよい
attributesから属性ノードを得たなら、nameプロパティで属性名を取得するものでは？
removeNamedItem() で削除では？
削除できない場合の再現コードは？
ttps://dom.spec.whatwg.org/#dom-element-attributes よく読んでもらえば書いてあるのですが、それだと、aaa() のように関数を
呼び出す場所を、実際には呼び出さない場合でもコンパイルのために読み込んで
しまい、そこでエラーになってしまうことがあるんです。
その場合、エラーになるだけで、判定ロジックは実行されず、alert()
メッセージは表示できません。
意味が分からない
JavaScriptはコンパイル言語ではないはずだが
Chromeではちゃんと上手くいくようですが、IEだと勝手に先の方を読み込んで
しまうようなんです。
そりゃコンパイラがおかしいんでね？
正：判定ロジックによる alert() 表示が出ませんでした。
function removeUnnecessaryAttrs(tagName) {
const tags = document.getElementsByTagName(tagName);
for (let i = 0; i < tags.length; ++i) {
const t = tags[i];
const n = document.createElement(tagName);
n.src = t.src;
n.href = t.href;
t.parentNode.replaceChild(n, t);
}
}
いちいち属性名しらべたりしないで、新しいの作って差し替えるほうがらくじゃね？
なんか、理解を助ける方法みたいなものありますか？
let container = null; // パズル本体
これ分からないなら、無理だと思う。いくら何でも基礎知識が無さすぎる
そもそも、15パズルから入るのは変だと思う
DOM操作か何か、もっと基礎的なところから始めたら？
function slide(elem, dx, dy) {
const x = Math.max(Math.min(3, parseInt(elem.dataset.x) + dx), 0);
}
function()
これです
それはからの変数定義ですよね
最も大きい数字をとってくるのがmath.max、小さい数字がmath.minというのがわかるのですが、これ一行ではデバッグしてもエラーになります
一行だけ実行してもそりゃエラーが出る
全体を通せばエラーにはならない
ttp://https://jsfiddle.net/obscd3ea/ clickにaction()をバインド→actionの中でslide()を呼び出している
そして更にelem、（多分パズルのピースのdivかなんか）を渡している
分割統治法
誰も使わないと途絶えるし、流行りすぎると弊害がある
今くらいが本当にちょうどいい
a:hoverした際に、該当のhtmlページをiframeで表示する機能を実装したいのですが、
何か手頃なソースなどはありますか？
調べても、リンクの側に小さくサムネを表示させるようなものしか出てきません。
htmlの方は既に書き終えているのですが・・・aタグをホバーした時に反映されるようにするところで詰まってます
こんな感じ？
かなりキモイけど
ttp://https://jsfiddle.net/Ldqt1ypz/1/ Quokka.js という拡張機能で、
そのファイル内と端末に、リアルタイムに変数の内容が表示される
ただし、端末からしかコピーはできない。
ファイル内には、Canvas で出力しているのかも？
Ctrl+Shift+P で、Quokka.js new file で使える。
ただし、保存したファイルからは、使えない
ありがとうございます
１つ１つ試していかないと理解がおいつかないもので
「jquery hover」で検索！
$( セレクター ).hover(
function() {
//マウスカーソルが重なった時の処理
},
function() {
//マウスカーソルが離れた時の処理
}
);
これが完全一致とか部分一致の場合は簡単ですが、
似ているようなものを選択できる曖昧な一致を判断したいです
例えば「カエル」と言う言葉に対して「オーエス」よりも「カーネル」が
よりマッチしていると言う感じに判断したいのですが
良いアルゴリズムはありますでしょうか
形態素解析後に類語辞書を引っ張る
アルゴリズムよりも辞書を用意する方が苦労するような
ありがとうございますー。ちょっと調べてみますわ
聞くときだけ敬語？
これって一ページだけなんですな。
複数のaタグがある状態で、それぞれホバーしたらiframeに出るっていうのがやりたくて・・・
分岐を外してみたところ特定の属性ではなくて、偶数の属性を取りこぼしているようですが原因は何でしょうか？
<div onclick="alert()" title=div style="height:200px"></div>
<a title=test style="display:block" href=# target=blank>
<img alt="img1" src="1.jpg" style="height:100px" width="50%" title=img1>
</a>
<img title=img2 alt="img2" src="2.jpg" height=200 width="1%" data-src="2.png" onclick="alert()">
<script>
var tag = document.getElementsByTagName("*");
for (i=0; i < tag.length; i++)
{
for (j=0; j < tag[i].attributes.length; j++)
{
console.log(tag[i].attributes[j].name,j);
//tag[i].removeAttribute(tag[i].attributes[j].name);
tag[i].attributes.removeNamedItem(tag[i].attributes[j].name);
}
}
</script>
ttp://https://jsfiddle.net/p6q0bo7g/1/ すみません、追加で質問です。このような形で、2つに分割した状態になってます。
この時、左側のタブのaタグをそれぞれhoverした時、右側のiframeにそれを反映する方法
について調べています。クリック時に表示させるところまではいったのですが、
ホバー時にも同様に表示させるところでつまずいています。
置換前
c:¥aaaa¥bbbb¥cccc¥a.txt
c:¥aaaa¥bbbb¥cccc¥b.txt
置換後
/home/a.txt
/home/b.txt
¥でスプリットしてループで回して確認していくしかないでしょうか。
配列状の物を添字を使って削除する時は後ろからやるのがセオリー
for (j=tag[i].attributes.length ; --j >= 0; )
ご教示ありがとうございました
ttp://https://jsfiddle.net/rtezmdf0/ 類語もある方がより良いとは思うのですが
私が今求めているものは、ユーザーがうろ覚えのキーワードを入力しても欲しかった用語がマッチするようにするための
単語の意味ではなく【文字間の関係性】を計算するアルゴリズムで、
今は「カエル」なら「カ→エ」「カ→ル」「エ→ル」
のような繋がりでチェックしたり、他にも文字数の一致度などから適当にやってまして
より精度を上げるためにローマ字化したりしようかなどと考えたのですが、もうすでにある程度確立された素敵なアルゴリズムや、モデルがあるのではないかと思い質問しました。
これ、２、３行でデバッグできないんですかね
少ないコードで動作確認しないとどういう動きかわからないです
ありがとうございます。出来ました
jsのステップインを使うと良い
js chrome デバッガ
辺りで検索
省入力候補/推測変換のことか？
IMEの仕事を肩代わりしたいなら、変換用の辞書を用意するしかなかろう
レーベンシュタイン距離とか
全ての配列が対象の場合はmapやforEachのほうが簡便と書かれたサイトがあり、以下の
置き換えを試みたのですが上手くいきません。原因か、そもそも不理解でもあるのでしょうか
const getTag = doc.getElementsByTagName('a');
for (let i = 0; i < getTag.length; i = (i + 1) | 0) {
const node = getTag[i];
node.href = node.href.replace(/ttp/, 'ttps');
}
const getTag = doc.getElementsByTagName('a');
getTag .forEach(function(item, i) {
item[i].href = item[i].href.replace(/ttp/, 'ttps');
});
次はデバッガの使い方聞いてくるんじゃないのこの人
即時関数がわからんレベルなのになんで基礎から勉強しないんだろう
ttp://https://mieruca-ai.com/ai/levenshtein_jaro-winkler_distance/ getElementsByTagName()の返り値はArrayではなくHTMLCollectionだよ
forEach使いたいならHTMLCollectionをArrayに変換すること
Array.prototype.slice.call(docment.getElementsByTagName('a')).forEach(function(node){
node.href = node.href.replace('ttp', 'ttps');
});
あと、無駄に正規表現使うのはバカに見えるからやめたほうがいいぞ
朝起きて見直すと俺何やってんだって気分になる
ありがとうございまし
初めて知りました
ありがとうございました。勉強になりました。
tp:→tps:だったら大丈夫ですかね
素直にreplace('
ttp://http://', 'ttp://https://')でよくない？ なにやりたいか一目でわかるし
そうですね 可読性には気を付けるべきでした
ちなみに、今回の場合はfor、while、map、forEach
どれを使うべきなのでしょうか
速度だとforやwhileのようですが
（存在理由が）よくわからん、無駄な処理をなくした。（ごめん笑）
ttp://https://jsfiddle.net/z5drg4Ly/ ttp://https://jsfiddle.net/u3zbswhk/ いつもどおりjQueryを導入した（笑）
131行 -> 96行 -> 83行
この状態で13押したら
ttps://yabumi.cc/16a254d9f2ba189836444990.png こうなるぞ
ttps://yabumi.cc/16a254f2bfd8779cf8101566.png 失格
でなおしてこい
ttp://https://ics.media/entry/17451/ > WAI-ARIAはHTML要素の属性を動的に書き換えなければならないため、生JSやjQueryで制御しようとすると、正直、骨が折れます。
これ本当？
生JSで大変なのは分かるけど、jQuery使っても簡単にならないの？？
映ってねーぞバーカｗ
■ピュアJSの場合
要素.aria = 値;
■jQの場合
要素.attr({ aria : 値 });
ってのを、わざわざJS用意して書くじゃん？
なんならこれやる前に、要素にアクセスする必要もある
vueとかだと、それをHTML側に直に書けるから便利だねっつー話だと思う
まあそれぞれフレームワーク毎に特殊な書き方するわけだけど
ここで聞いて大正解でした
本当にありがとうございます
マジかー悩むなぁ
まあ、じゃあvueでいいか。しばらく生きてるだろ
ワロタw いや失敬失敬。
でもそこは本質的な所じゃないから後よろ！
xとyの情報も持ってるからそれでできるはず！
相変わらず「脱jQuery」が目的になっちゃってる（感じがする）ダメなタイトルだなｗ
これ２つの意味がある。
1. ブラウザネイティブのDOM APIを使いましょう。
2. DOM操作（DOM API含む）をするのをやめましょう。
この記事は2みたいだけど、DOM操作をやめる = それが必要ないフレームワークを
使いましょうってことだけど、まあ、そのフレームワークの導入も正直骨が折れるだろうねｗ
で話を戻すけど、この人、頭がアプリ脳になってるんだと思う。
作り方がね。アプリの作り方。要素にARIA属性をつけようと思ったら、
その要素ごとにいちいちにコードを書かなきゃいけないと思ってる。
要素ごとにいちいち書くよりもフレームワーク使ってパーツを作ったほうが良い。という発想。
でもjQueryは特定のセレクタに対して横断的に処理を追加するもの。
要素ごとじゃなくて、クラスごとに1個書けばいいだけなの。
例えばリンク先のaria-checkedであれば、<button class="checked-button"> みたいに
クラスをつけておけば、jQueryでそのクラスに対して横断的に、aria属性を書き換える
処理を追加する。だから要素ごとにコード書く必要もないし、HTMLはシンプルになる。
まあ、こんな事書いてるし、昔のコードがクソすぎるってだけなわけでｗ
// 1から15までのパネル及びブランク(null)の位置関係を調べるための配列
// 長さは4x4の16。座標(x,y)に位置する要素は、配列上ではpannels[x+y*4]に存在する
const pannels = [];
let container = null; // パズル本体
// パネルをスライドさせる処理
// x, y はパネルの座標でそれぞれ0以上4未満の整数
function slide(elem, dx, dy) {
const x = Math.max(Math.min(3, parseInt(elem.dataset.x) + dx), 0);
const y = Math.max(Math.min(3, parseInt(elem.dataset.y) + dy), 0);
elem.style.left = x * 25 + "%";
elem.style.top = y * 25 + "%";
elem.dataset.x = x;
elem.dataset.y = y;
}
助言を受け、スライドパズルのソースのここまでをchromeのデベロッパツールから実行してみたのですが、どういう処理が行われているか確認するには、これをコンソールなどに出力してみるってことでしょうか
ステップインを使う
これ分からないならもう止めたほうが良いぞ
間違ってるものをドヤ顔で晒して人様の手を煩わせておいて失敬失敬はないだろ
ステップ実行とステップインは違うってことですね
近藤してましたが調べてみます
ttp://https://ics.media/entry/17451/ > WAI-ARIAはHTML要素の属性を動的に書き換えなければならないため、生JSやjQueryで制御しようとすると、正直、骨が折れます。
って書いてあったから、サンプル作ったよ。リンク先にある。gridLayoutとlistLayoutの切替部分
ttp://https://jsfiddle.net/j3k94sz0/ 正直、ボタンでラジオボタンのようなものを作るから面倒なことになるんだが、
そのお題で、汎用的なjQueryのコードにした。
「切り替えボタン＋関連する要素にボタン情報を伝える」汎用コンポーネント
リンク先には
> JSのロジックにはWAI-ARIAの一切の処理が入っていません。
とか書いてあるが、HTMLにWAI-ARIAの処理（JavaScript）が入っていて
思考の切り替えが必要になる。HTMLに埋め込まれたJavaScriptも「JSのロジック」とみなせば、
「JSのロジック」にWAI-ARIAの処理が入ってるじゃんｗってことになる。
俺が書いたコードは「HTMLにはJavaScriptの一切の処理が入っていません」
わずか6行のjQueryのコードで「ボタンによる切り替え」に対応している。
もちろんこれが複数あっても対応できる。別のプロジェクトでも使えるだろう。
っていうか、普通にラジオボタン使って作れば、もう少しわかりやすくできるんだがｗ
本家が懇切丁寧に説明してくださってるんで
読みながら真似してみれば良いんでね？
ttp://https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints?hl=ja ttp://https://developers.google.com/web/tools/chrome-devtools/javascript/step-code?hl=ja よし、お前さんが基礎を作って旗を振るんだ
残念。
結構最近だよね
click()
Mouse鮻vent
前から配列内の要素を削除していくと、
削除した瞬間に、後ろの要素が前にずれるから、バグる！
だから、配列の要素の削除は、難しい
Ruby で作った。単純に、1文字ずつ比べる
filepaths = %w(abcd ab ab abc abcd aby)
index = nil
catch( :exit ) do # 2重ループを、一気に抜ける
filepaths.first.each_char.with_index do | char, idx |
# p [ char, idx ]
filepaths.each do | fp | # 1文字ずつ比較する
throw :exit if char != fp[ idx ]
end
index = idx
end
end
p index #=> 1。つまり、ab まで一致する
そんな、ややこしいものをやらなくて良い
君がやるべきは、x から、2, 3 には行けるけど、右・下には行けない。
こういうチェック
0 は番兵。行けない部分に、壁を作って、判定を簡単にしている。
プログラミングよりも先に、図を描くのが重要！
0 0 0 0
0 1 2 0
0 3 x 0
0 0 0 0
chromeでもfirefoxでもsafariでも動きませんでした。
もしかしてあなた私より初心者なのでは？ｗ
問題はそこではなくて、これはデータを1次元配列で持ってるのが面倒くさい原因
2次元配列で持っていれば、別に番兵を作る必要もない。配列の範囲外は必ずundefined。
Rubyと違ってa[-1]が配列の後ろから1番目なんて変な仕様はないから自然な番兵となる。
もしくは直感と反するが
0 0 0 0 0 0
0 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x 0
0 0 0 0 0 0
から上下の0を取り除いて
0 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x 0
最初と最後の0を取り除いて（_ に置き換えてる）
_ 1 2 3 4 0
0 5 6 7 8 0
0 9 A B C 0
0 D E F x _
1次元配列にして、連続する0を1個にする。
1 2 3 4 0 5 6 7 8 0 9 A B C 0 D E F x
このデータで、現在のパネルの、左右を+1/-1、上下を+5/-5として扱えば動くぞ。
それを実装たのがこれだ
ttp://https://jsfiddle.net/gqvn87k5/ ほれ、なおしたぞ。ドヤ？
C時代の番兵でいろんなスレでアスペ荒らししてたのはRubyのクソ仕様が原因だったｗｗｗ
本人ではないが、サーバサイドスクリプトがクライアントサイドで動くわけなかろう
「サーバで動かせ」という意図ぐらいは察したらどうだ？
せめて動くjs書けないのｗｗ
まあJavaScriptのスレでRubyで答える方がおかしいんだけど
Ruby などの擬似コードで、考え方・ヒントを教える所
それをヒントにして考える・コードを書くのは、質問者自身がやるべき！
答えをコピペする奴は、進歩もしないし、どうにもならない
ruby書くとこじゃねえんだよ
死ねや
ダメなコードから学べるのは
ダメなコード例です。
＞Ruby などの擬似コードで、考え方・ヒントを教える所
死ね
本を読んでないだろ？
配列のインデックスが負数の場合は、配列を後ろから数えるのも定番。
色んな言語を調べてないだろ？
そもそも2重ループなんてするものじゃないから（笑）
filepaths = %w(ab abc abc abc abcd abc)
index = (filepaths.first.chars.find_index.with_index do |char, idx|
!filepaths.all? { |fp| char == fp[idx] }
end || filepaths.first.length) - 1
p index
filepaths = %w(abcd ab ab abc abcd aby)
index = (filepaths.first.chars.find_index.with_index do |char, idx|
!filepaths.all? { |fp| char == fp[idx] }
end || filepaths.first.length) - 1
p index
これもう少し簡潔にかけそうな気がしてるんだけど、
すぐに思いつかない。
jQueryばかり勧める人がよくいえたもんだな
ttp://https://video.fc2.com/content/20090104qC1kSMF2/&tk=TnpnMk5EVXdOalU9 jQueryを勧めるのはjQueryがふさわしいからであって、
何もアプリを作る時にjQueryなんか勧めませんよ？
ウェブでアプリ作ろうなんて人はめったにいませんからね。
でも、Ruby, Kotlinは、オブジェクト指向でもあるから、
その書き方が、jQuery, Elixir からすると、間違いのように言われる
関数型に、オブジェクト指向を混ぜるな、と言われる。
関数型は宣言型だから、手続き型みたいな書き方を嫌がる
関数型でやりすぎると、可読性が悪くなるから、わかりやすい書き方が良い場合もある
言語とライブラリを並べて書かれるとなんか変な気分
次元を揃えず計算してるみたいな…
それらは関数型言語ではない
血が近いからと言って日本人と中国人が違うのと同じ
ttp://mevius.5ch.net/test/read.cgi/tech/1415419907/261">ttp://mevius.5ch.net/test/read.cgi/tech/1415419907/261 261 デフォルトの名無しさん sage 2014/12/15(月) 23:02:52.91 ID:BuhXHDiL
さらに言えば、Rubyのブロック変数のスコープの扱いが1.9で仕様変更されてるけど、
それについてmatz自身が
> それは、Rubyが最初から関数型言語としてスタートしてないからであって、言語が違うからですよね。
と語っているね
ttp://http://www.atmarkit.co.jp/news/200907/24/ruby.html もうすぐ無くなる言語を引き合いに出してどうするの？
良し悪しなんてないよｗ
こういう閉じたカタチしてるからclosureって呼ぼうねってだけで
最初2つが同じものを指すと知らなくて混乱したわ
もう少し深くお勉強したほうが良いかも…
一方、クロージャは、外のスコープの変数の参照を、つかんでいるもの
Ruby の関数はクロージャではないけど、関数内のブロックがクロージャ。
つまり、2つのスコープを持つ。
ES2015 では、これを真似て、JavaScript にもブロックスコープが出来た
一方、Python は、Rubyの真似をしないから、批判が大きい
なるほど、rubyはもうすぐ消えて無くなる言語と
誰も知らない無名言語のマネはできないなぁｗ
それとも有名言語のC++やJavaにはブロックスコープが無い、もしくはrupy？とかいう泡沫言語からパクったのかい？ｗ
ttp://https://news.ycombinator.com/item?id=5157886 "To me the biggest annoyance about the Ruby community is the belief that they invented everything"
「Rubyコミュニティの連中はヤツラが全てのことを発明したと信じてやがってムカつく」
"People don't hate ruby, people hate the ruby on rails community" "This" "+1 to this"
「Rubyが嫌いなんじゃなくて、Railsコミュニティが嫌いなんだよ」「それな」「ほんこれ」
ある要素になんらかのデータを紐づけたいと思ったら使うのがdataset
・ある要素が処理対象か否かを表すフラグ
・JSライブラリ等に渡すパラメータ
・処理中のデータの一時保存先
なんでも好きなように使うがいい
classやidとはどう違うのですか？
参考サイト探したんですが、javascriptについては見つからなかったです
classやidで足りてるなら無理して使わなくてもいいよ
element.dataset.hello = "world";
element.setAttribute("data-hello", "world");
style属性にも同じようなのがある
element.style.bgColor = "#ffffff";
element.setAttribute("style", "background-color:#ffffff;");
JSの関数はクロージャになり得る能力、ようは要件を備えてるだけで
関数定義が実際クロージャな関数を作ってるのであって
new Function等で定義された関数はクロージャではないし、
デフォの関数のいくつかもクロージャではない
