ユーザ用ツール

サイト用ツール


rss

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
rss [2016/12/28 ]
N_Miya
rss [2018/12/31 ] (現在)
N_Miya
ライン 1: ライン 1:
-====HTML 試験ページ==== +===tokyo.matrix.jp===
-<​html>​ +
-  <​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()">​3HTMLで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.1482874761.txt · 最終更新: 2016/12/28 by N_Miya