jQuery beginners




 

A small introduction to jQuery with some key elements regarding the use of this library. French version of this post on

 

jQuery, what’s that ?

jQuery is a javascript library to make it as easy as possible for developpers to build our their javascript code.

If you know design patterns, jQuery is like a facade pattern obstructing code complexity.

jQuery make easy javascript writing code : write less, do more.

However, you have to learn this.

 

Why would we use jQuery ?

With javascript, you can code without libraries. But it’s not as simple as it.

Most of browsers implement javascript features. However, how to use them could be different from one browser.

You can prove regarding prefixed functions by moz, webkit or ms (moz for mozilla, webkit for chrome et ms for internet explorer) but all of this make same things. All of cases of browsers must be coded. And the result is a lot of lines of computer code. jQuery is a solution to avoid that.

And jQuery is very easy to learn.

 

Learn javascript with jQuery, a good idea ?

For some people, particularly people with knowledge of javascript, learn javascript using jQuery is a bad idea.

According to this developers, learn with jQuery does’nt learn javascript. And in this case, if you have a coding problem, it will hard to resolve it.

But jQuery is rather well done, and problem resolution has been greatly facilitated.

However, you must compare gaint productivity with and without jQuery library.

With jQuery : the code computer is faster to write.

The jQuery community offer some plugin often user friendly.

purist approach : why makes it simple when it can be complex ?
practical approach : keep it simple and focused on result.

Finally, you can use pure javascript with jQuery.

 

How to use jQuery

To download jQuery : jQuery download.
The documentation jQuery documentation

jQuery is a javascript library. You must include jQuery like source :

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

 

jQuery, first step

Always keep in mind that tutorial is buiding to html5 video game context.

Remember that a game is that dom elements was loaded : in pure javascript, there are 2 ways to do.

Put javascript after html code, in this way html elements are loaded before javascript run and all html elements are visible from javascript code.

Or use javascript onload event to initialize al of the elements of html5 video game : this solution isn’t perfect, this is because some html heavy elements are loaded during long time. And javascript onload is triggered before html heavy elements are loaded, javascript can’t be access to déclenche.

To avoid this problem, jQuery has jQuery ready event. This event is triggered when all of the html elements are loaded and not before.

jQuery ready trigger a function that is declared in jQuery ready parameter, like this :

<script type="text/javascript">// <![CDATA[
    $(document).ready(function () {
       .... run the code when ready event is triggered ....
    });
// ]]></script>

But, jQuery ready isn’t like onload javascript. If you want to use onload event, just use jQuery load event (deprecated from version 1.8) :

<script type="text/javascript">// <![CDATA[
    $(document).load(function () {
       .... run the code when ready event is triggered ....
    });
// ]]></script>

jQuery documentation notes that jQuery ready can’t be used with body onload.

In place of jQuery ready function, you can use :

jQuery(function() { 
  // called when document is loaded
});

or

$(function() { 
  // called when document is loaded
});

 

jQuery document selector

With jQuery, there are some document selector.

You probably know the a html component can be use an id property. From this id, it’s possible to retrieve DOM object (javascript object).

With javascript, the command document.getElemenById(« id ») retrieve javascript object regarding html tag.

For example with html img tag, you can retrieve a javascript Image object :

– image in html source

<img id="myPicture" alt="" src="image.jpg" />

javascript Image object using javascript command :

var myPicture = document.getElemenById("myPicture");

jQuery simplifie la notation pour récupérer l’objet :
javascript Image object using jQuery command :

var myPicture = $("#myPicture");

 

jQuery event

One of the difficulties of working with events in client-side javascript is that IE (until IE9) implements a different event API than all other browsers. To address this difficulty, jQuery defines a uniform event API that works in all browsers.

jQuery event registration

You must call bind method on target element with :
– target element;
– function called when event is triggered.

Let’s take an image example with click event that display an alert box.

Inside html5 source, jQuery dependancy and image displaying :

<img id="myPicture" alt="" src="./img/tryJQuery.jpg" />

javascript code registration on click event with alert box displaying on triggering :

$(function() {
 var myPicture = $("#myPicture").bind("click", function() {
  alert("try jquery");
 });
});

The list of events :

blur focus load resize scroll unload beforeunload
click dblclick mousedown mouseup mousemove mouseover mouseout
change select submit keydown keypress keyup error

Another way to do in place of bind function, you can call a specific method corresponding a specific event like this :

$(function() {
 var myPicture = $("#myPicture").click(function() {
  alert("try jquery");
 });
});

The list of jQuery methods :

blur() focus() load() resize() scroll() unload() click()
dblclick() mousemove() mouseover() mouseout() keydown() keypress() keyup()
change() submit() focusin() focusout() mouseenter() mouseleave() resize()
scroll() select() error()        

 

Event object

When an event is triggered, some properties are available like mouse pointer position.

For accessing to this object, just add Event object in parameter of the function like this :

$(function() {
 var myPicture = $("#myPicture").click(function(event) {
  alert("try jquery");
 });
});

Properties of Event object :

altKey ctrlKey newValue screenX screenY attrChange currentTarget
offsetX offsetY attrName detail shiftKey bubbles eventPhase
originalTarget srcElement button fromElement pageX pageY target
cancelable keyCode toElement charCode layerX layerY prevValue
view clientX clientY relatedNode wheelDelta metaKey relatedTarget
which            

Properties are available for all events.

The list of Event objet methods :

preventDefault() isDefaultPrevented() stopPropagation()
isPropagationStopped() stopImmediatePropagation() isImmediatePropagationStopped()

 

Finish

You can do more with jQuery. To be continued….

 
[important]Comments, improvement, idea : let me know. If this post has been helpful, make comments on your favorite social networks.[/important]

 

Posté dans html5Taggé HTML5, javascript, jquery, video game  |  1 commentaire

Une réponse à "jQuery beginners"

Répondre

*