-
Check Browser
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //Checks what browser/version is used and whether essential functions are supported.
4 function checkBrowser()
5 {
6 //If the functions getElementById and getElementsByTagName are supported, the bod element is created and 'true' is returned.
7 if (document.getElementById && document.getElementsByTagName)
8 {
9 bod = document.getElementsByTagName('body')[0];
10 return true;
11 }
12 //If document.layers is supported, then browser is Netscape and the function badBrowser() is called.
13 //If document.all is supported, then browser is IE and if the version is below six, then badBrowser() function is called.
14 else if (document.layers || (document.all && (parseInt(navigator.appVersion, 10)) < 6)) {return badBrowser();}
15
16 //If none of the conditions apply, then the browser doesn't support required functions, badBrowser() function is called.
17 else {return badBrowser();}
18 }
19
20 //When the browser doesn't support modern Javascript, this function is called.
21 function badBrowser()
22 {
23 //Alerts the user that the page is redirecting.
24 alert("This page will not work on your browser. Redirecting to Mozilla site...");
25
26 //Sets the location to the Mozilla website.
27 window.location='http://www.mozilla.com';
28
29 //Always returns false, indicating that this browser will not work.
30 return false;
31 }
-
Initial Script
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //This is the initial script.
4
5 //When the page is done loading the 'constructor' is called.
6 window.onload = script;
7 var bod; //The body tag.
8 var contentArea; //Headers, descriptions, forms, etc - stuff that changes among pages.
9 var selectForm; //A form element for the select boxes.
10 var selectionArray = new Array(); //An array that keeps track of all the objects the user has selected.
11 var arrayCounter = 0; //To keep track of array indexes added to the selectionArray.
12 var opt; //The select box.
13
14 //Initial script that is called when the page is done loading.
15 function script()
16 {
17 //If the browser check function returns 'true', then event handlers are defined for the side links.
18 //Each link has it's own function assigned to it.
19 if(checkBrowser())
20 {
21 //if cookies don't exist, create the blank inital ones (as placeholders).
22 if(!document.cookie) {makeCookieDough();}
23
24 //When the user clicks on the links on the left side, that particular function is called.
25 document.getElementById('select').onclick = selectHobbies;
26 document.getElementById('list').onclick = listHobbies;
27 document.getElementById('feedback').onclick = feedback;
28
29 //What is initally seen in the content area.
30 initContentArea('Hobby Selector', 'This is Project 1 for the course Web Client Side Programming (4002.536.01). The purpose of this project was to dynamically create drop-down boxes. The selection of the first box will determine what shows up in the second box as options, as will determine the choices in the third box. Cookies are used in this project to save selections between browser sections. They are also used to store email addresses. Another use was to use them in a way that would allow the values to stay in the select box when moving to another section or closing the browser, in this way it \"remembers\" the last options you have chosen. ')
31 }
32 }
33
34 //Resets the content area. It is called everytime the user clicks on a different section.
35 function initContentArea(headerText, description)
36 {
37 //Removes everything from the content area (headers, descriptions, etc).
38 if (contentArea)
39 {
40 while (contentArea.hasChildNodes())
41 {
42 contentArea.removeChild(contentArea.childNodes[0]);
43 }
44 }
45 //Reinitializes content area.
46 contentArea = document.getElementById('content');
47
48 //Creates header text and adds it to the content area.
49 var header = document.createElement('h1');
50 header.appendChild(document.createTextNode(headerText));
51 contentArea.appendChild(header);
52
53 //Creates description text.
54 contentArea.appendChild(document.createElement('p').appendChild(document.createTextNode(description)));
55 contentArea.appendChild(document.createElement('br'));
56 }
57
58 //Removes the third drop-down box if it exists
59 function removeThird()
60 {
61 var third = document.getElementById('levelThree');
62 if (third) {selectForm.removeChild(third);}
63 }
64
65 //Removes the second drop-down box if it exists
66 function removeSecond()
67 {
68 var second = document.getElementById('levelTwo');
69 if (second) {selectForm.removeChild(second);}
70 }
-
Create Elements
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //This creates elements that can be reused.
4
5 function createTextField(name, id, size, value)
6 {
7 var theValue = value || '';
8
9 //Creates the text field.
10 var textField = document.createElement('input');
11
12 //Sets the attributes of the textfield.
13 textField.setAttribute('type','text');
14 textField.setAttribute('id',id);
15 textField.setAttribute('value', theValue);
16 textField.setAttribute('name', name);
17 textField.setAttribute('size', size);
18 return textField;
19 }
20
21 function createTextArea(name, id, cols, rows, text)
22 {
23 var theText = text || '';
24 //Creates the text field.
25 var textArea = document.createElement('textarea');
26
27 //Sets the attributes of the textfield.
28 textArea.setAttribute('name', name);
29 textArea.setAttribute('id', id);
30 textArea.setAttribute('cols', cols);
31 textArea.setAttribute('rows', rows);
32 textArea.appendChild(document.createTextNode(theText));
33 return textArea;
34 }
35
36 function createHidden(name, value)
37 {
38 var hidden = document.createElement('input');
39
40 //Sets the attributes of the hidden valuess;
41 hidden.setAttribute('type', 'hidden');
42 hidden.setAttribute('name', name);
43 hidden.setAttribute('value', value);
44 return hidden;
45 }
46
47 function createRadio(name, id, value)
48 {
49 var radio = document.createElement('input');
50
51 //Sets the attributes of the radio button,.
52 radio.setAttribute('type','radio');
53 radio.setAttribute('value', value);
54 radio.setAttribute('name', name);
55 radio.setAttribute('id', id);
56 return radio;
57 }
58
59 function createCheckbox(name, id, value, checked)
60 {
61 var checkbox = document.createElement('input');
62
63 //Sets the attributes of the radio button,.
64 checkbox.setAttribute('type','checkbox');
65 checkbox.setAttribute('value', value);
66 checkbox.setAttribute('name', name);
67 checkbox.setAttribute('id', id);
68 if (checked) {checkbox.setAttribute('checked', checked);}
69 return checkbox;
70 }
71
72 function createLabel(forWhat, labelText)
73 {
74 var label = document.createElement('label');
75 label.setAttribute('for', forWhat);
76 var textNode = document.createTextNode(labelText);
77 label.appendChild(textNode);
78 return label;
79 }
80
81 function createButton(id, value, name, title, type)
82 {
83 var theType = type || 'button';
84 //Creates the button
85 var button = document.createElement('input');
86
87 //Sets the attributes of the button.
88 button.setAttribute('type',theType);
89 button.setAttribute('id',id);
90 button.setAttribute('value', value);
91 button.setAttribute('name', name);
92 button.setAttribute('title', title);
93 return button;
94 }
95
96 function createEle(text, element)
97 {
98 element = element || 'p';
99 var para = document.createElement(element);
100 var textNode = document.createTextNode(text);
101 para.appendChild(textNode);
102 return para;
103 }
104
105 function createSelectEle(id, opts)
106 {
107 //Creates the select box.
108 var selectB = document.createElement('select');
109
110 //Sets the attributes of the select box.
111 selectB.setAttribute('size', '1');
112 selectB.setAttribute('name', id);
113 selectB.setAttribute('id', id);
114
115 for(index in opts)
116 {
117 //Add options to the select box. The values in the select box mirror those in the array.
118 selectB.options[index]= new Option(opts[index]);
119 }
120
121 //Adds the select box to the select form.
122 return selectB;
123 }
124
125 //Changes the color of the specified id.
126 function addHighlight(id)
127 {
128 id.style.backgroundColor='#CFDCE6';
129 id.style.color='#507EA1';
130 }
131
132 //Changes back the color of the specified id.
133 function removeHighlight(id)
134 {
135 id.style.backgroundColor='#507EA1';
136 id.style.color='#CFDCE6';
137 }
138
139 //Calls highlighting functions when a form element is focused or not focused.
140 function highlight(id)
141 {
142 document.getElementById(id).onfocus = function(){addHighlight(this);};
143 document.getElementById(id).onblur = function(){removeHighlight(this);};
144 }
-
Select Section
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //Called when the user clicks on the "Select Hobbies" link.
4 function selectHobbies()
5 {
6 //Calls the function to initialize the content area.
7 initContentArea('Select Hobbies', 'Choose your favorite hobbies by using the drop-down box. Then click \"Add\" to add them to your list.');
8
9 //Adds a line break
10 contentArea.appendChild(document.createElement('br'));
11
12 //Creates a div tag for the form.
13 var formDiv = document.createElement('div');
14
15 //Sets the id of the form div.
16 formDiv.setAttribute('id','formDiv');
17
18 //Creates a form for the select boxes.
19 selectForm = document.createElement('form');
20
21 //Adds the form to the form div.
22 formDiv.appendChild(selectForm);
23
24 //Adds the form div to the content area.
25 contentArea.appendChild(formDiv);
26
27 //Checks to see if there was a cookie set that wasn't blank.
28 if (checkCookie('firstSelection') && checkCookie('secondSelection') && checkCookie('thirdSelection'))
29 {
30 //Gets the cookie value based on the name
31 var one = eatCookie('firstSelection');
32 var two = eatCookie('secondSelection');
33 var three = eatCookie('thirdSelection');
34
35 //Creates the select boxes, passing in the value that was saved in the cookie from last time.
36 createSelectBox('init', 'levelOne', one);
37 createSelectBox(getArrayName(document.getElementById('levelOne')), 'levelTwo', two);
38 createSelectBox(getArrayName(document.getElementById('levelTwo')), 'levelThree', three);
39 createAddButton();
40 }
41
42 //Calls the function to create the first select box.
43 else {createSelect('levelOne');}
44 }
45
46 //Checks to see if the cookie exists and that the value isn't empty
47 function checkCookie(name)
48 {
49 if(eatCookie(name) === null) {return false;}
50 else if(eatCookie(name) === '') {return false;}
51 else {return true;}
52 }
53
54 //Creates the select boxes. The parameter is which select box to create (first, second, or third).
55 function createSelect(level)
56 {
57 //Name of the array that to be used from the data source.
58 var name;
59
60 //ID's of the select boxes and add button, because they are used more than once.
61 var levelOneId = document.getElementById('levelOne');
62 var levelTwoId = document.getElementById('levelTwo');
63 var addId = document.getElementById('Add');
64
65 //If the level is levelOne then the name of the Array is initArr.
66 if (level == 'levelOne') {name = 'init';}
67
68 //If the level is levelTwo or levelThree.
69 else if (level == 'levelTwo' || level == 'levelThree')
70 {
71 //If there is an Add button, make it invisible.
72 if(addId) {addId.style.visibility='hidden';}
73
74 //Calls the function to remove the third select box if it exists.
75 removeThird();
76
77 //The previous level select box.
78 var selParentBox;
79
80 //If the level is levelTwo.
81 if (level == 'levelTwo')
82 {
83 //Calls the function to remove the second select box if it exists.
84 removeSecond();
85
86 //Sets the parent select box to levelOne.
87 selParentBox = levelOneId;
88 }
89 //If the level is levelThree the parent select box is set to levelTwo.
90 else if (level == 'levelThree') {selParentBox = levelTwoId;}
91
92 //Figures out what the name of the array should be based on the selection.
93 name = getArrayName(selParentBox);
94 }
95 //If name isn't blank than create the select box.
96 if (name != '') createSelectBox(name, level, 0);
97 }
98
99 //Figures out what the name of the array in the data source should be.
100 function getArrayName(selParentBox)
101 {
102 //If the parameter ends up being null (IE thing) then this function is stopped (returned back to caller function).
103 if (selParentBox==null){ return '';}
104
105 //If the selected item in the parent select box isn't the first item.
106 if (selParentBox.selectedIndex > 0)
107 {
108 //The name of the array is the selected item of the parent dialog box.
109 var name = selParentBox.value.toLowerCase();
110
111 //Removes spaces from the name.
112 while (name.indexOf(' ')!=-1)
113 {
114 name = name.replace(' ', '');
115 }
116 }
117 return name;
118 }
119
120 function createSelectBox(name, level, selectedItem)
121 {
122 //If name is defined.
123 if (name)
124 {
125 //Creates the select box.
126 opt = document.createElement('select');
127
128 //Sets the attributes of the select box.
129 opt.setAttribute('size', '1');
130 opt.setAttribute('name', level);
131 opt.setAttribute('id', level);
132
133 //Goes through the array in the data source.
134 for(index in eval(name+'Arr'))
135 {
136 //Add options to the select box. The values in the select box mirror those in the array.
137 opt.options[index]= new Option(eval(name+'Arr')[index], eval(name + 'Arr')[index]);
138 }
139
140 //for the stupid IE browsers :(
141 if (opt.attachEvent)
142 {
143 //Calls this function recursively to make more select boxes.
144 if (level == 'levelOne') {opt.attachEvent('onchange', function() {createSelect('levelTwo');});}
145 if (level == 'levelTwo') {opt.attachEvent('onchange', function() {createSelect('levelThree');});}
146
147 //When the third select box is selected an Add button is created.
148 if (level == 'levelThree') {opt.attachEvent('onchange', function() {createAddButton();});}
149 }
150
151 else
152 {
153 //Calls this function recursively to make more select boxes.
154 if (level == 'levelOne') {opt.onchange = function() {createSelect('levelTwo');};}
155 if (level == 'levelTwo') {opt.onchange = function() {createSelect('levelThree');};}
156
157 //When the third select box is selected an Add button is created.
158 if (level == 'levelThree') {opt.onchange = function () {createAddButton();};}
159 }
160
161
162 //Adds the select box to the select form.
163 selectForm.appendChild(opt);
164 }
165
166 //Sets the selected index of the drop-down box to the number sent in as a parameter.
167 opt.selectedIndex = selectedItem;
168
169 //Sets cookies of the selected item in the drop-downs if they exists.
170 if(document.getElementById('levelOne')) {bakeCookie('firstSelection', document.getElementById('levelOne').selectedIndex, (60*60*24));}
171 if(document.getElementById('levelTwo')) {bakeCookie('secondSelection', document.getElementById('levelTwo').selectedIndex, (60*60*24));}
172 if(document.getElementById('levelThree')) {bakeCookie('thirdSelection', document.getElementById('levelThree').selectedIndex, (60*60*24));}
173
174
175 }
176
177 //Called after the user makes the selection in the third select box. It creates/shows an 'Add' button.
178 function createAddButton()
179 {
180 //If there is no 'Add' button and the second and the third select box exists
181 if ((!(document.getElementById('Add'))) && (document.getElementById('levelTwo')) && (document.getElementById('levelThree')))
182 {
183 //Creates the Add button
184 var button = createButton('Add', 'Add', 'Add', 'Add to List');
185
186 //Sets event listener for the add button. When it is clicked the addToArray function is called.
187 button.onclick = addToArray;
188
189 //Adds the button to the content area
190 contentArea.appendChild(button);
191 }
192
193 //If the 'Add' button exists
194 else if(document.getElementById('Add'))
195 {
196 //Makes the 'Add' button visible
197 document.getElementById('Add').style.visibility='visible';
198
199 //Makes the 'Add' button invisible if the third select box's selected option is the first option.
200 if(document.getElementById('levelThree').selectedIndex===0) {document.getElementById('Add').style.visibility='hidden';}
201 }
202 }
203
204 //Adds the selected object to the array to keep track of selected items.
205 function addToArray()
206 {
207 //Current size of the array.
208 arrayCounter = selectionArray.length;
209
210 //Number of elements that have been selected before this function.
211 var oldCount = arrayCounter;
212
213 //Sets the value of the current index in the array to the value of the third dialog box.
214 selectionArray[arrayCounter]=document.getElementById('levelThree').value;
215
216 //Increments the array index.
217 arrayCounter++;
218
219 //Alerts the user if the new value was added to the list.
220 if (arrayCounter > oldCount) {alert(document.getElementById('levelThree').value+' has been added to your list.');}
221 }
-
List Section
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //Called when the user clicks on the "List Hobbies" link.
4 function listHobbies()
5 {
6 //If there are selections in the cookie, they are added to the array.
7 if(eatCookie("selection",0) !== null)
8 {
9 var index = 0;
10 while(eatCookie("selection",index) !== null)
11 {
12 selectionArray[index] = eatCookie("selection",index);
13 index++;
14 }
15 }
16
17 //If there are elements in the array, they are listed.
18 if(selectionArray.length>0)
19 {
20 initContentArea('List Hobbies', 'Here are the hobbies you have added to your list.');
21
22 for (index in selectionArray)
23 {
24 var paragraph = document.createElement("p");
25 paragraph.appendChild(document.createTextNode(selectionArray[index]));
26 createRemoveButton(paragraph);
27 }
28 createListButtons('saveAll', 'Save All', 'Save all Hobbies in a cookie.', 'saveAll');
29 createListButtons('clearAll', 'Clear All', 'Clear all Hobbies from list.', 'clearAll');
30 createListButtons('email', 'Email', 'Email all Hobbies to someone.', 'emailButton');
31 }
32 //If there aren't any selections in the array.
33 else
34 {
35 initContentArea('List Hobbies', 'You have not added any hobbies. Click \"Select Hobbies\" to add hobbies to your list.');
36 }
37 }
38
39 //Creates buttons for the List page. Takes name/id, value, and title as parameters, which are used for the attributes of the button.
40 function createListButtons(name, value, title, id)
41 {
42 //If id is defined then id is set to that value, other wise it is set to name
43 id = id || name;
44
45 //Creates the buttons
46 var listButton = createButton(id, value, name, title);
47
48 //Sets event listener for buttons. When it is clicked the saveToCookie function is called.
49 listButton.onclick = eval(name);
50
51 //Adds the button to the content area
52 contentArea.appendChild(listButton);
53 }
54
55 //Saves all the selection items in the array as cookies.
56 function saveAll()
57 {
58 for (index in selectionArray)
59 {
60 bakeCookie("selection"+index, selectionArray[index] , (60*60*24*182), '/');
61 }
62 alert("Your hobbies have been saved.");
63 }
64
65 //Removes cookies, resets arrays, and physically clears item from screen.
66 function clearAll()
67 {
68 if (confirm("Are you sure you want to remove all items from your list?"))
69 {
70 //delete from cookie
71 for (index in selectionArray)
72 {
73 tossCookie("selection"+index);
74 }
75
76 //Reset array and counter.
77 selectionArray = new Array();
78 arrayCounter = 0;
79
80 //Initialze screen.
81 initContentArea('List Hobbies', 'You have not added any hobbies. Click \"Select Hobbies\" to add hobbies to your list.');
82 }
83 }
84
85 //Called by the listHobbies function to make a remove button after each item in the list. The parameter is which paragraph to add the button to.
86 function createRemoveButton(selParagraph)
87 {
88 //Creates the Remove button
89 var button = createButton('Remove', '', 'Remove', 'Remove from List');
90
91 //Sets event listener for this remove button. When it is clicked the remove function is called.
92 button.onclick = function() {remove(selParagraph);};
93
94 //Adds the button to the paragraph
95 selParagraph.appendChild(button);
96
97 //Adds the paragraph to the content area
98 contentArea.appendChild(selParagraph);
99 }
100
101 //Removes elements from the List. The parameter is which paragraph (item in the list) to remove. This is called when the user clicks the Remove Button.
102 function remove(selParagraph)
103 {
104 //Searches through the array to find the element.
105 for (index in selectionArray)
106 {
107 //If the element in the array is equal to the value of the first child node, remove the element from the array.
108 if(selectionArray[index]==selParagraph.childNodes[0].nodeValue)
109 {
110 selectionArray.pop(index);
111 tossCookie("selection"+index);
112 }
113 }
114 //Physically removes the element from the page.
115 contentArea.removeChild(selParagraph);
116 }
-
Email Section
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //This is used when the user clicks the email button.
4
5 //Checks to see if the user entered a recipeient and then calls the function to check the values;
6 function validateEmailForm(sender, recep)
7 {
8 if (recep === '')
9 {
10 alert("The \"To\" Field Must Be Filled In.");
11 return false;
12 }
13 else
14 {
15 if(recep == 'Email')
16 {
17 alert("No 'From' ");
18 return (validateEmail(recep));
19 }
20 else {return (validateEmail(recep) && validateEmail(sender));}
21 }
22 }
23
24 //Validates email addresses. They must be in the form someone@somedomain.com.
25 function validateEmail(emailAddr)
26 {
27 email = emailAddr || '';
28 //Regular expression of valid email address.
29 var pattern = /[\w]+@{1}[\w]+[.]{1}[\w]{2,5}/;
30
31 //If the email address matches the pattern, then it is valid.
32 if (pattern.test(email)) {return true;}
33 else
34 {
35 alert("\""+emailAddr+"\" is not a valid email address.");
36 return false;
37 }
38 }
39
40 function email()
41 {
42 var emailDiv, emailForm, from, to, sender, recipient, subject, list = '', emailBody;
43
44 initContentArea('Email Hobbies', 'Use this form to email a list of your hobbies to a friend or to yourself');
45
46 //Creates div to hold the form.
47 emailDiv = document.createElement('div');
48 emailDiv.setAttribute('id', 'emailDiv');
49
50 //Creates and sets attributes of the form.
51 emailForm = document.createElement('form');
52 emailForm.setAttribute('action', 'http://www.rit.edu/~amn7940/cgi-bin/FormMail.cgi');
53 emailForm.setAttribute('method', 'post');
54 emailForm.setAttribute('id', 'EmailList');
55
56 //Gets the email addresses from the cookie.
57 var fromEmail = eatCookie('fromEmail');
58 var toEmail = eatCookie('toEmail');
59
60 //If it can't, then they are set to nothing.
61 if(!fromEmail) {fromEmail = '';}
62 if(!toEmail) {toEmail = '';}
63
64 //The from field.
65 from = createEle('From: ', 'p');
66 from.appendChild(createTextField('email', 'email', '25', fromEmail));
67 emailForm.appendChild(from);
68
69 //The to field.
70 to = createEle('To: ', 'p');
71 to.appendChild(createTextField('recipient', 'recipient', '25', toEmail));
72 emailForm.appendChild(to);
73
74 //The subject field
75 subject = createEle('Subject: ', 'p');
76 subject.appendChild(createTextField('subject', 'subject', '20', 'My Hobbies'));
77 emailForm.appendChild(subject);
78
79 //The email body field.
80
81 //Populates the field with all the selections made.
82 for (index in selectionArray)
83 {
84 list+=(selectionArray[index]+'\r');
85 }
86
87 emailBody = createTextArea('emailBody', 'emailBody', '30', '4', list);
88 emailForm.appendChild(emailBody);
89
90 //Hidden field to indicate that recipient(to) must be filled in.
91 emailForm.appendChild(createHidden('required', 'recipient'));
92
93 //Creates 'clear' and 'send email' buttons.
94 emailForm.appendChild(createButton('Clear', 'Clear', 'Clear', 'Clear Email Form', 'reset'));
95 emailForm.appendChild(createButton('SendEmail', 'SendEmail', 'Send Email', 'Email the Form', 'submit'));
96
97 //Adds the form to the div.
98 emailDiv.appendChild(emailForm);
99
100 //Adds the div to the cotent area.
101 contentArea.appendChild(emailDiv);
102
103 sender = document.getElementById('email');
104 recipient = document.getElementById('recipient');
105 emailForm.onsubmit = function()
106 {
107 //If the email addresses are valid, they are saved in a cookie.
108 if (validateEmailForm(sender.value, recipient.value))
109 {
110 bakeCookie("fromEmail", sender.value, (60*60*24*365));
111 bakeCookie("toEmail", recipient.value, (60*60*24*365));
112 return true;
113 }
114 else {return false;}
115 };
116
117 //Highlights/de-highlights fields when they are focused/unfocused.
118 highlight('email');
119 highlight('recipient');
120 highlight('subject');
121 highlight('emailBody');
122 }
-
Feedback Section
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //Called when the user clicks on the "Feedback" link.
4 function feedback()
5 {
6 var feedbackDiv, feedbackForm, name, emailF, difficulty, design, interactivity, findSite, likeSite, notLikeSite, suggestions, otherComments, emailCopy;
7 initContentArea('Feedback', 'Use this form to send feedback or comments to me.');
8
9 //Creates the div to hold the form.
10 feedbackDiv = document.createElement('div');
11 feedbackDiv.setAttribute('id', 'feedbackDiv');
12
13 //Creates and sets attributes of the form.
14 feedbackForm = document.createElement('form');
15 feedbackForm.setAttribute('action', 'http://formmail.dreamhost.com/cgi-bin/formmail.cgi');
16 feedbackForm.setAttribute('method', 'post');
17 feedbackForm.setAttribute('id', 'feedbackForm');
18
19 //Gets the email addresses from the cookie.
20 var fromEmail = eatCookie('fromEmail');
21 if(!fromEmail) {fromEmail = '';}
22
23 //The name field.
24 name = createEle('Name: ', 'p');
25 name.appendChild(createTextField('name', 'name', '25'));
26 feedbackForm.appendChild(name);
27
28 //The email address field.
29 emailF = createEle('Email: ', 'p');
30 emailF.appendChild(createTextField('emailF', 'emailF', '25', fromEmail));
31 feedbackForm.appendChild(emailF);
32
33 //Specific questions.
34 difficulty = createEle('Ease of use?: ', 'p');
35 difficulty.appendChild(createRadio('difficulty', 'difficultyDifficult', 'Difficult'));
36 difficulty.appendChild(createLabel('difficultyDifficult', 'Difficult'));
37 difficulty.appendChild(createRadio('difficulty', 'difficultyNeutral', 'Neutral'));
38 difficulty.appendChild(createLabel('difficultyNeutral', 'Neutral'));
39 difficulty.appendChild(createRadio('difficulty', 'difficultyEasy', 'Easy'));
40 difficulty.appendChild(createLabel('difficultyEasy', 'Easy'));
41 feedbackForm.appendChild(difficulty);
42
43 design = createEle('Design: ', 'p');
44 design.appendChild(createRadio('Design', 'designHorrible', 'Horrible'));
45 design.appendChild(createLabel('designHorrible', 'Horrible'));
46 design.appendChild(createRadio('Design', 'designBad', 'Bad'));
47 design.appendChild(createLabel('designBad', 'Bad'));
48 design.appendChild(createRadio('Design', 'designOkay', 'Okay'));
49 design.appendChild(createLabel('designOkay', 'Okay'));
50 design.appendChild(createRadio('Design', 'designGood', 'Good'));
51 design.appendChild(createLabel('designGood', 'Good'));
52 design.appendChild(createRadio('Design', 'designExcellent', 'Excellent'));
53 design.appendChild(createLabel('designExcellent', 'Excellent'));
54 feedbackForm.appendChild(design);
55
56 interactivity = createEle('Interactivity?: ', 'p');
57 interactivity.appendChild(createRadio('Interactivity', 'interactivityBad', 'Bad'));
58 interactivity.appendChild(createLabel('interactivityBad', 'Bad/Annoying'));
59 interactivity.appendChild(createRadio('Interactivity', 'interactivityNeutral', 'Neutral'));
60 interactivity.appendChild(createLabel('interactivityNeutral', 'Neutral'));
61 interactivity.appendChild(createRadio('Interactivity', 'interactivityGood', 'Good'));
62 interactivity.appendChild(createLabel('interactivityGood', 'Good/Useful'));
63 feedbackForm.appendChild(interactivity);
64
65 findSite = createEle('How did you find this site?', 'p');
66 var selOpt = createSelectEle('findSite', new Array("Link from class page", "Link from Allison\'s site", "From a friend", "Search engine", "Other"));
67 findSite.appendChild(selOpt);
68 feedbackForm.appendChild(findSite);
69
70 likeSite = createEle('What did you like about this site?', 'p');
71 likeSite.appendChild(createTextArea('like', 'like', 30, 4));
72 feedbackForm.appendChild(likeSite);
73
74 notLikeSite = createEle('What did you NOT like about this site?', 'p');
75 notLikeSite.appendChild(createTextArea('didntLike', 'didntLike', 30, 4));
76 feedbackForm.appendChild(notLikeSite);
77
78 suggestions = createEle('Suggestions:', 'p');
79 suggestions.appendChild(createTextArea('suggestions', 'suggestions', 30, 4));
80 feedbackForm.appendChild(suggestions);
81
82 otherComments = createEle('Other Comments:', 'p');
83 otherComments.appendChild(createTextArea('otherComments', 'otherComments', 30, 4));
84 feedbackForm.appendChild(otherComments);
85
86 //A hidden field to specify that feedback should go to me.
87 feedbackForm.appendChild(createHidden('recipient', 'web@anighswander.dreamhosters.com'));
88
89 //Creates 'clear' and 'submit feedback' buttons.
90 feedbackForm.appendChild(createButton('ClearFeedback', 'Clear', 'ClearFeedback', 'Clear Feedback Form', 'reset'));
91 feedbackForm.appendChild(createButton('SendFeedback', 'Submit Feedback', 'SendFeedback', 'Submit Feedback Form', 'submit'));
92
93 //Adds the form to the div.
94 feedbackDiv.appendChild(feedbackForm);
95
96 //Adds the div to the content area.
97 contentArea.appendChild(feedbackDiv);
98
99 //Highlights/de-highlights fields when they are focused/unfocused.
100 highlight('name');
101 highlight('emailF');
102 highlight('findSite');
103 highlight('like');
104 highlight('didntLike');
105 highlight('suggestions');
106 highlight('otherComments');
107 }
-
Data Arrays
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //All the data. It can have as many things in the array as you want and they can be different sizes.
4 var initArr = new Array("What's your favorite past-time?", "Music", "Reading", "Sports", "Video Games");
5 var musicArr = new Array("Do you prefer to play or listen to music?", "Play", "Listen");
6 var playArr = new Array("Which instrument do you play?", "Piano", "Keyboard", "Guitar", "Flute", "Clarinet", "Bass", "Trumpet", "Drums", "Tuba", "Trombone");
7 var listenArr = new Array("What is your favorite genre?", "Alternative", "Blues", "Classical", "Country", "Electronic", "Funk", "Gospel", "Hip-Hop", "Jazz", "Latin", "Opera", "Pop", "Punk", "R&B", "Rap", "Reggae", "Religious", "Rock", "Ska");
8 var readingArr = new Array("Which medium do you prefer?", "Books", "Newspapers", "Magazines");
9 var booksArr = new Array("What's your favorite type of book?", "Biography", "Classic", "Fantasy ","Fiction", "Folkore, Myths, and Legends","Historical Fiction","Humor","Mystery","Non-fiction", "Poetry","Realistic Fiction", "Science Fiction");
10 var newspapersArr = new Array("Do you prefer local, national, or international papers?", "Local", "National", "International");
11 var magazinesArr = new Array("What's your favorite type of magazine?", "Academic", "Architecture", "Art", "Business", "Music", "Car", "Computer", "Children's", "Health and fitness", "History", "Home and furniture", "Humor", "Inspirational", "Men's", "Women's", "Luxury", "Nature", "News", "Online", "Pet", "Pulp", "Politics", "Religion", "Regional", "Satirical", "Sport", "Teen", "Railroad", "Literary", "Science");
12 var sportsArr = new Array("What's your favorite type of sports?", "Track and Field", "Racket", "Water and Snow", "Target", "Team");
13 var trackandfieldArr = new Array("What's your favorite track and field sport?", "Jumping", "Pole vault", "Discus", "Hammer throw", "Javelin", "Shot put", "Walking", "Running");
14 var racketArr = new Array("What's your favorite racket sport?", "Badminton", "Pickelball", "Racketball", "Tennis", "Squash");
15 var waterandsnowArr = new Array("What's your favorite water/snow sport?", "Crew", "Scuba Diving", "Surfing", "Wakeboarding", "Skiing", "Snowboarding", "Sledding");
16 var targetArr = new Array("What's your favorite target sport?", "Archery", "Billiards", "Bowling", "Golf", "Horseshoes", "Laser tag", "Shooting");
17 var teamArr = new Array("What's your favorite team sport?", "Football", "Baseball", "Basketball", "Soccer", "Handball", "Hockey", "Lacrosse", "Softball", "Volleyball");
18 var videogamesArr = new Array("Which type of video game systems do you prefer?", "Sony", "Nintendo", "Other" );
19 var sonyArr = new Array("Which Sony video game system do you prefer?", "Playstation 3", "Playstation Portable", "Playstation 2", "Playstation");
20 var nintendoArr = new Array("Which Nintendo video game system do you prefer?", "Wii", "DS", "GameCube", "Gameboy Advance", "Gameboy", "64", "NES");
21 var otherArr = new Array("Which video game system do you prefer?", "XBox360", "XBox", "Sega Dreamcast", "Sega Saturn", "Atari", "PC");
-
Cookies
0
1 //Allison Nighswander - Project 1 - Web Client Side Programming(4002.536.01) - January 19, 2007
2
3 //This is used to make, read, and 'delete' cookies.
4
5 //All the cookies set by this page.
6 var allCookies = document.cookie;
7
8 //An array to hold all the cookies.
9 var cookieTray = new Array(0);
10
11 //Creates cookies which have empty values. Used for initialization purposes.
12 function makeCookieDough()
13 {
14 bakeCookie("firstSelection", "", (60*60*24));
15 bakeCookie("secondSelection", "", (60*60*24));
16 bakeCookie("thirdSelection", "", (60*60*24));
17 bakeCookie("fromEmail", "", (60*60*24*365));
18 bakeCookie("toEmail", "", (60*60*24*365));
19 }
20
21 //Creates a cookie.
22 function bakeCookie(name, value, age, path)
23 {
24 if (!path) {path = '/';}
25 document.cookie = name+"="+encodeURIComponent(value)+"; max-age="+age+"; path="+path+"";
26 }
27
28 //Reads the cookies. The parameters are the name of the cookie. An optional parameter is for the list of items.
29 function eatCookie(whatFlavor, listIndex)
30 {
31 //If the cookie exists.
32 if (allCookies)
33 {
34
35 //Separates the cookie into pieces.
36 cookieTray = allCookies.split(';');
37
38 //Index of the array.
39 var index;
40
41 //What the name of the cookie. (Basically this variable just adds the equal sign).
42 var nameCookie = whatFlavor+'=';
43
44 //Specifies the index in the array.
45 if (whatFlavor == 'firstSelection') {index = 0;}
46 else if (whatFlavor == 'secondSelection') {index = 1;}
47 else if (whatFlavor == 'thirdSelection') {index = 2;}
48 else if (whatFlavor == 'fromEmail') {index = 3;}
49 else if (whatFlavor == 'toEmail') {index = 4;}
50
51 //The optional parameter is added to five to increment indexes for having multiple selections.
52 else {index = (5 + listIndex);}
53
54 //If there is is a name/value at the specific index.
55 if(cookieTray[index])
56 {
57 //Start of the value of the cookie.
58 var startIndex = (cookieTray[index].indexOf('='))+1;
59
60 //End of the value of the cookie.
61 var endIndex = cookieTray[index].length+1;
62
63 //The name of the cookie.
64 var name = decodeURIComponent(cookieTray[index].substring(0, startIndex-1));
65 if ("firstSelection" != name && "secondSelection" != name && "thirdSelection" != name && "fromEmail" != name && "toEmail" != name)
66 {
67 return null;
68 }
69
70 //The value of the cookie.
71 var value = decodeURIComponent(cookieTray[index].substring(startIndex, endIndex));
72 return value;
73 }
74 else {return null;}
75 }
76 else {return null;}
77 }
78
79 //'Deletes the cookie', by setting the maximum age to minus one seconds.
80 function tossCookie(name, path)
81 {
82 //Calls the function to create a cookie (to write over the one that's there with the same name.).
83 bakeCookie(name, '', -1, path);
84 }
