Chapter 3: Built-In JavaScript Objects Web Programming Chapter 3: JavaScript Up | Site Map Built-In JavaScript Objects Introduction In this topic we will be covering some of the in-built objects in JavaScript that a web developer has access to. We will introduce the following objects: Date Math String Array Window Document Date Object The Date object, as the name suggests, allows you to set and modify dates. In order to create a Date object, you do the following: var today = new Date(); This creates a new Date object called today (var is used to identify and initiate today as a variable). Please note the keyword new which is used to instantiate objects in JavaScript. To create a Date object set to a specific date, you must provide one of these items: the number of milliseconds from GMT on January 1st, 1970 a string containing a date you would like parsed a year, month, and day a year, month, day, hour, minute, and second For example, the below code sets the variable xmas to midnight on Christmas by passing in parameters to the Date creation. var xmas = new Date(2003, 11, 25); This is a very simple example, but shows the ease by which you can create date objects. Now let's complicate things a little and find out how many days are left until Christmas this year. var dateNow = new Date(); var dateChristmas = new Date(2008, 11, 25); var dateDiffDays = parseInt((dateChristmas - dateNow) / (1000 * 60 * 60 * 24)); alert(dateDiffDays + " days left till Christmas!");
Again we use the var identifier for each variable (dateNow, dateChristmas and dateDiffDays). We create two dates, the current date and the date for Chistmas for this year. Please note that we are passing '11' as the number for the month of December. This is due to how Arrays work in JavaScript. Arrays are zero based, hence the first month has the value of 0 (January), the second month has the value of 1 (February), and so on. We will discuss the Array Object later in this topic. Once we have our two dates in variables, we then compute the difference in days (subtracting dateNow from dateChristmas) and convert it to the number of days. The result is displayed in a pop-up box (alert()) to the user. Math Object JavaScript's Math object provides advanced arithmetic and trigonometric functions, expanding on JavaScript's basic arithmetic operators (plus, minus, multiply, divide). The Math object in JavaScript is borrowed from Java. In fact, the implementation of the Math object in JavaScript closely parallels the Math class in Java, except that the JavaScript Math object offers fewer methods. JavaScript's Math object properties are treated as constants (literals). In fact, the property names are in all upper-case, following the usual convention of capitalizing variable constants (literals). The Math object is static, so you don't need to create a new Math object in order to use it. To access the properties and method of the Math object, you merely specify the Math object, along with the method or property you wish. For example, to return the value of pi, you use: var pi = Math.PI; There is a variety of properties and methods available to the developer (such as Math.random() to create a random number between 0 and 1, so if you are interested, please use the following URL for a reference of all MATH properties and methods. http://www.w3schools.com/jsref/jsref_obj_math.asp String Object It is one of the most commonly used objects in JavaScript. New string objects are created implicitly using a variable assignment. For example, var myString = "Diagon Alley"; String objects have one property: length. The length property returns the length of the string and uses the syntax string.length, where string is the name of the string variable. The example code below var myString = "This is a string"; alert (myString.length); would return 16. Note that spaces are also counted. There are certain methods the String object provides. These include: substring indexOf lastIndexOf toLowerCase These 'string management methods' are used to return or change the content of the string in some way. For instance, the substring method returns a specified portion of a string. The indexOf method determines the location of a character or group of characters in a string. And the toLowerCase method converts the string to lower case. (As you can imagine, there's also a toUpperCase method.) An example of the previous methods can be: var myString = "prisoner of azkaban"; var tempVar = myString.toUpperCase() All String properties and methods can be seen at: http://www.w3schools.com/jsref/jsref_obj_string.asp Array Object An Array object is used to store a set of values in a single variable name. Each value is an element of the array and has an associated index number.The index number starts at zero (remember passing month values to the Date object?) An instance of the Array object can be created with the "new" keyword. var strange = new Array(5); The above code creates an array called 'strange', that can contain 5 elements. The parameter passed in to create the object determines the size of the array, in our case 5. Once you have setup the array, you can assign data to each of the elements in the array. This is done as follows: strange[0]="Alohomora"; strange[1]="Bat-Bogey Hex"; strange[2]="Reducio"; strange[3]="Impervius"; strange[4]="Diffindo"; Before we look at a code example, here are some of the methods available in the Array Object: length - returns the length of array concat() - returns an array of two concatenated arrays join() - Returns a string of all the elements of an array concatenated together reverse() - reverses an array slice() - returns a specified apart of an array sort() - returns a sorted array Now let us look at an example (taken from the W3Schools website): In the code above, we first create an array called famname and pass the values (the names in quotes) to the array at the time of creating the object. We then loop through the array and for each element in the array, we print its value (using document.write), followed by a new line character ( ). Now look at the following code, what would it print? Window Object As soon as a web page loads into a browser window, a hierarchy of objects is created automatically. The Window object is the parent of this hierarchy (structure). It has certain properties that may be useful to the developer such as window[closed,location], history[length] and document. Let's look at an example to see what we can do with the Window object: [Acknowledgment :http://www.w3schools.com/js/js_window.asp] When running this code, what does happen? First of all, take notice of the onclick event in the element. It calls a function named openwindow(). This function has been declared in our elements in the section of the HTML document. It simply opens a new pop-up window by using the predefined method of the built-in Window object, window.open. The values that are passed as parameters to the window.open function determine the look and feel and the content of the window (URL passed in is displayed). See below for the screenshot of the output: For further information on the Window object, its properties and methods, please visit the following site: http://www.w3schools.com/HTMLDOM/dom_obj_window.asp Document Object Last but not least we will briefly examine the next object in the hierarchy (starting with Window), the document object. The document object actually represents the HTML document with all its elements (body, form, formfields, etc..). It's internal hierarchy is similar to the following: document [ title, URL, lastModified, body ] images[properties] links[properties] frames[properties] forms[properties] As you can see above, the document object, via its properties, give direct access to the body element, hence gives access to all elements that make up your HTML document. This is very useful when using dynamic HTML and Ajax (XMLHttpRequests) to add dynamic content to your pages, as it allows you to change the content and style of any element of your document. Below is an example of how the document object can be used with JavaScript:
