Your SlideShare is downloading. ×
Training javascript 2012 hcmut
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Training javascript 2012 hcmut

3,091
views

Published on

This slide trains about JavaScript in jQuery Approach.

This slide trains about JavaScript in jQuery Approach.

Published in: Education, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,091
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
143
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  • 2. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks2 1/6/2012
  • 3. Part1: Introduction to JavaScript What is JavaScript and JQuery? The Web World Software for JavaScript programming3 1/6/2012
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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/en8 1/6/2012
  • 9. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  • 10. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks10 1/6/2012
  • 11. Part2: JavaScript – the Basics Introduction to JavaScript How to work with JavaScript11 1/6/2012
  • 12. Introduction to JavaScript  How to add JS to a page: Notes: if you use HTML earlier than HTML5 should:12 1/6/2012
  • 13. 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
  • 14. 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.asp14 1/6/2012
  • 15. 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  Object15  null, undefined 1/6/2012
  • 16. 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 : B16 1/6/2012
  • 17. 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]];17 1/6/2012
  • 18. Introduction to JavaScript (cont.)  Array op:18 1/6/2012
  • 19. Introduction to JavaScript (cont.)  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 219 1/6/2012 }
  • 20. 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 }20 1/6/2012
  • 21. 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 }21 1/6/2012
  • 22. 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; }22 1/6/2012
  • 23. 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 script23 1/6/2012
  • 24. 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
  • 25. How to work with JavaScript? (cont.)  Work with Regular Expression:25 1/6/2012
  • 26. How to work with JavaScript? (cont.)  Work with Regular Expression:  Useful Regex:  U.S. Zip code:  U.S. Phone #:  Email Address:  Date:  Web Address:26 1/6/2012
  • 27. 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:27 1/6/2012
  • 28. 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:28 1/6/2012
  • 29. How to work with JavaScript? (cont.)  Work with Dates and Times:  Declare:29 1/6/2012
  • 30. 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:30 1/6/2012
  • 31. How to work with JavaScript? (cont.)  Work with Dates and Times (next):  Getting the time format (e.g.: 12:03:59 a.m.):31 1/6/2012
  • 32. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  • 33. Content Introduction to JavaScript JavaScript – the basic Getting Started with jQuery jQuery in Action Ajax, tips, tricks33 1/6/2012
  • 34. Part3:Getting Started with jQuery Selecting Element of a page Attach an Event to Elements Response Events by doing sth34 1/6/2012
  • 35. 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
  • 36. 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
  • 37. 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 ready37 </script> 1/6/2012
  • 38. Selecting Element of a page (cont.)38 1/6/2012
  • 39. 39 1/6/2012
  • 40. 40 1/6/2012
  • 41. 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();41 1/6/2012
  • 42. Selecting Element of a page (cont.)  jQuery selection principles  Automatic loops: $(#slideshow img).hide();  Chaining function: $(#popUp).width(300).height(300);  Useful functions:42 1/6/2012
  • 43. 43 1/6/2012
  • 44. 44 1/6/2012
  • 45. 45 1/6/2012
  • 46. 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);46 $(body).removeAttr(bgColor); 1/6/2012
  • 47. Selecting Element of a page (cont.)  Notes:  Changing Multiple CSS Properties at Once  Each function: $(this): element loop through all elements.47 1/6/2012
  • 48. Attach an Event to Elements  Types of events:48 1/6/2012
  • 49. 49 1/6/2012
  • 50. 50 1/6/2012
  • 51. 51 1/6/2012
  • 52. Attach an Event to Elements (cont)  Using Event – the jQuery Way:52 1/6/2012
  • 53. Attach an Event to Elements- e.g.53 1/6/2012
  • 54. Response Events by doing sth  jQuery Effects:54 1/6/2012
  • 55. Response Events by doing sth (cont.)  Examples:55 1/6/2012
  • 56. 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:56 1/6/2012
  • 57. Response Events by doing sth (cont.)  Notes:  with hyphens: in CSS use 1 of these:  can use += or -= in CSS attr:  No use shorthands:57 1/6/2012
  • 58. Response Events by doing sth (cont.)  Using Easing:  Callback function: a function that runs only after the effect is completed.58 1/6/2012
  • 59. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  • 60. Content Introduction to JavaScript JavaScript – the basic Getting Started with jQuery jQuery in Action Ajax, tips, tricks60 1/6/2012
  • 61. Part3: jQuery in Action Improving your images Improving navigation Enhancing Web forms Expanding your interfaces61 1/6/2012
  • 62. 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
  • 63. Improving your images  Changing an Image’s src Attribute: tells the web browser to actually download the new image  Preloading Images63 1/6/2012
  • 64. Improving your images (cont.)  Rollover images:  Just an image swap triggered by the mouse moving over an image64 1/6/2012
  • 65. 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
  • 66. Improving navigation (cont.)  Opening page within a page – fancy box plugin  Navigation Bar Plugin66 1/6/2012
  • 67. 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 input67 1/6/2012
  • 68. Enhancing Web Forms (Cont.)  Focus: (input text, default value will disappear)  Blur: (check recently input box is correct)  Click:  Change:68 1/6/2012
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  • 73. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks73 1/6/2012
  • 74. Part3:Ajax, Tips and Tricks What is Ajax? JSON Tips and tricks74 1/6/2012
  • 75. 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
  • 76. 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
  • 77. What is Ajax? (cont.)  How does Ajax work?77 1/6/2012
  • 78. 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 response78 1/6/2012
  • 79. What is Ajax? (cont.)  Ajax – the jQuery way:79 1/6/2012
  • 80. 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, or80 insert new information into a database. 1/6/2012
  • 81. 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:81 1/6/2012
  • 82. What is Ajax? (cont.) data could be plain text, HTML, XML, or JSON82 1/6/2012
  • 83. 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
  • 84. JSON (cont.)  Access JSON Data:  Simple data:  Complex data:84 1/6/2012
  • 85. 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
  • 86. 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
  • 87. 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
  • 88. 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.com88 1/6/2012
  • 89. 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
  • 90. 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
  • 91. Thanks for your watching! Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com

×