Slide 1

JS Arrays, Functions, Events Week 5 INFM 603

Slide 2

Agenda Arrays Functions Event-Driven Programming

Slide 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/

Slide 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--

Slide 5

Assignment Operators += -= *= %=

Slide 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

Slide 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

Slide 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 Dont 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

Slide 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

Slide 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?

Slide 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

Slide 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

Slide 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

Slide 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

Slide 15

Global/Local Variables Global Variables variables defined outside of any function Lets 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

Slide 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

Slide 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?

Slide 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?

Slide 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.)

Slide 20

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

Slide 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. Lets write a function that displays hello and then create an alias to this function Example: FunctionsAsData.html