- 締切済み
JavaScript 独習用のお薦めサイトを教えて！
itohhの回答
- itohh
- ベストアンサー率45% (210/459)
こんにちは。itohhといいます。 わたしが、お世話になっているHPを紹介します。 JavaScript日本語リファレンス URL:http://www.shiojiri.ne.jp/~openspc/JavaScript/ 例題や、Tipsが盛りだくさんです。 （ページ内の先頭のほうの「JavaScript例文辞典」や、ページ内も後半に逆引きなど。） とほほのWWW入門 http://tohoho.wakusei.ne.jp/www.htm ここも例題や、Tipsが盛りだくさんです。 また、ホームページ全体をダウンロードするためのzipファイルも用意されているのも いいですね。 参考にしてみてください(^o^)v
関連するQ&A
- JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx とpd1が作動し、div ID1がプルダウンメニューのように開くようになっています。 それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？ どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
- changeimgの際のalt設定
head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
- nameを使わずにidだけで
よろしくお願いします XHTML1.0 StrictでJavascriptを使おうと思ったのですが 通常 <img src="1.gif" width="180" height="155" alt="" name="b01" onmouseover="document.b01.src='02.gif'" onmouseout="b01.document.src='01.gif'" /> と書いているのを nameを使わずにidだけで同じ動作を行うにはどうしたらいいのでしょうか？ 参考になるホームページなどありましたらよろしくお願いします
- ベストアンサー
- JavaScript
- Javascript ポップアップウィンドウについて
初歩的なことだとは思いますが、教えてください。 ポップアップウィンドウで画像を表示するためのリンクを以下のように記述して使っていますが、 ポップアップウィンドウ内に余白が出ます。（ウインドウ枠と画像の間） ウインドウの左上（0,0）の位置に画像を持ってくるにはどうしたらいいのでしょうか。 調べたものをいくつか試してみましたが、どれもうまくいきませんでした。 よろしくお願いします。 -------------------- ■<head>内 <script type="text/javascript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> ■<body>内 <a href="img/test.gif"><img alt="" src="～.gif" onclick="MM_openBrWindow('img/test.gif','test','scrollbars=yes,width=950,height=400')" /> </a> ------------------------- もしくは、 ■<head>内 <script type="text/javascript"> <!-- function WindowOpen_01(){ window.open('test.gif','test','scrollbars=yes,width=1150,height=350,left=0,top=0'); } //--> </script> ■<body>内 <a href="javascript:WindowOpen_01()"><img src="img/table_off.gif" alt="" width="320" height="55" class="mar_t_10" onmouseover="this.src='img/table_ban_on.gif'" onmouseout="this.src='img/table_off.gif'" /></a>
- ベストアンサー
- JavaScript
- javascript src書き換え
javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptで文字サイズ変更-cssが効かない
こちらのサイトのスクリプトを使用してやってみています。 http://www.nrym.org/storeroom/neta/01_fontsize/ line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率％指定になっているのですが、これをピクセル指定にしたいのです。 そこで下記のように書き換えました。 fontchanger.js ------------------------------------------ show: function() { var id = this.id; document.writeln([ '<div id="' + id + '">', '<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>', '</div>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); }, onClickSmall: function(e) { this.change('10px' ); }, onClickMedium: function(e) { this.change('12px'); }, onClickLarge: function(e) { this.change('14px'); } }; css ------------------------------------------------- body{ font-size:12px; line-height:14px; } #fffsss{ width:100px; margin:0; padding:0; } #fontChanger{ } #fontChanger-small{ font-size:10px; line-height:12px; } #fontChanger-medium{ font-size:12px; line-height:14px; } #fontChanger-large{ font-size:14px; line-height:16px; } html ------------------------------- <div id="fffsss"> <script type="text/javascript"> <!-- FontChanger.start('js/fontChanger'); //--> </script> </div> ----------------------------------------------------- これがサイズは変更できるのですが、cssが効きません。 line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか？よろしくお願い致します。
- ベストアンサー
- JavaScript
- JavaScript - 月ごとに画像変化
<script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。
- ベストアンサー
- JavaScript
- 外部javascriptの重複を防ぐには
簡単なタグを貼り付けるだけで使えるブログパーツを、javascriptで作ろうとしています。 ＜■コード(1)＞ <script type="text/javascript" src="http://ex.com/js/test.js"></script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> 上記のように外部JSを読み、そのJSの中でimgタグのonloadイベントを記述し、そのイベントの処理でimgタグの直前にテキストを書き出すようにしています。これはidなどを意識しなくてもタグを貼りつけた場所に出力されるようにするための措置です。 上記は単独で貼り付ける場合はうまくいったのですが、同じコードを複數貼り付けると外部JSの衝突でエラーになります。よって外部JSの読み込みを動的にしてみました。 ＜■コード(2)＞ <script type="text/javascript"> var obj=""; obj = document.getElementById("example_tag"); if( !obj ){ var ele = document.createElement("script"); ele.id = "amacusplus_scriptfile"; ele.type = "text/javascript"; ele.src = "http://ex.com/test.js"; document.body.appendChild(ele); } </script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> このソースを同じページ内で二箇所貼り付けると、 今度は動的な外部JSの読み込みとimgタグのonload処理の発生タイミングが微妙なため挙動不審になってしまいました。成功したり失敗したり・・・。 とこのような状況で煮詰まっています。 質問は （1）外部JSの動的な読み込みの後に、明示的にimgのonloadイベントを起こすことはできないか？ がメインですが、他のアプローチで解決できればそれでもいいので （2）<script>～</script>内に書いたjavascript内で、現在位置を知る方法（scriptエレメントを知る方法） （3）複数回読まれても重複を起こさない外部JSやその読み込み方法の書き方 などなにかヒントになるようなことを教えて頂きたいのです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascript setTimeout
javascript初心者ですが、練習を兼ねて神経衰弱を作っています。 setTimeoutを使って「めくったカードが違う場合、少し時間を経過させてから元に戻す」 という動作を作りたいのですが、うまくいきません。 /--------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //数字が表示されているimgの数 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //１枚目 imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; }else{//2枚目 imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; if(card_first==card_second){ card_c=0; }else{ setTimeout("bunki()",500); card_c=0; } function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } } } </script> </body> </html> /----------------------------------------------/ どこが間違っているのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript