IDM 231. Functions, Objects and Methods

Transcription

1 IDM 231 Functions, Objects and Methods IDM 231: Scripting for IDM I 1 Browsers require very detailed instructions about what we want them to do. Therefore, complex scripts can run to hundreds (even thousands) of lines. Programmers use functions, methods, and objects to organize their code. Functions consist of a series of statements that have been grouped together because they perform a specific task. A method is the same as a function, except methods are created inside an object. Objects are made of up properties and methods. We'll look at all of these in more detail.

2 Functions function updatemessage() { var el = document.getelementbyid('message'); el.textcontent = msg; return msg; } updatemessage(); IDM 231: Scripting for IDM I 2 Functions let you group a series of statements together to perform a specific task. If different parts of a script repeat the same task, you can reuse the function rather than repeating the same set of statements. When you group tasks together into a function, you need to give your function a name, which should describe the task it is performing. When you ask it to perform the task it's known as calling the function.

3 Function Structure function updatemessage() { var el = document.getelementbyid('message'); el.textcontent = msg; return msg; } updatemessage(); IDM 231: Scripting for IDM I 3 The steps the function needs to perform in are packaged up in a code block. A code block consists of one ore more statements contained within curly braces.

4 Function Parameters function updatemessage(name, message) { console.log('hello ' + name + ', ' + message); // or with ES6 console.log(`hello ${name}, ${message}`); } updatemessage(); IDM 231: Scripting for IDM I 4 Some functions need to be provided with information in order to achieve a given task. Pieces of information passed to a function are known as parameters.

5 Working With Parameters function getarea(width, height) { return width * height; } getarea(3, 5); var wall_width = 3; var wall_height = 5; getarea(wall_width, wall_height); IDM 231: Scripting for IDM I 5 Inside the function, the parameters act like variables.

6 Function Return function updatemessage(name, message) { const newmessage = `Hello ${name}, ${message}`; return newmessage; } let mymessage = updatemessage('phil', 'Welcome to my script!'); console.log(mymessage); // Hello Phil, Welcome to my script! IDM 231: Scripting for IDM I 6 When you write a function and you expect it to provide you with an answer, the response is known as a return value. Using the return keyword, the specified value is returned from inside the function, back to the placeholder that originally called the function. When a return statement is encountered, the execution of the function immediately stops and the current value of the returned variable is extracted. If the function contains more lines of code, they are not executed.

7 Anatomy of a Function function sayhello() { console.log('hello!'); } IDM 231: Scripting for IDM I 7 Let's review. You declare a function using the function keyword. You give the function a name (sometimes called an identifier) followed by parentheses. The statements that perform the task sit in a code block, inside the curly braces.

8 Calling a Function function sayhello() { console.log('hello!'); } sayhello(); IDM 231: Scripting for IDM I 8 Once you declare a function, you can execute all the statements between the curly braces with a single line of code. This is know as calling the function. This is done by using the function name followed by parentheses. You can call the same function as many times as you want within the same Javascript file.

9 Getting Values Out of a Function function getarea(width, height) { const area = width * height; return area; } let wall = getarea(3, 5); // 15 let wall = getarea(8, 5); // 40 IDM 231: Scripting for IDM I 9 Some functions return information to the code that called them. wall1 will be equal to 15, while wall2 will hold the value 40. This also demonstrates how the same function can be used to perform the same steps with different values.

10 Getting Multiple Values Out of a Function function getsize(width, height, depth) { const area = width * height; const volume = width * height * depth; } // Does this work? // Why or why not? return area; return volume; let sizes = getsize(3,2,3); IDM 231: Scripting for IDM I 10 Someone tell me, how could we get more than one value out of a function?

11 Return Arrays function getsize(width, height, depth) { const area = width * height; const volume = width * height * depth; const sizes = [area, volume]; return sizes; } let area_one = getsize(3,2,3)[0]; let volume_one = getsize(3,2,3)[1]; IDM 231: Scripting for IDM I 11 Functions can return more than one value using an array.

12 Arrow Functions const myfunction = function() { //... } const myfunction = () => { //... } IDM 231: Scripting for IDM I 12 ES6 introduced a new syntax for the anatomy of a function, the arrow function. Visually, the arrow function simplifies the syntax, making it shorter, which is a welcome change.

13 Arrow Functions - Single Statement const myfunction = function() { dosomething(); } // Becomes const myfunction = () => dosomething(); IDM 231: Scripting for IDM I 13 If the function of the body contains a single statement, you can omit the brackets and write it all on a single line.

14 Arrow Function - Parameters const myfunction = function(param1, param2) { dosomething(param1, param2); }; // Becomes const myfunction = (param1, param2) => dosomthing(param1, param2); IDM 231: Scripting for IDM I 14 Parameters are passing in the parentheses.

15 Arrow Functions - Single Parameter const myfunction = param => dosomething(param); IDM 231: Scripting for IDM I 15 If you have one (and only one) parameter, you can omit the parentheses completely. Because of the short syntax, arrow functions encourage the use of small functions, which is one of our goals when writing clean, concise scripts.

16 Variable Scope Local vs Global vs Block IDM 231: Scripting for IDM I 16 The location where you declare a variable will affect where it can be used within your code. If you declare it within a function, it can only be used within that function This is known as the variable's scope.

17 Local Scope function getarea(width, height) { var area = width * height; return area; } console.log(area); // ERROR IDM 231: Scripting for IDM I 17 When a variable is created inside a function using the var keyword, it can only be used in that function. It is called a local variable or function-level variable. It is said to have local scope or function-level scope. It cannot be accessed outside of the function in which it was declared. In this example, area is a local variable, only available within the getarea function. area is only available within the getarea() function. Trying to access it outside of that function will produce an error.

18 Global Scope function getarea(width, height) { var area = width * height; return area; } var wallsize = getarea(3,2); console.log(wallsize); // 6 wallsize = 'dog'; console.log(wallsize); // dog IDM 231: Scripting for IDM I 18 If you create a variable outside of a function, then it can be used anywhere within the script. It is called a global variable and has global scope. Global variables are stored in memory for as long as the web page is loaded in the browser, which means they take up more memory than local variables.

19 var Does Not Have Block Scope var x = 1; function myfunction() { x = 2; } console.log(x); // 2 IDM 231: Scripting for IDM I 19 Variables declared with the var keyword do not have block scope, which means if a variable is introduced within a code block, those variables are scoped to the containing function, and the effects of setting them persist beyond the block itself.

20 let & const Do Have Block Scope let x = 1; function myfunction() { let x = 2; console.log(x); // 2 } console.log(x); // 1 IDM 231: Scripting for IDM I 20 By contrast, variables declared with let and const do have block scope. The x = 2 is limited in scope to the block in which it was defined. (This example is using let, but the rules are the same for const)

21 Variable Scope Examples IDM 231: Scripting for IDM I 21 examples/functions/scope.js

22 Objects object variable is called a property functions are called methods IDM 231: Scripting for IDM I 22 Objects group together a set of variables and functions to create a model of something you would recognize from the real world. In an object, variables and functions take on new names. (click) If a variable is part of an object, it is called a property. (click) If a function is part of an object, it is called a method. Methods represent tasks that are associated with the object.

23 Object Example const hotel = { name: 'Hurley\'s Inn', rooms: 40, booked: 25, gym: true, roomtypes: ['twin', 'double', 'suite'], checkavailability: function() { return this.rooms - this.booked; } }; IDM 231: Scripting for IDM I 23 Like variables and named functions, properties and methods have a name and a value. In an object, that name is called a key (the keys in this example would be name, rooms etc). The value of a property can be a string, number, boolean, array, or even another object. The value of a method is always a function (checkavailability). The object is the curly braces and their contents. In this example, the object is stored in a variable called hotel, so you would refer to it as the hotel object. Separate each key from its value using a colon. Separate each property and method with a comma, except the last value.

24 Accessing Properties & Methods const hotelname = hotel.name; const roomsfree = hotel.checkavailability(); IDM 231: Scripting for IDM I 24 You access the properties and methods of an object using what's called dot notation. Use the name of the object, followed by a period, then the name of the property or method you want to access.

25 Accessing Properties & Methods (bracket syntax) const hotelname = hotel['name']; IDM 231: Scripting for IDM I 25 You can also access the properties of an object (but not its methods) using square bracket syntax. This syntax should generally be avoided.

26 Updating an Object hotel.name = 'Aztec'; delete hotel.name; IDM 231: Scripting for IDM I 26 To update a property, use the same technique for assigning a variable value, first naming the object name, then the property, followed by the equals sign, and then the new value. To delete a property, use the delete keyword followed by the object name and property name.

27 Creating Many Objects function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; this.checkavailability = function() { return this.rooms - this.booked; }; } IDM 231: Scripting for IDM I 27 Sometimes you want several objects to represent similar things. Object constructors can use a function as a template for create objects. First you create the template with the object's properties and methods. The this keyword is used instead of the object name to indicate that the property or method belongs to the object that this function creates.

28 Creating More Objects const hurleyhotel = new Hotel('Hurley\'s', 40, 25); const aztechotel = new Hotel('Aztec', 120, 77); IDM 231: Scripting for IDM I 28 You create instances of the object using the construction function. The new keyword followed by a call to the function creates a new object. The properties of each object are given as arguments to the function.

29 Objects Example IDM 231: Scripting for IDM I 29 examples/objects/objects.js

30 Built-In Objects IDM 231: Scripting for IDM I 30 Browsers come with a set of built-in objects that represent things like the browser window and the current web page shown in that window. These built-in objects act like a toolkit for creating interactive web pages. As soon as a web page has loaded into the browser, these objects are available to use in your scripts. These built-in objects help you get a wide range of information such as the width of the browser window, the content of the main heading in the page, or the length of text a user entered into a form field. You access their properties or methods using dot notation, just like you would access the properties or methods of an object you had written yourself.

31 Three Groups of Built-In Objects 1. window object 2. document object 3. global objects IDM 231: Scripting for IDM I 31 The three sets of built-in objects each offer different range of tools that help you write scripts for web pages.

32 window Object Properties window.innerheight window.innerwidth window.pagexoffset window.pageyoffset window.screenx window.screeny window.location IDM 231: Scripting for IDM I 32 The window object represents the current browser window or tab. It is the topmost object in the Browser Object Model, and it contains other objects that tell you about the browser. Here are a selection of some the window object's properties. Height/width of window (excluding browser chrome/ UI) in pixels. Distance document has been scrolled in pixels. X/Y coordinate of pointer Current URL of window object (local file path)

33 window Object Methods window.alert(); window.open(); window.print(); IDM 231: Scripting for IDM I 33 Here are a selection of some the window object's properties and methods. Alert creates a dialog box, open opens a new window, print tells the browser that the user wants to print the contents of the page. examples/objects/objects_window.html

34 document Object Properties document.title document.lastmodified document.url document.domain IDM 231: Scripting for IDM I 34 The topmost object in the Document Object Model (or DOM) is the document object. It represents the web page loaded into the current browser window or tab. Here are some properties of the document object, which tell you about the current page. Title of current document Date on which document was last modified Returns string containing URL of current document Returns domain of current document

35 document Object Methods document.write() document.getelementbyld() document.queryselector() document.queryselectorall() document.createelement() document.createtextnode() IDM 231: Scripting for IDM I 35 The DOM is vital to accessing and amending the contents of the current web page. The following are a few of the methods that select content or update the content of a page. Writes text to document Returns element, if there is an element with the value of the id attribute that matches Returns the first instance of an element that match a CSS selector, which is specified as a parameter Returns list of elements that match a CSS selector, which is specified as a parameter Creates new element Creates new text node examples/objects/objects_document.html js

36 Global Objects: String Object Properties length IDM 231: Scripting for IDM I 36 Whenever you have a value that is a string, you can use the properties and methods of the String object on that value. The length property counts the number of "code units" in a string. In the majority of cases, one character uses one code unit, and most programmers use it like this. But some of the rarely used characters take up two code units.

37 Changes string to uppercase characters Changes string to lowercase characters Takes an index number as a parameter, and returns the character found at that position Returns index number of the first time a character or set of characters is found within the string Returns index number of the last time a character or set of characters is found within the string Returns characters found between two index numbers where the character for the first index number is included and the character for the last index number is not included When a character is specified, it splits the string each time it is found, then stores each individual part in an array Removes whitespace from start and end of string Like find and replace, it takes one value that should be found, and another to replace it (by default, it only replaces the first match it finds) examples/objects/objects_string.js Global Objects: String Object Methods touppercase() tolowercase() charat() indexof() lastlndexof() substring() split() trim() replace() IDM 231: Scripting for IDM I 37

38 For next week IDM 231: Scripting for IDM I 38