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.

Slides:



Advertisements
Similar presentations
Introduction to Arrays Chapter What is an array? An array is an ordered collection that stores many elements of the same type within one variable.
Advertisements

COM311H Zheng, School of C&M, UUJ1 Dynamic Web Authoring JavaScript Basics (Array and Function)
Tonight’s JavaScript Topics 1 Conditional Statements: if and switch The Array Object Looping Statements: for, while and do-while.
String and Lists Dr. Benito Mendoza. 2 Outline What is a string String operations Traversing strings String slices What is a list Traversing a list List.
Programming with Alice Computing Institute for K-12 Teachers Summer 2011 Workshop.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Using Data Types (No Audio Component) © Dr. David C. Gibbs
Lecture 7: Arrays Yoni Fridman 7/9/01 7/9/01. OutlineOutline ä Back to last lecture – using the debugger ä What are arrays? ä Creating arrays ä Using.
CS 106 Introduction to Computer Science I 02 / 22 / 2008 Instructor: Michael Eckmann.
Understanding Arrays and Pointers Object-Oriented Programming Using C++ Second Edition 3.
CS 106 Introduction to Computer Science I 10 / 09 / 2006 Instructor: Michael Eckmann.
Concatenation MATLAB lets you construct a new vector by concatenating other vectors: – A = [B C D... X Y Z] where the individual items in the brackets.
Lecture 5 of Computer Science II Arrays Instructor: Mr.Ahmed Al Astal.
CS 106 Introduction to Computer Science I 02 / 19 / 2007 Instructor: Michael Eckmann.
SM1205 Interactivity Topic 06: Iteration and Multiple Objects Spring 2010SCM-CityU1.
Multiply and Divide Decimals
Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Ten String Manipulation and Menus.
Programming Games Computer science big ideas. Computer Science jargon. Show virtual dog Homework: [Catch up: dice game, credit card or other form.] Plan.
JS Arrays, Functions, Events Week 5 INFM 603. Agenda Arrays Functions Event-Driven Programming.
Using Object-Oriented JavaScript CST 200- JavaScript 4 –
COMPUTER SCIENCE FEBRUARY 2011 Lists in Python. Introduction to Lists Lists (aka arrays): an ordered set of elements  A compound data type, like strings.
Array Object. he following code creates an Array object called myCars: 1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab";
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Flag Quiz Application Introducing One-Dimensional Arrays and ComboBox es.
 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 11 - JavaScript: Arrays Outline 11.1 Introduction 11.2 Arrays 11.3 Declaring and Allocating Arrays.
MOM! Phineas and Ferb are … Aims:
11 Finding Winners Using Arrays Session 8.2. Session Overview  Find out how the C# language makes it easy to create an array that contains multiple values.
Chapter 6: More JavaScript CIS 275—Web Application Development for Business I.
Arrays. Introduction This chapter serves as an introduction to the important topic of data structures. Arrays are data structures consisting of related.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Using Client-Side Scripts to Enhance Web Applications 1.
Introduction to Arrays in Java Corresponds with Chapter 6 of textbook.
Java Script: Arrays (Chapter 11 in [2]). 2 Outline Introduction Introduction Arrays Arrays Declaring and Allocating Arrays Declaring and Allocating Arrays.
Java SE 8 for Programmers, Third Edition
VB Games: Preparing for Memory Brainstorm controls & events Parallel structures (again), Visibility, LoadPicture, User-defined procedures, Do While/Loop,busy.
Collecting Things Together - Lists 1. We’ve seen that Python can store things in memory and retrieve, using names. Sometime we want to store a bunch of.
Built-in Data Structures in Python An Introduction.
Chapter 10 Hashing. The search time of each algorithm depend on the number n of elements of the collection S of the data. A searching technique called.
Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140.
Creating Web Documents catch-up JavaScript slide show tools redirection.
XP Tutorial 2 New Perspectives on JavaScript, Comprehensive1 Working with Operators and Expressions Creating a New Year’s Day Countdown Clock.
More Sequences. Review: String Sequences  Strings are sequences of characters so we can: Use an index to refer to an individual character: Use slices.
COMPUTER PROGRAMMING 2 ArrayLists. Objective/Essential Standard Essential Standard 3.00Apply Advanced Properties of Arrays Essential Indicator 3.02 Apply.
Language Find the latest version of this document at
Tutorial 11 1 JavaScript Operators and Expressions.
Special Methods in Java. Mathematical methods The Math library is extensive, has many methods that you can call to aid you in your programming. Math.pow(double.
ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming javascript arrays.
JavaScript and Ajax (JavaScript Functions) Week 5 Web site:
JavaScript and Ajax (JavaScript Arrays) Week 5 Web site:
Introduction to Arrays. Learning Objectives By the end of this lecture, you should be able to: – Understand what an array is – Know how to create an array.
Expressions and Data Types Professor Robin Burke.
Chapter 9 Introduction to Arrays Fundamentals of Java.
Magic 8 ball. "Design and write a python program that emulates a Magic Eight Ball. Your program should continually prompt the user to enter a question.
JavaScript Tutorial. What is JavaScript JavaScript is the programming language of HTML and the Web Programming makes computers do what you want them to.
Click to edit Master text styles Stacks Data Structure.
Arrays. What is an array? An array is a collection of data types. For example, what if I wanted to 10 different integers? int num1; int num2; int num3;
String and Lists Dr. José M. Reyes Álamo. 2 Outline What is a string String operations Traversing strings String slices What is a list Traversing a list.
Python Fundamentals: Complex Data Structures Eric Shook Department of Geography Kent State University.
String and Lists Dr. José M. Reyes Álamo.
Round the answer to the nearest hundredth. Divide Click Here
Lecture 5 of Computer Science II
FOP: JavaScript Arrays(Lists)
Multiply Decimals.
JavaScript Selection Statement Creating Array
Data Structures – 1D Lists
Functions, Regular expressions and Events
String and Lists Dr. José M. Reyes Álamo.
Programming Control Structures with JavaScript Part 2
Loops and Arrays in JavaScript
Introduction to Computer Science
Introduction to Computer Science
Introduction to Computer Science
Presentation transcript:

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

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

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

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

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] + ' ' );  }

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 ( ) {   }

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

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

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

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

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 );

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