JavaScript Essentials For Java Dev Part2

Mak Bhatamrekar http://www.meetup.com/my-ajcp/

Agenda & ChecklistJS Development Tools

Part1 - Core Javascript Concepts

Part2 - JSON and JS Classes

JQuery & Ajax

How to Optimize JS

JavaScriptPart 2

JS Object literal

Core Objects

JSON

JS Classes

JS Object literal

http://jsfiddle.net/4JYQH/4/

Allows you to Create a Object without a Class

Remember 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 Methods

Array 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 ArrayIndexof – searches and returns the first match

Date 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 Objects Object Imp Properties

Math Math.abs(-57) - returns the abs value 57Math.max(5,10) – returns 10Math.min(5,10) – returns 5Math.random() – random number between 0 to 1

String prototype – property to add properties and methods to objectsubstring() – extracts chars from string with specified begin and end indexindexof() – returns index of the first occurrence of a charsplit() – splits into an array of substrings

Global 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 numberparseInt() – 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%3FUnescape() – decodes the encoded string

Predefined Core ObjectsObject Imp Properties

Global eval() – evaluates a string and executes the script codeisNaN() – determines if a value is illegal numberparseInt() – 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%3FUnescape() – decodes the encoded string

JSON.org – Douglas Crockford Object Desc

Java Script Object Notation. Lightweight, Lang Neutral, date interchange format native 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><name> john</name></employee>

{“employee”:{“name”:”john”}}

JavaScripts Classeshttp://jsfiddle.net/mbhatamb/d9WqV/2/

By convention, function with upper caseletter is a constructor function, and should 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

careerInJava.com

JS ClasseshasOwnProperty() – 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.

Interview QuestionsCan 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 OptimizationPart4

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 HeaderFor static components – never expireFor dynamic – appropriate cache control header

Use CDNCloser to the userUsing CDN like google, chances already has those

javascript libraries

JS OptimizationMinimize DOM Access

Cache references to accessed elementsUpdate nodes offline and then add them to tree

Develop Smart event handlersE.g instead of listening to event on each table cell,

listen to the table event, as event always bubbles to the parent

Page Optimze ToolsYslow

Firefox plugin It analyzes web pages and suggests ways to

improve performance

Google page speedFirefox 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 EnvProject 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 breakpointsWorks in FF only

Chrome also has a Javascript console

IE also has a Web developer plugin

JSFiddle.netFaster development of POC snippets

Run Test and Share

Good for Interview Prep

HTTP Proxy - FiddlerIntercepts 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 a better understanding.

Thank You