Download presentation

Presentation is loading. Please wait.

Published byDarius Merriwether Modified about 1 year ago

1
JavaScript Arrays Arrays allow us to store lists of items Arrays are created with square brackets: var a = []; // an empty array var b = [10]; // an array with one item var c = [10, “Hello”, 7]; // an array with 3 items

2
We saw each character in a string had an index So does each element in an array We use square brackets to access elements too: var a = [10, 12, 14, 7]; var b = a[0]; // the first element, i.e. 10 var c = a[3]; // the 4 th element, i.e. 7 Note that indices start from zero Not from 1, as you might expect

3
We can also replace items in the array Using the same square brackets var a = [10, 5, 27]; a[0] = 11; // replaces the first item a[2] = “Hello”; // replaces the last item

4
We can append new items to the end Using the.push() function: a.push(“World”); // adds a string to the end of the array And also we can remove the last item Using the.pop() funtion: a.pop(); // Removes the last item

5
The.length property tells us how many items var a = [10, 11, 12]; var i = a.length; // length will be 3 And this lets us loop over the array items A for loop is perfect: for (var i = 0; i < a.length; i = i + 1) { $('body').append( ' ' + a[i] + ' ' ); }

6
For loop refresher for ( ; ; ) { } First the code is executed Then it loops, checking each time After each loop, the code is executed It's just like shorthand for a while loop: while ( ) { }

7
Timing JavaScript is often used for animation To do this, we need to keep track of time: setInterval( function, 1000 ); The setInterval() function sets up a time event Just like click() or submit() events Only this event is called every so many milliseconds Milliseconds are thousandths of a second So our example above executes every second

8
Example: rotating text We are going to use setInterval() To rotate through an array of strings And display each one in turn This is overly simple, but the technique is: Like those annoying advertising banners Or those ticker-tapes that show stock market values

9
Random numbers Computers only do what they are told In particular, they can only make logical decisions But we can fake a bit of independent thought Using random numbers In the last example the text rotates in order But with random numbers we can vary that

10
Math.random() The Math package contains math functions A package is a collection of related function We want to look at Math.random() This returns a different number every time we call it The number is always a decimal between 0 and 1 It can return 0, but it always returns slightly less than 1

11
So we have a random number between 0 and 1 But arrays are numbered from 0 to length So we can multiply the random number by length: var index = Math.random() * array.length; Unfortunately, index is still a decimal And arrays are indexed by whole numbers (i.e. there is no item at array index 1.75) So we need to round the number Math.floor() rounds down to the nearest whole number var index = Math.floor( Math.random() * array.length );

12
Example: random text This is largely the same as before… We are going to use setInterval() To rotate through an array of strings But this time we will pick the strings at random

Similar presentations

© 2017 SlidePlayer.com Inc.

All rights reserved.

Ads by Google