{"id":25215,"date":"2024-02-26T21:27:28","date_gmt":"2024-02-26T12:27:28","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25215"},"modified":"2024-02-26T21:27:30","modified_gmt":"2024-02-26T12:27:30","slug":"jquery-web%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25215","title":{"rendered":"JQuery WEB\u30b5\u30fc\u30d3\u30b9"},"content":{"rendered":"\n<p>index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html lang=\"en\">\r\n&lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    &lt;title>Interactive Web Page&lt;\/title>\r\n    &lt;style>\r\n        .highlight {\r\n            color: blue;\r\n            font-weight: bold;\r\n        }\r\n        .listItem {\r\n            cursor: pointer;\r\n        }\r\n        #inputField::placeholder {\r\n            color: #999; \/* \u30d2\u30f3\u30c8\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8a2d\u5b9a *\/\r\n        }\r\n    &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n\r\n&lt;h1>Interactive Web Page&lt;\/h1>\r\n\r\n&lt;p>Type something in the input box below and click 'Add' to add it to the list:&lt;\/p>\r\n\r\n&lt;input type=\"text\" id=\"inputField\" placeholder=\"Type here...\">\r\n&lt;span id=\"charCount\">0&lt;\/span> characters\r\n&lt;button id=\"addButton\">Add&lt;\/button>\r\n\r\n&lt;ul id=\"listContainer\">\r\n    &lt;!-- Items will be dynamically added here -->\r\n&lt;\/ul>\r\n\r\n&lt;script src=\"script.js\">&lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n\n\n\n<p>script.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\r\n    var inputField = document.getElementById(\"inputField\");\r\n    var charCount = document.getElementById(\"charCount\");\r\n    var addButton = document.getElementById(\"addButton\");\r\n    var listContainer = document.getElementById(\"listContainer\");\r\n\r\n    inputField.addEventListener(\"input\", function() {\r\n        \/\/ \u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u6570\u3092\u66f4\u65b0\r\n        charCount.textContent = inputField.value.length;\r\n    });\r\n\r\n    inputField.addEventListener(\"focus\", function() {\r\n        \/\/ \u5165\u529b\u30d5\u30a9\u30fc\u30e0\u304c\u30d5\u30a9\u30fc\u30ab\u30b9\u3055\u308c\u305f\u3068\u304d\u306b\u30d2\u30f3\u30c8\u30c6\u30ad\u30b9\u30c8\u3092\u975e\u8868\u793a\u306b\u3059\u308b\r\n        inputField.placeholder = \"\";\r\n    });\r\n\r\n    inputField.addEventListener(\"blur\", function() {\r\n        \/\/ \u5165\u529b\u30d5\u30a9\u30fc\u30e0\u304c\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5931\u3063\u305f\u3068\u304d\u306b\u30d2\u30f3\u30c8\u30c6\u30ad\u30b9\u30c8\u3092\u518d\u8868\u793a\u3059\u308b\r\n        inputField.placeholder = \"Type here...\";\r\n    });\r\n\r\n    addButton.addEventListener(\"click\", function() {\r\n        var userInput = inputField.value.trim();\r\n\r\n        if (userInput !== \"\") {\r\n            var listItem = document.createElement(\"li\");\r\n            var now = new Date(); \/\/ \u73fe\u5728\u306e\u65e5\u6642\u3092\u53d6\u5f97\r\n            listItem.textContent = userInput + \" - \" + now.toLocaleString(); \/\/ \u30c6\u30ad\u30b9\u30c8\u3068\u65e5\u6642\u3092\u7d50\u5408\u3057\u3066\u8868\u793a\r\n            listItem.classList.add(\"listItem\");\r\n\r\n            \/\/ \u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\u3092\u8ffd\u52a0\u3059\u308b\u969b\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4ed8\u3051\u308b\r\n            listItem.style.opacity = \"0\"; \/\/ \u6700\u521d\u306f\u900f\u660e\u306b\u8a2d\u5b9a\r\n            listContainer.appendChild(listItem);\r\n            listItem.style.transition = \"opacity 0.5s\"; \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\r\n            listItem.offsetHeight; \/\/ \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u30c8\u30ea\u30ac\u30fc\u3059\u308b\u305f\u3081\u306e\u30c0\u30df\u30fc\r\n            listItem.style.opacity = \"1\"; \/\/ \u900f\u660e\u5ea6\u3092\u5143\u306b\u623b\u3059\r\n\r\n            inputField.value = \"\";\r\n            charCount.textContent = \"0\"; \/\/ \u6587\u5b57\u6570\u3092\u30ea\u30bb\u30c3\u30c8\r\n\r\n            listItem.addEventListener(\"click\", function() {\r\n                listItem.classList.toggle(\"highlight\"); \/\/ \u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b\u5f37\u8abf\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u308b\r\n            });\r\n        }\r\n    });\r\n});\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>index.html script.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[8,4],"tags":[125,3],"class_list":["post-25215","post","type-post","status-publish","format-standard","hentry","category-jquery","category-programming","tag-jquery","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25215"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25215\/revisions"}],"predecessor-version":[{"id":25216,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25215\/revisions\/25216"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25215"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}