JavaScript Essentials For Java Dev Part2            Mak Bhatamrekar    http://www.meetup.com/my-ajcp/
Agenda & Checklist JS Development Tools Part1 - Core Javascript Concepts Part2 - JSON and JS Classes JQuery & Ajax Ho...
JavaScript                          Part 2 JS Object literal Core Objects JSON JS Classes
JS Object literalhttp://jsfiddle.net/4JYQH/4/Allows you to Create a Object without a ClassRemember   this keyword represe...
Predefined Core Objects   https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects   http://www...
Predefined Core ObjectsObject    Imp PropertiesMath      Math.abs(-57) - returns the abs value 57          Math.max(5,10) ...
Predefined Core ObjectsObject    Imp PropertiesGlobal    eval() – evaluates a string and executes the script code         ...
JSON.org – Douglas CrockfordObject               DescJava Script Object Notation. Lightweight, Lang Neutral, date intercha...
JavaScripts Classeshttp://jsfiddle.net/mbhatamb/d9WqV/2/By convention, function with upper caseletter is a constructor fun...
JS Classes    hasOwnProperty() – check to see if the property is its        own than shared from prototype or object memb...
Interview Questions Can I add methods to Prototype class,after a instance  has been created What will happen if I direct...
Page Optimization     Part4          Mak Bhatamrekar
Page Optimize ? http://developer.yahoo.com/performance/rules.html Load CSS on top and Javascripts on bottom Minimize HT...
Page Optimize contd Add Expires Cache Control Header   For static components – never expire   For dynamic – appropriate...
JS Optimization Minimize DOM Access   Cache references to accessed elements   Update nodes offline and then add them to...
Page Optimze Tools Yslow   Firefox plugin   It analyzes web pages and suggests ways to improve    performance Google p...
Thank YouInterview Questions How will you optimize your websites ? Challenges faced, you can mention javascript  optimiz...
Dev Env Project setups using Eclipse IDE Firebug Debugging Fast development with JSFiddle Fiddler HTTP Proxy
Firebug Firefox plugin Allows to   Edit Html and CSS content   Debug Javascript by setting Regular breakpoints   Work...
JSFiddle.net Faster development of POC snippets Run Test and Share Good for Interview Prep
HTTP Proxy - Fiddler Intercepts the calls between your browser to external  world Enables to analyze the CALL in detail...
Thank YouNote : Make sure you try out all these hands on to have abetter understanding.Thank You
Upcoming SlideShare
Loading in …5
×

Java scriptforjavadev part2a

572 views
500 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java scriptforjavadev part2a

  1. 1. JavaScript Essentials For Java Dev Part2 Mak Bhatamrekar http://www.meetup.com/my-ajcp/
  2. 2. Agenda & Checklist JS Development Tools Part1 - Core Javascript Concepts Part2 - JSON and JS Classes JQuery & Ajax How to Optimize JS
  3. 3. JavaScript Part 2 JS Object literal Core Objects JSON JS Classes
  4. 4. JS Object literalhttp://jsfiddle.net/4JYQH/4/Allows you to Create a Object without a ClassRemember  this keyword represents the object internally  delete allows to delete prop dynamically, very useful when deleting unwanted prop before returning a object  Properties/methods can be added and deleted dynamically  Properties can be accessed with .(dot) or [“aprop”] notation. In fact, non standard prop names can be accessed [ ] notation only.
  5. 5. Predefined Core Objects https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects http://www.w3schools.com/jsref/Object Imp MethodsArray push – adds elem to end of array & returns resulting length pop – removes last elem and returns resulting array join(delim) – joins all elements of an array into string sort – sorts the elements of an Array Indexof – searches and returns the first matchDate var dateObjectName = new Date(1995, 11, 31, 23, 59, 59]); var now = new Date(); Set – e.g now.setHours(22); Get – e.g now.getHours(); parse – parse date strings e.g Date.parse(02.02.1999);
  6. 6. Predefined Core ObjectsObject Imp PropertiesMath Math.abs(-57) - returns the abs value 57 Math.max(5,10) – returns 10 Math.min(5,10) – returns 5 Math.random() – random number between 0 to 1String prototype – property to add properties and methods to object substring() – extracts chars from string with specified begin and end index indexof() – returns index of the first occurrence of a char split() – splits into an array of substringsGlobal eval() – evaluates a string and executes the script code. Codes can be injected this way. Eval is not Evil on client side. isNaN() – determines if a value is illegal number parseInt() – converts a string to number. escape() – encodes a string. Needed before you pass it over the wire for you REST calls, as data will have spaces
  7. 7. Predefined Core ObjectsObject Imp PropertiesGlobal eval() – evaluates a string and executes the script code isNaN() – determines if a value is illegal number parseInt() – converts a string to number. escape() – encodes a string. Needed before you pass it over the wire for you REST calls, as data will have spaces and special chars. E.g escape("Need tips?) // Need%20tips%3F Unescape() – decodes the encoded string
  8. 8. JSON.org – Douglas CrockfordObject DescJava Script Object Notation. Lightweight, Lang Neutral, date interchange formatnative to Javascript.{"firstName":"john","lastName":"doe","myCars":["Saab","Volvo","BMW"]}Format isJSON standardized by Douglas Crockfordhttp://jsfiddle.net/mbhatamb/F9rGz/JSON Vs XML • Very compact / XML is verbose • Native to JavaScript /XML is not. • Both are Human readable • Unlike XML there is not Schema on JSON only data.<employee> {“employee”:{“name”:”john”}}<name> john</name></employee>
  9. 9. JavaScripts Classeshttp://jsfiddle.net/mbhatamb/d9WqV/2/By convention, function with upper caseletter is a constructor function, andshould be invoked with a new Keyword to create objects Use new keyword while creating object, else this keyword inside your class will not belong to the new object. Use this keyword while defining members. instanceof keyword can be used to check the class of an object like Java Constructor functions automatically return the Objects created prototype is a special property- allows you to extend your class with prop and methods. prototype also is used to add more methods to class anytime but applies to all objects after it is created. Prototype is special property
  10. 10. JS Classes  hasOwnProperty() – check to see if the property is its own than shared from prototype or object members.  toString() – is inherent method of Object prototype.  Call and apply – are way any method can be invoked as static equivalents.careerInJava.com
  11. 11. Interview Questions Can I add methods to Prototype class,after a instance has been created What will happen if I directly define methods inside the Javascript class function itself rather than prototype How do you create a Object in javascript. Will it throw an error if I don’t create an object without new keyword? JSON why ? Its Importance
  12. 12. Page Optimization Part4 Mak Bhatamrekar
  13. 13. Page Optimize ? http://developer.yahoo.com/performance/rules.html Load CSS on top and Javascripts on bottom Minimize HTTP Requests  Combining JS files  Image Maps – combine images  CSS Sprites – combine images and use background-image and background-position  CSS3 supports Image gradient Externalize JS and CSS  This allows browsers to cache files Minifiy Javascript and CSS  Use minified versions to reduce size  Flip side : cannot debug so only use on production
  14. 14. Page Optimize contd Add Expires Cache Control Header  For static components – never expire  For dynamic – appropriate cache control header Use CDN  Closer to the user  Using CDN like google, chances already has those javascript libraries
  15. 15. JS Optimization Minimize DOM Access  Cache references to accessed elements  Update nodes offline and then add them to tree Develop Smart event handlers  E.g instead of listening to event on each table cell, listen to the table event, as event always bubbles to the parent
  16. 16. Page Optimze Tools Yslow  Firefox plugin  It analyzes web pages and suggests ways to improve performance Google page speed  Firefox plugin
  17. 17. Thank YouInterview Questions How will you optimize your websites ? Challenges faced, you can mention javascript optimizations done like the event optimization Tools used?Thank you
  18. 18. Dev Env Project setups using Eclipse IDE Firebug Debugging Fast development with JSFiddle Fiddler HTTP Proxy
  19. 19. Firebug Firefox plugin Allows to  Edit Html and CSS content  Debug Javascript by setting Regular breakpoints  Works in FF only Chrome also has a Javascript console IE also has a Web developer plugin
  20. 20. JSFiddle.net Faster development of POC snippets Run Test and Share Good for Interview Prep
  21. 21. HTTP Proxy - Fiddler Intercepts the calls between your browser to external world Enables to analyze the CALL in detail Good to Rest APIs, to see Request and Response
  22. 22. Thank YouNote : Make sure you try out all these hands on to have abetter understanding.Thank You

×