JavaScript is everywhere #42:!

C:\> WSH !

Stoyan!

Programming!

JavaScript!

... is everywhere!

On the server!

Mobile!

Desktop!

Browser extensions!

Photoshop!

Form validation too!!

Shell scripting!

In Windows!

WSH: Windows Scripting Host!

C:\>edit hello.js!

var a = "Hello",! b = " WSH!",! c = a + b;!!WScript.Echo(c);!

C:\>cscript hello.js!Hello WSH!!

C:\>wscript hello.js!

Open apps!

var ie = new ActiveXObject! ("InternetExplorer.Application");!ie.Visible = true;!ie.navigate('yahoo.com');!

Firefox? !

HTTPWatch!

Speed!

1. Fix with YSlow !

2. No regressions!

Monitor!

Set limits!

e.g.!max 2 scripts!max 2 styles!max 9 images!max 0 redirects!

Scripting HTTPWatch!

var http = new ActiveXObject! ("HTTPWatch.Controller"),! ie = http.IE.New(),! ff = http.Firefox.New();!

// browser cache!ie.clearCache();!!// show HTTPWatch!ie.OpenWindow(false);!

ie.Record();!ie.GotoUrl("yahoo.com");!http.Wait(ie, -1);!ie.Stop();!!ie.CloseBrowser();!

new HTTPWatch()http://github.com/stoyan/etc/!

var http = new HTTPWatch('ff');!http.go('search.yahoo.com');!http.done();!

[video]!

var har = http.toHAR();!har = eval('(' + har + ')');!!print(har.log.browser.name);!print(har.log.browser.version);!print('# requests: ');!print(har.log.entries.length);!

Internet Explorer 6.0.29...!# requests: 10!!Firefox 3.5.6!# requests: 15!

[video]!

var comps =! http.getComponentsByType();!!for (var i in comps) {! print(i);! print(comps[i].length);!}!

redirect: 1!text/html: 3!image/gif: 4!image/png: 3!text/javascript: 1!

But wait...!

What about DOM?!

[video]!

var http = new HTTPWatch();!http.go('search.yahoo.com');!!var d = http.watch.container.document;!!print(d!

! .getElementsByTagName('*')!! .length);!

!print(d!

! .documentElement!! .innerHTML);!

require('statz.js');!!var doc = http.watch!

! ! .container.document;!var html = http.har.log!

! ! .entries[0]!! ! .response.content.text;!

!var out = statz(document, html);!print(out.join("\n"));!

JS attributes (e.g. onclick): 1207 bytes!CSS style attributes: 883!Inline JS: 5243!Inline CSS: 5015!All innerHTML: 17283!# DOM elements: 134!!Total size: 14124 bytes!Content size: 401 bytes!Content-to-markup ratio: 0.03!

To summarize...!

JavaScript!WSH!HTTPWatch!Monitor!DOM and HTTP!IE and Firefox!

Thanks!!phpied.com!