About the Author
Dr. Joe Burns is a professor of communications and the sole creator of the popular HTML Goodies Web site. He has been creating Web sites since the first version of Mosaic was released. Joe gets constant questions and feedback from his audience (over 150 e-mails a day!), and has used these insights to create better and better Web tutorials. Through HTML Goodies, he has taught hundreds of thousands of people how to build Web sites. His first book, HTML Goodies, has been very well received.
Read an Excerpt
Chapter 6: Mathematics, Random Things, and Loops
Lesson 30: Math Operators
var result = 10 * 2 + 1 3 - 7 alert ("the answer to 10 * 2 + 1 / 3 - 7 is " result + ".") var numsums = 10 + 2 alert("10 + 2 is + numsums) var x = 10 alert("ten is " + x) var y = x * 2 alert("10 * 2 = " + y) var z = "Hello " + "Good Bye" alert(z) </SCRIPT>
The script's effect appears in Figure 6.1.
To see the effect on your own computer click on Lesson 3 0 Script's Effect in your download packet or see it online at http://www.htmlgoodies.com/JSBook/lesson30example.html.
The Arithmetic Operators
That's a fancy way to refer to the addition (+), subtraction (-), multiplication (*), and division (/) symbols.
Percent (%) is also a binary operator. Its technical name is a modulus operator. However, it doesn't create percentages. You actually have to create the percentages by hand, dividing one number into the other. The percent sign only returns any number left over, a remainder, in a division equation.
For example, the code 10 % 2 would return 0 because 2 divides into 10 evenly. But 10 % 3 would return the number 1. That's what's left over.
Deconstructing the Super Math Script
Well, maybe it's not super, but it makes its point.
Each two-line piece of code sets up a mathematical equation or number usage and then uses an alert method to display the answers. Here's the quick rundown:
We tried to create an equation that would use all the traditional binary operators. This is what came out. The answer is 13.333333333.
10*2+1 (that equals 21) / 3-7 (that equals -4)
10*2 (equals 20) + 1/3 (a third) -7 = 13.333333
So how do you get around the computer bulling through? Parentheses, my friend. Remember that from high school algebra? In math, the stuff in the parentheses is evaluated first. Same here. If I wanted to turn this into a division problem with an equation on either side of the slash, it would look like this:
var result = (10 * 2 + 1) / (3 - 7)
var numsums = 10 + 2 alert("10 + 2 is " + numsums)
The script sets a numsums variable. Can you see that it's equal to 12 (10+2)? The script transfers that variable to an alert box and displays that 10 + 2 = the variable, or 12.
var x = 10 alert("ten is " + x)
Another variable, x, is set to equal 10. The alert box then displays that value.
var y = x * 2 alert("10 X 2 = " + y)
Another variable, y, is set to equal the x variable multiplied by 2. That should be 20, right? It is. The answer is displayed in the alert method.
var z = "Hello " + "Good Bye" alert(z)
Finally, the variable z is created, showing you can connect text using the computation symbols. That variable is then displayed using the alert boxes. That will become very important later on.
The nice thing about the binary operator (+) is that it fulfils two duties. If it is placed between two numbers, it adds them. If it is placed between two strings, it puts them together into a single string, a process known as concatenation.
In Terms of Numbers and Binary Operators
Never put quotation marks around numbers. If you do put quotation marks around a number, it becomes a string. That's bad. For example, if you run the equation "3"+4, you will get 34 because the quotation marks made the "3" a string, and the plus sign simply put the two items together rather than adding them. If you want 7 to be the result, don't use any quotation marks so the plus sign sees both the 3 and the 4 as numbers.
Write a script in which a prompt is used to ask the user for a number between 2 and 10. Then have that number's square display on the page.
You do know what a square is, right? The number times itself.
You can see a possible answer to this assignment on your own computer by clicking on Lesson 30 Assignment in your download packet or see it online at http://www.htm1goodies.com/JSBook/assignment30html....
Table of Contents
An Introduction by Joe Burns.
Why Now? My Co-Author. How You Will Learn. The Format of the Lessons. Examples and Assignments.
1. The Basics.
2. Popping Up Text with Mouse Events.
Lesson 11: Prompts and Variables. Lesson 12: Dates and Times. Lesson 13: Hierarchy of Objects. Lesson 14: Creating a Function. Lesson 15: An Introduction to Arrays. Lesson 16: The Third End of Chapter Review—A BODY Flag Script.
4. Flipping Images and Opening Windows with Mouse Events.
Lesson 17: An Image Flip Using onMouseOver and Pre-Loading Images. Lesson 18: An Image Flip with a Function. Lesson 19: Opening New Windows. Lesson 20: Opening a Window with a Function. Lesson 21: The Confirm Method, with an Introduction to If and Else. Lesson 22: The Fourth End of Chapter Review Some Jumping Jacks.
5. Forms: A Great Way to Interact with Your Users.
Lesson 23: What Is Written in the Text Box? Lesson 24: Passing Information to the Function. Lesson 25: Calling Functions with Forms. Lesson 26: Form Fields and the Value Property. Lesson 27: Pull-Down Menu of Links. Lesson 28: A Guestbook with All the Bells and Whistles. Lesson 29: The Fifth End of Chapter Review—Posting Link Descriptions While Users Pass Over.
6. Mathematics, Random Things, and Loops.
Lesson 30: Math Operators. Lesson 31: Mathematics and Forms. Lesson 32: Creating Random Numbers with a Date. Lesson 33: Creating Random Numbers Through Mathematics. Lesson 34: Producing Random Statements and Images. Lesson 35: Introduction to for Loops. Lesson 36: Introduction to while Loops. Lesson 37: End of Chapter Review—A Browser Detect Script.
7. Clocks, Counts, and Scrolling Text.
Lesson 38: A Running Clock. Lesson 39: A Fancy Digital Clock. Lesson 40: Image Driven Clock. Lesson 41: Countdown to Date. Lesson 42: Scrolling Text. Lesson 43: End of Chapter Review—Count to an Event.
Lesson 44: Two Different Array Formats. Lesson 45: Combining User Input with Arrays. Lesson 46: Random Quotes. Lesson 47: A Guessing Game Using Arrays. Lesson 48: A Password Script. Lesson 49: End of Chapter Review—A Quiz.
9. Putting It All Together.
Literals. Boolean Literals. Comments. Document Object Model. Event Handlers. Literal Integers. Methods. Objects. Operators. Properties. String. Variable.
action Property. alert Method. alinkColor Property. appCodeName Property. appName Property. appVersion Property. array Method. back Method. bgColor Property. big Method. blink Method. bold Method. close Method. confirm Method. Date Object. defaultStatus Property of window. document Object. document Property. eval Method. fgColor Property. fixed Method. fontcolor Method. fontsize Method. for Loop. forward Method. frames Property. function Object. getDate Method. getDay Method. getFullYear Method. getHours Method. getMinutes Method. getMonth Method. getSeconds Method. getTimezoneOffset Method. getYear Method. go Method. history Object. host Property. hostname Property. href Property of location. if / else. indexOf Method. italics Method. lastModified Property. length Property. linkColor Property. location Object. location Property. Math Object. navigator Object. onBlur Event Handler. onChange Event Handler. onClick Event Handler. onDblClick Event Handler. onFocus Event Handler. onKeyDown Event Handler. onKeyUp Event Handler. onLoad Event Handler. onMouseDown Event Handler. onMouseMove Event Handler. onMouseOut Event Handler. onMouseOver Event Handler. onMouseUp Event Handler. onSelect Event Handler. onSubmit Event Handler. onUnload Event Handler. open Method. parent Property of frame and window. pathname Property. port Property. prompt Method. <F102MO>protocol Property. referrer Property. self Property. selectedIndex Property. setDate Method. setHours Method. setMinutes Method. setMonth Method. setSeconds Method. setTime Method. setTimeout Method. setYear Method. small Method. status Property. strike Method. sub Method. substring Method. sup Method. title Property. toLowerCase Method. <F102MO>toUpperCase Method. userAgent Property. <F102MO>value Property. <F102MO>var Variable. vlinkColor Property. while Loop. window Object. write Method. writeln Method.
Appendix D. Scripts Available on htmlgoodies.com.
Alert Scripts. Buttons, Links, and Email Scripts. The Three C's: Clocks, Calendars, and Calculator Scripts. Color Scripts. Game Scripts. HTML and Developer Scripts. Image Scripts. Scrolling Scripts. Text-Based Scripts. Miscellaneous Scripts.
Most Helpful Customer Reviews
Total junk. Worst programming book I've ever bought. Period. Code doesn't work half the time, poorly written, hokey presentation . . . PLEASE avoid this book!