A little more JavaScript??

Building a caculator We'll need to learn about the following: – Form buttons. – Applying CSS rules by attribute values. – The onkeypress attribute. – The String.fromCharcode() method. – The Number class. – Javascript keywords: switch, case, and break

body!

input { padding: 0; margin: 0; }.calculator { width: 400px; height: 500px; background-color: gray; border: 4px solid black; } #calculator_screen { width: 398px; height: 100px; font-size: 96px; font-family: Arial; text-align: right; } input[type="button"] { width: 100px; height: 99px; float: left; font-size: 80px; font-family: Arial; }

The action attribute specifies where to send the form-data when a form is submitted. In HTML5, the action attribute is no longer required… Basically, by using “#” – when form is submitted we keep the same thing in focus (the calculator!)…

Input Buttons You can create buttons with elements, by setting type="button". The text of the button is set with the value attribute. These buttons do not actually do anything – Their primary purpose is to trigger Javascript with the onclick attribute.

Attribute selectors You can create CSS rules which apply to tags with specific attribute/value pairs by using the square brackets ([]). A input[type="button"] selector chooses all the buttons on a page, which is exactly what we need for our calculator.

onkeypress attribute The onkeypress attribute – triggers whenever the user pushes a key. an event is generated with the specifics of the keypress. In most browsers, event.which contains which key was pressed. – IE uses which.keyCode instead. The event gives you the ASCII code. – some keys do not have associated characters. If the code executed by onkeypress returns false, the keystroke will be discarded. Otherwise it will be processed by the browser normally.

body!

body!

what do they look like? var total = 0; var last_operator = null; function add_digit(digit) { document.calculator.display.value += digit; } function queue_operator(operator) { do_operation(last_operator); document.calculator.display.value = ''; last_operator = operator; }

One thing to notice… One thing to note is that when we get an operator (like +), we can't process it until we get the next operator. Or an equals, or a C! It’s not a perfect calculator!

function clear_button() { document.calculator.display.value = ''; total = 0; last_operator = null; } function equals_button() { do_operation(last_operator); document.calculator.display.value = total; total = 0; last_operator = null; }

function do_operation(operator) { switch(operator) { case '+': total += new Number(document.calculator.display.value); break; case '-': total -= new Number(document.calculator.display.value); break; case '*': total *= new Number(document.calculator.display.value); break; case '/': total /= new Number(document.calculator.display.value); break; case null: total = new Number(document.calculator.display.value); }

function handle_key(e) { var k = String.fromCharCode(e.which); switch(k) { case '0': add_digit('0'); break; case '1': add_digit('1'); break; … case '9': add_digit('9'); break; … case '*': queue_operator('*'); break; case '/': queue_operator('/'); break; case '=': case '\r': equals_button(); break; default: return true; } return false; }

Getting the character! The helper methods in the String class are pretty fun! Specifically, fromCharCode takes the ASCII values and turns them into a string!

in order to apply an operation… We need numbers! Can you see where this is happening?? You can see more about them here… – _number.asp

Just when you thought you had it! Often, we want to perform assignment operations like the following: x = x + y; There is a shorthand for such operations: x += y; Similarly, we have -=, *=, and /= for subtraction, multiplication, and division. x += 1; can be shortened even further to x++;. Similarly for x -= 1; and x--;

switch The switch keyword is used when you want to branch on many possible values for a variable. For each value you want to check, you need a case. The break keyword halts execution of the current statement block, jumping to the first statement after the block. If none of the specific cases match the variable, then the switch jumps to default if it exists.

Switch, case, break