1. JS Arrays, Functions, Events Week 5 INFM 603

2. Agenda Arrays Functions Event-Driven Programming

3. Announcements Sites to learn coding: –http://www.codecademy.comhttp://www.codecademy.com –http://code-play.com/http://code-play.com/ Select “Javascript Executor Framework: Twitter Bootstrap –http://twitter.github.com/bootstrap/http://twitter.github.com/bootstrap/

4. Increment/Decrement Operators ++  increases value by one –x++  x = x + 1 --  decreases value by one –x--  x = x – 1 Pre/post version –++x vs. x++ –--x vs. x--

5. Assignment Operators += -= *= %=

6. Designing Using Pseudocode So far we have focus on the syntax and semantics As the complexity of problems increases you need a design strategy (algorithm) to solve such problems Several alternatives exist to come up with a solution to a problem. A popular one is Pseudocode Pseudocode: English-like description of the set of steps required to solve a problem When you write pseudocode you focus on determining the steps necessary to solve a problem without worrying about programming language syntax issues

7. Pseudocode Example Pseudocode for finding the minimum value 1. Read number of values to process (call this value n) 2. Repeat the following steps until the n input values have been processed a. Read next value into x b. If (x is the first value read) { currentMinimum = x } else { if (x < currentMinimum) { currentMinimum = x } } 3. Print currentMinimum value

8. Suggestions for Solving Problems Using a Programming Language Pseudocode  Make sure you have written pseudocode. Try to verify (e.g., trace tables) that your pseudocode is correct Do not wait until the last minute  Code implementation could be unpredictable Incremental code development  Fundamental principle in computer programming. Write a little bit of code, and make sure it works before you move forward Don’t make assumptions  If you are not clear about a language construct, write a little program to familiarize yourself with the construct Good Indentation  From the get-go use good indentation as it will allow you to understand your code better

9. Suggestions for Solving Problems Using a Programming Language Good variable names  Use good variable names from the get-go Testing  Test your code with simple cases first Keep backups  As you make significant progress in your development, make the appropriate backups Trace your code Use a debugger Take breaks  If you cannot find a bug take a break and come back later

10. do while Statement do while statement – Allows repetition of a set of statements Basic Form do { statement (s)// executed as long as expression is true } while (expression); Notice the semicolon after the expression parenthesis Executes the statement at least once Example: DoWhileNumbers.html, DoWhile.html Any type of statements (including do whiles) in a do while When to use a do while? When to use a while?

11. Introduction to Functions Function  An entity that completes a particular task for us It can take values necessary to complete a particular task It can return values After completing a task it returns to the point after the call Examples of JavaScript functions –document.writeln –alert() You can define your own functions

12. Introduction to Functions General form of a function is: function name ( ) { statements } Functions are invoked by using the () operator A function can receive values via parameters Some functions may not return a value Some functions may not take any parameters There are other approaches to define functions Example: Restaurant.html

13. Functions Returning Values A function can return a value via the return statement return expression; A call to a function that returns a value can be used as an expression The function execution terminates when a return statement is executed A return statement with no return value terminates the function execution The return can occur in a repetition statement Can we return more than one value? Example: FunctionReturn.html

14. Conventions to Use From Now on Variable/Function names –We will use lowercase –If multiple words are associated with a variable name then capitalize the first letter of second word on waterTemperature globalWarmingIndex Curly Brackets –Use a particular style Comparisons –Use === rather than == No global variables! Good indentation

15. Global/Local Variables Global Variables  variables defined outside of any function –Let’s see an example We want to avoid using global variables. Why? Variables declared in a function are called local variables. They are created on entry to the function and destroy on exit You can use the same name in different functions as they are different variables

16. For Loop Iteration statement General form for (initialize; test; expression) statement basically equivalent to Initialize while (test) { statement expression } If more than one statement use { } Example: ForLoop.html

17. One-Dimensional Arrays Problem: You need to keep track of the scores of students in a class –Declaring and handling 50 variables is not an easy task –Arrays come to the rescue Array  Collection of values that can be treated as a unit or individually var a = new Array(4) You can visualize an array as a set of variables one after another Indexing  We access an element using [ ] –First element associated with index 0 (e.g., a[0]) An element of an array can be of any type and an array can hold different types of elements The length property represents the length of the array (e.g., a.length) We can print the contents of an array by using alert For loops are often used with arrays Example: ArrayEx.html What happens when we assigned one array variable to another? How do we make a copy of an array? How do we check whether two arrays are the same?

18. Passing Values to Function Mechanism used to pass values to function is called pass- by-value Parameters Variables that receive data There are normal variables Arguments Values you pass to a function Example: PassByValue.html Does it matter how we name the parameters?

19. Passing Values to Function How are arrays passed to functions? Example: PassReturnArrays.html Memory Diagram Tool we will use to illustrate the associations between variables and entities (e.g., objects, arrays, etc.)

20. What is null? What does it represents? When can use null? null

21. Functions as Data In JavaScript functions are considered data That means they can be assigned to variables, stored as properties of objects or elements of arrays, passed as arguments to functions, etc. Let’s write a function that displays “hello” and then create an alias to this function Example: FunctionsAsData.html