Intall phantomjs in centos 7

introuduction :

phantomjs  look in https://github.com/ariya/phantomjs


code:


 yum install fontconfig freetype freetype-devel fontconfig-devel libstd
 mkdir -p /opt/phantomjs
 cd /opt/phantomjs/
 wget  https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 .
 tar -xjvf phantomjs-2.1.1-linux-x86_64.tar.bz2
 ln -s /opt/phantomjs/phantomjs-2.1.1-linux-x86_64/bin/phantomjs  /usr/bin/phantomjs
 phantomjs /opt/phantomjs/phantomjs-2.1.1-linux-x86_64/example/hello.js

reference 

https://www.bonusbits.com/wiki/HowTo:Install_PhantomJS_on_CentOS

Jquery Deffer method

Introduction Basic content

Ajax: Asynchronous Java script and XML
JSON: Using string representation for an object 
jqXHR object:  is jquery XML HTTP object which represent as $.ajax
JSONP: Give a strategy to access cross domain data
 
                    Subject of Deffer function
Goal: 
It will let programmer make a asyn-like calling mechanism
and often use in nested ajax calling to avoid to nested content.

Event trigger:
In the process, declare the deffer start .deffer().
Then, you should write deffer.resolve() mean it success, or deffer.reject() mean fail in handle process.
Finally, you return it by .promise();

Event Handle:
Client code can handle it by .then(callback1, [callback2]) method after it use the Event trigger method,


Ref:
ajax-deferreds tutorial
jquery deferred-object function
jquery-deferred-object chinese

JAVA script template Using Handlebars.js

1. What is Handlebars.js ?
It is using javascript to process the MVC pattern in view process.

You can Learn start from getting-started-with-handlebars-js
Official site api from Official sites
code From git

Javascript loop

JavaScript supports different kinds of loops:

• for - loops through a block of code a number of times
• for/in - loops through the properties of an object

the for/in used in self defined property;

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Javascript function

1. What is it? 

It has Function Expression

//anonymous function expression

var a = function() {

    return 3;

}

a();

 

//self invoking function expression

(function sayHello() {

    alert("hello!");

})();

 

and  Function Declaration

function bar() {

    return 3;

}

 

 

2.  JavaScript Closures

 JavaScript variables can belong to the local or global scope.Private variables can be made possible with closures.

// Inner class
 function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}




REF
 W3C 
IF HEMINGWAY WROTE JAVASCrIPT

Jquery can't change image refresh in Firefox and IE

1. Problem:
 Some times we try dynamic to change a picture in html,
and we assume this image is same,
in firefox and IE, this doesn't work,
and we happen is in captcha image.


2. Solution
This is because the firefox and ie seem the picture name is same, so they didn't send the request.  solution is add a random number in the request.
// HTML
<a href="" id="captcha_img_link"  title="Change img">chane</a>
<img id="captcha_img" align="middle" src="jcaptcha.jpg"  />


// Javascript
$(function (){
    // change image
    $('#captcha_img_link').click(function () {
        // Avoid the cache using appach random
        $("#captcha_img").attr('src',"./jcaptcha.jpg?random=" + Math.floor((Math.random()*20)+1));               
        return false;
    });
});




Reference:
How to force a web browser NOT to cache images

Javascript detect browser type

1. Problem:

Sometimes there are different present in the different browser, especially in IE and firefox-like. In this we should get the browser type and do the different method

2. Solution

/* To get the browser type */
function detectIsIEBrowser(){
    var isIE = false;
    var val = navigator.userAgent.toLowerCase();
   
    if(val.indexOf("msie") > -1) {
        isIE = true;
    }
    return isIE;
   
}




Reference
Basic
Advance_PPK

Javascript search string

1. Problem:
   There are kind of search string function in javascript. At first
   we can attract by  search() method, but when we use it to search dot "."  
   information such as judge the upload file is ".jpeg" suffix,  it will return 0.


2. Why:
   Because argument of search()  is regular expression, I avoid it and use
   indexOf() method replace it. And it will work correct


3. Example:
strA = "myPic.jpeg"
strA.search(".");
result: 0
strA.indexOf(".");
result: 5



Reference:
Like problem
string method

Get DIV Height

1 Problem:
   Sometimes you should make the layout in html using the css,
   and first should get the height from two div,
   the often use js code offsetHeight property,
   but it can't the real the height??


2. Reason:
    Because the offsetHeight didn't contain the margin height
     [offsetHeight property useage]

  Returns the height of the visible area for an object, in pixels. The value   contains the height with the padding, scrollBar, and the border, but does not include the margin.

3. solution:
    add the maring, but you should reference how to get margin top value

/* Get the div offsetHeight value*/

function getDivHeight(divIdName) {
    var div = document.getElementById(divIdName);
    var divHeight = 0;
   
    if (div){
        divHeight =  div.offsetHeight;
    }
     
    return divHeight;
}

/* I didn't know now to get the css top margin */
function getMainTopMarginHeight() {
    return 70;  /* Fix the content values*/
}

var mainBlockHeightTopMargin =  getDivHeight("main") +  getMainTopMarginHeight();

Reference

OffsetHeight API

Multiple method on onload

1. Problem:
we can do something in window.load position such as arrange the layout,
but there are only one method in this window.onload function.


2. Solution
we can store the previous onload method,
and build a new anomyous function which put the old_onload_method,
adding the new load_method.

var oldOnload = window.onload || function () {};
window.onload = function ()
{
    oldOnload();
    // Do Something...
}

Reference:
http://www.jaceju.net/blog/archives/160/

rhino for print and readln function

1. what is rhino ??

Rhino is a javascript interpreter which use java language to develop.
In rhino you can import java package and call java package.

2. rhino shell

you can enter js, and type help() to view the function.

3. rhino print

can use print("expression") function;

4. rhino input

var readln = (typeof readline === 'function') ? (readline) : (function() {
     importPackage(java.io);
     importPackage(java.lang);
     var stdin = new BufferedReader(new InputStreamReader(System['in']));

     return function() {
         return String(stdin.readLine());  // Read line, 
     };                                    // force to JavaScript String
 }());

Reference:

 input

 output

validate From

There we introduce an article which use javascript to check the form field,
it use the tradition methods to get form field elements, and introduce some register event content.

you can see:
http://www.webcredible.co.uk/user-friendly-resources/dom-scripting/validate-forms-javascript.shtml

Javascript interpter in rhino

There are  a javascript interpter on local machine.
It is the rhino, it is written by java, and you can download it, then

type
[]java -jar js.jar JSFileName

will show the result,

js.sh
{code}
#!/bin/bash
RLWRAP='rlwrap -C js';
exec $RLWRAP java -jar ~/IBMS/Program/java/lib/js.jar "$@";

{code}


Rhino Download:
https://developer.mozilla.org/en-US/docs/Rhino/Download_Rhino?redirectlocale=en-US&redirectslug=RhinoDownload


rlwrap download: http://utopia.knoware.nl/~hlub/uck/rlwrap/

reference:
http://workingrhino.blogspot.tw/2007/10/getting-started.html