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

Java scriptforjavadev part2a

on

  • 342 views

 

Statistics

Views

Total Views
342
Views on SlideShare
342
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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