Web Development
Using PHP

Simpson College
Computer Science

JavaScript

JavaScript Worksheet

Most of the answers for this worksheet may be found at the w3schools.com website: http://www.w3schools.com/js/

  1. Is JavaScript the same thing as Java?
  2. Show code that will take an element with the id of "college" and insert Simpson College into it. (Only 1 line needed, supporting code is not required.)
  3. Explain the difference between putting JavaScript in the <head> or in the <body>.
  4. How can JavaScript be loaded from external files?
  5. Give an example of a single-line comment in JavaScript, and a multi-line comment in JavaScript.
  6. Give an example of declaring a local JavaScript variable.
  7. Give an example of declaring a global JavaScript variable.
  8. Explain the difference between global/local variables.
  9. Give an example of the increment operator, and briefly explain what it does.
  10. Explain the difference between the == and the === operators.
  11. Give your own example (not out of w3schools) of an if...else statement in JavaScript.
  12. Show the code required to display an alert (popup) box.
  13. Write a function that will add two numbers and return the result.
  14. Write an example for loop that will write to the document the numbers 50 down to 1.
  15. What does the "break" statement do?
  16. What does the "continue" statement do?
  17. What does the For...In statement do?
  18. Show an example of calling a JavaScript function when an HTML element is clicked on.
  19. What are try / catch statements used for?
  20. Show code that will store the length of a string into a different variable.

jQuery Worksheet

Most of the answers for this worksheet may be found at the w3schools.com website: http://www.w3schools.com/jquery/

  1. Give example code that will load the jQuery script library.
  2. There are multiple variations of the jQuery. Explain the difference between "Minified" and "Uncompressed."
  3. Give example jQuery code that will hide all h1 headings in a document.
  4. One of the problems with JavaScript is that a script can start running before the entire HTML document has loaded. JavaScript will throw an error if code attempts to select part of a document that has not loaded yet. Show how jQuery allows a programmer to write code that will only load when the document is ready and fully loaded.
  5. Give an example line of code that will take all paragraphs with the class of make_red and change the CSS so that the background color will be red.
  6. Explain what an "event handler" is.
  7. Give an example of an "event handler."
  8. What is an "anonymous function?" (This might require asking the instructor for a good definition.)
  9. Explain what each line of code does below. See the full example, along with the code in action here.
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
      });
    });
    
  10. Explain how to adjust this example so that rather than clicking on "Show Panel" a user only needs to move the mouse over "Show Panel."
  11. Create your own animation using jQuery effects, similar to those examples shown here.
  12. Give a brief explanation on how to change the content of an HTML element using jQuery.
  13. What is AJAX?
  14. What does the following selector select? $("div")
  15. What does the following selector select? $("div.intro")
  16. What does the following selector select? $("div#intro.head")
  17. Is jQuery for server-side scripting or client-side scripting?
  18. What scripting language is jQuery written in?
  19. Which jQuery function is used to prevent code from running, before the document is finished loading?
<!DOCTYPE html>

<html lang="en">
<head>
  <title>Datatables Example</title>

  <!-- DataTables CSS -->
  <link type="text/css" rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
  
  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  
  <!-- DataTables -->
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  
  <script>
  /* This script will wait until the document has loaded, then format the
     data table. */
  $(document).ready(function(){
      $('#example').dataTable();
  });
  </script>

  <style>
  #example {
    width: 700px;
  }
  </style>
</head>

<body>
  <table id="example">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
      </tr>

      <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Try it here.

You are not logged in. Log in here and track your progress.