1. Project 1: Using Arrays and Manipulating Strings Essentials for Design JavaScript Level Two Michael Brooks

2. Copyright (c) 2005 Prentice-Hall. All rights reserved. 2 Objectives Use string methods Create and populate an array Sort an array Incorporate array methods Split and join strings Use multi-dimensional arrays

3. Copyright (c) 2005 Prentice-Hall. All rights reserved. 3 Why Would I Do This? String object – holds text  Common example – a variable that holds text String method – used to manipulate string object Array – holds multiple items of data  Element – an individual piece of data  Multidimensional array – an array stored as an element of another array

4. Copyright (c) 2005 Prentice-Hall. All rights reserved. 4 Using String Methods toUpperCase() – returns string in all uppercase letters toUpperCase() charAt() – returns a single character charAt() indexOf() – returns the position of a substring indexOf() substring() – extracts a substring from another string substring()

5. Copyright (c) 2005 Prentice-Hall. All rights reserved. 5 toUpperCase() Method Returns a string in all upper case  toLowerCase() method returns string in all lower case Return

6. Copyright (c) 2005 Prentice-Hall. All rights reserved. 6 charAt() Method Returns a single character  Based on specified position in string  Required argument – specified position Return

7. Copyright (c) 2005 Prentice-Hall. All rights reserved. 7 indexOf() Method Searches a string for a substring  Returns the location where the substring begins  Returns –1 if substring is not found lastIndexOf() method begins searching at the end of the string lastIndexOf() Return

8. Copyright (c) 2005 Prentice-Hall. All rights reserved. 8 lastIndexOf() Method Return

9. Copyright (c) 2005 Prentice-Hall. All rights reserved. 9 substring() Method Returns a substring from a larger string Returns a substring Requires one argument, the starting position  One optional argument, the ending position Return

10. Copyright (c) 2005 Prentice-Hall. All rights reserved. 10 Returning a Substring Return

11. Copyright (c) 2005 Prentice-Hall. All rights reserved. 11 Creating and Populating Arrays Each element in array represented by an index, placed within a bracket  window[1] refers to the second element in the “window” array Array() Constructor method Using numbered array elements Applying named array elements

12. Copyright (c) 2005 Prentice-Hall. All rights reserved. 12 array() Constructor Method Creates a new array Can specify length, or number of elements  Can also create object without specifying length Can use constructor to specify elements in array Return

13. Copyright (c) 2005 Prentice-Hall. All rights reserved. 13 Using Numbered Array Elements Populate by specifying index and assigning value.  Can be populated at design time or run timepopulated at design time Elements can be used in an output statement or assigned to variables. Return

14. Copyright (c) 2005 Prentice-Hall. All rights reserved. 14 Populate at Design Time Return

15. Copyright (c) 2005 Prentice-Hall. All rights reserved. 15 Applying Named Array Elements Array can contain variables of different data types Populate, update, or output elements by referring to name rather than index Return

16. Copyright (c) 2005 Prentice-Hall. All rights reserved. 16 Sorting Arrays sort() method reorders the contents of an array  By default, sorted in ascending order  Custom sort order can be specified Older browsers may require that a sort order be specified

17. Copyright (c) 2005 Prentice-Hall. All rights reserved. 17 Incorporating Array Methods pop() method returns last element in array  Also removes last element from array push() method adds element to end of array reverse() method reverses the order of all elements in an array shift() method removes first element in array  Other elements move up one position in array unShift() method adds element before the first element  Other elements move down one position in array

18. Copyright (c) 2005 Prentice-Hall. All rights reserved. 18 Incorporating Array Methods (cont) shift() method removes first element in array  Other elements move up one position in array unShift() method adds element before the first element  Other elements move down one position in array

19. Copyright (c) 2005 Prentice-Hall. All rights reserved. 19 Splitting and Joining Strings Delimiter – marks the beginning or end of a unit of data  Can be a single character or group of characters  Commas, tabs, and spaces most commonly used split() method – splits a string into an array split() join() method – joins elements in an array into a string join()

20. Copyright (c) 2005 Prentice-Hall. All rights reserved. 20 split() Method Splits an string into an array Splits an string  Each unit of data in string becomes an array element You must specify delimiter Return

21. Copyright (c) 2005 Prentice-Hall. All rights reserved. 21 Splitting a String Return

22. Copyright (c) 2005 Prentice-Hall. All rights reserved. 22 join() Method Joins all text elements in array into a string You must specify the character used to separate elements Return

23. Copyright (c) 2005 Prentice-Hall. All rights reserved. 23 Array Terminology Stack – last item added to array is first to be retrieved  A Last In, First Out (LIFO) approach Queue – first item added to array is first to be retrieved  A First In, First Out (FIFO) approach

24. Copyright (c) 2005 Prentice-Hall. All rights reserved. 24 Using a Multi-Dimensional Array An array stored within an array Useful with large chunks of data that need to be divided into subcategories

25. Copyright (c) 2005 Prentice-Hall. All rights reserved. 25 A Multi-Dimensional Array Return