JavaScript – Functions

JavaScript – Functions
2017, Fall Pusan National University Ki-Joune Li

JavaScript Function JavaScript function is a block of code to perform a particular task. Example <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> function myFunction(p1, p2) { return p1 * p2; } document.writeln("<p> result is "+myFunction(4, 3)+"</p>"); </script> </body> </html>

JavaScript Function – argument
Syntax: very similar with other high level languages like Java function name( parameter1, parameter2, parameter3 ) { code to be executed } * Function invocation without (): Example <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <script> function myFunction( p1, p2 ) { return p1 * p2; } document.writeln("<p> result is "+myFunction( 4, 3 )+"</p>"); </script> </body> </html> Formal Parameters Parameters Actual Parameters Arguments

JavaScript Function – argument passing
Call-by Sharing JavaScript primitive types are passed by value. The function only gets to know the values, not the argument's locations JavaScript objects are passed by reference. In JavaScript, object references are values. Because of this, objects will behave like they are passed by reference function changeStuff(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; changeStuff(num, obj1, obj2); document.writeln("<p>"+num+"</p>"); document.writeln("<p>"+obj1.item+"</p>"); document.writeln("<p>"+obj2.item+"</p>"); 10 changed unchanged

num: a value 10 is passed to parameter a References of num and a are different – no effect on the caller obj1: a reference value to obj1 is passed to b References of obj1 and b are identical – effect on the caller obj2: a reference value to obj2 is passed to c References of obj1 and c were identical A new object is created and overwritten – no effect on the caller function functionA(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; functionA(num, obj1, obj2); document.writeln("<p>"+num+"</p>"); document.writeln("<p>"+obj1.item+"</p>"); document.writeln("<p>"+obj2.item+"</p>"); 10 changed unchanged

caller callee functionA(num, obj1, obj2); function functionA(a, b, c) value copied num a reference copied obj1 b reference copied obj2 c {item: "changed"}

Another Example <!DOCTYPE html> <html> <body> <script> function changeObject(x) { x = {member:"bar"}; alert("in changeObject: " + x.member); } function changeMember(x) { x.member = "bar"; alert("in changeMember: " + x.member); var x = {member:"foo"}; alert("before changeObject: " + x.member); changeObject(x); alert("after changeObject: " + x.member); alert("before changeMember: " + x.member); changeMember(x); alert("after changeMember: " + x.member); </script> </body> </html> 1. Member change: effect on the caller 2. Object change: no effect on the caller

Missing Arguments <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> function myFunction(p1,p2) { if(p2==undefined ) p2=0; return p1 * p2; } document.writeln("<p> result is "+myFunction( 4 )+"</p>"); </script> </body> </html> 1 missing argument (default argument) 1 argument

JavaScript functions have a built-in object called the arguments object. <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> x=findMax(1, 200, 23, 34, 90); document.writeln("<p> Max"+x+"</p>"); function findMax() { var i; var max = -Infinity; for (i = 0; i < arguments.length ; i++) { if( arguments[i] > max) { max = arguments[i] ; } } return max; } </script> </body> </html> Argument Object

JavaScript Function – function as a variable
Function expression can be stored as a variable <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> var x= function(p1, p2) {return p1 * p2;} document.writeln("<p> result is "+x(4,3)+"</p>"); </script> </body> </html> Anonymous Function

JavaScript Function – function as a variable
Variable as a function <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> var x=function(p1, p2) {return p1 * p2;} var z=x; document.writeln("<p> result is "+z(4, 3)+"</p>"); </script> </body> </html>

JavaScript Function – Function constructor
Function Constructor: Function() <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> var x=new Function("a", "b", "return a * b") ; document.writeln("<p> result is "+x(4, 3)+"</p>"); </script> </body> </html> Built-in Java function constructor

JavaScript Function – function invocation
Function is invoked When it is invoked (called) from JavaScript code When an event occurs (when a user clicks a button) Automatically (self invoked) Invoking a function as a method var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName();

Invoking a global function function myFunction(a, b) { return a * b; } myFunction(10, 2); function myFunction(a, b) { return a * b; } window.myFunction(10, 2); By default, global function that belongs to HTML page  to window object

Invoking function constructor <!DOCTYPE html> <html> <body> <p>In this example, myFunction is a function constructor:</p> <p id="demo"></p> <script> function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John","Doe") document.getElementById("demo").innerHTML = x.firstName; </script> </body> </html> By default, global function that belongs to HTML page  to window object

JavaScript Function – event
Invoking a global function <!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> Callback function – invoked when button is clicked

JavaScript Function – recursion
Recursion like other high level language <!DOCTYPE html> <html> <body> <p>Computing Factorial by Recursion</p> <script> function myFactorial(a) { if(a==1) return 1; else return a*myFactorial(a-1); } var num; var intValue; num=window.prompt("Please enter an integer number"); intValue=parseInt(num); document.writeln("<p>"+intValue+"! is "+ myFactorial(intValue)+"<p>"); </script> </body> </html> >

JavaScript – Functions

Similar presentations

Presentation on theme: "JavaScript – Functions"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

JavaScript – Functions

Similar presentations

Presentation on theme: "JavaScript – Functions"— Presentation transcript:

Similar presentations

About project

Feedback