のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,644,792人
頁
昨日:no data人
頁
今日:人
頁
最近の注目
人気の最安値情報

元スレ+ JavaScript の質問用スレッド vol.131 +

JavaScript覧 / PC版 /
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで
801 = :

ちなみにjQueryの例を出したけどデータが多くなるとさすがに重くて
lodashとかにあるテンプレートエンジンの機能を使って
文字列として処理したほうが速い
attrsの部分がちょっと大変だけどね

802 :

innerHTMLつかった書き換えはセキュリティ上よくないからあんま使うなってよんだけど

803 = :

そりゃどういう時どうして危険か理解できないなら使って問題ないか問題か自分で判定できないだろうから一律使用しないという方針にするしかないな。哀れｗ

804 = :

javascriptはセキュリティ上よくないから使っちゃいけないな

ある意味、真理ではあるが

805 = :

tableじゃ無くてflexboxにすると多少抽象度と、コードのシンプルさと、パフォーマンスが担保できると思う

806 = :

アクセシビリティを担保できなくなる

808 = :

それが一番簡単でアクセシビリティも高い

809 = :

テーブルセルの幅の取り方の挙動をflexで再現できたらいいのになっておもうことがある
区切り線付きの横並びの要素とかで

811 = :

基本的にアプリは、MVC で作る

Model(データ)と、View は分離させる。
View は、しょっちゅう変わるから、Modelは、View に依存させない

>>802
異なるドメインから読み込んだものや、素性の知れない者が作ったものを、
innerHTML で読み込んで実行すると、何されるか分からないので、危険

自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな

812 = :

>>809
Houdini Layout API

813 :

javascriptの知識一通り合ったらjQueryってすぐおぼえられるもんなん?
20時間くらいでいける?

814 = :

>>813
ただのライブラリだからすぐに覚えられる20時間もいらん。
本気で1時間やればもうDOM APIは使いたくなくなる。

815 = :

DOM APIつかってループで繰り返し要素を作ったり変更したり
したことがあるならjQueryの簡単さに感動するだろうな

816 = :

正規表現リテラルって
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね

817 = :

だめ

818 = 813 :

jQueryってDOM操作特化なの?

819 = :

>>818
そうだよ。ライブラリってのは普通何か目的があって
その目的をうまくやるために作られる。
なんにでも使えるライブラリとかそいういうのゴミだから

820 :

>>784
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。


>>796
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?

>>805
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?

>>811
JavaScriptデザインパターン
http://www.amazon.co.jp/dp/toc/487311618X/

この本に書いてそうなので読んでみます。
ヒントありがとうございます!

821 = :

画像を真ん中に配置したいのですが真ん中に配置されずに困っています

var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);

setAttributeを使用し画像を真ん中に設置する方法はありません出ようか？

822 = :

>>821
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?

外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName'

823 = :

>>822
多分ID変わってます
ありがとうございます
頑張ってみます！

824 = :

>>820
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。

827 = :

ツベのプレイヤーって特殊だよね
javascriptで操作できんのか

829 = :

>>828
ほらよ。直してやったで

// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespacehttp://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @matchhttp://www.youtube.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("paper-toggle-button[checked]");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})();

830 = :

ついでにjQueryを使ったバージョンな。
覚えるとサクッとできるぞ。

// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespacehttp://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @matchhttp://www.youtube.com/*
// @grant none
// @requirehttp://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==

(function() {
'use strict';
setInterval(function() {
$("paper-toggle-button[checked]").click();
}, 1000);
})();

831 = :

補足しておくと最初のやつはセレクタがよく分からんやつだった。
適切と思われるものに直した後、checkedがついているときだけoffにするようにした

またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する（この場合はclick）
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる

832 = :

なお、一行でも書ける
setInterval(() => $("paper-toggle-button[checked]").click(), 1000);

833 :

822です。
>>829,>>830,>>831,>>832
動作を確認できました。助かりました。
欲しい機能をさらって実現出来たら最高ですよね！
本当にありがとうございました。
Javascript勉強します。

834 = :

document.querySelector("paper-toggle-button").checked = false

これでもいける?

createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);

このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて

835 = :

>>834
行けるかもしれないけど実装次第だろうね

まずpaper-toggle-buttonというタグ（カスタムタグ？）は
動き見てると非同期で表示されてる感じがする。

なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利

クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実

本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。

837 = :

おいおい、、、、頼むからもうcreateEvent系は使うな
コンストラクタでスマートに作れるだろ

838 = :

じゃあ作ってくれよ

839 = :

clickイベントを発行するだけなら.
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる

ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある

841 = :

jq広めてどんな得があるというのか
本が売れるとか？アフィが捗るとか？

842 = :

変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる

843 = :

とりあえずjqueryは他いけな

845 = :

>>820-824
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012

JavaScriptデザインパターン、Addy Osmani, 2013

847 = :

>>841
jQueryはすでに広まってるよ
どんな特があるかは、広めて特があるんじゃなくて使うと特がある。
今回みたいなのはささっと実装できるという得がね
俺の得じゃなくて、使うみんなが得をする

848 = :

>>821
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);

だと

$('<img>', {src: fugafuga, title: hogehoge});

ね？

850 = :

グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで


←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド

トップメニューへ / →のくす牧場書庫について