Category: JavaScript

ES6: the basics

let declarations

Allow you to define a variable that only exist inside a block delineated by { and }

Example:

var a = 0;
{
  let a = 1;
  console.log(a); // prints 1
}
console.log(a); // prints 0

let declarations are not initialized until they are used, that is why it is a good idea to put them at the top of the block, to avoid weird behavior. If you are not ready to attach a value, you can just say: let a;

const declarations

By using const, once the assignment has been made, it can’t be undone.

Example:

{
    const a = 7;
    console.log(a);   // 7
    a = 5;              // TypeError!
}

If you assign Objects or Arrays to constants, you can still modify the values, you just can’t modify the assignment type:

{
    const a = [1,2,3];
    a.push(4);
    console.log(a);       // [1,2,3,4]
    a = 42;                 // TypeError!
}

Ionic: the basics

$ ionic serve // Internal server to run and test your pages

$ ionic build ios

$ ionic emulate ios // with the other command above, emulates running the page in the iphone

To use it along with your Adobe Phonegap build account (so you don’t have to build locally)

  1. Follow the instructions here to setup your phonegap acct
  2. $phonegap create [your app dir] [your app name]
  3. $cd [your app dir]
  4. copy the www files from your ionic app into the www of this phonegap dir (follow the instructions on their website to build a starter project)
  5. $phonegap remote build ios

Update: looks like things have gotten easier, and you don’t have to jump back and forth between phonegap and ionic projects, all you have to do is:

1) create an app at https://apps.ionic.io/

2) in your command line:

$ ionic start myApp io

$ cd myApp

$ionic login

$ionic upload

Setting up sass

$ ionic setup sass

if you run into an error message, you may have to reinstall the following packages (in that order):

$ sudo npm install node-sass@1.0.3

$ sudo npm install gulp-sass

JavaScript: code organization template

If not working with a framework, try the following:

$(function() {
  function MyFunction() {
  }

  MyFunction.prototype = {
    myMethod: function() {
    }
  };

  var myInstance = new MyFunction();
});

If you are looking for something simpler, kind of a one quick page deal:


var GLOBAL_NAMESPACE_HERE = (function () {
    var _private_obj_name_here = {
        // settings and defaults here
        key_here: value_here
    };

    /********************************************************************
     * Initialization:
     * Starts the listeners and get things rolling
    */
    _private_obj_name_here.init = function () {
    };

    /********************************************************************
     * Getters, other stuff
    */
    _private_obj_name_here.getSomething = function () {
        return _private_obj_name_here.key_here;
    };

    /********************************************************************
     * Expose public methods (the ones that can be called from outside)
    */
    return {
        init : _private_obj_name_here.init,
        getSomething: _private_obj_name_here.getSomething
    };

}());

This is called the module pattern.

GLOBAL_NAMESPACE_HERE.init();

Javascript: automatic type convertion

if(something){

// Do this

}

Do this will happen, if “something” is equal to:

undefined

null

0 (as in the number)

“” (empty string)

NaN (not a number object)

Be careful! Any kind of object, or even the string “0” will evaluate to true!

The reason stuff like this works:

var myvar = me || you;

is because if “me” evaluates to true, that is what’s returned. Otherwise “you” will. That is assuming we don’t know if “me” or “you” are undefined at the moment.

 

javascript: when scope inside setTimeOut is giving you headaches

Sometimes you have to setTimeOut call a function, but you need to provide the current scope for the function to execute as well.

Say for example, you want to call this.myFunction()

with (this) { setTimeout( function() { myFunction() }, 1000 );}

Doing the with(this) allows you to pass “this” scope, so myFunction will get executed as this.myFunction()

There are a million things wrong with doing the above. First, myFunction will try to execute off the Global, also, with is heavy performance-wise. But it works. Use it sparingly.

Javascript basics: script tag

Attributes:

type: The language your script is in. Defaults to javascript since HTML5. In older browsers you were able to run alt languages, like VBScript in IE. In fact, it is supposed to actually point to the mime type of your script. The syntax is, for example: type=”text/javascript”

language: not used. Deprecated.

async: When set to true, makes the download of the script asynchronous, not holding the page hostage until it downloads. The default is false, so pages have to wait until this downloads before they go on. It is HTML5 supported. Moving scripts at the end of the page is a more compatible technique (with older browsers) to avoid scripts blocking page rendering, but don’t do it if you have document.write commands in your script. (async=”async”)

defer: waits until the DOM is ready before executing the script. It is HTML5 supported. It is overriden by async (defer=”defer”)

XHTML compatibility. If you use that as your doctype, you have to envelop your inline scripts in CDATA, to avoid special characters like & to cause problems:

<script type="text/javascript">
//<![CDATA[
  // Your javascript here
//]]>
</script>
Example of dynamically adding scripts to a document:
var script = document.createElement("script");
script.setAttribute("src", url);
document.head.appendChild(script);

Javascript patterns: namespacing your objects.

Avoid clustering the global scope.

Start with uppercase (recommended):

var MYAPP = MYAPP || {};

To be able to construct objects with several levels of deepness, use the following utility function:

var UTILITIES = UTILITIES || {};
UTILITIES.namespace = function (ns_string) {
var parts = ns_string.split(‘.’),
parent = MYAPP,
i;

// strip redundant leading global
if (parts[0] === “MYAPP”) {
parts = parts.slice(1);
}

for (i = 0; i < parts.length; i += 1) { // create a property if it doesn't exist if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; } parent = parent[parts[i]]; } return parent; };

Javascript and scrollbars

To detect if the scrollbar is all the way to the top:
var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if(scrollY == 0){ /* Scroll at top, do something here */ }

Infinite scroll implementation:
$(window).scroll(function(){
if(($(window).scrollTop() + 100) > ($(document).height() – $(window).height())){
/* You are 100px close to the bottom scroll, load more content or do something here */

Obviously, you will need Jquery. And the 100 magic number is the number of pixels you are away from the bottom of the screen.

You may also want to limit the checking for scrolls in your javascript for performance reasons, via setinterval, or settimeout. Otherwise you will be constantly hitting javascript as users scroll down. Details here:

https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html