{"id":168,"date":"2026-01-12T16:40:06","date_gmt":"2026-01-12T21:40:06","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&p=168"},"modified":"2026-02-18T13:41:53","modified_gmt":"2026-02-18T18:41:53","slug":"chapter-11-javascript","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-11-javascript\/","title":{"raw":"Chapter 11 \u2022\u00a0JavaScript","rendered":"Chapter 11 \u2022\u00a0JavaScript"},"content":{"raw":"

What is JavaScript?<\/h2>\r\nJavaScript is the programming language for the web. JavaScript can be included in tags, such as buttons, or written as separate functions that are \"called\" from a tag.\r\n\r\nMany practical functions can be implemented with JavaScript, including printing the page, increasing type size to improve legibility, increasing contrast, and controlling animations.\r\n\r\nJavaScript is a separate language from HTML\/CSS that many designers consider to be difficult. However numerous simple JavaScript functions can be written with the help of AI chat programs.\r\n

Sample Code<\/h2>\r\nExample of a JavaScript statement included in the <button> tag:\r\n
<button onClick=\"window.print();\">Print Page<\/button><\/pre>\r\nExample of the above statement placed in a function:\r\n
<script>\r\n    function printPage() {\r\n        window.print();\r\n    }\r\n<\/script>\r\n<\/pre>\r\n. . . And calling the function in a button:\r\n
<button onClick=\"printPage()\"<Print Page>\r\n<\/pre>\r\n
Using AI to Write JavaScript<\/h2>\r\nAI chat programs like ChatGPT, ChatAI, DeepSeek, and others make JavaScript more accessible to non-programmers. The key to getting functional JavaScript is to write an accurate, detailed prompt. The following prompt was used to write a program to enlarge thumbnail images when clicked:\r\n
Write a JavaScript program and CSS styles for an HTML web page in which a small thumbnail image, when clicked, opens a larger image that sits in front of the page and includes a cancel \"X\" button.<\/div>\r\n
jQuery JavaScript Library<\/h2>\r\njQuery<\/a> is a free library of JavaScript functions hosted by Massachusetts Institute of Technology's Media Lab. According to Wikipedia, jQuery is used in 77% of the 10 million most popular web sites.\r\n\r\nTwo ways to implement jQuery are to (1) link to the jQuery library at code.jquery.com, or (2) download the jQuery library to your computer and link to it on your server.\r\n\r\nSome jQuery functions include fade-in\/fade-out, slide-down\/slide-up, change class, animate, sortable, and draggable.\r\n\r\n\r\n\r\n
\r\n\r\n[caption id=\"attachment_171\" align=\"alignright\" width=\"175\"]\"\"<\/a> These three pages include some practical examples of JavaScript functions, including enlarging some photos, printing the page, increasing type size, and checking all boxes in a form.[\/caption]<\/td>\r\n\r\n\r\n[caption id=\"attachment_179\" align=\"aligncenter\" width=\"175\"]\"\"<\/a> This jQuery tutorial shows the functions fade-in\/fade-out, slide-up\/slide-down, change class, animate, sortable, and draggable.[\/caption]<\/td>\r\n\r\n\r\n[caption id=\"attachment_172\" align=\"alignleft\" width=\"175\"]\"\"<\/a> This sample page shows two examples of jQuery JavaScript functions, \"sortable\" and \"draggable,\" each implemented with one line of code.[\/caption]<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
<\/div>","rendered":"
What is JavaScript?<\/h2>\n
JavaScript is the programming language for the web. JavaScript can be included in tags, such as buttons, or written as separate functions that are “called” from a tag.<\/p>\n
Many practical functions can be implemented with JavaScript, including printing the page, increasing type size to improve legibility, increasing contrast, and controlling animations.<\/p>\n
JavaScript is a separate language from HTML\/CSS that many designers consider to be difficult. However numerous simple JavaScript functions can be written with the help of AI chat programs.<\/p>\n
Sample Code<\/h2>\n
Example of a JavaScript statement included in the <button> tag:<\/p>\n
<button onClick=\"window.print();\">Print Page<\/button><\/pre>\n
Example of the above statement placed in a function:<\/p>\n
<script>\r\n    function printPage() {\r\n        window.print();\r\n    }\r\n<\/script>\r\n<\/pre>\n
. . . And calling the function in a button:<\/p>\n
<button onClick=\"printPage()\"<Print Page>\r\n<\/pre>\n
Using AI to Write JavaScript<\/h2>\n
AI chat programs like ChatGPT, ChatAI, DeepSeek, and others make JavaScript more accessible to non-programmers. The key to getting functional JavaScript is to write an accurate, detailed prompt. The following prompt was used to write a program to enlarge thumbnail images when clicked:<\/p>\n
Write a JavaScript program and CSS styles for an HTML web page in which a small thumbnail image, when clicked, opens a larger image that sits in front of the page and includes a cancel “X” button.<\/div>\n
jQuery JavaScript Library<\/h2>\n
jQuery<\/a> is a free library of JavaScript functions hosted by Massachusetts Institute of Technology’s Media Lab. According to Wikipedia, jQuery is used in 77% of the 10 million most popular web sites.<\/p>\n
Two ways to implement jQuery are to (1) link to the jQuery library at code.jquery.com, or (2) download the jQuery library to your computer and link to it on your server.<\/p>\n
Some jQuery functions include fade-in\/fade-out, slide-down\/slide-up, change class, animate, sortable, and draggable.<\/p>\n\n\n\n
\n
\"\"<\/a>
These three pages include some practical examples of JavaScript functions, including enlarging some photos, printing the page, increasing type size, and checking all boxes in a form.<\/figcaption><\/figure>\n<\/td>\n
\n
\"\"<\/a>
This jQuery tutorial shows the functions fade-in\/fade-out, slide-up\/slide-down, change class, animate, sortable, and draggable.<\/figcaption><\/figure>\n<\/td>\n
\n
\"\"<\/a>
This sample page shows two examples of jQuery JavaScript functions, “sortable” and “draggable,” each implemented with one line of code.<\/figcaption><\/figure>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/div>\n","protected":false},"author":6,"menu_order":11,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-168","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":21,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/168\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/168\/revisions\/227"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/168\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=168"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=168"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}