{"id":140,"date":"2020-08-01T21:07:19","date_gmt":"2020-08-02T01:07:19","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-8-%e2%80%a2-javascript-and-jquery\/"},"modified":"2021-07-26T10:31:18","modified_gmt":"2021-07-26T14:31:18","slug":"tutorial-7-javascript-and-jquery","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-7-javascript-and-jquery\/","title":{"raw":"Tutorial 7 \u2022 JavaScript and jQuery","rendered":"Tutorial 7 \u2022 JavaScript and jQuery"},"content":{"raw":"This tutorial demonstrates the basics of using the JavaScript programming language and jQuery library to add interactivity to a web site. Thanks to Ahmed (Am) Sagarwala (GCM '08) for contributing the section on jQuery.\r\n

\u201cPlain\u201d JavaScript<\/h1>\r\n

Using a Variable, Conditional Statement, and Function<\/h2>\r\nIn this section we will see how to write JavaScript code, include a conditional statement, and place the code into a function so it can be used multiple times.\r\n
    \r\n \t
  1. Open the starter document for the \u201cFireside Chat.\u201d<\/li>\r\n \t
  2. Inside the <div id=\"livearea\">, place opening and closing <script> tags and add the code:\r\n
    document.write(\"Welcome to the Fireside Chat web page.\");<\/pre>\r\nNote that the text is written below the heading.<\/li>\r\n \t
  3. Add opening and closing <p> tags inside the quotes. Add a style statement and style the text as you like.<\/li>\r\n \t
  4. Above the \"document.write\" line, add a variable statement to hold the reader's name:\r\n
    var name=prompt(\"Please type your name.\");<\/pre>\r\n<\/li>\r\n \t
  5. Add the variable name to the statement by placing it outside the quotes and connecting it to the text with \u201c+\u201d signs:\r\n
    document.write(\"<p style=\"font-family: Georgia;\">Welcome to the Fireside Chat web page, \" + name + \".<\/p>\");<\/pre>\r\n<\/li>\r\n \t
  6. If the reader does not type a name, the statement will print with a blank. To prevent the statement from printing if the user does not enter a name, place the \u201cdocument.write\u201d statement in a conditional \u201cif\u201d statement:\r\n
    if (name!=\"\") {\r\n\r\ndocument.write(\"p style=\"font-family: Georgia;\">Welcome to the Fireside Chat web page, \" + name + \".<\/p>\");\r\n\r\n}<\/pre>\r\n<\/li>\r\n \t
  7. To make a function out of the statements, add opening and closing <script> tags to the <head>. Create the function by writing:\r\n
    function writeName() {\r\n\r\nplace code here\r\n\r\n}<\/pre>\r\n<\/li>\r\n \t
  8. Call the function by keeping the <script> tags in the <body> and writing:\r\n
    writeName();<\/pre>\r\n<\/li>\r\n<\/ol>\r\n
    Making a Print Button<\/h2>\r\nIn this section we will create a function to print the page and link it to a button. Adding an \u201c@media\u201d query will enable fitting the document on a letter-size page and omitting the buttons from the print.\r\n
      \r\n \t
    1. Program the button at the bottom of the page to print the page.<\/li>\r\n \t
    2. Add a function to the <script> tag in the <head>:\r\n
      function printPage() {\r\n\r\nthis.window.print();\r\n\r\n}<\/pre>\r\n<\/li>\r\n \t
    3. Call the printPage function by linking it to the \u201cPrint\u201d button:\r\n
      <button onClick=\"printPage()\">Print<\/button><\/pre>\r\n<\/li>\r\n \t
    4. Add an @media print {} query to confine the page to 8.5x11\" and hide the buttons in the print view:\r\n
      @media print {\r\n\r\nbody {\r\n\r\ntransform: scale(0.85);\r\n\r\n} #page {\r\n\r\nwidth: 8.25in;\r\n\r\nheight: 10.0in;\r\n\r\n} footer {\r\n\r\ndisplay: none;\r\n\r\n}<\/pre>\r\n<\/li>\r\n<\/ol>\r\n
      Using Buttons to Change Color<\/h2>\r\nIn this section we will link a button to a function to change color of the text.\r\n
        \r\n \t
      1. In the <script> tag in the head, add a function to change color of the div \u201clivearea\u201d:\r\n
        function colorGrey() {\r\n\r\ndocument.getElementById(\"livearea\").style.color=\"dimgray\";\r\n\r\n}<\/pre>\r\n<\/li>\r\n \t
      2. Link the function to the \u201cGrey\u201d button:\r\n
        <button onClick=\"colorGrey()\">Grey<\/button><\/pre>\r\n<\/li>\r\n \t
      3. Create a similar function to change the text color back to black.<\/li>\r\n<\/ol>\r\n
        jQuery JavaScript Library<\/h1>\r\njQuery is a curated library of functions that was started by a group of computer science professors at MIT. jQuery simplifies the application of JavaScript by providing pre-coded functions. Instead of scripting all of the steps to select an element and make it do something, we can usually achieve this in a few lines of code using jQuery\u2019s functions.\r\n\r\nThe jQuery library is only a few K in file size and can be downloaded and hosted on your site or linked-to on the code.jquery.com site.\r\n\r\nTo create an interaction using jQuery, think of a sequence of events\u2014an action and the resulting reaction. For example:\r\n