6. jQuery

For detailed JavaScript tutorials, and as a great reference, see W3Schools jQuery section.

Classic jQuery joke

To get really good with jQuery, go over the W3Schools jQuery Tutorial, jQuery Effects for visual, and more!

Let’s start with a web page test_javascript.html:

 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>This is a document in which to test JavaScript</title>
    </head>
    <body>
        <h1>This is a document in which to test jQuery</h1>
        <p>Hi, this is a jQuery test document.</p>
        <p>Scripts should be loaded right before the closing body tag
        for the best performance.</p>
        <form>
            <label for="myTextField">Input Field: </label>
            <input type="text" name="myTextField" id="myTextField" value="defaultValue"><br />
            <input type="button" name="button1" id="button1" value="button1"><br />
        </form>

        <p>Put name in field and click button to add to table.</p>
        <table id="tableName">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr></tr>
            </tbody>
        </table>

        <form>
            <h2 id="hideme">Hide Me</h2>
            <input type="button" name="button2" id="button2" value="button2"><br />
        </form>

        <form>
            <p>Enter only upper and lower case letters below. From 1 to
            10 characters.</p>
            <label for="validateMe">Validate this: </label>
            <input type="text" name="validateMe" id="validateMe" value=""><br />
            <p id="result">Press to Validate</p>
            <input type="button" name="button3" id="button3" value="Validate"><br />
        </form>

        <form>
            <p>Create a JSON formatted string based on a form entry.<br />
            <label for="myName">Name: </label>
                <input type="text" name="myName" id="myName" value=""><br />
            <p id="jsonResult">Press to JSON'ify</p>
            <input type="button" name="button4" id="button4" value="Validate"><br />
        </form>

        <!-- jQuery. Search up CDn and jQuery for a link. -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="test_javascript.js"></script>
    </body>
</html>

In the same directory, create your JavaScript file test_javascript.js:

 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*
 * A few jQuery examples
 */

// Grab a list of all tags that match (jQuery selector)
// The $ is actually a function name! Wacky, but legal.
let paragraphs = $("p");

// See: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
// to get an idea of how we can have a lot of powerful selectors.

// How many tags match? Use the array 'length' attribute.
console.log("There are " + paragraphs.length + " paragraphs in this page.");

// Print the text in each one.
// jQuery items have a 'textContent' attribute
for(let i = 0; i < paragraphs.length; i++) {
    let paragraphText = paragraphs[i].textContent;
    console.log(paragraphText);
}

// -- Add a row to the table based on a form field

// Create a function to add a row to the table
function myUpdateFunction(event) {
    // Grab field with id=myTextField and get teh value out of the form field
    // using the val() function:
    let fieldValue = $('#myTextField').val();
    // Select the tbody in a table with id=tableName
    // Append to that tbody the following html (a row)
    $("#tableName tbody").append("<tr><td>"+fieldValue+"</td></tr>");
    // Log for debuf info
    console.log(fieldValue);
}

// Attach an the function to a button click. This is a callback. Will run when
// we click.
let formButton1 = $('#button1');
formButton1.on("click", myUpdateFunction);

// -- How to hide an item based on a button click

// Create a function to hide an item
function hideFunction(event) {
    $("#hideme").hide(500);
}

// Attach an action to a button click
let formButton2 = $('#button2');
formButton2.on("click", hideFunction);

// -- How to validate an item

// Function to validate
function validateFunction(event) {
    // Get the field
    let v1 = $('#validateMe').val();

    // Create the regular expression
    let reg = /^[A-Za-z]{1,10}$/;

    // Test the regular expression to see if there is a match
    if (reg.test(v1)) {
        $('#result').text("Ok");
    } else {
        $('#result').text("Bad");
    }}

// Attach an action to a button click
let formButton3 = $('#button3');
formButton3.on("click", validateFunction);

// -- JSON'ify a form
// We'll use this a lot to interact with the back-end

// Create function to JSON'ify
function jsonFunction(event) {

    // Create an empty object
    let formObject = {};

    // Set a field in the object to the value in this form field
    formObject.myName = $('#myName').val();

    // Build the JSON string based on that object's fields
    let jsonString = JSON.stringify(formObject);

    // Set a field to the JSON result so we can see it.
    $('#jsonResult').text(jsonString);
}

// Attach an action to a button click
let formButton4 = $('#button4');
formButton4.on("click", jsonFunction);