Functions pack JavaScript statements in a block that can be used over and over again. Any programming language worth its salt allows coders to define and call functions.<\/p>\n
\r\n<SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"TEXT\/JAVASCRIPT\">\r\n<!--\r\nfunction alert_box()\r\n {\r\n alert(\"I am displayed by a function\"); \r\n document.bgColor=\"#EEEEEE\";\r\n }\r\n\/\/-->\r\n<\/SCRIPT>\r\n<\/pre>\nA function consists of the function<\/em><\/strong> keyword, the name of the function followed by a pair of parenthesis and lastly, the JavaScript statement\/s enclosed by curly braces.<\/p>\nYou can give any name to the function as long as it is not a JavaScript reserved keyword. (The list of reserved keywords can be found here<\/a>.)
The function name can contain only alphanumeric characters (alphabet and digits) and the underscore. Also, the name cannot begin with a numeral.<\/p>\nSome valid function names<\/strong><\/p>\n\n- display_alert_box<\/li>\n
- calculate<\/li>\n
- _make_love_not_war<\/li>\n
- average1<\/li>\n<\/ul>\n
Some invalid function names<\/strong><\/p>\n\n- @whats_up_doc – (uses an invalid character)<\/li>\n
- 123calc – (function name cannot begin with a numeral)<\/li>\n<\/ul>\n
Remember, function names are case sensitive, thus, alert_box is not the same as Alert_box.
\nThe function block can contain several JavaScript statements enclosed between the curly braces.
\nThe function in itself does not do anything till we call<\/strong><\/em> it.<\/p>\nCalling functions<\/h2>\n
Calling a function is simple. You have to specify its name followed by the pair of parenthesis.<\/p>\n
\r\n<SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"TEXT\/JAVASCRIPT\">\r\n<!--\r\n\r\nalert_box();<\/strong>\r\n\r\n\/\/-->\r\n<\/SCRIPT>\r\n<\/pre>\nIt’s good programming practice to place all functions in the HEAD section of the HTML document between the <SCRIPT> – <\/SCRIPT> tags. Function calls, on the other hand, can occur in any part of the document (where ever they are needed!), even inside event handler code.<\/p>\n
Using a function call inside event handler code<\/h2>\n
The code below, calls the function we defined at the beginning of this session. This time we call it thru the onclick()<\/em> event handler.<\/p>\n\r\n<A HREF=\"javascript:void(0)\" onclick=\"alert_box()\"<\/strong>>\r\nFunction called thru an event handler<\/A>\r\n<\/pre>\nYou’ll notice that a function call looks very similar to calling a method. Now, wasn’t that simple?<\/p>\n
Opening a new window through a function<\/h2>\n
In the previous session, our event handler code for opening a new window had become very long. So instead of writing the code in the HTML tag, we shall place it inside a function and call this function from the event handler.<\/p>\n
\r\n<SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"TEXT\/JAVASCRIPT\">\r\n<!--\r\n\r\nfunction open_win()\r\n {\r\n window.open('welcome.html','welcome','width=300,height=200,\r\n menubar=yes,status=yes,location=yes,\r\n toolbar=yes,scrollbars=yes');\r\n }\r\n\r\n\/\/-->\r\n<\/SCRIPT>\r\n<\/pre>\nNote:<\/strong> the entire JavaScript code should be placed on a single line. For clarity, I have put the code on multiple lines.
\nWe name this function open_win<\/strong> and place it in the HTML head section.<\/p>\n\r\n<A HREF=\"javascript:void(0)\" onclick=\"open_win()\">\r\nGet a welcome message<\/A>\r\n<\/pre>\nReally appreciating functions<\/h2>\n
What if you had ten links on a page each opening a new 400X200 pixel window with a different url? Writing separate code for each link can become quite a pain. A simple solution would be to create a function that opens the new window and call it through an event handler. However, we are still left with a problem! How do we instruct the same function to load a different url in each new window? Before we delve deeper into functions let us have a look at variables.<\/p>\n
\n\n- < Back<\/a><\/li>\n
- 1<\/a><\/li>\n
- …<\/li>\n
- 10<\/a><\/li>\n
- …<\/li>\n
- 13<\/a><\/li>\n
- …<\/li>\n
- 20<\/a><\/li>\n
- …<\/li>\n
- 30<\/a><\/li>\n
- …<\/li>\n
- Next ><\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Functions pack JavaScript statements in a block that can be used over and over again. Any programming language worth its salt allows coders to define and call functions. What are javaScript functions? – An example <SCRIPT LANGUAGE=”JavaScript” TYPE=”TEXT\/JAVASCRIPT”> <!– function alert_box() { alert(“I am displayed by a function”); document.bgColor=”#EEEEEE”; } \/\/–> <\/SCRIPT> A function consists […]","protected":false},"author":1,"featured_media":15641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4418"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4418\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/15641"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}