1 / 17

JavaScript – Functions

JavaScript – Functions. 2017, Fall Pusan National University Ki-Joune Li. JavaScript Function. <!DOCTYPE html > < html > < body > <h2> JavaScript Functions </h2> < p > This is a sample function :</ p > < p id =" demo "></ p > < script > function myFunction (p1, p2) {

cummingsk
Download Presentation

JavaScript – Functions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  4. JavaScript Function – argument passing 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 • 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

  5. JavaScript Function – argument passing 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 • 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

  6. JavaScript Function – argument passing caller callee functionA(num, obj1, obj2); functionfunctionA(a, b, c) value copied num a reference copied obj1 b reference copied obj2 c {item: "changed"}

  7. JavaScript Function – argument passing <!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> Another Example 1. Member change: effect on the caller 2. Object change: no effect on the caller

  8. JavaScript Function – argument <!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 • Missing Arguments

  9. JavaScript Function – argument <!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 functions have a built-in object called the arguments object.

  10. JavaScript Function – function 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 • Function expression can be stored as a variable

  11. JavaScript Function – function 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;} var z=x; document.writeln("<p> result is "+z(4, 3)+"</p>"); </script> </body> </html> • Variable as a function

  12. JavaScript Function – Function constructor <!DOCTYPE html> <html> <body> <h2>JavaScriptFunctions</h2> <p>Thisis a sample function:</p> <pid="demo"></p> <script> var x=newFunction("a", "b", "returna * b") ; document.writeln("<p> result is "+x(4, 3)+"</p>"); </script> </body> </html> Built-in Java function constructor Function Constructor: Function()

  13. JavaScript Function – function invocation var myObject = {    firstName:"John",    lastName: "Doe",fullName: function () {returnthis.firstName + " " + this.lastName;    }}myObject.fullName();  • 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 functionas a method

  14. JavaScript Function – function invocation 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 a global function

  15. JavaScript Function – function invocation <!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 Invoking function constructor

  16. JavaScript Function – event <!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 Invoking a global function

  17. JavaScript Function – recursion <!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> > Recursion like other high level language

More Related