Question

In: Computer Science

The assignment for this week builds on what we covered in Chapter 3 using functions, as...

The assignment for this week builds on what we covered in Chapter 3 using functions, as well as introduces Conditional Statements. I have created your HTML file for you, along with some starter JavaScript to get you started. The HTML contains 3 text boxes and a button, and you'll recognize it as a simple registration form. Typically when you complete a form online, the data is sent to a server to be processed. If we are must send data across the Internet, it makes sense to make sure its the proper data before sending it. This helps to minimize traffic that doesn't match what we expect to get in our submission, and JavaScript is perfect for performing this validation.

For this assignment you will need to create 2 functions. One function should check that the email isn't empty, and the other should make sure that the password and confirm password match, as well as are not empty. You will be using If, Else, and Else If to accomplish this. Since we haven't covered manipulating the document in depth with JavaScript, I have already created variables and assigned the values from the text boxes to them. To further extend our understanding of functions, these functions will require arguments to be included so that you can pass the values of the text fields into the functions, as well as return a value.

Notice that there is a variable called outputMessage. Anything that you assign to this variable will be output to the screen. For the return value of your functions, I leave that to your artistic creativity. You may choose to return true/false boolean values and then do another if/else statement to assign the appropriate text to the output message, or you may choose to return the string you wish to display directly.

Hint 1: To verify that your variables are not blank, you can either check that the value isn't an empty string, or that the length is greater than 0. See examples below:

if(myVar.length > 0)

if(myVar != "")

Hint 2: If you choose to return a boolean value you have a couple different options for the comparison. You may choose to use if/else to check the value ,or instead of using if/else you can also use the switch statement. Further, if you choose If/Else you can shorthand the statement for a function that returns a boolean. If/Else statements evaluate to either true or false. See the examples below for further explanation:

var myText = 'this is my text';

if(myText.length > 0){

//do something

}

In the above statement, the length of myText is obviously greater than 0, so the statement evaluates as true, otherwise it would be false. Since we know we only need an expression in our if statement that evaluates to true or false, we can shorthand any function that returns a true or false value.

Assuming my function is called myFunction and returns a true or false value the 2 statements below are identical:

if(myFunction() == true) or if(myFunction())

Since myFunction will return a true or false value, then we can leave off the == true or ==false. We are essentially saying if(true) or if(false).

If we want to check for a false return value instead of true, then we can use the ! (not) operator. It would look like this:

if(myFunction() == false) or if(!myFunction())

If you choose to use a switch statement, it would look something like this:

switch(myFunction()){

case true:

//do something
break;

case false:

//do something else
break;

}

<!DOCTYPE html>
<html>

<head>
<title>Week 4 Programming Assignment</title>
</head>

<body>
<p>Registration Form</p>
<label for="txtEmail">Email Address:</label>
<br/>
<input type="text" id="txtEmail" placeholder="Email Address">
<br/>
<br/>
<label for="txtPassword">Password:</label>
<br/>
<input type="text" id="txtPassword" placeholder="Password">
<br/>
<br/>
<label for="txtConfirmPassword">Confirm Password:</label>
<br/>
<input type="text" id="txtConfirmPassword" placeholder="Confirm Password">
<br/>
<br/>
<button id="btnRegister">Register</button>
<br/>
<br/>
<br/>
<div id="outputMessage">

</div>


<script>
function validateInput(){
var email = document.getElementById('txtEmail').value;
var password = document.getElementById('txtPassword').value;
var confirm = document.getElementById('txtConfirmPassword').value;
var outputMessage = '';

//Your function calls should go here.

var outputElement = document.getElementById('outputMessage');
outputElement.innerHTML = outputMessage;
}

//Validate Email Address is not Empty Function

//Validate Password and Confirm Password are not empty, and match each other


  
  
/*************************************************************************
* The Function Below is to assign event handlers to the
* button on the page. You will not need to make any changes
* to this function
* *********************************************************************/
function init() {
var btnRegister = document.getElementById('btnRegister');
btnRegister.onclick = validateInput;
}

window.onload = init;
</script>

</body>

</html>

Solutions

Expert Solution

<!DOCTYPE html>
<html>

<head>
<title>Week 4 Programming Assignment</title>
</head>

<body>
<p>Registration Form</p>
<label for="txtEmail">Email Address:</label>
<br/>
<input type="text" id="txtEmail" placeholder="Email Address">
<br/>
<br/>
<label for="txtPassword">Password:</label>
<br/>
<input type="text" id="txtPassword" placeholder="Password">
<br/>
<br/>
<label for="txtConfirmPassword">Confirm Password:</label>
<br/>
<input type="text" id="txtConfirmPassword" placeholder="Confirm Password">
<br/>
<br/>
<button id="btnRegister">Register</button>
<br/>
<br/>
<br/>
<div id="outputMessage">

</div>


<script>
function validateInput(){
var email = document.getElementById('txtEmail').value;
var password = document.getElementById('txtPassword').value;
var confirm = document.getElementById('txtConfirmPassword').value;
var outputMessage = '';

//Your function calls should go here.
if(emailValidation(email)==true){
   if(passValidation(password,confirm)==true){
       outputMessage = "Successfully Registered"
   }
   else{
       outputMessage = "Password and Confirm Password does not match"
   }
}
else{
   outputMessage = "Invalid Email"
}

var outputElement = document.getElementById('outputMessage');
outputElement.innerHTML = outputMessage;      

}

//Validate Email Address is not Empty Function
function emailValidation(s){
   if(s!="")
       return true
   return false
}

function passValidation(x,y){
   if(x=="" || y=="")
       return false
   if(x==y)
       return true
   return false
}

//Validate Password and Confirm Password are not empty, and match each other


  
  
/*************************************************************************
* The Function Below is to assign event handlers to the
* button on the page. You will not need to make any changes
* to this function
* *********************************************************************/
function init() {
var btnRegister = document.getElementById('btnRegister');
btnRegister.onclick = validateInput;
}

window.onload = init;
</script>

</body>

</html>

venereology answered 2 weeks ago
Next > < Previous

Related Solutions

This week we covered the details of Cellular Respiration. Your assignment this week is in two...
This week we covered the details of Cellular Respiration. Your assignment this week is in two parts. Using Excel (or some other Table creating program) create a table that describes the four sub-steps of cellular respiration. Insert the table into a Word document and provide a discussion of how each sub part contributes to overall process of cellular respiration.
Java Programming Assignment 6-1 We have covered the “Methods” this week. Apply the concepts that we...
Java Programming Assignment 6-1 We have covered the “Methods” this week. Apply the concepts that we have learnt in class and come up with a “problem scenario” for which you can create a “solution”. Utilize any/all of the examples from the book and class that we discussed. You program should be interactive and you should give a detailed statement about what the “description of the program – purpose and how to use it”. You should also use a “good bye”...
3. Draw and label the bond market graph covered in chapter 5. Then, using the graph,...
3. Draw and label the bond market graph covered in chapter 5. Then, using the graph, illustrate how the equilibrium price, yield to maturity, and quantity changes as a result of: A) an increase in expected inflation. Explain the movement from one equilibrium to another. B) A decrease in the riskiness of bonds. Explain the movement from one equilibrium to another. C) an increase in the government budget deficit. Explain the movement from one equilibrium to another.
This week we covered conjunctions (and) and disjunctions (or) and their role in communication and argumentation....
This week we covered conjunctions (and) and disjunctions (or) and their role in communication and argumentation. In your initial post, address the following: State why it is important to understand the difference between these two connectives. Explain the difference between the conjunction and the disjunction. Include in your explanation the specific truth conditions for each connective. Discuss how communication can be improved by understanding the differences between the conjunction and disjunction. In order to engage in an active discussion environment,...
COP 2800, Java Programming Assignment 6-1 Using Java create a program using the “Methods” we covered...
COP 2800, Java Programming Assignment 6-1 Using Java create a program using the “Methods” we covered this week. come up with a “problem scenario” for which you can create a “solution”. Utilize any/all of the examples from the book and class that we discussed. Your program should be interactive and you should give a detailed statement about what the “description of the program – purpose and how to use it”. You should also use a “good bye” message. Remember to...
Reflect back upon the Wellness Dimensions covered in Chapter 1 and in the Lifestyle Assignment. a....
Reflect back upon the Wellness Dimensions covered in Chapter 1 and in the Lifestyle Assignment. a. Select one dimension and discuss how that particular dimension impacts your food and nutrition choices. (3 pts) b. Reflecting on all of your responses above, how might your current food and nutrition choices be impacting your current and future health outcomes? (3 pts) c. What changes might you make in the future regarding your food and nutrition choices? (2 pts)
This week, we covered the Executing Process Group, and the tasks associated with this function of...
This week, we covered the Executing Process Group, and the tasks associated with this function of Project Management. Reflect back on the lecture discussion to answer the following prompt: Directing/managing the tasks associated with a project is an integral function of a Project Manager. Consider a project you have been a part of, whether personal or professional, and in your own words: Compare and contrast the experience you had to the strategies that you learned about this week. In your...
please reflect upon all the medications we covered this week and how they relate to the...
please reflect upon all the medications we covered this week and how they relate to the urinary and reproductive systems. In your own words, please answer the following questions. What are some common medications to help with urinary tract infections? Are there also natural methods that are as effective? What about an expecting mother with high blood pressure? Why is this important to understand?
please reflect upon all the medications we covered this week and how they relate to the...
please reflect upon all the medications we covered this week and how they relate to the gastrointestinal and psychiatric systems. In your own words, please answer the following questions. What are some examples of medications that people with Alzheimer’s use to help their symptoms? What is the cause of Alzheimer’s? Why is it important to have a working understanding of these medications?
This week, we covered the income statement and the statement of cash flows. If you could...
This week, we covered the income statement and the statement of cash flows. If you could only pick one to review before investing in a company, which one would you select, and why?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT