Advanced JavaScript Topics: Objects, Images, Strings, Dates, Booleans, and Numbers - Prof., Study notes of Computer Science

Download Advanced JavaScript Topics: Objects, Images, Strings, Dates, Booleans, and Numbers - Prof. and more Study notes Computer Science in PDF only on Docsity! 1 Advanced JavaScript Topics – Page 1 of 31CSCI 2910 – Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: Advanced JavaScript Topics Advanced JavaScript Topics – Page 2 of 31CSCI 2910 – Client/Server-Side Programming Today’s Goals Today’s lecture will cover: – More on new and objects – Built in objects Image, String, Date, Boolean, and Number – The getElementById() method – Layers Advanced JavaScript Topics – Page 3 of 31CSCI 2910 – Client/Server-Side Programming More on new • In the exercise from last class period, we created elements of an array using the keyword new. Let's look deeper. • The new operator is used to create an instance of a pre-defined object. (Remember that instances are to objects as proper nouns are to nouns.) • If an object has a constructor function, that function is executed when an instance of the object is created. Advanced JavaScript Topics – Page 4 of 31CSCI 2910 – Client/Server-Side Programming Creating/Defining Objects • A user can define an object. • In JavaScript, an object is defined by defining the constructor function. • A constructor function is defined just like a function. • The name of the constructor function defines the name of the object. • The properties and methods of the object are defined and initialized within the constructor function. • The new operator is the only way to call a constructor. Advanced JavaScript Topics – Page 5 of 31CSCI 2910 – Client/Server-Side Programming Creating/Defining Objects (continued) • For example, the following function defines the object instructor: function instructor(name, phone, email) { this.name = name; this.phone = phone; this.email = email; } • To create an instance of instructor, simply initialize a var with the constructor containing the appropriate arguments. var tarnoff = new instructor("David Tarnoff", "423.439.6404", "tarnoff@etsu.edu"); Advanced JavaScript Topics – Page 6 of 31CSCI 2910 – Client/Server-Side Programming Creating/Defining Objects (continued) • The keyword this is used to identify the current instance being referenced by the function. • Remember that objects can be embedded into hierarchies, i.e., an object can become the property of an object. • For example, the instructor object defined above could become a property of a course_section object. 2 Advanced JavaScript Topics – Page 7 of 31CSCI 2910 – Client/Server-Side Programming Creating/Defining Objects (continued) function course_section(course_title, section_number, assigned_instructor) { this.title = course_title; this.section_number = section_number; this.instructor = assigned_instructor; } An instance could then be created: var CSCI2910_001 = new course_section("Client/Server-Side Programming", "001", tarnoff); Advanced JavaScript Topics – Page 8 of 31CSCI 2910 – Client/Server-Side Programming Creating/Defining Objects (continued) • To create a function for an object, we used the keyword "prototype". • Within the constructor function, insert the code: this.prototype.myfunction = function(args) { // insert myfunction code here } • Can also define outside constructor function: obj_name.prototype.myfunction = function(args) { // insert myfunction code here } Advanced JavaScript Topics – Page 9 of 31CSCI 2910 – Client/Server-Side Programming Image Object • There are a number of pre-defined JavaScript objects such as the Image object • Properties of the Image object include: – border – Contains the width of the border in pixels (read only) – complete – Boolean value indicating whether the browser has finished loading the image. (read only) – height – The height of the image in pixels (read only) – lowsrc – Specifies the URL of a low-resolution replacement of the image which is loaded and displayed before the high- resolution image is loaded and displayed – name – This is the name/id property of the image – src – Specifies the URL of the image – width – The width of the image in pixels (read only) Advanced JavaScript Topics – Page 10 of 31CSCI 2910 – Client/Server-Side Programming String Object • The constructor for a new String object takes as its argument the initial string: myString = new String("This is great!"); • The property length returns the length of the string. For the example below, mylength would equal 14. mylength = myString.length; Advanced JavaScript Topics – Page 11 of 31CSCI 2910 – Client/Server-Side Programming String Object Methods • charAt(index) – returns the character at the position in the string referred to by index. • charCodeAt(index) – returns the Unicode value of the character at the position in the string referred to by index. • fromCharCode(num1,...,numN) – creates a string from the sequence of Unicode values passed to it as arguments. • toLowerCase( ) – converts all of the characters in the string to lower case. • toUpperCase( ) – converts all of the characters in the string to upper case. • indexOf(character [, start_index]) – returns the index of the first occurrence of the specified character. If start_index is used, search begins from that point in the string. • lastIndexOf(character [, start_index]) – returns the index of the first occurrence of the specified character. If start_index is used, search begins from that point in the string. • split(delimiter) – splits a string into substrings and returns an array that contains the resulting substrings. Advanced JavaScript Topics – Page 12 of 31CSCI 2910 – Client/Server-Side Programming Formatting Methods of String • There are some methods of the object String that when used in conjunction with an output method will create HTML like formatting. For example, the method sub() will cause the text to be outputted as a subscript: var subscript = "24"; document.write("A" + subscript.sub()); • outputs the following to the HTML screen: A24 5 Advanced JavaScript Topics – Page 25 of 31CSCI 2910 – Client/Server-Side Programming Modifying the Style of HTML Objects • One of the most common uses for getElementById() is to create an HTML object in order to modify its style or change one of its attributes. • Style typically uses hyphens, e.g., font-size. • JavaScript replaces hyphens by capitalizing next character, e.g., fontSize replaces font-size. html_obj.style.fontSize = "16px"; html_obj.setAttribute("align", "center"); Advanced JavaScript Topics – Page 26 of 31CSCI 2910 – Client/Server-Side Programming Layers • In HTML, the elements are displayed in the order that they are encountered in the source. • With CSS, positioning became easier, but elements still fought in shared space with margins and padding. • The concept of layers is one that has been used in graphics for a long time, i.e., the concept that groups of elements can reside on different planes in the z-direction, not just the x- and y- directions. Advanced JavaScript Topics – Page 27 of 31CSCI 2910 – Client/Server-Side Programming Layers (continued) A number of benefits come with this capability: – Elements can be placed at exact X and Y positions without fighting for space with elements on other layers. – Elements can overlap. – Transparent elements can have other elements showing through. Advanced JavaScript Topics – Page 28 of 31CSCI 2910 – Client/Server-Side Programming Layer Attributes • Layer element is define using the HTML <layer>...</layer> tags • Attributes of the <layer> tag: – name/id = "layername" – same as name and id for other HTML elements – left = "pixels" – number of pixels from the left edge of the browser window – top = "pixels" – number of pixels from the top edge of the browser window – z-index = "integer" – an integer specifying the position of the layer with respect to the other layers. The higher numbers are stacked on top of the lower ones. Advanced JavaScript Topics – Page 29 of 31CSCI 2910 – Client/Server-Side Programming Layer Attributes (continued) – above = "layername" – this attribute allows the programmer to indicate the name/id of a layer above which this layer is to be placed. (Used instead of z- index) – below = "layername" – this attribute allows the programmer to indicate the name/id of a layer below which this layer is to be placed. – visibility = "show | hide | inherit" – determines whether the layer is displayed or not. Can be changed real-time to create certain effects such as swapping text. – bgcolor = "rgbColor" – specifies background color of layer. – background ="imageURL" – specifies background image of layer. Advanced JavaScript Topics – Page 30 of 31CSCI 2910 – Client/Server-Side Programming JavaScript Control of Layers • In JavaScript, the layers appear in an array called "layers". • Can access these layers in one of three ways: – document.layerName – document.layers[index] – document.layers["layerName"] • A layer's properties can be accessed with the syntax: layerName.propertyName 6 Advanced JavaScript Topics – Page 31 of 31CSCI 2910 – Client/Server-Side Programming JavaScript Control of Layers (continued) Layers also have some methods: • offset(x,y) – Changes a layer's position by using the x and y values as offsets from the current position. • moveTo(x,y) – Changes a layer's position my moving its upper left corner to the position specified by x, y. • resize(width,height) – Changes a layer's size. • moveAbove(layerName) – Moves layer to position immediately above layer referred to by layerName. • moveBelow(layerName) – Moves layer to position immediately below layer referred to by layerName.