Last week we covered the basics of HTML, CSS and JavaScript. We learned about
alert, prompt, document.write(), getElementById, innerHTML,
appending versus overwriting, events calling functions, function with parameters,
text input, linking to jQuery library. Much of this material is in the first part
of Chapter 2 of JavaScript and jQuery -- the missing manual (MacFarland).
Recall the author has a number of tutorials to help with any of these concepts
you need some extra help with.
Materials:
Comparison.htm A comparison of
"handling" a button's click event in older JavaScript versus the jQuery
approach, also contains a comparison of retrieving information from the page
and displaying information on the page in the old style and in jQuery
RestaurantCalc.htm has a text
input, a select (drop-down list) and a button. Allows user to enter amount of
a bill and a tip percentage and calculates the total.
RestaurantCalc2.htm Revision
to above that format the output using toFixed, and add other event handling functions --
it clears the answer if the user changes the amount of the bill or changes the
tip percentage.
RestaurantCalc3.htm Revision
to above that adds an if-else structure and uses the isNaN() method to determine if
the user has entered a number for the bill amount. If the user entered something
other than a number, then it alerts him/her to the problem and also uses the focus method
to place the cursor in the text input. Otherwise (when the user entered a valid number)
the calculation is performed and result displayed.
LoggingIn.htm Page that has user log on.
It uses a compound Boolean condition. It uses jQuery's attr method to change the HTML
property (in particular it disables a button). It uses jQuery's css method to change a
style attribute (in particular it switches a display from none to inline and vice versa).
As a class:
Write a page that has the user enter a three digit number like 124. (We need to make sure
they did as asked.) Have a button that concatenates the number with itself 124 becomes 124124.
Have a button that divides the previous result by 13 -- 124124/13 beomces 9548. Have a button that
divides the previous result by 11 -- 9548/11 becomes 868. Have a button that divides the previous
result by 7 -- 868/7 becomes 124 (the original number). The user should not be able to click any
button prematurely.
Individually:
Write a page that prompts a user to enter the number of credits he or she has
earned so far. The program should determine and display his or her class:
freshman 1-23 credits, sophomore 24-53 credits, junior 54-83 credits or senior 84
credits and up.
