Embed Size (px)
Citation preview
CMPT 100 : INTRODUCTION TO COMPUTING
TUTORIAL #7 : JAVASCRIPT AND FORM TUTORIAL - CANDY STORE 2
By Wendy Sharpe1
BEFORE WE GET STARTED . . . Log onto the lab computer (in Windows) Create a folder for this tutorial on H:// drive Log onto Moodle and open tutorial 7 notes
You have two options for the html form: Use the form you created from last week (might have
errors) Click on candystore.html link in the tutorial notes and
save to your newly created folder
Open Notepad++ Start – All Programs – Course Specific
Applications – Notepad+++ DO NOT OPEN THE SAME FILE WITH KOMPOZER
AND NOTEPAD++ AT THE SAME TIME
2
TUTORIAL 7 OVERVIEW Creating/calling functions and creating
variables Using the onClick event handler
Accessing and processing information from a form text fields radio buttons error checking numerical values
Putting information back into a form Printing a receipt with a second function Debugging JavaScript Where you can get help with Assignment 4 or
the additional exercises in Tutorial 7 3
TUTORIAL 7 PUBLIC SERVICE ANNOUNCEMENT this tutorial has the potential to be very “buggy”
if you don’t keep track of variable names function names syntax of built-in functions that you call to get
information from a form id of text fields names of groups of radio buttons step outside the array that stores radio buttons (more
on that later) if you’re killing a loop/if early by terminating it with a
semi colonUse syntax higlighting and your error console as much
as you can.4
CREATING/CALLING FUNCTIONS AND CREATING VARIABLES
5
ADDING THE SCRIPT TAGS
Functions can be defined both in the <head> and in the <body> section
So how do you know where to put the script? to assure that a function is read/loaded by the
browser before it is called, put functions in the <head> section
We’re putting our script in the <head> of the candystore document form
6
CREATING YOUR VARIABLES
The number of variables you want to create depends on how much you want to break down the information for each piece of data I.e., you have information for gummy bears, jelly
beans, packaging, delivery, name, and total cost E.g., gummy bears has a number of gbears selected by
the user, and a price associated with them. You’ll want to create two variables to ‘remember’ this information.
create variables inside of your <script></script> tags but OUTSIDE of your functions. Why? Because global variables can be used by
all functions in your script.7
CREATING YOUR VARIABLES PART DEUX
Don’t forget to initialize your variables . . . especially the ones that are going to hold strings My program’s variables:
var gbears = 0;var gbearsCost = 0;var jbeans = 0;var jbeansCost = 0;var deliverytype = "";var deliverycost = 0;var packagetype = "";var packagecost = 0;var name = "";var totalcost = 0;
8
FUNCTION SYNTAX We’ve used functions before . . . but
someone else has made them for us remember JavaScript’s Math class functions?
Basic function syntax function functionname(var1,var2,...,varX)
{the code you want to execute
} function functionname()
{the code you want to execute
} the difference is in the arguments to the function Go ahead and create your order() function, put
an alert inside the function that says “hello” to prove to yourself that the function does something.
9
CALLING THE ORDER() FUNCTION
We’re using the onclick event to call functions for our form
onclick is an event that occurs when the user clicks a button on your form general syntax
onclick="SomeJavaScriptCode”
Add an onclick event to your “Order Now” button This is what your button looks like in code <input name="submitButton" value="Submit!"
type="button”/> Your onclick event will go at the end of the button code<input name="submitButton" value="Submit!"
type="button” onclick goes here/>
10
WE’VE GOT A FUNCTION . . . NOW WHAT?
A.K.A. ACCESSING INFORMATION IN THE FORM
A. ACCESSING TEXT FIELDSB. RADIO BUTTONS
11
A. ACCESSING TEXT FIELDS
12
ACCESSING GUMMY BEAR DATA : GetElementById() How will you grab the number of gummy bears
entered by the user into your form? using the document.getElementById built-in function the Id part of it refers to the id that you had assigned
to your form text fields last week: <input id="gummyBears" name="gummyBears" value="0"
/> If you have forgotten how to set up this id, go back to last
week’s tutorial (Tutorial 6) For more info on how to use:
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
General syntax: myFormVariable = document.getElementById("id")
13
ACCESSING GUMMY BEAR DATA : getElementById()
getElementById will return a string to your variable so you will have to use parseInt parseInt takes a string argument and returns a
number For more info on parseInt:
http://www.w3schools.com/jsref/jsref_parseint.asp
// get number of gummybearsgbears =
parseInt(document.getElementById("gummyBears").value);
You can check and see if you’ve accessed the information in the correct way by using a debugging statement specific ways of using alerts to track down issues in
your program and verify that you’re doing things correctly.
14
ACCESSING THE JELLY BEAN DATA
access the same way as the gummy bear data
15
ERROR CHECKING FOR NUMERICAL VALUES parseInt will parse whatever you give it
you can check to see if the user enters a non-numerical value by using the isNaN funtion NaN == Not-a-Number
if(!isNaN(gbears)){
//if yes - calculate cost of gummybearsgbearsCost = gbears*10;// alert("Number of gbears: " + gbears);
}else{
//if no - print error messagealert("Error! Please enter a numeric value for Gummybears!");
}16
CUSTOMER NAME
you’re on your own for creating the code to get the customer’s name from the form
17
B. ACCESSING RADIO BUTTONS
18
RADIO BUTTONS
your radio buttons all must have the same name to be a part of the same group I.e., our packaging types have the same name<input checked="checked" name="containerType" value="2"
type="radio" />Gift Bag ($2)<br /><input name="containerType" value="3" type="radio"
/>Decorated Can ($3)<br /><input name="containerType" value="0" type="radio" />Box
(Free!)
JavaScript stores the value of the group of radio buttons in a special type of variable called an array an array holds data of the same type (like a
containerType) we step through arrays with a single for-loop arrays start at 0
19
FOR LOOP TO ACCESS THE DELIVERYfor (var j=0; j<=1; j++)
{
//for each radio button in DeliveryType - see if checked
if(document.getElementsByName('deliveryType')[j].checked)
{
//if yes - get cost of delivery
deliverycost = parseInt(document.getElementsByName('deliveryType')[j].value);
//determine which is checked to get ype
if(i==0)
{
deliverytype = "Canada Post";
}
else
{
deliverytype = "FedEx”;
}
}
}
20
ACCESSING RADIO BUTTON DATA WITH getElementsByName()
grabbing the data for a radio button is slightly different than with the text button
parseInt(document.getElementsByName('deliveryType')[j].value)
radio buttons don’t have an id like a text box, they have a name
so, in order to access them, we need to get the elements of a group of radio buttons by their name
your turn: add a for-loop to access the contents of the container/packaging data 21
PUTTING DATA BACK INTO THE FORM
22
TOTAL COST we need to tell the user the total cost of the
purchase Total cost is a form text field . . . it’s like how we
accessed the jelly bean/gummy bear data but in reverse add up all the cost variables for each item purchased,
put it into your total variable I.e., totalcost = gbearsCost + jbeansCost + packagecost +
deliverycost;
assign the value of the total variable back into the element of the form with the id ‘totalCost’
formdocument.getElementById('totalCost').value = totalcost;
now, display an alert thanking the customer for their purchase and we’re all done with the order() function
23
PRINTING A RECEIPT WITH A SECOND FUNCTION
24
CREATING THE SECOND FUNCTION You a way of telling the program to print a receipt
when a button is clicked<input name="printReceipt" value="Print Receipt!"
type="button" onclick="printrec()"/>
Create a second function AFTER the order() function why? order of your code is important. We’re going to call
the order() function from our receipt printing function if the receipt printing function is put before the
order() function it won’t actually know what the order() function is
computers aren’t smart, they do what you tell them to do . . . in order
25
PRINTREC() FUNCTION
function printrec(){
order();
document.write("<h1>Your Receipt</h1>");
// other stuff goes in here . . . I’ll let you fill it in
document.write("Customer Name: "+ name);
}
26
DEBUGGING JAVASCRIPT27
SCRIPT NOT WORKING? Common places to look for errors
Did you spell variables correctly? Is your code in order? Are you trying to use
variables before they have a value associated with them
American English spelling of words like color Are all semi-colons where they need to be? Use syntax highlighting to find errors Did you concatenate your strings properly?
+ in the right places Proper use of double quotation marks
Using the error console in Firefox to find problems with your script Tools – Error Console
Tip: clear the error console, then force refresh Errors option will give you information about
what line of code has the problem
28
WHERE YOU CAN GET HELP WITH ASSIGNMENT 4 OR THE ADDITIONAL EXERCISES IN TUTORIAL 7
29
GETTING HELP Your instructor (free...well...cost of tuition)
can help clarify assignment guidelines, requirements, marking scheme, and can generally help you debug
Computer Science Help Desk (free) in the little room between the open Mac lab and
the big open dual-boot Spinks lab there’s a lab advisor schedule on the wall if someone is scheduled but not physically
present, write your computer name (located on the label on the box) on the whiteboard
CS Tutors ($$) https://wiki.usask.ca/display/csss/CSSS+Tutor+
List Online
specifically www.w3schools.com http://www.w3schools.com/js/default.asp
30
QUESTIONS?31
