Project 4 - WEB 124

  1. Read Chapter 4 Decisions & Loops
  2. Key the code exercises throughout Chapter 4.
  3. Watch applicable youtubes.
  4. Complete the following exercises by building a single semantic, validated, spell-checked web page with both the questions and the answers. Apply a linked, validated, flexible, and visually pleasing style sheet. Post your files to the student web server and put the corresponding URL in the Project 4 drop box.
  5. Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

As always, spell check all content and identify your name and the current date in all files using comments. In html files you may use the html meta tag, e.g. <meta name="author" content="John Doe">.

Chapter Debrief

Comparison Operators: Complete the following table

Operators Meaning Example and Return Value Explanation of Example
==
===
!=
!==
>
>=
<
<=
&&
||
!

Syntax Review: Complete the following table

Some characters have multiple uses. Identify each and provide an example.

Characters »» (parentheses) {curly braces} [square brackets] + symbol
usage 1 [square brackets have only one usage, to identify an array index]
usage 1 example someArrayName[0]
usage 2 [square brackets have only one usage, to identify an array index]
usage 2 example someArrayName[0]

Write some JavaScript!

  1. At the end of your web page, add a paragraph element titled "Testing truthy and falsy"
  2. Create two input elements labeled Number Value 1 and String Value 2
  3. Give them the HTML attributes of id="value1" and id="value2".
  4. Both input elements should have type="number"
  5. Create a button element with the text "Not Strict" with id="testNotStrictButton"
  6. Create a button element with the text "Strict" with id="testStrictButton"
  7. Create a paragraph element with id="result"
  8. Include an embedded script at the bottom of the HTML page (use an embedded script for this exercise vs. an external script just for convenience sake). The script should do the following two functions, the first using an if-then construct and the second using a switch construct...

    Function #1: testNotStrict

    1. create a function named testNotStrict
    2. within testNotStrict declare two variables to get the values of the two input boxes. (Hint: Use the value property to grab the value from an HTML input element.)
      NOTE: from a JavaScript perspective, it doesn't matter what type an input element has been declared in the HTML. The type attribute value changes the presentation of the input box to the user to limit the input to a number, date, valid email, so forth on the web page, but that's where the impact of the type attribute stops. Regardless of the input's type, the actual data in the input box is always passed to JavaScript as textual (string) data.
      This means that in order for JavaScript to evaluate the number in id="value1" as a number, it will need to be converted to a number in JavaScript. Use the parseInt() function to convert the value of id="value1" to a number in JavaScript.
    3. console.log the values of your two variables
    4. within testNotStrict compare the values from the two input boxes (now captured in your variables) using an if else construct and an equality == comparison that is not strict.
    5. display "This string and number are EQUAL" or "This string and number are NOT EQUAL" in the paragraph with id="result" based on the comparison of the two values
    6. run testNotStrict from an event listener attached to the click event of the id="testNotStrictButton" button.

    Function #2: testStrict

    1. copy testNotStrict and paste it as a new function named testStrict
    2. delete the if else structure and code the same functionality back into the testStrict function using a switch construct with cases for true, false, and default. This time, test for strict equality === comparison and run case: true or case: false based on that strict comparison.
    3. run testStrict from an event listener attached to the click event of id="testStrictButton"
    4. test and debug
    5. use an embedded style sheet to style with CSS as desired, using responsive principles and best practices

An image of a potential solution is shown below. Note the console.log values that are logging out the value of each input element when the Not Strict and Strict buttons are clicked.

exercise 4 solution