Archives for the ‘Javascript’ Category

20 Mar 2013
0

Tip: Understand how to compare values in JavaScript

Hi everyone. In this post I want to point out a not so common way to compare variables and their values in JavaScript.

For many out there, the common way to compare 2 values is to use the == or != operators. If we look at the example below however, you’ll notice an interesting result that is returned:

Example:

var boolFalse = false;

var boolTrue = true;

var myString = “”;

if(boolFalse == 0) //This returns True

if(boolTrue == 1) //This returns True

if(myString == 0) //This returns True

The reason why these values are returning true is because as a default, when using == or !=, JavaScript only compares the values and not their variable types.

If you wanted to perform a strict comparison between 2 variables using their Value as well as Type, then you will need to use === or !==.

Example:

if(boolFalse === 0) //This returns False

if(boolTrue === 1) //This returns False

if(boolTrue !== 1) //This returns True

if(myString === 0) //This returns False

 

I now use this as a Standard when coding in JavaScript. I hope this makes sense.

Happy coding :)

John.

Javascript , , ,
17 Jan 2013
2

XPages Tip: Pass NotesDateTime to the Javascript Date Object

Hi all.

I spent this morning creating a massive SSJS Validation Rule that had to do with Date and Time values that were provided by the User online. I think Date Objects will forever remain my Everest, because I just can’t seem to get it right without wasting hours on it.

In SSJS, the problem with the NotesDateTime Object is that properties like “getDateOnly”, “getTimeOnly” and “getLocalTime” return the values as strings. If you want to compare values, you’re in for a tough time.

Now the Javascript Date Object offers you way more in terms of comparing values. Click here to check an awesome function you can use in your code.

I had a scenario where I was using NotesDateTime Objects to manipulate Date/Time Values, but I wanted to pass these Date/Time Values to the JavaScript Date Object to perform compares, etc. My first attempt failed when I tried to use the “getLocalTime” property of the NotesDateTimeObject:

Note: This example is not best practice, but allows me to show you a function available in SSJS

var date1:NotesDateTime = session.CreateDateTime(“2013/01/17 06:00:00″);

var date2:Date = new Date(date1.getLocalTime());

The above-mentioned will fail because date1.getLocalTime() is an illegal Date value according to the JavaScript Date Object. Having said that, there is an awesome NotesDateTime Method called .toJavaData() that converts the value to a JavaScript Date Object:

var date1:NotesDateTime = session.CreateDateTime(“2013/01/17 06:00:00″);

var date2:Date = new Date(date1.toJavaDate());

From here use you can use the Date Object for comparing Date and Time Values.

I trust this helps :)

John.

Javascript, Tutorials, XPages , , , ,
6 Nov 2012
6

Enabling Intelli-sense in Firebug for Dojo, jQuery and Javascript

Hi everyone. There are a couple of awesome posts that were published by Johan Meyer, Ukuvuma’s senior Microsoft Developer. I thought it best to re-blog some of his posts that I feel would add a lot of value to those who follow this particular blog.

Enjoy

John.

 

From Johan Meyer at Ukuvuma Solutions

I found a nifty plugin for Firefox that enables intelli-sense in the Firebug Console for certain Javascript Frameworks.

To enable intelli-sense for Dojo, jQuery and Javascript, install the following plugin for Firefox. This will enable the intelli-sense in Firebug’s Console Window.

Get the Firebug auto-completer Plugin

Javascript , , , , , ,
29 Mar 2012
4

Lessons learned when working with Javascript Binding Expressions in CSJS

Hi everyone. Here’s a quick note on something i struggled with yesterday, but managed to resolve with the help of Tommy Valand and Paul Withers. Thank you gents :) .

 

I find myself working more and more with Client Side Javascript to make use of Dojo, but still need access to Scoped Variables and Server-Side Objects. A typical way of running or accessing Server-Side objects is by using Javascript Binding Expressions in your CSJS Editor. Below are 2 examples of Javascript Binding Expressions:

  • “#{javascript:getComponent(‘ControlID’).getValue();}”
  • “#{javascript:viewScope.VariableName}”

 

PROBLEM 1

As a best practice I store all my functions in Script Libraries, and not directly in XPages. The advantages of this are:

  1. All your code and logic are stored centrally in a Script Library.
  2. If you need to modify any of your Script Libraries, you don’t need to re-build your Notes Database

So the problem I faced here is that my Javascript Expressions were not evaluating. They were returning null values even though I know for a fact that my expressions are correctly set.

Understanding Why

The reason my expressions weren’t evaluating is because they can only work in a XPage, Custom Control or Theme Design Element, and not a Script Library or external JS File.

Workaround

The solution to this is to run these Expressions inside the XPage or Custom Control where you have your function, and then pass the result of your expressions to the Javascript Function that exists in your Script Library.

I myself am not too crazy about this because now there’s more code that I have to maintain inside my XPages vs Script Library, but it’s not the end of the world.

 

PROBLEM 2

So now I placed my Javascript Binding Expressions in one of my XPages, within the onComplete Event of a button. They were no longer returning null values, but instead returning Empty String Values.

A Quick Scenario: A User creates a new document, and when clicking on the button, I have SSJS code that populates fields and Scoped Variables, and performs a partial refresh. The idea is that my code in the OnComplete event grabs the new values populated and uses Dojo to manipulate the page.

Understanding Why

The reason why my expressions were now returning Empty String Values is because the functions within the Javascript Expressions are rendered on Load of the XPage.

i.e. “#{javascript:viewScope.VariableName}” was rendered when the page was created, not when the button was clicked. The Scoped Variable was empty at that stage of the Page Loading.

Workaround

There  is a simple way around this, and it’s called a Remote Service. This is a Custom Control that ships with the XPages Extension Library. I’ve created a Video Tutorial that explains how this Service Works. In Short, a Remote Service allows you to call SSJS Functions within Client-Side Javascript, as well as passing parameters and getting a handle result.

Click Here to view the Tutorial on how to use Remote Services in your XPages.

 

I trust you found this Blog Post useful. I always appreciate feedback or better alternatives if you have any.

Until next time.

Cheers,

John.

Javascript, XPages , , , , , , , , ,
15 Mar 2012
2

Use YSlow to measure your Site’s performance and more

Hi Everyone.  Here’s a quick post that I’m sure will make all the difference in your Web Dev Life.

There is a Browser plug-in called YSlow. You can install it on Firefox, Chrome, Safari, Opera and more. I’m going to use the Firefox plug-in for this example.

NOTE: For Firefox, you need to install Firebug to use this plug-in, as it’s an extension to Firebug.

Once you’ve installed the Firebug and YSlow plug-in, and restarted your Browser, do the following:

1. Open your Website. In my example I’m using my XPages Showcase for this example.

2. Push F12 on your keyboard. This will open the Firebug Window at the bottom of the Browser.

3. Click on the YSlow Tab. You’ll see an introduction Page, and a button at the bottom that says “Run Test”. This takes about 2-5 seconds to run.

 

 

4. Once completed, YSlow returns a set of results. You’ll get an overall Grade with a Performance score. (Please don’t judge me for getting a C. YSlow’s moaning at me for not optimizing CSS and JS files,  but there’s a reason for that…)

5. If you take a look at the 3rd Red Arrow on the Image, you’ll see it’s pointing to the Ruleset List. This is pretty awesome, because you can set the rules and benchmark for how your site should be measured. There is a YSlow Add-On called Web Metrics Framework, which is a ruleset that measures your Website according to Google’s Standards.

6. If you go into each of the sections that’s returned….e.g. Content…..you’ll get a second set of Tabs that Score you according to individual operations….See image below.

 

 

7. YSlow also comes with quite a bit of useful Hints, Tips and supporting documentation.

This add-on is easy to navigate, and very very useful. I hope it helps. Thanks Yahoo.

 

Cheers for now.

John

Best Practices, CSS, Javascript, Tutorials , , , , , , , , , , , , ,
12
Tag Cloud
Categories
Recent Tweet
Recent Comments