{"id":20773,"date":"2016-03-19T03:01:07","date_gmt":"2016-03-18T17:01:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20773"},"modified":"2016-03-19T05:35:54","modified_gmt":"2016-03-18T19:35:54","slug":"javascript-eval-functional-calls-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-eval-functional-calls-primer-tutorial\/","title":{"rendered":"Javascript Eval Functional Calls Primer Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript Eval Functional Calls Primer Tutorial<\/p><\/div>\n

As with “associative array” usage in Javascript which we last discussed with Javascript Associative Array Mobile Friendly Tutorial<\/a> where “names” take precedence over “number” (indexes) … transparency over obfuscation, if you like … and Javascript’s eval()<\/i><\/a> method becomes so important, today we use Javascript in such a way that eval<\/i> helps us code and document (just by coding) because a (SELECT element) dropdown’s values become the same as the Javascript function names, reminiscent (don’t you think?) of Function pointers in C and C++ that we discussed at this blog some time back with Function Pointers in C and C++ Primer Tutorial<\/a> as shown below.<\/p>\n

And so, we say here …<\/p>\n

\nMake a friend of Javascript eval<\/i>.\n<\/p><\/blockquote>\n

… as much as anything, because it’s unspeakable what Javascript eval<\/i> does to you should you be unkind … but we digress<\/font>.<\/p>\n

Here we are being friends … but not being smarmy<\/font> … accessed after the SELECT element’s onchange<\/i> event and after the INPUT element (text box) onblur<\/i> event …<\/p>\n


\nfunction construct(textval, selval) {
\n document.getElementById('td' + cnt + '_3').innerHTML=eval(selval + '(\"' + textval + '\")');
\n}
\n<\/code><\/p>\n

… where variable<\/font> selval<\/i> represents one of those HTML SELECT element (dropdown) values and variable<\/font> textval<\/i> represents business logic. Let’s make all this more transparent now. What we do today is to ask for some text entered in interactively by the user, and in addition the user selects a “musical mood” HTML SELECT element (dropdown) value. Our HTML and Javascript and CSS web application goes away and represents that mood with some HTML CSS text ideas displayed in an HTML table element cell (HTML td element) on the right hand side of that table’s current row (HTML tr element). The web application then adds in another row for you, the user, to try again, as you see fit. Pretty simple idea, huh? Along the way, in a small way, we used the knowledge from yesterday’s CSS3 Web Fonts Primer Tutorial<\/a> as shown way below.<\/p>\n

And here’s some code for what we do if the user chooses Crescendo<\/i> as their selected option from the dropdown …<\/p>\n


\nfunction Crescendo(thistext) {
\n var rethtml='';
\n for (var i=1; i<=thistext.length; i++) {
\n rethtml+='<span style=color:' + cols[eval(i % cols.length)] + ';' + 'font-size:' + eval(2 * (i + 11)) + 'px;>' + thistext.substring(eval(-1 + i), eval(0 + i)) + '<\/span>';
\n }
\n return rethtml;
\n}
\n<\/code><\/p>\n

Hopefully we got an “ah”<\/i> moment out of readers who are new to this?! This one may be revisited, to extend, but why not try this first draft as a live run<\/a> and\/or examine the HTML and Javascript and CSS(3) you could call text_musical_moods.html<\/a>? (yes, it was a question)<\/p>\n

\n

Previous relevant Function Pointers in C and C++ Primer Tutorial<\/a> is shown below.<\/p>\n

\"Function<\/a>

Function Pointers in C and C++ Primer Tutorial<\/p><\/div>\n

When programming C and C++ you often talk about functions and methods respectively as a way to compartmentalize the work that your program needs to do. Have you found yourself having these functions and methods well defined and similarly structured in terms of return types and argument types, yet doing different things, and you can define, in a switch statement, for instance, which one you’d want to do at any one particular part of your program execution. This is where Function Pointers, optionally arranged into arrays, can be a good thing to learn about, as we do in this primer tutorial written in XCode C and C++.<\/p>\n

Background reading for tutorial:<\/p>\n