• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Java scriptforjavadev part2a

Java scriptforjavadev part2a






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Java scriptforjavadev part2a Java scriptforjavadev part2a Presentation Transcript

    • 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 How to Optimize JS
    • 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 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.
    • 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);
    • 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
    • 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
    • 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>
    • 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
    • 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
    • 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
    • Page Optimization Part4 Mak Bhatamrekar
    • 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
    • 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
    • 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
    • Page Optimze Tools Yslow  Firefox plugin  It analyzes web pages and suggests ways to improve performance Google page speed  Firefox plugin
    • 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
    • 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  Works in FF only Chrome also has a Javascript console IE also has a Web developer plugin
    • 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 Good to Rest APIs, to see Request and Response
    • Thank YouNote : Make sure you try out all these hands on to have abetter understanding.Thank You