CIS 136 Building Mobile Apps More Javascript Code to respond to Page Events, Physical Events, Device Events CIS 136 Building Mobile Apps

A review of Javascript

Using the <script> Element script statements; </script> Each statement inside the script tags is a single line that indicates an action for the browser to take The semicolon notifies the browser that it has reached the end of the statement

Declaring a variable A variable is a value stored in device memory You can declare variables with any of the following JavaScript commands: var variable; var variable = value; variable = value; where variable is the name of the variable and value is the initial value of the variable. Use reserved keyword var to create variables The first command creates the variable without assigning it a value; the second and third commands both create the variable and assign it a value Assignment operator: equal sign (=) Assigns value on the right side of the expression to the variable on the left side of the expression

Case Sensitivity in JavaScript JavaScript is case sensitive Ignores most occurrences of extra white space Do not break a statement into several lines

Making Decisions Decision making Process of determining the order in which statements execute in a program Decision-making statements, decision-making structures, or conditional statements Used when you need to adopt one path out of the given two paths Conditional statements allow your program to make correct decisions and perform right actions Runs a command or command block only when certain circumstances are met JavaScript supports 2 kinds of conditional statements which are used to perform different actions based on different conditions if .. else switch

if/else Statements Executes one action if the condition is true And a different action if the condition is false Syntax for an if . . . else statement if (expression) { statements } else {

New stuff in Javascript

Adding Comments to a JavaScript Program Nonprinting lines placed in code containing various types of remarks Will be ignored by the browser Line comment Hides a single line of code Add two slashes // before the comment text Block comments Hide multiple lines of code Add /* before the first character included in the block and */ after the last character in the block

Concatenation Combining two pieces of data using the + sign JavaScript is a weakly typed language The + symbol can be used with either numeric values or text strings When both sides of the + sign contain numbers, addition will be performed var total = 5 + 4; var emLink = "cadler" + "@" + "mpl.gov";

switch Statements Controls program flow by executing a specific set of statements based on an expression (one value) until a match is found Examines the expression and then evaluates a series of possible matching values The switch statement is given an expression to evaluate The case statements contain the possible values and the code to execute for each possible value The interpreter checks each case against the value of the expression until a match is found If nothing matches, a default condition will be used. Break statement stops the matching Break statement

Switch switch (americanCity) { case "Boston": alert "Massachusetts"; break; case "Chicago": alert "Illinois"; case "Los Angeles": alert "California"; default: alert "United States"; }

Arrays where one variable holds many values, like a list

Arrays An Array is a Javascript Object It contains one or more items, called elements Each element can hold any type of data Numbers, strings, objects An array can hold many values under a single name

Creating Arrays An array can be created & populated several ways Declaration var cellphones = new Array(); String object’s split method: var cellphones=dataString.split(',');

Declaring and Initializing Arrays (cont’d.) Element Each piece of data contained in an array Index Element’s numeric position within the array Array element numbering Starts with index number of zero (0) To access data in an array, refer to the arrayname followed by its index cellphones[0];

Strings

Manipulating Strings String var txt = “special text"; Text contained within double or single quotation marks To create strings var txt = “special text"; String Class is used to manipulate text parse (extract) text strings in scripts Format text Find text patterns Replace text Chop up text

Split method split()- Splits a string into an array of substrings var str = "How are you doing today?"; var res = str.split(" "); Results in an array namede res Res[0] holds the value How Res[1] holds the value are

Controlling when code executes Functions Controlling when code executes

Functions A JavaScript function is a block of code designed to perform a particular task – an action of some sort A JavaScript function is executed when "something" invokes it (calls it). Functions must be contained within a <script> element Function statements do the actual work and are contained within curly braces

Defining Functions Syntax function nameOfFunction(parameters) { statements; } Parameter Variable used within a function Placed within parentheses following a function name Multiple parameters allowed function calc_square_root(number1, number2) { var sr1 = number1 * number1

Lets Practice Define a function named “displayMyBank” Inside the function, use a an alert statement, to write out the name of your bank The function does not need parameters Syntax function averageNumbers(a, b, c) { var sum_of_numbers = a + b + c; var result = sum_of_numbers / 3; }

Calling Functions Functions can be written anywhere in the web page, but are usually within the document head, or an external .js file Calls to the function are usually within the body section and consist of the function name followed by parentheses function printStudentNames() { navigator.notification.alert(“<p>” + Joe + “</p>”); navigator.notification.alert(“<p>” + Sam + “</p>”); navigator.notification.alert(“<p>” + Bob + “</p>”); } </script> </head> <body> <script> printStudentNames(); </script>

Calling Functions using parameters If a function needs additional information, providing it is called Passing arguments The function must be designed to receive that data, and that data is called a parameter Arguments vs. Parameters – refer to the same memory location, therefore the same data function averageNumbers(a, b, c) { var sum_of_numbers = a + b + c; var result = sum_of_numbers / 3; } averageNumbers(1,2,3);