Tag Archives: javascript

ECMAScript 5 Showing Up In Browsers

Posted on by

A better JavaScript!  ECMAScript 5 was standardized in late 2009 but only recently has it has started showing up in browsers.

It supersedes the 3rd edition, which was ratified in 1999.  This is in IE 9+.

ECMAScript 5 has actually two modes

  • ES5/Default
  • ES5/Strict – Switching to strict mode requires the statement shown to be placed at the start of a file or function. — ‘use strict’;

Future versions are going to be built on top of ES5/Strict and it is recommended that the default version be avoided.

Douglas Crockford goes through what the features are, what can be used right now and what your kids will be able to use: http://channel9.msdn.com/events/MIX/MIX11/EXT13

Some features:

  • Can use trailing commas:  { “trailing”: “comma”, }  or [ “trailing”, “comma”, ]
  • Constants – Infinity, NaN
  • parseInt works!  parseInt(‘08’) === 8
  • JSON.parse(text, reviver) & JSON.stringify(value, replacer, space)
  • Function.prototype.bind added
  • String.prototype.trim added
  • Array.prototype.every added
  • Array.isArray()
  • get/set: These are the getter and setter functions needed for accessor properties
  • Object.keys (much better than for-in)!
  • Object.create
  • Attributes – Value, Writable, Enumerable, Configurable, Get, Set
  • Can limit the object extensibility which can make the object immutable.
  • Strict mode
    • Reserved words: implements, intereface, let, package, private, protected, etc.
    • No more implied glabal variables within functions
    • “this” is not bound to the global object by function form.

Login Switcher

Posted on by

This Greasemonkey plugin works in Chrome and Firefox. The purpose is specific to Windchill but could be programmed to work for any website that you need to continually login to with different users.

—-
Do you frequently switch between different users in Windchill, have you ever just wanted to log out. This script adds a
configurable list of links to the top of the page (specifically for 10.0) allowing you to switch users or logout with a single click.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
// ==UserScript==
// @name Windchill User Switcher/Logout
// @description Allow logging out and switching between users with a single click
// @namespace
// @include http://*.<HOST SITE>.com*/Windchill/app/*
// @author Ryan Alberts ralberts@ptc.com
// ==/UserScript==

//--------------------------------------------------------------------------
// Support for Chrome
//--------------------------------------------------------------------------

if (typeof GM_deleteValue == 'undefined') {
    GM_addStyle = function(css) {
        var style = document.createElement('style');
        style.textContent = css;
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    GM_deleteValue = function(name) {
        localStorage.removeItem(name);
    }

    GM_getValue = function(name, defaultValue) {
        var value = localStorage.getItem(name);
        if (!value)
            return defaultValue;
        var type = value[0];
        value = value.substring(1);
        switch (type) {
            case 'b':
                return value == 'true';
            case 'n':
                return Number(value);
            default:
                return value;
        }
    }

    GM_log = function(message) {
        console.log(message);
    }

     GM_registerMenuCommand = function(name, funk) {
    //todo
    }

    GM_setValue = function(name, value) {
        value = (typeof value)[0] + value;
        localStorage.setItem(name, value);
    }
}


//--------------------------------------------------------------------------
// End Support for Chrome
//--------------------------------------------------------------------------


var cachedLogins = null;

function getLogins() {
  var logins;
  if (cachedLogins == null) {
    cachedLogins = new Array();
    if (!GM_getValue('logins')) {
      logins = ["logout:null", "demo:demo", "wcadmin:wcadmin"];
      GM_setValue('logins',logins.join(','));
    }
    logins = GM_getValue('logins','[]').split(',');
    for (var i in logins) {
                        var loginName = logins[i].substring(0,logins[i].indexOf(':'));
      cachedLogins[loginName] = logins[i];
    }
  }

  return cachedLogins;
}

function fillLoginsIn() {
  logins = GM_getValue('logins', '[]').split(',');
    console.log("Decoded logins", logins);
  var str = "";
  for (x in logins) {
    str += logins[x] + "\n";
  }

  document.getElementById('loginEditorTextArea').value = str;
}

function saveLogins() {
  var logins = document.getElementById('loginEditorTextArea').value.split('\n');;
  GM_setValue('logins', logins.join(','));
  cachedLogins = null;
  resetLogins(document.getElementById('loginsList'));
}

function resetLogins(div) {
   div.innerHTML="";
   var logins = getLogins();
   var loc = window.location;
   for (var user in logins) {
      var link = document.createElement('a');
      link.href = loc.protocol + "//" + logins[user] + "@"+ loc.host + ":" + loc.port + loc.pathname + loc.search;
      link.style.marginLeft = "3px";
      link.style.marginRight = "3px";
      link.appendChild(document.createTextNode(user));
      div.appendChild(link);
   }
}

function addLogger () {
   console.log("addLogger()");
   var logger = document.createElement('div');
   logger.style.position = "absolute";
   logger.style.left = "250px";
   logger.style.background = "#FFFFFF";
   logger.style.zIndex = "99999";
   logger.style.fontSize = "10px";
   logger.style.border = "1px solid black";

   var loginsList = document.createElement('span');
   loginsList.id = 'loginsList';
   resetLogins(loginsList);
   logger.appendChild(loginsList);

   var editLink = document.createElement('a');
   editLink.id = "loginEditorLink";
   editLink.href = "#";
   editLink.appendChild(document.createTextNode("Edit Logins"));
   logger.appendChild(editLink);

   document.body.appendChild(logger);

   var loginEditor = document.createElement('div');
   loginEditor.id = 'loginEditor';
   loginEditor.style.position = "absolute";
   loginEditor.style.left = "250px";
   loginEditor.style.top = "20px";
   loginEditor.style.visibility = 'hidden';
   loginEditor.style.background = "#FFFFFF";
   loginEditor.style.zIndex = "99999";
   loginEditor.style.fontSize = "10px";
   loginEditor.style.border = "1px solid black";
   loginEditor.style.width = "200px";
   loginEditor.style.height = "200px";
   loginEditor.style.textAlign = "center";
   var textArea = document.createElement('textarea');
   textArea.id = 'loginEditorTextArea';
   textArea.style.width = "95%";
   textArea.style.height = "170px";
   loginEditor.appendChild(textArea);
   var saveBtn = document.createElement('input');
   saveBtn.type = 'button';
   saveBtn.id = 'loginEditorSaveButton';
   saveBtn.value = 'Save the Logins';
   loginEditor.appendChild(saveBtn);

   document.body.appendChild(loginEditor);

   unsafeWindow.document.getElementById('loginEditorLink').onclick = function () {
  fillLoginsIn();
  document.getElementById('loginEditor').style.visibility = 'visible';
   };
   unsafeWindow.document.getElementById('loginEditorSaveButton').onclick = function () {
  document.getElementById('loginEditor').style.visibility = 'hidden';
  saveLogins();
   };

}

window.addEventListener('load', addLogger, true);
addLogger();

Testing Ext Objects Using JsUnit

Posted on by

We are using JsUnit to test our JavaScript code.  Most of the time we end up needing to stub out methods, save the method pointers and then put the original method back once done with the test.  This is very easy to do in JavaScript so why not!

An example test method usually looks like this:

1
2
3
4
5
6
7
8
9
10
11
function test_orderTabs() {
  var originalFunction = PTC.infoPage.TabSet.fooMethod;
  PTC.infoPage.TabSet.fooMethod = function() {
    //Do somthing else instead
  };
 
  //Do testing
 
  //Put back original function
  PTC.infoPage.TabSet.fooMethod = originalFunction;
}

Recently while doing some test driven development, I thought of extending our Ext component to make a Mock object.  This is really the same idea that we use in Java for JUnit testing.  The nice thing that happens when we do this in JavaScript is that we don’t need to worry about cleaning up function pointers!

1
2
3
4
5
6
7
8
9
PTC.infoPage.TabSetMock = Ext.extend(PTC.infoPage.TabSet, {
  fooMethod: function(){
  //Do Stuff
}
});
 
tabSetMock = new PTC.infoPage.TabSetMock({
  fooConfig: BarItems
});

Then later in the test method all I needed to do was something like the following:

1
2
3
function test_orderTabs() {
  var result = tabSetMock.fooMethod();
}

The benefit is that you don’t have to save function pointers. The mock was created in the context of the test method so once the test is over the memory of the mock is eased.