Beginning JavaScript

1. Beginning JavaScript 4th Edition

2. Chapter 5 JavaScript—An Object-Based Language

3. Chapter 5 Objectives • What are JavaScript objects? • How do you create a JavaScript object? • What are some of the useful built-in JavaScript objects?

4. What are JavaScript objects? • A JavaScript object is a collection of properties and methods that are grouped together with a single name. • An object is used to gather together everything needed for a particular task.

5. How do you create a JavaScript object? • var myArray = new Array();- the new keyword tells JavaScript that you want to create a new object- the Array() constructor function tells JavaScript what kind of object you want to create- a reference to the new object is stored in a variable named myArray

6. Primitive Data • Primitive data, such as text and numbers, is the most basic data possible in JavaScript.With primitive data, the variable holds the data’s actual value:var myNumber = 23;

7. Reference Data • A variable assigned to an object holds a reference to the memory address where the data can be found, not the actual data itself.var myArray = new Array(“Paul”, “Jeremy”, “Nick”);

8. Accessing an object’s properties • To access the value of a property of an object:- name of the variable referencing the object- dot- name of the propertymyArray.length

9. Calling an object’s methods • To call the methods of an object:- name of the variable referencing the object- dot- name of the methodmyArray.sort();

10. JavaScript Native Objects • String • Math • Array • Date

11. String Object • A String is just a series of individual characters. • Each character has a position, or index. • The first position or index is 0.

12. String Object • Properties and Methods:- vast number of properties and methods- most common and least complex are covered in this chapter

13. String Object • Property:length – the number of characters in the stringvar myName = new String(“Jeremy");document.write(myName.length);

14. String Object • Method:charCodeAt() – returns the Unicode character code for the character at a specific position in the stringvar myName = new String("Paul");var firstChar = myName.charCodeAt(0);alert(firstChar);

15. String Object • Method:fromCharCodeAt() – converts Unicode character codes to characters to create a stringvar myString;myString = String.fromCharCode(65,66,67);alert(myString);

16. String Object • Method:indexOf() – finds the index position of a substring inside a stringvar myString = "Paul";var found = myString.indexOf("a");

17. String Object • Method:lastIndexOf() – finds the index position of a substring inside a stringvar myString = "Paul";var found = myString.lastIndexOf("u");

18. String Object • Methods:substr() and substring()– both methods copy part of a string, but they differ in the parameters usedvar myString = "JavaScript";var mySubString = myString.substring(0,4);

19. String Object • Methods:toLowerCase() and toUpperCase()– both methods return a string converted either to lowercase or to uppercasevar myString = "JAVASCRIPT";var myString = myString.toLowerCase();

20. Array Object • An array is an object that can contain more than one item of data at the same time

21. Array Object • Property:length – the number of items in an arrayvar myNumber = new Array(2,4);alert (myNumber.length);

22. Array Object • Method:concat() – concatenates two arraysvar myNumber = new Array(2,4);var myNumberA = new Array(3,5);var concatArray = myNumber.concat(myNumberA);

23. Array Object • Method:slice() – copy part of an arrayvar names = new Array("Paul","Sarah","Louise","Adam","Bob");var slicedArray = names.slice(1,3);

24. Array Object • Method:join() – convert an array to a stringvar names = new Array("Paul","Sarah","Louise","Adam","Bob");var nameList = names.join(,);

25. Array Object • Method:sort() – put array in ascending ordervar names = new Array("Paul","Sarah","Louise","Adam","Bob");names.sort();

26. Array Object • Method:reverse() – put array in descending ordervar names = new Array("Paul","Sarah","Louise","Adam","Bob");names.reverse();

27. Math Object • The Math object provides a number of useful mathematical functions and number manipulation methods.

28. Math Object • Property:PI – the value of the mathematical constant PI (3.14159… and so on) var myPi = Math.PI;alert (myPi);

29. Math Object • Method:abs() – returns the absolute value of the number passed as a parameter var myNumber = Math.abs(-2);alert (myNumber);

30. Math Object • Method:ceil() – rounds up to the next largest numbervar myNumber = Math.ceil(103.1);alert (myNumber);

31. Math Object • Method:floor() – removes any numbers after a decimal point and then rounds downvar myNumber = Math.floor(103.1);alert (myNumber);

32. Math Object • Method:round() – rounds up if decimal part is 0.5 or greater, otherwise rounds downvar myNumber = Math.round(103.1);alert (myNumber);

33. Math Object • Summary of Rounding Methods:

34. Math Object • Method:random() – returns a random floating-point number in the range between 0 and 1var myNumber = Math.random() * 7;alert (myNumber);

35. Math Object • Method:pow() – raises a number to a specific powervar myNumber = Math.pow(2,4);alert (myNumber);

36. Date Object • The Date object handles everything to do with date and time in JavaScript.

37. Date Object • Creating a Date object:var myDate = new Date();

38. Date Object • Getting Date Values:

39. Date Object • Setting Date Values:

40. Date Object • Getting Time Values: * getHours() * getMinutes() * getSeconds() * getMilliseconds() * toTimeString()

41. Date Object • Setting Time Values: * setHours() * setMinutes() * setSeconds() * setMilliseconds()