Introduction to jQuery basic for beginners

Introduction

jQuery is one of the many framework provided online to help developers to minimize the time needed to write advance coding. It provides many useful feature to help developers to overcome cross browser issues. Best of all, it is extremely light-weight for optimization! jQuery has a large community and available plugin for different purposes. What jQuery can do for you? Powerful stuff! Check out their plugin made by other developers all over the world!

Since i am also new to jQuery, i believe there will always be new comer entering new technology and feature. So here i am writing this article to introduce some of the basic i learn in jQuery and hope it will help others too. Please bear in mind before we start, jQuery selection will always return you a set of jQuery object which you can use to do a chain operation(chaining is the powerful part of jQuery).

Element Manipulation

Let's start with jQuery element manipulation. For starters, jQuery is written in the following two ways,

$(selector)

or

$jQuery(selector)

This is the basic thing a jQuery programmer will need to know when dealing with jQuery. This is more like a declaration for jQuery.  The '$' symbol and jQuery is the namespace used in jQuery. With just this knowledge, you can do a lot of things in jQuery. Below listed different way of manipulating the element in jQuery.

$("p a")

retrieve the group of links nested inside a

element

$("div.notLongForThisWorld").fadeOut();

fade out all

elements with the CSS class notLongForThisWorld

$("div.notLongForThisWorld").fadeOut().addClass("removed");

add a new CSS class, removed, to each of the elements in addition to fading them out. The fadeOut() is a function in jQuery that will fade the element out of the screen while addClass(css class name) adds a new class to the element.

$("#someElement").html("I have added some text to an element");

or

$("#someElement")[0].innerHTML ="I have added some text to an element");

add the text 'I have added some text to an element' to the element which hold the id 'someElement'. The first adds to all elements that contain this id the second only place the text into the first element it sees. The .html('') is similar to innerHTML.

$("p:even");

This selector selects all even

elements. even is one of the Filter in jQuery

$("tr:nth-child(1)");

This selector selects the first row of each table.nth-child(index/even/odd/equation) is one of jQuery Child Filter.

$("body > div");

This selector selects direct

children of <body>. the symbol '>' is one of jQuery Hierarchy

$("a[href$=pdf]");

This selector selects all links to PDF files. the [attribute$=value] is one of jQuery Attribute Filter

$("body > div:has(a)")

This selector selects direct

children of <body>-containing links. The above combine different Filter and Hierarchy.

$('img[alt],img[title]')

match all elements that have either an alt or a title attribute.

if you haven't notice, the syntax used in the string are mostly used in CSS too which is used to select the specify element to apply the style on. This is also being used in jQuery during selection. jQuery has its own advance selection too which are the filters and hierarchy example shown above. jQuery uses some form of regular expression to perform its selection but the author had made it very abstract for the developers(great!). You guys can visit http://docs.jquery.com/Selectors for more selector manipulation functions and example.

Utility Functions

jQuery itself has many other Utility functions that can be used by developers. An example to use a function 'Trim' is as follow,

$.trim(" testing ")

the above will provide a trimmed version of 'testing' without spaces in between the word. It can also be

jQuery.trim(" testing ")

There are many other function that can be found in http://docs.jquery.com/Utilities which is useful when dealing with application.

Document Ready Handler

Traditionally we have the onload method given in javascript. However, the onload event handler  is evil because it not only wait for the DOM tree to be fully created, it also waited for all other element in the page to finish loaded. This means that only when the page has fully loaded, will the function in the onload event handler starts activating. Most of the time the user will long be gone before your page has loaded(images loaded last and longest). Speed is everything nowadays.

jQuery provided a event handler called 'ready' which is very handle. It is not only cross browser compatibility, it also eliminate the 'problem' caused by onload function. The ready event handler will load once the DOM tree has fully loaded. This way, both the images and functions of javascript can be proceed. This promote synchronisation. Furthermore, the jQuery ready event handler is able to be nested in the script unlike onload handler which only allow a single function.

Example,

$(document).ready(function() {$("table tr:nth-child(even)").addClass("even");});

This is a formal syntax when calling .ready event handler.

$(function() {$("table tr:nth-child(even)").addClass("even");});

While this is an shorthand form. (By passing a function to $())

Making DOM Element

Making DOM element for cross browser is never an easy task. Most programmers will face issues when dealing with IE in making DOM element. jQuery helps to eliminate all these problem by simplifying it.

Example,

$("<p>Just like this</p>")

To create a DOM element in jQuery is as simple as writing a tag in HTML!

Extending jQuery

Wish to extend the Capability of jQuery? You can, by writing the following code.

$.fn.disable = function() {	return this.each(function() {	if (typeof this.disabled != "undefined") this.disabled = true;	});}

The above code tells jQuery that we are defining a new method 'disabled' by extending the $ wrapper by using the sentence '$.fn'.

Conclusion

From the above we can see how powerful jQuery is. Learning more about it and working with this existing library will help alot in the future! Especially when it comes to cross browser and file size, jQuery is one of the best among the framework available. Furthermore, there is a very large community for this framework that can assist your growth in jQuery. Of course, there are alternative such as MooTool that also provided the same competitive advantages similar to jQuery.Unfortunately, I have not a chance to experience MooTool yet. Hopefully i will in the future! The above example mostly has been taken in the book 'jQuery in Action' by Bear Bibeault and Yehuda Katz. Great book for people who has a understanding on DOM, CSS and javascript.

Some basic on Javascript that not all programmers are aware

These are some of the JavaScript way of writing that one usually do not know by learning on some basic web site such as w3schoo.com

Declaring many variables at once

You can declare many variable at once by doing the following,

var test,test1,test2,test3,test4
OR
var test=1,test1=2,test2=3,test3=4,test4=5

Assignment operator shortcuts

you can do a assignment operator in short instead of writing long code.

x+3=x -> 1+=3
x-4=-x -> x-=4
x*1=x -> x*= 1
x/1=x -> x/=1
x+1=x -> x++
x-1=x -> x--

The "with" statement

The 'with' statement basically help you reduce some code. The meaning of with can be read as 'with this'. For example,

<script type="text/javascript">
document.write('Hi there, how are you?")
document.write('Fine, thanks. And you?')
document.write('Great!')
</script>

You can write as

<script type="text/javascript">
with(document)
{
write('Hi there, how are you?")
write('Fine, thanks. And you?')
write('Great!')
}
</script>

By using the 'with' statement, everything that falls inside of its brackets ({ }) default to the object specified in it's parameter. That way, you only need to type the object name once.

Remember, the "with" statement can be used with any JavaScript object to avoid having to repeatedly write the object out when referencing it multiple times.

The "?" conditional expression statement

This is a shortcut for if-else statement and it will return a Boolean value. For example, instead of writing this

if(x==1)
do something..
else
don't do it..

We can write something shorter such as this,

x==1 ? do something.. : don't do it..

The format for this is as follow,

(condition) ? doiftrue : doiffalse

Conclusion

The reason for doing all these shortcut is to improve efficiency of the code to help improve performances. Especially on large application where efficiency holds a key to whether its a good or bad application. Every line of code contribute greatly on the performance of the application. One will have to remember that speed in web application holds a key on whether anyone will visit or use your application/site.

Free Web Hosting

i was quite surprise with web hosting nowadays. Although free web hosting has been around for quite sometime, but there will always be ads banner or certain restriction that will link on your site because the service is free. Nowadays, there isn't any ads and the service provided and is equally comparable with the service given by paid hosting! Furthermore, it's TOTALLY FREE! (ah..its better than paid hosting in my country =/)

i went to google it up and found quite a few free hosting chart that show list of free hosting services. However, the same things happen with free web hosting which i though only happen with paid hosting is that there are many bad quality service although their marketing strategy looks very attractive. The 'bad' quality i am referring here is the number of downtime and their terms and condition that users do not read. Most of these free attractive hosting plans have terms which will cause your site to be removed. Some even cause your site to be down for a week/month/year because they do not really care about what happen to your site since its free. Thus, finding good quality free hosting is important if you want your site to remain alive and don't feel con after all the work you have done to get your hosting up.

Personally, i do not know any free hosting site that may worth to try but i do believe the following site may hold some interest for those who are searching desperate for it:

  1. http://www.000webhost.com/
  2. http://www.110mb.com/

Seriously, i am not doing any affiliate program for the above site. (if i am, it will be a link instead of a site url) I believe if you come in this topic and this site you are most likely someone i know or desperate for a hosting plan. If you would like to share your hosting experience with everyone, please post it up here so that people are aware.  But if you are looking for a paid hosting plan i will have an idea and if you guys really like to know, you can email me if you want to or leave a post =)

Cheers,

Clay Lua

CSS: Box Model Problem/Hack

The problem caused by different browsers way of interpreting a CSS element has emerge the need of CSS hack. The box model hack was developed by Tantek Celik, the lead developer of Internet Explorer for the Mac to solve the issue on IE 5 border and padding problem. The total width of the box SHOULD be calculated by adding the border thickness on the left and right, the padding on the left and right and the width of the content. Thus, Consider the following code:

<code>#test{
background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
width: 100px;
}
</code>

The above code should create a box with a 5-pixel border and 15 pixels of padding around the content which has a 100 pixel width. This gave a total width of 140 pixels.

Unfortunately, some common browsers ( IE 6 and below) interpret this code incorrectly, Instead of applying the width to the content area, the width restrains the overall box size, so that the border and padding subtracted from the over width! So we are left with a box 100pixels width, but a content area only 60 pixel wide!!( width - left and right border+padding = 60 pixel)

This cause cross browser issues when displaying the same box on for example, IE and Firefox! Firefox will display a box of total width 140 pixel while IE will only display the same box with a total width of 100 pixel! To fix this, we need to use a hack, that is, we have to intentionally introduce code that doesn't work in one browser so that both boxes have the same width.(writting  a code that work in IE but fail in firefox so that both of them have 140 pixel)

We will be taking advantage of a bug in IE that causes it to ignore certain CSS so that it set the true width:

<code>#test{
background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
<span style="color: #ff0000;">voice-family: "\"}"\";
voice-family: inherit;</span>
width: 100px;
}
</code>

But this will caused problems in Opera unless we add a definition after the above code

<code>html>body #test{
width: 100px;
}</code>

This allows browsers that understand the parent/child selector grouping to correctly interpret your code. Nowadays, with IE 7 came along, this problem will not be shown on the newer browser but for older browser on old pc this is still a problem. Other than the box model problem, presently there are still problems exist on today browsers due to different implementation and interpretation by these browsers. The need of CSS hack is still needed so that cross browser issues caused by CSS can be eliminated.

Point to consider when building a dynamic site

Understanding layout on Web

All web layouts have two basic parts. The first part is the content area while the other part is filler. Based on this balance, there are four broad categories of web layout.

  • Unrestrained. The content is allowed to stretch horizontally from the left edge to the right edge of the window and vertically down to the bottom edge of the window which eliminate the needof filler.
  • Fixed width. The content is given a set fixed size on its width, restraining the content horizontally.
  • Fixed height. The content area is given a fixed length on its height, restraining it vertically.
  • Fixed size. Both height and width are given a fixed width restraining the content regardless of screen size.

Understanding Hypertext, Navigation  and Controls

  • Navigation: these are links used to move the visitor between different general sections and pages within the site
  • Controls: these are links or buttons used to perform a specific action, such as submit a form
  • Hypertext: these are links used to display additional information about the specific text being linked.

Four D's of Web Design

  1. Define
  2. Design
  3. Develop
  4. Deploy

Define

In order to start designing a site, one have to collect, identify, and distill the information that will make up your site.

  • Collect your content
  • know your audience
  • establish your goals
  • plan features and interactivity
  • consider the graphic design style

These are the points must be taken into consideration when defining and planning the site.

Design

  • Outline the site
  • create a site map
  • Sketch the layout grid
  • create a storyboard
  • define the look and feel

these are the points needed before designing the site.

Develop

  • prepare the content
  • create the code
  • create a template
  • Assemble the pages
  • test your site

Deploy

The web site may be built and tested and its now ready to go live!