のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,063,100人
頁
昨日: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一覧へ
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

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

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