Lab 4

JavaScript Basics II

Dynamic Event-driven Webpage

---

Lab Setup

Download the following files to your lab4 folder. Remember to Right-click the links and select Save Link As..

---

1. Better Way to Create Forms [40 points]

In this part, we will create the following form using very flexible JavaScript functions:

solution.html

1. Open inputs.html in Notepad++
2. Notice we are trying to append three children to newForm, but newForm has not been defined
3. Define a variable called newForm, use the document.querySelector() method to select the form element in the body of the web page, and set newForm to point to that element
4. Open functions.js in Notepad++
5. Notice there are two functions for making text nodes and labels, but there are no functions for making inputs and selects
6. Use the makeLabel function as a model and define a function called makeInput that takes the following arguments/parameters defined in order: type, id, value and label
7. The makeInput function should do the following:
   • Create a new input element
   • Set the type attribute to the passed type parameter
   • If the id is not defined and not blank, set the id and name attribute to this value
   • Note that === and !== are strict comparison operators where the objects being compared must have the same value and type. You should use the strict operators when checking to see if a variable in undefined.
   • If the value is not undefined and not blank, set the value attribute to this value
   • If the label is not undefined and not blank, do the following:
     • Use the makeLabel function to create a new label
     • Create a new div element
     • Append the new label and new input to the new div
     • Return the new div
   • If the labelis undefined or blank, return the new input element
8. Consider that this function has the ability to create all the different types of input elements, including text, password, date, email and even submit and reset buttons. It only sets the id, name and value attributes if they are passed as parameters and not blank. If a label is passed, it creates a new label and nests the label and input element in a surrounding div element.
9. Use the makeInput function as a model and define a function called makeSelect that takes the following arguments/parameters defined in order: id, values and label
10. The makeSelect function should do the following:
    • Create a new select element
    • If the id is not undefined and not blank, set the id and name attribute to this value
    • Use a for loop to iterate over the values array. For each value in the array do the following:
      • Create a new option element
      • Set attribute value of the option element
      • Instead of using the innerHTML field, use the makeTextNode function to create a text node with the array value and then append it to the option element you just created
      • Append the new option element to the select element
    • If the label is not undefined and not blank, do the following:
      • Use the makeLabel function to create a new label
      • Create a new div element
      • Append the new label and new select to the new div
      • Return the new div
    • if the labelis undefined or blank, return the new select element
11. Consider that select elements often have a list of numeric options, e.g., age or years of experience. We should avoid "hard coding" these kinds of arrays. Instead, write a function called makeArray the returns an array of strings for a numeric range from start to end. For example, the function call makeArray(2,5) would return ["2", "3", "4", "5"].
    Hints:
    • Inside your makeArray function, create an empty array like this: var myArray = [];
    • Then, write a for loop that goes from x = start to end inclusive
    • Inside your loop, you can convert the loop counter x to a string like this: var myString = x.toString()
    • Finally, add the string to the array like this: myArray.push(myString);
12. Open inputs.html in Notepad++ and add the function calls to create all the form elements in the solution. You should add the following:
    • A password input with id and name equal to "passwd" and the label "Password: "
    • An email input with id and name equal to "email" and the label "Email: "
    • A date input with id and name equal to "birth" and the label "Date of Birth: "
    • A select element with id and name equal to "exp" and the label "Years of Experience" where the values range from 0 to 50
    • At the end of your loop be sure to return the array, i.e., return myArray;

TASK CHECK

---

2. Better Way to Validate Forms [30 points]

Assume all the input elements inside of div tags are required and cannot be blank. Rather than write redundant code to check each element, we can do it with minimal coding.

• In inputs.html add an event listener to the form so that a function called checkInputs is executed when the "submit" event is fired.
• In functions.js write the checkInputs function to do the following:
  1. Use document.querySelectorAll to get all the input elements that are inside of div elements. This function returns an array of elements called a nodeList. Assign the returned array to a variable called inputsArray
  2. Write a for loop to iterate over the length of the inputsArray
  3. Inside the loop, check to see if the value of each element is blank, i.e., inputsArray[i].value == ""
  4. If the element's value is blank, add the attribute class = "error" to the element's parentNode. Note that this would be the div surrounding the element. Also, be sure to call event.preventDefault() so the form is not submitted. Remember to pass event into the function as a parameter. The event is a global variable the stores the event that was just fired.
  5. Note that we have defined a CSS selector in styles.css that decorates div.error with red text and a red border.
  6. If the element's value is not blank, remove the attribut class = "error" by calling setAttribute("class", "") on the element's parentNode
  7. Note that it is superior to give the element a class name to apply the error styling rather than use JavaScript to do it directly. This allows a designer to change the style of an error without touching any JavaScript code. This embodies what we call separation of style. Typically, we separate the style from the HTML structure. But, in this case we are separating the style from the JavaScript behavior.

3. Custom Validation & More Events

In this part, you will implement validation that displays an error message and disables the "Insert" button. See the solution to understand how the form will function.

solution.html

A. Valid Username [5 points]

Make sure the username is not "admin" or "root"

In inputs.html add the following code:

document.querySelector("#username").addEventListener("change", function(event) {
  if (this.value == "root" || this.value == "admin") {
    this.parentNode.setAttribute("class", "error")
    document.querySelector("#error_message").innerHTML = "Invalid username";
    document.querySelector("#insert_button").disabled = true;
    event.preventDefault();
  }
  else {
    this.parentNode.setAttribute("class", "")
    document.querySelector("#error_message").innerHTML = "";					
    document.querySelector("#insert_button").disabled = false;
  }
});

Test the code above to make sure it works and then read the following:

Key Concepts

• This validation is so specific there is no need to create a function. Instead, we can use the anonymous function to implement functionality without defining a function.
• The word this refers to the selected object or the object being "acted on"
• Using this allows us to change the object inside the anonymous functions without having to select it again or use a variable.

B. Valid Password [10 points]

Using part A as a model, make sure the password is 10 or more characters long.

C. Valid Age & Experience [15 points]

Using part A as a model, make sure the selected "Age" - "Years of Experience" is greater than 18.