Training javascript 2012 hcmut

TRAINING JAVASCRIPT & jQUERY

Editor: Nguyễn Đức Minh Khôi
Email: nguyenducminhkhoi@gmail.com
HCMC University of Technology
@Jan, 2012

Content
Introduction to JavaScript

JavaScript – the basic

Getting Started with JQuery

JQuery in Action

Ajax, tips, tricks

2 1/6/2012

Part1: Introduction to JavaScript

What is JavaScript and JQuery?

The Web World

Software for JavaScript programming

3 1/6/2012

What is JavaScript?
 JavaScript is a programming language that lets you
supercharge your HTML with animation, interactivity,
and dynamic visual effects.

4 1/6/2012

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.

5 1/6/2012

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!

6 1/6/2012

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.
7 1/6/2012

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/downl
oad/
 Mamp Server for Mac: www.mamp.info/en

8 1/6/2012

Content



JQuery in Action

Ajax, tips, tricks

10 1/6/2012

Part2: JavaScript – the Basics


How to work with JavaScript

11 1/6/2012

 How to add JS to a page:

Notes: if you use HTML earlier than HTML5 should:

12 1/6/2012

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.

13 1/6/2012

 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

14 1/6/2012

 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
15  null, undefined 1/6/2012

 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

16 1/6/2012

 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]];

17 1/6/2012

 Array op:

18 1/6/2012

 If Statement: if ( condition1 ) {
// door #1
} else if (condition2) {
// door #2
} else {
// door #3
}
 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
19 1/6/2012
}

 While Statement:
while (condition) {
// javascript to repeat
}
 Do while Statement:
do {
} while (condition) ;
 For Statement:
for (var count = 0; count < MaxLoop; count++){
}

20 1/6/2012

Introduction to JavaScript (cont’)
 Break Statement:
while (condition) {
if (i==3){
break;
}
}
 Continue Statement:
do {
if (i==3){
continue;
}
} while (condition) ;
 For in Statement:
for (variable in object){
code to be executed
}
21 1/6/2012

 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;
}

22 1/6/2012

 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
23 1/6/2012

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])

24 1/6/2012

How to work with JavaScript? (cont.)
 Work with Regular Expression:

25 1/6/2012

 Work with Regular Expression:
 Useful Regex:
 U.S. Zip code:

 U.S. Phone #:

 Email Address:

 Date:

 Web Address:

26 1/6/2012

 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:

27 1/6/2012

 Work with Number (next):
 Math.round(), Math.ceil(), Math.floor():

 Formatting currency:

 Creating Random number:

 Selecting random number:

 Selecting randomly element of array:

28 1/6/2012

 Work with Dates and Times:
 Declare:

29 1/6/2012

 Work with Dates and Times (next):
 Getting the month:

 Getting the Day of a week:

 Creating Day other than today:

30 1/6/2012

 Work with Dates and Times (next):
 Getting the time format (e.g.: 12:03:59 a.m.):

31 1/6/2012

Content


Getting Started with jQuery

jQuery in Action

Ajax, tips, tricks

33 1/6/2012

Part3:Getting Started with jQuery

Selecting Element of a page

Attach an Event to Elements

Response Events by doing sth

34 1/6/2012

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>
35 1/6/2012

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/
36
 jQuery-Ajax Google Map: http://www.pittss.lv/jquery/gomap/ 1/6/2012

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
37 </script> 1/6/2012

Selecting Element of a page (cont.)

38 1/6/2012

 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();

41 1/6/2012

 jQuery selection principles
 Automatic loops: $('#slideshow img').hide();
 Chaining function: $('#popUp').width(300).height(300);
 Useful functions:

42 1/6/2012

 $('#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');

46 $('body').removeAttr('bgColor'); 1/6/2012

 Notes:
 Changing Multiple CSS Properties at Once

 Each function:

$(this): element
loop through all
elements.

47 1/6/2012

Attach an Event to Elements
 Types of events:

48 1/6/2012

Attach an Event to Elements (cont)
 Using Event – the jQuery Way:

52 1/6/2012

Attach an Event to Elements- e.g.

53 1/6/2012

Response Events by doing sth
 jQuery Effects:

54 1/6/2012

Response Events by doing sth (cont.)
 Examples:

55 1/6/2012

 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:

56 1/6/2012

 Notes:
 with hyphens: in CSS use 1 of these:

 can use += or -= in CSS attr:

 No use shorthands:

57 1/6/2012

 Using Easing:

 Callback function: a
function that runs
only after the effect
is completed.

58 1/6/2012

Content


Getting Started with jQuery

jQuery in Action

Ajax, tips, tricks

60 1/6/2012

Part3: jQuery in Action
Improving your images

Improving navigation

Enhancing Web forms

Expanding your interfaces

61 1/6/2012

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.

62 1/6/2012

Improving your images
 Changing an Image’s src Attribute:

tells the web browser to actually
download the new image

 Preloading Images

63 1/6/2012

Improving your images (cont.)
 Rollover images:
 Just an image swap triggered by the mouse moving over
an image

64 1/6/2012

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:

65 1/6/2012

Improving navigation (cont.)
 Opening page within a page – fancy box plugin

 Navigation Bar Plugin

66 1/6/2012

Enhancing Web Forms
 Getting and Setting Form value Element:

 Determining Whether Buttons and Boxes Are Checked

Don’t do that or
not follow that
links
 Form events:
 Submit: validate
Username is input

67 1/6/2012

Enhancing Web Forms (Cont.)
 Focus: (input text, default value will disappear)

 Blur: (check recently input box is correct)

 Click:

 Change:

68 1/6/2012

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:

69 1/6/2012

Enhancing Web Forms (cont.)
 Form validation plugin
 Basic validation:
 Adding validation rules:

 Adding Error message:

 Advanced validation: (see more at the book)

70 1/6/2012

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)

71 1/6/2012

Content



JQuery in Action

Ajax, tips, tricks

73 1/6/2012

Part3:Ajax, Tips and Tricks
What is Ajax?

JSON

Tips and tricks

74 1/6/2012

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.

75 1/6/2012

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…

76 1/6/2012

 How does Ajax work?

77 1/6/2012

 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

78 1/6/2012

 Ajax – the jQuery way:

79 1/6/2012

 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
80 insert new information into a database. 1/6/2012

 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:
81 1/6/2012


data could be plain
text, HTML, XML,
or JSON

82 1/6/2012

JSON
 Stands for JavaScript Object Notation
 is usually better than XML;
 JSON is JavaScript, it works quickly and easily in
JavaScript program.

 getJSON() function:

83 1/6/2012

JSON (cont.)
 Access JSON Data:
 Simple data:

 Complex data:

84 1/6/2012

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:

85 1/6/2012

Tips and tricks
 Useful tips:
 $() Is the Same as jQuery()
like
 Saving selections into variables

 Or use chaining:

 Instead of :

 Putting reference in variable:

86 1/6/2012

Tips and tricks (cont.)
 Adding contents few times as possible

NOT

 Use:

 Optimize your selector:
 Use ID selectors if at all possible.
 Use IDs first, as part of a descendent selector.
 Use find function:

87 1/6/2012

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

88 1/6/2012

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!
89 1/6/2012

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)

90 1/6/2012

Thanks for your watching!

Editor: Nguyễn Đức Minh Khôi
Email: nguyenducminhkhoi@gmail.com

Training javascript 2012 hcmut

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Training javascript 2012 hcmut (20)

More from University of Technology (10)

Recently uploaded (20)

Training javascript 2012 hcmut