IS2802 Introduction to Multimedia Applications for Business Lecture 4: JavaScript, Loops, and Conditional Statements Rob Gleasure

Lecture Outline Comments Conditional statements Loops Objects Arrays

Comments As with HTML and CSS, comments are important to ensure the code you write is easy to understand for other programmers (or yourself, if you are writing large volumes code or complicated programs) It is also useful for deactivating chunks of code during debugging

Comments There are two ways of writing comments in JavaScript Function1 (){ statement1; // this is a one line comment statement2; /* this is a multi-line comment */ }

Conditional Statements These are used in conjunction with some comparison operator to determine whether a piece of code is executed The syntax of these statements will look like: condition_statement_type (condition){ statement; } The most common of these statements are ‘if’ statements

If Statements The basic syntax of an ‘if’ statement will look like: if (condition){ // statements in here } This may also be expanded with the addition of ‘else’ conditions: if (condition){ // statements in here } else if (condition){ // statements in here } else { // statements in here }

Loops Loops are powerful and extremely important things in programming. They are used in control of program flow, searching, iteration through data-sets and files, amongst many other things We will cover two kinds of loops 1. While loops 2. For loops Loops will contain 2 key components  a conditional statement or ‘stopping condition’  a number of statements to be executed

While Loops While loops are condition-tested loops While loops take the following basic format while(condition returns true){ // code }  the piece of code will run over and over again until the condition returns false Note: the condition will only be checked after each iteration of the code – it is not continuously checking while running the code inside

While Loops Often (but not always) at least one of the statements will alter a variable involved in the stopping condition For example: var x = 0; while(x < 10){ document.write(x) x++; }

A Warning About While Loops An extremely common reason why programs crash is because an infinite loop occurs. This is when it becomes impossible for the stopping condition to occur For example var x = 0; while (x < 10){ y = y+x; document.write(x); } x++;

For Loops For Loops are counted loops. They are used when you need to do a set of operations many times For loops have 4 main components: 1. The counter variable: a variable is created and used to record how many times the for loop has looped (the letter ‘i’ is normally used for this) 2. The conditional statement. As with the while loop, this decides whether the loop is run again (usually involves the counter variable) 3. The increment. This is where the counter variable is incremented after every loop. 4. The code: This is the collection of statements executed every time the loop runs.

For Loops For loop structure For (i = 0; i < numOfTimesToDoLoop; i++){ statement1; statement2; }

Objects JavaScript is an Object Oriented Programming (OOP) language An object is basically just a template for a type of data which gives a standard list of actions (functions) and values (properties) which it will contain Properties are variables which an instance of an object contains  These are referenced by giving the instance name, followed by a full stop, followed by the property name, e.g. myObj.propName Functions are core to the object’s functionality  these are referenced by giving the instance name, followed by a full stop, followed by the function name, e.g. myObj.functName()

Objects The object may then be instantiated, and that instance is assigned values  This instantiation requires we call a special constructor function (we’ll come back to this) There are 3 categories of built-in JavaScript object  General objects e.g. String object, Array object, Math object  Browser objects e.g. Window object, Location object, Navigator object  DOM objects e.g. Document object, HTMLElement object, Style object

Objects In addition to the built-in objects in JavaScript, you can also build your own  We won’t go into this in detail, but you can read more about creating your own objects at and at

Arrays An array is an object! It is basically predefined to be a special type of variable which can store a collection of other variables Arrays are ordered – each variable stored within an array has a number associated with it  This number can then be used to access the variables within the array

Arrays As JavaScript Arrays are objects, they have to be created using a special constructor function e.g.Var myArray = new Array(); Each value in the array may then be entered individually e.g.myArray[0] = “apples"; myArray[1] = “oranges"; myArray[2] = “lemons";

Arrays These values may then be referenced according to their number e.g.document.write(myArray[1]); Arrays can store pretty much any variable type (even other arrays) A complete list of array properties and methods can be found at These can be used with any array we have created, e.g. we can refer to myArray.length or we call the function myArray.join()

JavaScript Exercise Open Notepad, copy in the following basic HTML template, and save it as lecture_4_exercise.html // //

JavaScript Exercise In the  Create an array called shopping_list which stores the three strings milk, cereal, and bread In the  Write a for-loop that prints out each element of shopping_list (use the.length property to specify the number of iterations of the loop)  Write an if-statement which checks the length of myArray and uses document.write() to output either “The shopping list has three or less items” or “The shopping list has more than three items”

References and Further Reading General JavaScript tutorials   List of built-in JavaScript objects 