Posted in Uncategorized

JS Post 4 – JQuery

Many aspiring web developers want to know what the differences between JavaScript and JQuery actually are. After all, they both start with a J, but are there other similarities as well? It may surprise you to learn that JavaScript and JQuery are actually the same thing. In a nutshell, JQuery is a set of JavaScript libraries that have been designed specifically to simplify HTML document traversing, animation, event handling, and Ajax interactions… Oooh I remember Ajax never got the hang of that even after spending a few hours on that tech…*sigh


Before jQuery was developed, web developers created their own custom frameworks in JavaScript. This allowed them to work around specific bugs without wasting time debugging common features. This led to groups of developers creating JavaScript libraries that were open source and free to use. JQuery is simply a specific library of JavaScript code.

There are many other JavaScript code libraries such as MooTools, but jQuery has become the most popular because it is so easy to use and extremely powerful. While many web developers confuse JavaScript and jQuery as two separate programming languages, it is important for you to realize that they are both JavaScript. The difference is that jQuery has been optimized to perform many common scripting functions and it does so while using fewer lines of code.

So technically speaking, JQuery is a framework for writing JavaScript “tasks” in a simplified manner than using libraries written with the help of JavaScript loaded as script files onto the web pages. JQuery is written in JavaScript. Also, I should probably mention that browsers parse  HTML and CSS files and also the JS scripts. Hence, all JavaScript frameworks (jQuery, AngularJS, etc) are written in JavaScript. They provide you the opportunity to write lesser lines of codes but under the hood, they are all written in javascript.

An example in order to understand why using JQuery you write less do more. Assume we have the following input element

The JS part that is to be inserted here will make an alert box pop-up displaying the message “Hello”

If we had to do this using plain JavaScript, we would have written the following:

document.getElementById(“button1”).addEventListener(‘click’, function(){ alert(“Hello”); });

On the other hand, if we were using JQuery, we would had achieved the same result by just writing this:

$(‘#button1’).click(function(){ alert(“Hello”); });

Using JQuery makes things well easier. When has a plugin not been user-friendly? Wanna know more? I think that this might be the thing that you are looking for then 😉


Okay untill then try to enjoy the randomly moving fireflies -.- Well I call it fireflies it looks more like a blob

くコ:彡。≠( ̄~ ̄ )

// <![CDATA[ var colour="#ffae19"; // what colour are the blobs var speed=70; // speed of animation, lower is faster var blobs=30; // how many blobs are in the jar var charc=String.fromCharCode(9679); // a blob – can be changed to charc='hello' or charc='*' for a different effect var div; var xpos=new Array(); var ypos=new Array(); var zpos=new Array(); var dx=new Array(); var dy=new Array(); var dz=new Array(); var blob=new Array(); var swide=800; var shigh=600; var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(fill_the_jar); function fill_the_jar() { var i, dvs; div=document.createElement('div');; dvs.position='fixed'; dvs.left='0px';'0px'; dvs.width='1px'; dvs.height='1px'; document.body.appendChild(div); set_width(); for (i=0; i<blobs; i++) { add_blob(i); jamjar(i); } } function add_blob(ref) { var dv, sy; dv=document.createElement('div');; sy.position='absolute'; sy.textAlign='center'; if (ie_version && ie_version.5?2:-2); xpos[ref]=Math.floor(swide*Math.random()); dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2); zpos[ref]=Math.random()*20; dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5); blob[ref]=dv; div.appendChild(blob[ref]); set_blob(ref); } function rejig(ref, xy) { if (xy==’y’) { dx[ref]=(0.5+Math.random())*sign(dx[ref]); dy[ref]=(0.5+Math.random())*-sign(dy[ref]); } else { dx[ref]=(0.5+Math.random())*-sign(dx[ref]); dy[ref]=(0.5+Math.random())*sign(dy[ref]); } } function sign(a) { if (a0) return (2); else return (0); } function set_blob(ref) { var sy; sy=blob[ref].style;[ref]+’px’; sy.left=xpos[ref]+’px’; if (ie_version && ie_version<10) { sy.filter="glow(color="+colour+",strength="+zpos[ref]+")"; sy.fontSize=30-zpos[ref]+"px"; } else if (ie_version) { sy.boxShadow="0px 0px 40px "+zpos[ref]+"px "+colour; } else { sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px'; sy.fontSize=40+zpos[ref]+'px'; } } function jamjar(ref) { if (ypos[ref]+dy[ref]shigh) rejig(ref, ‘y’); ypos[ref]+=dy[ref]; if (xpos[ref]+dx[ref]swide) rejig(ref, ‘x’); xpos[ref]+=dx[ref]; if (zpos[ref]+dz[ref]20) dz[ref]=-dz[ref]; zpos[ref]+=dz[ref]; set_blob(ref); setTimeout(“jamjar(“+ref+”)”, speed); } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!=”undefined” && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth0 && self.innerHeight0 && document.body.clientWidth0 && document.body.clientHeight

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s