This completely new approach to jQuery. I made a super simple tutorial about jQuery. From this you can take a syntax easier. Enjoy.
=> Please comment how you feel about this tutorial :)
Thank you very much.
3. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
3
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:
4. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
4
Look at images above. Start fighting with your mind:
(PLEASE READ IT CAREFULLY)
5. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
5
+ 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, …)
6. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
6
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.
7. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
7
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.
8. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
8
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:
9. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
9
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:
10. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
10
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:
11. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
11
Run again:
You will see that it executes like things we have expected.
12. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
12
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
13. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
13
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
14. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
14
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.
15. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
15
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
16. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
16
So What is val() ?
=> jQuery has so much function. You can find out more information from jQuery home page
=> val() : get value from input. That’s it
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
17. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
17
b/ Update index.html
3.3.8/ Run
After you click OK. You definitely see this:
18. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
18
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.
19. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
19
+ 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 on 3.3.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
20. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
20
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
21. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
21
4.3/ Run
V/ Aanalysis
At BROWSER => Press F12
5.1/ Tab - Element
23. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
23
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
24. Nguyễn Ngọc Dũng
https://nndung179.wordpress.com/
24
+ Click (1) or (2), it will finish all steps for you.
VII/ Project file
http://www.mediafire.com/download/v1zfcc3zz27jjnd/jQuery_Part1.rar
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.