Introduction to Web Tech and Programming

Transcription

1 Introduction to Web Tech and Programming

2 Objects Objects Arrays

3 JavaScript Objects Objects are an unordered collection of properties. Basically variables holding variables. Have the form name : value name is always String. value can be primitive or object

4 JavaScript Objects JavaScript has two types of values Primitives (String, Number, Boolean, etc.) Objects String* Number* Boolean* Date Math Regular Arrays Functions Objects

5 JavaScript Objects Examples var person = {firstname:"mike", lastname:"jones"}; var car = {make: "Honda", model: "Civic", enginesize: 2000}

6 Creating JavaScript Objects Define and create a single object using an object literal Define and create a single object using the new keyword Define an object constructor, and then create objects of the constructed type

7 Creating JavaScript Objects Define and create a single object using an object literal var person = {firstname:"mike", lastname:"jones", height:6.2};

8 Creating JavaScript Objects Define and create a single object using the new keyword var person = new Object(); person.firstname = "Mike"; person.lastname = "Jones"; person.height = 6.2;

9 Creating JavaScript Objects Define an object constructor, and then create objects of the constructed type function person(first, last, height) { } this.firstname = first; this.lastname = last; this.height = height; var myfather = new person("mike", "Jones", 6.2); var mymother = new person("manna", "Jones", 5.6);

10 The this Keyword this is a reference (keyword, not a variable) to the object that owns the currently executing JavaScript code In a function it refers to the object that owns the function In an object, it refers to the object itself Does not have a value in an object constructor, value substituted for new object

11 JavaScript's Built-in Constructors Available constructors var obj1 = new Object(); // A new Object object var obj2 = new String(); // A new String object var obj3 = new Number(); // A new Number object var obj4 = new Boolean() // A new Boolean object var obj5 = new Date(); // A new Date object var obj6 = new Array(); // A new Array object var obj7 = new RegExp(); // A new RegExp object var obj8 = new Function(); // A new Function object Math is a global object, and does not have a constructor

12 JavaScript Object Literals Object literals are more efficient var x1 = {}; // new object var x2 = ""; // new primitive string var x3 = 0; // new primitive number var x4 = false; // new primitive boolean var x5 = []; // new array object var x6 = /()/ // new regexp object var x7 = function(){}; // new function object

13 JavaScript Object Properties Accessing objectname.property objectname["property"] objectname[expression]

14 For In Loops The JavaScript for-in statement loops through the properties of an object Example var person = {fname:"john", lname:"doe", age:25}; var text = ""; var x; for (x in person) { } text += person[x];

15 Object Properties You can add new properties to an existing object by simply giving it a value person.haircolor = "Beige" You can delete properties using the delete keyword var person = {firstname:"john", lastname:"doe", age:50, eyecolor:"blue"}; delete person.age; // or delete person["age"];

16 Object Methods Methods are actions that performed on object Object properties can be functions An object method is an object property containing a function Syntax methodname : function() { code lines }

17 Object Methods Built in methods var message = "Hello world!"; var x = message.touppercase(); alert(x); // Message dialog displays HELLO WORLD!

18 Adding new Object Methods Methods can be added using any object creation mechanism Example function person(firstname, lastname, age) { this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; this.getfullname = function () { return this.firstname + " " + this.lastname; } }

19 Function Parameters and Arguments Functions can have parameters functionname(param1, param2, para3) { } code to be executed Function parameters are the names listed in the function definition Function arguments are the real values passed to (and received by) the function

20 Parameter Rules JavaScript function definitions do not specify data types for parameters JavaScript functions do not perform type checking on the passed arguments (see Rule 1) JavaScript functions do not check the number of arguments received

21 Parameter Defaults If a function is called with missing arguments (less than declared), the missing values are set to: undefined You may want to assign a default value to the parameter function myfunction(x, y) { } if (y === undefined) { } y = 0; If a function is called with too many arguments (more than declared), they will not have a name, and can only be reached in the arguments object.

22 The Arguments Object JavaScript functions have a built-in object called the arguments object The argument object contains an array of the arguments used when the function was called (invoked)

23 The Arguments Object Example function findmax() { var i, max = Number.MIN_VALUE; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; } x = findmax(1, 123, 500, 115, 44, 88);

24 JavaScript Arrays An array is a variable that can hold multiple values Syntax var buildings = ["Beury", "SERC", "Tuttleman"] Allows you to loop through a list of values to perform various operations Individual values are accessed using an index number

25 JavaScript Arrays Think of an array as a special type of object that uses numbers to access its elements instead of property names The first element is stored at index 0, the second element at index 1, etc. mycars[0] = "Accord"; alert(mycars[1]); You can have different objects in one array myarray[0] = Date.now; myarray[1] = myfunction; myarray[2] = mycars;

26 Array Properties and Methods Array objects have various properties and methods var x = myarray.length; // The length property returns the number of elements var y = myarray.sort(); // returns a sorted copy

27 Array Properties and Methods Property constructor length prototype Description Returns the function that created the Array object's prototype Sets or returns the number of elements in an array Allows you to add properties and methods to an Array object

28 Array Properties and Methods Method concat() indexof() join() lastindexof() pop() push() reverse() shift() slice() sort() splice() tostring() unshift() valueof() Description Joins two or more arrays, and returns a copy of the joined arrays Search the array for an element and returns its position Joins all elements of an array into a string Search the array for an element, starting at the end, and returns its position Removes the last element of an array, and returns that element Adds new elements to the end of an array, and returns the new length Reverses the order of the elements in an array Removes the first element of an array, and returns that element Selects a part of an array, and returns the new array Sorts the elements of an array Adds/Removes elements from an array Converts an array to a string, and returns the result Adds new elements to the beginning of an array, and returns the new length Returns the primitive value of an array

29 Looping through an Array var buildings = ["Beury", "SERC", "Tuttleman", "Wachman"]; for (var i = 0; index < buildings.length; i++) { } text += " " + buildings[i];

30 Use Array Literal Avoid using the new Keyword when creating Arrays as this creates complications var points = new Array(40, 100); Creates an array with two elements (40 and 100) var points = new Array(40); Creates an array with 40 undefined elements