MODULE 1: BASIC DIGITAL SKILLS UNIT 6: SUBROUTINES/FUNCTIONS PROJECT TITLE SILVERCODE PROJECT ACRONYM SILVERCODE DATE OF DELIVERY AUTHORS CATALIN MARTIN EDITORS INTELECTUAL OUTPUT AVAILABILITY OF DELIVERABLE This project has been funded with support from the European Commission. This publication reflects the views only of the author, and the Commission cannot be held responsible for any use which may be made of the information contained therein. Table of Contents Entrance 2 Keywords 2 I. Module/unit overview 2 II. Learning content 2 Introduction (short explanation) 2 Learning Objective 2 1. What is a subroutine/function 2 2. Defining a subroutine/function 3 3. Calling a subroutine/function. Examples 3 3.1. The JavaScript call() Method 4 3.2 Counter 6 Summary of Key Points 6 III Conclusion 6 IV Further resources / Additional reading 6 V Self-test questions. Exercises 6 VI Glossary 7 VII References 8 Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ Module 1/unit 6: Basic Digital Skills. Subroutines or Functions _____________________________________________________________________ Entrance Keywords (list of relative Keywords – up to six) – do not appear in the table of contents but simply immediately after the heading of the component) I. Module/unit overview Learning outcomes1 As a result of engaging with the materials in this module, learners are intended to achieve the following learning outcomes: Knowledge: Competences: Time schedule Structure II. Learning content Introduction (short explanation) Learning Objective: What you will learn in this module/unit? - What is a subroutine and how is composed. - Learn to write a very simple subroutine. 1. What is a subroutine/function Gratitude can transform common days into thanksgivings, turn routine jobs into joy, and change ordinary opportunities into blessings. William Arthur Ward A JavaScript subroutine/function is a block of code designed to perform a particular task. 1 https://europass.cedefop.europa.eu/education-and-training-glossary/l Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ A subroutine is a way to create your own function. Every subroutine must be defined inside some class. A function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value. Why Functions? You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results. 2. Defining a subroutine/function A subroutine must be defined outside of where the rest of the code is being written. Every function in JavaScript is a Function object. Every function in JavaScript is a Function object. To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined. The parameters of a function call are the function's arguments. Arguments are passed to functions by value. A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by: The name of the function. A list of parameters to the function, enclosed in parentheses and separated by commas. Function parameters are the names listed in the function definition. The JavaScript statements/arguments that define the function, enclosed in curly brackets, { }. Function arguments are the real values received by the function when it is invoked. For example, the following code defines a simple function named square: function square(number) { return number * number; } The function square takes one parameter, called number. The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function. return number * number; 3. Calling a subroutine/function. Examples Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square, you could call it as follows: Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ square(5); The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25. If a function is called with missing arguments (less than declared), the missing values are set to: undefined. The code inside the function will execute when something" invokes (calls) the function: When an event occurs (when a user clicks a button) When it is invoked (called) from JavaScript code Automatically (self invoked) Using the example above, toCelsius refers to the function object, and toCelsius() refers to the function result. Accessing a function without () will return the function definition instead of the function result: <script> function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius(77); </script> or <script> function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius; </script> 3.1. The JavaScript call() Method The call() method is a predefined JavaScript function method. It can be used to invoke (call) a function with an owner object as the first argument (parameter). With call(), you can use a method belonging to another object. This example calls the fullName function of person, but is using it on myObject: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var person = { firstName:"John", lastName: "Doe", Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ fullName: function() { return this.firstName + " " + this.lastName; } } var myObject = { firstName:"Mary", lastName: "Doe", } x = person.fullName.call(myObject); document.getElementById("demo").innerHTML = x; </script> </body> </html> Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ 3.2 Counter Suppose you want to use a variable for counting something, and you want this counter to be available to all functions. You could use a global variable, and a function to increase the counter: <!DOCTYPE html> <html> <body> <p>Counting with a global variable.</p> <button type="button" onclick="myFunction()">Count!</button> <p id="demo">0</p> <script> var counter = 0; function add() { return counter += 1; } function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </body> </html> Summary of Key Points (what did the participant learn) III Conclusion IV Further resources / Additional reading V Self-test questions. Exercises 1. A subroutine is a: a. piece of code which does something over and over again; b. piece of code which gives us a black screen; c. method to turn on your computer. 2. A subroutine is composed by: a. statements b. modifiers c. parameter-list d. return type e. all of the above. Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ 3. The subroutine doesn't actually get executed until it is called. a. True b. False 4. If the subroutine is a function, then return-type is a string, int or double []. If the subroutine is not a function, the return-type is replaced by special value: a. blank b. void c. none 5. Give an example from day by day life which can be explained as a subroutine. Exercise: 1. Use the function to display the product of 5 * 5. <script> function myFunction() { // Add code here } document.getElementById("demo").innerHTML = myFunction(); </script> ANSWER: <script> function myFunction(number) { return number * number } document.getElementById("demo").innerHTML = myFunction(5); </script> 2. Use the function to display "Hello John". <script> function myFunction(name) { return "Hello " + name; } </script> ANSWER <script> function myFunction(name) { return "Hello " + name; } document.getElementById("demo").innerHTML = myFunction("John"); </script> VI Glossary Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ VII References http://www.howtocreate.co.uk/tutorials/javascript/functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions https://www.tutorialspoint.com/javascript/javascript_functions.htm https://www.w3schools.com/js/js_functions.asp http://www.personal.psu.edu/pzb4/javascript/functions.html https://eloquentjavascript.net/03_functions.html Learning Objective (at the beginning: What you will learn in this module/unit?) Summary of key points (at the end: What did you learn?) Important Problem/Question (for discussion/reflection) Background Information to keep in mind Advise/Hint/Tip Definition Task/To-do Download Module 1 Unit 6: Basic Digital Skills. Subroutines or Functions https://www.silvercodeproject.eu/ .