Tara Andrei » JavaScript

Iframe preloader animation

andreiT — Wed, 07 Mar 2012 21:29:55 +0000

I love working with iframe content loading… noo no way, I actually hate it, but there are situations when loading the content inside the iframe is the only viable technical solution. I am sure you have use it before and maybe you have asked yourself how to add something like a loding animation while the frame is loading. I will provide a example but today I am fling lazy so I will use jQuery, the code should be something like:

 
var ContentLoader = function() {
	function load(url, onContentLoaded) {
 
		$($('#content')).append('');
		$('iframe#myBelovedIframe').attr('src', url);
 
		// On iframe content load
		$('iframe#myBelovedIframe').load(function() {
			onContentLoaded(this);
		});
 
	}
 
};
 
c = new ContentLoader();
c.load("http://andreitara.com", function() {
	$('#content').removeClass('loading');
	// TODO Add any code that has to be executed after the frame is loaded
});

This is how the script should look like, and the HTML could be something like:

 
....

...

of course you will need also some CSS for the loading animation like:

 
.loading{
 background-image:url('loading.gif');
}

Your parents should be so proud of you, you first iframe with loading animation , now you can celebrate.

Working with models data.store and list in Sencha

andreiT — Thu, 01 Mar 2012 22:06:07 +0000

There is no point in explaining what is MVC, if you don’t already know what is MVC well dear, then you got an issue … trust me I am an engineer . OK, now lets see how do we create our models in Sencha and fill the with information form back-end. I will create a models that holds the information related to user contact information. To keep this minimal the model could be something like:

 
**
 * Model mapping the contact details
 */
Ext.regModel('ContactDetails', {        
	//Contact website
	{
		name : 'website',
		type : 'string'
	},
	//Twitter account
	{
		name : 'twitter',
		type : 'string'
	}
        //TODO Add more  details :), I am lazy  
}
 
 
**
 * Model mapping the contact structure
 */
Ext.regModel('Contact', {
	//Contact name
	{
		name : 'name',
		type : 'string'
	},
	//Contact email
	{
		name : 'email',
		type : 'string'
	},
        //Contact details
        // Mapping Contact details model
	{
		name : 'detail',
		type : 'ContactDetails'
	},
 
}

OK now that we have created our model lets create our store that use the Contact model

 
var ContactStore = new Ext.data.Store({
        // mapping model
	model : 'Contact',
        // auto load with data from back-end
	autoLoad : true,
        // sort our contacts
	sortOnLoad : true,
	proxy : {		
		type : 'ajax',
		url : 'example.com/contacts.json/',		
	},
        //Add a custom sorting function by name
	sorters : [{
                //Set field used to sort the 
		property : 'name',		
		sorterFn : function(o1, o2) {
			var v1 = this.getRoot(o1)[this.property].toLowerCase(),
			 v2 = this.getRoot(o2)[this.property].toLowerCase();
 
			return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
		}
	}]
});

We did successfully created our store now lets put out data inside a list, this can be easily done by the following voodoo :

 
//Create the list of contacts
ContactsList = new Ext.List({
	id : 'contactslist',
	//Set data source
	store : ContactStore
});

This is it, now the model strong in you is Luke

Using Magento product chooser widget in you’re own module.

andreiT — Sun, 19 Feb 2012 09:39:10 +0000

From my personal experience Magento is in the greatest e-commerce platform when it comes to architecture and the way this is built but in the same time the it really piss me off when it comes to documentation. Well the documentation is so fuzzy and the samples are so minimal or outdated, I mean really useless. Even when you have to do a really simple task you have to do some reverse engineering and try to understand how to solve your problem (although in the old good days I love playing with decompilers and ASM to try to find out more about how the stuff are done under the hood). But when it comes to have a result in a specified amount of time this is not funny at all.
OK so one of the task that I had to figure out, was to add a product chooser widget in a custom made component. Sound easy but in reality this was frustrating because I couldn’t find anything useful and thous guys form Magento community don’t want to share anything with other (damn bastards), that is the main reason that I am sharing this with you.
Supposing that you already know how to create a module.
The product selector will be triggered by a button and will put all the product SKU in a textbox or something like.
1. create an new JS add it to js folder, this will contain something like :

getProductChooser = function (url) {
    new Ajax.Request(
    url, {
        method: "post",
        onSuccess: function (b) {
            var a = $("chosser-container");
            a.update(b.responseText);
            a.scrollTo()
        }
    })
};
var VarienRulesForm = new Class.create();
VarienRulesForm.prototype = {
    initialize: function (a) {
        this.newChildUrl = a;
        this.shownElement = null;
        this.updateElement = $("skus");
        this.chooserSelectedItems = $H({})
    },
    initParam: function (b) {
        b.rulesObject = this;
        var d = Element.down(b, ".label");
        if (d) {
            Event.observe(d, "click", this.showParamInputField.bind(this, b))
        }
        var f = Element.down(b, ".element");
        if (f) {
            var e = f.down(".rule-chooser-trigger");
            if (e) {
                Event.observe(e, "click", this.toggleChooser.bind(this, b))
            }
            var c = f.down(".rule-param-apply");
            if (c) {
                Event.observe(c, "click", this.hideParamInputField.bind(this, b))
            } else {
                f = f.down();
                if (!f.multiple) {
                    Event.observe(f, "change", this.hideParamInputField.bind(this, b))
                }
                Event.observe(f, "blur", this.hideParamInputField.bind(this, b))
            }
        }
        var a = Element.down(b, ".rule-param-remove");
        if (a) {
            Event.observe(a, "click", this.removeRuleEntry.bind(this, b))
        }
    },
    showChooserElement: function (c) {
        this.chooserSelectedItems = $H({});
        var a = this.updateElement.value.split(","),
            b = "";
        for (i = 0; i < a.length; i++) {
            b = a[i].strip();
            if (b != "") {
                this.chooserSelectedItems.set(b, 1)
            }
        }
        new Ajax.Updater(c, c.getAttribute("url"), {
            evalScripts: true,
            parameters: {
                form_key: FORM_KEY,
                "selected[]": this.chooserSelectedItems.keys()
            },
            onSuccess: this._processSuccess.bind(this) && this.showChooserLoaded.bind(this, c),
            onFailure: this._processFailure.bind(this)
        })
    },
    showChooserLoaded: function (a, b) {
        a.style.display = "block"
    },
    showChooser: function (a, c) {
        var b = a.up("li");
        if (!b) {
            return
        }
        b = b.down(".rule-chooser");
        if (!b) {
            return
        }
        this.showChooserElement(b)
    },
    hideChooser: function (a, c) {
        var b = a.up("li");
        if (!b) {
            return
        }
        b = b.down(".rule-chooser");
        if (!b) {
            return
        }
        b.style.display = "none"
    },
    toggleChooser: function (a, c) {
        var b = a.up("li").down(".rule-chooser");
        if (!b) {
            return
        }
        if (b.style.display == "block") {
            b.style.display = "none";
            this.cleanChooser(a, c)
        } else {
            this.showChooserElement(b)
        }
    },
    cleanChooser: function (a, c) {
        var b = a.up("li").down(".rule-chooser");
        if (!b) {
            return
        }
        b.innerHTML = ""
    },
    showParamInputField: function (a, c) {
        if (this.shownElement) {
            this.hideParamInputField(this.shownElement, c)
        }
        Element.addClassName(a, "rule-param-edit");
        var d = Element.down(a, ".element");
        var b = Element.down(d, "input.input-text");
        if (b) {
            b.focus();
            if (b && b.id && b.id.match(/__value$/)) {
                this.updateElement = b
            }
        }
        var b = Element.down(d, "select");
        if (b) {
            b.focus()
        }
        this.shownElement = a
    },
    hideParamInputField: function (a, d) {
        Element.removeClassName(a, "rule-param-edit");
        var b = Element.down(a, ".label"),
            c;
        if (!a.hasClassName("rule-param-new-child")) {
            c = Element.down(a, "select");
            if (c && c.options) {
                var f = [];
                for (i = 0; i < c.options.length; i++) {
                    if (c.options[i].selected) {
                        f.push(c.options[i].text)
                    }
                }
                var e = f.join(", ");
                b.innerHTML = e != "" ? e : "..."
            }
            c = Element.down(a, "input.input-text");
            if (c) {
                var e = c.value.replace(/(^\s+|\s+$)/g, "");
                c.value = e;
                if (e == "") {
                    e = "..."
                } else {
                    if (e.length > 30) {
                        e = e.substr(0, 30) + "..."
                    }
                }
                b.innerHTML = e
            }
        } else {
            c = Element.down(a, "select");
            if (c.value) {
                this.addRuleNewChild(c)
            }
            c.value = ""
        }
        if (c && c.id && c.id.match(/__value$/)) {
            this.hideChooser(a, d);
            this.updateElement = null
        }
        this.shownElement = null
    },
    addRuleNewChild: function (b) {
        var f = b.id.replace(/^.*__(.*)__.*$/, "$1");
        var h = $(b.id.replace(/__/g, ":").replace(/[^:]*$/, "children").replace(/:/g, "__"));
        var d = 0,
            c;
        var a = Selector.findChildElements(h, $A(["input.hidden"]));
        if (a.length) {
            a.each(function (k) {
                if (k.id.match(/__type$/)) {
                    c = 1 * k.id.replace(/^.*__.*?([0-9]+)__.*$/, "$1");
                    d = c > d ? c : d
                }
            })
        }
        var g = f + "--" + (d + 1);
        var j = b.value;
        var e = document.createElement("LI");
        e.className = "rule-param-wait";
        e.innerHTML = Translator.translate("Please wait, loading...");
        h.insertBefore(e, $(b).up("li"));
        new Ajax.Updater(e, this.newChildUrl, {
            evalScripts: true,
            parameters: {
                form_key: FORM_KEY,
                type: j.replace("/", "-"),
                id: g
            },
            onComplete: this.onAddNewChildComplete.bind(this, e),
            onSuccess: this._processSuccess.bind(this),
            onFailure: this._processFailure.bind(this)
        })
    },
    _processSuccess: function (b) {
        var a = b.responseText.evalJSON();
        if (a.ajaxExpired && a.ajaxRedirect) {
            alert(Translator.translate("Your session has been expired, you will be relogged in now."));
            location.href = a.ajaxRedirect
        }
        return true
    },
    _processFailure: function (a) {
        location.href = BASE_URL
    },
    onAddNewChildComplete: function (c) {
        $(c).removeClassName("rule-param-wait");
        var a = c.getElementsByClassName("rule-param");
        for (var b = 0; b < a.length; b++) {
            this.initParam(a[b])
        }
    },
    removeRuleEntry: function (b, c) {
        var a = Element.up(b, "li");
        a.parentNode.removeChild(a)
    },
    chooserGridInit: function (a) {},
    chooserGridRowInit: function (a, b) {
        if (!a.reloadParams) {
            a.reloadParams = {
                "selected[]": this.chooserSelectedItems.keys()
            }
        }
    },
    chooserGridRowClick: function (b, d) {
        var f = Event.findElement(d, "tr");
        var a = Event.element(d).tagName == "INPUT";
        if (f) {
            var e = Element.select(f, "input");
            if (e[0]) {
                var c = a ? e[0].checked : !e[0].checked;
                b.setCheckboxChecked(e[0], c)
            }
        }
    },
    chooserGridCheckboxCheck: function (b, a, c) {
        if (c) {
            if (!a.up("th")) {
                this.chooserSelectedItems.set(a.value, 1)
            }
        } else {
            this.chooserSelectedItems.remove(a.value)
        }
        b.reloadParams = {
            "selected[]": this.chooserSelectedItems.keys()
        };
        this.updateElement.value = this.chooserSelectedItems.keys().join(", ")
    }
};

2. be sure that the js file will be hooked in the header, for that add the following line to the adminhtlm layout XML (note that my module is called znuv so you would replace wit the popper name):

3. now you have a code that it will add the widget to the interface so let’s add a backend form with a button that will show the chooser, so for that add the following lines:

$action = 'getProductChooser(\'' . Mage::getUrl(
'adminhtml/promo_widget/chooser/attribute/sku/form/rule_conditions_fieldset',
array('_secure' => Mage::app()->getStore()->isAdminUrlSecure())
) . '?isAjax=true\'); return false;';
 
$productFieldset->addField('trigger', 'button', array(
'name' => 'trigger',
'label' => Mage::helper('whooparoo')->__('Choose Products'),
'value' => Mage::helper('whooparoo')->__('Choose Products'),
'class' => 'rule-chooser-trigger',
'onclick' => $action,
)
);

So that’s all, happy coding

Sencha touch list and taphold event

andreiT — Sun, 12 Feb 2012 23:44:22 +0000

Sencha touch allows you to create in no time applications for mobile device and all you need is love and… JavaScript. My latest challenge was to show a menu when user was holding the finger ( not necessary the middle one ) on any list element. It tokes me a while but in the end I have found the magic spell that solved the problem. So to keep it short the code should look something like:

//Create the list
FileList = new Ext.List({
// list setting
// another list setting
// ...
/**
* Listeners binding
*/
listeners : {
el : {
  /**
  * Binding tap hold event on list element 
  */
  taphold : function(record, btn, index) {
     //Here you can add the required logic 
  }
 }
}

Protecting HTML source code from being stolen

andreiT — Mon, 01 Mar 2010 19:01:45 +0000

A lot of people are asking me how they can protect the source code of HTML of they’re site from being seen or worst being stolen. Well, the simple and short answer is that you can’t everything that the browser loads to render it can be seen by the user. The simplest method to protect you’re source HTML code is never to publish it on Internet .

Well seriously, there are some meta methods to protect you’re HTML source from being seen by a common user not from an expert user.I will enumerate some methods starting with the simplest.

The first method, maybe the most stupid one but used by many people (stupid ideas work for stupid people ) is putting a lot of empty line in front of HTML source. If the user looks at the source will see just empty white page. But if he scroll down on bottom of the page he will see the source.
The second method is to disable right click on page. To do that just take a look at next code://Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message=”";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e)
{
if(document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3)
{(message);return false;}
}
}

if (document.layers)
{
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;
}
else
{
document.onmouseup=clickNS;document.oncontextmenu=clickIE;
}

document.oncontextmenu=new Function(“return false”)
// –>

Now that the user can do right click->show page source, you have achieved a good protection method, if you user is a old granny that doesn’t know to use (Ctrl+U) shortcut or Edit->View page soure.
The third method is to use javascript to hide the HTML content. A short example is presented next:
Let’s suppose that the page has the following code:

Sample HTML-hide sorece code

Blah blah blah

Now what we have to do next is to “encrypt” this content, go to http://www.swingnote.com/tools/texttohex.php or a similar page and convert the text source code to an hexa representation. You will obtain something similar to this:
%3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

The page is the same but now has a different representation that is strange to a common user but remember that this is a meta protection method an advanced user can and will do the reverse method to obtain you’re source.
The next step is to create the “protected” page, create a new HTML document and add the next code:

As you can see all we are doing is to use javascript to write the content (document.write method).
!!! Important : if user has the javascript disabled he will not see anything because the code will not execute, therefore will be nothing displayed. Also remember that most of searchengine as Google or Yahoo crawl the web in text mode, remember that javascript is luxury not a necessity.
Now is time to get serious and speak about some more advanced, a little bit harder to break (not impossible to break), technique to keep you HTML source protected.The base idea is to encrypt the content of the HTML page, this time really encryption . Let imagine a function for encryption this time a simple one that is using xor logic function to achieve encryption. The code to do that is showed next:
//Encryptionfunction encrypt(text,key){

var rez=new Array(text.length);
for(i=0;i rez[i]=text.charCodeAt(i) ^key.charCodeAt(i%key.length);
}
return rez;
}

//Decryption

function decrypt(text,key){
var rez=”";
for(i=0;i rez+=String.fromCharCode(text[i] ^key.charCodeAt(i%key.length));

}
return rez;
}

Using the functions in this form won’t help to much because the user will see clear what is about, so I am going to obfuscate the code (if you don’t know what is that google it ). Now the code looks not so friendly :

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!”.replace(/^/,String)){while(c–){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(’8 c(2,4){9 3=d b(2.5);7(1=0;1<2.5;1++){3[1]=2.6(1)^4.6(1%4.5)}a 3}8 f(2,4){9 3=”";7(1=0;1<2.5;1++){3+=e.g(2[1]^4.6(1%4.5))}a 3}’,17,17,’|i|text|rez|key|length|charCodeAt|for|function|var|return|Array|encrypt|new|String|decrypt|fromCharCode’.split(‘|’),0,{}))

The next step is to convert you’re page in hexa as showed previously in this post, suppost that we are using the same page the hexa will be:

%3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

now is time to encrypt the hexa representation with a key, so apply encrypt(“…hexa text ….”,”…you personal key…”) . I used as key “secret” and have obtained this:

86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17

Now let’s create the script,that will display the content of page, that will be the final step:

document.write(unescape(decrypt(new Array(86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17),”secret”)));

As you can see the key is “secret” you must chose a better one dynamic generate on each session stored in cookies. For extra security obfuscate this cod too:

eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(‘y.w(A(v(t z(4,4,0,3,3,m,4,b,3,3,b,j,4,b,a,3,a,c,4,a,r,3,a,f,4,b,4,3,3,f,4,8,l,3,9,c,4,8,7,3,8,e,4,3,8,3,a,f,4,a,4,3,b,g,4,b,0,3,b,k,4,b,a,3,3,f,4,a,0,3,3,g,4,3,7,3,3,j,4,3,
5,3,a,o,4,4,a,3,b,q,4,3,5,3,3,j,4,b,3,3,a,c,4,b,3,3,3,f,4,a,l,3,b,h,4,a,3,3,b,i,4,b,0,3,3,f,4,4,9,3,3,d,4,4,8,3,3,f,4,a,3,3,9,g,4,8,9,3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,
4,8,5,3,8,d,4,8,9,3,8,e,4,3,5,3,3,j,4,b,4,3,b,d,4,a,0,3,3,g,4,3,8,3,a,e,4,3,b,3,8,h,4,9,3,3,9,c,4,9,8,3,4,u,4,3,5,3,3,j,4,9,p,3,9,o,4,9,p,3,3,d,4,9,p,3,4,q,4,3,6,3
,8,j,4,9,b,3,8,o,4,3,5,3,a,c,4,a,b,3,3,j,4,9,l,3,8,h,4,9,3,3,8,i,4,8,0,3,4,m,4,3,5,3,b,c,4,a,3,3,b,c,4,3,5,3,9,h,4,8,l,3,9,c,4,8,7,3,8,e,4,4,9,3,3,i,4,9,3,3,9,g,4,8,9,
3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,4,8,5,3,8,d,4,8,9,3,8,e,4,3,6,3,8,c,4,9,3,3,8,c,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,9,3,3,8,i,4,8,0,3,3,f,4,9,l,3,8,i,4,8,0,3,8,d,4,9,
a,3,4,i,4,a,0,3,3,g,4,8,l,3,9,c,4,9,3,3,9,f,4,4,2,3,3,j,4,3,5,3,9,o,4,9,p,3,9,o,4,3,6,3,9,o,4,4,a,3,3,d,4,8,5,3,9,g,4,8,p,3,3,j,4,4,9,3,4,k,4,4,r,3,4,k,4,3,5,3,9,h,4,8,
l,3,9,c,4,8,7,3,8,e,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,8,4,3,8,m,4,8,3,3,4,d,4,3,8,3,4,e,4,8,7,3,8,n,4,9,3,3,8,m,4,3,8,3,8,h,4,9,3,3,9,c,4,9,8,3,3,i,4,8,4,3,9,m,4,
9,4,3,8,k,4,9,s,3,4,i,4,a,0,3,3,g,4,b,a,3,8,j,4,8,6,3,9,c,4,8,4,3,8,d,4,9,3,3,3,i,4,a,3,3,9,k,4,9,8,3,8,n,4,a,0,3,3,g,4,3,8,3,8,q,4,8,5,3,8,d,4,9,3,3,8,n,4,8,6,3,9,c,4,4,
7,3,a,e,4,3,b,3,9,c,4,8,4,3,9,h,4,9,3,3,3,j,4,8,l,3,9,c,4,8,7,3,8,e,4,4,1,3,3,f,4,8,a,3,8,h,4,8,9,3,9,g,4,9,a,3,8,n,4,9,3,3,4,i,4,9,4,3,9,c,4,8,s,3,3,i,4,4,l,3,a,e,4,3,
b,3,3,f,4,3,5,3,4,d,4,3,8,3,4,e,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,a,a,3,8,m,4,8,7,3,9,f,4,8,0,3,8,n,4,3,8,3,b,h,4,a,3,3,b,i,4,b,0,3,3,i,4,8,l,3,8,k,4,8,3,3,8,n,4,
3,8,3,9,q,4,8,5,3,9,g,4,8,4,3,8,q,4,8,4,3,3,f,4,8,a,3,8,j,4,8,3,3,8,n,4,4,0,3,3,j,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,8,4,3,8,m,4,8,3,3,4,
d,4,3,8,3,3,f,4,4,0,3,8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,s,k,4,b,b,3,8,e,4,8,9,3,8,h,4,3,8,3,8,g,4,8,0,3,8,m,4,8,l,3,3,f,4,8,b,3,8,e,4,8,9,3,8,h,4,3,8,3,4,e,4,3,5,3,
8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,9,3,3,8,i,4,8,0,3,4,d),”x”)));’,37,37,’|||87|86||||83|82|80|81|64|17|23|68|70|76|16|18|77|91|69|65|67|84|
71|90|85|new|21|decrypt|write|secret|document|Array|unescape’.split(‘|’),0,{}))

We have an pretty good protection, must remember a meta HTML protection because this can be broken by a good hacker.

I hope that this article was helpful I am waiting for you’re feedback.

[UPDATE:] here are the source used in this article
Secure_HTML_code

Prototipuri in JAVASCRIPT

andreiT — Mon, 19 Jan 2009 21:36:48 +0000

Desi javascript nu suporta clase totusi se poate poate programa obiectual si anume folosind prototipuri. Javascript este un limbaj in care gasesti atat cele mai mari idiotenii posibile care s-au putut inventa in vre-un limbaj de programare cat si unele cu adevarat geniale, printre acestea se numara faptul ca un obiect in Javascript este un container generic la care ii poti adauga oricand o noua proprietate sau “metoda”. Mai jos este un exemplu de “clasa” (un echivelent al unei clase din limbaje care suporta asa ceva) ce incapsuleaza mecanismul cunoscut si sub denumirea de AJAX.

Pentru cei care nu stiu AJAX este un mecanism de comunicare asicrona cu server-ul, adica pentru a aduce informatie nu este necesara un refresh de pagina.

function AjaxRequest(url)

{

this.url=url;

this.xmlHttp=”";

this.init=function()

{

try

{

// Firefox, Opera 8.0+, Safari

this.xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

this.xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);

}

catch (e)

{

try

{

this.xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (e)

{

alert(“Your browser does not support AJAX!”);

return false;

}

}

}

}

this.request=function()

{

this.init();

try{

this.xmlHttp.open(this.requestType,this.url,true);

}

catch(e)

{

this.onLoadFaild(e);

}

this.xmlHttp.send(this.vars);

var parent=this;

this.xmlHttp.onreadystatechange=function()

{

var done = 4, ok = 200;

if (parent.xmlHttp.readyState == done && parent.xmlHttp.status == ok)

{

if (parent.xmlHttp.responseText)

{

parent.onLoad(parent.xmlHttp.responseText);

}

}

}

}

this.get=function(vars)

{

this.vars=vars;

this.requestType=”GET”;

this.request();

}

this.post=function(vars)

{

this.vars=vars;

this.requestType=”POST”;

this.request();

}

}

Codul este destul de simplu ..aproape ca vorbeste de la sine. Avantajul programarii folosind obiecte este ca utilizare este foarte simpla plus ca putem avea conexiuni multiple pe servere separate

script1=new AjaxRequest(“http://un.site.de.undeva”);

script1.onLoad=function(sucess){

if(sucess==true){

prelucreaza informatia primita

}

}

script1.get(“”);

script2=new AjaxRequest(“http://un.site.de.altundeva”);

script2.onLoad=function(sucess){

if(sucess==true){

prelucreaza informatia primita

}

}

script2.get(“”);