この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
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> | + |