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

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

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

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

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

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

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

もうtext/plainでいいよ

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

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

gridで無理なんか？知らんけど。

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

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

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

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

>>809
Houdini Layout API

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

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

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

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

だめ

jQueryってDOM操作特化なの?

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

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


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

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

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

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

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

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

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

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

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

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

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

>>825
>自動再生ボタンをUserScriptで自動クリックしてオフに

意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか？

最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ

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

822です。レスありがとうございます。
>>826私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
http://imgur.com/a/UDsCL

>>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);
})();

ついでに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);
})();

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

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

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

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

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

これでもいける?

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

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

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

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

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

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

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

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

じゃあ作ってくれよ

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

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

jquwryは他所でやれ

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

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

とりあえずjqueryは他いけな

>>839
イベントは
new Event(nameString,optionObject)
の形で作れ
createは非推奨

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

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

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

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

だと

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

ね？

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