COMP5347: Web Application
Development
JavaScript W3 Tutorials Notes
Dr. Basem Suleiman
School of Computer Science
Week 3 Tutorial Exercise – Solution Review
window.onload = function(){
var mainForm = document.getElementById("mainForm");
//all inputs with the class required are looped through
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
requiredInputs[i].onfocus = function(){
this.style.fontWeight = "bold"
this.style.backgroundColor = "green";
}
requiredInputs[i].onblur = function(){
this.style.fontWeight = "normal";
this.style.backgroundColor = "#FFFFFF";
}
}
//on submitting the form, "empty" checks are performed on required inputs.
mainForm.onsubmit = function(e){
//var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
if( isBlank(requiredInputs[i]) ){
e.preventDefault();
makeRed(requiredInputs[i]);
}
else{
makeClean(requiredInputs[i]);
} } } }
Sample solution on Canvas (modules > week 3)
Week 3 Tutorial Exercise (cont’d)
function isBlank(inputField){
if(inputField.type=="checkbox"){
if(inputField.checked)
return false;
return true;
}
if (inputField.value==""){
return true;
}
return false;
}
//function to highlight an error through colour by adding css attributes to the div passed in
function makeRed(inputDiv){
inputDiv.style.backgroundColor="red"
inputDiv.parentNode.style.backgroundColor="red";
}
//remove all error styles from the div passed in
function makeClean(inputDiv){
inputDiv.style.backgroundColor="white"
inputDiv.parentNode.style.backgroundColor="#FFFFFF";
COMP5347 Web Application Development
JavaScript Variable Scope – Review
• Two ways to pass arguments to functions (or methods)
• Pass-by-value
• A copy of the argument’s value is made and is passed to the called function
• Numbers, Boolean values and strings are passed to functions by value
• Pass-by-reference
• The caller gives the called function direct access to the caller’s data and allows it to modify
the data if it so chooses
• Can improve performance, but it can weaken security. Why?
• All objects are passed to functions by reference
COMP5347 Web Application Development
Variables and Closure
window.onload = function(){
var mainForm = document.getElementById("mainForm");
//all inputs with the class required are looped through
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
requiredInputs[i].onfocus = function(){
this.style.fontWeight = "bold"
this.style.backgroundColor = "green";
}
requiredInputs[i].onblur = function(){
this.style.fontWeight = "normal";
this.style.backgroundColor = "#FFFFFF";
}
}
//on submitting the form, "empty" checks are performed on required inputs.
mainForm.onsubmit = function(e){
for (var i=0; i < requiredInputs.length; i++){
if( isBlank(requiredInputs[i]) ){
A closure is a function having access to
e.preventDefault();
makeRed(requiredInputs[i]); the parent scope, even after the
} parent function has closed.
else{
makeClean(requiredInputs[i]);
}
} } }
COMP5347 Web Application Development
Variables and Closure
COMP5347 Web Application Development
