training javascript 2012 hcmut
DESCRIPTION
This slide trains about JavaScript in jQuery Approach.TRANSCRIPT
![Page 1: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/1.jpg)
Editor: Nguyễn Đức Minh Khôi
Email: [email protected]
HCMC University of Technology
@Jan, 2012
TRAINING JAVASCRIPT & jQUERY
![Page 2: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/2.jpg)
Content
Introduction to JavaScript
JavaScript – the basic
Getting Started with JQuery
JQuery in Action
Ajax, tips, tricks
1/6/2012 2
![Page 3: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/3.jpg)
Part1: Introduction to JavaScript
What is JavaScript and JQuery?
The Web World
Software for JavaScript programming
1/6/2012 3
![Page 4: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/4.jpg)
What is JavaScript? JavaScript is a programming language that lets you
supercharge your HTML with animation, interactivity, and dynamic visual effects.
1/6/2012 4
![Page 5: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/5.jpg)
What is jQuery? jQuery is a JavaScript library intended to make
JavaScript programming easier and more fun.
solves the two biggest headaches with JavaScript— complexity and the finicky nature of different web browsers.
you can add advanced features to your website with thousands of easy-to-use jQuery plug-ins.
1/6/2012 5
![Page 6: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/6.jpg)
The web world HTML provides the structural layer, organizing content
like pictures and words in a meaningful way
CSS (Cascading Style Sheets) provides the presentational layer, making the content in the HTML look good
JavaScript adds a behavioral layer, bringing a web page to life so it interacts with web visitors and reduce “stress” for Server.
Other Server Scripting: PHP, ASP, JSP, Ruby, Python… do the main part of your project!
1/6/2012 6
![Page 7: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/7.jpg)
Software for JS Programming Notepad++ (Windows, http://notepad-plus-plus.org) is a
coder’s friend. Netbeans (Windows, Linux, Mac; www.eclipse.org) is a
free, popular choice amongst Java Developers, but includes tools for working with HTML, CSS, and JavaScript.
Eclipse and Aptana Studio plugin (Windows, Linux, Mac; www.aptana.org) is a powerful, free coding environment with tools for working with HTML, CSS, JavaScript, PHP, and Ruby on Rails.
Dreamweaver (Mac and Windows, www.adobe.com/products/dreamweaver.html) is a visual web page editor.
Expression Web Designer (Windows, www.microsoft.com/expression/products/StudioWebPro_Overview.aspx) is Microsoft’s entry in the web design field.
1/6/2012 7
![Page 8: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/8.jpg)
Software for JS Programming (cont’) Google Chrome browser and Developer tools (Ctr +
Shift + J)
Firefox and firebug plugin (http://getfirebug.com/)
Internet Explorer 9 – console (F12)
Safari and Error console (Ctrl + Alt + C)
Wamp Server (for Ajax practice) for windows www.wampserver.com/en/
Lamp Server for Linux (Debian, Ubuntu) http://www.sph.umich.edu/csg/abecasis/LAMP/download/
Mamp Server for Mac: www.mamp.info/en
1/6/2012 8
![Page 9: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/9.jpg)
Editor: Nguyễn Đức Minh Khôi
Email: [email protected]
HCMC University of Technology
@Jan, 2012
TRAINING JAVASCRIPT & jQUERY
![Page 10: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/10.jpg)
Content
Introduction to JavaScript
JavaScript – the basic
Getting Started with JQuery
JQuery in Action
Ajax, tips, tricks
1/6/2012 10
![Page 11: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/11.jpg)
Part2: JavaScript – the Basics
Introduction to JavaScript
How to work with JavaScript
1/6/2012 11
![Page 12: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/12.jpg)
Introduction to JavaScript How to add JS to a page:
Notes: if you use HTML earlier than HTML5 should:
1/6/2012 12
![Page 13: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/13.jpg)
Introduction to JavaScript (cont.) URL type:
Absolute path: http://www.cosmofarmer.com/scripts/site.js
Use when you point to a file that’s not on the same server as the your web page.
Root relative: /scripts/site.js
Use for JavaScript files stored on your own site.
Document relative: ../scripts/site.js - ../ means climb up out of the folder
Use when you’re designing on your own computer without the aid of a web server.
1/6/2012 13
![Page 14: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/14.jpg)
Introduction to JavaScript (cont.) JS is a client-side language which means that it works
inside a web browser.
JS is also a scripting language like PHP, Ruby, Python ColdFusion as well.
JS is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
JavaScript was formalized in the ECMAScript language standard.
JavaScript uses syntax influenced by that of C. And very different sematic with Java.
See more at http://www.w3schools.com/js/default.asp
1/6/2012 14
![Page 15: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/15.jpg)
Introduction to JavaScript (cont.) Statement
Basic programming unit E.g.: alert('Hello World!');
Popup Box: alert(‚Be alert‛) // alert something with user prompt(‚enter sth‛)//ask user to input something confirm("Press a button!");
Built in function document.write() //add content to a page isNaN(variable) //check if variable is a number Number(variable) // convert to number or NaN String(variable) // convert to string
Data Type Number: 5, 5.125, NaN (just– Double) String: ‘Hello’, ‚Hello‛, ‚Hello ’World’ !‛, ‚\’a‛, ‚Hello‛World‛!‛
Boolean: true, false Object null, undefined
1/6/2012 15
![Page 16: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/16.jpg)
Introduction to JavaScript (cont.) Variable
Declare: var + varName; Name: abc ≠ Abc, $abc, _abc, a123, 1bcd, alert Assign: varName = value; Show values: alert(varName);
Operation: Boolean op: ==, != , ===, !==, >, < , >=, <=, &&, ||, ! Number op: 3 + 4, 3 / 4, 3 * 4, 3 – 4 String op: ‘abc’ + ‘def’; Mix: ‘12’ + 4 = ‘124’; +’123’ + 4 = 127; Number(‘123’) + 4 = 127; ‘12’ * 4 = 48;
Complex op: ++, --, *=, /=, +=, -= Ternary op: (condition) ? A : B
1/6/2012 16
![Page 17: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/17.jpg)
Introduction to JavaScript (cont.) Comment:
//this is a comment inline
/*
something to comment in many lines
*/
Array (List in real) Declare: var arr = [1, 2, 3]; or
var arr = new Array(1, 2, 3);
Access: arr[0];
Notes: Empty array: var arr = [];
Mix types: var arr = [1, 2, ‘abc’, true, [3, 4,5]];
1/6/2012 17
![Page 18: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/18.jpg)
Introduction to JavaScript (cont.) Array op:
1/6/2012 18
![Page 19: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/19.jpg)
Introduction to JavaScript (cont.) If Statement:
Switch Statement:
switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
if ( condition1 ) { // door #1 } else if (condition2) { // door #2 } else { // door #3 }
1/6/2012 19
![Page 20: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/20.jpg)
Introduction to JavaScript (cont.) While Statement: while (condition) { // javascript to repeat } Do while Statement: do { // javascript to repeat } while (condition) ; For Statement: for (var count = 0; count < MaxLoop; count++){
// javascript to repeat }
1/6/2012 20
![Page 21: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/21.jpg)
Introduction to JavaScript (cont’) Break Statement: while (condition) {
// javascript to repeat
if (i==3){
break;
}
}
Continue Statement: do {
if (i==3){
continue;
}
} while (condition) ;
For in Statement: for (variable in object){ code to be executed }
1/6/2012 21
![Page 22: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/22.jpg)
Introduction to JavaScript (cont.) Function: function functionName(parameters){
// the JavaScript you want to run
return value;
}
Anonymous function: (lambda function)
function (parameter1, parameter2){
// the JavaScript you want to run
return value;
}
1/6/2012 22
![Page 23: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/23.jpg)
Introduction to JavaScript (cont.) Global vs. local variable: var paramenter = 3;
function func1(){
alert(parameter); // alert(3)
var parameter = 5;
alert(parameter); // alert(5)
}
func1();
Try, catch, throws: try{ //Run some code here
throw ‚Error‛; } catch(err) { //Handle errors here }
Put variable as a reference definitions at the beginning of your script 1/6/2012 23
![Page 24: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/24.jpg)
How to work with JavaScript? Work with String:
Determine length of a string: strVar.length
Changing case of a string: strVar.toUpperCase()
or strVar.toLowerCase()
Searching String: strVar.indexOf(‘strSearch’)
Extract part of a String: strVar.slice(start, [end])
1/6/2012 24
![Page 25: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/25.jpg)
How to work with JavaScript? (cont.) Work with Regular Expression:
1/6/2012 25
![Page 26: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/26.jpg)
How to work with JavaScript? (cont.) Work with Regular Expression:
Useful Regex: U.S. Zip code:
U.S. Phone #:
Email Address:
Date:
Web Address:
1/6/2012 26
![Page 27: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/27.jpg)
How to work with JavaScript? (cont.) Work with Number:
JavaScript interpreter usually converts a string to a number when it seems like a number is called for. For example: but:
Number():
ParseInt():
ParseFloat():
Test a Number:
1/6/2012 27
![Page 28: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/28.jpg)
How to work with JavaScript? (cont.) Work with Number (next):
Math.round(), Math.ceil(), Math.floor():
Formatting currency:
Creating Random number:
Selecting random number:
Selecting randomly element of array:
1/6/2012 28
![Page 29: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/29.jpg)
How to work with JavaScript? (cont.) Work with Dates and Times:
Declare:
1/6/2012 29
![Page 30: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/30.jpg)
How to work with JavaScript? (cont.) Work with Dates and Times (next):
Getting the month:
Getting the Day of a week:
Creating Day other than today:
1/6/2012 30
![Page 31: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/31.jpg)
How to work with JavaScript? (cont.) Work with Dates and Times (next):
Getting the time format (e.g.: 12:03:59 a.m.):
1/6/2012 31
![Page 32: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/32.jpg)
Editor: Nguyễn Đức Minh Khôi
Email: [email protected]
HCMC University of Technology
@Jan, 2012
TRAINING JAVASCRIPT & jQUERY
![Page 33: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/33.jpg)
Content
Introduction to JavaScript
JavaScript – the basic
Getting Started with jQuery
jQuery in Action
Ajax, tips, tricks
1/6/2012 33
![Page 34: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/34.jpg)
Part3:Getting Started with jQuery
Selecting Element of a page
Attach an Event to Elements
Response Events by doing sth
1/6/2012 34
![Page 35: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/35.jpg)
Introduction to jQuery Why use jQuery?
Relatively small file size
Friendly to web designers
It’s tried and true
It’s free
Large developer community
Plugins
How to use? Link to jQuery file on CDN server: <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.m in.js"></script>
Download jQuery file: http://docs.jquery.com/Downloading_jQuery.
<script src="js/jquery-1.6.3.min.js"></script>
1/6/2012 35
![Page 36: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/36.jpg)
Introduction to jQuery (cont.) Some useful jQuery plugin:
jQuery-color: https://github.com/jquery/jquery-color
jQuery-easing: http://gsgd.co.uk/sandbox/jquery/easing/
JQuery-fancybox: http://fancybox.net/
JQuery-scrollTo: http://plug-ins.jquery.com/project/ScrollTo
jQuery-navigation: www.pollenizer.com/jquery-navigation-plugin/
jQuery-UI: http://jqueryui.com/download
jQuery-qTip: http://craigsworks.com/projects/qtip2/
jQuery Raty - A Star Rating: http://www.wbotelhos.com/raty/
jQuery Flickr: http://johnpatrickgiven.com/jquery/flickr-gallery/
jQuery-Ajax Form plugins: http://jquery.malsup.com/form/
jQuery-Ajax Autocomplete: http://jqueryui.com/demos/auto-complete/
jQuery-Ajax Uploadfile: http://www.uploadify.com/download/
jQuery-Ajax twitter: http://tweet.seaofclouds.com/
jQuery-Ajax Google Map: http://www.pittss.lv/jquery/gomap/
1/6/2012 36
![Page 37: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/37.jpg)
Selecting Element of a page Notes:
put your JavaScript programming (all your <script> tags) after any other content inside the <head> tag, but before the closing </head> tag.
<script>
$(document).ready(function() {
// your programming goes here
}); // end ready
</script>
Or use for short:
<script>
$(function() {
// your programming goes here
}); // end ready
</script>
1/6/2012 37
![Page 38: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/38.jpg)
Selecting Element of a page (cont.)
1/6/2012 38
![Page 39: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/39.jpg)
1/6/2012 39
![Page 40: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/40.jpg)
1/6/2012 40
![Page 41: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/41.jpg)
Selecting Element of a page (cont.) Select page element (examples)
Basic Selector (like CSS selector) Id selector: var messagePara = $('#message'); Tag selector: var linksList = $('a'); Class selector: var a = $('.submenu');
Advanced Selector Descendent selector: $('#navBar a') Child selector: $(‘body > p') Adjacent sibling selector: $('h2 + div') Attribute selector: $('img[alt]')
jQuery filter $('p:first'); $('p:last'); $('p:odd'); $('p:even');
$('a:not(.navButton)'); $('li:has(a)'); $('a:contains(Click Me!)'); $('div:hidden').show(); $('div:visible').show();
1/6/2012 41
![Page 42: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/42.jpg)
Selecting Element of a page (cont.) jQuery selection principles
Automatic loops: $('#slideshow img').hide();
Chaining function: $('#popUp').width(300).height(300);
Useful functions:
1/6/2012 42
![Page 43: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/43.jpg)
1/6/2012 43
![Page 44: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/44.jpg)
1/6/2012 44
![Page 45: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/45.jpg)
1/6/2012 45
![Page 46: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/46.jpg)
Selecting Element of a page (cont.) $('#errors').html();
$('#errors').html('<p>There are four errors in this form</p>');
$('#errors h2').text('No errors found');
$('#errors').append('<p>There are four errors in this form</p>');
$('#errors').prepend('<p>There are four errors in this form</p>');
$('#userName').after('<span class="error">User name required</span>');
$('#product101').replaceWith(<p>Added to cart</p>');
$('a[href^="http://"]').addClass('externalLink');
$('#alertBox').removeClass('highlight');
$('body').toggleClass('altStyle');
$('#main').css('background-color');
$('body').css('font-size', '200%');
var imageFile = $('#banner img').attr('src');
$('body').removeAttr('bgColor'); 1/6/2012 46
![Page 47: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/47.jpg)
Selecting Element of a page (cont.) Notes:
Changing Multiple CSS Properties at Once
Each function:
$(this): element loop through all elements.
1/6/2012 47
![Page 48: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/48.jpg)
Attach an Event to Elements Types of events:
1/6/2012 48
![Page 49: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/49.jpg)
1/6/2012 49
![Page 50: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/50.jpg)
1/6/2012 50
![Page 51: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/51.jpg)
1/6/2012 51
![Page 52: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/52.jpg)
Attach an Event to Elements (cont) Using Event – the jQuery Way:
1/6/2012 52
![Page 53: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/53.jpg)
Attach an Event to Elements- e.g.
1/6/2012 53
![Page 54: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/54.jpg)
Response Events by doing sth jQuery Effects:
1/6/2012 54
![Page 55: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/55.jpg)
Response Events by doing sth (cont.) Examples:
1/6/2012 55
![Page 56: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/56.jpg)
Response Events by doing sth (cont.) jQuery Animations:
Some attr are built-in (no need plugins)
Some attr need plugins: jquery-color: https://github.com/jquery/jquery-color
jquery-easing: http://gsgd.co.uk/sandbox/jquery/easing/
How to use:
1/6/2012 56
![Page 57: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/57.jpg)
Notes: with hyphens: in CSS use 1 of these:
can use += or -= in CSS attr:
No use shorthands:
Response Events by doing sth (cont.)
1/6/2012 57
![Page 58: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/58.jpg)
Response Events by doing sth (cont.) Using Easing:
Callback function: a function that runs only after the effect is completed.
1/6/2012 58
![Page 59: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/59.jpg)
Editor: Nguyễn Đức Minh Khôi
Email: [email protected]
HCMC University of Technology
@Jan, 2012
TRAINING JAVASCRIPT & jQUERY
![Page 60: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/60.jpg)
Content
Introduction to JavaScript
JavaScript – the basic
Getting Started with jQuery
jQuery in Action
Ajax, tips, tricks
1/6/2012 60
![Page 61: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/61.jpg)
Part3: jQuery in Action
Improving your images
Improving navigation
Enhancing Web forms
Expanding your interfaces
1/6/2012 61
![Page 62: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/62.jpg)
jQuery in Action Notes:
var newPara = $(‘<p>Hello</p>’) creates a new paragraph tag containing the word Hello.
var $banner = $('#banner'); The dollar sign reminds you that the variable holds a jQuery selection and not just any old value like a number or a string. This part is just giving you some basic techniques to do with
jQuery, for more information, you should lookup some tutorial in the main reference book “Java-jQuery the Missing Manual” - Part 3. This will give you more clearly about this techniques. And practice some tutorials in this books for conquer the idea.
You should download and see the usage of the plugins in listed in the slide #34 of this slides.
1/6/2012 62
![Page 63: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/63.jpg)
Improving your images Changing an Image’s src Attribute:
Preloading Images
tells the web browser to actually download the new image
1/6/2012 63
![Page 64: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/64.jpg)
Improving your images (cont.) Rollover images:
Just an image swap triggered by the mouse moving over an image
1/6/2012 64
![Page 65: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/65.jpg)
Improving navigation Open External links in new Windows:
location.protocol stores the object’s protocol property like http or https
location.hostname stores the object’s host name like www.google.com
The not() function is a useful way of excluding some elements from a jQuery selection
Creating new Windows:
to close:
1/6/2012 65
![Page 66: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/66.jpg)
Improving navigation (cont.) Opening page within a page – fancy box plugin
Navigation Bar Plugin
1/6/2012 66
![Page 67: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/67.jpg)
Enhancing Web Forms Getting and Setting Form value Element:
Determining Whether Buttons and Boxes Are Checked
Form events:
Submit: validate
Username is input
Don’t do that or not follow that
links
1/6/2012 67
![Page 68: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/68.jpg)
Enhancing Web Forms (Cont.) Focus: (input text, default value will disappear)
Blur: (check recently input box is correct)
Click:
Change:
1/6/2012 68
![Page 69: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/69.jpg)
Enhancing Web Forms (cont.) Adding smart to your form:
Focus the first field in the form:
Disabling and Enabling Fields:
Hiding and Showing form option:
1/6/2012 69
![Page 70: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/70.jpg)
Enhancing Web Forms (cont.) Form validation plugin
Basic validation:
Adding validation rules:
Adding Error message:
Advanced validation: (see more at the book)
1/6/2012 70
![Page 71: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/71.jpg)
Expanding your Interface Organizing Information in Tabbed Panel
Adding a Content Slider to Your site
Determining the Size and Position of Page Element
Adding Tooltips
(See more at the book)
1/6/2012 71
![Page 72: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/72.jpg)
Editor: Nguyễn Đức Minh Khôi
Email: [email protected]
HCMC University of Technology
@Jan, 2012
TRAINING JAVASCRIPT & jQUERY
![Page 73: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/73.jpg)
Content
Introduction to JavaScript
JavaScript – the basic
Getting Started with JQuery
JQuery in Action
Ajax, tips, tricks
1/6/2012 73
![Page 74: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/74.jpg)
Part3:Ajax, Tips and Tricks
What is Ajax?
JSON
Tips and tricks
1/6/2012 74
![Page 75: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/75.jpg)
What is Ajax? stands for Asynchronous JavaScript and XML
not an “official” technology like HTML, JavaScript, or CSS.
refers to the interaction of a mix of technologies—JavaScript, the web browser, and the web server—to retrieve and display new content without loading a new web page
What you can do with Ajax:
Display new HTML content without reloading the page
Submit a form and instantly display results
Log in without leaving the page
Star-rating widget
Browsing through database information.
1/6/2012 75
![Page 76: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/76.jpg)
What is Ajax? (cont.) Know more about web server:
Web server: stores documents and when a web browser asks for a document, the web server delivers it. (Apache, IIS,…)
Web application: understands a server-side programming language like PHP, Java, Ruby, Python. perform tasks that aren’t possible with only an HTML page, like sending email, storing information in a database.
Web database: store information like the names and addresses of customers, details of products you sell, or an archive of your favorite recipes. (e.g.: MySQL, PostgreSQL, SQL Server…
1/6/2012 76
![Page 77: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/77.jpg)
What is Ajax? (cont.) How does Ajax work?
1/6/2012 77
![Page 78: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/78.jpg)
What is Ajax? (cont.) Ajax talks with sever:
Create an instance of the XMLHttpRequest object.
var newXHR = new XMLHttpRequest();
Use the XHR’s open() method to specify what kind of data you’ll send and where the data will go
newXHR.open('GET', 'shop.php?productID=34');
Create a function to handle the results: use callback function
Send the request
newXHR.send('q=javascript');
Receive the response
1/6/2012 78
![Page 79: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/79.jpg)
What is Ajax? (cont.) Ajax – the jQuery way:
1/6/2012 79
![Page 80: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/80.jpg)
What is Ajax? (cont.) Ajax – the jQuery way:
Use .load() function:
Use: get HTML from a web server and inject it into a page.
Notes: Just use root-relative links, or make sure the file you load is located in the same directory as the page that’s using the load() function.
Use .get() and .post() function:
When you get(): when you want to get information, like requesting
the price of a particular product or obtaining a list of most popular products.
When use post(): when sending data that will change information on the server, like a request to delete a file, update a database, or insert new information into a database.
1/6/2012 80
![Page 81: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/81.jpg)
What is Ajax? (cont.) Query String:
Notes: have to escape and encode query string, like:
Object Literal:
jQuery Serialize function(): collects all of the field names and the values currently in each field and creates a single query string.
Processing data from Server:
Handling Error:
1/6/2012 81
![Page 82: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/82.jpg)
What is Ajax? (cont.)
data could be plain text, HTML, XML, or JSON
1/6/2012 82
![Page 83: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/83.jpg)
JSON Stands for JavaScript Object Notation
is usually better than XML;
JSON is JavaScript, it works quickly and easily in JavaScript program.
getJSON() function:
1/6/2012 83
![Page 84: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/84.jpg)
JSON (cont.) Access JSON Data:
Simple data:
Complex data:
1/6/2012 84
![Page 85: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/85.jpg)
JSONP b/c Ajax requests are limited to the same domain.
stands for JSON with padding. provides one way to retrieve information from another site.
Ajax request of the foreign site, you load a script that contains the JSON code in it. Or linking to an external JavaScript file on Google.
For example:
1/6/2012 85
![Page 86: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/86.jpg)
Tips and tricks Useful tips:
$() Is the Same as jQuery()
like
Saving selections into variables
Or use chaining:
Instead of :
Putting reference in variable:
1/6/2012 86
![Page 87: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/87.jpg)
Tips and tricks (cont.) Adding contents few times as possible
Use:
Optimize your selector: Use ID selectors if at all possible.
Use IDs first, as part of a descendent selector.
Use find function:
NOT
1/6/2012 87
![Page 88: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/88.jpg)
Tips and tricks (cont.) Using the jQuery docs efficiently:
http://docs.jquery.com/ (especially the jQuery API)
Compress your JavaScript and other file before deploy your website: http://developer.yahoo.com/yui/compressor
Use firebug – Firefox plugin debugger efficiently
http://www.youtube.com/watch?v=1rfiPaWz4No
jQuery plugin site: http://plugins.jquery.com/
jQuery UI site: http://jqueryui.com
1/6/2012 88
![Page 89: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/89.jpg)
Conclusion
JavaScript is great, but it is also
difficult for you to conquer, you
should use jQuery instead!
jQuery isn’t only about simpler code and being more productive.
It is also about great community, support, tutorials, plugins, open (free) license, test coverage books, speed, light weight code
Keep the jQuery cheat sheet beside you when working with jQuery
Practice the tutorial in main reference book!
1/6/2012 89
![Page 90: Training javascript 2012 hcmut](https://reader034.vdocument.in/reader034/viewer/2022042714/554bbfe6b4c90530298b4fda/html5/thumbnails/90.jpg)
References JavaScript and jQuery the missing manual, 2nd Edition
2011- David Sawyer McFarland
JavaScript 1.6 Visual Cheat Sheet
Suggest Reading jQuery in Actions by Bear Bibeault and Yehuda Katz
Head First JavaScript by Michael Morrison (O’Reilly)
1/6/2012 90