JavaScript Part 2 Organizing JavaScript Code into Functions Connecting a form to a JavaScript
Learning Objectives By the end of this lecture, you should be able to: Describe the difference between stand-alone code as opposed to code contained inside a function Define the term ‘invoke’ Create a JavaScript function Connect your form to a function via a button Explain why it is important to refresh your page constantly FROM MEMORY: Be able to to create a very simple JS function, and invoke that function from a form
Organizing scripts inside functions While it is possible to place individual lines of script anywhere we want inside our HTML document, we will now begin using the following method: We will organize our various scripts into functions. We will place these functions inside the <head> section of our html documents. Even though the functions live in the <head> section, we will typically give the command to execute these functions from inside the <body> section. Commanding a function to run, is referred to as "invoking" the function.
Writing a JS Function All functions must have a name (“identifier”) Naming conventions (yup, another one) to use when naming a JS function: First letter uncapitalized and all subsequent words should be capitalized (known as “camel case”) No spaces between words Avoid “reserved” words (function, if, return, etc, etc) The function name is followed by parentheses ‘( )’ Later we will discuss what can go inside these parentheses. The beginning and end of the body of the function must be delineated by braces: { and }
Function Template function firstFunction( ) { alert("My first try at a function!"); } Note: While nearly all JS lines must end with a semicolon, this does NOT apply to function declarations. (The ‘declaration’ is the first line where you ‘declare’ the name of the function)
Reminder: Clarity function myFirstFunction( ) { alert("My first try at a function."); alert("I hope it works."); } Note how each brace is placed on its own line Note how every statement inside the function is indented Note the ‘camel case’ convention for naming the function Note that there is NO semicolon at the end of the function declaration
Stand-Alone code v.s. Code inside a function With stand-alone script (i.e. script that is not contained inside a function), the script code is executed automatically when the page is loaded. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Functions Example</title> <script type="text/javascript"> alert("Hello..."); </script> </head> <body> <h2>Some JS code...</h2> Note how the JS code is executed automatically when the page loads. </body> </html>
Stand-Alone code v.s. Code inside a function In this example, the JS code is placed inside the <body> section. This is fine. However, note that unlike the previous example, this time, the code will be executed after the HTML code is displayed on the browser page. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Functions Example</title> </head> <body> <h2>Some JS code...</h2> Note how the JS code is executed automatically when the page loads. <script type="text/javascript"> alert("Hello..."); </script> </body> </html>
Stand-Alone code v.s. Code inside a function If code is tucked away inside a function, the code is NOT executed automatically. If / when you wish to execute the code, you must invoke the function. If you never invoke the function, the code will never be executed!
Code inside a function The JavaScript code on this particular page will never be executed! It is contained inside a function – but at no point on the page did we ever invoke the function. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Functions Example</title> <script type="text/javascript"> function greetUser() { alert("Hello, user!"); } </script> </head> <body> <h2>Some JS code...</h2> This JS code will never be executed! </body> </html>
How to execute ("invoke") a JavaScript function There are two ways of invoking functions that we will focus on during this course: Via a JavaScript command (discussed later) Via the onclick attribute of an HTML button
How to invoke a function: --The ‘onclick’ attribute -- <input type="button" value="Greet the user" onclick="greetUser()"> The onclick attribute is most commonly applied to an HTML button. It can be applied to other things as well, such as images. The value given to the onclick attribute must match the name of your function. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Functions Example</title> <script type="text/javascript"> function greetUser() { alert("Hello, user!"); } </script> </head> <body> <input type="button" value="Greet the user" onclick="greetUser()"> </body> </html>
Bugs (Coding Errors)… Debugging is MUCH easier when it is caught early. Just one small error can sometimes cause the entire page to fail to display! Key Point: Refresh your page CONSTANTLY. Don't type out multiple lines of code and then refresh. If you're not certain that you code is working, make sure you refresh your page to test it before moving on.
Executing a script from a form In this course, we will nearly always execute our scripts from an HTML form. Let’s go through the process of creating a button on a form that will execute a JS. The steps are: 1. Create the script 2. Create the button. 3. Connect the button to the script.
The Greeting: I: The Script function greetUser( ) { alert("Hello"); } Pop-Quiz: In which section of your document should this function be placed? Answer: Inside the <head> section
The Greeting: II: The Button <form id="practiceForm"> <input type="button" value="Greet Me!" > </form>
The Greeting: III: Connect the button to the script. We will use the ‘onclick’ attribute to invoke the greetUser( ) function: <form id="practiceForm"> <input type="button" value="Greet Me!" onclick="greetUser()" > </form> The value of the onclick attribute must match the name of the JS function you wish to invoke. Note: No semicolon inside the attribute value The next slide has the complete code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Functions Example</title> <script type="text/javascript"> function greetUser( ) { alert("Hello..."); } </script> </head> <body> <form id="practiceForm"> <input type="button" value="Greet Me!" onclick="greetUser()" > </form> </body> </html>
Example functions_example.htm In addition to giving another example of the concepts discussed in this lecture, this page also demonstrates how you can have multiple functions on a single page. Having multiple functions on a page is common – and in fact, is a very good way to organize code.
Pop-Quiz: What do I do now? Answer…. PRACTICE!!!