Saturday, January 26, 2019

How to run JavaScript source files?

First method, use JavaScript online editor


You can go to CodePen (https://codepen.io/) and in the JavaScript window you can paste the code and experiment.

Second method, running JavaScript code from a HTML document

Make a HTML file and embed JavaScript Code

Make a JavaScript file. Put your JavaScript code in this file
In the HTML file, include script tag and refer to the JavaScript file you have created.
Run the html file in any browser.

Inline JavaScript file

HTML document
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7.  
  8. <script>
  9. console.log("javascript is working");
  10. </script>
  11. </body>
  12. </html>


Embed JavaScript file

HTML document
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. </head>
  5. <body>
  6. <h1>Testing JavaScript</h1>
  7. <p>Open Web Browser's developer tools Console window and reload this page.</p>
  8. <script src="code.js"></script>
  9. </body>
  10. </html>

code.js document

  1. alert("Hi world");

References

https://www.webtoolkitonline.com/javascript-tester.html
https://js.do/
https://jsfiddle.net/

Resources

Hackr.io (Find & share the best online programming courses & tutorials)
Free Code Camp (www.freecodecamp.com)
Team Treehouse (www.teamtreehouse.com)
Codewars (codewars.com)
iLoveCoding Javascript Screencasts (https://ilovecoding.org)
Codementor(https://www.codementor.io/javasc...)
CodeCloud (CodeCloud.me)
Codecademy (http://www.codecademy.com/#!/exe...)
Lynda (http://www.lynda.com/JavaScript-...)
Channel9 (http://channel9.msdn.com/Series/...)
TheCodePlayer (Learn HTML5, CSS3, Javascript)
Eloquent Javascript Book (http://eloquentjavascript.net/co...)0
Javascript by Douglas Crockford (Douglas Crockford's Javascript)
CodinGame (http://www.codingame)
Mozilla (https://developer.mozilla.org/en...)
Udacity (JavaScript Basics for Beginners Course)
Egg Head (egghead.io - Learn professional JavaScript tools with Tutorial Videos & Training)
CodeSchool: Start with Free Courses at CodeSchool
Pluralsight: (JavaScript)

Tuesday, January 22, 2019

Closures?

Closures in JavaScript?

I have been looking and playing with web components. I found it a bit too easy to install and use web components in a web page. So I decided to have a good look in how things worked. Geez, I came across a lot of things that I wasnt familiar with. I thought I was a competent Javascript coder. No!

What really puzzled me was  these anonymous functions and these weird self contained function calls of this following format

(function () {
 var Avariable = 'Weird self contained function call';
 alert(Avariable);
}) ();

console.log(Avariable);


This pattern is a closure. A closure is a combination of  function and the set of available variables in which the closure was defined.

Kyle Simpson's Scope and Closures book ("You don't know JavaScript" book series) said this succinctly; Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.

Still it is not that clear to me. I dug up my old Sitepoint book "The art and science of JavaScript", and I learnt that a closure is created when a function is defined within another function. If the inner function is accessed from outside of its containing function, it still has access to the scope in which it was originally defined even though the variables in that scope are not accessible to any other functions or variables.

A bit better... As I am a visual learner, I created a simple function with an inner function and used the Console which is a part of Chrome browser to see how it works.

Example

// an outer function createfunction() and an inner function returnAValue that still has access to
// the aValue even when createfunction() goes out of scope.
function createfunction(){
var aValue = 3;

returnAValue = function () {
return aValue;
}
}


createFunction();
console.log(aValue); // Undefined
console.log(returnAValue()); // Returns a value of 3.

















It makes sense now. Now onto partial function applications.

Partial Function application

Closures are useful for functions that prefill some of their own parameters.

Reference
http://www.webreference.com/programming/javascript/rg17/index.html

Self executing function pattern 

(immediate invoked function expression)

That was another pattern that got me stumped. I had to play around and now I find them very powerful and very clean. I see them all over the place in well written JavaScript code!