CNIT 133 Interactive Web Pags Java Script and
CNIT 133 Interactive Web Pags – Java. Script and AJAX Functions
Agenda • • • My Web Site: http: //fog. ccsf. edu/~hyip (download syllabus, class notes). Functions. What is a function? Types of functions. Function arguments. Pass by value or pass by reference. Argument length. Function library (external Java. Script files). Built-in functions – set. Timeout(); clear. Timeout(); set. Interval(); clear. Interval(). Automatic slide show sample. Built-in function for Math Object. Built-in function for Date Object.
Functions • A function is a block of Java. Script code that is defined once but may be invoked, or executed, any number of times. • Functions may have parameters, or arguments – local variables whose value is specified when the function is invoked. • Functions often use these arguments to compute a return value that becomes the value of the function invocation expression. • When a function is invoked on an object, the function is called a method, and the object on which it is invoked is passed as an implicit argument of the function.
What is a function? • A function is a block of predefined programming statements whose execution is deferred until the function is “called”. • You call a function by invoking its name, along with any required or optional parameters. • Function parameters/arguments are data values or data references that you pass to a function. • The function then uses and/or modifies those data values or references during its execution.
Types of Functions • Predefined functions: predefined by the JS language but not associated with any particular object. parse. Int(), is. Na. N() • Predefined methods: predefined by the JS and associated with objects that have also been predefined by the language. window. open(), document. write() • User-defined functions (really user-defined window methods): defined by a programmer. However, when a programmer declare a function in JS, it is actually defining a method of the window object. hello. World(), greet. Visitor() • User-defined methods: defined by a programmer and associated with a particular object, usually a user-defined object. pen. write()
The best function-programming practices 1. A well-written function performs one task and one task alone. 2. A well-written function stands on its own and causes no side effects to variables or objects outside its scope. 3. A well-written function is well documented with comments, including what the function does, what input it requires, and what output, if any, it returns.
Defining a function without parameters • A function definition needs to be placed such that the function gets defined and read into memory before it is called to work • So, always declare them in the <head> of the HTML document. function. Name() { Statements; } function hello. World() { document. write("Hello, world!"); }
Calling a simple function • To call a function that has no parameters, simply invoke its name: function. Name(); • You can call hello. World by invoking its name: hello. World(); • If your function will execute any document. write statements, then it must be called within the <body> of an HTML document.
Defining and calling a function with parameters • The proper syntax for declaring a function with one or more parameters function. Name(param 1, param 2, …) { statements; } • Let’s declare a greet. By. Name function that will accept visitor. Name as a parameter: function greet. By. Name(visitor. Name) { alert("Hello, " + visitor. Name + "!"); } • To see if it works, let’s call it. greet. By. Name("Sam"); greet. By. Name("Davan");
Function with Parameter sample <html> <head><title>Function with Parameter</title> <script language="Java. Script" type="text/javascript"> function greet. By. Name(visitor. Name) { alert("Hello, " + visitor. Name + "!"); } </script> </head> <body> <h 1>Function with Parameter(s)</h 1> <script language="Java. Script" type="text/javascript"> var visitor = prompt("What's your name? ", ""); greet. By. Name(visitor); </script> </body> </html>
Passing by value (primitive data types) • Whenever primitive data types (number, string, Boolean) are used as arguments to function calls, those arguments are passed by value, that is, the function receives the actual value of the argument and stores that value in its parameter variable. • The value of the variable used as an argument remains unchanged by the function call.
Passing by reference (composite data types) • Whenever you pass composite data types such as objects/arrays as arguments to a function, you pass the actual object itself. • The parameter name becomes another reference to the object passed; that is, the parameter name becomes another name by which the object can be referred to. Anything you do to the parameter in the function affects the original object.
Passing by reference sample <html> <head><title>Function passing by reference</title> <script language="Java. Script" type="text/javascript"> function array. Data(drinks) { drinks[0] = "Lemonade"; drinks[1] = "Iced tea"; drinks[2] = "Pepsi"; drinks[3] = "Dr. Pepper"; } </script> </head> <body> <h 1>Function with Parameter(s) by reference</h 1> <script language="Java. Script" type="text/javascript"> var my. Cups = new Array(); document. write("Content of my. Cups: ", my. Cups, " "); array. Data(my. Cups); document. write("Content after function call: ", my. Cups, " "); </script> </body> </html>
Declaring a function to return a value • If a function needs to return a value, you need to include a return statement in your function, usually as the last line. • A function can have more than one return statement, each defined for a particular condition, but only one return statement can execute and only one value or object can be returned. function. Name(param 1, param 2, …) { statements; return some. Value; }
Declaring a function to return a value sample <html> <head><title>Function with return</title> <script language="Java. Script" type="text/javascript"> function get. Max(num 1, num 2) { if (num 1 > num 2) { return num 1; } else { return num 2; } } </script> </head> <body> <h 1>Function with return</h 1> <script language="Java. Script" type="text/javascript"> document. write("Max of 8 and 15 is ", get. Max(8, 15), " "); document. write("Max of -9 and 17 is ", get. Max(-9, 17), " "); document. write("Max of 8 and 8 is ", get. Max(8, 8), " "); document. write("Max of 1. 1 and 1 is ", get. Max(1. 1, 1), " "); </script> </body> </html>
Defining and Invoking Functions • • The most common way to define a function is with the function statement. This function consists of the function keyword followed by: § The name of the function § Zero or more parameter names contained within parenthesis, each separated by commas § The Java. Script statements that comprise the body of the function, contained within curly braces function print(msg) { document. write(msg + " "); } function factorial(x) { if (x <= 1) { return 1; } return x * factorial(x – 1); } • • Once a function has been defined, it may be invoked with the () operator. The parentheses appear after the name of the function and that an optional commaseparated list of argument values or expressions appears within the parentheses: print("Hello, " + name); print("Welcome to my web"); print("The probability of that is: " + factorial(5)/factorial(13));
Nested Functions • In Java. Script, functions may be nested within other functions: function hypotenuse(a, b) { function square(x) { return x * x; } return Math. sqrt(square(a) + square(b)); } • Nested functions may be defined only at the top level of the function within which they are nested (i. e. they may not be defined within statement blocks, or while loop)(this restriction applies only to functions defined with the function statement) • Function literal expression may appear anywhere.
Function Literals • Java. Script allows functions to be defined with function literals. • A function literal is an expression that defines an unnamed function. • The syntax for a function literal is much like that of the function statement, except that it is used as an expression rather than as a statement and no function name is required. function f(x) { return x * x; } var f = function(x) { return x * x; }; // function statement // function literal • Function literals create unnamed functions which is useful when writing recursive functions that call themselves: var f = function fact(x) { if (x <= 1) return 1; else return x * fact(x – 1); }; • Function literal expression can be stored into a variable, passed to another function, or even invoked directly: f[0] = function(x) { return x * x; }; // define a function and store it a. sort(function(a, b) {return a – b; }); // define a function, pass it to another var tensquared = (function(x) {return x * x; })(10); // define and invoke
Naming Functions • Any legal Java. Script identifier can be a function name. • When a name includes multiple words, one convention is to separate words with underscores like_this(); • Another convention is to begin all words after the first with an uppercase letter like. This(). • Functions that are supposed to be internal or hidden are sometimes given names that begin with an underscore.
Function Arguments • Java. Script functions can be invoked with any number of arguments, regardless of the number of arguments named in the function definition. • Function is loosely typed, it is legal to pass values of any type to any function
Optional Arguments • • When a function is invoked with fewer arguments than are declared, the additional arguments have the undefined value. It is often useful to write functions so that some arguments are optional and may be omitted when the function is invoked: // append the names of the enumerable properties of object // o to the array a, and return a. If a is omitted or null, create // and return a new array. function copy. Property. Names. To. Array(o, /* optional */ a) { if (!a) a = [ ]; // if undefined or null, use a blank array for (var property in o) a. push(property); return a; } • With the function defined this way, you have flexibility in how it is invoked: // get property names of objects o and p var a = copy. Property. Names. To. Array(o); copy. Property. Names. To. Array(p, a);
Variable-Length Argument Lists: The Argument Object • • • Within the body of a function, the identifier arguments has special meaning. “arguments” is a special property that refers to an object known as the Arguments object The Arguments object is an array-like object that allows the argument values passed to the function to be retrieved by number, rather than by name. The Arguments object also defines an additional “callee” property. Although a Java. Script function is defined with a fixed number of named arguments, it can be passed any number of arguments when it is invoked. The Arguments object allows full access to these argument values, even when some of all are unnamed (arguments[0], arguments[1], etc…): function f(x, y, z) { if (arguments. length != 3) { throw new Error("function f called with " + arguments. length + "arguments, but it expects 3 arguments. "); } // actual function… }
Variable-Length Argument Lists: The Argument Object (continue…) • The arguments object also open up an important possibility for Java. Script functions: they can be written so that they work with any number of arguments: function max(/*… */) { var m = Number. NEGATIVE_INFINITY; for (var i = 0; i < arguments. length; i++) if (arguments[i] > m) m = arguments[i]; return m; } • Functions like this one that can accept any number of arguments are called “variadic functions”, variable arity functions, or varargs functions.
The callee property • The Arguments object defines a callee property that refers to the function that is currently being executed. • This property is rarely useful, but it can be used to allow unnamed functions to invoke themselves recursively: function(x) { if (x <= 1) return 1; return x * arguments. callee(x – 1); }
Argument Types • Since Java. Script is loosely typed, method arguments have no declared types, and no type checking is performed on the values you pass to a function. • You can self-documenting by including argument types in comments. • For arguments that are optional, you can include the word “optional” in the comment • When a method can accept any number of arguments, you can use an ellipsis. • If you write a function that expects a string argument and then call that function with a value of some other type, the value you passed will simply be converted to a string when the function tries to use it as a string. • All primitive types can be converted to strings, and all objects have to. String() methods.
Functions as Data • In Java. Script, functions are not only syntax but also data, they can be assigned to variables, stored in the properties of objects or the elements of arrays, passed as arguments to functions, and so on… function square(x) { return x * x; } • This definition creates a new function object and assigns it to the variable square. The function can be assigned to another variable: var a = square(4); var b = square; var c = b(5); • // a contains square of 4 // b refers to function square // c contains result of square 5 Functions can also be assigned to object properties: var o = new Object; o. square = function(x) { return x * x; } // function literal var y = o. square(3); // y contains result of square 3 • Functions can also be assigned to array elements: var a = new Array(3); a[0] = function(x) { return x * x; } a[1] = 5; a[2] = a[0](a[1]); // a[2] contains result of square 5
Functions as Methods • • • A method is nothing more than a Java. Script function that is stored in a property of an object and invoked through that object. If you have a function f and an object o, you can define a method name m: o. m = f; Having defined the method m() of the object o, invoke it like this: o. m(); o. m(x, x+2); // if m() requires two arguments Methods have one very important property: the object through which a method is invoked becomes the value of the this keyword within the body of the method. Thus, when you invoke o. m(), the body of the method can refer to the object o with the this keyword: var calculator = { // an object literal operand 1: 1, operand 2: 2, compute: function() { this. result = this. operand 1 + this. operand 2; } }; calculator. compute(); alert(calculator. result); // display the result
constructor Function • A constructor function is a function that initializes the properties of an object and is intended for use with the new operator.
Functions Properties and Methods • The typeof operator returns the string “function” when applied to a function, but functions are really a specialized kind of Java. Script object. • Since functions are objects, they have properties and methods.
The length property • The length property of the arguments array specifies the number of arguments that were passed to the function. (arguments. length) • The length property of a function itself, is a read-only property, returns the number of arguments that the function expects to be passed – that is, the number of parameters it declares in its parameter list. (arguments. callee. length) function check(args) { var actual = args. length; // actual number of arguments var expected = args. callee. length; // expected number of arguments if (actual != expected) { throw new Error("Wrong number of arguments: expected: " + expected + "; actual passed " + actual); } }
Creating Libraries in External Java. Script files • A function definition can be placed in an external JS file and linked into a document with a script tag in the <head> of the HTML document. • Place a bunch of regularly used function definitions in one external JS file and you are got yourself a library. • A library is a group of reusable function definitions, usually related to each other in some way.
HTML with external JS file <html> <head><title>Function with external file</title> <script language="Java. Script" type="text/javascript"> function greet. By. Name(visitor. Name) { alert("Hello, " + visitor. Name + "!"); } </script> <script src="myscript. js"> </script> </head> <body> <h 1>Function with external file</h 1> <script language="Java. Script" type="text/javascript"> var visitor = prompt("What's your name? ", ""); greet. By. Name(visitor); document. write("Max of 8 and 15 is ", get. Max(8, 15), " "); document. write("Max of -9 and 17 is ", get. Max(-9, 17), " "); document. write("Max of 8 and 8 is ", get. Max(8, 8), " "); document. write("Max of 1. 1 and 1 is ", get. Max(1. 1, 1), " "); </script> </body> </html>
Content of the external file – myscript. js function get. Max(num 1, num 2) { if (num 1 > num 2) { return num 1; } else { return num 2; } }
set. Timeout() and set. Interval() • window has two common methods set. Timeout() and set. Interval(). • The window method set. Timeout lets you call a function after a specified number of milliseconds have elapsed. • It allows you to set a timer that calls a JS statement or function after a certain period of time. set. Timeout("statement", num. Milliseconds); set. Timeout("function. Name()", num. Milliseconds);
set. Timeout() and clear. Timeout() <html> <head><title>Function with set. Timout</title> <script language="Java. Script" type="text/javascript"> var reminder; function display. Alert() { alert("5 seconds have elapsed. "); } function call. Timer() { reminder = set. Timeout("display. Alert()", 5000); } </script> </head> <body> <h 1>Function with set. Timeout()</h 1> <form> <p>Click the button on the left for a reminder in 5 seconds; click the button on the right to cancel the reminder before it is displayed. </P> <input type="button" value="Set 5 -Second Reminder" on. Click = "call. Timer()"> <input type="button" value="Clear Reminder" on. Click="clear. Timeout(reminder)"> </form> </body> </html>
set. Timeout() and clear. Timeout() • The set. Timeout() will return an integer representing the timeout’s unique identification. By assigning the returned ID to a variable, you can control the timeout, stopping it if necessary. • If you don’t assign the value returned by set. Timeout to a variable when it is called, you will have no way to identify the time-out so you can tell it to stop. var timer. Name = set. Timeout("function. Name()", num. Milliseconds); clear. Timeout(timer. Name);
set. Interval() and clear. Interval() <html> <head><title>Function with set. Interval</title> <script language="Java. Script" type="text/javascript"> var reminder; function display. Alert() { alert("5 seconds have elapsed. "); } function call. Timer() { reminder = set. Interval("display. Alert()", 5000); } </script> </head> <body> <h 1>Function with set. Interval</h 1> <form> <p>Click the button on the left for a repeated reminder every 5 seconds; click the button on the right to cancel the reminder before it is displayed. </P> <input type="button" value="Set Repeating 5 -Second Reminder" on. Click = "call. Timer()"> <input type="button" value="Clear Reminder" on. Click="clear. Interval(reminder)"> </form> </body> </html>
set. Interval() and clear. Interval() • The window method, set. Interval differs from its cousin and predecessor set. Timeout in that it repeatedly calls a statement or function every so many milliseconds. set. Interval("statement/function. Name", num. Milliseconds); • Syntax for saving an interval’s unique ID: var timer. Name = set. Interval("function. Name()", num. Milliseconds); • Syntax for using clear. Interval(): clear. Interval(timer. Name);
Using set. Interval to create an automatic slideshow <html> <head><title>Function with set. Interval slideshow</title> <script language="Java. Script" type="text/javascript"> var current. Slide = 0; if (document. images) { // test if images object exist. if images are supported by the browser, create an array of images and preload them. var slides = new Array(); slides[0] = new Image(); slides[0]. src = "0_happi. jpg"; slides[1] = new Image(); slides[1]. src = "1_happi. jpg"; slides[2] = new Image(); slides[2]. src = "2_happi. jpg"; slides[3] = new Image(); slides[3]. src = "3_happi. jpg"; slides[4] = new Image(); slides[4]. src = "4_happi. jpg"; slides[5] = new Image(); slides[5]. src = "5_happi. jpg"; } function next. Image() { if (document. images && document. slideshow. complete) { // if browser support images, and image loaded complete if (current. Slide == slides. length) { current. Slide = 0; } document. slideshow. src = slides[current. Slide]. src; current. Slide++; } }
Using set. Interval to create an automatic slideshow (continue…) function stop. Slide() { clear. Interval(my. Slide. Show); } </script> </head> <body> <h 1>Function with set. Interval slideshow</h 1> <form> <table align="center" border="2"> <tr><td><img src="0_happi. jpg" name="slideshow" width="200" height="180" alt="My slideshow"></td></tr> <tr><td align="center"> <input type="button" value="Stop Slideshow" on. Click = "stop. Slide()"></td></tr> </table> </form> <script language="Java. Script" type="text/javascript"> var my. Slide. Show = set. Interval("next. Image()", 2000); </script> </body> </html>
Built-In Function – Math Object • The Math object is a built-in JS object that includes math constants and functions. § § § § Math. ceil(): rounds a number up to the next integer. Math. floor(): rounds a number down to the next integer. Math. round(): rounds a number to the nearest integer. Math. sin(): calculate sines. Math. cos(): calculate cosines. Math. PI: is a property, Mathematical constants PI. Math. random(): generate a random decimal number between zero and one.
Generating random number from 1 to n • You will usually want a random number between one and a value. • You can do this with a general-purpose random number function. • The following is a function that generates random numbers between one and the parameter you send it. function rand(num) { return Math. floor(Math. random() * num) + 1; }
Creating a Date Object • The Date object is a built-in JS object that enables you to conveniently work with dates and times. • You can create a Date object anytime you need to store a date, and use the Date object’s methods to work with the date. • You can create a Date object using the new keyword. • You can also optionally specify the date to store in the object when you create it. • You can also use any of the following formats: var birthday = new Date(); var birthday = new Date("June 20, 2009 08: 00"); var birthday = new Date(6, 20, 2009, 8, 0, 0);
Setting Date values • A variety of set methods enable you to set components of a Date object to values: § set. Date(): sets the day of the month. § set. Month(): sets the month. JS numbers the months from 0 to 11, starting with January (0). § set. Full. Year(): sets the year. § set. Time(): sets the time (and the date) by specifying the number of milliseconds since January 1, 1970. § set. Hours(), set. Minutes(), and set. Seconds() set the time.
Reading Date values • You can use the get methods to get values from a Date object. This is the only way to obtain these values, because they are not available as properties. get. Date(): gets the day of the month. get. Month(): gets the month. get. Full. Year(): gets the year. get. Time(): gets the time (and the date) as the number of milliseconds since January 1, 1970. § get. Hours(), get. Minutes(), get. Seconds(), and get. Milliseconds() get the components of the time. § §
Working with Time Zones • get. Time. Zone. Offset(): gives you the local time zone’s offset from UTC time. • to. UTCString(): converts the date object’s time value to text, using UTC. • to. Local. String(): converts the date object’s time value to text, using local time. • get. UTCDate(): gives the day of the month in UTC time. • get. UTCDay(): gives the day of the week in UTC time. • get. UTCFull. Year(): gets the four-digit year in UTC time. • get. UTCMonth(): returns the month of the year in UTC time. • get. UTCHours(), get. UTCMintues(), get. UTCSeconds(), and get. UTCMilliseconds(), return the components of the time in UTC. • set. UTCDate(), set. UTCFull. Year(), set. UTCMonth(), set. UTCHours(), set. UTCMintues(), set. UTCSeconds(), and set. UTCMilliseconds() set the time in UTC.
Converting between Date formats • Two special methods of the Date object allow you to convert between date formats. • Instead of using these methods with a Date object you created, you use them with the built-in object Date itself. § Date. parse(): converts a date string, such as June 20, 1996, to a Date object (number of milliseconds since 1/1/1970). § Date. UTC(): does the opposite. It converts a Date object value (number of milliseconds) to a UTC (GMT) time.
Using Third-Party Libraries • Dojo (http: //www. dojotoolkit. org/) • The yahoo! UI library (http: //developer. yahoo. net/yui/) • Mochikit (http: //mochikit. com/)
- Slides: 48