JavaScript- with, this

1. JavaScript- with, this

2. In the previous exercise function mult() { first=parseFloat(document.simpleForm.num1.value); second=parseFloat(document.simpleForm.num2.value); document.simpleForm.result.value=first + second; } We can simplify by using the with command/instruction function mult() { with (document.simpleForm) { first=parseFloat(num1.value); second=parseFloat(num2.value); result.value=first + second; } } Short cut using with

3. The input type is radio or checkbox If you “select” or “check” the options, the value is set to true to check if something is selected in javascript if (document.simpleForm.visa.value==true) { …. } or Simply if (document.simpleForm.visa.value) { …. } <form name=simpleForm> VISA <input type= "radio" name= "visa"> MASTERCARD <input type= "radio" name= "mc"> DISCOVER <input type= "radio" name= "discover"> <br> <input type= "button" value= "Enter Choice : " onclick="selectPayment()"> </form> Check Box, Radio Button

4. Concept of this • Suppose you have 10 buttons, and when you click each of the button, it performs a simple function. • It will be inefficient in code-writing to write one function for each button to handle the event i.e. the onclick eg: • Onclick=“displayText1”. You would have to do 10 of these and each one will handle their respectively displayText1 … to displayText2. • One alternative is to write ONE code, but we need to be able to identify which button is being clicked. • Using the concept of this will help you achieve what you want.

5. <SCRIPT LANGUAGE=JavaScript> function markBox1() { document.simpleForm.b1.value=" CHECK "; } function markBox2() { document.simpleForm.b2.value=" CHECK "; } function markBox3() { document.simpleForm.b3.value=" CHECK "; } </SCRIPT> <form name=simpleForm> <INPUT TYPE="button" name="b1" VALUE="" onclick="markBox1()"> <INPUT TYPE="button" name="b2" VALUE="" onclick="markBox2()"> <INPUT TYPE="button" name="b3" VALUE="" onclick="markBox3()"> </form> Multiple buttons using similar function

6. <SCRIPT LANGUAGE=JavaScript> var cell; // you need this dummy variable here to avoid error for the //markBox function function markBox(cell) { cell.value="CHECK"; } </SCRIPT> <form name=simpleForm> <INPUT TYPE="button" name="b1" VALUE="" onclick="markBox(this)"> <INPUT TYPE="button" name="b2" VALUE="" onclick="markBox(this)"> <INPUT TYPE="button" name="b3" VALUE="" onclick="markBox(this)"> </form> Alternative code using this

7. Exercise jex8.html • Create a web page of 5 buttons • When you click on the button, the button will show the text POP or TART alternatively • If you click on a button that that is already POP or TART, it will alert you a message and try again • Create one reset button to “clean” up the buttons.

8. Steps to conquer this exercise • Create the buttons first using style sheets • Write a function that just display “POP” when you click on it. Do not worry about alternate POPs and TARTs. For the event handler function, make sure you use the word “this”. See example • Use a global variable that switches to “POP” and “TART” after you successfully display the text. Note that if you press an occupied cell, you should not change POP to TART or vice versa • Next check that you cannot Pop a Tart cell neither can you Tart a Pop cell not can you Pop an already Pop cell nor can you Tart an already Tart cell. • Once you done with these, then worry about the reset button.

9. Changing default input button • You can use CSS to change how a button look for example: input.myButton { background-color: navy; color: gold; font-size: 0.5in; font-family: "Courier New", "Courier"; font-weight: bold; width: 0.5in; height: 0.5in; } This is the alternative font