The structure of computer programs The Basic building blocks of computer programs All programs can be built from three logical building blocks Selection/ifs If the traffic in the high street is heavy take the first left take the first right else follow the high street to the end Sequence Take the first left Take the second right Take the third exit at the roundabout Repetition/loops while you have not yet reached the turnoff for Little Whamping go straight ahead at each roundabout 9/16/2018 ArabOU - M150 - AbuNawaf 1

Selection A selection instruction allows you to write programs (and remember programs are basically just plans) that will operate in different ways depending on circumstances. If I win the lottery this Saturday I'll tell my boss what I think of her on Monday otherwise I'll start an OU degree and get a better job in a couple of years 9/16/2018 ArabOU - M150 - AbuNawaf 2

The truth or falsity of the condition determines which path is taken. True or false Selection always includes a condition that can be evaluated when the program runs (i.e. the plan is executed) to be true or false (this is called a Boolean expression). The truth or falsity of the condition determines which path is taken. a "flow chart" I win the lottery this Saturday True False The condition is like a fork in the road determining which path you take tell my boss what I think of her on Monday start an OU degree 9/16/2018 ArabOU - M150 - AbuNawaf 3

Repetition A repetition instruction allows one or more instructions to be repeated a number of times. While I've got a chance of winning I'll keep putting one foot in front of the other I've got a chance of winning False True put one foot in front of the other Sorry Paula! 9/16/2018 ArabOU - M150 - AbuNawaf 4

An Introduction to programming using JavaScript * 9/16/201807/16/96 An Introduction to programming using JavaScript What is JavaScript (JS)? A Sample Program JavaScript Variables Data types Operators Prompt box Programming for selection (the if statement) Programming for repetition (the while statement) Programming for repetition (the for statement) 9/16/2018 ArabOU - M150 - AbuNawaf 5 5 * 5##

What is the JavaScript? JavaScript is a scripting language JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license JavaScript is used to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, and Opera 9/16/2018 ArabOU - M150 - AbuNawaf 6 6

First program. <script LANGUAGE=‘JavaScript’> tag: Every thing between <script> and </script> is written in a scripting language. The LANGUAGE attribute defines the scripting language, in our case ‘JavaScript’. JavaScript is the default language, so that if no specific language is specified, HTML will assume that the code is JavaScript. </Script> ends the <script> tag. 9/16/2018 ArabOU - M150 - AbuNawaf 7 7

Programming for repetition: the “while” statement Introducing the “while” statement Loops are ways that allow computer to do repetitive calculations or instructions for a certain program. The while statement creates a loop that repeats until the test expression becomes false. The syntax of the while statement is: while (Boolean condition/expression) { one or more statements } The statement part can be a simple statement terminated by a semicolon, or it can be a compound statement enclosed in braces. The expression is mostly a comparison of values, you can use any expression If the Boolean expression is true, the statement part is executed. 9/16/2018 ArabOU - M150 - AbuNawaf 8 8

Introducing the “for” statement (loop) The general form of the for loop is: for (declare and initialize; test; update) statement The for statement uses three control expressions, separated by semicolons. it’s not mandatory to declare values inside the for statement. First, The initialize expression is executed once, before any of the loop statements are executed. Then, the test expression is evaluated and if it is true, the loop is cycled through once. Then, the update expression is evaluated and it is time to check the test expression again. The statement part of the form can be a simple statement or a compound statement. 9/16/2018 ArabOU - M150 - AbuNawaf 9 9

Programming for repetition: the “for” statement Introducing the “for” statement (loop) The for loop enables you to repeat the execution of a block of statements a predetermined number of times. The for loop uses a variable as a counter. To use a JS for loop, you need to know: the starting value of the counter; the final value of the counter for which the loop body is executed; the fixed number by which the counter is increased or decreased after each repetition; the statement(s) which make up the body of the loop (as for a while loop). 9/16/2018 ArabOU - M150 - AbuNawaf 10 10

Arrays Structured data * 9/16/201807/16/96 Arrays Structured data There are many situations where we want to deal with collections of data values that are related to each other in some way. In processing such collections of data values, we will often want to treat each value in a collection in a similar way. In such situations we talk about structured data. In most programming languages the name given to a collection of data values, that are all of the same type, e.g. numeric values or all string values, is an array. 9/16/2018 ArabOU - M150 - AbuNawaf 11 *

* 9/16/201807/16/96 What is an array? An array is a data structure that consists of a list of data values of the same type; for example, numbers or Strings. An array should have a name. Each data value is called an element. The position of the data element in the array is called the index or subscript. Index of an array starts at 0. 9/16/2018 ArabOU - M150 - AbuNawaf 12 *

Declaration and initialisation of arrays.. cont * 9/16/201807/16/96 Declaration and initialisation of arrays.. cont var rainArray = [111, 115, 200, 95, 23, 59, 144, 66, 37] JavaScript interpreter recognizes this is an array because of the square brackets. var rainArray = new Array(12) Reserved word new is used to create an Array object. The number 12 will provide enough memory for the 12 elements that are going to be stored in it. Initial value for the elements of the array is undefined. (See Fig 2.3) 9/16/2018 ArabOU - M150 - AbuNawaf 13 *

Functions Dealing with subtasks in programs * 9/16/201807/16/96 Functions Dealing with subtasks in programs In real life, programs are often very large and have separate subtasks to perform. We need to organize these subtasks. Function is a way to handle and organize these subtasks. 9/16/2018 ArabOU - M150 - AbuNawaf 14 *

Using functions in JavaScript * 9/16/201807/16/96 Using functions in JavaScript One big task may be broken into simpler subtasks. A program is a main task that can be broken down into a collection of subtasks. JavaScript provides functions as a way for handling subtasks. i.e. parseFloat(). 9/16/2018 ArabOU - M150 - AbuNawaf 15 *

Functions with arguments * 9/16/201807/16/96 Functions with arguments General form of a function: function FUNCTION_NAME(PARAMETER_1, PARAMETER_2,..., PARAMETER_n) // Assumes: DESCRIPTION OF ASSUMPTIONS MADE ABOUT PARAMETERS // Returns: DESCRIPTION OF VALUE RETURNED BY FUNCTION { STATEMENTS_TO_PERFORM_(AND_RETURN)_THE DESIRED_COMPUTATION; } 9/16/2018 ArabOU - M150 - AbuNawaf 16 *