Beginning JavaScript
-
Upload
dawn-henson -
Category
Documents
-
view
33 -
download
1
description
Transcript of Beginning JavaScript
![Page 1: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/1.jpg)
Beginning JavaScript
4th Edition
![Page 2: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/2.jpg)
Chapter 5
JavaScript—An Object-Based Language
![Page 3: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/3.jpg)
Chapter 5 Objectives
What are JavaScript objects?
How do you create a JavaScript object?
What are some of the useful built-in JavaScript objects?
![Page 4: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/4.jpg)
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.
![Page 5: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/5.jpg)
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
![Page 6: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/6.jpg)
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;
![Page 7: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/7.jpg)
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”);
![Page 8: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/8.jpg)
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 property
myArray.length
![Page 9: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/9.jpg)
Calling an object’s methods
To call the methods of an object:
- name of the variable referencing the object- dot- name of the method
myArray.sort();
![Page 10: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/10.jpg)
JavaScript Native Objects
String
Math
Array
Date
![Page 11: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/11.jpg)
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.
![Page 12: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/12.jpg)
String Object
Properties and Methods:
- vast number of properties and methods
- most common and least complex are covered in this chapter
![Page 13: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/13.jpg)
String Object
Property:
length – the number of characters in the string
var myName = new String(“Jeremy");document.write(myName.length);
![Page 14: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/14.jpg)
String Object Method:
charCodeAt() – returns the Unicode character code for the character at a specific position in the string
var myName = new String("Paul");var firstChar = myName.charCodeAt(0);alert(firstChar);
![Page 15: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/15.jpg)
String Object Method:
fromCharCodeAt() – converts Unicode character codes to characters to create a string
var myString;myString = String.fromCharCode(65,66,67);alert(myString);
![Page 16: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/16.jpg)
String Object
Method:
indexOf() – finds the index position of a substring inside a string
var myString = "Paul";var found = myString.indexOf("a" );
![Page 17: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/17.jpg)
String Object
Method:
lastIndexOf() – finds the index position of a substring inside a string
var myString = "Paul";var found = myString.lastIndexOf("u" );
![Page 18: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/18.jpg)
String Object Methods:
substr() and substring()– both methods copy part of a string, but they differ in the parameters used
var myString = "JavaScript";var mySubString = myString.substring(0,4);
![Page 19: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/19.jpg)
String Object Methods:
toLowerCase() and toUpperCase()– both methods return a string converted either to lowercase or to uppercase
var myString = "JAVASCRIPT";var myString = myString.toLowerCase();
![Page 20: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/20.jpg)
Array Object
An array is an object that can contain more than one item of data at the same time
![Page 21: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/21.jpg)
Array Object
Property:
length – the number of items in an array var myNumber = new Array(2,4);alert (myNumber.length);
![Page 22: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/22.jpg)
Array Object Method:
concat() – concatenates two arrays var myNumber = new Array(2,4);var myNumberA = new Array(3,5);var concatArray = myNumber.concat(myNumberA);
![Page 23: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/23.jpg)
Array Object Method:
slice() – copy part of an array var names = new Array("Paul","Sarah","Louise","Adam","Bob");var slicedArray = names.slice(1,3);
![Page 24: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/24.jpg)
Array Object Method:
join() – convert an array to a string var names = new Array("Paul","Sarah","Louise","Adam","Bob");var nameList = names.join(,);
![Page 25: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/25.jpg)
Array Object Method:
sort() – put array in ascending order var names = new Array("Paul","Sarah","Louise","Adam","Bob");names.sort();
![Page 26: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/26.jpg)
Array Object Method:
reverse() – put array in descending order var names = new Array("Paul","Sarah","Louise","Adam","Bob");names.reverse();
![Page 27: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/27.jpg)
Math Object
The Math object provides a number of useful mathematical functions and number manipulation methods.
![Page 28: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/28.jpg)
Math Object
Property:
PI – the value of the mathematical constant PI (3.14159… and so on)
var myPi = Math.PI;alert (myPi);
![Page 29: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/29.jpg)
Math Object
Method:
abs() – returns the absolute value of the number passed as a parameter
var myNumber = Math.abs(-2);alert (myNumber);
![Page 30: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/30.jpg)
Math Object
Method:
ceil() – rounds up to the next largest number
var myNumber = Math.ceil(103.1);alert (myNumber);
![Page 31: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/31.jpg)
Math Object
Method:
floor() – removes any numbers after a decimal point and then rounds down
var myNumber = Math.floor(103.1);alert (myNumber);
![Page 32: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/32.jpg)
Math Object Method:
round() – rounds up if decimal part is 0.5 or greater, otherwise rounds down
var myNumber = Math.round(103.1);alert (myNumber);
![Page 33: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/33.jpg)
Math Object
Summary of Rounding Methods:
![Page 34: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/34.jpg)
Math Object Method:
random() – returns a random floating-point number in the range between 0 and 1
var myNumber = Math.random() * 7;alert (myNumber);
![Page 35: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/35.jpg)
Math Object
Method:
pow() – raises a number to a specific power
var myNumber = Math.pow(2,4);alert (myNumber);
![Page 36: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/36.jpg)
Date Object
The Date object handles everything to do with date and time in JavaScript.
![Page 37: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/37.jpg)
Date Object
Creating a Date object:
var myDate = new Date();
![Page 38: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/38.jpg)
Date Object
Getting Date Values:
![Page 39: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/39.jpg)
Date Object
Setting Date Values:
![Page 40: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/40.jpg)
Date Object Getting Time Values:
* getHours()
* getMinutes()
* getSeconds()
* getMilliseconds()
* toTimeString()
![Page 41: Beginning JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022081603/56813739550346895d9ec9bf/html5/thumbnails/41.jpg)
Date Object Setting Time Values:
* setHours()
* setMinutes()
* setSeconds()
* setMilliseconds()