<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Defining a Simple Function and Function Calls</title> <script> window.onload = function () { document.getElementById('btnGreet').addEventListener('click', greeting); } function greeting() { var resultDiv = document.getElementById('result'); resultDiv.innerHTML = "<h1>greetings!</h1>"; } </script> </head> <body> <div id='result'></div> <button id="btnGreet">Greet Me</button> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Function Parameters</title> <script> window.onload = function () { calculateDogYears(6); calculate(257, 63, 10); } function calculateDogYears(ageInHumanYears) { var dogYears = ageInHumanYears * 7; document.getElementById('result').innerHTML = "<h1>" + dogYears + " dog years</h1>"; } function calculate(atBats, hits, walks) { var ba = Math.floor(hits / (atBats - walks) * 1000) / 1000; document.getElementById('result').innerHTML += "<br/><h1>" + ba + " batting average</h1>"; } </script> </head> <body> <div id='result'></div> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>The Return Statement</title> <script> window.onload = function () { var x = 215; var y = 115.5; var sum = addThese(x, y); document.getElementById('result').innerHTML = sum; document.getElementById('result').innerHTML += '<br/>' + multiplyThese(x, y); document.getElementById('result').innerHTML += '<br/>' + subtractThese(x, y); } function addThese(a, b) { var c = a + b; return c; } function subtractThese(a, b) { var c = a - b; return c; } function multiplyThese(a, b) { var c = a * b; return c; } </script> </head> <body> <div id='result'></div> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Anonymous Function</title> <script>; window.onload = function () { var btnPress = document.getElementById('myButton'); btnPress.addEventListener('click', function () { alert("button pressed"); }); } </script> </head> <body> <div id='result'></div> <button id="myButton">Press Me</button> </body> </html>