rss
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
rss [2016/12/28 ] N_Miya |
rss [2018/12/31 ] (現在) N_Miya |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| - | <html> | + | ===tokyo.matrix.jp=== |
| - | <head> | + | |
| - | <title>ここにページのタイトル書くよ！</title> | + | |
| - | <meta charset="utf-8" /> | + | |
| - | <style type="text/css"> | + | |
| - | .foo-before { | + | |
| - | background-color: white; | + | |
| - | color: black; | + | |
| - | } | + | |
| - | .foo-after { | + | |
| - | background-color: black; | + | |
| - | color: yellow; | + | |
| - | } | + | |
| - | </style> | + | |
| - | </head> | + | |
| - | <body> | + | {{rss>http://tokyox.matrix.jp/feed/}} |
| - | <p id="id_1">1. JS側にonclick書いてクリックイベント発火。</p> | + | |
| - | <p id="id_2">2. JSでは無名関数も使えるよ！</p> | + | |
| - | <p onclick="pClick()">3. HTMLでonclick属性書いた。クリックしてみて！</p> | + | |
| - | <p id="id_3" class="foo-before">4. クリックするたび色変わるよ！（クラスの入れ替えをjQueryで実装）</p> | + | |
| - | <p id="id_4">5. クリックするとCSS追加されるよ！</p> | + | |
| - | <script type="text/javascript"> | ||
| - | // 変数定義（「//」から始まる行はコメントアウト） | ||
| - | var id_1 = document.getElementById("id_1"); | ||
| - | var id_2 = document.getElementById("id_2"); | ||
| - | var id_3 = document.getElementById("id_3"); | ||
| - | // id_1（id_2）をクリックしたら、functionの中身を実行 | + | ===古代史 俯瞰=== |
| - | id_1.onclick = function id1Click() { | + | |
| - | alert("id_1クリックしたよ！"); | + | |
| - | } | + | |
| - | id_2.onclick = function () { | + | |
| - | alert("id_2クリック！関数名は書いても書かなくてもOK！"); | + | |
| - | } | + | |
| - | // HTML側にクリックイベント記述 | + | {{rss>http://tokyox.matrix.jp/wordpress/feed/}} |
| - | function pClick() { | + | |
| - | alert("pタグクリック！HTMLでonclick属性書いたよ！"); | + | |
| - | } | + | |
| - | </script> | + | |
| - | <script type="text/javascript"> | ||
| - | var stylesheet = document.styleSheets.item(0); | ||
| - | // 上で定義したid_4はここでも使えるよ！ | + | === dokuwiki自分のFEED=== |
| - | id_4.onclick = function () { | + | |
| - | //第2引数は、「CSSの何番目のルールにするか」。0始まりの番号。 | + | |
| - | stylesheet.insertRule("#id_4 {font-size: 20px;}", 0); | + | |
| - | stylesheet.insertRule("#id_4 {background-color: pink;}", stylesheet.cssRules.length); | + | |
| - | } | + | |
| - | </script> | + | |
| - | <!-- これでjQuery使える。ただしネットつながってれば。 --> | + | {{rss>http://miya.myds.me/dokuwiki/feed.php}} |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> | + | |
| - | + | ||
| - | <script type="text/javascript"> | + | |
| - | // $関数はjQueryの定番！ | + | |
| - | $('#id_3').click(function() { | + | |
| - | this.className = (this.className === 'foo-before') ? 'foo-after' : 'foo-before'; | + | |
| - | }); | + | |
| - | + | ||
| - | document.writeln("<p>6. JSでHTML記述！（リロードするたび少し表示が遅れてるけど、わかるかな？）</p>"); | + | |
| - | document.writeln("<p>7. URLは、" + document.URL + "だよ！</p>"); | + | |
| - | document.writeln("<p>8. このページのtitleは、「" + document.title + "」だよ！</p>"); | + | |
| - | </script> | + | |
| - | </body> | + | |
| - | </html> | + | |
rss.1482874889.txt · 最終更新: 2016/12/28 by N_Miya
