JavaScript 01b: Plain JavaScript

Plain Javascript

warning: these notes date from 2017

Getting Started: Crash Course

JavaScript - why

Because if you want to do any nice client side (in the user's browser) scripting, that's the your best option (at the time of writing, in 2014). http://en.wikipedia.org/wiki/Client-side_scripting

JavaScript - where

You can put the javascript code wherever you want in the page.

• However, browsers load the content of a page from top to bottom, including the javascript. Some browsers do postpone the loading of javascript until all the HTML is loaded.

• So to avoid any browser to be slowed down when loading your page, you might want to add your javascript at the end of your page, ie. before the closing </body> tag.

• stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file

JavaScript - how

Write javascript directly in your html page

<script type="text/javascript">
   ...some code here...
</script>

Write javascript in another file & reference this file in you html

<script src="/path/to/your/javascriptfile.js"></script>

stackoverflow.com/questions/13829667/how-to-add-javascript-to-html-page

JavaScript - when : execute code when HTML is loaded/ready

The DOM can only be manipulated once the document (HTML) has finished to be loaded. JavaScript uses the window.onload function to check this

<script type="text/javascript">
   window.onload = function(){
   ...some javascript code...
   };
</script>

jQuery has its equivalent (but better)

<script type="text/javascript">
  jQuery(function(){
    ...some javascript or/and jQuery...
  });
  // equivalent to calling: $(document).ready(function(){ ..some js or/and jQuery.. });
</script>

More about this on http://api.jquery.com/ready/

• The CSS sheets are loaded before the javascript only if they are declared before the javascript (above).

• Almost all the javascript code you write must be surrounded by this "document ready" feature.

• Except for the functions triggered by buttons for instance.

JavaScript - where, how & when: my 2 cents http://stackoverflow.com/a/26115974/759452

JavaScript - IE bugs: the console object

console.log() breaks in IE8 unless IE's Dev Tool is open.

• A nice fix for any browser not supporting "console" object is to use a polyfill to fake it, see github.com/paulmillr/consolepolyfill

• See stackoverflow.com/questions/7742781/why-javascript-only-works-after-opening-developer-tools-in-ie-once

JavaScript - Comments

Javascript has block comments & also line comments

<script type="text/javascript">
   /* ...some comments...
     ...some more commments...
   */
   // ...line ending comments...
   // ... more commments
</script>

It is advised to use line ending comments only because string literals can contain the string */

JavaScript - Comment a function:

<script type="text/javascript">
/**
  * Title of function/method
  * images to fit into a certain area.
  *
  * @param {Number} stepRangeInit initial value used for stepRange
  * @param {function} onSuccessCallBackFunc function to be called on success
  * @return {Object} { calculatedWidth, calculatedHeigth }
  *
  * [1] initialize stepRange
  * [1.a] stepRange multiplied by 3, see issue 8824
  *
  * [2] Convert String to number, see http://stackoverflow.com/q/1133770
  */
var myCoolFunction = function(stepRangeInit, onSuccessCallBackFunc){
  var stepRange = stepRangeInit || 0; /* [1] */
  stepRange = stepRange * 3; /* [1.a] */
  
  /* more code ... */
  
  var number = + valueAsString; /* [2] */
  /* more code ... */
}
</script>

Javascript - "use strict"; statement

• Supported by IE10+ caniuse.com/#feat=use-strict

• Browsers that don't support this statement, simply ignore it.

• "places a program, or a function, in a 'strict' operating context. This strict context prevents certain actions from being taken and throws more exceptions."

• It basically tries to help you write better javascript.

• stackoverflow.com/q/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it

• ejohn.org/blog/ecmascript-5-strict-mode-json-and-more

Getting Started: Essentials

The standard that defines Javascript (aka JScript) is the 3rd edition or The ECMAScript Programming Language ECMAScript 5.1 is the latest edition (at the time of writing) of the standard upon which JavaScript is based, was approved in 2011. https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla

Javascript Good practices:

• Use unobstrusive javascript

  • Separation of concerns: no javascript directly in the HTML, but rather in a separate JS file

    • keeping javascript inside HTML files results in unnecessary duplication & much harder refactoring

    • see stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms

• Do not put "just everything in one js file"

  • modularize your code

  • use a build process that concatenates & compresses your JS files if necessary

• Write code that is easy to read (self-explanatory) : avoid fancy stuff

• Add comments if you can't avoid complex code

  • format comments cleanly

• Define variables

  • Do not use global variables, but rather encapsulate (info hiding):

    • use 1 global object & use it as a namespace, ie. window.myApp

    • use IIFE

    • Always use 'var x =' when defining anything: whether its a number, string, function or object, & even when in the global scope. This makes the code much simpler/clearer.

  • Do not use "new" when creating variables, but rather {}, or [], or "'', and so on

  • Use this construction to initialize objects (leverage falsy values):

    • var myVar = myVar || {};

  • Define function expressions - not function statements

    • again use: var myCoolFunc = function(){ /* some code... */ };

• Comparison

  • Use type-safe comparison, that is: === and !==

  • User ternary operations

• Code conventions & format should be consistent

• Interactions with the UI

  • Keep all your styles in the CSS stylesheets

    • except special cases: ie. sliding animation

    • add/remove CSS classes to change an element's style

• Building a module or a library

  • use IIFE & the module pattern

  • check all good practices are used

  • if any 3rd party library dependency, try to code keeping in mind it should easily be removed

  • keep the "how to choose a library" criterias in mind

  • TBC: The javascript file structure "could" mirror server-side views - really? why? files are cached anyway!

Javascript - differences with java

• javascript functions/methods can't be overriden

• javascript functions/methods can't be overloaded

• javascript do not have block scope

• javascript only has function scope & global scope (window scope in a browser environment)

• javascript has global variables

• javascript has truthy & falsy values (some kind of default boolean variables interpretations)

• javascript cannot explicitly cast - javascript does type coercion (some kind of implicit casting - more on this below)

• javascript features are NOT supported by all browsers - one must investigate to find work arounds or graceful degradations

JavaScript - Variable Names

A name is a made of a letter optionally followed by one or more letters, digits or underbars. List of javascript reserved words

Javascript - Variable declaration: See previous point "Javascript - Good practices" section for a summary on "variable declarations". Both below syntaxes are valid - each as pros & cons - see dropshado.ws/post/17210606192/varry-var-var

var firstName = 'James',
    lastName = 'McBerry',
    age = 32;

var firstName = 'James';
var lastName = 'McBerry';
var age = 32;

Javascript - Variable Scopes:

• javascript does not have block scope

• javascript only has function scope & global scope (window scope in a browser environment)

• Inner functions have access to parameters & variables of the functions they are defined within (except for this & arguments) - from "javascript the good parts"

What does "var" do?

• If you're in a function then "var" will create a local variable

• If there is "no var", then the javascript engine looks up the scope chain until it finds the variable definition or hits the global scope (at which point it will create it)

• http://stackoverflow.com/questions/1470488/what-is-the-function-of-the-var-keyword-in-ecmascript-262-3rdedition-javascript

• http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript

• http://stackoverflow.com/questions/4363113/jquery-scope-inside-document-ready

• http://stackoverflow.com/questions/11152977/global-javascript-variable-inside-document-ready

• http://stackoverflow.com/questions/11819425/jquery-document-ready-and-function-scope

Javascript - Defining a global app object:

var myApp = {}; // when outside of any function, it is then a global variable
// myApp is then available from any JSP or Tag, as long as it is loaded BEFORE

$(function(){
  var myApp = {}; // This is INCORRECT, myApp will be in the scope of the function
});

$(function(){
  myApp = {}; // Correct, myApp will be in the scope of window.myApp
});

$(function(){
  window.myApp = {}; // Correct & explicit, myApp will be in the scope of window.myApp
});

Javascript - iterating through an object:

var myObj = {a: 1, b: 2}
for(var currKey in myObj){
  console.log('I am the key of the object', currKey, 'I am the value of the object', myObj[currKey])
}

Javascript - object good practices:

Use square brackets: allows using variables as keys (whether numbers or names)

Check if key exist in the object: keyName in objName will return true or false Remove key:value pair: delete objName.keyName

Javascript - IIFE:

my 2 cents: http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-filesin-anonymous-functions-li/26738969#26738969 IIFE stands for Immediately Invoked Function Expression. This technic is also called "Self Invoke

(function(){
  // all your code here...
  bar = "bar !"; // "var" omitted: bar is in the global scope (window scope)
  var foo = "foo !"; // "var" present: foo is in the current function's scope
})();
console.log('bar is: ' + bar); // bar is reachable here
console.log('foo is: ' + foo); // foo is unreachable here (it's undefined)

• The first opening bracket and its relevant closing bracket are used so that we can make a function expression even though the code starts with the word "function" which is the syntax to say we are declaring a function statement. see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Examples_2

• Note that this function does not have a name, it is then an anonymous function.

• We want a function expression because we want to be able to invoke the anonymous function, and an anonymous function statement cannot be invoked. Without it an error is thrown.

• Then the second pair of bracket to immediately calls (invokes) this anonymous function: that is as soon as the Javascript interpreter reads it.

• http://jsbin.com/vinokafiyore/1/edit?js,console - IIFE: 1st basic example

• http://jsbin.com/vinokafiyore/3/edit?js,console - IIFE: 2nd basic example

• http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-inanonymous-functions-li

Javascript - statement vs expression

• toread : http://www.2ality.com/2012/09/expressions-vs-statements.html

• toread: http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vsdeclaration-in-javascrip

• toread: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname

• Expression: Something which evaluates to a value. Example: 1+2/x

• Statement: Line(s) of code which does something. Does not evaluate to a value. Example: if(){}

• "An expression is any valid unit of code that resolves to a value."

• "Conceptually, there are two types of expressions: those that assign a value to a variable and those that simply have a value."

• "Wherever JavaScript expects a statement, you can also write an expression. Such a statement is called an expression statement. The reverse does not hold: you cannot write a statement where JavaScript expects an expression. For example, an if statement cannot become the argument of a function."

• "Any expression that evaluates to a value can be included in a boolean operation", because every expression evaluates to a boolean value using truthy & falsy values.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements

• http://stackoverflow.com/questions/12664230/is-boolean-expression-statement-the-same-as-ifboolean-expressionstat/

• http://stackoverflow.com/questions/12703214/in-javascript-what-is-the-difference-between-a-statement-and-anexpression

• http://stackoverflow.com/questions/19132/expression-versus-statement

JavaScript - Truthy and Falsy variables

Falsy values

false      // obviously
0          // The only falsy number
""         // the empty string
null
undefined
NaN

• All the rest is truthy.

• http://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values

• http://james.padolsey.com/javascript/truthy-falsey/

• Javascript - Variable declaration tips:

• Check if the variable is already defined using javascript falsy values.

• If the var is falsy, then initialize it.

var myString = undefined || "" || "hello";
var myNumber = undefined || 0 || 125;
var myArray = undefined || ['first','second','third'];
var myObject = undefined || {'propOne':'this is cool'};
var anotherString = anotherString || "hi there";
var anotherNumber = anotherNumber || 9565;
var anotherArray = anotherArray || ['1st','2nd','3rd'];
var anotherObject = anotherObject || {'prop1':'this is badass'};

http://jsbin.com/jutaxehuciza/1/edit?js,console

JavaScript - Variable Types

Use typeof to find out about the type of the variable.

• typeof returns 'number', 'string', 'boolean', 'undefined', 'function', or 'object'.

• Results returned by those variables when we output their type:

var firstVar = {};            // is an object
var secondVar = [];           // Exception: is an object
var thirdVar = 0;             // is a number
var fourthVar = "";           // is a string
var fifthVar = function(){};  // is a function
var sixthVar = true;          // is a boolean
var seventhVar = null;        // Exception: is an object !
var eigthVar = undefined;     // is undefined

jsbin.com/jomasoyicalu/2/edit?js,console

Javascript allows to change the variable type on-the-fly

var firstVar = {};            // firstVar is now an object
firstVar = "";                // firstVar is now an string
firstVar = 0;                 // firstVar is now an number
firstVar = function(){};      // firstVar is now an function
firstVar = true;              // firstVar is now an boolean
firstVar = undefined;         // firstVar is now an undefined

• http://jsbin.com/jomasoyicalu/4/edit?js,console

• developer.mozilla.org/en/docs/Web/JavaScript/Guide/Values,_variables,_and_literals d- eveloper.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

JavaScript - Type Coercion

Type coercion in short means implicit type conversion.

Type casting in short means explicit type conversion.

Coercion happens when 2 variables which are not of the same type are compared using "==" or "!=".

"==" and "!=" operators will compare for (in)equality after doing any necessary type conversions.

Javascript type conversions ~ Java type casting

Performances: === is not quicker if the types are the same. If types are not the same, === will be quicker because it won't try to do the conversion.

• http://stackoverflow.com/questions/8857763/what-is-the-difference-between-casting-and-coercing

• http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

JavaScript - Numbers

All numbers are represented as 64-bit floating point (same as Java's double).

There is no separate integer type, so 2 is equal 2.0

The value NaN is the result of an operation that cannot produce a normal result. NaN is not equal to any value, including itself. Use isNaN( myVar) to find out if myVar is NaN.

JavaScript - Operators

+ adds or concatenates (make sure operands are numbers)

• subtracts only??

! logical not

/ divide. can produce a non integer result even if both operand are integers

• multiply

% remainder

&& logical AND with lazy evaluation

|| logical OR with lazy evaluation

|---|

+= adds or concatenates

-= subtraction only??

=== equal

!== not equal

= greater or equal

<= less or equal

greater

< less

Table of precedences

JavaScript - String

JavaScript does not have a character type. To represent a character, make a string with just one character in it.

JavaScript's Strings are immutable, once created it cannot be modified.

String has a length property

var myString = 'hello world';
alert('Variable myString is ' + myString.length + ' long.');

substring() method

var myFullString = 'hello world';
var mySubString = myString.substring(0,5);
alert('myFullString is ' + myFullString + '. And mySubString is ' + mySubString);

Here is an example where the last characters (starting from the 5th) of an element's ID are assigned to a variable.

var myFullString = $('#myElemId').id;
var mySubString = $('#myElemId').id.substring(5,($('#myElemId').id.length));
alert('myFullString is ' + myFullString + '. And mySubString is ' + mySubString);

String Contains

This is a work around since there is no such method in JavaScript

if ( myString.indexOf("stringToSearch") != -1){
   alert('"stringToSearch" is present');
}

String Replace

var mySentence = "dogs eat dogs";
alert( actionUrl.replace("dogs", "cats");

Javascript - check if String is empty or contains only spaces

function isEmpty(str) {
  return (!str || 0 === str.length);
}
function isBlank(str) {
  return (!str || !str.replace(/ /g,''));
}
if ( isEmpty(searchTerm) || isBlank(searchTerm) ){
  ... do something ...
}

• stackoverflow.com/questions/154059/how-do-you-check-for-an-empty-string-in-javascript

• stackoverflow.com/questions/6623231/remove-all-white-spaces-from-text

Javascript - String comparison

As a first step you might want to:

1. Make sure the type is correct

• Use a type-safe comparator: === or !==

• Use typeof

1. If ignoring case, use .toUpperCase() but not .toLowerCase()

• see msdn.microsoft.com/en-us/library/bb386042.aspx

1. If ignoring accents, use the "remove diacritics" solution

In short: use the browsers' built-in .localeCompare() method, such as:

return myFirstVar.localeCompare(mySecondVar);

Considering the current level of support provided by the javascript custom implementations I came across, we will probably never see anything getting any close to supporting all the characters & scripts (languages) supported by UTF8 nor by the browsers' native localeCompare() implementations. Hence I would rather use the browsers' native localeCompare() method. Yes, it does have the downside of beeing non-consistent across browsers but basic testing shows it covers a much wider range of characters, allowing solid & meaningful sort orders.

• only remaining question: what UTF8 characters are supported by browsers' localeCompare() implementations ??

• Full explanation stackoverflow.com/a/26295229/759452

• http://blog.codinghorror.com/sorting-for-humans-natural-sort-order/

String comparison UTF8 specification

• http://www.unicode.org/reports/tr10/ - "Unicode Collation Algorithm specification", "which details how to compare two Unicode strings while remaining conformant to the requirements of the Unicode Standard"

• http://www.unicode.org/charts/ - UTF8 encoding charts for each language

• my 2 cents : http://programmers.stackexchange.com/questions/257286/is-there-any-language-agnosticspecification-for-string-natural-sorting-order

Javascript - Custom String comparisons

• http://www.davekoelle.com/alphanum.html

• https://web.archive.org/web/20130929122019/http://my.opera.com/GreyWyvern/blog/show.dml/1671288

• Alphanum http://www.davekoelle.com/files/alphanum.js , Fails at sorting consistently, see http://jsbin.com/tuminoxifuyo/1/edit?js,console

• Natural Compare Lite https://github.com/litejs/natural-compare-lite : Fails at sorting consistently https://github.com/litejs/natural-compare-lite/issues/1 and http://jsbin.com/bevututodavi/1/edit?js,console , basic latin characters sorting http://jsbin.com/bevututodavi/5/edit?js,console

• Natural Sort https://github.com/javve/natural-sort : Fails at sorting consistently, see issue https://github.com/javve/natural-sort/issues/7 and see basic latin characters sorting http://jsbin.com/cipimosedoqe/3/edit?js,console

• Javascript Natural Sort https://github.com/overset/javascript-natural-sort : seems rather neglected since February 2012, Fails at sorting consistently, see issue https://github.com/overset/javascript-natural-sort/issues/16

Javascript - Browsers' native localeCompare() method

• In the oldest implementations where we do not use the locales and options arguments "the locale and sort order used are entirely implementation dependent".

• In other words, when using localeCompare such as stringOne.localeCompare(stringTwo): Firefox, Safari, Chrome & IE have a different sort order for Strings.

• http://jsbin.com/beboroyifomu/1/edit?js,console - basic latin characters comparison with localeCompare() - works pretty nicely compare to any custom-made comparator

• http://jsbin.com/viyucavudela/2/ - basic latin characters comparison with localeCompare() for testing on IE8

• http://jsbin.com/beboroyifomu/2/edit?js,console - basic latin characters in string comparison : consistency check in string vs when a character is alone

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare - IE11+ supports the new locales & options arguments

• https://code.google.com/p/v8/issues/detail?id=459 : highlight the sort order inconsistency across browser

• http://msdn.microsoft.com/en-us/library/ie/s4esdbwz(v=vs.94).aspx - scroll down to localeCompare() method - IE6+ supports localeCompare without the locales and options arguments

• http://stackoverflow.com/questions/51165/how-do-you-do-string-comparison-in-javascript

• http://stackoverflow.com/questions/2802341/natural-sort-of-text-and-numbers-javascript

• http://stackoverflow.com/questions/4373018/sort-array-of-numeric-alphabetical-elements-natural-sort/

• http://stackoverflow.com/questions/4340227/sort-mixed-alpha-numeric-array

• toread: http://sugarjs.com/arrays#sorting and also https://github.com/andrewplummer/Sugar

JavaScript - if ...else if... else

var myVar=10;
if(myVar>100){
   alert('myVar is greater than 100');
}
else if(myVar<=100 && myVar>20){
   alert('myVar is less than 100 but greater than 20');
}
else{
   alert('myVar is less than 20');
}

JavaScript - ternary operator

var myVar=5, output;
(myVar == 5) ? output="myVar equals 5" : output="myVar does not equal 5";

var myCoolVar = ($(.my-selector).hasClass("is-updated")) ? $(.my-selector).val() : 'no up-to-date value, sorry';

• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

• stackoverflow.com/questions/10323829/javascript-ternary-operator-example-with-functions

JavaScript - switch

The switch, while, for and do statements are allowed to have an optional label prefix that interacts with the break statement.

switch statement (simple)

switch (myVar){
   case '1': alert('1');
   break;
   
   case '2': alert('2');
   break;

   default: alert('more than 2');
   break;
}

switch statement (equivalent of an OR)

switch (myVar){
   case '1':
   case '2':
   case '3': alert ('1, 2 or 3');
   break;
   case '4':
   case '5':
   case '6': alert ('4, 5 or 6');
   break;
   default: alert('more than 6');
}

for, while, do...while, try...catch, throw, return, break

JavaScript - Arrays

Declare a new array and populate it

var myArray = ['Paulinha', 'Pep', 'Vitorio'];

Deprecated

var myArray = new Array('Paulinha', 'Pep', 'Michel');

Array manipulation

myArray.push('Jermane');   // Adds Jermane at the end of the array
myArray.unshift('Mel');    // Adds Mel at the beginning of the array
myArray.shift();           // removes the first element of the array
myArray.pop();             // removes the last element of the array

Split - Transform a string into an array according to a separator

var cousinsString = 'Pauline Guillaume Clarisse', cousinsArray ;
cousinsArray = cousinsString.split(' ');

join() - Creates a chain of characters from an array

var cousinsArray = ['Paulinha', 'Pep', 'Vitorio'], cousinsString ;
cousinsString = cousinsArray.join('-');

JavaScript - Functions

In Javascript, Function is a standard data type in JavaScript, an object indeed; you can pass them around and copy them.

alert();
prompt();
confirm();
parseInt();
parseFloat();
isNaN();

alert() is not a "real" function. It is a method of the window object. The window object is implicit.

window.alert('Hello world!');     //same as:     alert('Hello world!');

parseInt() can be useful when javascript concatenates variables instead of adding them

containerWidth = parseInt(containerWidth);
totalWidth = containerWidth+sideBannerWidth;

function syntax

function myFunction(myVar1,myVar2,...,myVarX){
  ..some code...
}

simple function example

function myWickedAlert(){
  alert("Welcome to Adrien's IT notes");
}
// later in the page
<input type="button" value="Click my Wicked Alert!" onclick="myWickedAlert()" />
// note: myWickedAlert() is a global call

simple function example (with return)

function myWickedText(){
  return "Welcome to Adrien's IT notes";
}
// later in the code
<input type="button" value="Click me!" onclick="alert(myWickedText())" />
// note: myWickedText() is a global call

more on www.w3schools.com/js/js_functions.asp

JavaScript function invocation rules:

1. In a function called directly without an explicit owner object, like myFunction(), causes the value of this to be the default object (window in the browser).

2. In a function called using the method invocation syntax, like obj.myFunction() or obj'myFunction', causes the value of this to be obj.

3. If we want to override the value of this without copying the function to another object, we can use myFunction.apply(obj) or myFunction.call(obj).

4. When used as a constructor, like new MyFunction(), the value of this will be a brand new object provided by the JavaScript runtime. If we don't explictly return anything from that function, this will be considered its return value. read more about these rules & on "correct" functions calls on devlicio.us - blogs - javascript 5 ways to call a function

Javascript - Execute Function at regular interval

var callFunctionWithInterval = function (numberOfRepetitions, intervalInMs){
  (function myLoop (loopCount) {          
    setTimeout(function () {   
      alert('display this text at interval'); /* your code here */
      if (--loopCount) myLoop(loopCount); /* decrement loopCount and call myLoop again if loopCount > 0 */
    }, intervalInMs)
  })(numberOfRepetitions);
}

This uses the setTimeout to delay the call of a function (setTimeout is non-blocking)

setTimeout(function () {   
  alert('display this text after 2000ms'); /* your code here */
}, 2000)

http://stackoverflow.com/questions/10312963/javascript-settimeout

Javascript - Loop through array with a "pause" in between each element

This is the original loop through array

var myArray_length = myArray.length
for (var index=0; index<myArray_length; ++index) {
  var currentElement = myArray[index];
  if (currentElement != "" ) {
    alert(currentElement);
  }
}

This is the loop through array with a 3000ms "pause" in between each element

var myArray_length = myArray.length
var index=0
var interval = setInterval(function() {
  var currentElement = myArray[index];
  if (currentElement != "" ) {
    alert(currentElement)
  }
  ++index;
  if(index >= myArray_length) clearInterval(interval);
}, 3000);

JavaScript - Objects

The simple types of JavaScript are numbers, strings, booleans, null, and undefined. All other values are objects.

JavaScript numbers, strings and booleans are object-like (they have methods) but they are immutable.

JavaScript objects are mutable keyed collections.

JavaScript arrays, functions, regular expressions and objects are objects.

JavaScript objects are containers of properties, each property has a name and a value.

Object Literals

It provides a very convenient way to create new object values.

var myEmptyObject = {};

var family = {
   self: 'Mr Me',
   sister: 'Auriane'
};

Objects can nest

var family = {
  members: 2,
  self: {
    fname: 'Adrien',
    dob: 2000,
    lname: 'Tyson'
  },
  sister: {
    fname: 'Jacky',
    dob: 1950,
    lname: 'Brown'
  }
};

Identifiers are properties, here is how to access them

family.sister;
family['sister'];

length is also a property, so you can do:

family.length;
family['length'];

Add a new element to object

family['uncle'] = 'james';

Browse through an object

for (var id in family) {
   alert(family[id]);
}

Example of litteral object usage:

function getCoords() {
   return { x: 12, y: 21 };
}
var coords = getCoords();
alert(coords.x); // 12
alert(coords.y); // 21

JavaScript - Access/Modify HTML Form's Action

var actionUrl = document.myFormName.action ;                    // gets the action of the form
document.myFormName.action = "yourDomain.com/page.jsp";         // assigns action to form submit

JavaScript - Do something on Form submit

<form name="myForm" action="./processForm.jsp" onsubmit="return validateForm();" method="post">
  ...some inputs and a submit button...
</form>

The form will call validateForm JavaScript function before to actually submit itself to the page in "action" attribute.

validateForm function can cancel the submission of the form by returning false

JavaScript - get IE version

// Returns the version of Internet Explorer or a -1 (indicating the use of another browser)
function getInternetExplorerVersion(){
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer'){
    var ua = navigator.userAgent;
    var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
    }
  return rv;
}

function displayAlert(){
  var msg = "You're not using Internet Explorer.";
  var ver = getInternetExplorerVersion();
  if ( ver > -1 ){
    if ( ver <= 8.0 ){
      msg = "You're using Internet Explorer 8 or below" ;
    }
    else if ( ver >= 9.0 && ver < 10.0 ){
      msg = "You're using IE 9 or above";
    }
    else{
      msg = "You're using IE 10";
    }
  }
  alert( msg );
}

see also http://stackoverflow.com/questions/18405051/javascript-checking-if-current-web-browser-is-internetexplorer-working-with-ie/18405095#18405095

DOM - HTML manipulation

JavaScript - get elements in the document

The famous getElementById()

getElementById()

getElementsByName() - returns an array containing each element

getElementsByTagName() - returns an array containing a family of elements

var allDivs = document.getElementsByTagName('div');
for (var i = 0, c = allDivs.length ; i < c ; i++) {
   alert('Element n° ' + (i + 1) + ' : ' + allDivs[i]);
}

JavaScript - Browsing through nodes (element objects)

parentNode - Property to access an element's parent element

nodeName - Property containing the name of a node (in Upper case, use toLowerCase() to change case)

nodeType - Property containing the node type (a number)

firstChild and lastChild - Properties to access the first and last child of an element

childNodes - Properties returning all the children elements of a node

nextSibling and previousSibling - Properties to access next or previous node

nodeValue and data - Properties to access the text contained in an element. Applicable only on text elements

hasChildNodes() - Method returning true if the element has at least one child

insertBefore(insertedElement,beforeThatElement) - Method to insert element before another (must be applied on the parent element).

2 parameters: the 1st is the element to insert, the 2nd is the element before which the element will be inserted

JavaScript - createElement()

Create an element <a>

var myLink = document.createElement('a');
myLink.id    = 'adrienItNotesLink';                                          // define attributes (id, href, title)
myLink.href  = 'https://sites.google.com/site/adrienitnotes/javascript';
myLink.title = 'Adrien\'s IT notes';
document.getElementById('myBigDiv').appendChild(newLink);

JavaScript - appendChild() - Add HTML Elements

appendChild() returns a reference pointing to the inserted object

document.getElementById('myDiv').appendChild(elementToAdd);

JavaScript - removeChild() - Remove an element

This methods takes the element to be removed as a parameter

var link = document.getElementsByTagName('a')[0];
link.parentNode.removeChild(link);

JavaScript - The Element object attributes: getAttribute() and setAttribute()

Example

var link = document.getElementById('myLink');
var href = link.getAttribute('href');                          // We get the href attribute
link.setAttribute('href', 'http://www.siteduzero.com');        // Editing the href attribute

For most of elements such as <a>, we can access an attribute via a property

var link = document.getElementById('myWickedLink');
var href = link.href;
link.href = 'http://www.deviantart.com';

Building a link

newLink.id    = 'deviantArtLink';
newLink.href  = 'http://www.deviantart.com';
newLink.title = 'DeviantArt is an art community';
newLink.setAttribute('tabindex', '10');

Exceptions when modifying attributes:

• class, you must use the attribute className

• for, you must use the attribute htmlFor

JavaScript - createTextNode() - Add text nodes

var someText = document.createTextNode("Le Site du Zéro");
element.appendChild(someText);

JavaScript - innerHTML

Since HTML5, innerHTML is acknoledge by the W3C and can be used

1. Get an element's HTML code with innerHTML

[...]
<div id="myCoolDiv">
  <p>Some text and <a>a link</a></p>
</div>
[...]
<script type="text/javascript">
  var div = document.getElementById('myCoolDiv');
  alert(div.innerHTML);
</script>

This returns "<p>Some text and <a>a link</a></p>" in the alert box

If tags are present, innerHTML returns them as plain text.

1. Add/Edit HTML content

document.getElementById('myDiv').innerHTML = '<blockquote>Replace paragraph by quotation</blockquote>';

This replaces the paragraph present in the div.

1. Only add HTML content

document.getElementById('myDiv').innerHTML += ' and <strong>a highlighted section</strong>.';

1. Do NOT use += in a loop !

innerHTML slows down code execution.

A better option is to concatenate the text in a variable and append it after the loop.

var text = '';
while( /* condition */ ) {
  text += 'your text here. ';
}
element.innerHTML = text;

JavaScript - Clone nodes

Syntax

elementObject.cloneNode(boolean);

if boolean is "false" it doesn't include the child nodes and if its "true" then it will include the child nodes

Example

function functionClone(){
  var clonenode = button.cloneNode(true);
  alert("created clone node"+clonenode);
  document.getElementById("button").disabled=true;
}

JavaScript - Replace a node: replaceChild()

Syntax

replaceChild(newElement,elementToReplace)

JavaScript - Events

Node types table:

1 - Element node 2 - Attribute node 3 - Text node 4 - CDATA passage node

Events table:

Event Name	Action to trigger it
click	Click on the element
dblclick	Double click on the element
mouseover	Put the cursor above the element
mouseout	Remove the cursor from above the element
mousedown	Hold down the left button of the mouse on the element
mouseup	Release the left button of the mouse on the element
mousemove	Move the cursor on the element
keydown	Hold down a keyboard's key on the element
keyup	Release a keyboard's key on the element
keypress	Hit a keyboard's key on the element
focus	"Target" the element
blur	"Untarget" the element
change	Change an element's value. Specific to forms (input, checkbox, ...)
select	Select a textfield's content (input, textarea, ...)

JavaScript - Events specific to the <form> tag:

Event Name	Action to trigger it
submit	Send the form
reset	Reinitialize the form

JavaScript - this

Property pointing to the object currently used.

If you call this property when an event is triggered, the pointed object will be the element which triggered the event.

JavaScript - Block the default action of some events

"return false;" blocks the default action of the event that triggered it

Example

<a href="www.deviantart.com" onclick="alert('You clicked'); return false;">Click me!</a>

This will stop the click event from redirecting you to another page

You can use this technic to create link just to attribute them onclick event instead of redirecting the user to a new page.

<a href="#" onclick="alert('You clicked'); return false;">Click me!</a>

Deprecated

<a href="javascript: alert('Vous avez cliqué !');">Cliquez-moi !</a>

JavaScript - Redirect or link

see http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript

Javascript open link in new tab

var win = window.open(hrefLink, '_blank');
win.focus()

DOM-2 according to web standards

JavaScript - addEventListener()

Three parameters:

Event name (without letters "on").

The function to execute

A boolean : use the capture phase (true) or bubbling phase (false).

Example

<span id="clickme">Cliquez-moi !</span>
<script type="text/javascript">
  var el = document.getElementById('clickme');
  el.addEventListener('click', function() { alert("Vous m'avez cliqué !"); }, false);
</script>

Capture and Bubbling

<div id="capt1">
  <span id="capt2">Click me for the capture phase.</span>
</div>

capture

• The div's event triggers first and then the span's event will trigger.

bubbling

• The span's event triggers first and then the div's event will trigger.

IE<9 as well as event without DOM or with DOM-0 handle ONLY the bubbling phase.

This is why we usually put the addEventListener's last parameter to false

Read more on www.w3.org - event flow

JavaScript - removeEventListener()

Any event removal with DOM-2 is done using the same parameters as the one used during its creation.

However, it does not work with anonymous functions.

All DOM-2 events created with an anonymous function cannot be removed.

Example

el.removeEventListener('click', myFunction, false);

JavaScript - addEventListener() & removeEventListener(): for version IE<9

attachEvent() & detachEvent() - same as other standards methods except that the third parameter does not exist and the event must be prefixed by "on"

Example

el.attachEvent('onclick', function() {   // Create the event
  alert('Tadaaaam !');
});
el.detachEvent('onclick', function() {   // Remove the event passing the same params
  alert('Tadaaaam !');
});

Add a click event to an element - Cross Browser version

function addEvent(el, event, func) {
  if(el.addEventListener) {              // if el has method addEventListener()
    el.addEventListener(event, func, false);
  }
  else {                                 // if el does not have method addEventListener()
    el.attachEvent('on'+event, func);
  }
}

addEvent(element, 'click', function() {
  ...your code...
});

JavaScript - The Event object

https://developer.mozilla.org/fr/DOM/event

Access to events

events can be accessed only when a function is executed by an event Internet Explorer (versions < 9) - Event only accessible using window.event No need to use an argument in the function executed by the event

Internet browser compatibility code:

e = e || window.event;

Add an event to an element

DOM-0

el.onclick = function(e) {           // e is a reference to the Event object
  alert(e.type)                      // Displays the event type (click, mouseover, ...)
};

DOM-2

el.addEventListener('click', function(e) {   // e is a reference to the Event object
  alert(e.type)                              // displays the event type (click, mouseover, ...)
}, false);

event.target & event.srcElement

event.target: to get a reference to the element for which the event has been triggered (like the "this" for events without the DOM or with DOM-1)

event.srcElement: IE<9 only, does the same as event.target but for IE<9

Example

[...]
<span id="clickme">Click me!</span>
[...]
<script type="text/javascript">
  function addEvent(el, event, func) { // reuse our function for DOM-2 events
    if (el.addEventListener) {
      el.addEventListener(event, func, false);
    } else {
      el.attachEvent('on'+event, func);
    }
  }
  var clickme = document.getElementById('clickme');
  addEvent(clickme, 'click', function(e) {
    var target = e.srcElement || e.target;
    target.innerHTML = 'You clicked!';
  });
</script>

Some events applied to a parent element can propagate them-selves to children elements. This is the case for mouseover, mouseout and mousemove.

target always returns the element that triggered the event (which can be a child).

event.currentTarget

Returns the origin element of the event, not its children (in contrast with event.target)

Does not work on IE<9

event.clientX & event.clientY - cursor position

Cursor position according to the top left corner of the web page OR the screen itself

Since the cursor position changes at each move of the mouse, the most relevant event in most of cases is mousemove

[...]
<div id="position"></div>
[...]
<script type="text/javascript">
  var pos = document.getElementById('position');
    document.addEventListener('mousemove', function(e) {
    pos.innerHTML = 'Pos X: ' + e.clientX + 'px<br/>Pos Y: ' + e.clientY + 'px';
  }, false);
</script>

event.relatedTarget - only use with mouseover and mouseout events

With mouseout event, relatedTarget provides the element object on which the cursor just came

With mouseover event, relatedTarget provides the element object the cursor just left

IE<9 : use fromElement and toElement

event.keyup, event.keydown & event.keypress

These events trigger when a key is pressed or released

event.keyup and event.keydown

have the attributs "keyCode" and "which"

CANNOT detect multiple keys pressed

"which" is NOT supported by IE<9

event.keypress

Has the attribut "which" only

which is NOT supported by IE<9 - "keyCode" must be used instead

JavaScript - Manipulate the CSS

JavaScript - Modify the style

Inline style (properties of the style attribute) have the priority on any property coming from a style sheet.

Using the style attribute is the simplest and the most popular technic to modify the CSS of an HTML element.

el.style.width = '150px';

In Javascript, hyphens characters are forbidden in properties names

el.style.background-color = 'blue';     // does not work
el.style.backgroundColor = 'blue';      // this is the convention

JavaScript - Access CSS values of an element

el.style only returns the CSS values of the CSS properties applied via the "style" attribute

getComputedStyle() gets the real CSS values of an element

<style type="text/css">
  #text { color: red; }
</style>
<span id="text"></span>
<script type="text/javascript">
  var text = document.getElementById('text'),
  color = getComputedStyle(text, null).color;
  alert(color);
</script>

use currentStyle() for IE<9 to get the "real" CSS values of an element

<style type="text/css">
  #text { color: red; }
</style>
<span id="text"></span>
<script type="text/javascript">
  var text = document.getElementById('text'),
  color = text.currentStyle.color;
  alert(color);
</script>

All the values obtained using getComputedStyle() or currentStyle are read-only.

Attributes of type "offset" table:

Attribute	Contains
offsetWidth	Total width (width + padding + border) of the element
offsetHeight	Total height (height + padding + border) of the element
offsetLeft	Position according to the left side of its parent element (useful if element is in absolute position)
offsetTop	Position according to the top side of its parent element (useful if element is in absolute position)
offsetParent	Contains the element object parent according to which is positioned the current element (useful if element is in absolute or relative position)

JavaScript - Authentication and Cookies

• w3schools.com - js cookies

• thinkvitamin.com - how to create totally secure cookies

• pajhome.org.uk - protecting passwords

• repoze-who-jscrypto - JavaScript Authentication Library