Javascript core objects

Review question

Which of the following is TRUE concerning a variable declared globally?

a. The variable cannot be accessed anywhere in the script.

b. The variable can be accessed only within a function.

c. The variable can be accessed only outside of a function.

d. The variable can be accessed anywhere within the script.

Review question

Which of the following is TRUE concerning a variable declared globally?

a. The variable cannot be accessed anywhere in the script.

b. The variable can be accessed only within a function.

c. The variable can be accessed only outside of a function.

d. The variable can be accessed anywhere within the script.

Review question

JavaScript pass variables by which of the following?

a. By neither reference nor value

b. By value

c. By reference

d. By value and reference

Review question

JavaScript pass variables by which of the following?

a. By neither reference nor value

b. By value

c. By reference

d. By value and reference

Javascript core objects

User-defined objects (introduction last week)

Javascript built-in objects (core objects)

Core objects

Array Object Boolean Object Date Object Function Object Math Object Number Object RegExp Object String Object

Working With Arrays

Arrays are related sets of data Arrays can hold many types of data

NumericStringBooleanObjectsArrays

Arrays are ordered by an index number Arrays can be sorted

Defining an Array

Arrays can be created in several different ways1. var highScores = new Array(100,200,300,400,500);2. var highScores = new Array();

highScores[0] = 100;highScores[1] = 200;

3. var highScores = new Array(5);highScores[0] = 100;highScores[1] = 200;highScores[2] = 300;highScores[3] = 400;highScores[4] = 500;

Array properties

Length: return the number of elements in the array

Prototype: extends the definition of the array by adding properties and methods

Constructor: reference to the object’s constructor

Example

</script>

+ " elements<br>");</script>

Array Methods

concat() – merges two or more arrays into one arrayjoin() - converts all items in an array to a string with

a delimeterpop() – pops or removes the last element from an

array and returns it to the calling statementpush() – pushes or adds an new element onto the

end of an existing arrayreverse() – reverses the order of the elements in an

existing arrayshift() – pops the first element of an array returns it

to the calling statement

Array Methods(continued)

unshift() – pushes a new element onto the beginning of an existing array and returns the new length of the array

slice() – inserts a range of array elements into a new array

splice() – removes or deletes elements from an existing array

sort() – rearranges the elements of an array in ascending alphabetical order

Example for Array

<body>

customer = new Array ();

customer[0]="Wu Cheng En";

customer[1]="Eric Kwok";

customer[2]="Jane Yu";

customer[3]="Yukio Ashihara";

document.write("Existing customers: "+customer.sort().join(“; "));

</script>

</body>

More example for Array

customer = new Array ();

customer[0]="Wu Cheng En";

customer[1]="Eric Kwok";

customer[2]="Jane Yu";

customer[3]="Yukio Ashihara";

document.write("Existing customers: "+customer.sort().slice(0,2).join(", "));

</script>

</body>

</html>

More example for Array

Shift/unshift methods

Splice method

Review question

Which of the following is TRUE when creating a user-defined object?

a. A user-defined object cannot have any properties.

b. A user-defined object can have only 1 property.

c. A user-defined object can have a maximum of three properties.

d. A user-defined object can have multiple properties

Review question

Which of the following is TRUE when creating a user-defined object?

a. A user-defined object cannot have any properties.

b. A user-defined object can have only 1 property.

c. A user-defined object can have a maximum of three properties.

d. A user-defined object can have multiple properties

Review question

Which of the following is the correct syntax to sort an array called Student?

a. Student.sort

b. Student.sort()

c. Student sort

d. Student sort()

Review question

Which of the following is the correct syntax to sort an array called Student?

a. Student.sort

b. Student.sort()

c. Student sort

d. Student sort()

Date objects

Create a Date object

var curDate = new Date();

var curDate = new Date (<Date format>);

Example of <Date format>:

July 4, 2004: 6:25:22

July 4, 2004

2004,7,4

Date Object MethodsgetDate() Gets the current date

getDay() Gets the current daygetHours() Gets the current hourgetMinutes() Gets the current number of minutesgetMonth() Gets the current monthgetSeconds() Gets the current number of secondsgetTime() Gets the current timegetTimezoneOffset() Gets the difference (in minutes) from the current

timezone and GMTgetYear() Gets the current year (two digits)getFullYear() Gets the current year (four digits)parse() Gets the milliseconds elapsed since 1st January 1970setDate() Sets the current datesetDay() Sets the current daysetHours() Sets the current hoursetMinutes() Sets the current number of minutessetMonth() Sets the current monthsetSeconds() Sets the current number of secondssetTime() Sets the current timesetYear() Sets the current year (two digits)setFullYear() Sets the current year (four digits)toGMTString() Gets a date in GMT formattoLocaleString() Formats a date based on the internationalized locale

Using the Date Object

Using the methods associated with the Date object require the use of the Date object constructor: var curDate = new Date();

Once you have a Date object, you can get different parts of the current date such as month, day, year, hours, minutes, seconds, etc.

You can also use methods to set the different parts of the date

Accessing methods or properties are accomplished by using the object.method or object.property syntax

Using the Date Object to Display the Date and Time

// Current date variables

var currentDate=new Date();

var dayOfTheWeek=currentDate.getDay();

var month=currentDate.getMonth();

var day=currentDate.getDate();

var year=currentDate.getYear();

var hours=currentDate.getHours();

var minutes=currentDate.getMinutes();

var seconds=currentDate.getSeconds();

// Day text

var dayNames=new Array(7);

dayNames[0]="Sun";

dayNames[1]="Mon";

dayNames[2]="Tue";

Using the Date Object to Display the Date and Time (continued)

dayNames[3]="Wed"; dayNames[4]="Thu"; dayNames[5]="Fri"; dayNames[6]="Sat"; // Month text var monthNames=new Array(12); monthNames[0]="Jan"; monthNames[1]="Feb"; monthNames[2]="Mar"; monthNames[3]="Apr"; monthNames[4]="May"; monthNames[5]="Jun"; monthNames[6]="Jul"; monthNames[7]="Aug"; monthNames[8]="Sep"; monthNames[9]="Oct"; monthNames[10]="Nov"; monthNames[11]="Dec"; // Display date and time document.write("<p>Current date: "+dayNames[dayOfTheWeek]+" "+day+" "+monthNames[month]+"

"+year); document.write("<p>Current time: "+hours+":"+minutes+":"+seconds); </script>

More example with Date object

Customizing the Date object with prototype property

Math objects

Allows you to work with more advanced arithmetic calculations.Don’t need to create an instance of the Math object with new keyword.

Common Math Object Properties

E Numeric approximation to Euler’s constant e - approximately 2.71828.

LN10 Numeric approximation to natural logarithm of 10 – approximately 2.302585.

LN2 Numeric approximation to natural logarithm of 2 – approximately 0.693147.

LOG10E Numeric approximation to logarithm of e base 10 – approximately 0.43429.

LOG2E Numeric approximation to logarithm of e base 2 – approximately 1.442695.

PI Numeric approximation to , the ratio of a circle’s circumference to its diameter – approximately 3.14159.

SQRT2 Numeric approximation to the square root of 2, approximately 1.4142.

SQRT1_2 Numeric approximation to the square root of ½, approximately 0.7071.

Common Math Object Methodsabs(n) Returns the absolute value of n.

acos(n) Returns the arc-cosine of n.asin(n) Returns the arc-sine of n.atan(n) Returns the arc-tangent n.ceil(n) Returns n if n is an integer, or the next

integer above n if n is real.cos(n) Returns the cosine of n.exp(n) Returns the value of e to the power of n.floor(n) Returns n if n is an integer, or the next

integer below n if n is real.log(n) Returns the value of the natural logarithm of n.max(m, n) Returns m if m>n otherwise returns n.min(m, n) Returns m if m<n otherwise returns n.pow(m, n) Raises m to the power of n.random() Returns a pseudo-randomly generated floating

point number between 0 and 1.round(n) Rounds up n to the nearest integer.sin(n) Returns the sine of n.sqrt(n) Returns the square root of n.

Example for Math object

var slogan=new Array(10);

slogan[0]="WizBank - excellence in customer service";

slogan[1]="WizBank - the choice of tomorrow's generation";

slogan[2]="WizBank - future financial services today";

slogan[3]="WizBank - bringing you the best in technology";

slogan[4]="WizBank - customer service with a smile";

slogan[5]="WizBank - 6% home loans (first 25 customers only)";

Example for Math objects

slogan[6]="WizBank - discount credit card rates until tomorrow"; slogan[7]="WizBank - serving you financially"; slogan[8]="WizBank - #1 in finance for homes"; slogan[9]="WizBank - mortgages are our business"; var subscript=Math.floor(Math.random()*10); document.write("<p>"+slogan[subscript].bold()+"</p>"); </script>

Strings

String objects are defined in JavaScript by a pair of single or double quotes.

For example:‘This is a string.’“This string contains alpha and numeric characters - !@#$%^&*() 1234567890”

Strings (continued)

String objects have many methods by which they can be manipulated. Strings are often used to build and update live pages in HTML. Properties of strings can be used to validate data, for example, using the length property of a string can determine if too many characters have been entered into a text field.

if(document.entryform.phoneNumber.value.length > 7){

window.alert(“Invalid Phone Number!”);}

String Objects

A string object encapsulates the data, methods and properties of strings.

Data – an ordered set of characters

Method – converting case of string, extracting portions of a string, etc.

Property – length of a string in characters

Creating Strings

Strings can be created implicitly or explicitly

Implicitly: (string literal)var myString = “This is an implicit string.”;

Explicitly: (string object)var myString = new String(“This is an explicit string.”);

Creating Strings

Creating Strings (continued)

if (customer1.toString()==customer2.toString()) { document.write("<p>customer1.toString() and customer2.toString() are

identical.</p>"); } else{ document.write("<p>customer1.toString() and customer2.toString() are

different.</p>"); } </script>

Working With Properties

String objects have two properties that string literals do not have.

1. Constructor – customer1.constructorAny public code used to create the object would be displayed.

2. Prototype – myString.prototype.dateCreated = “01/01/2004”Window.alert(myString.dateCreated)

The length property is common to string literals and string objects.

var stringLiteral = “This is a string literal.”;window.alert(stringLiteral.length);

Using String Properties

Using String Properties (continued)

else { document.write("<p>customer3 and customer4 are different in length.</p>"); } if (customer1.toString().length==customer2.toString().length) { document.write("<p>customer1.toString() and customer2.toString() are

identical in length.</p>"); } else { document.write("<p>customer1.toString() and customer2.toString() are

different in length.</p>"); } </script> </body></html>

Manipulating StringsStrings can be manipulated in a number of ways including:changing the casebreaking apart a string into smaller partsextracting sub-strings

This manipulation is possible because JavaScript treats a string as an array. For example, var jsString = “A JavaScript string” has the following subscript values:

A J a v a S c r i p t s t r i n g0 1 2 3 4 5 6 7 8 9 1

String methods

charAt(index)

substring(beginPos, endPos)

toLowerCase()

toUpperCase()

indexOf(substr)

lastIndexOf(substr)

Using String Methods

Using String Methods (continued)

// Converting case customer1=customer1.toLowerCase(); customer2=customer2.toLowerCase(); document.write("<p>Checking customer details for "+customer1+" and "+customer2+".</p>"); // Checking delinquents for (i=0; i<4; i++) { if (customer1==delinquents[i].toLowerCase()) { document.write(customer1+" is on the delinquent cardholder's list."); } } for (i=0; i<4; i++) { if (customer2==delinquents[i].toLowerCase()) { document.write(customer2+" is on the delinquent cardholder's list."); } } </script> </body></html>

Formatting StringsThe formatting of strings is accomplished by using string methods such as:big() – increases the size of the textblink() – causes the text to blinkbold() – bolds the stringfontcolor() – changes the font color of the textfontsize() – changes the size of a fontitalics() – italicizes the textsmall() – decreases the size of the textstrike() – strikes through the textsub() – subscripts the textsup() – superscripts the text

Using Formatting Methods

Using Formatting Methods(continued)

for (i=0; i<5; i++) { if (items[i]<0) { document.write("<li>"+items[i].fontcolor("red")); } else { document.write("<li>"+items[i].fontcolor("blue")); } } document.write("</ul>"); } </script> <form name="purchases"> Item 1: <input type="Text" name="item1"><p> Item 2: <input type="Text" name="item2"><p> Item 3: <input type="Text" name="item3"><p> Item 4: <input type="Text" name="item4"><p> Item 5: <input type="Text" name="item5"><p> <input type="Submit" value="Tabulate Items" onClick="calculate()"> </form>

Adding the Data

Adding the Data (continued)for (i=0; i<5; i++) { balance=balance+parseFloat(items[i]); } if (balance<0.0) { document.write("Dear customer, your balance is $"+balance.toString().fontcolor("red")); } else { document.write("Dear customer, your balance is $"+balance.toString().fontcolor("blue")); } } </script> <form name="purchases"> Item 1: <input type="Text" name="item1"><p> Item 2: <input type="Text" name="item2"><p> Item 3: <input type="Text" name="item3"><p> Item 4: <input type="Text" name="item4"><p> Item 5: <input type="Text" name="item5"><p> <input type="Submit" value="Calculate" onClick="calculate()"> </form> </body>

Extracting Strings

Extracting substrings from longer strings is commonly used to extract specific length substrings. This technique can be used to separate the individual components of a database record.

var customer1 = "Watters......................Paul......555-1234";var customerLname = customer1.substring(0,29);var customerFname = customer1.substring(29,39);var customerPhone = customer1.substring(39,47);

Step 1: <html> <head> <title> Practice Javascript </title>

</body></html>

Step 2: In your script, do the followings:- Create a String object containing “Jose lived in

San Jose for many years”- Find and display Index of the second “Jose”- Get the substring ear from years and display it- Display the string in a blue, italic font, point

size 12, all upper case

Javascript core objects

Documents

javascript objects

JavaScript Objects

JavaScript DOM Objects (2)

Julian on JavaScript: Objects

JavaScript - Core Web Programmingnotes.corewebprogramming.com/instructor/JavaScript.pdf · 24 JavaScript JavaScript Syntax: Objects and Classes, cont. 4. A “Constructor” is Just

Core JavaScript

J AVA S CRIPT Shadi Banitaan 1. O UTLINE Introduction JavaScript Functions Using Objects in JavaScript Built-in Objects User-Defined Objects Examples

JavaScript Core

JavaScript: Core Part

Bride of JavaScript Working with JavaScript Objects and Events

Working With JavaScript Objects and Events

Week 4c - JavaScript: Objects

Javascript Objects and Functions

Paw + JavaScript Core Framework

TECHNICAL NOTES - brightsignbiz.s3.amazonaws.combrightsignbiz.s3.amazonaws.com/documents/JavaScript Objects for...Technical Notes – JavaScript Objects (FW ver. 6.0.x) 14 . BSVideoMode

ArcGIS API for JavaScript - Esri · • Core objects (Map, Layer) are Promises ... ArcGIS API for JavaScript: Building 3D Web Apps, 2015 Esri International Developer Summit—Presentation,

Core JavaScript Reference 1.5 - Astalawebmanuals.astalaweb.net/Files/Javascript/CoreRefrenceJS15.pdfCore JavaScript Reference 1.5 Part 1 Object Reference Chapter 1 Objects, Methods,

JavaScript Functions and Objects

Javascript: Objects, and Functionsteaching.csse.uwa.edu.au/units/CITS3403/lectures/06JSFunctions.pdf · – JavaScript deﬁnes objects that encapsulate both data and processing –

Javascript Functions Events and Objects