Scribd
Upload
41 views

COMP5347 - W3 - Tutorial - JavaScript Notes-Review

This document contains notes from JavaScript tutorials for a web application development course. It discusses using JavaScript to validate required form fields on submission, including looping through required inputs and checking for empty values. It also covers JavaScript concepts like variable scope, passing arguments by value vs reference, and closures. Closures allow a function to access variables from the parent scope even after the parent function has closed.

Uploaded by

Destrious
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

COMP5347 - W3 - Tutorial - JavaScript Notes-Review

This document contains notes from JavaScript tutorials for a web application development course. It discusses using JavaScript to validate required form fields on submission, including looping through required inputs and checking for empty values. It also covers JavaScript concepts like variable scope, passing arguments by value vs reference, and closures. Closures allow a function to access variables from the parent scope even after the parent function has closed.

Uploaded by

Destrious
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like