Shorthand Conditional JavaScript variable checking using ||

In this article I will highlight a shorthand method of JavaScript conditional variable checking. The || operator is commonly recognized as “OR” but it’s usage is broader than some people would think.

You might have occasion to have a variable declaration purposefully override a desired value. In this example the start will be zero unless the start variable has been declared with and assigned value:

Long Hand

var start
/*..bunch o' code..*/
if (!start){
	start = 0
}

Shorter hand

var start
/*..bunch o' code..*/
start= (start) ? start : 0

Shortest Hand

var start
/*..bunch o' code..*/
var start= start || 0

This shorthand use of || can be used anywhere in your code for example, at the end of a function:

var start
/*..bunch o' code..*/
function doStuff(){
	//do some stuff
	return (start || 0) //return start or if that is null/blank/false then zero
}

As a point of reference you might see something like this at the start of an external library which uses Nested Namespacing of object declaration:

var utils = utils || {}

The reason it is done like this is to ensure that the global utils variable is either declared properly as a blank array, or if it already exists it is not over-written.

jQuery in XPages #19 – Shadow (Add eye catching drop shadows to your page elements)

In this article I will describe how to implement and use the jQuery shadow plugin to create great looking shadowed panels within your XPages application.

Demonstration

The XPages integration of shadow is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Shadow

Introduction

“Adapted from Nicholas Gallagher’s CSS drop shadows without images demo

Adding “depth” to the visual aspect of your website is one of those things which can make them “pop” (pun intended). Using the shadow plugin, one line of code can be the difference between “meh” and “wow”.

Browser support?

Here’s the nice bit IE9, Firefox 3.5 Chrome, Safari – which means it works in XPiNC as well, and that’s sweet!

shad4

How does it work?

The main driver behind this plugin is really Nicholas Gallagher’s CSS drop shadows without images demo. The plug author just wrapped it as a jQuery plugin to make his and everyone else’s life easier.

Using the plugin could not be easier. Using the normal jQuery selector you identify the design element(s) you want to add a shadow to and then determine which type of shadow to add.

We add the plugin to the WebContent folder within our database and reference it in our source code

<script src="jquery-shadow/jquery.shadow.js"></script>
<link rel="stylesheet" href="jquery-shadow/jquery.shadow.css" />

And then add the code to call the plugin updating the elements with the vpDemo class

   $('.vpDemo').shadow('raised')

Examples
The first example you can see on the website is just a simple view panel. You click the but to. And you can see the effect.

shad1

The second example is an xe:widgetContainer widget from the extension library – this has a dojo stylesheet already applied but the shadow works nicely

shad2

The final example allows you appling it to the xp:panel.

shad3

Other styles

There are other styles  available other than ‘raised’ check out the website demo examples to see the others but be aware that they do not all work in all browsers.

Conclusion

As with most of the plugins in this series – for next to no effort, you get a big payoff in user interface enhancements. In this case even more so because this is all CSS3 and no images necessary.

Just a note

Many people ask me how long it really takes to create the demos and get the functionality into the database.

Well figured this out at 3pm this afternoon, finished work (at 5pm), cooked dinner for the kids, went to a school PTA meeting, put the kids to bed, started writing the blog and finished the demo by 11pm – so not long really 🙂

Caveat from the author

These are his words on the git hub repo – heed them, or not 🙂

“The purpose of this is to make it easier, as you don’t need to remember the specific css class names.

However, this is extremely bad practice… and should not be used for a production site, but feel free to use it for prototyping…”

JavaScript variable hoisting

In this article I will give a quick overview of JavaScript hoisting and explain why sometimes your variables are not doing what you expect them to.

In the following example we have a very simple variable declaration and function:

var msg = "hello world"
function sayHi(){
	alert(msg)
}
sayHi()

If you run this through firebug you get the expected message in the browser

js1

However if you change the code slightly you do not get the initially expected response. When you run the following code you get ‘undefined’ as the answer when you would possibly expect to see “hello world”

var msg = "hello world"
function sayHi(){
	alert(msg)
	var msg = "hello galaxy" //<--- new line of code
}
sayHi()

js2
This is due to what is called “JavaScript hoisting” and there is an excellent article on it here – http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html. What is basically happening is that although you did not write it, the function level scoping of var msg = “hello galaxy” is declaring the variable msg at the top of the function before anything else executes.

So what you are really doing is this:

var msg = "hello world"
function sayHi(){
	var msg
	alert(msg)
	msg = "hello galaxy"
}
sayHi()

js3

I recommend you read the article I mentioned and understand how JavaScript scoping differs from other programming languages.