jQuery – Super Basic

Hello everybody. Long time no see.

So today. I am going to make 1 tutorial that I think so many people care about, most of web developer. That is “jQuery”.

For me, I was in pain with this topic for a long time. When I had a trouble, then I have searched, I have copied codes and I have parsed those example codes into my application. Even though I didn’t understand at all. No matter how hard I tried to understand this, but it was hopeless.

After year by year, I have figure out something that is very useful and I want to share it to everyone for making a better life in web dev.

Note: This tutorial for beginners. So you guys just jump into and enjoy it.

Editor: Sublime 2

I/ Things force to know

+ jQuery site: http://jquery.com/

+ jQuery is written based on Javascript. It is a library (Just like library Math in C# or C++)

+ It is different from Javascript Native:

+ Download jquery lib:

Look at images above. Start fighting with your mind:

(PLEASE READ IT CAREFULLY)

+ Question: You are going to wonder which version should we download.

+ Answer From Completed Production (Application): It is number (1) or number (3)

+ Answer From Developing Production (Application): It is number (2) or number (4)

+ Question: So What difference between them ?

+ Answer: size (1), (3) < (2), (4)

+ Question: So What for ?

+ Answer: For example, you have:

+  (1 folder contains 1000 files: 4GB)  (AA)

+ [(1 folder contains 1000 files: 2GB)].zip  (BB)

+ You are going to copy it to another disk (HDD). Which one faster ?. You can try it at home. But as you can see (BB) is definitely faster than (AA).

• Our browser is just like this. As heavier as slower (its mean: slow).
• And if you want to understand deeper, OK search google those keywords: (Async, minified, optimize js, …)

II/ Create project & structure you apps:

2.1/ My first structure

+ lib: contains library like (jquery.js, angular.js, knockout.js, backbone.js)

+ index.html: contains html code

• Let’s open it with Sublime 2 or another editor

2.2/ Settings

+ Download jquery.js uncompressed version and place it into lib folder

+ Trust me, if you download compressed version, and do as I do, you’ve never make it work. I’ll show you later.

2.3/ Syntax

2.3.1/ Rule

+ Every jQuery codes or Native Javascript codes must be place on <script></script>

+ Everything start with $ (umcompressed-version) & jQuery (compressed-version)

2.3.2/ Document & ready

You have absolutely searched a lot and a lot for solution with jQuery. Right ? Don’t lie to me.

For example, you will have this:

+ Question: So what is it?

+ Answer: For example:

• Your mom asks you to bring cup of water for her.
• You will pour water into cup. When you cup of water is full (its mean ready).
• Bring to your mom.
• That’s it
• When your cup of water is ready to drink (that’s mean you cup of water is full)

So web page is just like this:

When all your js libraries and css are completely loaded. That means you web page is ready to do something that client want to do such as:

• Drag image into web for uploading
• Click choose product into cart
• Remove product from cart.

2.3.3/ Make it works

Let’s update some code like this:

Explain 1: When your site is ready (I mean that libs, images load successfully), it will pop up dialog message with content: Hello JS World

Ok. Everything’s seen to be ready. Let’s run. Go to project folder + click index.html => Open this file with your browser.

• Nothing is going to happen. Why ?

Explain 2: At browser (I use Chrome) + Press F12 (to open chrome Debugger) => You will get this:

After click likes image above. You will get this:

• It says that you are using jQuery syntax, but you don’t include your jquery lib on your page. So the browser doesn’t understand those syntax.

+ To solve this problem: You must load your jQuery lib before your code executes.

Note: The order of loading javascript libs is super important. Do not forget.

Ok Let’s update code again:

Run again:

 

• You will see that it executes like things we have expected.

III/ Syntax & Events

It is very hard for beginners to remember jQuery syntax. At the first time, when I first saw a syntax of jQuery. I’ve said that “Oh my god. What’s the hell is that ? It’s really hard to remember”. But don’t worry about it. I will make it become so simple to remember and understand.

3.1/ Set up page for example.

3.2/ Things I will do

3.3/ Install events

3.3.1/ Update code

I use link <a></a> for my late purpose. Of course, you can use: button, input[type=”submit”], …etc

3.3.2/ OK Let’s repeat after me PLEASE.

Take a look at:

Map above with below:

Note:

+ Trust me. At the beginning, when you catch event of element like button, select,…

=> Please read orange box. I beg you. If you want to remember this syntax

3.3.3/ Test

Open index.html & test it. Ok click a link “Click Me !” => see what’s going to happen.

You have just been successfully on catching even CLICK.

3.3.4/ Update function

+ Right now, you can catch event click. Ok let update some requirement of this example.

+ Now I want whenever I click a link “Click Me!”. Dialog message will take value from input(text)  and show it to you.

3.3.5/ Update code with requirement.

Work with ID

Work with Class

So What is val() ?

=> val() : get value from input. That’s it J=> jQuery has so much function. You can find out more information from jQuery home page

3.3.6/ Run

Open index.html on your browser > Click a link “Click Me!” => Feel the heat.

3.3.7/ Update code again

a/ Create file (.html) name: handsome.html

b/ Update index.html

3.3.8/ Run

After you click OK. You definitely see this:

It is right the way redirect to handsome.html

Note: this is result that we don’t expect

3.3.9/ Analyze the problem

When you catch events of elements. It actually will executes 2 events.

+ First => Our expected event.

+ Second => Default behavior of browser => This is a thing that we don’t want to happen.

• Question: How do we prevent from default behaviors of browser ?
• The answer place on3.40

3.3.40/ preventDefault()

a/ Definition

Cancel the event if it is cancelable, without stopping further propagation of the event.

(https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault)

b/ Update code

• Ok now you can run & see expected results.

IV/ Re-structure folder & js file.

+ In the real world, JS programmer never put js code mix with html code.

+ You have to separate js code & html code into different files.

4.1/ Create js file

4.2/ Update index.html

4.3/ Run

V/ Aanalysis

At BROWSER => Press F12

5.1/ Tab – Element

5.2/ Tab – Source

VI/ Simple Debug – Chrome

6.1/ Break point

6.2/ Execute Debug

+ Click a link “Click Me!”

+ Result right below:

+ You can Press F10 to jump to next statement

+ Click (1) or (2), it will finish all steps for you.

VII/ Project file & PDF Version

Project:

http://www.mediafire.com/download/v1zfcc3zz27jjnd/jQuery_Part1.rar

PDF version:

http://www.slideshare.net/nndung179/jquery-super-basic-41884172

VIII/ Messages from me.

Ok you are web developers.

So don’t be disappointed.

Just be strong.

I know how you feel when you are in trouble and cannot work it out.

I hope this tutorial can bring you a passion with Javascript.

Thank you so much.