Tuesday, December 20, 2016

Javascript-2-embed/invoke JS / anonymous funcs



Note: HTML file access paths









JavaScript code can be embedded in 3 ways:

1) as an event action of an html element as below

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
</button>


2) Using <script> tag in the <head> tag or <body> tag

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML "Paragraph changed.";
}
</script>

</head>
<body> 

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>



3) Using src attribute of the <script> tag.



Javascript function as an external file(.js  extension)

  • the function needs to be stored within a file with .js extension. No script tag needed.
  • the .js file can be included within another webpage using the <script> tag's src attribute as below:
    • </body>
    • <script src="myScript.js"></script>
    • </body>

  • Multiple .js files can be included within the same web with multiple <script> tags.
    • </body>
    • <script src="myScript.js"></script>
    • <script src="myScript2.js"></script>
    • </body>
  • Or use external .js file using their links as below:
    • <script src="http://externallink.com/myScript.js"></script>

4) the + sign in front of the function means/does
refer:(http://stackoverflow.com/questions/13341698/javascript-plus-sign-in-front-of-function-name)


It forces the parser to treat the part following the + as an expression. This is usually used for functions that are invoked immediately, e.g.:
+function() { console.log("Foo!"); }();
Without the + there, if the parser is in a state where it's expecting a statement (which can be an expression or several non-expression statements), the word function looks like the beginning of a function declaration rather than a function expression and so the () following it (the ones at the end of the line above) would be a syntax error (as would the absense of a name, in that example). With the +, it makes it a function expression, which means the name is optional and which results in a reference to the function, which can be invoked, so the parentheses are valid.
+ is just one of the options. It can also be -!~, or just about any other unary operator. Alternately, you can use parentheses (this is more common, but neither more nor less correct syntactically):
(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());

______________________________________

Anonymous functions:
reference : (link)

An anonymous function is a function that was declared without any named identifier to refer to it. As such, an anonymous function is usually not accessible after its initial creation.
Normal function definition:
function hello() {
  alert('Hello world');
}
hello();
Anonymous function definition:
var anon = function() {
  alert('I am anonymous');
};
anon();
One common use for anonymous functions is as arguments to other functions. Another common use is as a closure, for which see also the Closures chapter.
Use as an argument to other functions:
setTimeout(function() {
  alert('hello');
}, 1000);
Above, the anonymous function is passed to setTimeout, which will execute the function in 1000 milliseconds.
Use as a closure:
(function() {
  alert('foo');
})();
Breakdown of the above anonymous statements:
  • The surrounding parentheses are a wrapper for the anonymous function
  • The trailing parentheses initiate a call to the function and can contain arguments
Another way to write the previous example and get the same result:
(function(message) {
  alert(message);
}('foo'));
An alternative representation of the above places the initiating braces to the surrounding braces and not the function itself, which causes confusion over why the surrounding braces are needed in the first place.
(function() {
  // …
})();
Some have even resorted to giving the trailing braces technique derogatory names, in an effort to encourage people to move them back inside of the surrounding braces to where they initiate the function, instead of the surrounding braces.
An anonymous function can refer to itself via arguments.callee local variable, useful for recursive anonymous functions:
// returns the factorial of 10.
alert((function(n) {
  return !(n > 1)
    ? 1
    : arguments.callee(n - 1) * n;
})(10));
However, arguments.callee is deprecated in ECMAScript 5 Strict. The issues with arguments.callee are that it makes it impossible to achieve tail recursion (a future plan for JavaScript), and results in a different this value. Instead of using arguments.callee, you can use named function expression instead:
// returns the factorial of 10.
alert( (function factorial(n) {
  return (n <= 1)
    ? 1
    : factorial(n - 1) * n;
})(10) );

_______________________________________

No comments:

Post a Comment