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

JavaScript覧

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

151 = :

画像のアドレスを<img src="アドレス">にしたいのですが、どうやっても1番最初のアドレスしか取得できません。
全部の置換のしかた教えてください。
<tr>
<td class="img"></td>
</tr>
<tr>
<td class="img"></td>
</tr>
<tr>
<td class="img"></td>
</tr>

152 = :

>>146
×
そもそも、同じ仕様なら alert, confirm を使えばいいだけ
使えないというなら同じ仕様にした時点で使えなくなるからこの質問が無意味
人を試す質問は止めてくれないものかね

153 = :

>>151
肝心のjavascriptのコードが無いんじゃ何も言えないと思うけど･･･
全部他の人にやってもらうつもり？

154 = :

>>151
こういうことか？

$('.img').html(function() {
return $('<img>', {src: $(this).text()});
});

156 = :

>>152
> そもそも、同じ仕様なら alert, confirm を使えばいいだけ

alert, confirm は見た目がダサい。
だから同じ関数の仕様でデザインが違う関数を作りたい。

それは可能か？ 不可能か？

157 = :

>>149に挙がってるけどwindow.showModalDialog使えばいける

158 = :

jQueryって無断で使っていいほど知名度高いのか？
今や、クロスブラウザやコード短縮のために使用推奨、みたいな風潮だったりするの？？？

159 = :

>>157
Chromeなどブラウザによっては使えないのとFirefoxでも若干の差異があったりする

160 = :

>>158
> jQueryって無断で使っていいほど知名度高いのか？
高い。わかり易い例で言えばマイクロソフトが公式サポートとして
Visual Studioにバンドルされており、ASP.NETを使うと必然的にjQueryを使うことになる。
マイクロソフトは自社で開発を進めていた ASP.NET Ajax Library を中止してjQueryに置き換えた

DOM APIを使うぐらいならjQueryを使った方がいい。
一番の理由はコードが短くなって生産性が上がるから

今は昔と違ってブラウザ間の互換性は高くなっているが、
もちろんクロスブラウザ対応ももちろんある

最新版ではSafari 8, 7.1 のquerySelectorのバグに対応したね。少なくなったとはいえ皆無ではない。
http://blog.jquery.com/2014/12/18/jquery-1-11-2-and-2-1-3-released-safari-fail-safe-edition/

jQueryを使わない選択肢があるとしたら、
AngularJSのようなDOM操作そのものが
不要なフレームワークを使っている場合のみ

161 = :

クロスブラウザのためのコードは
jQuery 2.1.3のソースコードから"Support:"と
書いてある所を検索すればわかる。

かなりある。IEだけではなくiOSやAndroid、
はてはBlackBerryまである。

もしjQueryを使わないならば、
特定のブラウザだけでなぜか動かないということに
なりえるわけで。

162 = :

っていうかjavascriptの仕様にjQueryを取り込むべきだと思うけど。

163 = :

>>156
だから不可能だといってるだろう？
そもそも、デザインが違うなら厳密には同じ仕様とはいえない
何の仕様が同じかをいえばもっと早くに違った回答を期待出来たかもしれない
初めから目的を明らかにして欲しいものだ

164 = :

>>163
あなた以外の人には、ちゃんと話が通じているけどねｗ

165 = :

いや、俺も単なる興味で書いたのなら不毛だなと思った

166 = :

こうかもしれない、ああかもしれないと無駄に考えさせるのは悪い質問
面倒くさいから口に出さないだけで「無駄な質問するな」と思ってる人はいるだろうな

167 = :

>>151
- querySelectorAll
- getElementsByTagName, className or classList

>>158
jQueryを啓蒙しようとしている人が必死になってjQueryコードを書いてるだけ
反応すれば荒れるから無視するが吉
ここはライブラリ質問禁止だから、まともな人はライブラリの回答をしない

168 = :

今更啓蒙とか

169 = :

啓蒙するならES6にして欲しい

170 = :

>>167
そうそう。だまって無視していて。
いちいち絡んでこなくていいよ。

俺はjQueryを使ったシンプルな回答を見せてるだけ。
文句言われるために書き込んでないから。

171 = :

>>151
querySelectorAll は IE8以上
classList はIE10以上、Safari 5以上、Android 3以上だから気をつけて

jQueryならIE6以上から対応している

172 = :

>>162
> っていうかjavascriptの仕様にjQueryを取り込むべきだと思うけど。

いくつかの仕様はjQueryから来たと思われる。
例えばquerySelectorAllなんてのは、まんま$(セレクタ)だし
classListのメソッドもjQueryのaddClass、removeClass、toggleClass、hasClass
相当のメソッドが定義されている。

173 = :

HTMLで作ったサイト上で、テキストファイルを読み込んで
javascriptでその中身を編集するところまではできているのですが
その加工済みのファイルの中身をサイトに組み込む(鯖のファイルを編集する)
ことはできないでしょうか？

174 = :

>>171
getElementsByTagName, className で問題ない

175 = :

>>171
jQuery の場合、jQuery 2.x は IE8- をサポートしない
IE6+ に対応するなら jQuery 1.x を使うしかない

176 = :

classlistって IE8+ 対応だったと記憶していたけど、調べたら IE10+ だった
Polyfill 書けば IE8+ 対応になるからいいけど
http://caniuse.com/#feat=classlist
http://developer.mozilla.org/en-US/docs/Web/API/Element.classList

177 = :

Polyfull書くとIE8になるっていうのは具体的にどういうふうに書くのかおしえてください

178 = :

>>173
HTML上ではできないね
鯖側で編集したファイルを受け取る仕組みが必要だよ

179 = :

>>177
IE8 には DOM Interface Object の Element が存在するので Element.prototype.classList を拡張する
アルゴリズムは DOM Standard (HTML Living Standard派生)
の仕様書に載っているので参考に
http://dom.spec.whatwg.org/#interface-domtokenlist

IE8 から Object.defineProperty を使用出来るので protype 汚染を気にせず多くの拡張が出来る
Array#foEach等の ES5 定義のメソッドもPolyfillを書けばほとんとが利用出来るだろう

180 = :

>>173
サーバのファイルはサーバサイドでしか編集出来ない
サーバサイドスクリプトでファイルを受け取り、受け取ったデータに書き換える仕組みが必要

182 = :

>>175
> jQuery の場合、jQuery 2.x は IE8- をサポートしない
> IE6+ に対応するなら jQuery 1.x を使うしかない

うん。そのとおりだけど、最新版の2系が使えないのかーって
悲観する必要はない。

なぜなら、2.xと1.xのAPIは完全に同じ。
全く同じ機能が使える。

1.x系はもう更新しないで2.xのみに新機能を搭載して徐々にAPIが
変わっていく予定でこういうバージョンにしたのだろうと思うけど、
たぶんそこまでする理由もなくて考えなおしたんじゃないかな。

なので、次のメジャーバージョンはモダンブラウザのみ対応の3.0と
古いブラウザも対応する3.0 Compatになる。

今後しばらくはIE8以上でも、IE6以上でも同じ機能が使えると思っていいだろう。

183 = :

>>174
classNameだとクラス名がスペース区切りで複数入っている場合を考慮すると
正しく扱うために追加のコードが必要になるね。

MDNにshimがあったけど、IE7以下では動かないって書いてある。
http://developer.mozilla.org/ja/docs/DOM/element.classList

184 = :

>>179
> Array#foEach等の ES5 定義のメソッドもPolyfillを書けばほとんとが利用出来るだろう

有名所のPolyfillはこれかな。
http://github.com/es-shims/es5-shim

こういうのはすでに用意されているものだから
ライブラリを読み込むだけでES5のメソッドを追加してくれる。
わざわざ独自に書く必要はないよ。

ただね。これ検討したんだけどリンク先にも書いてあるとおり
Object.createとか完全に同じ動作を実現できないものもある。

だから本当に古いブラウザでも同じように動くのか？って考えると不安が残る。
なので結局古いブラウザに対応する必要があるときはlodashを使うことにした。
http://lodash.com/

古いブラウザで実現不可能なことは、lodashに実装されてないので
lodashを使う限り同じ動作であることが期待できる。
それにlodashの方がES5よりも機能多いしね。

古いブラウザ対応が必要 = PC（スマホではない）なので、lodashを読み込んでも
重くなったりする可能性は低い。スマホ専用とかならもちろん普通にES5を使っているよ。

185 = :

なるほど、そういう考えでライブラリを使うのもありだな

186 = :

>>183
> classNameだとクラス名がスペース区切りで複数入っている場合を考慮すると
> 正しく扱うために追加のコードが必要になるね。
クラス名の両端にスペースを付与するだけで良い
昔からこの手法はよく使われたものだが、最近の若い人は知らないのだろうか

if ((' ' + element.className + ' ').indexOf(' img ') !== -1) {
// 処理
}

187 = :

>>182
jQuery だけバージョン間の差異に触れず、ブラウザのバージョン差異問題だけに触れていて、恣意的にjQueryを持ち上げているように見えたから
何も知らない質問者がjQuery 2.xを使う可能性もあるのだから、そこまでいうならjQueryのバージョンにも触れるべき
jQueryのpluginには特定のバージョンで動かないものもある
1.xと2.xは区別されるべき

最後に対象ブラウザを決めるのは質問者
事実だけを伝えて恣意的なお勧めは控えるべきだと思うね

188 = :

>>184
> Object.createとか完全に同じ動作を実現できないものもある。
自分て書くからこそ「どこまで対応出来て、どこまで対応不可能か」が正確に把握できる
そして、バグは他人の書いたコードよりも自分の書いたコードの方が明らかに早く見つけられる

> だから本当に古いブラウザでも同じように動くのか？って考えると不安が残る。
それは仕様を実装する段階で把握しておくべきことだ
ES5仕様をES3仕様の範囲内で実装しようとすれば、その段階でES3仕様の限界に気がつくはずだ
後は各ブラウザの仕様書からES3仕様との差異を突き詰めれは良い
特にIEに関しては多くの仕様がMSDNに載っている

189 = :

>>184
> Object.createとか完全に同じ動作を実現できないものもある
古いブラウザを気にするということは lodash.compat.js の方だよね
Lo-Dash 2.4.1 (Custom Build) も Object.create を内部的に利用してるよ
今時のライブラリで ES5 の Polyfill を書かないものはほとんどない

結局、それがブラウザ間の互換性を取れているかどうか、は「コードを読む力」「仕様を読む力」にかかっている
どのライブラリを使うかはたいした問題じゃない
そのライブラリのコードを読んで、理解できるか、できないかだよ

「クロスブラウザはライブラリに任せるから考える必要はない」と考える人は「ライブラリに使われている人」
ES, DOM 等の標準仕様を理解し、ブラウザの仕様を理解し、ライブラリのコードを読んでライブラリの使用を理解し、「ライブラリを使いこなせる人」になるのが一番いいと思うな
そこまでいくと、ライブラリを使わなくてもクロスブラウザ出来るようになる
ライブラリを使う事も使わない事も出来るから、様々なコードを書けるようになるだろうね

190 :

JavaScript初心者です。http://www.asahi-net.or.jp/~dh2k-ksk/test/

上記URLの様に、黒い4つの数字のボタンのどれかを押すと
歯の種類のアイコンが変化するようにしているのですが
例えば、歯の種類のアイコンが変化したあとに
歯の種類のアイコンにHTML側でリンクを設定しても
リンクが反映されません。
それぞれにリンクを設定するにはどうしたらいいでしょうか？

また、現状「１」のボタンを押して「詰め物」とか色々アイコンが出てきますが
再度「１」のボタンを押すとさらに奥へ進ませることは可能でしょうか？

ご教授お願いしたいです。
よろしくお願いいたします。

191 = :

function a(){
略
b()
略
}

function b(){
略
a()
略
}

function c(){
a();
}

c()からa()を呼ぶんですが、条件によってはa()からb()を呼び、b()からa()を呼ぶこともあります
こういうケースだとjshintで
'b' was used before it was defined.って警告が出るんでこういう警告がでないような書き方にしたいんですがアドバイスください

192 = :

var Class1 = function Class1(){
}
Class1.prototype.setName = function(name){
this.name = name;
}
Class1.prototype.getName = function(){
return this.name;
}
こうかくとnew Class1を変数に代入する毎にsetNameとgetNameも作られると思うのでメモリの無駄のような気がするんですが
こういものですか？

193 = :

>>192
setName, getName は new 演算子で呼び出される度に生成されないが、nameプロパティは外部から参照可能なので両メソッドが無駄
プロトタイプチェーンを勉強すればわかると思う

194 = :

違うインスタンスでも同じ関数を参照していることは、以下のコードからも分かる
参考までに
var a = new Class1;
var b = new Class1;
console.log( a.setName === b.setName );

195 = :

>>191
> 'b' was used before it was defined.って警告が出るんでこういう警告がでないような書き方にしたいんですがアドバイスください
掲示された下記コードをhttp://jshint.com/ でテストしたが、現象を再現できない(error, warningが発生しない)

function a () { b(); }
function b () { a(); }
function c () { a(); }

「略」とあるが、このコードで再現確認してないだろう？
質問前に>>1の(6)を読んで欲しい

196 = :

これはlatedefが trueがじゃいと警告でないです

198 = :

>>188
> 自分て書くからこそ「どこまで対応出来て、どこまで対応不可能か」が正確に把握できる

え？ あんた一人で開発してるの？

自分で書くことが出来るのは、書いた人が開発して
それ以外の人がいない場合しかありえないけど。

書いた人以外の人の多くの人は他人が書いたコードを使うわけで、
それが社内の人か、全世界で使われている有名な人かの違いでしょう？
なら後者を取るよね。

199 = :

>>187
> jQueryのpluginには特定のバージョンで動かないものもある
> 1.xと2.xは区別されるべき

なんかグダグダ言ってるんだけど、
2.xで動かなければ、1.xに変えるだけで
終わりだよね。

200 = :

>>191

おそらく、以下の様な形にできる。

function x1() {}
function x2() {}

function a(){
略
x1()
略
}

function b(){
略
x2()
略
}

function c(){
a();
}

循環した参照は普通やらないものだし、やるべきではないもの（だからこそ警告が出てる）
だけど具体的なコードがないからわからないから答えようがない。

もっとも本当にそうすべき（循環参照すべき）問題もわずかにはある。
本当にそうするべき問題ならコードのほうを歪ませるほうがよくない。
だから警告を無視させればよい。jshintにはそのための機能がある。
こんなの　/*jshint -エラー番号 */

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ

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

• + JavaScript の質問用スレッド vol.122 + (116) - [100%] - 2018/5/2 18:30
• + JavaScript の質問用スレッド vol.125 + (1001) - [97%] - 2015/10/7 17:45
• + JavaScript の質問用スレッド vol.123 + (966) - [97%] - 2020/10/20 2:30
• + JavaScript の質問用スレッド vol.120 + (1002) - [97%] - 2014/11/8 1:15
• + JavaScript の質問用スレッド vol.124 + (1001) - [97%] - 2015/7/16 1:30
• + JavaScript の質問用スレッド vol.121 + (1001) - [97%] - 2022/11/29 16:30
• + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
• + JavaScript の質問用スレッド vol.142 + (984) - [97%] - 2020/8/27 19:15
• + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
• + JavaScript の質問用スレッド vol.121 + (1001) - [97%] - 2015/1/1 18:30
• + JavaScript の質問用スレッド vol.129 + (981) - [97%] - 2016/5/5 8:16
• + JavaScript の質問用スレッド vol.129 + (926) - [97%] - 2017/7/27 13:45
• + JavaScript の質問用スレッド vol.128 + (1001) - [97%] - 2016/2/26 6:45
• + JavaScript の質問用スレッド vol.123 + (1002) - [97%] - 2015/4/27 23:30
• + JavaScript の質問用スレッド vol.127 + (1001) - [97%] - 2016/2/4 0:15
• + JavaScript の質問用スレッド vol.127 + (160) - [97%] - 2021/7/16 9:30
• + JavaScript の質問用スレッド vol.142 + (926) - [97%] - 2019/12/23 13:15