Chapter 3 : Processing on the Front End JavaScript • Technically its name is ECMA-262, which refers to the international standard which defines it. • The standard is derived mostly from Netscape's JavaScript, but it does have some features from Microsoft's JScript. • Its most common use (by far) is to provide scripting support for Web browsers. All of the popular "modern" Web browsers support the core standard.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Chapter 3 : Processing on the Front End
JavaScript • Technically its name is ECMA-262, which refers to the international standard which defines it.
• The standard is derived mostly from Netscape's JavaScript, but it does have some features from Microsoft's JScript.
• Its most common use (by far) is to provide scripting support for Web browsers. All of the popular "modern" Web browsers support the core standard.
<script language="javascript"><!-- JavaScript statements//--></script>
• Scripts are included in HTML files by placing them inside an HTML script container inside either the head or body section of the document.
• The HTML comment markers are to hide the JavaScript statements from older browsers that don't understand the HTML script element.
• JavaScript statements are executed in document order as the Web page is first being loaded into the browser.See firstprogram.htmlSee fragmentedscript.html
• JavaScript is loosely typed, which means a variable can hold any of JavaScript's literal types:
var x=3.14; // numberx="a string"; // stringx=true; // Boolean
• The keyword var is used to declare variables since no typing is required.
• There are some special fixed literal values. It's better to assign predefined literals when weird things happen than to crash Web browsers!var y; // uninitialized variables are
// assigned the literal undefinedvar y ="yi"*"kes"; // y contains NaN
// Not a Numbery = 3/0; // y contains the literal Infinity
• The basic syntax is very similar to that of Java and C++.• The operators are standard.
• The concatenation operator is +.x="3";y="4";z=x+y; // "34"a=y+x; // "43"
• But + is also used for addition of numbers.x=3;y=4;z=x+y; // 7
• This duality is a problem since most data stored in HTML form elements is string data. We can parseFloat() (or parseInt()) data to force addition .x="3";y="4";z= parseFloat(x)+parseFloat(y); // 7
• Conditionals are standard:
• Loops are standard:
• The syntax for functions is standard, with the exception that you don't declare types for parameters or for returned values.
• Here is an example of a void (no return value) style function.function customrule(width,char) { for (var x=1 ; x<=width ; x++) { document.write(char); } document.write("<br />");}
• Here is a sample call to the function.customrule(25,"#");
• Here is the result in the Web page.#########################
• Here is an example of a return style function.function times10(num) { num=num*10; return num;}
• Here is a sample call to the function.var num = times10(3);
• The result is that the variable num contains 30.
• Scope in functions is straight-forward and works as you would expect.
• Global variables are visible inside functions.• Function parameters are local to the function call and so are variables declared inside functions using the var keyword.• Primitive variables are passed to functions by value.• Objects are passed to functions by reference.
Scope example:function scopedemo(x) {
var y=10;x++;y=x+y;z++;
}
var x=2;var y=3;var z=4;
scopedemo(z);
Result: After the function call, the state of the global variables are x<-->2, y<-->3, z<-->5
• Note that global variables "live" so long as the page is loaded into the browser. Refreshing the page, re-initializes global variables. • Local variables "live" only during the function call.
• Arrays are also standard with the exception that you don't need to define what type(s) it may hold. • Create a new array object.var list=new Array();
• Initialize some array cells.list[0]="hello";list[1]=3.14;list[1000]=true;
• The allowed indices are not pre-determined, but it's best to stick to standard array indexing, unlike the above example which skips some indices.
• Array variables are objects. JavaScript doesn't yet support classes and inheritance, but there are several built in classes with constructors (like Array() ) which are available.
• Our main focus here is to use JavaScript to process HTML forms. Forms are created using only HTML.
Form Buttons
TextForm
Elements
OptionForm
Elements
See bigform.html
Part of the Browser Object
• Many aspects of a Web page can be changed by changing the Browser Object using JavaScript.• This statement will change the text color of the page to red.window.document.fgColor="#0000FF";
• Here, we are mostly concerned with form objects.<form name="fred"> <input type="text" value="hello" name="textbox" /> <input type="button" value="click me" onclick="f()" /></form>
• A form is an object. Its name is reference to the object.• Form elements are properties of the form object. Again, the name of the element is the reference to the object.• A text field is a string object. It's data is in its value property.document.fred.textbox.value
• The button's onclick event handler calls a JavaScript function named f(). The function changes the content of the text field. The change in the Web page is immediate.function f() {
document.fred.textbox.value = "there";}
See formobject.html
• Event Handlers (listeners) are special properties of the various objects.
• Common Examples:Object Event Handlerswindow onfocus, onblurdocument onload, onunloadlink onclick,onmouseover,onmouseoutform button onclick
• An event handler can be placed as an attribute in the HTML element which creates the object.• These examples call the built-in JavaScript alert() function when the event happens.
<body onload="alert('Welcome')"><a href="…" onmouseover="alert('Hey, man!')"> click me</a>See loadevents.htmlSee linkevents.html
• We will mostly create custom functions to handle user events.• These functions will primarily access, and perhaps change, the elements (hence the data) in form object.• The data is in a form element's properties, which are standard variable types.
Form Element Its Fundamental Data Type(s)text field, text area string - the data
radio button, checkbox Boolean - is it checked?string - the data
menu (single) number - which option is selectedarray of strings - the data for each option
menu (multiple) array of Boolean - is a given option checked?
array of strings - the data for each option
• The form of Figure 3.9 and a diagram to represent the object.• The branches show object references.• The primitive variables are listed at the ends of branches
Below is the same form as previous slide• All form elements are indexed by a built-in elements[] array.• This is useful when you need to iterate over several form elements.• You can use either this array or the name given to the form element for object reference.
Client-side processing of data in HTML forms:
Text field -- a string with no new line characters
Text area -- a string potentially with new line characters
Note: These form elements are incapable of holding numeric data. For example, If you assign a numeric literal to a text element in the Browser Object, it is converted on the fly into a string.
See calculator.html
Processing user choices:
Checkbox -- Boolean Variable Hidden string data
Radio Button -- Boolean Variable Hidden string data
Note: There is no built-in way to test which one(s) are checked from among a group. The best way is to loop over them and test each one.
See cart.html
Menus
Single selection -- Works like a single selection group of radio buttons.
Note: selectedIndex property of the menu holds the currently selected menu index -- no need to iterate to find user's choice.
Multiple selection -- Works like a group of checkboxes.
Note: selectedIndex property of the menu only holds the first (usually) currently selected menu index -- have to iterate over the selected properties of the menu options to find all the user's choices.
See cartax.html
Validation Before Submission to Server<form name="formname" method="GET" action="http://www.cknuckles.com/cgi/echo.cgi"> . . . <input type="submit" value="Submit Form" /></form>
<script language="JavaScript"> document.formname.onsubmit=verify; // has to be after def. of submit button
function verify() {-return true if form data is ok-return false otherwise -- form won't be
submitted }</script>
See menuverify.htmlSee cart2.html
Validation using string object:
var str = "Scooby Doo";// automatically treated as a string object
So for example,
var x=str.charAt(1);
Causes the variable x to contain the string
"c"
• Using various methods of a string object, you can extract any information you want about the string.
Summary of the String object:
• If you have worked with strings before, most of this already should be familiar to you in concept.
Example: Verify the following about the form below.• The name must be at least 4 characters long, must contain at least one blank space, and must neither begin nor end with a space. • The e-mail address must be at least 5 characters long, must contain no blank spaces, must contain exactly one @ character, and must contain at least one period.• The zip code must be numeric and exactly five characters long.
See textverify.html
Related Documents
