1. loops, & arrays.
Chapter 3

2. Before we Begin What do you know about arrays?
Can you have a string, a Boolean, a number, in the same array?
Likes and dislikes about arrays? From Past experiences.
Can Objects be stored in arrays?

3. Arrays Highlights
 The syntax is similar to literal arrays in Java for creating them in a list.
The keyword new is not needed with arrays. (It’s Optional)
You can add elements to the array, as the array is flexible.
The arrays are not limited to the initial size that you create them.
You can remove elements from the array.
Unlike many other popular languages, a JavaScript Array can hold elements of multiple data types, simultaneously.
JavaScript arrays can be viewed as an ordered list.

4. Creating Arrays in JavaScript
We can create arrays in multiple ways.
These first two ways, are the literal way of creating the array.
The new array, will create an empty array of x spaces (if passed a number)
The last method, v3, create’s a new instance of the array, of the string “item” 4 times in the array, like the 2nd example.

5. JavaScript Array Indexes
The default arrays start with an numerical value of 0, then increase to 1,2 etc.
You can start the index at another number, IE: start inserting values at another index other than 0, such as 3… (
Though that can mess things up, if you don’t remember where you started at!
You can call for an element like you would an array in Java arrayName[index];

6. JS Arrays can expand
As we know in languages like Java, C, C++ that arrays are a fixed size in length.
In JavaScript, you can do the following operations with arrays
Method Name
Result
x = arrayName.push(value);
Adds a new value at the end of the array, Returns the new length of the array.
arrayName.pop();
Pop/Removes the value at the end of the array.
arrayName.shift();
Removes the first array element and "shifts" all other elements to a lower index.
arrayName.unshift(value);
Adds a new value to the front, of the array.
arrayName.toString();
Returns the array as a comma separate list.,
arrayName.join(“symbol”);
Similar like “toString()” except, you can specify what separator, goes between each.
arrayName[arrayName.length] = value;
This is a shortcut to putting new items at the end of the array.

7. Sorting Arrays
JavaScript gives us the ability to sort arrays in ascending order.
arrayName.sort();
JavaScript also can reverse the array. However, reverses the order as they are in the array.
arrayName.reverse();
JavaScript can take a string, and split the string based on a delimiter.
arrayName = stringVariable.(“delimiter”);
Delimiter can be a space, comma, dash, etc.

8. Array Length Property
Like Java, Arrays do have properties of the array.
The one that we will be using is:
length
Returns the size of the array + 1
Syntax: arrayName.length
Ex: var exampleArray = [“Java”,”CSS”,HTML”,JavaScript”];
exampleArray.length would return 4.

9. Loops with arrays You can use a for-loop, or a while loop with arrays.
You can also use a for-in loop.
Less variables, but, if you need an index, use the original for-loop!

10. Random Numbers and Strings
True or false: JavaScript has classes of methods
True or false: you can call the method random() by itself in JavaScript?
True or false: Everything (including variables, whether they are strings, numbers etc) in JavaScript is an object in some form?
How can you split strings in JavaScript?
Can you parse parts of strings in JavaScript?

11. Random Numbers True: JavaScript has classes of methods
false: you can call the method random() by itself in JavaScript?
You use the Math.random() to generate a random number from 0 to 1.
This works much the same as it does in Java with no differences.
Example: to generate a number between 0 and 10.
var numberPicked = Math.random() * 10;

12. Splitting Strings
JavaScript variables contain the method for splitting strings into an array of strings.
variableName.split(separator, limit);
What are separator’s?
How would you split the string var test = “Hey, Hi, Hello, Goodbye, Get Out!”
The separator is _____.
You would use: var result = test.split(“,”);
What would happen if you did test = test,split(“”);

13. Team Challenges
Use a blank HTML5 document, to develop these challenges on. You can use alerts/prompts, or document.write to make it visual if you want.
Team 1: Building the game Hangman: Create a list of words (Single words, no spaces), pick a random word, Display the boxes for the word, get the display to show. The correctly guessed letters showing up in the correct spot.
Team 2: Build a Guessing game: Generate a random number between 1 and 1000 and use a loop and/or conditional statements to determine if the user is too high or too low and keep track of the user’s guesses in an array. Find the average of the users' entries and how many tries.

14. Stick AROUND AFTER YOU FINISH
If you have finished one of them, Attempt the other one while waiting for the others to finish.
I’ll be asking one person from each group to show the class their approach and run the code.
Expand on the challenges, if you want to change it up.
Use Prior knowledge, for adding things onto the webpage.