JavaScript Functions Please use speaker notes for additional information!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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: <input type="button" name="toClick" value="Click" onclick="basicHello(firstIn, lastIn)" /> 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.
function basicHello(firstIn, lastIn) { alert("Hello " + firstIn + " " + lastIn); } The only difference in this code and the last code is the removal of the.value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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: