Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Training javascript 2012 hcmut

5,028 views

Published on

This slide trains about JavaScript in jQuery Approach.

Published in: Education, Technology
  • Be the first to comment

Training javascript 2012 hcmut

  1. 1. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  2. 2. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks2 1/6/2012
  3. 3. Part1: Introduction to JavaScript What is JavaScript and JQuery? The Web World Software for JavaScript programming3 1/6/2012
  4. 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. 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. 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. 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. 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. 9. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  10. 10. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks10 1/6/2012
  11. 11. Part2: JavaScript – the Basics Introduction to JavaScript How to work with JavaScript11 1/6/2012
  12. 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. 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. 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. 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. 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. 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. 18. Introduction to JavaScript (cont.)  Array op:18 1/6/2012
  19. 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. 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. 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. 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. 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. 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. 25. How to work with JavaScript? (cont.)  Work with Regular Expression:25 1/6/2012
  26. 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. 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. 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. 29. How to work with JavaScript? (cont.)  Work with Dates and Times:  Declare:29 1/6/2012
  30. 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. 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. 32. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  33. 33. Content Introduction to JavaScript JavaScript – the basic Getting Started with jQuery jQuery in Action Ajax, tips, tricks33 1/6/2012
  34. 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. 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. 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. 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. 38. Selecting Element of a page (cont.)38 1/6/2012
  39. 39. 39 1/6/2012
  40. 40. 40 1/6/2012
  41. 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. 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. 43 1/6/2012
  44. 44. 44 1/6/2012
  45. 45. 45 1/6/2012
  46. 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. 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. 48. Attach an Event to Elements  Types of events:48 1/6/2012
  49. 49. 49 1/6/2012
  50. 50. 50 1/6/2012
  51. 51. 51 1/6/2012
  52. 52. Attach an Event to Elements (cont)  Using Event – the jQuery Way:52 1/6/2012
  53. 53. Attach an Event to Elements- e.g.53 1/6/2012
  54. 54. Response Events by doing sth  jQuery Effects:54 1/6/2012
  55. 55. Response Events by doing sth (cont.)  Examples:55 1/6/2012
  56. 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. 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. 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. 59. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  60. 60. Content Introduction to JavaScript JavaScript – the basic Getting Started with jQuery jQuery in Action Ajax, tips, tricks60 1/6/2012
  61. 61. Part3: jQuery in Action Improving your images Improving navigation Enhancing Web forms Expanding your interfaces61 1/6/2012
  62. 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. 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. 64. Improving your images (cont.)  Rollover images:  Just an image swap triggered by the mouse moving over an image64 1/6/2012
  65. 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. 66. Improving navigation (cont.)  Opening page within a page – fancy box plugin  Navigation Bar Plugin66 1/6/2012
  67. 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. 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. 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. 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. 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. 72. TRAINING JAVASCRIPT & jQUERY Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com HCMC University of Technology @Jan, 2012
  73. 73. Content Introduction to JavaScript JavaScript – the basic Getting Started with JQuery JQuery in Action Ajax, tips, tricks73 1/6/2012
  74. 74. Part3:Ajax, Tips and Tricks What is Ajax? JSON Tips and tricks74 1/6/2012
  75. 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. 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. 77. What is Ajax? (cont.)  How does Ajax work?77 1/6/2012
  78. 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. 79. What is Ajax? (cont.)  Ajax – the jQuery way:79 1/6/2012
  80. 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. 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. 82. What is Ajax? (cont.) data could be plain text, HTML, XML, or JSON82 1/6/2012
  83. 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. 84. JSON (cont.)  Access JSON Data:  Simple data:  Complex data:84 1/6/2012
  85. 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. 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. 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. 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. 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. 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. 91. Thanks for your watching! Editor: Nguyễn Đức Minh KhôiEmail: nguyenducminhkhoi@gmail.com

×