COMP519 Web Programming Lecture 14: JavaScript (Part 5) Handouts

Size: px

Start display at page:

Download "COMP519 Web Programming Lecture 14: JavaScript (Part 5) Handouts"

Lily Atkinson
5 years ago
Views:

1 COMP519 Web Programming Lecture 14: JavaScript (Part 5) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool

2 Contents 1 (User-defined) Objects Object Literals Object Constructors Prototype Property Public and Private Static Variables Inheritance Classes as Syntactic Sugar 2 Pre-defined Objects String Date 3 Further Reading Ullrich Hustadt COMP519 Web Programming L14 1

3 Object Literals (User-defined) Objects Literals JavaScript is an object-oriented language, but one without classes Instead of defining a class, we can simply state an object literal { property1 : value1, property2 : value2,... where property1, property2,... are variable names and value1, value2,... are values (expressions) var person1 = { age : (30 + 2), gender : male, name : { first : Bob, last : Smith, interests : [ music, skiing ], hello : function () { return Hi! I\ m + this. name. first +. ; person1. age --> 32 // dot notation person1 [ gender ] --> male // bracket notation person1. name. first --> Bob person1 [ name ][ last ] --> Smith Ullrich Hustadt COMP519 Web Programming L14 2

4 Object Literals (User-defined) Objects Literals var person1 = {... name : { first : Bob, last : Smith, hello : function () { return Hi! I\ m + this. name. first +. ; person1. hello () --> "Hi! I m Bob." Every part of a JavaScript program is executed in a particular execution context Every execution context offers a keyword this as a way of referring to itself In person1.hello() the execution context of hello() is person1 this.name.first is person1.name.first Ullrich Hustadt COMP519 Web Programming L14 3

5 Object Literals (User-defined) Objects Literals var person1 = { name : { first : Bob, last : Smith, greet : function () { return Hi! I\ m + name. first +., full1 : this. name. first + " " + this. name.last, full2 : name. first + " " + name. last ; person1. greet () --> "Hi! I m undefined." person1. full1 --> " undefined undefined " person1. full2 --> " undefined undefined " In person1.greet() the execution context of greet() is person1 but name.first does not refer to person1.name.first In the (construction of the) object literal itself, this does not refer to person1 but its execution context (the window object) none of name.first, name.last, this.name.first, and this.name.last refers to properties of this object literal Ullrich Hustadt COMP519 Web Programming L14 4

6 Object Constructors (User-defined) Objects Constructors JavaScript is an object-oriented language, but one without classes Instead of defining a class, we can define a function that acts as object constructor variables declared inside the function will be instance variables of the object each object will have its own copy of these variables it is possible to make such variables private or public inner functions will be methods of the object it is possible to make such functions/methods private or public private variables/methods can only be accessed inside the function public variables/methods can be accessed outside the function Whenever an object constructor is called, prefixed with the keyword new, then a new object is created the function is executed with the keyword this bound to that object Ullrich Hustadt COMP519 Web Programming L14 5

7 (User-defined) Objects Objects: Definition and Use Constructors function SomeObj () { instvar2 = B // private variable var instvar3 = C // private variable this. instvar1 = A // public variable this. method1 = function () { // public method // use of a public variable, e.g. instvar1, must be preceded by this return m1[ + this. instvar1 + ] + method3 () this. method2 = function () { // public method // calls of a public method, e.g. method1, must be preceded by this return m2[ + this. method1 () + ] method3 = function () { // private method return m3[ + instvar2 + ] + method4 () var method4 = function () { // private method return m4[ + instvar3 + ] obj = new SomeObj () // creates a new object obj. instvar1 --> "A" obj. instvar2 --> undefined obj. instvar3 --> undefined obj. method1 () --> "m1[a] m3[b] m4[c]" obj. method2 () --> "m2[m1[a] m3[b] m4[c ]]" obj. method3 () --> error obj. method4 () --> error Ullrich Hustadt COMP519 Web Programming L14 6

8 (User-defined) Objects Objects: Definition and Use Constructors function SomeObj () { this. instvar1 = A // public variable instvar2 = B // private variable var instvar3 = C // private variable this. method1 = function () {... // public method this. method2 = function () {... // public method method3 = function () {... // private method var method4 = function () {... // private method Note that all of instvar1 to instvar3, method1 to method4 are instance variables (properties, members) of SomeObj The only difference is that instvar1 to instvar3 store strings while method1 to method4 store functions every object stores its own copy of the methods Ullrich Hustadt COMP519 Web Programming L14 7

9 (User-defined) Objects Objects: Prototype Property Prototype All functions have a prototype property that can hold shared object properties and methods objects do not store their own copies of these properties and methods but only store references to a single copy function SomeObj () { this. instvar1 = A // public variable instvar2 = B // private variable var instvar3 = C // private variable SomeObj. prototype. method1 = function () {... // public SomeObj. prototype. method2 = function () {... // public method3 = function () {... // private method var method4 = function () {... // private method Note: prototype properties and methods are always public! Ullrich Hustadt COMP519 Web Programming L14 8

10 (User-defined) Objects Objects: Prototype Property Prototype The prototype property can be modified on-the-fly all already existing objects gain new properties / methods manipulation of properties / methods associated with the prototype property needs to be done with care function SomeObj () {... obj1 = new SomeObj () obj2 = new SomeObj () document. writeln ( obj1. instvar4 ) // undefined document. writeln ( obj2. instvar4 ) // undefined SomeObj. prototype. instvar4 = A document. writeln ( obj1. instvar4 ) // A document. writeln ( obj2. instvar4 ) // A SomeObj. prototype. instvar4 = B document. writeln ( obj1. instvar4 ) // B document. writeln ( obj2. instvar4 ) // B obj1. instvar4 = C // creates a new instance variable for obj1 SomeObj. prototype. instvar4 = D document. writeln ( obj1. instvar4 ) // C!! document. writeln ( obj2. instvar4 ) // D!! Ullrich Hustadt COMP519 Web Programming L14 9

11 (User-defined) Objects Objects: Prototype Property Prototype The prototype property can be modified on-the-fly all already existing objects gain new properties / methods manipulation of properties / methods associated with the prototype property needs to be done with care function SomeObj () {... obj1 = new SomeObj () obj2 = new SomeObj () SomeObj. prototype. instvar5 = E SomeObj. prototype. setinstvar5 = function ( arg ) { this. instvar5 = arg obj1. setinstvar5 ( E ) obj2. setinstvar5 ( F ) document. writeln ( obj1. instvar5 ) // E!! document. writeln ( obj2. instvar5 ) // F!! Ullrich Hustadt COMP519 Web Programming L14 10

12 (User-defined) Objects Static Class Variables and Class Methods Function properties can be used to emulate Java s class variables (static variables shared among instances) and class methods function Circle ( radius ) { this.r = radius // class variable - property of the Circle constructor function Circle. PI = // instance method Circle. prototype. area = function () { return Circle. PI * this.r * this.r; // class method - property of the Circle constructor function Circle. max = function (a,b) { if (a.r > b.r) { return a else { return b c1 = new Circle (1.0) // create an instance of the Circle class c1.r = 2.2; // set the r instance variable c1_area = c1. area (); // invoke the area () instance method x = Math. exp ( Circle. PI) // use the PI class variable in a computation c2 = new Circle (1.2) // create another Circle instance bigger = Circle. max (c1, c2) // use the max () class method Ullrich Hustadt COMP519 Web Programming L14 11

13 Private Static Variables (User-defined) Objects Static In order to create private static variables shared between objects we can use a self-executing anonymous function var Person = ( function () { var population = 0 // private static class variable return function ( value ) { // constructor population ++ var name = value // private instance variable this. setname = function ( value ) { name = value this. getname = function () { return name this. getpop = function () { return population ()) person1 = new Person ( Peter ) person2 = new Person ( James ) person1. getname () --> Peter person2. getname () --> James person1. name --> undefined Person. population person1. population --> undefined person1. getpop () --> 2 person1. setname ( David ) person1. getname () --> David Ullrich Hustadt COMP519 Web Programming L14 12

14 for/in-loop (User-defined) Objects The for/in-loop allows us to go through the properties of an object Static for ( var in object ) { statements Within the loop we can use object[var] to access the value of the property var var person1 = { age : 32, gender : male, name : Bob Smith for ( prop in person1 ) { document. writeln ( person1 [ + prop + ] has value + person1 [ prop ]+ <br > ); person1 [ gender ] has value male <br > person1 [ name ] has value Bob Smith <br > person1 [ age ] has value 32 <br > Ullrich Hustadt COMP519 Web Programming L14 13

15 Inheritance (User-defined) Objects Inheritance The prototype property can also be used to establish an inheritance relationship between objects function Rectangle ( width, height ) { this. width = width this. height = height this. type = Rectangle this. area = function () { return this. width * this. height function Square ( length ) { this. width = this. height = length ; this. type = Square // Square inherits from Rectangle Square. prototype = new Rectangle (); var sq1 = new Square (5); document. writeln (" The area of sq1 is " + sq1. area () ); The area of sq1 is 25 Ullrich Hustadt COMP519 Web Programming L14 14

16 (User-defined) Objects Classes as Syntactic Sugar Classes ECMAScript 2015 introduced classes as syntactic sugar for prototype-based objects class Rectangle { constructor ( width, height ) { this. width = width this. height = height this. type = Rectangle get area () { return this. width * this. height class Square extends Rectangle { constructor ( length ) { super ( length, length ) this. type = Square var sq1 = new Square (5) document. writeln (" The area of sq1 is " + sq1. area ) // not sq1. area ()! Ullrich Hustadt COMP519 Web Programming L14 15

17 Pre-defined Objects Pre-defined Objects: String String JavaScript has a collection of pre-defined objects, including Array, String, Date A String object encapsulates values of the primitive datatype string Properties of a String object include length the number of characters in the string Methods of a String object include charat(index) the character at position index (counting from 0) substring(start,end) returns the part of a string between positions start (inclusive) and end (exclusive) touppercase() returns a copy of a string with all letters in uppercase tolowercase() returns a copy of a string with all letters in lowercase Ullrich Hustadt COMP519 Web Programming L14 16

18 Pre-defined Objects String Pre-defined Objects: String and RegExp JavaScript supports (Perl-like) regular expressions and the String objects have methods that use regular expressions: search(regexp) matches regexp with a string and returns the start position of the first match if found, -1 if not match(regexp) without g modifier returns the matching groups for the first match or if no match is found returns null with g modifier returns an array containing all the matches for the whole expression replace(regexp,replacement) replaces matches for regexp with replacement, and returns the resulting string name1 = Dave Shield. replace (/(\ w +)\ s(\w+)/, "$2, $1 ") regexp = new RegExp ("(\\ w +)\\ s (\\ w +)") name2 = Ken Chan. replace ( regexp, "$2, $1 ") Ullrich Hustadt COMP519 Web Programming L14 17

19 Pre-defined Objects Pre-defined Objects: Date Date The Date object can be used to access the (local) date and time The Date object supports various constructors new Date() current date and time new Date(milliseconds) set date to milliseconds since 1 Januar 1970 new Date(dateString) set date according to datestring new Date(year, month, day, hours, min, sec, msec) Methods provided by Date include tostring() returns a string representation of the Date object getfullyear() returns a four digit string representation of the (current) year parse() parses a date string and returns the number of milliseconds since midnight of 1 January 1970 Ullrich Hustadt COMP519 Web Programming L14 18

20 Revision Revision and Further Reading Read Chapter 20: The JavaScript Language: Objects of S. Schafer: Web Standards Programmer s Reference. Wiley Publishing, Harold Cohen Library S29 or E-book Read Chapter 5: Reference Types: The Object Type Chapter 6: Object-Oriented Programming Chapter 7: Anonymous Functions of N. C. Zakas: Professional JavaScript for Web developers. Wrox Press, Harold Cohen Library Z21 or E-book Ullrich Hustadt COMP519 Web Programming L14 19

COMP519 Web Programming Lecture 11: JavaScript (Part 2) Handouts

COMP519 Web Programming Lecture 11: JavaScript (Part 2) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool