{"id":978,"date":"2021-11-17T17:48:03","date_gmt":"2021-11-17T08:48:03","guid":{"rendered":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/?p=978"},"modified":"2024-02-20T11:42:40","modified_gmt":"2024-02-20T02:42:40","slug":"post-978","status":"publish","type":"post","link":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/archives\/978","title":{"rendered":"Javascript\u3067\u30aa\u30bb\u30ed\u3092\u3064\u304f\u308b \u7b2c1\u56de"},"content":{"rendered":"<h2>\u30aa\u30bb\u30ed\u76e4\u3068\u77f3\u3092\u3064\u304f\u308b<\/h2>\n<p>\u307e\u305a\u30aa\u30bb\u30ed\u76e4\u3068\u77f3\u3092HTML\u3068CSS\u3067\u3064\u304f\u308a\u307e\u3059\u3002\u30aa\u30bb\u30ed\u76e4\u306ftable\u3067\u3001\u77f3\u306f\u89d2\u3092\u4e38\u3081\u305fdiv\u3067\u3064\u304f\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n<h4>othello1.html\u306e\u30bd\u30fc\u30b9<\/h4>\n<pre class='code'>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style type=&#039;text\/css&#039;&gt;&lt;!--\n    table#board {\n        background-color: black;\n    }\n\n    table#board td {\n        width: 30px;\n        height: 30px;\n        background-color: green;\n        padding: 5px;\n    }\n\n    div.black {\n        background-color: black;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n\n    div.white {\n        background-color: white;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n--&gt;&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;table id=&#039;board&#039;&gt;\n&lt;tr&gt;\n    &lt;td&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n    &lt;td&gt;&lt;div class=&#039;black&#039;&gt;&lt;\/div&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;div class=&#039;white&#039;&gt;&lt;\/div&gt;&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;\n&lt;div id=&#039;status&#039;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h4>othello1.html\u306e\u5b9f\u884c\u7d50\u679c<\/h4>\n<p><a href=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello1.html\" target=\"_blank\" rel=\"noopener\">\u4e0b\u306b\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306f\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af(\u5225\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u958b\u304d\u307e\u3059)<\/a><br \/>\n<iframe src=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello1.html\" style=\"width: 100%; min-height: 100px;\"><\/iframe><\/p>\n<h2>8&#215;8\u306b\u62e1\u5f35<\/h2>\n<p>\u30aa\u30bb\u30ed\u76e4\u306f8&#215;8\u3067\u3001\u3053\u308c\u3092\u5168\u90e8\u66f8\u304f\u306e\u306f\u9762\u5012\u306a\u306e\u3067\u3001Javascript\u3067\u30de\u30b9\u76ee\u3082\u66f8\u304f\u3088\u3046\u306b\u3057\u307e\u3059\u3002HTML\u306e\u8981\u7d20\u3092\u697d\u306b\u6271\u3046\u305f\u3081\u306bjquery.js\u3092\u5c0e\u5165\u3057\u307e\u3059\u3002<\/p>\n<h4>othello2.html\u306e\u30bd\u30fc\u30b9<\/h4>\n<pre class='code'>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style type=&#039;text\/css&#039;&gt;&lt;!--\n    table#board {\n        background-color: black;\n    }\n\n    table#board td {\n        width: 30px;\n        height: 30px;\n        background-color: green;\n        padding: 5px;\n    }\n\n    div.black {\n        background-color: black;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n\n    div.white {\n        background-color: white;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n--&gt;&lt;\/style&gt;\n&lt;!-- \u8ffd\u52a0 \u3053\u3053\u304b\u3089 --&gt;\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&#039;text\/javascript&#039;&gt;&lt;!--\njQuery(function (){\n    for(var r = 0 ; r &lt; 8 ; r ++){\n        var tr = $(&quot;&lt;tr&gt;&quot;);  \/\/ tr\u8981\u7d20\u3092\u3064\u304f\u308b\n        for(var c = 0 ; c &lt; 8 ; c ++){\n            tr.append($(&#039;&lt;td&gt;&lt;div class=&quot;none&quot;&gt;&lt;\/div&gt;&lt;\/td&gt;&#039;));  \/\/ td\u8981\u7d20\u3092\u3064\u304f\u3063\u3066tr\u8981\u7d20\u306b\u8ffd\u52a0\u3059\u308b\n        }\n        $(&#039;table#board&#039;).append(tr);  \/\/ tr\u8981\u7d20\u3092table\u306b\u8ffd\u52a0\u3059\u308b\n    }\n});\n--&gt;&lt;\/script&gt;\n&lt;!-- \u8ffd\u52a0 \u3053\u3053\u307e\u3067 --&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;table id=&#039;board&#039;&gt;\n&lt;\/table&gt;\n&lt;div id=&#039;status&#039;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h4>othello2.html\u306e\u5b9f\u884c\u7d50\u679c<\/h4>\n<p><a href=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello2.html\" target=\"_blank\" rel=\"noopener\">\u4e0b\u306b\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306f\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af(\u5225\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u958b\u304d\u307e\u3059)<\/a><br \/>\n<iframe src=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello2.html\" style=\"width: 100%; min-height: 100px;\"><\/iframe><\/p>\n<h2>\u77f3\u3092\u7f6e\u304f\u3001\u3072\u3063\u304f\u308a\u8fd4\u3059<\/h2>\n<p>\u30aa\u30bb\u30ed\u76e4\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u3067\u3001\u767d\u9ed2\u306e\u77f3\u3092\u304a\u3044\u305f\u308a\u3072\u3063\u304f\u308a\u8fd4\u3057\u305f\u308a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<br \/>\n\u307e\u3060\u77f3\u304c\u7f6e\u304b\u308c\u3066\u3044\u306a\u3044\u30de\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u77f3\u304c\u7f6e\u304b\u308c\u307e\u3059\u3002\u7f6e\u3044\u305f\u3042\u3068\u3067\u3001\u631f\u3093\u3060\u77f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3072\u3063\u304f\u308a\u8fd4\u3057\u307e\u3059\u3002\u5168\u3066\u3072\u3063\u304f\u308a\u8fd4\u3057\u305f\u3042\u3068\u3067\u6b21\u306e\u624b\u3092\u7f6e\u304d\u307e\u3059\u3002<br \/>\n\u3061\u3083\u3093\u3068\u64cd\u4f5c\u65b9\u6cd5\u3092\u7406\u89e3\u3057\u3066\u3044\u308c\u3070\u904a\u3079\u307e\u3059\u304c\u3001\u9593\u9055\u3048\u305f\u3068\u304d\u306b\u623b\u305b\u306a\u3044\u306e\u3067\u614e\u91cd\u306b\u904a\u3076\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h4>othello3.html\u306e\u30bd\u30fc\u30b9<\/h4>\n<pre class='code'>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style type=&#039;text\/css&#039;&gt;&lt;!--\n    table#board {\n        background-color: black;\n    }\n\n    table#board td {\n        width: 30px;\n        height: 30px;\n        background-color: green;\n        padding: 5px;\n    }\n\n    div.black {\n        background-color: black;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n\n    div.white {\n        background-color: white;\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n    }\n--&gt;&lt;\/style&gt;\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&#039;text\/javascript&#039;&gt;&lt;!--\nvar turn = 1;  \/\/ \u77f3\u306e\u767d\u9ed2\n\njQuery(function (){\n    for(var r = 0 ; r &lt; 8 ; r ++){\n        var tr = $(&quot;&lt;tr&gt;&quot;);\n        for(var c = 0 ; c &lt; 8 ; c ++){\n            tr.append($(&#039;&lt;td&gt;&lt;div class=&quot;none&quot;&gt;&lt;\/div&gt;&lt;\/td&gt;&#039;)\n                .click(function (e){  \/\/ td\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306e\u52d5\u4f5c\n                    var disc = $(&#039;div&#039;, this);  \/\/ \u30af\u30e9\u30b9\u3092\u5909\u66f4\u3059\u308bdiv\u8981\u7d20\u3092\u53d6\u5f97\n                    if(disc.hasClass(&#039;none&#039;)){  \/\/ \u77f3\u304c\u7f6e\u304b\u308c\u3066\u3044\u306a\u3044\u3068\u304d\n                        disc.removeClass(&#039;none&#039;);\n                        disc.addClass(turn == 1 ? &#039;black&#039; : &#039;white&#039;);\n                        turn *= -1;  \/\/ \u767d\u9ed2\u3092\u9006\u306b\u3059\u308b\n                        $(&#039;div#status&#039;).html((turn == 1 ? &#039;\u9ed2&#039; : &#039;\u767d&#039;) + &#039;\u306e\u756a&#039;);\n\n                    \/\/ \u631f\u3093\u3060\u77f3\u3092\u3072\u3063\u304f\u308a\u8fd4\u3059\n                    }else{\n                        disc.removeClass(turn == 1 ? &#039;black&#039; : &#039;white&#039;);\n                        disc.addClass(turn == 1 ? &#039;white&#039; : &#039;black&#039;);\n                    }\n                })\n            );\n        }\n        $(&#039;table#board&#039;).append(tr);\n    }\n\n    \/\/ \u521d\u671f\u914d\u7f6e\n    $(&#039;table#board&#039;).find(&#039;tr&#039;).eq(3).find(&#039;td&#039;).eq(3).click();  \/\/ tr\u306e3\u756a\u76ee\u306etd\u306e3\u756a\u76ee\u3092\u30af\u30ea\u30c3\u30af\n    $(&#039;table#board&#039;).find(&#039;tr&#039;).eq(3).find(&#039;td&#039;).eq(4).click();\n    $(&#039;table#board&#039;).find(&#039;tr&#039;).eq(4).find(&#039;td&#039;).eq(4).click();\n    $(&#039;table#board&#039;).find(&#039;tr&#039;).eq(4).find(&#039;td&#039;).eq(3).click();\n});\n--&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;table id=&#039;board&#039;&gt;\n&lt;\/table&gt;\n&lt;div id=&#039;status&#039;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h4>othello3.html\u306e\u5b9f\u884c\u7d50\u679c<\/h4>\n<p><a href=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello3.html\" target=\"_blank\" rel=\"noopener\">\u4e0b\u306b\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306f\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af(\u5225\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u958b\u304d\u307e\u3059)<\/a><iframe src=\"\/labo\/suzuki\/wp-content\/uploads\/978\/othello3.html\" style=\"width: 100%; min-height: 400px;\"><\/iframe><\/p>\n<h2>\u81ea\u52d5\u7684\u306b\u77f3\u3092\u8fd4\u3059<\/h2>\n<p><a href=\"\/labo\/suzuki\/archives\/990\">\u6b21\u56de<\/a>\u306b\u7d9a\u304f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30aa\u30bb\u30ed\u76e4\u3068\u77f3\u3092\u3064\u304f\u308b \u307e\u305a\u30aa\u30bb\u30ed\u76e4\u3068\u77f3\u3092HTML\u3068CSS\u3067\u3064\u304f\u308a\u307e\u3059\u3002\u30aa\u30bb\u30ed\u76e4\u306ftable\u3067\u3001\u77f3\u306f\u89d2\u3092\u4e38\u3081\u305fdiv\u3067\u3064\u304f\u3063\u3066\u307f\u307e\u3059\u3002 othello1.html\u306e\u30bd\u30fc\u30b9 othello1.html\u306e\u5b9f\u884c\u7d50\u679c \u4e0b\u306b\u8868\u793a\u3055\u308c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,7],"tags":[35,36,34],"_links":{"self":[{"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/posts\/978"}],"collection":[{"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/comments?post=978"}],"version-history":[{"count":16,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/posts\/978\/revisions"}],"predecessor-version":[{"id":1870,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/posts\/978\/revisions\/1870"}],"wp:attachment":[{"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/media?parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/categories?post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/wp-json\/wp\/v2\/tags?post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}