String String How to define a string? How to define a string? delimited a variable with double or single quotes to delimited a variable with double or single quotes to define it as a define it as a string variable. string variable. Example: Example: var var str1 = str1 = “ “my first my first javascript javascript project project” ”; ; var var str2 = str2 = ‘ ‘was develop in 1999 was develop in 1999’ ’; ; var var str3 = str3 = “ “a string with a string with ‘ ‘quotes quotes’” ’”; ; How to combine or concatenate a string? How to combine or concatenate a string? put a plus sign between values you want to combine or put a plus sign between values you want to combine or concatenate. concatenate. Example: Example: document.write(str1+str2+str3); document.write(str1+str2+str3); document.write( document.write(“ “my my first first javascript javascript project project ” ”+ str2); + str2); 

How to extract a part of a string definition? How to extract a part of a string definition? Ans. By using the substring() function. Ans. By using the substring() function. syntax syntax variable.substring(start variable.substring(start point, end point)); point, end point)); Example: Example: var var quote2 = quote2 = “ “Every dogma must have its day. Every dogma must have its day. “ “ + + “ “- - H.G. Wells H.G. Wells” ”; ; document.write(quote2.substring(6,11)); document.write(quote2.substring(6,11)); How to change your character to Uppercase or lowercase? How to change your character to Uppercase or lowercase? Ans. By using Ans. By using toUpperCase toUpperCase() function for Uppercase character () function for Uppercase character result, and using result, and using toLowerCase toLowerCase() function for Lowercase character () function for Lowercase character result. result. String Manipulation 

Example: Example: toUpperCase toUpperCase() () var var collector = collector = “ “jet jet eloriaga eloriaga” ”; ; document.write document.write ( (“ “Collection of Collection of “ “+ +collector.toUpperCase collector.toUpperCase); ); Example: Example: toLowerCase toLowerCase() () var var collector = collector = “ “JET ELORIAGA JET ELORIAGA” ”; ; document.write document.write ( (“ “Collection of Collection of “ “+ +collector.toLowerCase collector.toLowerCase); ); How to compare equality of string variables. How to compare equality of string variables. Ans. By using the == operator. Ans. By using the == operator. var var str1 = str1 = “ “I am a string I am a string” ”; ; var var str2 = str2 = “ “I am a string I am a string” ”; ; if (str1 == str2) if (str1 == str2) { { document.write( document.write(“ “We We have the same value have the same value” ”); ); } } 

How to test a string is part of another string? How to test a string is part of another string? Ans. By using the Ans. By using the indexOf indexOf() function () function var var str1 = str1 = “ “a needle in a haystack a needle in a haystack” ”; ; var var str2 = str2 = “ “needle needle” ”; ; if (str1.indexOf(str2) > 0) if (str1.indexOf(str2) > 0) { { document.write( document.write(“ “Yes Yes I am part of another string I am part of another string” ”); ); } } else else { { document.write( document.write(“ “No No I am part of another string I am part of another string” ”); ); } } 

How to convert a string into a number. How to convert a string into a number. Ans. By using the Ans. By using the parseInt parseInt() or () or parseFloat parseFloat() function. () function. Example: Example: parseInt parseInt() () var var str1 = str1 = “ “123 123” ”; ; var var num = parseInt(str1); num = parseInt(str1); document.write(num document.write(num + num); + num); Example: Example: parseFloat parseFloat() () var var str2 str2 “ “123.45 123.45” ”; ; var var num = parsefloat(str2); num = parsefloat(str2); document.write(num document.write(num + num); + num); String Conversion 

How to test if a value is not Numeric? How to test if a value is not Numeric? Ans. By using the Ans. By using the isNan isNan() function. () function. Example: Example: var var num = prompt( num = prompt( “ “Enter a number Enter a number… ….. ..” ”); ); if ( if ( isNan(num isNan(num)) )) { { document.write( document.write(“ “value value entered not numeric entered not numeric” ”); ); } } How to round off number? How to round off number? Ans. Use the round() function. Ans. Use the round() function. Example: Example: document.write(Math.round(12.56)); //prints 13 document.write(Math.round(12.56)); //prints 13 document.write(Math.round(54.32)); //prints 54 document.write(Math.round(54.32)); //prints 54 Numeric Manipulation 

How to format a numeric value. How to format a numeric value. Ans. By using the Ans. By using the toFixed toFixed() function which determines the () function which determines the number of decimal places to print. number of decimal places to print. By using the By using the toPrecision toPrecision() function which determines the () function which determines the total number of digits. total number of digits. Example Example toFixed toFixed(): (): var var num = 123.4567 num = 123.4567 document.write(num.toFixed(2)); //prints 123.45 document.write(num.toFixed(2)); //prints 123.45 Example Example toPrecision toPrecision(): (): var var num = 123.4567 num = 123.4567 document.write(num.toPrecision(4)); //prints 123. document.write(num.toPrecision(4)); //prints 123.5 5 How to generate pseudo random number. How to generate pseudo random number. Ans. By using random() method of the Math Object. Ans. By using random() method of the Math Object. Example: Example: var var num = num =Math.random Math.random(); (); Numeric Manipulation 

A Date variable represents a valid date value. A Date variable represents a valid date value. How to create a current date variable. How to create a current date variable. Ans. By using the Date() function. Ans. By using the Date() function. Example: Example: var var today = new Date(); today = new Date(); How to define a Date variable for some arbitrary date value. How to define a Date variable for some arbitrary date value. Example Example var var myDate myDate = new Date(1999, 1, 25); //Feb 25, 1999; Jan is 0 = new Date(1999, 1, 25); //Feb 25, 1999; Jan is 0 Date 

How to reference a FORM using code How to reference a FORM using code Ans. Use one of the following notations listed below. Ans. Use one of the following notations listed below. document.forms[ document.forms[“ “myform myform]; ]; document.myform document.myform; ; document.getElementById( document.getElementById(“ “myform myform” ”); ); NOTE: Make sure you assign a name and id attribute set for NOTE: Make sure you assign a name and id attribute set for the the form. form. /> HTML Forms 

How to put the cursor focus to a certain control? How to put the cursor focus to a certain control? Ans. By using the focus() method to put the cursor focus to a Ans. By using the focus() method to put the cursor focus to a specific specific control control Example: Example: > How to select the text inside a field? How to select the text inside a field? Ans. By using the select() method is how you can access the te Ans. By using the select() method is how you can access the text inside a field. xt inside a field. Example: Example: document.myform1.txt1.focus(); document.myform1.txt1.focus(); document.myform1.txt1.select(); document.myform1.txt1.select(); How to disable a control. How to disable a control. document.myform.txt1. document.myform.txt1.disabled=true disabled=true; ; HTML Forms 

So, what are event handlers? Very powerful and useful! They are So, what are event handlers? Very powerful and useful! They are JavaScript code JavaScript code that are not added inside the tags, but rather, inside that are not added inside the <script> tags, but rather, inside the html tags, the html tags, that that execute JavaScript when something happens, such as pressing a bu execute JavaScript when something happens, such as pressing a button, moving tton, moving your mouse over a link, submitting a form your mouse over a link, submitting a form etc.The etc.The basic syntax of these event basic syntax of these event handlers is: handlers is: name_of_handler name_of_handler="JavaScript code here" ="JavaScript code here" For example: For example: <a <a href href="http:// ="http://google.com google.com" " onClick onClick=" ="alert('hello alert('hello!') !')"> ">Google Google</a> </a> As you can, this is certainly unlike a regular JavaScript As you can, this is certainly unlike a regular JavaScript code in that here we're code in that here we're inserting it directly inside a HTML tag, via the inserting it directly inside a HTML tag, via the onClick onClick event handler. When the event handler. When the above link is clicked, the user will first see an alert message above link is clicked, the user will first see an alert message before being taken to before being taken to Google Google. Different event handlers with . Different event handlers with with with different HTML tags. For example, while different HTML tags. For example, while " "onclick onclick" can be inserted into most HTML tags to respond to that tag's " can be inserted into most HTML tags to respond to that tag's onclick onclick action, action, something like " something like "onload onload" (see below) only works inside the <body> and < " (see below) only works inside the <body> and <img img> tags. > tags. Understanding "event handlers" in JavaScript 

Event Handlers Event Handlers Use this to invoke JavaScript right after someone leaves this pa Use this to invoke JavaScript right after someone leaves this page. ge. onunload onunload: : Use this to invoke JavaScript if the mouse goes pass some link Use this to invoke JavaScript if the mouse goes pass some link onmouseout onmouseout: : Use this to invoke JavaScript if the mouse passes by some link Use this to invoke JavaScript if the mouse passes by some link onmouseover onmouseover: : Use this to invoke JavaScript after the page or an image has fin Use this to invoke JavaScript after the page or an image has finished ished loading. loading. onload onload: : Use this to invoke JavaScript upon clicking (a link, or form box Use this to invoke JavaScript upon clicking (a link, or form boxes) es) onclick onclick: : 

Ok, lets see how the Ok, lets see how the onclick onclick event event- -handler can help us. Remember, any event handlers handler can help us. Remember, any event handlers are added are added inside html tags inside html tags, not inside . , not inside . First of all, does that mean we can add event handlers ins First of all, does that mean we can add event handlers inside any html tag? ide any html tag? Noooo Noooo! In ! In the case of the" the case of the" onClick onClick" event handler, which executes a " event handler, which executes a peice peice of JavaScript when an of JavaScript when an element is clicked on, it can only be added to visible elements element is clicked on, it can only be added to visible elements on the page such as , on the page such as , form buttons, check boxes, a DIV etc. You wouldn't expect to be form buttons, check boxes, a DIV etc. You wouldn't expect to be able to add this event able to add this event handler inside the tag for example, and you can't. With t handler inside the tag for example, and you can't. With that understanding, lets hat understanding, lets see an example: see an example: <script> function inform(){ function inform(){ alert("You alert("You have activated me by clicking the grey button! Note that the have activated me by clicking the grey button! Note that the event event handler is added within the event that it handles, in this case, handler is added within the event that it handles, in this case, the form button the form button event tag") event tag") } } > onClick Event handler 

The The onload onload event handler is used to call the execution of JavaScript event handler is used to call the execution of JavaScript sfter sfter a page, frame or a page, frame or image has completely loaded. It is added like this. image has completely loaded. It is added like this. //Execution of code //will begin after the page has ="inform()"> //Execution of code //will begin after the page has loaded. loaded. //Execution of code //will begin after the current ="inform()"> //Execution of code //will begin after the current frame has frame has loaded. loaded. < //Execution of code will begin after the image ="inform()"> //Execution of code will begin after the image //has loaded. //has loaded. Lets see an example of an Lets see an example of an onload onload handler: handler: Body <title>Body onload onload example example Welcome to my page "> Welcome to my page onLoad Event handlers 

Next up, the Next up, the onMouseover onMouseover and and onMouseout onMouseout event handlers. Just like the event handlers. Just like the " "onClick onClick" event, these events can be added to visible elements such as a " event, these events can be added to visible elements such as a link link (), DIV, even inside the tag, and are triggered when t (), DIV, even inside the tag, and are triggered when the mouse he mouse moves over and out of the element (big moves over and out of the element (big surpise surpise). Lets create a once very ). Lets create a once very popular effect popular effect- - display a status bar message when the mouse moves over a display a status bar message when the mouse moves over a link: link: Output: Output: Dynamic Drive Dynamic Drive Dynamic Drive ="status=' '">Dynamic Drive onMouseover, onMouseout 

Several new concepts arise here, so I'll go over each one of the Several new concepts arise here, so I'll go over each one of them. m. the "status" refers to the "status" refers to window.status window.status, which is how you write to the status bar. , which is how you write to the status bar. Note that instead of calling a function, we called directly two Note that instead of calling a function, we called directly two JavaScript statements JavaScript statements inside the event handler :"status='Do not click here, its inside the event handler :"status='Do not click here, its empty!';return empty!';return true" This is ok, true" This is ok, but you must separate multiple statements with a semicolon (;). but you must separate multiple statements with a semicolon (;). You could have, You could have, alternatively, written everything up until "return true" as a fu alternatively, written everything up until "return true" as a function and then calling it: nction and then calling it: function function writestatus writestatus(){ (){ status="Do not click here, its empty!" status="Do not click here, its empty!" } } and then: and then: onmouseover onmouseover=" ="writestatus();return writestatus();return true" true" So you're thinking, "what is return true?" Good question. You ne So you're thinking, "what is return true?" Good question. You need to add this line of ed to add this line of code to set the status property with the code to set the status property with the mouseover mouseover effect. Uh? I know, don't worry so effect. Uh? I know, don't worry so much now, it really isn't important. Just remember you need this much now, it really isn't important. Just remember you need this to "activate" the to "activate" the status status onmouseover onmouseover effect. effect. onmouseout onmouseout="status=' '" clears the status after the mouse leaves the link. ="status=' '" clears the status after the mouse leaves the link. Whenever Whenever the mouse moves away from the link, the status bar is "reset" ag the mouse moves away from the link, the status bar is "reset" again. If you don't insert ain. If you don't insert this code, the status bar will still have those words you entere this code, the status bar will still have those words you entered into it even after taking d into it even after taking away the cursor. away the cursor. Whenever we have nested quotations, the inner ones are always si Whenever we have nested quotations, the inner ones are always singled. ngled. Ie Ie: : onclick onclick=" ="alert('hello alert('hello')" ')" onMouseover, onMouseout 

onunload onunload executes JavaScript executes JavaScript immediately after immediately after someone leaves the page. A someone leaves the page. A common use (though not that great) is to thank someone as that p common use (though not that great) is to thank someone as that person leaves erson leaves your page for coming and visiting. your page for coming and visiting. soon, ok?')"> onUnload event handler 

The click event occurs when an object in a form that has the The click event occurs when an object in a form that has the capability to be capability to be clicked, such as a button form element or a submit form element, clicked, such as a button form element or a submit form element, is clicked is clicked by the user. The by the user. The onClick onClick event handler can then call a function or execute event handler can then call a function or execute JavaScript code in place. For example, the following statement JavaScript code in place. For example, the following statement > will cause an alert window to open whenever the user clicks o will cause an alert window to open whenever the user clicks on the button. In n the button. In addition, a custom function could be called instead, for example addition, a custom function could be called instead, for example > This would call the function This would call the function confirmClick confirmClick when the user clicked on the when the user clicked on the button. Of course, the function would need to exist in the curre button. Of course, the function would need to exist in the current document nt document for this to work. for this to work. The onClick Event Handler 

The submit event occurs when a user submits a form. The The submit event occurs when a user submits a form. The onSubmit onSubmit event event handler can then call a function or execute JavaScript code in p handler can then call a function or execute JavaScript code in place. For lace. For example, the following statement example, the following statement > calls the function calls the function confirmSubmission confirmSubmission when the user selects the submit when the user selects the submit button for this form. This enables you to preprocess any informa button for this form. This enables you to preprocess any information and tion and check the values of any fields prior to calling the URL stated i check the values of any fields prior to calling the URL stated in the action n the action attribute, in this case, attribute, in this case, doit.cgi doit.cgi. . Your function or statement in an Your function or statement in an onSubmit onSubmit event handler must return true to event handler must return true to allow the form to be submitted; return false to prevent the form allow the form to be submitted; return false to prevent the form from being from being submitted. submitted. The onSubmit Event Handler 

The change event occurs when a select, text, or The change event occurs when a select, text, or textarea textarea field loses focus field loses focus and its value has been modified. The and its value has been modified. The onChange onChange event handler can then call event handler can then call a function or execute JavaScript code in place. For example, the a function or execute JavaScript code in place. For example, the following following statement statement > calls the function calls the function checkPhone checkPhone when the user loses focus on the text input when the user loses focus on the text input field by moving to another field. This enables you to preprocess field by moving to another field. This enables you to preprocess the the information instantly and check the value of the field prior to information instantly and check the value of the field prior to form form submission. submission. Notice how we passed Notice how we passed this.form this.form to the function. As you will see in the next to the function. As you will see in the next chapter, this allows your function to access the form values dir chapter, this allows your function to access the form values directly. ectly. The onChange Event Handler 

transitional.dtd"> ="http://www.w3.org/1999/xhtml"> 8" /> <title> Shopping Shopping <SCRIPT LANGUAGE="JAVASCRIPT"> function function isShoes isShoes() () { { if(document.form1.shoeid.checked == true) if(document.form1.shoeid.checked == true) { { document.form1.shoetxt.value = "500.00"; document.form1.shoetxt.value = "500.00"; document.form1.amounttxt.value = parseInt(document.form1.amountt document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value)+500; xt.value)+500; } } if(document.form1.shoeid.checked == false) if(document.form1.shoeid.checked == false) { { document.form1.shoetxt.value = "0.00"; document.form1.shoetxt.value = "0.00"; document.form1.amounttxt.value = parseInt(document.form1.amountt document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value) xt.value)- -500; 500; } } } } Shopping Module 

function function isPants isPants() () { { if(document.form1.pantsid.checked == true) if(document.form1.pantsid.checked == true) { { document.form1.pantstxt.value = "1000.00"; document.form1.pantstxt.value = "1000.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value)+1000; parseInt(document.form1.amounttxt.value)+1000; } } if(document.form1.pantsid.checked == false) if(document.form1.pantsid.checked == false) { { document.form1.pantstxt.value = "0.00"; document.form1.pantstxt.value = "0.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value) parseInt(document.form1.amounttxt.value)- -1000; 1000; } } } } 

function function isShirts isShirts() () { { if(document.form1.shirtsid.checked == true) if(document.form1.shirtsid.checked == true) { { document.form1.shirttxt.value = "1500.00"; document.form1.shirttxt.value = "1500.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value)+1500; parseInt(document.form1.amounttxt.value)+1500; } } if(document.form1.shirtsid.checked == false) if(document.form1.shirtsid.checked == false) { { document.form1.shirttxt.value = "0.00"; document.form1.shirttxt.value = "0.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value) parseInt(document.form1.amounttxt.value)- -1500; 1500; } } } } 

function function isBags isBags() () { { if(document.form1.bagsid.checked == true) if(document.form1.bagsid.checked == true) { { document.form1.bagtxt.value = "2000.00"; document.form1.bagtxt.value = "2000.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value)+2000; parseInt(document.form1.amounttxt.value)+2000; } } if(document.form1.bagsid.checked == false) if(document.form1.bagsid.checked == false) { { document.form1.bagtxt.value = "0.00"; document.form1.bagtxt.value = "0.00"; document.form1.amounttxt.value = document.form1.amounttxt.value = parseInt(document.form1.amounttxt.value) parseInt(document.form1.amounttxt.value)- -2000; 2000; } } } } 

function function isCheckout isCheckout() () { { var var xVar xVar = 0; = 0; var var xVar2 = 0; xVar2 = 0; var var xVar3 = 0; xVar3 = 0; xVar xVar = parseInt(document.form1.tenderedtxt.value); = parseInt(document.form1.tenderedtxt.value); xVar2 = parseInt(document.form1.amounttxt.value); xVar2 = parseInt(document.form1.amounttxt.value); xVar3 = xVar3 = xVar xVar - - xVar2; xVar2; xVoucher xVoucher = document.form1.vouchertxt.value; = document.form1.vouchertxt.value; xCustomer xCustomer = document.form1.customertxt.value; = document.form1.customertxt.value; xAddress xAddress = document.form1.addresstxt.value = document.form1.addresstxt.value if(xVoucher if(xVoucher == null || == null || xVoucher.length xVoucher.length == 0) == 0) { { alert("Enter alert("Enter Voucher Number"); Voucher Number"); document.form1.vouchertxt.focus(); document.form1.vouchertxt.focus(); document.form1.vouchertxt.select(); document.form1.vouchertxt.select(); exit; exit; } } 

if ( if (isNaN(xVoucher isNaN(xVoucher)) )) { { alert("Voucher alert("Voucher Number must be numeric"); Number must be numeric"); document.form1.vouchertxt.focus(); document.form1.vouchertxt.focus(); document.form1.vouchertxt.select(); document.form1.vouchertxt.select(); exit; exit; } } if(xCustomer if(xCustomer == null || == null || xCustomer.length xCustomer.length == 0) == 0) { { alert("Enter alert("Enter Customer Name"); Customer Name"); document.form1.customertxt.focus(); document.form1.customertxt.focus(); document.form1.customertxt.select(); document.form1.customertxt.select(); exit; exit; } } if(xAddress if(xAddress == null || == null || xAddress.length xAddress.length == 0) == 0) { { alert("Enter alert("Enter Customer Address"); Customer Address"); document.form1.addresstxt.focus(); document.form1.addresstxt.focus(); document.form1.addresstxt.select(); document.form1.addresstxt.select(); exit; exit; } } 

if(xVar2 == 0) if(xVar2 == 0) { { alert("No alert("No product selected to purchase"); product selected to purchase"); exit; exit; } } if ( if (isNaN(xVar isNaN(xVar)) )) { { alert("Amount alert("Amount Tendered must be Numeric"); Tendered must be Numeric"); document.form1.tenderedtxt.value = "0.00"; document.form1.tenderedtxt.value = "0.00"; document.form1.tenderedtx.focus(); document.form1.tenderedtx.focus(); document.form1.tenderedtx.select(); document.form1.tenderedtx.select(); exit; exit; } } if(xVar if(xVar == 0) == 0) { { alert("Please alert("Please enter amount tendered"); enter amount tendered"); exit; exit; } } 

if(xVar if(xVar < xVar2) < xVar2) { { alert("Amount alert("Amount tendered less than purchase amount"); tendered less than purchase amount"); document.form1.tenderedtxt.value = "0.00"; document.form1.tenderedtxt.value = "0.00"; exit; exit; } } document.form1.changetxt.value = xVar3; document.form1.changetxt.value = xVar3; } } 

function function isPurchase isPurchase() () { { var var txt1val = txt1val = document.getElementById("vouchertxt").value document.getElementById("vouchertxt").value; ; var var txt2val = txt2val = document.getElementById("customertxt").value document.getElementById("customertxt").value; ; var var txt3val = txt3val = document.getElementById("addresstxt").value document.getElementById("addresstxt").value; ; var var txt4val = txt4val = document.getElementById("amounttxt").value document.getElementById("amounttxt").value; ; var var txt5val = txt5val = document.getElementById("tenderedtxt").value document.getElementById("tenderedtxt").value; ; var var txt6val = txt6val = document.getElementById("changetxt").value document.getElementById("changetxt").value; ; document.write document.write("

("

eShopping eShopping Voucher Information

") Voucher Information") document.write document.write("") " >") document.write document.write("< ("") >") document.write document.write("< ("") >") document.write document.write("< ("") >") document.write document.write("< ("") >") document.write document.write("< ("") >") document.write document.write("< ("") >") "+"Voucher No. "+""+txt1val >"+"Voucher No. "+""+txt1val +""+"Customer Name: "+""+txt2val >"+"Customer Name: "+""+txt2val +""+"Customer Address: "+""+txt3val >"+"Customer Address: "+""+txt3val +""+"Total Amount: "+""+txt4val >"+"Total Amount: "+""+txt4val +""+"Amount Tendered "+""+txt5val >"+"Amount Tendered "+""+txt5val +""+"Change"+""+txt6val +""+"Change"+""+txt6val +"

document.write document.write("") ("") } } 

www.eShopping.com www.eShopping.com

()"/> "> < > ; > < > "/> "/> "/> > < > ; > &   nbsp; Voucher No Voucher No Customer Name Customer Name Customer Address Customer Address &   nbsp; 

="silver"> < > " width="127" height="95" /> > < Shoes ()"/>Shoes disabled/>

Total Amount

Total Amount

" value="0.00" disabled/> 

="silver"> < > height="101" /> ()"/>Pants > < Pants value="0.00" disabled/>

Amount Tendered

Amount Tendered

/> 

="silver"> < > height="99" /> > < Shirts ()"/>Shirts value="0.00" disabled/>

Change

Change

value="0.00" disabled /> 

="silver"> < > height="94" /> ()"/>Bags > < Bags disabled/> 

="silver"> < & >  nbsp; > < > > ()"/> ()"/>