{"id":20030,"date":"2025-07-18T22:27:19","date_gmt":"2025-07-18T15:27:19","guid":{"rendered":"https:\/\/inhdy-demo.com\/?page_id=20030"},"modified":"2025-07-18T22:30:08","modified_gmt":"2025-07-18T15:30:08","slug":"6-unit-6-html-js-making-webpages-interactive","status":"publish","type":"page","link":"https:\/\/steamkid.ai\/th\/grade\/6-computer-programming-units\/6-unit-6-html-js-making-webpages-interactive\/","title":{"rendered":"6 Unit 6: HTML\/JS: Making webpages interactive"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\n\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u0e1a\u0e17 6<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

HTML\/JS: Making webpages interactive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22!\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \"\"\n \n \n \n <\/div>\n
\n
\n

Lesson<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

1. Get ready to make your webpages interactive<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

2. JS and the DOM<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

3. DOM access methods<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

4. DOM modification<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

5. DOM events<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

6. DOM animation<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t
\n\n \n
\n <\/path><\/svg> <\/div>\n \n \n <\/div>\n
\n
\n

7. Using JS libraries in your webpage<\/h2> <\/div>\n <\/div>\n <\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tStart<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Home Unit 6 HTML\/JS: Making webpages interactive Let's get started! Lesson 1. Get ready to make your webpages interactive Start 2. JS and the DOM Start 3. DOM access methods Start 4. DOM modification Start 5. DOM events Start 6. … <\/p>","protected":false},"author":265783168,"featured_media":0,"parent":19941,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","_crdt_document":"","footnotes":""},"class_list":["post-20030","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/pages\/20030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/users\/265783168"}],"replies":[{"embeddable":true,"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/comments?post=20030"}],"version-history":[{"count":9,"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/pages\/20030\/revisions"}],"predecessor-version":[{"id":20039,"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/pages\/20030\/revisions\/20039"}],"up":[{"embeddable":true,"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/pages\/19941"}],"wp:attachment":[{"href":"https:\/\/steamkid.ai\/th\/wp-json\/wp\/v2\/media?parent=20030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}