eg-259:lecture6
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:lecture6 [2013/02/06 21:08] – [Object Modification] eechris | eg-259:lecture6 [2013/02/07 21:09] (current) – [Exercises] eechris | ||
---|---|---|---|
Line 323: | Line 323: | ||
* How is a new property of an object created? | * How is a new property of an object created? | ||
+ | Lets [[http:// | ||
===== Object Creation ===== | ===== Object Creation ===== | ||
Line 380: | Line 380: | ||
* Example: | * Example: | ||
<code javascript> | <code javascript> | ||
- | | + | for (var property |
- | | + | |
- | } | + | } |
</ | </ | ||
- | |||
===== Learning Outcomes — Arrays ===== | ===== Learning Outcomes — Arrays ===== | ||
Line 398: | Line 397: | ||
* What is the form of a nested array literal? | * What is the form of a nested array literal? | ||
+ | Fiddle with [[http:// | ||
===== Arrays ===== | ===== Arrays ===== | ||
Line 421: | Line 420: | ||
myList.length = 150; | myList.length = 150; | ||
</ | </ | ||
- | * Example [[/eg-259/examples/lecture6/insert_names.html|insert_names.html]] | + | * Example [[http://jsfiddle.net/cpjobling/ |
---- | ---- | ||
<code javascript> | <code javascript> | ||
- | < | + | /* insert_names.html |
- | < | + | |
- | The script in this document has an array of | + | |
- | names, name_list, whose values are in | + | |
- | alphabetic order. New names are input through | + | |
- | prompt. Each new name is inserted into the | + | |
- | name array, after which the new list is | + | |
- | displayed. | + | */ |
- | --> | + | |
- | <html lang=" | + | |
- | < | + | |
- | <meta charset=" | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | // The original list of names | + | |
- | var name_list = new Array(" | + | |
- | var new_name, index, last; | + | |
- | | + | // The original list of names |
+ | var name_list = [" | ||
- | while( | + | // working variables |
+ | var new_name, index, last, result, element | ||
- | | + | // Loop to get a new name and insert it |
+ | while (new_name = prompt(" | ||
- | | + | // Loop to find the place for the new name |
+ | | ||
- | | + | |
- | name_list[last + 1] = name_list[last]; | + | name_list[last + 1] = name_list[last]; |
- | last--; | + | last--; |
- | } | + | } |
- | | + | |
- | + | name_list[last + 1] = new_name; | |
- | | + | |
- | + | ||
- | // Display the new array | + | |
- | + | ||
- | document.write("< | + | |
- | for( index = 0; index < name_list.length; | + | |
- | document.write(name_list[index], | + | |
- | } | + | |
- | document.write("</ | + | |
- | } //** end of the outer while loop | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
+ | // Display the new array | ||
+ | result = "< | ||
+ | element.append(); | ||
+ | for (index = 0; index < name_list.length; | ||
+ | result += name_list[index] + "< | ||
+ | } | ||
+ | result += "</ | ||
+ | element.append(result); | ||
+ | } //** end of the outer while loop | ||
</ | </ | ||
- | |||
===== Array methods ===== | ===== Array methods ===== | ||
Line 496: | Line 483: | ||
* Coerce elements to strings, if necessary, and concatenate them together, separated by commas (exactly like join(", | * Coerce elements to strings, if necessary, and concatenate them together, separated by commas (exactly like join(", | ||
* '' | * '' | ||
- | * Example: [[/eg-259/examples/lecture6/nested_arrays.html|nested_arrays.html]] | + | * Example: [[http://jsfiddle.net/cpjobling/ |
---- | ---- | ||
<code javascript> | <code javascript> | ||
- | < | + | // nested_arrays.html An example |
- | < | + | // array of arrays |
- | An example illustrate an array of arrays | + | |
- | --> | + | |
- | <html lang=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | <script type = " | + | |
- | // Create an array object with three arrays | + | |
- | | + | var element |
- | | + | // Create an array object with three arrays as its |
- | | + | // elements |
- | document.write(" | + | |
- | for(var col = 0; col <= 2; col++) { | + | var nested_array |
- | | + | [2, 4, 6], |
- | } | + | |
- | document.write("< | + | |
- | } | + | ]; |
- | | + | |
- | </ | + | |
- | </ | + | |
- | </code> | + | // Display the elements of nested_list |
+ | result_text = "<p>"; | ||
+ | for (var row = 0; row <= 2; row++) { | ||
+ | result_text += "Row " + row + ": | ||
+ | for (var col = 0; col <= 2; col++) { | ||
+ | result_text += nested_array[row][col] + " "; | ||
+ | } | ||
+ | result_text += "< | ||
+ | } | ||
+ | element.append(result_text + "</ | ||
+ | </ | ||
===== Learning Outcomes — Functions ===== | ===== Learning Outcomes — Functions ===== | ||
Line 561: | Line 544: | ||
* If '' | * If '' | ||
<code javascript> | <code javascript> | ||
- | | + | ref_fun = fun; |
- | . . . | + | // . . . |
- | ref_fun(); | + | ref_fun(); |
</ | </ | ||
- | |||
===== Defining Functions ===== | ===== Defining Functions ===== | ||
Line 579: | Line 561: | ||
* There is no type checking of parameters, nor is the number of parameters checked (excess actual parameters are ignored, excess formal parameters are set to '' | * There is no type checking of parameters, nor is the number of parameters checked (excess actual parameters are ignored, excess formal parameters are set to '' | ||
* All parameters are sent through a property array, '' | * All parameters are sent through a property array, '' | ||
- | * Example: [[/eg-259/examples/lecture6/parameters.html|parameters.html]] | + | * Example: [[http://jsfiddle.net/cpjobling/ |
---- | ---- | ||
<code javascript> | <code javascript> | ||
- | < | + | // parameters.html The params function and a test |
- | < | + | // driver for it. This example illustrates |
- | The params function and a test driver for it. | + | // function |
- | This example illustrates | + | |
- | --> | + | |
- | <html lang=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | // Function params | + | |
- | // Parameters: two named parameters | + | |
- | // | + | |
- | // Returns: nothing | + | |
- | function params(a, b) { | + | var element = $('# |
- | document.write(" | + | |
- | document.write(" | + | |
- | for(var arg = 0; arg < arguments.length; | + | // Function describe_params |
- | document.write(arguments[arg], | + | // Parameters: two named parameters and one unnamed |
- | } | + | // |
- | document.write("< | + | // Returns: nothing |
- | } | + | |
- | </script> | + | |
- | </head> | + | |
- | < | + | |
- | < | + | |
- | // A text driver for params | + | |
- | params(" | + | function describe_params(a, b) { |
- | | + | var text = "Function < |
- | | + | "Parameter values are: <br />"; |
- | </script> | + | |
- | </body> | + | text += arguments[arg] + "<br />"; |
- | </html> | + | } |
- | </code> | + | text += "In addition named-parameter <em>a</em> was " + a + |
+ | " | ||
+ | return text; | ||
+ | } | ||
+ | // A text driver for params | ||
+ | |||
+ | element.append("< | ||
+ | element.append("< | ||
+ | element.append("< | ||
+ | </ | ||
===== Passing a Function: Sorting ===== | ===== Passing a Function: Sorting ===== | ||
Line 650: | Line 622: | ||
* It is given a name by assigning it to a variable -- in this case '' | * It is given a name by assigning it to a variable -- in this case '' | ||
* This makes explicit the fact that a function is just another primitive in JavaScript. | * This makes explicit the fact that a function is just another primitive in JavaScript. | ||
- | * You'll see this form used a lot in [[http://codeyear.com|CodeYear]] and in event handlers to come later. | + | * You'll see this form used a lot in the [[http://www.codecademy.com/ |
===== Another Example ===== | ===== Another Example ===== | ||
- | * [[/eg-259/examples/lecture6/medians.html|medians.html]] | + | * [[http://jsfiddle.net/cpjobling/ |
---- | ---- | ||
Line 667: | Line 638: | ||
<code javascript> | <code javascript> | ||
- | < | + | // medians.js |
- | < | + | // A function and a function tester |
- | A function and a function tester | + | // Illustrates array operations |
- | Illustrates array operations | + | |
- | --> | + | |
- | <html lang=" | + | |
- | < | + | |
- | <meta charset=" | + | |
- | < | + | |
- | < | + | |
- | /* Function median | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | */ | + | |
- | var median = function (list) { | ||
- | list.sort(function(a, | ||
- | return a - b; | ||
- | }); | ||
- | var list_len = list.length; | ||
- | // Use the modulus operator to determine whether | + | var element = $('# |
- | // the array's length is odd or even | + | |
- | // Use Math.floor to truncate numbers | + | |
- | // Use Math.round to round numbers | + | |
- | if((list_len % 2) == 1) { | + | /* |
- | return list[Math.floor(list_len | + | Function median |
- | } | + | Parameter: An array of numbers |
- | else { | + | Return value: The median of the array |
- | return Math.round((list[list_len / 2 - 1] + list[list_len / 2]) / 2); | + | */ |
- | } | + | |
- | }; // end of function median note semicolon | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | var my_list_1 = [8, 3, 9, 1, 4, 7]; | + | |
- | var my_list_2 = [10, -2, 0, 5, 3, 1, 7]; | + | |
- | var med = median(my_list_1); | + | |
- | document.write(" | + | |
- | med = median(my_list_2); | + | |
- | document.write(" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </code> | + | |
+ | var median = function (list) { | ||
+ | list.sort(function (a, b) { | ||
+ | return a - b; | ||
+ | }); | ||
+ | var list_len = list.length; | ||
+ | |||
+ | // Use the modulus operator to determine whether | ||
+ | // the array' | ||
+ | // Use Math.floor to truncate numbers | ||
+ | // Use Math.round to round numbers | ||
+ | |||
+ | if ((list_len % 2) == 1) { | ||
+ | return list[Math.floor(list_len / 2)]; | ||
+ | } else { | ||
+ | return Math.round((list[list_len / 2 - 1] + list[list_len / 2]) / 2); | ||
+ | } | ||
+ | }; // end of function median -- note semicolon | ||
+ | |||
+ | var my_list_1 = [8, 3, 9, 1, 4, 7], | ||
+ | my_list_2 = [10, -2, 0, 5, 3, 1, 7], | ||
+ | med; | ||
+ | |||
+ | med = median(my_list_1); | ||
+ | element.append("< | ||
+ | |||
+ | med = median(my_list_2); | ||
+ | element.append("< | ||
+ | </ | ||
Line 731: | Line 693: | ||
myPlane = new Plane(" | myPlane = new Plane(" | ||
</ | </ | ||
+ | |||
+ | [[http:// | ||
---- | ---- | ||
Note by convention, constructors use upper case names to distinguish them from ordinary functions. Think //proper noun//. | Note by convention, constructors use upper case names to distinguish them from ordinary functions. Think //proper noun//. | ||
- | |||
===== Method Properties ===== | ===== Method Properties ===== | ||
Line 810: | Line 773: | ||
===== Exercises ===== | ===== Exercises ===== | ||
- | Write, test and debug (if necessary) | + | Use jsFiddle or some other method to write, test and debug (if necessary) |
- //Output//: A table of numbers from 5 to 15 and their squares and cubes, using alert. | - //Output//: A table of numbers from 5 to 15 and their squares and cubes, using alert. | ||
- | - //Output//: The first 20 Fibonacci numbers, which are defined as in the following sequence 1, 1, 2, 3, … where each number in the sequence is the sum of the two previous numbers. Use '' | + | - //Output//: The first 20 Fibonacci numbers, which are defined as in the following sequence 1, 1, 2, 3, … where each number in the sequence is the sum of the two previous numbers. Use '' |
- Modify the script of Exercise 2 to input a number, //n//, using '' | - Modify the script of Exercise 2 to input a number, //n//, using '' | ||
- // | - // |
eg-259/lecture6.1360184923.txt.gz · Last modified: 2013/02/06 21:08 by eechris