Introduction to functions body { background: black; } h1 { color: pink; } function basicHelloWorld() { alert("Hello world!"); } This is a header before the function basicHelloWorld() This is a header after the function! When the function is called with the statement: basicHelloWorld( ), the processing branches to the function and executes it. When the function is complete it returns.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

JavaScript Functions Please use speaker notes for additional information!

Similar presentations


Presentation on theme: "JavaScript Functions Please use speaker notes for additional information!"— Presentation transcript:

1 JavaScript Functions Please use speaker notes for additional information!

2

3 Introduction to functions body { background: black; } h1 { color: pink; } function basicHelloWorld() { alert("Hello world!"); } This is a header before the function basicHelloWorld() This is a header after the function! When the function is called with the statement: basicHelloWorld( ), the processing branches to the function and executes it. When the function is complete it returns.

4

5 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(passedName) { alert("Hello " + passedName); } This is a header before the function basicHello("Ann") This is a header after the function! The name Ann in quotes because it is a literal is passed to the function. Notice that Ann is inside parenthesis. It is received by the function as passedName. The contents of passedName is then used in the alert.

6

7 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(passedName) { alert("Hello " + passedName); } This is a header before the function var theName; theName = window.prompt("Enter your name ",""); basicHello(theName) This is a header after the function! The prompt asks for a name and takes the user input and stores it in theName. The function is then called with theName being passed. The name is received as passedName and then displayed in the alert.

8 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(theName) { alert("Hello " + theName); } This is a header before the function var theName; theName = window.prompt("Enter your name ",""); basicHello(theName) This is a header after the function!

9

10 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(firstName, lastName) { alert("Hello " + firstName + " " + lastName); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

11 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(firstReceived, lastReceived) { alert("Hello " + firstReceived + " " + lastReceived); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

12

13 Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(lastName, firstName) { alert("Hello " + firstName + " " + lastName); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

14

15 Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(firstIn, lastIn) { alert("Hello " + firstIn.value + " " + lastIn.value); } This is a header before the function Enter your first name: Enter your last name: In this example, firstIn and lastIn are received. I am now showing the alert with the code written as firstIn.value and lastIn.value. When the onclick even happens, the function is sent the names of the two text boxes: firstIn and lastIn.

16 function basicHello(firstIn, lastIn) { alert("Hello " + firstIn + " " + lastIn); } The only difference in this code and the last code is the removal of the.value.

17

18 Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(receivedFirst, receivedLast) { alert("Hello " + receivedFirst.value + " " + receivedLast.value); } This is a header before the function Enter your first name: Enter your last name:

19

20 Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(firstIn, lastIn) { document.info.nameOut.value = "Hello " + firstIn.value + " " + lastIn.value } This is a header before the function Enter your first name: Enter your last name: In this example, the function puts the Hello statement in the text box named nameOut. Because it was not passed, we need the very specific name which is document.info.nameOut.value

21

22 Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello() { document.info.nameOut.value = "Hello " + document.info.firstIn.value + " " + document.info.lastIn.value } This is a header before the function Enter your first name: Enter your last name:


Download ppt "JavaScript Functions Please use speaker notes for additional information!"

Similar presentations


Ads by Google