{"id":20921,"date":"2016-03-29T03:01:03","date_gmt":"2016-03-28T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20921"},"modified":"2016-03-29T11:52:16","modified_gmt":"2016-03-29T01:52:16","slug":"javascript-function-overload-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-function-overload-primer-tutorial\/","title":{"rendered":"Javascript Function Overload Primer Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript Function Overload Primer Tutorial<\/p><\/div>\n

Today’s blog posting, long in the making, is about Javascript’s function override (or overload) capabilities. We’ve spoken about this before in relation to C++ or Java with these tutorials<\/a>.<\/p>\n

So let’s do a simple example first. Take the Javascript global function encodeURIComponent([String])<\/i><\/a> … to the seaside (would be nice)<\/font> … and the very similar, but not quite the same encodeURI<\/i><\/a> … okay, time’s up. Now examine two bits of code, the first from a parent HTML and the second from the HTML of its “child” iframe …<\/p>\n


\n document.title=encodeURIComponent(\" The rain in Spain falls mainly on the plain. Yes? \");
\n<\/code><\/p>\n


\n document.title=encodeURIComponent(\" The rain in Spain falls mainly on the plain. Yes? \");
\n<\/code><\/p>\n

… patently the same … but they result in different document.title<\/i> results, as per, respectively …<\/p>\n


\n%20The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.%20Yes?%20
\n<\/code><\/p>\n


\n%20The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.%20Yes%3F%20
\n<\/code><\/p>\n

So how does this figure? Well, the child HTML iframe call really calls the Javascript encodeURIComponent<\/i> function, but the parent HTML call actually calls a local overload (or override) function within its own Javascript as per …<\/p>\n


\nfunction encodeURIComponent(es) {
\n return encodeURI(es);
\n}
\n<\/code><\/p>\n

… and this shows that Javascript can perform some rudimentary overload (or override) methodologies, and how that “?” (not translated by encodeURI<\/i>) is translated by the Javascript (native) encodeURIComponent<\/i> function.<\/p>\n

You may wonder, at this point, why this blog posting took so long? Well, the original “dream” with this work … which, by the way, cannot work with functions like Math.pow(x,y)<\/i>, because of the Javascript language interpretation of the “.”, unfortunately<\/font> … was to take the (old) ology_chalkboard.html<\/a> of Suffix Ology Primer Tutorial<\/a> as shown below, from some days back, and have it be virtually untouched apart from the inclusion of the external Javascript call …<\/p>\n


\n<script type='text\/javascript' src='dotdotdot.js' defer><\/script>
\n<\/code><\/p>\n

… that did end up making it into the reworked ology_chalkboard.html<\/a> but as the task of overloading (or overriding) the function …<\/p>\n


\nvar userinput = prompt<\/a>([the prompt], [the default value]);
\n<\/code><\/p>\n

… turned into reality “reworked” may not be a descriptive enough term. We started down the route of a child HTML iframe piece of HTML calling the Javascript native prompt([the prompt], [the default value])<\/i> while the parent did the overloading (or overriding), but as the timing of events got involved the “dream” was modified to lose its cute, generic flavour … but it was achieved, and we used jQuery UI Dialog<\/a> techniques to end up with what we ended up with, and which you can read about, also, at this blog, at jQuery UI Modal Dialog Primer Tutorial<\/a>. Please note, though, that the original HTML source code calls that involved var blah=prompt[prompt blah],[default blah])<\/i> … looking like … <\/p>\n


\nfunction addsome() {
\n var two=\"\", three=\"\", one=prompt(\"Enter first of your Suffix Ology parts (adjust accordingly)\", \"ology\");<\/b>
\n if (one != \"\") {
\n \/\/ more here originally and much more, and reworked, with latest version
\n }
\n}
\n<\/code><\/p>\n

… remain in the code as these calls (but now plus quite a few more), that the parent HTML code overloads (or overrides) via dotdotdot.js<\/i> including our new prompt.js<\/i> via … <\/p>\n


\nvar head= document.getElementsByTagName('head')[0]; \/\/ thanks to http:\/\/unixpapa.com\/js\/dyna.html
\nvar script= document.createElement('script');
\nscript.type= 'text\/javascript';
\nscript.src= 'prompt.js'; \/\/ our window.prompt function override technique
\nhead.appendChild(script);
\n<\/code><\/p>\n

… and, as it says in the code, we thank this useful link<\/a> for the help here.<\/p>\n

Being as we involved jQuery UI Dialogs we figured why not add some design “smarts” to our new home styled prompt()<\/i> “windows”, so as well as the usual “Cancel” and “OK” buttons of the native Javascript prompt()<\/i> windows we add “Will Append More in 5” and “Will Append More in 30” allowances to append user input to the same user input. So the “bottom line” is that our new HTML calls prompt()<\/i> via its external Javascript’s prompt.js<\/i> as per …<\/p>\n


\nfunction prompt(q,d) {
\n \/\/ lots of code before the \"disastrous return\" scenario way below
\n<\/b>
\n \/\/ end of lots of code before the \"disastrous return\" scenario just below
\n return '';
\n}
\n<\/code><\/p>\n

… which you can examine at … <\/p>\n