Assignment 2 - Introduction to JavaScript

Take the HTML code at the end of this assignment, and then write a JavaScript file to complete the five parts. Please use jQuery where appropriate.

Four points for each part.

To get set up and turn it in:

  • Create a file called javascript_assignment.html in the IntelliJ project you created from our last assignment. Put the HTML file in the “web” folder. Don’t put it in the WEB-INF folder.
  • Copy the HTML page I’ve got for you WAY at the end of this assignment into javascript_assignment.html.
  • Create a file called javascript_assignment.js in your IntelliJ project in the same folder. Your setup should look like:
../../../_images/file_setup.png
  • Rather than go through the “redeploy” process, just open the original source file in your web browser. (Right click on the HTML file, hit “show in explorer”, then toss that file into your favorite web browser.) When we working with the database we will have to go through the run/deploy process. But since we are just doing JavaScript we can skip that.
  • Put a simple console.log("Test"); into the js file. Refresh your web page and make sure you can see the test. If it works, then delete that line and move on.
  • Write the JavaScript to solve all five parts described below. Remember, the example for jQuery gets you part way there.
  • Hover over the IntelliJ bar on the right side where there are little “suggestion” and error lines. See if there are any improvements in style to make.
  • Build a WAR file by the “Build Artifacts” menu option.
  • Deploy it.
  • Confirm it still works once deployed. You’ll need to navigate directly to the file by adding /javascript_assignment.html to the end. For example: http://cis320firstapp-env.pjaceubggu.us-east-2.elasticbeanstalk.com/javascript_assignment.html
  • Paste in a GitHub link to your JavaScript (one for html, one for js), and a link to your working application on Amazon.

Part 1

Write an application that will print out “Hello” to the console every time the user hits the button.

../../../_images/part1.png

Do NOT modify the HTML file I’m giving you. Only put your JavaScript code in the JavaScript file. Do NOT use the onclick directive for hooking a function to a button. Instead pull from the example and do something like:

// Your Function
function myFunction(event) {
    // Your code here
}

// Attach a button with the id of 'button1' the function above
var formButton1 = $('#button1');
formButton1.on("click", myFunction);

Part 2

For part two, use jQuery to pull the values of the first two fields, convert them to numbers, and add them. Then put the result in the third field.

../../../_images/part2.png

Part 3

Toggle the paragraph to be hidden and not hidden. Remember, most of the code you need is already in jQuery example code I showed.

../../../_images/part3.png

Part 4

User regular expressions to validate the following field. Remember, most of the code you need is already in jQuery example code I showed.

Don’t understand regular expressions? Run through this tutorial: https://regexone.com/

../../../_images/part4.png

Part 5

Create a JSON string out of the form fields below. Remember, most of the code you need is already in jQuery example code I showed.

../../../_images/part5.png 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JavaScript Assignment</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </head>
    <body>
      <div class="container">
        <h1>JavaScript Assignment</h1>

        <p>Use JavaScript and jQuery and complete the five parts below.</p>

        <h2>Part 1</h2>
        <p>Every time the user hits button below, print to the console "Hello."</p>
        <form>
            <input class="btn btn-primary" type="button" name="button1" id="button1" value="Button 1"><br/>
        </form>

        <h2>Part 2</h2>
        <p>Every time the user hits button below, fetch the values in fields 1
            and 2, add them (don't concatenate), and put them in field 3.</p>
        <form>
            <input class="form-control col-md-2" type="text" name="field1" id="field1" value="1">
            +
            <input class="form-control col-md-2" type="text" name="field2" id="field2" value="1">
            =
            <input class="form-control col-md-2" type="text" name="field3" id="field3" value="">
            <br />
            <input class="btn btn-primary" type="button" name="button2" id="button2" value="Button 2"><br/>
        </form>

        <h2>Part 3</h2>
        <p id="paragraphToHide">Every time the user hits button below, hide this paragraph. If
            It is already hidden, then show it.</p>
        <p>See <a href='http://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery'>this link to
            understand test if an item is hidden</a>.</p>
        <form>
            <input class="btn btn-primary" type="button" name="button3" id="button3" value="Button 3"><br/>
        </form>

        <h2>Part 4</h2>
        <p>Print to the console "OK" or "Bad" if the phone number fits
            the reg ex pattern of 555-555-5555. (Doesn't have to be 5's)</p>
        <form>
            <label for="phoneField">Phone Field: </label>
            <input class="form-control col-md-2" type="text" name="phoneField" id="phoneField" value="555-555-5555"><br/>
            <input class="btn btn-primary" type="button" name="button4" id="button4" value="Button 4">
        </form>

        <h2>Part 5</h2>
        <p>Grab the form fields before, and then form and print to the console
            a JSON request. The output should look like:</p>
        <pre>{"first":"Paul","last":"Craven","email":"paul.craven@simpson.edu"}</pre>
        <form>
              <label for="first">First Name:</label>
              <input type="text" name="first" class="form-control col-md-4" id="first"><br/>

              <label for="last">Last Name:</label>
              <input type="text" name="last" class="form-control col-md-4" id="last"><br/>

              <label for="email">Email:</label>
              <input type="email" name="email" id="email" class="form-control col-md-4"><br/>
            <input class="btn btn-primary" type="button" name="button4" id="button5" value="Button 5">
        </form>

        <!-- Load our scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="javascript_assignment.js"></script>
      </div>
    </body>
</html>

Turn In

Please turn in:

  • Link to your html file in GitHub
  • Link to your JavaScript file in GitHub
  • Build your app to a WAR file, then link to directly to your page on Amazon. (Note the name of your HTML file, you’ll likely need to type it in to bring it up.)