My JavaScript Blog
Parse string to XML in JavaScript
JavaScript provides an object called DOMParser that allows you to build an XML document object from a string. The following function will simply provide a wrapper to the DOMParser object with a fallback for IE8 or older.
We will add the following function to our library:
xml: {
parse: function (text) {//text to xml object
/// <summary>
/// Parse a string to XML
/// </summary>
/// <param name="text" type="string">
/// string to be parsed to XML
/// </param>
/// <returns type="XML" />
var xmlDoc;
if (window.DOMParser) {
xmlParser = new DOMParser();
xmlDoc = xmlParser.parseFromString(text, "text/xml");
} else { // Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(text);
}
return xmlDoc;
}
}
Usage
<script src="simplex.js" type="text/javascript"></script>
<head>
<script language="JavaScript">
var xmlString = "<root><item>Item 1</item><item>Item 2</item><item>Item 2</item></root>";
simplex.ready(function () {
var xml = simplex.xml.parse(xmlString);
var items = xml.getElementsByTagName('item');
for (var i = 0; i < items.length; i++) {
simplex.get('list').innerHTML += items[i].childNodes[0].nodeValue+"<br>";
}
});
</script>
</head>
<body>
<div id="list"></div>
</body>
Read More
Cookies In JavaScript
JavaScript provides the document.cookie to add and read cookies. I won’t go into details on how this object works so if you want to more in-depth information go to w3schools. The following object will add 4 methods appropriately named “set()”, “read()”, “remove()”, and “accepts()”.
cookie: {
set: function (key, val, days) {
///<summary>
/// Set a new cookie
///</summary>
///<param name="key" type="string">
/// Cookie name
///</param>
///<param name="val" type="string">
/// Cookie's value
///</param>
///<param name="days" type="number">
/// Days until expiration
///</param>
var expires = "";
if (days) {
var d = new Date();
d.setDate(d.getDate() + days);
expires = "; expires=" + d.toGMTString();
}
document.cookie = key + "=" + val + expires + "; path=/";
},
read: function (key) {
///<summary>
/// Read a cookie
///</summary>
///<param name="key" type="string">
/// Cookie name
///</param>
/// <returns type="string" />
key = key + "=";
var i = 0;
var c = document.cookie.split(';');
for (i = 0; i < c.length; i++) {
var con = c[i];
while (con.charAt(0) === ' ') {
con = con.substring(1, con.length);
}
if (con.indexOf(key) === 0) {
return con.substring(key.length, con.length);
}
}
return "";
},
remove: function (key) {
///<summary>
/// Remove a cookie
///</summary>
///<param name="key" type="string">
/// Cookie name
///</param>
simplex.cookie.set(key, "", -1);
},
accepts: function () {
///<summary>
/// Does the browser accepts cookies?
///</summary>
///<param name="key" type="string">
/// Cookie name
///</param>
/// <returns type="bool" />
var _cookie = '_simplex_cookie_test_';
simplex.cookie.set(_cookie, '1', 1);
if (simplex.cookie.read(_cookie) !== "") {
simplex.cookie.remove(_cookie);
return true;
}
return false;
}
}
Usage
<script src="simplex.js" type="text/javascript"></script>
<script language="JavaScript">
simplex.ready(function () {
//If the browser accepts cookies
if (simplex.cookie.accepts()) {
//If cookie doesn't exists set it
if (simplex.cookie.read('msg').length === 0) {
//Set cookie 'msg' with message 'Hello World' for 5 days
simplex.cookie.set('msg', 'Hello World', 5);
alert('Cookie has been set - refresh to see');
} else {
alert(simplex.cookie.read('msg'));
}
}
});
</script>
Read More
Delay Function Execution In JavaScript
The following function allow you to halt execution of a function for n milliseconds.
wait: function (delay, _function) {
///<summary>
/// Execute a function after a delay
///</summary>
///<param name="delay" type="milliseconds">
/// Time to wait
///</param>
///<param name="_function" type="function">
/// Function to execute after the delay
///</param>
if (typeof (delay) === 'undefined') {
delay = 1000;
}
window.setTimeout(function () {
if (typeof (_function) !== 'undefined') {
if (typeof (_function) === 'function') {
_function();
}
}
}, delay);
}
Usage
<script src="simplex.js" type="text/javascript"></script>
<script language="JavaScript">
simplex.ready(function () {
simplex.wait(3000, function () {
alert('hi');
});
});
</script>
Read More
Managing CSS Classes Using JavaScript
We have the CSS() function in the library so it would be cool to add a set of functions to manage CSS classes via JavaScript. Let’s create a new sub namespace within simplex called “simplex.classes” and add 5 methods called “add”, “remove”, “swap”, “toggle”, and “exists”.
Here are the functions:
classes: {
add: function (id, className) {
/// <summary>
/// Add a css class to an element
/// </summary>
/// <param name="id" type="identifier">
/// Element id,name, or reference
/// </param>
/// <param name="className" type="string">
/// CSS class name
/// </param>
if (simplex.get(id).className.length <= 0) {
simplex.get(id).className = className;
} else {
if (!simplex.classes.exists(id, className)) {
simplex.get(id).className = simplex.get(id).className + ' ' + className;
}
}
},
remove: function (id, className) {
///<summary>
/// Remove a css class from an element
///</summary>
///<param name="id" type="identifier">
/// Element id,name, or reference
///</param>
///<param name="className" type="string">
/// CSS class name
///</param>
if (simplex.get(id).className.length > 0) {
if (simplex.classes.exists(id, className)) {
simplex.get(id).className = simplex.get(id).className.replace(className, "");
}
}
},
swap: function (id, current, newClass) {
///<summary>
/// Swap a css class for another in an element
///</summary>
///<param name="id" type="identifier">
/// Element id,name, or reference
///</param>
///<param name="current" type="string">
/// current CSS class name
///</param>
///<param name="newClass" type="string">
/// new CSS class name
///</param>
simplex.classes.remove(id, current);
simplex.classes.add(id, newClass);
},
toggle: function (id, classOne, classTwo) {
///<summary>
/// Toggle between two css classes in an element
///</summary>
///<param name="id" type="identifier">
/// Element id,name, or reference
///</param>
///<param name="classOne" type="string">
/// First CSS class name
///</param>
///<param name="classTwo" type="string">
/// Second CSS class name
///</param>
if (simplex.classes.exists(id, classOne)) {
simplex.classes.remove(id, classOne);
simplex.classes.add(id, classTwo);
} else {
simplex.classes.remove(id, classTwo);
simplex.classes.add(id, classOne);
}
},
exists: function (id, className) {
///<summary>
/// does the css class exists in an element
///</summary>
///<param name="id" type="identifier">
/// Element id,name, or reference
///</param>
///<param name="className" type="string">
/// First CSS class name
///</param>
/// <returns type="bool" />
return (simplex.get(id).className.search(className) !== -1);
}
}
Usage
<style type="text/css">
.classA
{
border:1px solid #333333;
background-color:Red;
width:100px;
height:150px;
}
.classB
{
border:1px solid #333333;
background-color:Gray;
width:50px;
height:50px;
}
.classC
{
border:1px solid #333333;
background-color:Blue;
width:50px;
height:50px;
}
</style>
<script src="simplex.js" type="text/javascript"></script>
<script language="JavaScript">
simplex.ready(function () {
simplex.attach('btnAdd', 'click', function () {
simplex.classes.add('boxOne', 'classA');
});
simplex.attach('btnSwap', 'click', function () {
simplex.classes.swap('boxThree', 'classC', 'classB');
});
simplex.attach('btnRemove', 'click', function () {
simplex.classes.remove('boxTwo', 'classB');
});
simplex.attach('btnToggle', 'click', function () {
simplex.classes.toggle('boxThree', 'classC', 'classB');
});
});
</script>
<body>
<input name="btnAdd" type="button" value="Add classA to BOX ONE" /><br />
<input name="btnRemove" type="button" value="Remove classB from BOX TWO" /><br />
<input name="btnSwap" type="button" value="Swap classC to classB on BOX THREE" /><br />
<input name="btnToggle" type="button" value="Toggle between classB and classC on BOX THREE" /><br />
<br />
<div id="boxOne" >
BOX ONE
</div>
<div id="boxTwo" class="classB" >
BOX TWO
</div>
<div id="boxThree" class="classC" >
BOX THREE
</div>
</body>
Read More
Get Query String Values Using JavaScript
I will add a handy function to the simplex.js library to read query string variables using JavaScript. The function is simply reading the value of window.location.href and trying to find possible variables.
Here is the function:
queryString: function (key) {
///<summary>
/// Ready querystring value
///</summary>
///<param name="key" type="string">
/// Querystring parameter name
///</param>
/// <returns type="string" />
var address = window.location.href;
var args = address.split("?");
if (args.length === 2) {
var arg;
if (args[1].indexOf("&") !== -1) {
arg = args[1].split("&");
if (arg.length > 0) {
for (var i = 0; i < arg.length; i++) {
var sArg = arg[i].split("=");
if (sArg.length > 0) {
if ((sArg[0] == key)) {
return sArg[1];
}
}
}
}
} else {
arg = args[1].split("=");
if (arg.length > 0) {
if ((arg[0] === key)) {
return arg[1];
}
}
}
}
return "";
}
Usage
Let’s call a test page such as: http://localhost/test.html?section=a
<script src="simplex.js" type="text/javascript"></script>
<script language="JavaScript">
simplex.ready(function () {
if (simplex.queryString('section') == 'a') {
alert('Section A!');
}
});
</script>
Read More
CSS programmatically using JavaScript
Let’s create a function to add CSS programmatically using JavaScript.
CSS function:
css: function (id) {
/// <summary>
/// Add css to the style attribute of an object
/// </summary>
/// <param name="id" type="identifier">
/// Element id,name, or reference
/// </param>
var styleTxt = '';
var i = 0;
if (arguments.length >= 2) {
for (i = 1; i < arguments.length; i++) {
styleTxt += arguments[i] + ';';
}
}
if (simplex.browser.ie.isIE) {
simplex.get(id).style.cssText = styleTxt;
} else {
simplex.attribute.add(id, 'style', styleTxt);
}
}
Usage
<script src="simplex.js" type="text/javascript"></script>
<script language="JavaScript">
simplex.ready(function () {
simplex.css('box', 'border:1px solid #333333',
'height:200px',
'width:200px',
'background-color:red');
});
</script>
<body>
<div id="box"></div>
</body>
Read More
Include an external JavaScript file using JavaScript
Adding an external JavaScript file on demand is a handy function to have in a library. The idea is simple, first you new ‘script’ element, then add the necessary attirbutes, and finally you append it to the head element in the DOM tree.
script: function (_resource) {
/// <summary>
/// Include an external JavaScript resource.
/// </summary>
/// <param name="_resource" type="filename">
/// Filename of the resource to include
/// </param>
var tag = document.createElement('script');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', _resource);
document.getElementsByTagName('head')[0].appendChild(tag);
}
Usage
Let’s create a file called “test.js” with the following function:
var test = function(){
alert('hello test');
};
Now we can load it:
<script src="simplex.js" type="text/javascript"></script>
<script language='javascript'>
simplex.ready(function () {
if (typeof (test) == 'undefined') {
simplex.script('test.js');
}
simplex.attach('btn', 'click', function () {
test();
});
});
</script>
<body>
<input name="btn" type="button" value="click me" />
</body>
Read More